Merge 4dc5857b17 into 46541e6c0c

ui/components/ChatWindow.tsx

@@ -352,7 +352,7 @@ const loadMessages = async (
   const messages = data.messages.map((msg: any) => {
     return {
       ...msg,
-      // ...JSON.parse(msg.metadata),
+      ...JSON.parse(msg.metadata),
     };
   }) as Message[];
 

ui/components/MessageBox.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 /* eslint-disable @next/next/no-img-element */
-import React, {MutableRefObject, useEffect, useState} from 'react';
+import React, { MutableRefObject, useEffect, useState } from 'react';
-import {Message} from './ChatWindow';
+import { Message } from './ChatWindow';
-import {cn} from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import {
   BookCopy,
   Disc3,
@@ -18,7 +18,7 @@ import Rewrite from './MessageActions/Rewrite';
 import MessageSources from './MessageSources';
 import SearchImages from './SearchImages';
 import SearchVideos from './SearchVideos';
-import {useSpeech} from 'react-text-to-speech';
+import { useSpeech } from 'react-text-to-speech';
 
 const MessageBox = ({
   message,
@@ -29,7 +29,7 @@ const MessageBox = ({
   isLast,
   rewrite,
   sendMessage,
-                    }: {
+}: {
   message: Message;
   messageIndex: number;
   history: Message[];
@@ -63,7 +63,7 @@ const MessageBox = ({
     setParsedMessage(message.content);
   }, [message.content, message.sources, message.role]);
 
-  const {speechStatus, start, stop} = useSpeech({text: speechMessage});
+  const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
 
   return (
     <div>
@@ -72,23 +72,6 @@ const MessageBox = ({
           <h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
             {message.content}
           </h2>
-          <div
-            ref={dividerRef}
-            className="flex flex-col space-y-6 w-full lg:w-9/12"
-          >
-
-            {message.sources && message.sources.length > 0 && (
-              <div className="flex flex-col space-y-2">
-                <div className="flex flex-row items-center space-x-2">
-                  <BookCopy className="text-black dark:text-white" size={20}/>
-                  <h3 className="text-black dark:text-white font-medium text-xl">
-                    Sources
-                  </h3>
-                </div>
-                <MessageSources sources={message.sources}/>
-              </div>
-            )}
-          </div>
         </div>
       )}
 
@@ -101,12 +84,12 @@ const MessageBox = ({
             {message.sources && message.sources.length > 0 && (
               <div className="flex flex-col space-y-2">
                 <div className="flex flex-row items-center space-x-2">
-                  <BookCopy className="text-black dark:text-white" size={20}/>
+                  <BookCopy className="text-black dark:text-white" size={20} />
                   <h3 className="text-black dark:text-white font-medium text-xl">
                     Sources
                   </h3>
                 </div>
-                <MessageSources sources={message.sources}/>
+                <MessageSources sources={message.sources} />
               </div>
             )}
             <div className="flex flex-col space-y-2">
@@ -131,16 +114,15 @@ const MessageBox = ({
                 {parsedMessage}
               </Markdown>
               {loading && isLast ? null : (
-                <div
+                <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
-                  className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
                   <div className="flex flex-row items-center space-x-1">
                     {/*  <button className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black text-black dark:hover:text-white">
                       <Share size={18} />
                     </button> */}
-                    <Rewrite rewrite={rewrite} messageId={message.messageId}/>
+                    <Rewrite rewrite={rewrite} messageId={message.messageId} />
                   </div>
                   <div className="flex flex-row items-center space-x-1">
-                    <Copy initialMessage={message.content} message={message}/>
+                    <Copy initialMessage={message.content} message={message} />
                     <button
                       onClick={() => {
                         if (speechStatus === 'started') {
@@ -152,9 +134,9 @@ const MessageBox = ({
                       className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
                     >
                       {speechStatus === 'started' ? (
-                        <StopCircle size={18}/>
+                        <StopCircle size={18} />
                       ) : (
-                        <Volume2 size={18}/>
+                        <Volume2 size={18} />
                       )}
                     </button>
                   </div>
@@ -166,10 +148,10 @@ const MessageBox = ({
                 message.role === 'assistant' &&
                 !loading && (
                   <>
-                    <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary"/>
+                    <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
                     <div className="flex flex-col space-y-3 text-black dark:text-white">
                       <div className="flex flex-row items-center space-x-2 mt-4">
-                        <Layers3/>
+                        <Layers3 />
                         <h3 className="text-xl font-medium">Related</h3>
                       </div>
                       <div className="flex flex-col space-y-3">
@@ -178,7 +160,7 @@ const MessageBox = ({
                             className="flex flex-col space-y-3 text-sm"
                             key={i}
                           >
-                            <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary"/>
+                            <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
                             <div
                               onClick={() => {
                                 sendMessage(suggestion);
@@ -201,8 +183,7 @@ const MessageBox = ({
                 )}
             </div>
           </div>
-          <div
+          <div className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">
-            className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">
             <SearchImages
               query={history[messageIndex - 1].content}
               chatHistory={history.slice(0, messageIndex - 1)}