From 521be4c31a5cea5cd18863ba41c4909dce9ff655 Mon Sep 17 00:00:00 2001
From: Xuan Son Nguyen <son@huggingface.co>
Date: Tue, 5 Nov 2024 16:57:48 +0100
Subject: [PATCH] fix bg-base classes

---
 examples/server/public/index.html | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/examples/server/public/index.html b/examples/server/public/index.html
index af3b50c9e..2b403244a 100644
--- a/examples/server/public/index.html
+++ b/examples/server/public/index.html
@@ -15,6 +15,9 @@
       pre { @apply whitespace-pre-wrap; }
       /* TODO: fix markdown table */
     }
+    .bg-base-100 {background-color: var(--fallback-b1,oklch(var(--b1)/1))}
+    .bg-base-200 {background-color: var(--fallback-b2,oklch(var(--b2)/1))}
+    .bg-base-300 {background-color: var(--fallback-b3,oklch(var(--b3)/1))}
   </style>
 </head>
 
@@ -134,7 +137,7 @@
     // markdown support
     const VueMarkdown = defineComponent(
       (props) => {
-        const md = shallowRef(new markdownit(props.options ?? {}));
+        const md = shallowRef(new markdownit(props.options ?? { breaks: true }));
         for (const plugin of props.plugins ?? []) {
           md.value.use(plugin);
         }
@@ -182,7 +185,12 @@
       },
     };
 
-    // format of message: { id: number, role: 'user' | 'assistant', content: string }
+    // scroll to bottom of chat messages
+    const chatScrollToBottom = () => {
+      const msgListElem = document.getElementById('messages-list');
+      setTimeout(() => msgListElem.scrollTo({ top: msgListElem.scrollHeight }), 1);
+    };
+
     createApp({
       components: {
         VueMarkdown,
@@ -190,7 +198,7 @@
       data() {
         return {
           conversations: Conversations.getAll(),
-          messages: [],
+          messages: [], // { id: number, role: 'user' | 'assistant', content: string }
           viewingConvId: Conversations.getNewConvId(),
           inputMsg: '',
           isGenerating: false,
@@ -204,11 +212,8 @@
       mounted() {
         // scroll to the bottom when the pending message height is updated
         const pendingMsgElem = document.getElementById('pending-msg');
-        const msgListElem = document.getElementById('messages-list');
         const resizeObserver = new ResizeObserver(() => {
-          if (this.isGenerating) {
-            msgListElem.scrollTo({ top: msgListElem.scrollHeight });
-          }
+          if (this.isGenerating) chatScrollToBottom();
         });
         resizeObserver.observe(pendingMsgElem);
       },
@@ -217,11 +222,13 @@
           if (this.isGenerating) return;
           this.viewingConvId = Conversations.getNewConvId();
           this.fetchMessages();
+          chatScrollToBottom();
         },
         setViewingConv(convId) {
           if (this.isGenerating) return;
           this.viewingConvId = convId;
           this.fetchMessages();
+          chatScrollToBottom();
         },
         deleteConv(convId) {
           if (this.isGenerating) return;
@@ -280,9 +287,7 @@
             this.fetchMessages();
             this.pendingMsg = null;
             this.isGenerating = false;
-            setTimeout(() => {
-              document.getElementById('msg-input').focus();
-            }, 1);
+            setTimeout(() => document.getElementById('msg-input').focus(), 1);
           } catch (error) {
             console.error(error);
             alert(error);