Public/kotaemon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine UI and add go to chat btn (#500) bump:minor

Browse Source
This commit is contained in:
Tuan Anh Nguyen Dang (Tadashi_Cin) 2024-11-18 14:48:15 +07:00 committed by GitHub
parent d42b4773cb
commit 74124323e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 104 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
libs/ktem/ktem/assets/css/main.css
View File

@ -160,7 +160,19 @@ mark {
#toggle-dark-button { #toggle-dark-button {
position: fixed; position: fixed;
top: 6px; 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 { .upload-button {

83
libs/ktem/ktem/index/file/ui.py
View File

@ -135,13 +135,14 @@ class FileIndexPage(BasePage):
) )
with gr.Row(): with gr.Row():
self.deselect_button = gr.Button(
"Close", self.chat_button = gr.Button(
"Go to Chat",
visible=False, visible=False,
) )
self.is_zipped_state = gr.State(value=False) self.is_zipped_state = gr.State(value=False)
self.download_single_button = gr.DownloadButton( self.download_single_button = gr.DownloadButton(
"Download file", "Download",
visible=False, visible=False,
) )
self.delete_button = gr.Button( self.delete_button = gr.Button(
@ -149,6 +150,10 @@ class FileIndexPage(BasePage):
variant="stop", variant="stop",
visible=False, visible=False,
) )
self.deselect_button = gr.Button(
"Close",
visible=False,
)
with gr.Row() as self.selection_info: with gr.Row() as self.selection_info:
self.selected_file_id = gr.State(value=None) self.selected_file_id = gr.State(value=None)
@ -192,8 +197,8 @@ class FileIndexPage(BasePage):
"Add", "Add",
variant="primary", variant="primary",
) )
self.group_close_button = gr.Button( self.group_chat_button = gr.Button(
"Close", "Go to Chat",
visible=False, visible=False,
) )
self.group_delete_button = gr.Button( self.group_delete_button = gr.Button(
@ -201,6 +206,10 @@ class FileIndexPage(BasePage):
variant="stop", variant="stop",
visible=False, visible=False,
) )
self.group_close_button = gr.Button(
"Close",
visible=False,
)
with gr.Column(visible=False) as self._group_info_panel: with gr.Column(visible=False) as self._group_info_panel:
self.group_label = gr.Markdown() 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),
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): def delete_event(self, file_id):
@ -475,6 +485,9 @@ class FileIndexPage(BasePage):
for file_id in file_list.id.values: for file_id in file_list.id.values:
self.delete_event(file_id) 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): def show_delete_all_confirm(self, file_list):
# when the list of files is empty it shows a single line with id equal to - # when the list of files is empty it shows a single line with id equal to -
if len(file_list) == 0 or ( if len(file_list) == 0 or (
@ -520,6 +533,7 @@ class FileIndexPage(BasePage):
self.deselect_button, self.deselect_button,
self.delete_button, self.delete_button,
self.download_single_button, self.download_single_button,
self.chat_button,
], ],
show_progress="hidden", show_progress="hidden",
) )
@ -540,10 +554,21 @@ class FileIndexPage(BasePage):
self.deselect_button, self.deselect_button,
self.delete_button, self.delete_button,
self.download_single_button, self.download_single_button,
self.chat_button,
], ],
show_progress="hidden", 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( self.download_all_button.click(
fn=self.download_all_files, fn=self.download_all_files,
inputs=[], inputs=[],
@ -713,6 +738,7 @@ class FileIndexPage(BasePage):
self.deselect_button, self.deselect_button,
self.delete_button, self.delete_button,
self.download_single_button, self.download_single_button,
self.chat_button,
], ],
show_progress="hidden", show_progress="hidden",
) )
@ -728,12 +754,14 @@ class FileIndexPage(BasePage):
gr.update(visible=False), gr.update(visible=False),
gr.update(visible=True), gr.update(visible=True),
gr.update(visible=True), gr.update(visible=True),
gr.update(visible=True),
), ),
outputs=[ outputs=[
self._group_info_panel, self._group_info_panel,
self.group_add_button, self.group_add_button,
self.group_close_button, self.group_close_button,
self.group_delete_button, self.group_delete_button,
self.group_chat_button,
], ],
) )
@ -761,13 +789,30 @@ class FileIndexPage(BasePage):
], ],
) )
onGroupSaved = self.group_save_button.click( self.group_chat_button.click(
fn=self.save_group, fn=self.set_group_id_selector,
inputs=[self.group_name, self.group_files, self._app.user_id], inputs=[self.group_name],
).then( outputs=[
self.list_group, self._index.get_selector_component_ui().selector,
inputs=[self._app.user_id, self.file_list_state], self._index.get_selector_component_ui().mode,
outputs=[self.group_list_state, self.group_list], 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( self.group_close_button.click(
fn=lambda: [ 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),
gr.update(visible=False), gr.update(visible=False),
gr.update(visible=False),
], ],
outputs=[ outputs=[
self.group_add_button, self.group_add_button,
self._group_info_panel, self._group_info_panel,
self.group_close_button, self.group_close_button,
self.group_delete_button, self.group_delete_button,
self.group_chat_button,
], ],
) )
onGroupDeleted = self.group_delete_button.click( onGroupDeleted = self.group_delete_button.click(
@ -1158,6 +1205,18 @@ class FileIndexPage(BasePage):
return results, group_list 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): def save_group(self, group_name, group_files, user_id):
FileGroup = self._index._resources["FileGroup"] FileGroup = self._index._resources["FileGroup"]
current_group = None current_group = None

37
libs/ktem/ktem/pages/chat/control.py
View File

@ -40,6 +40,15 @@ class ConversationControl(BasePage):
def on_building_ui(self): def on_building_ui(self):
with gr.Row(): with gr.Row():
gr.Markdown("## Conversations") 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( self.btn_toggle_dark_mode = gr.Button(
value="", value="",
icon=f"{ASSETS_DIR}/dark_mode.svg", icon=f"{ASSETS_DIR}/dark_mode.svg",
@ -48,6 +57,16 @@ class ConversationControl(BasePage):
elem_classes=["no-background", "body-text-color"], elem_classes=["no-background", "body-text-color"],
elem_id="toggle-dark-button", 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( self.btn_toggle_dark_mode.click(
None, None,
js=""" js="""
@ -68,14 +87,6 @@ class ConversationControl(BasePage):
) )
with gr.Row() as self._new_delete: 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( self.btn_del = gr.Button(
value="", value="",
icon=f"{ASSETS_DIR}/delete.svg", icon=f"{ASSETS_DIR}/delete.svg",
@ -92,16 +103,8 @@ class ConversationControl(BasePage):
size="sm", size="sm",
elem_classes=["no-background", "body-text-color"], 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( 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: with gr.Row(visible=False) as self._delete_confirm: