diff --git a/examples/server/webui/index.html b/examples/server/webui/index.html index 790dcd287..2fe2f950b 100644 --- a/examples/server/webui/index.html +++ b/examples/server/webui/index.html @@ -8,162 +8,185 @@ -
- -
-

Conversations

+
+
+ - -
- + New conversation -
-
- {{ conv.messages[0].content }} -
-
- Conversations are saved to browser's localStorage -
-
+ +
+ +
+
+

Conversations

-
- -
-
- 🦙 llama.cpp -
- - -
- - - - -
-
- - -
-
- - {{ messages.length === 0 ? 'Send a message to start' : '' }} -
-
+
+ 'btn btn-ghost justify-start': true, + 'btn-active': messages.length === 0, + }" @click="newConversation"> + + New conversation +
+
+ {{ conv.messages[0].content }} +
+
+ Conversations are saved to browser's localStorage +
+
+
+ + +
+ +
+ + + +
llama.cpp
+ + +
+ + + + + +
+
+ + +
+
+ + {{ messages.length === 0 ? 'Send a message to start' : '' }} +
+
- - - - +
+ + + + +
+
+ + +
+ + + + +
- -
- - - - - + +
+
+ + +
- -
-
- - -
+ +
+ + +
- -
- - - -
+ +
diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js index a50f3f297..9b5b12329 100644 --- a/examples/server/webui/src/main.js +++ b/examples/server/webui/src/main.js @@ -227,6 +227,9 @@ const mainApp = createApp({ resizeObserver.observe(pendingMsgElem); }, methods: { + hideSidebar() { + document.getElementById('toggle-drawer').checked = false; + }, setSelectedTheme(theme) { this.selectedTheme = theme; StorageUtils.setTheme(theme); @@ -237,6 +240,7 @@ const mainApp = createApp({ this.editingMsg = null; this.fetchMessages(); chatScrollToBottom(); + this.hideSidebar(); }, setViewingConv(convId) { if (this.isGenerating) return; @@ -244,6 +248,7 @@ const mainApp = createApp({ this.editingMsg = null; this.fetchMessages(); chatScrollToBottom(); + this.hideSidebar(); }, deleteConv(convId) { if (this.isGenerating) return; diff --git a/examples/server/webui/src/styles.css b/examples/server/webui/src/styles.css index 739555acf..ed0d2f3ad 100644 --- a/examples/server/webui/src/styles.css +++ b/examples/server/webui/src/styles.css @@ -18,3 +18,9 @@ @apply cursor-pointer hover:shadow-md; } .chat-screen { max-width: 900px; } + +.chat-bubble-base-300 { + --tw-bg-opacity: 1; + --tw-text-opacity: 1; + @apply bg-base-300 text-base-content; +}