Feat/new UI (#13)

* new custom theme

* improve css: scrollbar, header, tabs and buttons

* update settings tab

* open file index selector by default

* update chat control panel

* update chat panel

* update file index page

* cap gradio<=4.22.0

* rename admin page

* adjust UI

* update flowsettings

* auto start in browser

* change colour for edit LLM page's button

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

@@ -41,7 +41,7 @@ class ChatPage(BasePage):
                         continue
 
                     index_ui.unrender()  # need to rerender later within Accordion
-                    with gr.Accordion(label=f"{index.name} Index", open=False):
+                    with gr.Accordion(label=f"{index.name} Index", open=True):
                         index_ui.render()
                         gr_index = index_ui.as_gradio_component()
                         if gr_index:

libs/ktem/ktem/pages/chat/chat_panel.py

@@ -9,17 +9,33 @@ class ChatPanel(BasePage):
 
     def on_building_ui(self):
         self.chatbot = gr.Chatbot(
+            label="Kotaemon",
+            # placeholder="This is the beginning of a new conversation.",
+            show_label=True,
             elem_id="main-chat-bot",
             show_copy_button=True,
             likeable=True,
-            show_label=False,
+            bubble_full_width=False,
         )
         with gr.Row():
             self.text_input = gr.Text(
-                placeholder="Chat input", scale=15, container=False
+                placeholder="Chat input",
+                scale=15,
+                container=False,
+            )
+            self.submit_btn = gr.Button(
+                value="Send",
+                scale=1,
+                min_width=10,
+                variant="primary",
+                elem_classes=["cap-height"],
+            )
+            self.regen_btn = gr.Button(
+                value="Regen",
+                scale=1,
+                min_width=10,
+                elem_classes=["cap-height"],
             )
-            self.submit_btn = gr.Button(value="Send", scale=1, min_width=10)
-            self.regen_btn = gr.Button(value="Regen", scale=1, min_width=10)
 
     def submit_msg(self, chat_input, chat_history):
         """Submit a message to the chatbot"""

libs/ktem/ktem/pages/chat/control.py

@@ -29,47 +29,42 @@ class ConversationControl(BasePage):
         self.on_building_ui()
 
     def on_building_ui(self):
-        with gr.Accordion(label="Conversation control", open=True):
-            self.conversation_id = gr.State(value="")
-            self.conversation = gr.Dropdown(
-                label="Chat sessions",
-                choices=[],
+        gr.Markdown("## Conversations")
+        self.conversation_id = gr.State(value="")
+        self.conversation = gr.Dropdown(
+            label="Chat sessions",
+            choices=[],
+            container=False,
+            filterable=False,
+            interactive=True,
+        )
+
+        with gr.Row() as self._new_delete:
+            self.btn_new = gr.Button(value="New", min_width=10, variant="primary")
+            self.btn_del = gr.Button(value="Delete", min_width=10, variant="stop")
+
+        with gr.Row(visible=False) as self._delete_confirm:
+            self.btn_del_conf = gr.Button(
+                value="Delete",
+                variant="stop",
+                min_width=10,
+            )
+            self.btn_del_cnl = gr.Button(value="Cancel", min_width=10)
+
+        with gr.Row():
+            self.conversation_rn = gr.Text(
+                placeholder="Conversation name",
                 container=False,
-                filterable=False,
+                scale=5,
+                min_width=10,
                 interactive=True,
             )
-
-            with gr.Row() as self._new_delete:
-                self.btn_new = gr.Button(value="New", min_width=10)
-                self.btn_del = gr.Button(value="Delete", min_width=10)
-
-            with gr.Row(visible=False) as self._delete_confirm:
-                self.btn_del_conf = gr.Button(
-                    value="Delete",
-                    variant="primary",
-                    min_width=10,
-                )
-                self.btn_del_cnl = gr.Button(value="Cancel", min_width=10)
-
-            with gr.Row():
-                self.conversation_rn = gr.Text(
-                    placeholder="Conversation name",
-                    container=False,
-                    scale=5,
-                    min_width=10,
-                    interactive=True,
-                )
-                self.conversation_rn_btn = gr.Button(
-                    value="Rename", scale=1, min_width=10
-                )
-
-        # current_state = gr.Text()
-        # show_current_state = gr.Button(value="Current")
-        # show_current_state.click(
-        #     lambda a, b: "\n".join([a, b]),
-        #     inputs=[cid, self.conversation],
-        #     outputs=[current_state],
-        # )
+            self.conversation_rn_btn = gr.Button(
+                value="Rename",
+                scale=1,
+                min_width=10,
+                elem_classes=["no-background", "body-text-color", "bold-text"],
+            )
 
     def load_chat_history(self, user_id):
         """Reload chat history"""

libs/ktem/ktem/pages/settings.py

@@ -100,13 +100,18 @@ class SettingsPage(BasePage):
         self.on_building_ui()
 
     def on_building_ui(self):
-        self.setting_save_btn = gr.Button("Save settings")
         if self._app.f_user_management:
-            with gr.Tab("User settings"):
+            with gr.Tab("Users"):
                 self.user_tab()
-        self.app_tab()
-        self.index_tab()
-        self.reasoning_tab()
+        with gr.Tab("General"):
+            self.app_tab()
+        with gr.Tab("Document Indices"):
+            self.index_tab()
+        with gr.Tab("Reasoning Pipelines"):
+            self.reasoning_tab()
+        self.setting_save_btn = gr.Button(
+            "Save changes", variant="primary", scale=1, elem_classes=["right-button"]
+        )
 
     def on_subscribe_public_events(self):
         """