Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: refine chat UI and add "Go to Chat" button on file management UI #500

Merged
merged 1 commit into from
Nov 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion libs/ktem/ktem/assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
83 changes: 71 additions & 12 deletions libs/ktem/ktem/index/file/ui.py
Original file line number Diff line number Diff line change
Expand Up @@ -135,20 +135,25 @@ def render_file_list(self):
)

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(
"Delete",
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)
Expand Down Expand Up @@ -192,15 +197,19 @@ def render_group_list(self):
"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(
"Delete",
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()
Expand Down Expand Up @@ -375,6 +384,7 @@ def file_selected(self, file_id):
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):
Expand Down Expand Up @@ -475,6 +485,9 @@ def delete_all_files(self, file_list):
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 (
Expand Down Expand Up @@ -520,6 +533,7 @@ def on_register_events(self):
self.deselect_button,
self.delete_button,
self.download_single_button,
self.chat_button,
],
show_progress="hidden",
)
Expand All @@ -540,10 +554,21 @@ def on_register_events(self):
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=[],
Expand Down Expand Up @@ -713,6 +738,7 @@ def on_register_events(self):
self.deselect_button,
self.delete_button,
self.download_single_button,
self.chat_button,
],
show_progress="hidden",
)
Expand All @@ -728,12 +754,14 @@ def on_register_events(self):
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,
],
)

Expand Down Expand Up @@ -761,26 +789,45 @@ def on_register_events(self):
],
)

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: [
gr.update(visible=True),
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(
Expand Down Expand Up @@ -1158,6 +1205,18 @@ def list_group(self, user_id, file_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):
FileGroup = self._index._resources["FileGroup"]
current_group = None
Expand Down
37 changes: 20 additions & 17 deletions libs/ktem/ktem/pages/chat/control.py
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,15 @@ def __init__(self, app):
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",
Expand All @@ -48,6 +57,16 @@ def on_building_ui(self):
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="""
Expand All @@ -68,14 +87,6 @@ def on_building_ui(self):
)

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",
Expand All @@ -92,16 +103,8 @@ def on_building_ui(self):
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:
Expand Down
Loading