Config chat share (#4700)

Config chat share

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

@@ -17,7 +17,7 @@
     .chunkText();
     padding: 0 14px;
     background-color: rgba(249, 250, 251, 1);
-    word-break: break-all;
+    word-break: break-word;
   }
   .messageTextBase() {
     padding: 6px 10px;
@@ -30,20 +30,20 @@
     .chunkText();
     .messageTextBase();
     background-color: #e6f4ff;
-    word-break: break-all;
+    word-break: break-word;
   }
   .messageTextDark {
     .chunkText();
     .messageTextBase();
     background-color: #1668dc;
-    word-break: break-all;
+    word-break: break-word;
   }
 
   .messageUserText {
     .chunkText();
     .messageTextBase();
     background-color: rgba(255, 255, 255, 0.3);
-    word-break: break-all;
+    word-break: break-word;
     text-align: justify;
   }
   .messageEmpty {

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

@@ -28,9 +28,10 @@ interface IProps extends Partial<IRemoveMessageById>, IRegenerateMessage {
   reference: IReference;
   loading?: boolean;
   sendLoading?: boolean;
+  visibleAvatar?: boolean;
   nickname?: string;
   avatar?: string;
-  avatardialog?: string | null;
+  avatarDialog?: string | null;
   clickDocumentButton?: (documentId: string, chunk: IReferenceChunk) => void;
   index: number;
   showLikeButton?: boolean;
@@ -42,7 +43,7 @@ const MessageItem = ({
   reference,
   loading = false,
   avatar,
-  avatardialog,
+  avatarDialog,
   sendLoading = false,
   clickDocumentButton,
   index,
@@ -50,6 +51,7 @@ const MessageItem = ({
   regenerateMessage,
   showLikeButton = true,
   showLoudspeaker = true,
+  visibleAvatar = true,
 }: IProps) => {
   const { theme } = useTheme();
   const isAssistant = item.role === MessageType.Assistant;
@@ -105,13 +107,15 @@ const MessageItem = ({
             [styles.messageItemContentReverse]: item.role === MessageType.User,
           })}
         >
-          {item.role === MessageType.User ? (
+          {visibleAvatar &&
-            <Avatar size={40} src={avatar ?? '/logo.svg'} />
+            (item.role === MessageType.User ? (
-          ) : avatardialog ? (
+              <Avatar size={40} src={avatar ?? '/logo.svg'} />
-            <Avatar size={40} src={avatardialog} />
+            ) : avatarDialog ? (
-          ) : (
+              <Avatar size={40} src={avatarDialog} />
-            <AssistantIcon />
+            ) : (
-          )}
+              <AssistantIcon />
+            ))}
+
           <Flex vertical gap={8} flex={1}>
             <Space>
               {isAssistant ? (

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

@@ -69,7 +69,7 @@ const ChatContainer = ({ controller }: IProps) => {
                     item={message}
                     nickname={userInfo.nickname}
                     avatar={userInfo.avatar}
-                    avatardialog={conversation.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, SharedFrom } from '@/constants/chat';
 import { useSendButtonDisabled } from '@/pages/chat/hooks';
 import { Flex, Spin } from 'antd';
-import { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import {
   useGetSharedChatSearchParams,
   useSendSharedMessage,
@@ -14,11 +14,17 @@ import { buildMessageItemReference } from '../utils';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
 import { useFetchFlowSSE } from '@/hooks/flow-hooks';
+import i18n from '@/locales/config';
 import { buildMessageUuidWithRole } from '@/utils/chat';
 import styles from './index.less';
 
 const ChatContainer = () => {
-  const { sharedId: conversationId, from } = useGetSharedChatSearchParams();
+  const {
+    sharedId: conversationId,
+    from,
+    locale,
+    visibleAvatar,
+  } = useGetSharedChatSearchParams();
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
 
@@ -39,7 +45,11 @@ const ChatContainer = () => {
       ? useFetchFlowSSE
       : useFetchNextConversationSSE;
   }, [from]);
-
+  React.useEffect(() => {
+    if (locale && i18n.language !== locale) {
+      i18n.changeLanguage(locale);
+    }
+  }, [locale, visibleAvatar]);
   const { data: avatarData } = useFetchAvatar();
 
   if (!conversationId) {
@@ -55,8 +65,9 @@ const ChatContainer = () => {
               {derivedMessages?.map((message, i) => {
                 return (
                   <MessageItem
+                    visibleAvatar={visibleAvatar}
                     key={buildMessageUuidWithRole(message)}
-                    avatardialog={avatarData?.avatar}
+                    avatarDialog={avatarData?.avatar}
                     item={message}
                     nickname="You"
                     reference={buildMessageItemReference(

web/src/pages/chat/shared-hooks.ts

@@ -26,6 +26,10 @@ export const useGetSharedChatSearchParams = () => {
   return {
     from: searchParams.get('from') as SharedFrom,
     sharedId: searchParams.get('shared_id'),
+    locale: searchParams.get('locale'),
+    visibleAvatar: searchParams.get('visible_avatar')
+      ? searchParams.get('visible_avatar') !== '1'
+      : true,
   };
 };
 

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

@@ -31,7 +31,7 @@ const FlowChatBox = () => {
   useGetFileIcon();
   const { t } = useTranslate('chat');
   const { data: userInfo } = useFetchUserInfo();
-  const { data: cavasInfo } = useFetchFlow();
+  const { data: canvasInfo } = useFetchFlow();
 
   return (
     <>
@@ -50,7 +50,7 @@ const FlowChatBox = () => {
                     key={buildMessageUuidWithRole(message)}
                     nickname={userInfo.nickname}
                     avatar={userInfo.avatar}
-                    avatardialog={cavasInfo.avatar}
+                    avatarDialog={canvasInfo.avatar}
                     item={message}
                     reference={buildMessageItemReference(
                       { message: derivedMessages, reference },

web/src/pages/flow/hooks/use-get-begin-query.tsx

@@ -1,8 +1,9 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { DefaultOptionType } from 'antd/es/select';
 import get from 'lodash/get';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { BeginId, Operator } from '../constant';
-import { BeginQuery, RAGFlowNodeType } from '../interface';
+import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 
 export const useGetBeginNodeDataQuery = () => {