From 74124323e89d8546847e936ae7a746b5cabe5a2d Mon Sep 17 00:00:00 2001 From: "Tuan Anh Nguyen Dang (Tadashi_Cin)" Date: Mon, 18 Nov 2024 14:48:15 +0700 Subject: [PATCH] feat: refine UI and add go to chat btn (#500) bump:minor --- libs/ktem/ktem/assets/css/main.css | 14 ++++- libs/ktem/ktem/index/file/ui.py | 83 ++++++++++++++++++++++++---- libs/ktem/ktem/pages/chat/control.py | 37 +++++++------ 3 files changed, 104 insertions(+), 30 deletions(-) diff --git a/libs/ktem/ktem/assets/css/main.css b/libs/ktem/ktem/assets/css/main.css index 1b2c660..97cc890 100644 --- a/libs/ktem/ktem/assets/css/main.css +++ b/libs/ktem/ktem/assets/css/main.css @@ -160,7 +160,19 @@ mark { #toggle-dark-button { position: fixed; top: 6px; - right: 40px; + right: 60px; +} + +#info-expand-button { + position: fixed; + top: 6px; + right: 85px; +} + +#new-conv-button > img { + position: relative; + top: 0px; + right: -50%; } .upload-button { diff --git a/libs/ktem/ktem/index/file/ui.py b/libs/ktem/ktem/index/file/ui.py index 2779335..e440fbf 100644 --- a/libs/ktem/ktem/index/file/ui.py +++ b/libs/ktem/ktem/index/file/ui.py @@ -135,13 +135,14 @@ class FileIndexPage(BasePage): ) with gr.Row(): - self.deselect_button = gr.Button( - "Close", + + self.chat_button = gr.Button( + "Go to Chat", visible=False, ) self.is_zipped_state = gr.State(value=False) self.download_single_button = gr.DownloadButton( - "Download file", + "Download", visible=False, ) self.delete_button = gr.Button( @@ -149,6 +150,10 @@ class FileIndexPage(BasePage): variant="stop", visible=False, ) + self.deselect_button = gr.Button( + "Close", + visible=False, + ) with gr.Row() as self.selection_info: self.selected_file_id = gr.State(value=None) @@ -192,8 +197,8 @@ class FileIndexPage(BasePage): "Add", variant="primary", ) - self.group_close_button = gr.Button( - "Close", + self.group_chat_button = gr.Button( + "Go to Chat", visible=False, ) self.group_delete_button = gr.Button( @@ -201,6 +206,10 @@ class FileIndexPage(BasePage): variant="stop", visible=False, ) + self.group_close_button = gr.Button( + "Close", + visible=False, + ) with gr.Column(visible=False) as self._group_info_panel: self.group_label = gr.Markdown() @@ -375,6 +384,7 @@ class FileIndexPage(BasePage): gr.update(visible=file_id is not None), gr.update(visible=file_id is not None), gr.update(visible=file_id is not None), + gr.update(visible=file_id is not None), ) def delete_event(self, file_id): @@ -475,6 +485,9 @@ class FileIndexPage(BasePage): for file_id in file_list.id.values: self.delete_event(file_id) + def set_file_id_selector(self, selected_file_id): + return [selected_file_id, "select", gr.Tabs(selected="chat-tab")] + def show_delete_all_confirm(self, file_list): # when the list of files is empty it shows a single line with id equal to - if len(file_list) == 0 or ( @@ -520,6 +533,7 @@ class FileIndexPage(BasePage): self.deselect_button, self.delete_button, self.download_single_button, + self.chat_button, ], show_progress="hidden", ) @@ -540,10 +554,21 @@ class FileIndexPage(BasePage): self.deselect_button, self.delete_button, self.download_single_button, + self.chat_button, ], show_progress="hidden", ) + self.chat_button.click( + fn=self.set_file_id_selector, + inputs=[self.selected_file_id], + outputs=[ + self._index.get_selector_component_ui().selector, + self._index.get_selector_component_ui().mode, + self._app.tabs, + ], + ) + self.download_all_button.click( fn=self.download_all_files, inputs=[], @@ -713,6 +738,7 @@ class FileIndexPage(BasePage): self.deselect_button, self.delete_button, self.download_single_button, + self.chat_button, ], show_progress="hidden", ) @@ -728,12 +754,14 @@ class FileIndexPage(BasePage): gr.update(visible=False), gr.update(visible=True), gr.update(visible=True), + gr.update(visible=True), ), outputs=[ self._group_info_panel, self.group_add_button, self.group_close_button, self.group_delete_button, + self.group_chat_button, ], ) @@ -761,13 +789,30 @@ class FileIndexPage(BasePage): ], ) - onGroupSaved = self.group_save_button.click( - fn=self.save_group, - inputs=[self.group_name, self.group_files, self._app.user_id], - ).then( - self.list_group, - inputs=[self._app.user_id, self.file_list_state], - outputs=[self.group_list_state, self.group_list], + self.group_chat_button.click( + fn=self.set_group_id_selector, + inputs=[self.group_name], + outputs=[ + self._index.get_selector_component_ui().selector, + self._index.get_selector_component_ui().mode, + self._app.tabs, + ], + ) + + onGroupSaved = ( + self.group_save_button.click( + fn=self.save_group, + inputs=[self.group_name, self.group_files, self._app.user_id], + ) + .then( + self.list_group, + inputs=[self._app.user_id, self.file_list_state], + outputs=[self.group_list_state, self.group_list], + ) + .then( + fn=lambda: gr.update(visible=False), + outputs=[self._group_info_panel], + ) ) self.group_close_button.click( fn=lambda: [ @@ -775,12 +820,14 @@ class FileIndexPage(BasePage): gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), + gr.update(visible=False), ], outputs=[ self.group_add_button, self._group_info_panel, self.group_close_button, self.group_delete_button, + self.group_chat_button, ], ) onGroupDeleted = self.group_delete_button.click( @@ -1158,6 +1205,18 @@ class FileIndexPage(BasePage): return results, group_list + def set_group_id_selector(self, selected_group_name): + FileGroup = self._index._resources["FileGroup"] + + # check if group_name exist + with Session(engine) as session: + current_group = ( + session.query(FileGroup).filter_by(name=selected_group_name).first() + ) + + file_ids = [json.dumps(current_group.data["files"])] + return [file_ids, "select", gr.Tabs(selected="chat-tab")] + def save_group(self, group_name, group_files, user_id): FileGroup = self._index._resources["FileGroup"] current_group = None diff --git a/libs/ktem/ktem/pages/chat/control.py b/libs/ktem/ktem/pages/chat/control.py index c1182df..7ca3f77 100644 --- a/libs/ktem/ktem/pages/chat/control.py +++ b/libs/ktem/ktem/pages/chat/control.py @@ -40,6 +40,15 @@ class ConversationControl(BasePage): def on_building_ui(self): with gr.Row(): gr.Markdown("## Conversations") + self.btn_new = gr.Button( + value="", + icon=f"{ASSETS_DIR}/new.svg", + min_width=2, + scale=1, + size="sm", + elem_classes=["no-background", "body-text-color"], + elem_id="new-conv-button", + ) self.btn_toggle_dark_mode = gr.Button( value="", icon=f"{ASSETS_DIR}/dark_mode.svg", @@ -48,6 +57,16 @@ class ConversationControl(BasePage): elem_classes=["no-background", "body-text-color"], elem_id="toggle-dark-button", ) + self.btn_info_expand = gr.Button( + value="", + icon=f"{ASSETS_DIR}/sidebar.svg", + min_width=2, + scale=1, + size="sm", + elem_classes=["no-background", "body-text-color"], + elem_id="info-expand-button", + ) + self.btn_toggle_dark_mode.click( None, js=""" @@ -68,14 +87,6 @@ class ConversationControl(BasePage): ) with gr.Row() as self._new_delete: - self.btn_new = gr.Button( - value="", - icon=f"{ASSETS_DIR}/new.svg", - min_width=2, - scale=1, - size="sm", - elem_classes=["no-background", "body-text-color"], - ) self.btn_del = gr.Button( value="", icon=f"{ASSETS_DIR}/delete.svg", @@ -92,16 +103,8 @@ class ConversationControl(BasePage): size="sm", elem_classes=["no-background", "body-text-color"], ) - self.btn_info_expand = gr.Button( - value="", - icon=f"{ASSETS_DIR}/sidebar.svg", - min_width=2, - scale=1, - size="sm", - elem_classes=["no-background", "body-text-color"], - ) self.cb_is_public = gr.Checkbox( - value=False, label="Shared", min_width=10, scale=4 + value=False, label="Share conversation", min_width=10, scale=6 ) with gr.Row(visible=False) as self._delete_confirm: