diff --git a/css/main.css b/css/main.css index 0c149d2c..498b3c6c 100644 --- a/css/main.css +++ b/css/main.css @@ -221,6 +221,7 @@ button { .pretty_scrollbar::-webkit-scrollbar { width: 7px; + height: 7px; } .pretty_scrollbar::-webkit-scrollbar-track { @@ -245,6 +246,10 @@ button { background: #374151; } +.pretty_scrollbar::-webkit-scrollbar-corner { + background: transparent; +} + audio { max-width: 100%; } @@ -695,7 +700,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { @media screen and (width >= 1327px) { #past-chats-row { position: absolute; - top: 16px; + top: 36px; left: 0; width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2)); max-width: 300px; @@ -743,3 +748,47 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { 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; + } +} + diff --git a/js/main.js b/js/main.js index 75c1e5eb..e9a980e2 100644 --- a/js/main.js +++ b/js/main.js @@ -534,3 +534,8 @@ document.querySelectorAll(".focus-on-chat-input").forEach(element => { document.querySelector("#chat-input textarea").focus(); }); }); + +//------------------------------------------------ +// Fix a border around the "past chats" menu +//------------------------------------------------ +document.getElementById("past-chats").parentNode.style.borderRadius = "0px"; diff --git a/modules/ui_chat.py b/modules/ui_chat.py index 203e55f9..d9bf4cb5 100644 --- a/modules/ui_chat.py +++ b/modules/ui_chat.py @@ -62,9 +62,6 @@ def create_ui(): 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(): 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) @@ -74,8 +71,13 @@ def create_ui(): 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', 'focus-on-chat-input']) - shared.gradio['rename_to-cancel'] = gr.Button('Cancel', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input']) + with gr.Row(): + 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.Column():