From 3afa826fb96e969279a2036401ef9a7e9767bd7f Mon Sep 17 00:00:00 2001
From: litongjava <litongjava@qq.com>
Date: Tue, 4 Feb 2025 19:15:54 -1000
Subject: [PATCH] feat: add sources of user

---
 ui/components/ChatWindow.tsx |  2 +-
 ui/components/MessageBox.tsx | 69 +++++++++++++++++++++++-------------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index 4808f49..54c4b49 100644
--- a/ui/components/ChatWindow.tsx
+++ b/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[];
 
diff --git a/ui/components/MessageBox.tsx b/ui/components/MessageBox.tsx
index f23127c..64cbe2a 100644
--- a/ui/components/MessageBox.tsx
+++ b/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 { Message } from './ChatWindow';
-import { cn } from '@/lib/utils';
+import React, {MutableRefObject, useEffect, useState} from 'react';
+import {Message} from './ChatWindow';
+import {cn} from '@/lib/utils';
 import {
   BookCopy,
   Disc3,
@@ -18,18 +18,18 @@ 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,
-  messageIndex,
-  history,
-  loading,
-  dividerRef,
-  isLast,
-  rewrite,
-  sendMessage,
-}: {
+                      message,
+                      messageIndex,
+                      history,
+                      loading,
+                      dividerRef,
+                      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,6 +72,23 @@ 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>
       )}
 
@@ -84,12 +101,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">
@@ -114,15 +131,16 @@ const MessageBox = ({
                 {parsedMessage}
               </Markdown>
               {loading && isLast ? null : (
-                <div 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 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') {
@@ -134,9 +152,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>
@@ -148,10 +166,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">
@@ -160,7 +178,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);
@@ -183,7 +201,8 @@ const MessageBox = ({
                 )}
             </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">
+          <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">
             <SearchImages
               query={history[messageIndex - 1].content}
               chatHistory={history.slice(0, messageIndex - 1)}