Skip to content

Instantly share code, notes, and snippets.

@kkroesch
Last active February 3, 2024 15:24
Show Gist options
  • Save kkroesch/85be719e3ae619ff671ea319c73105d5 to your computer and use it in GitHub Desktop.
Save kkroesch/85be719e3ae619ff671ea319c73105d5 to your computer and use it in GitHub Desktop.
Chatbot Scaffold, HTML with Bootstrap 5.x via CDN
const spinner = document.getElementById('spinner')
document.getElementById('userinput').addEventListener('submit', function(event) {
event.preventDefault(); // Verhindert, dass das Formular die Seite neu lädt
spinner.style.visibility = 'visible'
var textbox = document.getElementById('usermessage')
var actor = document.createElement('dt')
actor.textContent = "You"
var actorMessage = document.createElement('dd')
actorMessage.textContent = textbox.value
var timeline = document.getElementById('timeline');
timeline.appendChild(actor)
timeline.appendChild(actorMessage)
setTimeout(() => {
fetch('https://httpbin.org/post', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: textbox.value })
})
.then(response => response.json())
.then(data => {
actor = document.createElement('dt')
actor.textContent = "iQ Bot"
actorMessage = document.createElement('dd')
actorMessage.textContent = data.data
timeline.appendChild(actor)
timeline.appendChild(actorMessage)
spinner.style.visibility = 'hidden'
})
.catch((error) => {
console.error('Fehler:', error);
spinner.style.visibility = 'hidden'
})
.finally(() => {
textbox.value = '' // Setzt die Textbox zurück
})
}, 2000)
});
<!DOCTYPE html>
<html lang="de">
<head>
<title>iQ Bot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
<meta property="og:description" content="A simple HTML5 Template for new projects.">
<meta property="og:image" content="image.png">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-info p-3">
<div class="container-fluid">
<a class="navbar-brand" href="/">iQ</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class=" collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto ">
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2"
href="https://opensearch.org/docs/latest/clients/python-low-level/">OpenSearch</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" href="https://haystack.deepset.ai/">Haystack</a>
</li>
</ul>
<ul class="navbar-nav ms-auto d-none d-lg-inline-flex">
<li class="nav-item mx-2">
<a class="nav-link" href="/analyze" title="Analyze with ML"><i class="fa-solid fa-magnifying-glass-chart"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="/settings" title="Settings"><i class="fa-solid fa-gear"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="/account" title="Account"><i class="fa-solid fa-user"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="https://github.com/kkroesch/iq" target="_blank" title="Project Homepage"><i
class="fab fa-github"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<h2>Chat Test</h2>
<dl class="chathistory" id="timeline">
<dt>iQ Bot</dt>
<dd>Welcome to the Bot. Ask me anything, but be specific.</dd>
</dl>
<form id="userinput">
<div class="input-group" id="inputarea">
<div id="spinner"><i class="fa-solid fa-spinner fa-spin-pulse fa-lg"></i></div>
<input type="text" class="form-control" placeholder="Your question" id="usermessage">
<button class="btn btn-outline-secondary" type="button">Send</button>
</div>
</form>
<script src="/static/chat.js"></script>
</body>
</html>
.content {
margin: 1em;
padding-bottom: 25px;
}
.chathistory dt, dd {
margin: 0;
padding: 5px;
}
.chathistory dt {
float: left;
width: 100px; /* feste Breite für DT */
clear: left;
text-align: right;
}
.chathistory dd {
width: 400px;
margin-left: 7em;
}
#inputarea {
position: fixed;
bottom: .5em;
left: 0;
padding: 1em;
width: 100%;
/* border-top: 1px solid #ccc; /* Trennlinie, optional */
}
#spinner {
padding: .5em;
visibility: hidden;
}
.search-box {
position: relative;
margin-top: 20px;
}
.search-box input[type="text"] {
border-radius: 5px;
padding-right: 35px;
}
.search-box .search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}
.logo {
font-size: 48pt;
font-weight: bold;
text-align: center;
}
.favicon {
padding-right: 0.5em;
}
.card { border: none; }
.card ul {
display: flex;
padding: 0;
list-style: none;
max-height: .5em;
}
.card li {
margin-right: 2em;
padding-right: .3em;
}
em {
background-color: gold;
padding: 2px;
}
.navbar-custom {
border-bottom: 4px solid #f8f9fa;
}
.navbar-custom .navbar-nav .nav-link {
color: #6c757d;
}
.navbar-toggler {
border-color: #6c757d;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
h3.results-section {
border-bottom: 1px solid #6c757d;
font-size: larger;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn ease 0.5s;
animation-fill-mode: forwards;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment