fix: align mobile chat headers (#7100)

* fix: align mobile chat headers

* fix: declare share header data after load state

packages/web/i18n/en/common.json

@@ -375,6 +375,7 @@
   "core.chat.Send Message": "Send",
   "core.chat.Speaking": "I'm Listening, Please Speak...",
   "core.chat.Type a message": "Enter a Question, Press [Enter] to Send / Press [Ctrl(Alt/Shift) + Enter] for New Line",
+  "core.chat.Type a message to app": "Message {{appName}}",
   "core.chat.Unpin": "Unpin",
   "core.chat.error.Chat error": "Chat Error",
   "core.chat.error.Messages empty": "API Content is Empty, Possibly Due to Text Being Too Long",

packages/web/i18n/zh-CN/common.json

@@ -375,6 +375,7 @@
   "core.chat.Send Message": "发送",
   "core.chat.Speaking": "我在听，请说...",
   "core.chat.Type a message": "发消息给FastGPT",
+  "core.chat.Type a message to app": "发消息给{{appName}}",
   "core.chat.Unpin": "取消置顶",
   "core.chat.error.Chat error": "对话出现异常",
   "core.chat.error.Messages empty": "接口内容为空，可能文本超长了~",

packages/web/i18n/zh-Hant/common.json

@@ -371,6 +371,7 @@
   "core.chat.Send Message": "傳送",
   "core.chat.Speaking": "我在聽，請說...",
   "core.chat.Type a message": "輸入問題，按 [Enter] 傳送 / 按 [Ctrl(Alt/Shift) + Enter] 換行",
+  "core.chat.Type a message to app": "傳送訊息給{{appName}}",
   "core.chat.Unpin": "取消釘選",
   "core.chat.error.Chat error": "對話發生錯誤",
   "core.chat.error.Messages empty": "API 內容為空，可能是文字過長",

projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/ChatInput.tsx

@@ -11,13 +11,14 @@ import {
   type SendPromptFnType,
   type StopChatFnResult
 } from '../type';
-import { ChatInputDefaultHeight, textareaMinH } from '../constants';
+import { ChatInputDefaultHeight, ChatTypeEnum, textareaMinH } from '../constants';
 import { useFieldArray, type UseFormReturn } from 'react-hook-form';
 import { ChatBoxContext } from '../Provider';
 import dynamic from 'next/dynamic';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowRuntimeContext } from '../../context/workflowRuntimeContext';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
 import { documentFileType } from '@fastgpt/global/common/file/constants';
 import FilePreview from '../../components/FilePreview';
 import { useFileUpload } from '../hooks/useFileUpload';
@@ -82,6 +83,10 @@ const ChatInput = ({
   const fileSelectConfig = useContextSelector(ChatBoxContext, (v) => v.fileSelectConfig);
   const dialogTips = useContextSelector(ChatBoxContext, (v) => v.dialogTips);
   const autoTTSResponse = useContextSelector(ChatBoxContext, (v) => v.autoTTSResponse);
+  const chatType = useContextSelector(ChatBoxContext, (v) => v.chatType);
+  const appName = useContextSelector(ChatItemContext, (v) => v.chatBoxData.app.name);
+  const placeholderAppName =
+    chatType === ChatTypeEnum.home ? 'FastGPT' : appName || 'FastGPT';
 
   const fileCtrl = useFieldArray({
     control,
@@ -174,7 +179,7 @@ const ChatInput = ({
             }}
             placeholder={
               dialogTips ||
-              (isPc ? t('common:core.chat.Type a message') : t('chat:input_placeholder_phone'))
+              t('common:core.chat.Type a message to app', { appName: placeholderAppName })
             }
             resize={'none'}
             rows={1}

projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx

@@ -33,6 +33,7 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import ToolMenu from '@/pageComponents/chat/ToolMenu';
 import { mobileChatHeaderIconButtonStyle } from './headerIconButtonStyle';
 import { useSandboxEditor, useSandboxStatus } from '@/pageComponents/chat/SandboxEditor/hook';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 
 const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));
 
@@ -57,6 +58,9 @@ const AppChatWindow = () => {
     isCurrentChatReady && chatBoxData.title?.trim()
       ? chatBoxData.title
       : t('common:core.chat.New Chat', { defaultValue: '新对话' });
+  const mobileHeaderTitle = isCurrentChatReady
+    ? chatBoxData.app.name
+    : t('common:core.chat.New Chat', { defaultValue: '新对话' });
   const datasetCiteData = useContextSelector(ChatItemContext, (v) => v.datasetCiteData);
   const setChatBoxData = useContextSelector(ChatItemContext, (v) => v.setChatBoxData);
   const resetVariables = useContextSelector(ChatItemContext, (v) => v.resetVariables);
@@ -239,8 +243,18 @@ const AppChatWindow = () => {
               onClick={onOpenSlider}
             />
 
-            <Flex alignItems="center" minW={0} flex="1" justifyContent="center" px={3}>
+            <Flex alignItems="center" minW={0} flex="1" justifyContent="center" px={3} gap={2}>
+              {isCurrentChatReady && (
+                <Avatar
+                  src={chatBoxData.app.avatar}
+                  w="24px"
+                  h="24px"
+                  borderRadius="6px"
+                  flexShrink={0}
+                />
+              )}
               <Box
+                minW={0}
                 fontSize="16px"
                 fontWeight={500}
                 color="myGray.900"
@@ -248,7 +262,7 @@ const AppChatWindow = () => {
                 whiteSpace="nowrap"
                 textOverflow="clip"
               >
-                {chatWindowTitle}
+                {mobileHeaderTitle}
               </Box>
             </Flex>
 

projects/app/src/pages/chat/share.tsx

@@ -46,6 +46,7 @@ import ChatWindowHeader from '@/pageComponents/chat/ChatWindow/ChatWindowHeader'
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import ToolMenu from '@/pageComponents/chat/ToolMenu';
 import { mobileChatHeaderIconButtonStyle } from '@/pageComponents/chat/ChatWindow/headerIconButtonStyle';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 
 const logger = getLogger(LogCategories.MODULE.CHAT.ITEM);
 
@@ -148,6 +149,9 @@ const OutLink = (props: Props) => {
       }
     }
   );
+  const mobileHeaderAppName = props.appName || data?.app?.name || chatBoxData.app.name;
+  const mobileHeaderAppAvatar = props.appAvatar || data?.app?.avatar || chatBoxData.app.avatar;
+
   useEffect(() => {
     if (initSign.current === false && data && isChatRecordsLoaded) {
       initSign.current = true;
@@ -346,14 +350,33 @@ const OutLink = (props: Props) => {
                         <Box minW="36px" />
                       )}
 
-                      <Flex alignItems="center" minW={0} flex="1" justifyContent="center" px={3}>
+                      <Flex
+                        alignItems="center"
+                        minW={0}
+                        flex="1"
+                        justifyContent="center"
+                        px={3}
+                        gap={2}
+                      >
+                        {!!mobileHeaderAppAvatar && (
+                          <Avatar
+                            src={mobileHeaderAppAvatar}
+                            w="24px"
+                            h="24px"
+                            borderRadius="6px"
+                            flexShrink={0}
+                          />
+                        )}
                         <Box
+                          minW={0}
                           fontSize="16px"
                           fontWeight={500}
                           color="myGray.900"
-                          className="textEllipsis"
+                          overflow="hidden"
+                          whiteSpace="nowrap"
+                          textOverflow="clip"
                         >
-                          {chatWindowTitle}
+                          {mobileHeaderAppName}
                         </Box>
                       </Flex>