fix: fix the chat/share page pane (#5485)

f59d70ba · 伍闲犬 · GitHub · a4991ecd · f59d70ba · f59d70ba
Commit f59d70ba authored Aug 18, 2025 by 伍闲犬 Committed by GitHub Aug 18, 2025
9 changed files
--- a/projects/app/src/pageComponents/chat/ChatHeader.tsx
+++ b/projects/app/src/pageComponents/chat/ChatHeader.tsx
@@ -30,13 +30,19 @@ import {
  DEFAULT_LOGO_BANNER_COLLAPSED_URL
 } from '@/pageComponents/chat/constants';
 import { useChatStore } from '@/web/core/chat/context/useChatStore';
+import { usePathname } from 'next/navigation';
+import type { ChatSettingSchema } from '@fastgpt/global/core/chat/setting/type';
 const ChatHeader = ({
  history,
  showHistory,
  apps,
-  totalRecordsCount
+  totalRecordsCount,
+  pane,
+  chatSettings
 }: {
+  pane: ChatSidebarPaneEnum;
+  chatSettings: ChatSettingSchema | undefined;
  history: ChatItemType[];
  showHistory?: boolean;
  apps?: AppListItemType[];
@@ -44,16 +50,14 @@ const ChatHeader = ({
 }) => {
  const { t } = useTranslation();
  const { isPc } = useSystem();
+  const pathname = usePathname();
  const chatData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
  const isVariableVisible = useContextSelector(ChatItemContext, (v) => v.isVariableVisible);
-  const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
-  const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings);
  const isPlugin = chatData.app.type === AppTypeEnum.plugin;
-  const router = useRouter();
+  const isChat = pathname === '/chat';
-  const isChat = router.pathname === '/chat';
+  const isShare = pathname === '/chat/share';
  return isPc && isPlugin ? null : (
    <Flex
@@ -79,12 +83,12 @@ const ChatHeader = ({
          apps={apps}
          appId={chatData.appId}
          name={
-            pane === ChatSidebarPaneEnum.HOME
+            pane === ChatSidebarPaneEnum.HOME && !isShare
              ? chatSettings?.homeTabTitle || 'FastGPT'
              : chatData.app.name
          }
          avatar={
-            pane === ChatSidebarPaneEnum.HOME
+            pane === ChatSidebarPaneEnum.HOME && !isShare
              ? chatSettings?.squareLogoUrl || DEFAULT_LOGO_BANNER_COLLAPSED_URL
              : chatData.app.avatar
          }

--- a/projects/app/src/pageComponents/chat/ChatHistorySlider.tsx
+++ b/projects/app/src/pageComponents/chat/ChatHistorySlider.tsx
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Grid, Image, Box, Button, Flex, useTheme, IconButton, GridItem } from '@chakra-ui/react';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { useEditTitle } from '@/web/common/hooks/useEditTitle';
@@ -19,6 +19,8 @@ import MyDivider from '@fastgpt/web/components/common/MyDivider';
 import { useMemoizedFn } from 'ahooks';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import UserAvatarPopover from '@/pageComponents/chat/UserAvatarPopover';
+import { usePathname } from 'next/navigation';
+import type { ChatSettingSchema } from '@fastgpt/global/core/chat/setting/type';
 type HistoryItemType = {
  id: string;
@@ -30,12 +32,19 @@ type HistoryItemType = {
 const ChatHistorySlider = ({
  confirmClearText,
-  customSliderTitle
+  customSliderTitle,
+  pane,
+  chatSettings,
+  onPaneChange
 }: {
  confirmClearText: string;
  customSliderTitle?: string;
+  pane: ChatSidebarPaneEnum;
+  chatSettings: ChatSettingSchema | undefined;
+  onPaneChange?: (pane: ChatSidebarPaneEnum) => void;
 }) => {
  const theme = useTheme();
+  const pathname = usePathname();
  const { t } = useTranslation();
  const { isPc } = useSystem();
@@ -54,11 +63,9 @@ const ChatHistorySlider = ({
  const appAvatar = useContextSelector(ChatItemContext, (v) => v.chatBoxData?.app.avatar);
  const setCiteModalData = useContextSelector(ChatItemContext, (v) => v.setCiteModalData);
-  const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
+  const isActivePane = useCallback((active: ChatSidebarPaneEnum) => active === pane, [pane]);
-  const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings);
-  const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
-  const isActivePane = useMemoizedFn((active: ChatSidebarPaneEnum) => active === pane);
+  const isShare = pathname === '/chat/share';
  const concatHistory = useMemo(() => {
    const formatHistories: HistoryItemType[] = histories.map((item) => {
@@ -132,10 +139,12 @@ const ChatHistorySlider = ({
          <MyDivider h="0.5px" bg="myGray.100" my={2} mx={2} w="calc(100% - 16px)" />
+          {!isShare && (
+            <>
              <Grid templateRows="repeat(1, 1fr)" rowGap={2} py={2}>
                <GridItem
                  onClick={() => {
-                handlePaneChange(ChatSidebarPaneEnum.HOME);
+                    onPaneChange?.(ChatSidebarPaneEnum.HOME);
                    onCloseSlider();
                    setChatId();
                  }}
@@ -163,7 +172,7 @@ const ChatHistorySlider = ({
                <GridItem
                  onClick={() => {
-                handlePaneChange(ChatSidebarPaneEnum.TEAM_APPS);
+                    onPaneChange?.(ChatSidebarPaneEnum.TEAM_APPS);
                    onCloseSlider();
                  }}
                >
@@ -175,7 +184,9 @@ const ChatHistorySlider = ({
                    borderRadius={'8px'}
                    alignItems={'center'}
                    bg={isActivePane(ChatSidebarPaneEnum.TEAM_APPS) ? 'primary.100' : 'transparent'}
-                color={isActivePane(ChatSidebarPaneEnum.TEAM_APPS) ? 'primary.600' : 'myGray.500'}
+                    color={
+                      isActivePane(ChatSidebarPaneEnum.TEAM_APPS) ? 'primary.600' : 'myGray.500'
+                    }
                    _hover={{
                      bg: 'primary.100',
                      color: 'primary.600'
@@ -188,10 +199,11 @@ const ChatHistorySlider = ({
                  </Flex>
                </GridItem>
              </Grid>
              <MyDivider h="0.5px" bg="myGray.100" my={2} mx={2} w="calc(100% - 16px)" />
            </>
          )}
+        </>
+      )}
      {/* menu */}
      <Flex
@@ -380,6 +392,7 @@ const ChatHistorySlider = ({
            </Flex>
          </UserAvatarPopover>
+          {!isShare && (
            <Flex
              _hover={{ bg: 'myGray.200' }}
              bg={isActivePane(ChatSidebarPaneEnum.SETTING) ? 'myGray.200' : 'transparent'}
@@ -391,7 +404,7 @@ const ChatHistorySlider = ({
              alignItems="center"
              justifyContent="center"
              onClick={() => {
-              handlePaneChange(ChatSidebarPaneEnum.SETTING);
+                onPaneChange?.(ChatSidebarPaneEnum.SETTING);
                onCloseSlider();
              }}
            >
@@ -401,6 +414,7 @@ const ChatHistorySlider = ({
                fill={isActivePane(ChatSidebarPaneEnum.SETTING) ? 'primary.500' : 'myGray.400'}
              />
            </Flex>
+          )}
        </Flex>
      )}

--- a/projects/app/src/pageComponents/chat/ChatSetting/index.tsx
+++ b/projects/app/src/pageComponents/chat/ChatSetting/index.tsx
@@ -27,7 +27,10 @@ const ChatSetting = () => {
  const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
  const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
  const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider);
+  const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
  const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings);
+  const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
  const SettingHeader = useCallback(
    ({ children }: { children?: React.ReactNode }) => (
@@ -65,6 +68,9 @@ const ChatSetting = () => {
            <DrawerContent maxWidth="75vw">
              <ChatHistorySlider
                confirmClearText={t('common:core.chat.Confirm to clear history')}
+                pane={pane}
+                chatSettings={chatSettings}
+                onPaneChange={handlePaneChange}
              />
            </DrawerContent>
          </Drawer>

--- a/projects/app/src/pageComponents/chat/ChatTeamApp/index.tsx
+++ b/projects/app/src/pageComponents/chat/ChatTeamApp/index.tsx
@@ -28,7 +28,9 @@ const MyApps = () => {
    (v) => v
  );
+  const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
  const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings);
+  const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
  const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
  const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
@@ -78,6 +80,9 @@ const MyApps = () => {
            <DrawerContent maxWidth="75vw">
              <ChatHistorySlider
                confirmClearText={t('common:core.chat.Confirm to clear history')}
+                pane={pane}
+                chatSettings={chatSettings}
+                onPaneChange={handlePaneChange}
              />
            </DrawerContent>
          </Drawer>

--- a/projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx
+++ b/projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx
@@ -37,7 +37,6 @@ const AppChatWindow = ({ myApps }: Props) => {
  const { t } = useTranslation();
  const { isPc } = useSystem();
-  const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
  const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
  const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat);
  const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
@@ -51,6 +50,10 @@ const AppChatWindow = ({ myApps }: Props) => {
  const chatRecords = useContextSelector(ChatRecordContext, (v) => v.chatRecords);
  const totalRecordsCount = useContextSelector(ChatRecordContext, (v) => v.totalRecordsCount);
+  const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
+  const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings);
+  const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
  const { loading } = useRequest2(
    async () => {
      if (!appId || forbidLoadChat.current) return;
@@ -122,7 +125,12 @@ const AppChatWindow = ({ myApps }: Props) => {
      {/* show history slider */}
      {isPc || !appId ? (
        <SideBar externalTrigger={Boolean(datasetCiteData)}>
-          <ChatHistorySlider confirmClearText={t('common:core.chat.Confirm to clear history')} />
+          <ChatHistorySlider
+            confirmClearText={t('common:core.chat.Confirm to clear history')}
+            pane={pane}
+            chatSettings={chatSettings}
+            onPaneChange={handlePaneChange}
+          />
        </SideBar>
      ) : (
        <Drawer
@@ -134,7 +142,12 @@ const AppChatWindow = ({ myApps }: Props) => {
        >
          <DrawerOverlay backgroundColor="rgba(255,255,255,0.5)" />
          <DrawerContent maxWidth="75vw">
-            <ChatHistorySlider confirmClearText={t('common:core.chat.Confirm to clear history')} />
+            <ChatHistorySlider
+              confirmClearText={t('common:core.chat.Confirm to clear history')}
+              pane={pane}
+              chatSettings={chatSettings}
+              onPaneChange={handlePaneChange}
+            />
          </DrawerContent>
        </Drawer>
      )}
@@ -148,6 +161,8 @@ const AppChatWindow = ({ myApps }: Props) => {
        flexDirection={'column'}
      >
        <ChatHeader
+          pane={pane}
+          chatSettings={chatSettings}
          showHistory
          apps={myApps}
          history={chatRecords}

--- a/projects/app/src/pageComponents/chat/ChatWindow/HomeChatWindow.tsx
+++ b/projects/app/src/pageComponents/chat/ChatWindow/HomeChatWindow.tsx
@@ -77,8 +77,6 @@ const HomeChatWindow = ({ myApps }: Props) => {
  const { llmModelList, defaultModels, feConfigs } = useSystemStore();
  const { chatId, appId, outLinkAuthData } = useChatStore();
-  const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
  const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
  const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat);
  const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
@@ -89,7 +87,9 @@ const HomeChatWindow = ({ myApps }: Props) => {
  const setChatBoxData = useContextSelector(ChatItemContext, (v) => v.setChatBoxData);
  const resetVariables = useContextSelector(ChatItemContext, (v) => v.resetVariables);
+  const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
  const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings);
+  const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
  const chatRecords = useContextSelector(ChatRecordContext, (v) => v.chatRecords);
  const totalRecordsCount = useContextSelector(ChatRecordContext, (v) => v.totalRecordsCount);
@@ -101,6 +101,14 @@ const HomeChatWindow = ({ myApps }: Props) => {
  const [selectedModel, setSelectedModel] = useLocalStorageState('chat_home_model', {
    defaultValue: defaultModels.llm?.model
  });
+  const selectedModelAvatar = useMemo(() => {
+    const modelData = getModelFromList(llmModelList, selectedModel || '');
+    return modelData?.avatar || HUGGING_FACE_ICON;
+  }, [selectedModel, llmModelList]);
+  const selectedModelButtonLabel = useMemo(() => {
+    const modelData = availableModels.find((model) => model.value === selectedModel);
+    return modelData?.label || selectedModel;
+  }, [selectedModel, availableModels]);
  const availableTools = useMemo(
    () => chatSettings?.selectedTools || [],
@@ -246,7 +254,6 @@ const HomeChatWindow = ({ myApps }: Props) => {
      <>
        {/* 模型选择 */}
        {availableModels.length > 0 && (
-          <Box flex={['1', '0']} w={[0, 'auto']}>
          <AIModelSelector
            h={['30px', '36px']}
            boxShadow={'none'}
@@ -255,6 +262,13 @@ const HomeChatWindow = ({ myApps }: Props) => {
            rounded="full"
            list={availableModels}
            value={selectedModel}
+            maxW={['114px', 'fit-content']}
+            valueLabel={
+              <Flex maxW={['74px', '100%']} alignItems={'center'} gap={1}>
+                {isPc && <Avatar src={selectedModelAvatar} w={4} h={4} />}
+                <Box className="textEllipsis">{selectedModelButtonLabel}</Box>
+              </Flex>
+            }
            onChange={async (model) => {
              setChatBoxData((state) => ({
                ...state,
@@ -272,7 +286,6 @@ const HomeChatWindow = ({ myApps }: Props) => {
              setSelectedModel(model);
            }}
          />
-          </Box>
        )}
        {/* 工具选择下拉框 */}
@@ -348,7 +361,9 @@ const HomeChatWindow = ({ myApps }: Props) => {
      selectedToolIds,
      setSelectedToolIds,
      setChatBoxData,
-      isPc
+      isPc,
+      selectedModelAvatar,
+      selectedModelButtonLabel
    ]
  );
@@ -363,6 +378,9 @@ const HomeChatWindow = ({ myApps }: Props) => {
          <ChatHistorySlider
            customSliderTitle={t('chat:history_slider.home.title')}
            confirmClearText={t('common:core.chat.Confirm to clear history')}
+            pane={pane}
+            chatSettings={chatSettings}
+            onPaneChange={handlePaneChange}
          />
        </SideBar>
      ) : (
@@ -378,6 +396,9 @@ const HomeChatWindow = ({ myApps }: Props) => {
            <ChatHistorySlider
              customSliderTitle={t('chat:history_slider.home.title')}
              confirmClearText={t('common:core.chat.Confirm to clear history')}
+              pane={pane}
+              chatSettings={chatSettings}
+              onPaneChange={handlePaneChange}
            />
          </DrawerContent>
        </Drawer>
@@ -407,6 +428,8 @@ const HomeChatWindow = ({ myApps }: Props) => {
          )
        ) : (
          <ChatHeader
+            pane={pane}
+            chatSettings={chatSettings}
            showHistory
            apps={myApps}
            history={chatRecords}

--- a/projects/app/src/pageComponents/chat/SliderApps.tsx
+++ b/projects/app/src/pageComponents/chat/SliderApps.tsx
@@ -25,6 +25,7 @@ import {
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useContextSelector } from 'use-context-selector';
 import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
+import { usePathname } from 'next/navigation';
 type Props = {
  activeAppId: string;
@@ -326,6 +327,7 @@ const NavigationSection = () => {
 };
 const BottomSection = () => {
+  const pathname = usePathname();
  const { t } = useTranslation();
  const { feConfigs } = useSystemStore();
  const isProVersion = !!feConfigs.isPlus;
@@ -335,6 +337,7 @@ const BottomSection = () => {
  const avatar = userInfo?.avatar;
  const username = userInfo?.username;
  const isAdmin = !!userInfo?.team.permission.hasManagePer;
+  const isShare = pathname === '/chat/share';
  const isCollapsed = useContextSelector(ChatSettingContext, (v) => v.collapse === 1);
  const isSettingActive = useContextSelector(
@@ -354,7 +357,7 @@ const BottomSection = () => {
        h={isCollapsed ? 'auto' : '40px'}
        minH="40px"
      >
-        {isAdmin && isProVersion && (
+        {isAdmin && isProVersion && !isShare && (
          <MotionBox
            order={isCollapsed ? 1 : 2}
            layout={false}

--- a/projects/app/src/pages/chat/share.tsx
+++ b/projects/app/src/pages/chat/share.tsx
@@ -40,6 +40,7 @@ import { type AppSchema } from '@fastgpt/global/core/app/type';
 import ChatQuoteList from '@/pageComponents/chat/ChatQuoteList';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants';
+import { ChatSidebarPaneEnum } from '@/pageComponents/chat/constants';
 const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));
@@ -220,6 +221,8 @@ const OutLink = (props: Props) => {
  const RenderHistoryList = useMemo(() => {
    const Children = (
      <ChatHistorySlider
+        chatSettings={undefined}
+        pane={ChatSidebarPaneEnum.RECENTLY_USED_APPS}
        confirmClearText={t('common:core.chat.Confirm to clear share chat history')}
      />
    );
@@ -272,6 +275,8 @@ const OutLink = (props: Props) => {
                {/* header */}
                {showHead === '1' ? (
                  <ChatHeader
+                    chatSettings={undefined}
+                    pane={ChatSidebarPaneEnum.RECENTLY_USED_APPS}
                    history={chatRecords}
                    totalRecordsCount={totalRecordsCount}
                    showHistory={showHistory === '1'}

--- a/projects/app/src/web/core/chat/context/chatSettingContext.tsx
+++ b/projects/app/src/web/core/chat/context/chatSettingContext.tsx
@@ -11,6 +11,7 @@ import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createContext } from 'use-context-selector';
+import { usePathname } from 'next/navigation';
 type ChatSettingReturnType = ChatSettingSchema | undefined;
@@ -41,12 +42,13 @@ export const ChatSettingContext = createContext<ChatSettingContextValue>({
 export const ChatSettingContextProvider = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter();
+  const pathname = usePathname();
  const { feConfigs } = useSystemStore();
  const { appId, setLastPane, setLastChatAppId, lastPane } = useChatStore();
-  const { pane = lastPane || ChatSidebarPaneEnum.HOME } = router.query as {
+  const { pane = lastPane || ChatSidebarPaneEnum.HOME } = (
-    pane: ChatSidebarPaneEnum;
+    pathname === '/chat/share' ? { pane: ChatSidebarPaneEnum.RECENTLY_USED_APPS } : router.query
-  };
+  ) as { pane: ChatSidebarPaneEnum };
  const [collapse, setCollapse] = useState<CollapseStatusType>(defaultCollapseStatus);
@@ -86,6 +88,7 @@ export const ChatSettingContextProvider = ({ children }: { children: React.React
      await router.replace({
        query: {
+          ...router.query,
          appId: _id,
          pane: newPane
        }
@@ -101,7 +104,7 @@ export const ChatSettingContextProvider = ({ children }: { children: React.React
    if (!Object.values(ChatSidebarPaneEnum).includes(pane)) {
      handlePaneChange(ChatSidebarPaneEnum.HOME);
    }
-  }, [pane]);
+  }, [pane, handlePaneChange]);
  const logos: Pick<ChatSettingSchema, 'wideLogoUrl' | 'squareLogoUrl'> = useMemo(
    () => ({