feat(ui): improve chat interface (#4910)

* feat(ui): show more informations in the chat view, minor adjustments to model gallery

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* fix(ui): UI improvements

Visual improvements and bugfixes including:
- disable pagination during search
- fix scrolling on new message

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

---------

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto 2025-02-26 18:27:18 +01:00 committed by GitHub
parent 5ad2be9c45
commit c87870b18e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 421 additions and 204 deletions

View file

@ -49,7 +49,7 @@ function submitPrompt(event) {
document.getElementById("input").value = "";
const key = localStorage.getItem("key");
const systemPrompt = localStorage.getItem("system_prompt");
Alpine.nextTick(() => { document.getElementById('messages').scrollIntoView(false); });
promptGPT(systemPrompt, key, input);
}
@ -74,7 +74,6 @@ function readInputImage() {
// Make the "loader" visible
document.getElementById("loader").style.display = "block";
document.getElementById("input").disabled = true;
document.getElementById('messages').scrollIntoView(false)
messages = Alpine.store("chat").messages();
@ -181,8 +180,8 @@ function readInputImage() {
const chatStore = Alpine.store("chat");
chatStore.add("assistant", token);
// Efficiently scroll into view without triggering multiple reflows
const messages = document.getElementById('messages');
messages.scrollTop = messages.scrollHeight;
// const messages = document.getElementById('messages');
// messages.scrollTop = messages.scrollHeight;
};
let buffer = "";