feat: add toggle for conversation control sidebar (#546) #none

Author: taprosoft

libs/ktem/ktem/assets/css/main.css

@@ -97,7 +97,7 @@ button.selected {
 #chat-info-panel {
   max-height: var(--main-area-height) !important;
   overflow: auto !important;
-  transition: all 0.5s;
+  transition: all 0.4s;
 }
 
 body.dark #chat-info-panel figure>img{
@@ -109,12 +109,12 @@ body.dark #chat-info-panel figure>img{
   flex-wrap: unset;
   overflow-y: scroll !important;
   position: sticky;
-  min-width: min(305px, 100%) !important;
   column-gap: 2px !important;
   scrollbar-width: none;
   /* Firefox */
   -ms-overflow-style: none;
   /* Internet Explorer 10+ */
+  transition: all 0.3s;
 }
 
 #conv-settings-panel::-webkit-scrollbar {
@@ -204,6 +204,13 @@ mark {
   right: 15px;
 }
 
+#chat-expand-button {
+  position: absolute;
+  top: 6px;
+  right: -10px;
+  z-index: 10;
+}
+
 #use-mindmap-checkbox {
   position: absolute;
   width: 110px;

libs/ktem/ktem/assets/icons/expand.svg

@@ -16,6 +16,29 @@ function run() {
   let chat_info_panel = document.getElementById("info-expand");
   chat_info_panel.insertBefore(info_expand_button, chat_info_panel.childNodes[2]);
 
+  // move toggle-side-bar button
+  let chat_expand_button = document.getElementById("chat-expand-button");
+  let chat_column = document.getElementById("main-chat-bot");
+  let conv_column = document.getElementById("conv-settings-panel");
+
+  let default_conv_column_min_width = "min(300px, 100%)";
+  conv_column.style.minWidth = default_conv_column_min_width
+
+  globalThis.toggleChatColumn = (() => {
+    /* get flex-grow value of chat_column */
+    let flex_grow = conv_column.style.flexGrow;
+    console.log("chat col", flex_grow);
+    if (flex_grow == '0') {
+      conv_column.style.flexGrow = '1';
+      conv_column.style.minWidth = default_conv_column_min_width;
+    } else {
+      conv_column.style.flexGrow = '0';
+      conv_column.style.minWidth = "0px";
+    }
+  });
+
+  chat_column.insertBefore(chat_expand_button, chat_column.firstChild);
+
   // move use mind-map checkbox
   let mindmap_checkbox = document.getElementById("use-mindmap-checkbox");
   let chat_setting_panel = document.getElementById("chat-settings-expand");

libs/ktem/ktem/assets/js/main.js

@@ -8,7 +8,7 @@
 from ktem.app import BasePage
 from ktem.components import reasonings
 from ktem.db.models import Conversation, engine
-from ktem.index.file.ui import File, chat_input_focus_js
+from ktem.index.file.ui import File
 from ktem.reasoning.prompt_optimization.suggest_conversation_name import (
     SuggestConvNamePipeline,
 )
@@ -31,6 +31,12 @@
 DEFAULT_SETTING = "(default)"
 INFO_PANEL_SCALES = {True: 8, False: 4}
 
+chat_input_focus_js = """
+function() {
+    let chatInput = document.querySelector("#chat-input textarea");
+    chatInput.focus();
+}
+"""
 
 pdfview_js = """
 function() {
@@ -403,6 +409,9 @@ def on_register_events(self):
             inputs=self._info_panel_expanded,
             outputs=[self.info_column, self._info_panel_expanded],
         )
+        self.chat_control.btn_chat_expand.click(
+            fn=None, inputs=None, js="function() {toggleChatColumn();}"
+        )
 
         self.chat_panel.chatbot.like(
             fn=self.is_liked,

libs/ktem/ktem/pages/chat/__init__.py

@@ -48,9 +48,17 @@ def on_building_ui(self):
                 elem_classes=["no-background", "body-text-color"],
                 elem_id="toggle-dark-button",
             )
+            self.btn_chat_expand = gr.Button(
+                value="",
+                icon=f"{ASSETS_DIR}/expand.svg",
+                scale=1,
+                size="sm",
+                elem_classes=["no-background", "body-text-color"],
+                elem_id="chat-expand-button",
+            )
             self.btn_info_expand = gr.Button(
                 value="",
-                icon=f"{ASSETS_DIR}/sidebar.svg",
+                icon=f"{ASSETS_DIR}/expand.svg",
                 min_width=2,
                 scale=1,
                 size="sm",