Past chat histories in a side bar on desktop (#5098)

Lots of room for improvement, but that's a start.
This commit is contained in:
oobabooga 2024-01-09 01:57:29 -03:00 committed by GitHub
parent 372ef5e2d8
commit 4f7e1eeafd
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 10 deletions

View file

@ -660,6 +660,20 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
margin-top: var(--layout-gap);
}
/* ----------------------------------------------
Past chat histories in a side bar on desktop
---------------------------------------------- */
@media screen and (width >= 1327px) {
#past-chats-row {
position: absolute;
top: 16px;
left: 0;
width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2));
max-width: 300px;
margin-left: calc(-0.5*(var(--document-width) - 880px - 14px - 16px * 2));
}
}
/* ----------------------------------------------
Keep dropdown menus above errored components
---------------------------------------------- */

View file

@ -385,3 +385,15 @@ new ResizeObserver(updateCssProperties)
.observe(document.querySelector("#chat-input textarea"));
window.addEventListener("resize", updateCssProperties);
//------------------------------------------------
// Keep track of the display width to position the past
// chats dropdown on desktop
//------------------------------------------------
function updateDocumentWidth() {
var updatedWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.setProperty("--document-width", updatedWidth + "px");
}
updateDocumentWidth();
window.addEventListener("resize", updateDocumentWidth);

View file

@ -63,17 +63,21 @@ def create_ui():
shared.gradio['send-chat-to-default'] = gr.Button('Send to default')
shared.gradio['send-chat-to-notebook'] = gr.Button('Send to notebook')
with gr.Row(elem_id='past-chats-row'):
with gr.Row(elem_id='past-chats-row', elem_classes=['pretty_scrollbar']):
with gr.Column():
with gr.Row():
shared.gradio['unique_id'] = gr.Dropdown(label='Past chats', elem_classes=['slim-dropdown'], interactive=not mu)
shared.gradio['rename_chat'] = gr.Button('Rename', elem_classes='refresh-button', interactive=not mu)
with gr.Row():
shared.gradio['delete_chat'] = gr.Button('🗑️', elem_classes='refresh-button', interactive=not mu)
shared.gradio['delete_chat-cancel'] = gr.Button('Cancel', visible=False, elem_classes='refresh-button')
shared.gradio['delete_chat-confirm'] = gr.Button('Confirm', variant='stop', visible=False, elem_classes='refresh-button')
shared.gradio['delete_chat-cancel'] = gr.Button('Cancel', visible=False, elem_classes='refresh-button')
shared.gradio['rename_chat'] = gr.Button('Rename', elem_classes='refresh-button', interactive=not mu)
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-cancel'] = gr.Button('Cancel', visible=False, elem_classes='refresh-button')
shared.gradio['rename_to-confirm'] = gr.Button('Confirm', visible=False, elem_classes='refresh-button')
shared.gradio['rename_to-cancel'] = gr.Button('Cancel', visible=False, elem_classes='refresh-button')
with gr.Row():
shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with'])