diff --git a/css/main.css b/css/main.css index 653da3ee..3d34a564 100644 --- a/css/main.css +++ b/css/main.css @@ -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 ---------------------------------------------- */ diff --git a/js/main.js b/js/main.js index 60f4bf3b..f63327ce 100644 --- a/js/main.js +++ b/js/main.js @@ -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); diff --git a/modules/ui_chat.py b/modules/ui_chat.py index 76c7d5ff..1713a39d 100644 --- a/modules/ui_chat.py +++ b/modules/ui_chat.py @@ -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'): - 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) - 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') + 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) - 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') + with gr.Row(): + shared.gradio['delete_chat'] = gr.Button('🗑️', elem_classes='refresh-button', interactive=not mu) + 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-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'])