feat(ui): improve chat interface (mudler#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>

Author: mudler

core/gallery/gallery.go

@@ -29,6 +29,8 @@ func InstallModelFromGallery(galleries []config.Gallery, name string, basePath s
 			if err != nil {
 				return err
 			}
+			config.Description = model.Description
+			config.License = model.License
 		} else if len(model.ConfigFile) > 0 {
 			// TODO: is this worse than using the override method with a blank cfg yaml?
 			reYamlConfig, err := yaml.Marshal(model.ConfigFile)

core/http/routes/ui.go

@@ -404,6 +404,15 @@ func RegisterUIRoutes(app *fiber.App,
 			return c.Redirect(utils.BaseURL(c))
 		}
 		modelThatCanBeUsed := ""
+		galleryConfigs := map[string]*gallery.Config{}
+
+		for _, m := range backendConfigs {
+			cfg, err := gallery.GetLocalModelConfiguration(ml.ModelPath, m.Name)
+			if err != nil {
+				continue
+			}
+			galleryConfigs[m.Name] = cfg
+		}
 
 		title := "LocalAI - Chat"
 
@@ -419,6 +428,7 @@ func RegisterUIRoutes(app *fiber.App,
 			"Title":               title,
 			"BaseURL":             utils.BaseURL(c),
 			"ModelsWithoutConfig": modelsWithoutConfig,
+			"GalleryConfig":       galleryConfigs,
 			"ModelsConfig":        backendConfigs,
 			"Model":               modelThatCanBeUsed,
 			"Version":             internal.PrintableVersion(),
@@ -434,10 +444,21 @@ func RegisterUIRoutes(app *fiber.App,
 		backendConfigs := cl.GetAllBackendConfigs()
 		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
+		galleryConfigs := map[string]*gallery.Config{}
+
+		for _, m := range backendConfigs {
+			cfg, err := gallery.GetLocalModelConfiguration(ml.ModelPath, m.Name)
+			if err != nil {
+				continue
+			}
+			galleryConfigs[m.Name] = cfg
+		}
+
 		summary := fiber.Map{
 			"Title":               "LocalAI - Chat with " + c.Params("model"),
 			"BaseURL":             utils.BaseURL(c),
 			"ModelsConfig":        backendConfigs,
+			"GalleryConfig":       galleryConfigs,
 			"ModelsWithoutConfig": modelsWithoutConfig,
 			"Model":               c.Params("model"),
 			"Version":             internal.PrintableVersion(),

core/http/static/chat.js

@@ -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 = "";