feature: new chat message view, 0.3.0 release

Author: cdxker

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.75",
+  "version": "0.3.0",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx

@@ -25,30 +25,16 @@ export const ChatMessage = ({
   const { props } = useModalState();
 
   return (
-    <>
+    <div key={idx}>
       {message.type == "user" ? (
-        <>
-          <span className="ai-avatar user">
-            <i className="fa-regular fa-user"></i>
-            <p
-              className="tag"
-              // style mostly transparent brand color
-              style={{
-                backgroundColor: props.brandColor
-                  ? `${props.brandColor}18`
-                  : "#CB53EB18",
-                color: props.brandColor ?? "#CB53EB",
-              }}
-            >
-              User
-            </p>
-          </span>
+        <div className="" key={idx}>
           <div className={message.type}>
             <span className="user-text"> {message.text}</span>
           </div>
-        </>
+        </div>
       ) : (
-        <>
+        <div className={props.inline ? "": "message-wrapper"} key={idx}>
+          {!props.inline && 
           <span className="ai-avatar assistant">
             {props.brandLogoImgSrcUrl ? (
               <img
@@ -70,10 +56,11 @@ export const ChatMessage = ({
               AI assistant
             </p>
           </span>
+            }
           <Message key={idx} message={message} idx={idx} />
-        </>
+        </div>
       )}
-    </>
+    </div>
   );
 };
 

clients/search-component/src/TrieveModal/Chat/ChatMode.tsx

@@ -110,9 +110,7 @@ export const ChatMode = () => {
                 }
               </div>
               {messages.map((message, i) => (
-                <div key={i} className="message-wrapper">
-                  <ChatMessage key={`${i}-message`} idx={i} message={message} />
-                </div>
+                <ChatMessage key={`${i}-message`} idx={i} message={message} />
               ))}
             </div>
           </div>

clients/search-component/src/TrieveModal/index.css

@@ -26,7 +26,7 @@ body {
     @apply animate-contentShow scroll-smooth max-h-[60vh] w-[90vw] sm:max-w-[800px] rounded-lg focus:outline-none overflow-hidden text-base;
 
     color: var(--tv-zinc-950);
-    background-color: var(--tv-zinc-50);
+    background-color: #fff;
     font-family: var(--tv-prop-brand-font-family);
 
     &:not(.trieve-popup-modal) {
@@ -225,7 +225,7 @@ body {
 
     .chat-footer-wrapper {
       @apply sticky bottom-0 flex flex-col py-3 pb-0;
-      background-color: var(--tv-zinc-50);
+      background-color: #fff;
     }
 
     .clear-button {
@@ -239,7 +239,7 @@ body {
 
     .trieve-footer {
       @apply sticky px-3 items-center bottom-[1px] flex flex-col;
-      background-color: var(--tv-zinc-50);
+      background-color: #fff;
       border-color: var(--tv-zinc-200);
 
       &.search {
@@ -438,10 +438,14 @@ body {
       }
 
       .user {
-        @apply flex gap-1 text-center items-center my-5;
+        @apply flex flex-row-reverse gap-1 text-center items-start;
+
 
         .user-text {
-          @apply text-left;
+          @apply text-left px-5 py-2 rounded-xl;
+
+          color: var(--tv-zinc-50);
+          background-color: var(--tv-zinc-800);
         }
       }
 
@@ -597,7 +601,7 @@ body {
 
       .ai-message {
         .message-wrapper {
-          @apply col-span-2 border-t pr-4;
+          @apply col-span-2 pr-4;
           border-color: var(--tv-zinc-200);
         }
 
@@ -704,7 +708,7 @@ body {
       }
 
       .followup-questions {
-        @apply text-sm flex flex-wrap gap-2;
+        @apply text-sm flex flex-wrap gap-2 mt-4;
 
         .followup-question {
           @apply p-2 text-left rounded-md border transition-all flex flex-row justify-start items-center gap-2;
@@ -810,7 +814,11 @@ body {
       }
 
       &.inline-input {
-        @apply pl-2;
+        @apply pl-2; 
+
+        &:focus {
+          background-color: #fff;
+        }
       }
 
       &:focus {