Move chat UI elements to the right on desktop

This commit is contained in:
oobabooga 2024-02-18 09:22:16 -08:00
parent d8064c00e8
commit daa140447e
2 changed files with 18 additions and 5 deletions

View File

@ -689,6 +689,15 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
max-width: 300px;
margin-left: calc(-0.5*(var(--document-width) - 880px - 14px - 16px * 2));
}
#chat-controls {
position: absolute;
top: 16px;
right: 0;
width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2));
max-width: 300px;
margin-right: calc(-0.5*(var(--document-width) - 880px - 14px - 16px * 2));
}
}
/* ----------------------------------------------

View File

@ -77,11 +77,15 @@ def create_ui():
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(elem_id='chat-controls', elem_classes=['pretty_scrollbar']):
with gr.Column():
with gr.Row():
shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with'])
shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with'], elem_classes=['pretty_scrollbar'])
with gr.Row():
shared.gradio['mode'] = gr.Radio(choices=['chat', 'chat-instruct', 'instruct'], value='chat', label='Mode', info='Defines how the chat prompt is generated. In instruct and chat-instruct modes, the instruction template selected under Parameters > Instruction template must match the current model.', elem_id='chat-mode')
with gr.Row():
shared.gradio['chat_style'] = gr.Dropdown(choices=utils.get_available_chat_styles(), label='Chat style', value=shared.settings['chat_style'], visible=shared.settings['mode'] != 'instruct')