Skip to content

Instantly share code, notes, and snippets.

@ariefadjie

ariefadjie/chat.blade.php

Last active November 12, 2023 14:14
Show Gist options
  • Save ariefadjie/c5303efb3bbc000a5a3ec4bffbdeba03 to your computer and use it in GitHub Desktop.
Save ariefadjie/c5303efb3bbc000a5a3ec4bffbdeba03 to your computer and use it in GitHub Desktop.
Download ZIP
LaravAI
Raw
chat.blade.php
@extends('laravai::layout')
@section('style')
<style>
.message-green {
background: #dcf8c6;
}
</style>
@endsection
@section('script')
@endsection
@section('content')
<section>
<div class="container py-3">
<div class="text-center mb-3">
<a href="#" target="_blank">
<h4>TITLE</h2>
</a>
</div>
<div class="row">
<div class="col-md-11 mx-auto pt-3 rounded" style="background: #ece5dd">
<ul class="list-unstyled overflow-scroll" style="height: 380px" id="chat-messages">
</ul>
<form method="post" action="#" id="form-chat">
@csrf
<div class="mb-3">
<div class="form-outline">
<textarea name="message" class="form-control bg-white rounded-pill" rows="2"
placeholder="Message"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary btn-rounded float-end">Send</button>
</form>
</div>
</div>
</div>
</section>
@endsection
Raw
chat.js
var formChat = document.getElementById('form-chat');
var chatMessages = document.getElementById('chat-messages');
var messageKey = 0;
formChat.addEventListener('submit', e => {
e.preventDefault();
var message = e.target.message.value;
var messageTemplates = `
<li class="d-flex mb-3 flex-row-reverse">
<div class="card w-75 message-green">
<div class="card-body p-2">
<p class="mb-0">
${message}
</p>
</div>
</div>
</li>
<li class="d-flex mb-3 flex-row">
<div class="card w-75">
<div class="card-body p-2" id="chat-answer-${messageKey}">
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Thinking...</span>
</div>
</div>
</div>
</li>
`;
e.target.message.value = '';
chatMessages.innerHTML += messageTemplates;
fetch(formChat.getAttribute('action'), {
headers: {
'Content-Type': 'application/json',
},
method: formChat.getAttribute('method'),
body: JSON.stringify({ message }),
}).then(async res => {
return res.json();
})
.then(data => {
var chatAnswer = document.getElementById('chat-answer-'+messageKey);
chatAnswer.innerHTML = data.answer;
messageKey++;
});
});
Raw
embed.blade.php
@extends('laravai::layout')
@section('content')
<div class="px-4 py-5 my-5 text-center">
<h1 class="display-5 fw-bold text-body-emphasis">LaravAI</h1>
<div class="col-lg-6 mx-auto">
<p class="mb-4">
Dapatkan informasi dari tautan website melalui percakapan chatbot cerdas.
</p>
<form method="post" action="#">
@csrf
<div class="input-group">
<input name="url" required type="url" class="form-control rounded-start border-primary"
placeholder="masukkan tautan disini" aria-label="Search" aria-describedby="search-addon" />
<button type="submit" class="btn btn-primary">submit</button>
</div>
</form>
</div>
</div>
@endsection
Raw
layout.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LaravAI</title>
<link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet">
@yield('style')
</head>
<body>
<main>
@yield('content')
</main>
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>
@yield('script')
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment