React-Group/ai-virtual-assistant
Archived
3
2
Fork 2
Code Issues 24 Pull requests Projects Releases Packages Wiki Activity Actions

The hidding of history and models works

Browse source
This commit is contained in:
sageTheDM 2024-09-18 11:09:43 +02:00
parent a19039d89c
commit d29fe10794
4 changed files with 567 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

57
py/templates/index.html
View file

@ -61,7 +61,7 @@
</div>
<!-- Models section -->
<div class="model-background">
<div class="model-background hidden">
<div class="models">
<div class="titel">
<h1>Different AI models</h1>
@ -110,9 +110,10 @@
</div>
</div>
<!-- Output section -->
<!-- Output section -->
<div class="output">
<div class="conversation" id="conversation">
<div class="conversation resize" id="conversation">
{% for message in messages %} {% if message.startswith('User:') %}
<div class="user-message">{{ message }}</div>
{% else %}
@ -150,33 +151,43 @@
<script>
function scrollToBottom() {
const conversation = document.getElementById("conversation");
conversation.scrollTop = conversation.scrollHeight;
const conversation = document.getElementById("conversation");
conversation.scrollTop = conversation.scrollHeight;
}
document.addEventListener("DOMContentLoaded", function () {
scrollToBottom(); // Scroll to the bottom when the page loads
scrollToBottom(); // Scroll to the bottom when the page loads
const conversation = document.getElementById("conversation");
const conversation = document.getElementById("conversation");
// Listen for changes in the conversation element
conversation.addEventListener("DOMSubtreeModified", function () {
scrollToBottom(); // Scroll to the bottom when a new message is added
});
const button = document.getElementById("toggleButton");
button.addEventListener("click", function () {
const divs = document.querySelectorAll("div.hidden");
divs.forEach((div) => {
if (div.style.display === "none" || div.style.display === "") {
div.style.display = "block"; // Show the div
} else {
div.style.display = "none"; // Hide the div
}
// Use MutationObserver to efficiently observe changes in the conversation element
const observer = new MutationObserver(() => {
scrollToBottom(); // Scroll to the bottom when a new message is added
});
observer.observe(conversation, {
childList: true,
subtree: true,
});
const button = document.getElementById("toggleButton");
button.addEventListener("click", function () {
const hiddenDivs = document.querySelectorAll("div.hidden");
const areDivsHidden = Array.from(hiddenDivs).every(div =>
getComputedStyle(div).display === "none" || getComputedStyle(div).display === ""
);
hiddenDivs.forEach((div) => {
if (getComputedStyle(div).display === "none" || getComputedStyle(div).display === "") {
div.style.display = "block"; // Show the div
div.style.width = ""; // Reset width to default
} else {
div.style.display = "none"; // Hide the div
div.style.width = ""; // Reset width to default
}
});
});
});
});
</script>
</body>