fix: align mobile chat headers (#7100)

* fix: align mobile chat headers * fix: declare share header data after load state

fix: align mobile chat headers (#7100)
* fix: align mobile chat headers * fix: declare share header data after load state
89225d79 · Xianquan · GitHub · 8f177a0f · 89225d79 · 89225d79
Commit 89225d79 authored Jun 11, 2026 by Xianquan Committed by GitHub Jun 11, 2026
6 changed files
--- a/packages/web/i18n/en/common.json
+++ b/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",

--- a/packages/web/i18n/zh-CN/common.json
+++ b/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": "接口内容为空，可能文本超长了~",

--- a/packages/web/i18n/zh-Hant/common.json
+++ b/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 內容為空，可能是文字過長",

--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/ChatInput.tsx
+++ b/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}

--- a/projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx
+++ b/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>

--- a/projects/app/src/pages/chat/share.tsx
+++ b/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>