show avatar dialog instead of default (#4033)

show avatar dialog instead of default

- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/components/message-item/index.tsx

@@ -30,6 +30,7 @@ interface IProps extends Partial<IRemoveMessageById>, IRegenerateMessage {
   sendLoading?: boolean;
   nickname?: string;
   avatar?: string;
+  avatardialog?: string | null;
   clickDocumentButton?: (documentId: string, chunk: IReferenceChunk) => void;
   index: number;
   showLikeButton?: boolean;
@@ -40,6 +41,7 @@ const MessageItem = ({
   reference,
   loading = false,
   avatar,
+  avatardialog,
   sendLoading = false,
   clickDocumentButton,
   index,
@@ -103,8 +105,10 @@ const MessageItem = ({
         >
           {item.role === MessageType.User ? (
             <Avatar size={40} src={avatar ?? '/logo.svg'} />
+          ) : avatardialog ? (
+            <Avatar size={40} src={avatardialog} />
           ) : (
-            <AssistantIcon></AssistantIcon>
+            <AssistantIcon />
           )}
           <Flex vertical gap={8} flex={1}>
             <Space>

web/src/hooks/chat-hooks.ts

@@ -11,6 +11,7 @@ import {
 } from '@/interfaces/request/chat';
 import i18n from '@/locales/config';
 import { IClientConversation } from '@/pages/chat/interface';
+import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
 import chatService from '@/services/chat-service';
 import {
   buildMessageListWithUuid,
@@ -27,6 +28,7 @@ import { history, useSearchParams } from 'umi';
 //#region logic
 
 export const useClickDialogCard = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setSearchParams] = useSearchParams();
 
   const newQueryParameters: URLSearchParams = useMemo(() => {
@@ -243,6 +245,7 @@ export const useFetchNextConversationList = () => {
 
 export const useFetchNextConversation = () => {
   const { isNew, conversationId } = useGetChatSearchParams();
+  const { sharedId } = useGetSharedChatSearchParams();
   const {
     data,
     isFetching: loading,
@@ -254,8 +257,13 @@ export const useFetchNextConversation = () => {
     gcTime: 0,
     refetchOnWindowFocus: false,
     queryFn: async () => {
-      if (isNew !== 'true' && isConversationIdExist(conversationId)) {
-        const { data } = await chatService.getConversation({ conversationId });
+      if (
+        isNew !== 'true' &&
+        isConversationIdExist(sharedId || conversationId)
+      ) {
+        const { data } = await chatService.getConversation({
+          conversationId: conversationId || sharedId,
+        });
 
         const conversation = data?.data ?? {};
 
@@ -270,6 +278,33 @@ export const useFetchNextConversation = () => {
   return { data, loading, refetch };
 };
 
+export const useFetchNextConversationSSE = () => {
+  const { isNew } = useGetChatSearchParams();
+  const { sharedId } = useGetSharedChatSearchParams();
+  const {
+    data,
+    isFetching: loading,
+    refetch,
+  } = useQuery<IClientConversation>({
+    queryKey: ['fetchConversationSSE', sharedId],
+    initialData: {} as IClientConversation,
+    gcTime: 0,
+    refetchOnWindowFocus: false,
+    queryFn: async () => {
+      if (isNew !== 'true' && isConversationIdExist(sharedId || '')) {
+        if (!sharedId) return {};
+        const { data } = await chatService.getConversationSSE({}, sharedId);
+        const conversation = data?.data ?? {};
+        const messageList = buildMessageListWithUuid(conversation?.message);
+        return { ...conversation, message: messageList };
+      }
+      return { message: [] };
+    },
+  });
+
+  return { data, loading, refetch };
+};
+
 export const useFetchManualConversation = () => {
   const {
     data,
@@ -547,7 +582,7 @@ export const useFetchMindMap = () => {
       try {
         const ret = await chatService.getMindMap(params);
         return ret?.data?.data ?? {};
-      } catch (error) {
+      } catch (error: any) {
         if (has(error, 'message')) {
           message.error(error.message);
         }

web/src/hooks/flow-hooks.ts

@@ -2,6 +2,7 @@ import { ResponseType } from '@/interfaces/database/base';
 import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
 import { IDebugSingleRequestBody } from '@/interfaces/request/flow';
 import i18n from '@/locales/config';
+import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
 import flowService from '@/services/flow-service';
 import { buildMessageListWithUuid } from '@/utils/chat';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -91,6 +92,8 @@ export const useFetchFlow = (): {
   refetch: () => void;
 } => {
   const { id } = useParams();
+  const { sharedId } = useGetSharedChatSearchParams();
+
   const {
     data,
     isFetching: loading,
@@ -103,7 +106,41 @@ export const useFetchFlow = (): {
     refetchOnWindowFocus: false,
     gcTime: 0,
     queryFn: async () => {
-      const { data } = await flowService.getCanvas({}, id);
+      const { data } = await flowService.getCanvas({}, sharedId || id);
+
+      const messageList = buildMessageListWithUuid(
+        get(data, 'data.dsl.messages', []),
+      );
+      set(data, 'data.dsl.messages', messageList);
+
+      return data?.data ?? {};
+    },
+  });
+
+  return { data, loading, refetch };
+};
+
+export const useFetchFlowSSE = (): {
+  data: IFlow;
+  loading: boolean;
+  refetch: () => void;
+} => {
+  const { sharedId } = useGetSharedChatSearchParams();
+
+  const {
+    data,
+    isFetching: loading,
+    refetch,
+  } = useQuery({
+    queryKey: ['flowDetailSSE'],
+    initialData: {} as IFlow,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      if (!sharedId) return {};
+      const { data } = await flowService.getCanvasSSE({}, sharedId);
 
       const messageList = buildMessageListWithUuid(
         get(data, 'data.dsl.messages', []),

web/src/interfaces/database/chat.ts

@@ -57,6 +57,7 @@ export interface IConversation {
   create_time: number;
   dialog_id: string;
   id: string;
+  avatar: string;
   message: Message[];
   reference: IReference[];
   name: string;

web/src/interfaces/database/flow.ts

@@ -29,8 +29,8 @@ export interface IGraph {
   edges: Edge[];
 }
 
-export interface IFlow {
-  avatar: null;
+export declare interface IFlow {
+  avatar?: null | string;
   canvas_type: null;
   create_date: string;
   create_time: number;

web/src/pages/chat/chat-container/index.tsx

@@ -68,6 +68,7 @@ const ChatContainer = ({ controller }: IProps) => {
                     item={message}
                     nickname={userInfo.nickname}
                     avatar={userInfo.avatar}
+                    avatardialog={conversation.avatar}
                     reference={buildMessageItemReference(
                       {
                         message: derivedMessages,

web/src/pages/chat/share/large.tsx

@@ -4,7 +4,7 @@ import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { MessageType } from '@/constants/chat';
 import { useSendButtonDisabled } from '@/pages/chat/hooks';
 import { Flex, Spin } from 'antd';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import {
   useGetSharedChatSearchParams,
   useSendSharedMessage,
@@ -12,6 +12,8 @@ import {
 import { buildMessageItemReference } from '../utils';
 
 import PdfDrawer from '@/components/pdf-drawer';
+import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
+import { useFetchFlowSSE } from '@/hooks/flow-hooks';
 import styles from './index.less';
 
 const ChatContainer = () => {
@@ -30,6 +32,14 @@ const ChatContainer = () => {
     hasError,
   } = useSendSharedMessage();
   const sendDisabled = useSendButtonDisabled(value);
+  const useData = (from: SharedFrom) =>
+    useMemo(() => {
+      return from === SharedFrom.Agent
+        ? useFetchFlowSSE
+        : useFetchNextConversationSSE;
+    }, [from]);
+
+  const { data: InforForm } = useData(from)();
 
   if (!conversationId) {
     return <div>empty</div>;
@@ -45,6 +55,7 @@ const ChatContainer = () => {
                 return (
                   <MessageItem
                     key={message.id}
+                    avatardialog={InforForm?.avatar}
                     item={message}
                     nickname="You"
                     reference={buildMessageItemReference(

web/src/pages/flow/chat/box.tsx

@@ -9,6 +9,7 @@ import { useSendNextMessage } from './hooks';
 
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
+import { useFetchFlow } from '@/hooks/flow-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
 
@@ -29,6 +30,7 @@ const FlowChatBox = () => {
   useGetFileIcon();
   const { t } = useTranslate('chat');
   const { data: userInfo } = useFetchUserInfo();
+  const { data: cavasInfo } = useFetchFlow();
 
   return (
     <>
@@ -47,6 +49,7 @@ const FlowChatBox = () => {
                     key={message.id}
                     nickname={userInfo.nickname}
                     avatar={userInfo.avatar}
+                    avatardialog={cavasInfo.avatar}
                     item={message}
                     reference={buildMessageItemReference(
                       { message: derivedMessages, reference },

web/src/pages/knowledge/index.tsx

@@ -89,9 +89,12 @@ const KnowledgeList = () => {
             className={styles.knowledgeCardContainer}
           >
             {nextList?.length > 0 ? (
-              nextList.map((item: any) => {
+              nextList.map((item: any, index: number) => {
                 return (
-                  <KnowledgeCard item={item} key={item.name}></KnowledgeCard>
+                  <KnowledgeCard
+                    item={item}
+                    key={`${item?.name}-${index}`}
+                  ></KnowledgeCard>
                 );
               })
             ) : (

web/src/services/chat-service.ts

@@ -8,6 +8,7 @@ const {
   listDialog,
   removeDialog,
   getConversation,
+  getConversationSSE,
   setConversation,
   completeConversation,
   listConversation,
@@ -53,6 +54,10 @@ const methods = {
     url: getConversation,
     method: 'get',
   },
+  getConversationSSE: {
+    url: getConversationSSE,
+    method: 'get',
+  },
   setConversation: {
     url: setConversation,
     method: 'post',

web/src/services/flow-service.ts

@@ -4,6 +4,7 @@ import request from '@/utils/request';
 
 const {
   getCanvas,
+  getCanvasSSE,
   setCanvas,
   listCanvas,
   resetCanvas,
@@ -20,6 +21,10 @@ const methods = {
     url: getCanvas,
     method: 'get',
   },
+  getCanvasSSE: {
+    url: getCanvasSSE,
+    method: 'get',
+  },
   setCanvas: {
     url: setCanvas,
     method: 'post',

web/src/utils/api.ts

@@ -71,6 +71,7 @@ export default {
   listDialog: `${api_host}/dialog/list`,
   setConversation: `${api_host}/conversation/set`,
   getConversation: `${api_host}/conversation/get`,
+  getConversationSSE: `${api_host}/conversation/getsse`,
   listConversation: `${api_host}/conversation/list`,
   removeConversation: `${api_host}/conversation/rm`,
   completeConversation: `${api_host}/conversation/completion`,
@@ -113,6 +114,7 @@ export default {
   listTemplates: `${api_host}/canvas/templates`,
   listCanvas: `${api_host}/canvas/list`,
   getCanvas: `${api_host}/canvas/get`,
+  getCanvasSSE: `${api_host}/canvas/getsse`,
   removeCanvas: `${api_host}/canvas/rm`,
   setCanvas: `${api_host}/canvas/set`,
   resetCanvas: `${api_host}/canvas/reset`,