From 64ac28984ddca5c264cd41d4b722790ba7b4bce2 Mon Sep 17 00:00:00 2001
From: Xuan Son Nguyen <son@huggingface.co>
Date: Thu, 7 Nov 2024 14:20:22 -0400
Subject: [PATCH] lighter bubble color (less distract when reading)

---
 examples/server/public/index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/server/public/index.html b/examples/server/public/index.html
index e2b40e2fe..850c652ac 100644
--- a/examples/server/public/index.html
+++ b/examples/server/public/index.html
@@ -29,6 +29,12 @@
       @apply cursor-pointer opacity-0 group-hover:opacity-100 hover:shadow-md;
     }
     .chat-screen { max-width: 900px; }
+    /* because the default bubble color is quite dark, we will make a custom one using bg-base-300 */
+    .chat-bubble-base-300 {
+      --tw-bg-opacity: 1;
+      --tw-text-opacity: 1;
+      @apply bg-base-300 text-base-content;
+    }
   </style>
 </head>
 
@@ -127,7 +133,7 @@
           }">
             <div :class="{
               'chat-bubble markdown': true,
-              'chat-bubble-primary': msg.role === 'user',
+              'chat-bubble-base-300': msg.role !== 'user',
             }">
               <!-- textarea for editing message -->
               <template v-if="editingMsg && editingMsg.id === msg.id">