diff --git a/llamafile/server/www/chatbot.css b/llamafile/server/www/chatbot.css index 7d74b2d114..36c04c7120 100644 --- a/llamafile/server/www/chatbot.css +++ b/llamafile/server/www/chatbot.css @@ -45,6 +45,7 @@ p { .chat-header h1 { font-size: 2rem; color: #212529; + word-break: break-word; } .chat-header img { @@ -172,27 +173,71 @@ ul li:first-child { background-color: transparent; } -.chat-input:focus { +.chat-input:focus, +#completions-input:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } -.send-button { - padding: 0.75rem 1.5rem; - background: #0d6efd; +.chat-input-container button, +.menu-trigger, +.completions-content button { + display: flex; + align-items: center; + justify-content: center; color: white; border: none; border-radius: 6px; cursor: pointer; + transition: color 0.2s; +} + +.chat-input-button-container { + display: flex; + flex-direction: column; + align-self: flex-end; + gap: 0.5em; +} + +.chat-input-button-container button img, +.menu-trigger img, +.completions-controls img { + width: 24px; + height: 24px; +} + +.chat-input-button-row { + display: flex; + gap: 0.5rem; +} + +.chat-input-button-row button, +.menu-trigger, +.completions-controls button { + padding: 0.5rem .5rem; + background: #9299a0; +} + +.chat-input-button-row button:hover, +.menu-trigger:hover, +.completions-controls button:hover { + background: #5c636a; +} + +.send-button, +button.complete-button { + padding: 0.75rem 1.5rem; + background: #0d6efd; font-size: 1rem; - transition: background-color 0.2s; } -.send-button:hover { +.send-button:hover, +button.complete-button:hover { background: #0b5ed7; } -.send-button:disabled { +.send-button:disabled, +button.complete-button:disabled { background: #6c757d; cursor: not-allowed; } @@ -200,12 +245,7 @@ ul li:first-child { .stop-button { padding: 0.75rem 1.5rem; background: #dc3545; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; font-size: 1rem; - transition: background-color 0.2s; } .stop-button:hover { @@ -268,37 +308,6 @@ ul li:first-child { display: block; } -.redo-button { - padding: 0.5rem .5rem; - background: #6c757d; - color: white; - padding: 8px; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 20px; - transition: color 0.2s; -} - -.redo-button:hover { - background: #5c636a; -} - -.settings-button { - padding: 0.5rem .5rem; - background: #6c757d; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.2s; -} - -.settings-button:hover { - background: #5c636a; -} - .settings-modal { position: fixed; top: 0; @@ -464,6 +473,7 @@ ul li:first-child { font-size: 1rem; font-family: inherit; resize: none; + outline: none ; } .completions-controls { @@ -471,39 +481,6 @@ ul li:first-child { gap: 0.5rem; } -.complete-button { - padding: 0.75rem 1.5rem; - background: #0d6efd; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.2s; -} - -.complete-button:hover { - background: #0b5ed7; -} - -.upload-button { - padding: 0.5rem .5rem; - background: #6c757d; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - transition: color 0.2s; -} - -.upload-button img { - vertical-align: middle; -} - -.upload-button:hover { - background: #5c636a; -} - .mode-dropdown { display: none; } @@ -527,20 +504,7 @@ ul li:first-child { .menu-dropdown { position: relative; display: inline-block; -} - -.menu-trigger { - padding: 0.5rem; - background: transparent; - border: none; - cursor: pointer; - font-size: 0.8rem; - color: #666; - transition: color 0.2s; -} - -.menu-trigger:hover { - color: #000; + align-self: flex-start; } .menu { diff --git a/llamafile/server/www/gear.svg b/llamafile/server/www/gear.svg index a8bb4a1230..5d2f3977f7 100644 --- a/llamafile/server/www/gear.svg +++ b/llamafile/server/www/gear.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/llamafile/server/www/index.html b/llamafile/server/www/index.html index 76c2e544cf..1694c3669f 100644 --- a/llamafile/server/www/index.html +++ b/llamafile/server/www/index.html @@ -16,7 +16,7 @@

loading...

- - - - - - +
+ + +
+ + + + +
+
@@ -50,7 +54,7 @@

llamafile

diff --git a/llamafile/server/www/menu.svg b/llamafile/server/www/menu.svg new file mode 100644 index 0000000000..7059fa57b3 --- /dev/null +++ b/llamafile/server/www/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/llamafile/server/www/redo.svg b/llamafile/server/www/redo.svg index 6a8ada6338..c3038d5167 100644 --- a/llamafile/server/www/redo.svg +++ b/llamafile/server/www/redo.svg @@ -1,19 +1 @@ - - - - - - + \ No newline at end of file diff --git a/llamafile/server/www/upload.svg b/llamafile/server/www/upload.svg index 1861bc2d9b..2c15d22029 100644 --- a/llamafile/server/www/upload.svg +++ b/llamafile/server/www/upload.svg @@ -1,4 +1 @@ - - - + \ No newline at end of file