Improved past chats menu (#6158)

This commit is contained in:
oobabooga 2024-06-25 00:07:22 -03:00 committed by GitHub
parent 96ba53d916
commit a43c210617
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 6 deletions

View File

@ -221,6 +221,7 @@ button {
.pretty_scrollbar::-webkit-scrollbar { .pretty_scrollbar::-webkit-scrollbar {
width: 7px; width: 7px;
height: 7px;
} }
.pretty_scrollbar::-webkit-scrollbar-track { .pretty_scrollbar::-webkit-scrollbar-track {
@ -245,6 +246,10 @@ button {
background: #374151; background: #374151;
} }
.pretty_scrollbar::-webkit-scrollbar-corner {
background: transparent;
}
audio { audio {
max-width: 100%; max-width: 100%;
} }
@ -695,7 +700,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
@media screen and (width >= 1327px) { @media screen and (width >= 1327px) {
#past-chats-row { #past-chats-row {
position: absolute; position: absolute;
top: 16px; top: 36px;
left: 0; left: 0;
width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2)); width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2));
max-width: 300px; max-width: 300px;
@ -743,3 +748,47 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
display: none; display: none;
} }
} }
#past-chats {
max-height: calc(100vh - 195px);
overflow-y: scroll !important;
border-radius: 0;
scrollbar-width: none; /* Hide scrollbar in Firefox by default */
}
#past-chats label {
width: 100%;
background-color: transparent !important;
background: none;
border: 0;
border-radius: 0;
padding-top: 8px;
padding-bottom: 8px;
}
#past-chats > :nth-child(2) {
display: none;
}
#past-chats > :nth-child(3) {
gap: 0;
}
#past-chats::-webkit-scrollbar {
display: none;
}
#past-chats:hover {
scrollbar-width: auto;
}
#past-chats:hover::-webkit-scrollbar {
display: block;
}
@media screen and (width < 1327px) {
#past-chats {
max-height: 300px;
}
}

View File

@ -534,3 +534,8 @@ document.querySelectorAll(".focus-on-chat-input").forEach(element => {
document.querySelector("#chat-input textarea").focus(); document.querySelector("#chat-input textarea").focus();
}); });
}); });
//------------------------------------------------
// Fix a border around the "past chats" menu
//------------------------------------------------
document.getElementById("past-chats").parentNode.style.borderRadius = "0px";

View File

@ -62,9 +62,6 @@ def create_ui():
with gr.Row(elem_id='past-chats-row', elem_classes=['pretty_scrollbar']): with gr.Row(elem_id='past-chats-row', elem_classes=['pretty_scrollbar']):
with gr.Column(): with gr.Column():
with gr.Row():
shared.gradio['unique_id'] = gr.Dropdown(label='Past chats', elem_classes=['slim-dropdown'], interactive=not mu)
with gr.Row(): with gr.Row():
shared.gradio['rename_chat'] = gr.Button('Rename', elem_classes='refresh-button', interactive=not mu) shared.gradio['rename_chat'] = gr.Button('Rename', elem_classes='refresh-button', interactive=not mu)
shared.gradio['delete_chat'] = gr.Button('🗑️', elem_classes='refresh-button', interactive=not mu) shared.gradio['delete_chat'] = gr.Button('🗑️', elem_classes='refresh-button', interactive=not mu)
@ -74,8 +71,13 @@ def create_ui():
with gr.Row(elem_id='rename-row'): with gr.Row(elem_id='rename-row'):
shared.gradio['rename_to'] = gr.Textbox(label='Rename to:', placeholder='New name', visible=False, elem_classes=['no-background']) shared.gradio['rename_to'] = gr.Textbox(label='Rename to:', placeholder='New name', visible=False, elem_classes=['no-background'])
shared.gradio['rename_to-confirm'] = gr.Button('Confirm', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input']) with gr.Row():
shared.gradio['rename_to-cancel'] = gr.Button('Cancel', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input']) shared.gradio['rename_to-confirm'] = gr.Button('Confirm', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input'])
shared.gradio['rename_to-cancel'] = gr.Button('Cancel', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input'])
gr.Markdown("Past chats")
with gr.Row():
shared.gradio['unique_id'] = gr.Radio(label="", elem_classes=['slim-dropdown', 'pretty_scrollbar'], interactive=not mu, elem_id='past-chats')
with gr.Row(elem_id='chat-controls', elem_classes=['pretty_scrollbar']): with gr.Row(elem_id='chat-controls', elem_classes=['pretty_scrollbar']):
with gr.Column(): with gr.Column():