Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit ff9c6c9b by 伍闲犬 Committed by GitHub
Options

chore: extract chat history and drawer; fix model selector (#5492) 

* chore: extract chat history and drawer; fix model selector

* refactor: chat slider components structure
parent 6da65ea5
Showing with 635 additions and 164 deletions
projects/app/src/components/Select/AIModelSelector.tsx
...@@ -60,7 +60,7 @@ const OneRowSelector = ({ list, onChange, disableTip, ...props }: Props) => { ...@@ -60,7 +60,7 @@ const OneRowSelector = ({ list, onChange, disableTip, ...props }: Props) => {
fallbackSrc={HUGGING_FACE_ICON} fallbackSrc={HUGGING_FACE_ICON}
/> />
<Box>{modelData.name}</Box> <Box noOfLines={1}>{modelData.name}</Box>
</Flex> </Flex>
) )
}; };
......
projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/ChatInput.tsx
...@@ -256,7 +256,7 @@ const ChatInput = ({ ...@@ -256,7 +256,7 @@ const ChatInput = ({
gap={[0, 1]} gap={[0, 1]}
> >
{/* 左侧自定义按钮组 */} {/* 左侧自定义按钮组 */}
<Flex alignItems={'center'} gap={2} flex={'1 0 0'} w={0}> <Flex alignItems={'center'} gap={2}>
{InputLeftComponent} {InputLeftComponent}
</Flex> </Flex>
......
projects/app/src/pageComponents/chat/ChatHeader.tsx
...@@ -38,11 +38,13 @@ const ChatHeader = ({ ...@@ -38,11 +38,13 @@ const ChatHeader = ({
showHistory, showHistory,
apps, apps,
totalRecordsCount, totalRecordsCount,
pane, pane,
chatSettings chatSettings
}: { }: {
pane: ChatSidebarPaneEnum; pane: ChatSidebarPaneEnum;
chatSettings: ChatSettingSchema | undefined; chatSettings: ChatSettingSchema | undefined;
history: ChatItemType[]; history: ChatItemType[];
showHistory?: boolean; showHistory?: boolean;
apps?: AppListItemType[]; apps?: AppListItemType[];
...@@ -51,13 +53,14 @@ const ChatHeader = ({ ...@@ -51,13 +53,14 @@ const ChatHeader = ({
const { t } = useTranslation(); const { t } = useTranslation();
const { isPc } = useSystem(); const { isPc } = useSystem();
const pathname = usePathname(); const pathname = usePathname();
const { source } = useChatStore();
const chatData = useContextSelector(ChatItemContext, (v) => v.chatBoxData); const chatData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
const isVariableVisible = useContextSelector(ChatItemContext, (v) => v.isVariableVisible); const isVariableVisible = useContextSelector(ChatItemContext, (v) => v.isVariableVisible);
const isPlugin = chatData.app.type === AppTypeEnum.plugin; const isPlugin = chatData.app.type === AppTypeEnum.plugin;
const isChat = pathname === '/chat'; const isChat = pathname === '/chat';
const isShare = pathname === '/chat/share'; const isShare = source === 'share';
return isPc && isPlugin ? null : ( return isPc && isPlugin ? null : (
<Flex <Flex
......
projects/app/src/pageComponents/chat/ChatSetting/index.tsx
import DiagramModal from '@/pageComponents/chat/ChatSetting/DiagramModal'; import DiagramModal from '@/pageComponents/chat/ChatSetting/DiagramModal';
import { useCallback, useState } from 'react'; import { type PropsWithChildren, useCallback, useState } from 'react';
import { ChatSettingTabOptionEnum } from '@/pageComponents/chat/constants'; import { ChatSettingTabOptionEnum } from '@/pageComponents/chat/constants';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import SettingTabs from '@/pageComponents/chat/ChatSetting/SettingTabs'; import SettingTabs from '@/pageComponents/chat/ChatSetting/SettingTabs';
import { useSystem } from '@fastgpt/web/hooks/useSystem'; import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { Drawer, DrawerContent, DrawerOverlay, Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { useContextSelector } from 'use-context-selector'; import { useContextSelector } from 'use-context-selector';
import MyIcon from '@fastgpt/web/components/common/Icon'; import MyIcon from '@fastgpt/web/components/common/Icon';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { useTranslation } from 'react-i18next';
import { ChatContext } from '@/web/core/chat/context/chatContext'; import { ChatContext } from '@/web/core/chat/context/chatContext';
import NextHead from '@/components/common/NextHead'; import NextHead from '@/components/common/NextHead';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext'; import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
import { useTranslation } from 'react-i18next';
const HomepageSetting = dynamic(() => import('@/pageComponents/chat/ChatSetting/HomepageSetting')); const HomepageSetting = dynamic(() => import('@/pageComponents/chat/ChatSetting/HomepageSetting'));
const LogDetails = dynamic(() => import('@/pageComponents/chat/ChatSetting/LogDetails')); const LogDetails = dynamic(() => import('@/pageComponents/chat/ChatSetting/LogDetails'));
...@@ -24,21 +24,15 @@ const ChatSetting = () => { ...@@ -24,21 +24,15 @@ const ChatSetting = () => {
const [isOpenDiagram, setIsOpenDiagram] = useState(false); const [isOpenDiagram, setIsOpenDiagram] = useState(false);
const [tab, setTab] = useState<`${ChatSettingTabOptionEnum}`>('home'); const [tab, setTab] = useState<`${ChatSettingTabOptionEnum}`>('home');
const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider); const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider);
const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings); const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings);
const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
const SettingHeader = useCallback( const SettingHeader = useCallback(
({ children }: { children?: React.ReactNode }) => ( ({ children }: PropsWithChildren) => (
<>
<SettingTabs tab={tab} onChange={setTab}> <SettingTabs tab={tab} onChange={setTab}>
{children} {children}
</SettingTabs> </SettingTabs>
</>
), ),
[tab, setTab] [tab, setTab]
); );
...@@ -48,6 +42,7 @@ const ChatSetting = () => { ...@@ -48,6 +42,7 @@ const ChatSetting = () => {
<NextHead title={chatSettings?.homeTabTitle || 'FastGPT'} icon="/icon/logo.svg" /> <NextHead title={chatSettings?.homeTabTitle || 'FastGPT'} icon="/icon/logo.svg" />
{!isPc && ( {!isPc && (
<>
<Flex h="46px" w="100vw" position="absolute" borderBottom="sm" color="myGray.900"> <Flex h="46px" w="100vw" position="absolute" borderBottom="sm" color="myGray.900">
<MyIcon <MyIcon
ml={3} ml={3}
...@@ -56,25 +51,15 @@ const ChatSetting = () => { ...@@ -56,25 +51,15 @@ const ChatSetting = () => {
name="core/chat/sidebar/menu" name="core/chat/sidebar/menu"
onClick={onOpenSlider} onClick={onOpenSlider}
/> />
</Flex>
<Drawer <ChatSliderMobileDrawer
size="xs" showHeader
placement="left" showFooter
autoFocus={false} banner={chatSettings?.wideLogoUrl}
isOpen={isOpenSlider} menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor="rgba(255,255,255,0.5)" />
<DrawerContent maxWidth="75vw">
<ChatHistorySlider
confirmClearText={t('common:core.chat.Confirm to clear history')}
pane={pane}
chatSettings={chatSettings}
onPaneChange={handlePaneChange}
/> />
</DrawerContent> </>
</Drawer>
</Flex>
)} )}
{/* homepage setting */} {/* homepage setting */}
......
projects/app/src/pageComponents/chat/ChatTeamApp/index.tsx
'use client';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Box, Flex, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'; import { Box, Flex, Tab, TabIndicator, TabList, Tabs } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useContextSelector } from 'use-context-selector'; import { useContextSelector } from 'use-context-selector';
import AppListContextProvider, { AppListContext } from '@/pageComponents/dashboard/apps/context'; import AppListContextProvider, { AppListContext } from '@/pageComponents/dashboard/apps/context';
...@@ -13,27 +11,23 @@ import { useSystem } from '@fastgpt/web/hooks/useSystem'; ...@@ -13,27 +11,23 @@ import { useSystem } from '@fastgpt/web/hooks/useSystem';
import List from '@/pageComponents/chat/ChatTeamApp/List'; import List from '@/pageComponents/chat/ChatTeamApp/List';
import SearchInput from '@fastgpt/web/components/common/Input/SearchInput'; import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
import MyIcon from '@fastgpt/web/components/common/Icon'; import MyIcon from '@fastgpt/web/components/common/Icon';
import { Drawer, DrawerContent, DrawerOverlay } from '@chakra-ui/react';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { ChatContext } from '@/web/core/chat/context/chatContext'; import { ChatContext } from '@/web/core/chat/context/chatContext';
import NextHead from '@/components/common/NextHead'; import NextHead from '@/components/common/NextHead';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext'; import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
const MyApps = () => { const MyApps = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { isPc } = useSystem(); const { isPc } = useSystem();
const { paths, myApps, isFetchingApps, setSearchKey } = useContextSelector( const { paths, myApps, isFetchingApps, setSearchKey } = useContextSelector(
AppListContext, AppListContext,
(v) => v (v) => v
); );
const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
const chatSettings = useContextSelector(ChatSettingContext, (v) => v.chatSettings); 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);
const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider); const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider);
const map = useMemo( const map = useMemo(
...@@ -69,23 +63,12 @@ const MyApps = () => { ...@@ -69,23 +63,12 @@ const MyApps = () => {
onClick={onOpenSlider} onClick={onOpenSlider}
/> />
<Drawer <ChatSliderMobileDrawer
size="xs" showHeader
placement="left" showFooter
autoFocus={false} banner={chatSettings?.wideLogoUrl}
isOpen={isOpenSlider} menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor="rgba(255,255,255,0.5)" />
<DrawerContent maxWidth="75vw">
<ChatHistorySlider
confirmClearText={t('common:core.chat.Confirm to clear history')}
pane={pane}
chatSettings={chatSettings}
onPaneChange={handlePaneChange}
/> />
</DrawerContent>
</Drawer>
</Flex> </Flex>
)} )}
......
projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx
import ChatHeader from '@/pageComponents/chat/ChatHeader'; import ChatHeader from '@/pageComponents/chat/ChatHeader';
import ChatBox from '@/components/core/chat/ChatContainer/ChatBox'; import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
import { Flex, Box, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react'; import { Flex, Box } from '@chakra-ui/react';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useSystem } from '@fastgpt/web/hooks/useSystem'; import { useSystem } from '@fastgpt/web/hooks/useSystem';
import SideBar from '@/components/SideBar'; import SideBar from '@/components/SideBar';
...@@ -20,26 +19,26 @@ import { ChatRecordContext } from '@/web/core/chat/context/chatRecordContext'; ...@@ -20,26 +19,26 @@ import { ChatRecordContext } from '@/web/core/chat/context/chatRecordContext';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest'; import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { getInitChatInfo } from '@/web/core/chat/api'; import { getInitChatInfo } from '@/web/core/chat/api';
import { useUserStore } from '@/web/support/user/useUserStore'; import { useUserStore } from '@/web/support/user/useUserStore';
import { useRouter } from 'next/router';
import NextHead from '@/components/common/NextHead'; import NextHead from '@/components/common/NextHead';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext'; import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
import { ChatSidebarPaneEnum } from '../constants'; import { ChatSidebarPaneEnum } from '../constants';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import ChatHistorySidebar from '@/pageComponents/chat/slider/ChatSliderSidebar';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
type Props = { type Props = {
myApps: AppListItemType[]; myApps: AppListItemType[];
}; };
const AppChatWindow = ({ myApps }: Props) => { const AppChatWindow = ({ myApps }: Props) => {
const router = useRouter();
const { userInfo } = useUserStore(); const { userInfo } = useUserStore();
const { chatId, appId, outLinkAuthData } = useChatStore(); const { chatId, appId, outLinkAuthData } = useChatStore();
const { feConfigs } = useSystemStore();
const { t } = useTranslation(); const { t } = useTranslation();
const { isPc } = useSystem(); const { isPc } = useSystem();
const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat); const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const onUpdateHistoryTitle = useContextSelector(ChatContext, (v) => v.onUpdateHistoryTitle); const onUpdateHistoryTitle = useContextSelector(ChatContext, (v) => v.onUpdateHistoryTitle);
const chatBoxData = useContextSelector(ChatItemContext, (v) => v.chatBoxData); const chatBoxData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
...@@ -123,33 +122,19 @@ const AppChatWindow = ({ myApps }: Props) => { ...@@ -123,33 +122,19 @@ const AppChatWindow = ({ myApps }: Props) => {
<NextHead title={chatBoxData.app.name} icon={chatBoxData.app.avatar} /> <NextHead title={chatBoxData.app.name} icon={chatBoxData.app.avatar} />
{/* show history slider */} {/* show history slider */}
{isPc || !appId ? ( {isPc ? (
<SideBar externalTrigger={Boolean(datasetCiteData)}> <SideBar externalTrigger={Boolean(datasetCiteData)}>
<ChatHistorySlider <ChatHistorySidebar
confirmClearText={t('common:core.chat.Confirm to clear history')} menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
pane={pane}
chatSettings={chatSettings}
onPaneChange={handlePaneChange}
/> />
</SideBar> </SideBar>
) : ( ) : (
<Drawer <ChatSliderMobileDrawer
size="xs" showHeader
placement="left" showFooter
autoFocus={false} banner={chatSettings?.wideLogoUrl}
isOpen={isOpenSlider} menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor="rgba(255,255,255,0.5)" />
<DrawerContent maxWidth="75vw">
<ChatHistorySlider
confirmClearText={t('common:core.chat.Confirm to clear history')}
pane={pane}
chatSettings={chatSettings}
onPaneChange={handlePaneChange}
/> />
</DrawerContent>
</Drawer>
)} )}
{/* chat container */} {/* chat container */}
......
projects/app/src/pageComponents/chat/ChatWindow/HomeChatWindow.tsx
...@@ -2,9 +2,6 @@ import ChatBox from '@/components/core/chat/ChatContainer/ChatBox'; ...@@ -2,9 +2,6 @@ import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
import { import {
Flex, Flex,
Box, Box,
Drawer,
DrawerOverlay,
DrawerContent,
Button, Button,
Menu, Menu,
MenuButton, MenuButton,
...@@ -12,7 +9,6 @@ import { ...@@ -12,7 +9,6 @@ import {
MenuItem, MenuItem,
Checkbox Checkbox
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useSystem } from '@fastgpt/web/hooks/useSystem'; import { useSystem } from '@fastgpt/web/hooks/useSystem';
import SideBar from '@/components/SideBar'; import SideBar from '@/components/SideBar';
...@@ -48,10 +44,9 @@ import type { ...@@ -48,10 +44,9 @@ import type {
} from '@fastgpt/global/core/app/type'; } from '@fastgpt/global/core/app/type';
import ChatHeader from '@/pageComponents/chat/ChatHeader'; import ChatHeader from '@/pageComponents/chat/ChatHeader';
import { ChatRecordContext } from '@/web/core/chat/context/chatRecordContext'; import { ChatRecordContext } from '@/web/core/chat/context/chatRecordContext';
import { HUGGING_FACE_ICON } from '@fastgpt/global/common/system/constants';
import { getModelFromList } from '@fastgpt/global/core/ai/model';
import MyPopover from '@fastgpt/web/components/common/MyPopover';
import { ChatSidebarPaneEnum } from '../constants'; import { ChatSidebarPaneEnum } from '../constants';
import ChatHistorySidebar from '@/pageComponents/chat/slider/ChatSliderSidebar';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
type Props = { type Props = {
myApps: AppListItemType[]; myApps: AppListItemType[];
...@@ -77,9 +72,7 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -77,9 +72,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
const { llmModelList, defaultModels, feConfigs } = useSystemStore(); const { llmModelList, defaultModels, feConfigs } = useSystemStore();
const { chatId, appId, outLinkAuthData } = useChatStore(); const { chatId, appId, outLinkAuthData } = useChatStore();
const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat); const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const onUpdateHistoryTitle = useContextSelector(ChatContext, (v) => v.onUpdateHistoryTitle); const onUpdateHistoryTitle = useContextSelector(ChatContext, (v) => v.onUpdateHistoryTitle);
const chatBoxData = useContextSelector(ChatItemContext, (v) => v.chatBoxData); const chatBoxData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
...@@ -101,14 +94,6 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -101,14 +94,6 @@ const HomeChatWindow = ({ myApps }: Props) => {
const [selectedModel, setSelectedModel] = useLocalStorageState('chat_home_model', { const [selectedModel, setSelectedModel] = useLocalStorageState('chat_home_model', {
defaultValue: defaultModels.llm?.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( const availableTools = useMemo(
() => chatSettings?.selectedTools || [], () => chatSettings?.selectedTools || [],
...@@ -129,6 +114,8 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -129,6 +114,8 @@ const HomeChatWindow = ({ myApps }: Props) => {
setSelectedToolIds( setSelectedToolIds(
selectedToolIds.filter((id) => availableTools.some((tool) => tool.pluginId === id)) selectedToolIds.filter((id) => availableTools.some((tool) => tool.pluginId === id))
); );
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [availableTools, chatSettings?.selectedTools]); }, [availableTools, chatSettings?.selectedTools]);
// 初始化聊天数据 // 初始化聊天数据
...@@ -254,6 +241,7 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -254,6 +241,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
<> <>
{/* 模型选择 */} {/* 模型选择 */}
{availableModels.length > 0 && ( {availableModels.length > 0 && (
<Box w="auto">
<AIModelSelector <AIModelSelector
h={['30px', '36px']} h={['30px', '36px']}
boxShadow={'none'} boxShadow={'none'}
...@@ -262,13 +250,6 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -262,13 +250,6 @@ const HomeChatWindow = ({ myApps }: Props) => {
rounded="full" rounded="full"
list={availableModels} list={availableModels}
value={selectedModel} 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) => { onChange={async (model) => {
setChatBoxData((state) => ({ setChatBoxData((state) => ({
...state, ...state,
...@@ -286,6 +267,7 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -286,6 +267,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
setSelectedModel(model); setSelectedModel(model);
}} }}
/> />
</Box>
)} )}
{/* 工具选择下拉框 */} {/* 工具选择下拉框 */}
...@@ -299,6 +281,7 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -299,6 +281,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
rounded="full" rounded="full"
variant="whiteBase" variant="whiteBase"
leftIcon={<MyIcon name="core/app/toolCall" w="14px" />} leftIcon={<MyIcon name="core/app/toolCall" w="14px" />}
flexShrink={0}
_active={{ _active={{
transform: 'none' transform: 'none'
}} }}
...@@ -361,9 +344,7 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -361,9 +344,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
selectedToolIds, selectedToolIds,
setSelectedToolIds, setSelectedToolIds,
setChatBoxData, setChatBoxData,
isPc, isPc
selectedModelAvatar,
selectedModelButtonLabel
] ]
); );
...@@ -373,35 +354,20 @@ const HomeChatWindow = ({ myApps }: Props) => { ...@@ -373,35 +354,20 @@ const HomeChatWindow = ({ myApps }: Props) => {
<NextHead title={chatSettings?.homeTabTitle || 'FastGPT'} icon="/icon/logo.svg" /> <NextHead title={chatSettings?.homeTabTitle || 'FastGPT'} icon="/icon/logo.svg" />
{/* show history slider */} {/* show history slider */}
{isPc || !appId ? ( {isPc ? (
<SideBar externalTrigger={Boolean(datasetCiteData)}> <SideBar externalTrigger={Boolean(datasetCiteData)}>
<ChatHistorySlider <ChatHistorySidebar
customSliderTitle={t('chat:history_slider.home.title')} title={t('chat:history_slider.home.title')}
confirmClearText={t('common:core.chat.Confirm to clear history')} menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
pane={pane}
chatSettings={chatSettings}
onPaneChange={handlePaneChange}
/> />
</SideBar> </SideBar>
) : ( ) : (
<Drawer <ChatSliderMobileDrawer
size="xs" showHeader
placement="left" showFooter
autoFocus={false} banner={chatSettings?.wideLogoUrl}
isOpen={isOpenSlider} menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor="rgba(255,255,255,0.5)" />
<DrawerContent maxWidth="75vw">
<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>
)} )}
{/* chat container */} {/* chat container */}
......
projects/app/src/pageComponents/chat/SliderApps.tsx
...@@ -397,6 +397,7 @@ const BottomSection = () => { ...@@ -397,6 +397,7 @@ const BottomSection = () => {
display="flex" display="flex"
alignItems="center" alignItems="center"
justifyContent={'flex-start'} justifyContent={'flex-start'}
maxW={isCollapsed ? 'fit-content' : 'calc(100% - 52px)'}
> >
{isLoggedIn ? ( {isLoggedIn ? (
<UserAvatarPopover <UserAvatarPopover
...@@ -418,9 +419,6 @@ const BottomSection = () => { ...@@ -418,9 +419,6 @@ const BottomSection = () => {
flexGrow={1} flexGrow={1}
fontSize={'sm'} fontSize={'sm'}
fontWeight={500} fontWeight={500}
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
minW={0} minW={0}
> >
{username} {username}
......
projects/app/src/pageComponents/chat/UserAvatarPopover.tsx
...@@ -33,7 +33,11 @@ const UserAvatarPopover = ({ ...@@ -33,7 +33,11 @@ const UserAvatarPopover = ({
return ( return (
<> <>
<MyPopover <MyPopover
Trigger={<Box cursor="pointer">{children}</Box>} Trigger={
<Box cursor="pointer" w="full">
{children}
</Box>
}
trigger="hover" trigger="hover"
placement={placement} placement={placement}
w="160px" w="160px"
...@@ -59,7 +63,9 @@ const UserAvatarPopover = ({ ...@@ -59,7 +63,9 @@ const UserAvatarPopover = ({
gap={2} gap={2}
> >
<Avatar src={userInfo?.avatar} bg="myGray.200" borderRadius="50%" w={5} h={5} /> <Avatar src={userInfo?.avatar} bg="myGray.200" borderRadius="50%" w={5} h={5} />
<Box>{userInfo?.username ?? '-'}</Box> <Box w="full" className="textEllipsis">
{userInfo?.username ?? '-'}
</Box>
</Flex> </Flex>
)} )}
...@@ -75,7 +81,7 @@ const UserAvatarPopover = ({ ...@@ -75,7 +81,7 @@ const UserAvatarPopover = ({
w="100%" w="100%"
> >
<MyIcon name="core/chat/sidebar/logout" /> <MyIcon name="core/chat/sidebar/logout" />
<Text fontSize="14px"> {t('common:logout')}</Text> <Text fontSize="14px">{t('common:logout')}</Text>
</Flex> </Flex>
</Flex> </Flex>
); );
......
projects/app/src/pageComponents/chat/slider/ChatSliderFooter.tsx 0 → 100644
import React from 'react';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
import { ChatSidebarPaneEnum } from '@/pageComponents/chat/constants';
import { useContextSelector } from 'use-context-selector';
import { ChatContext } from '@/web/core/chat/context/chatContext';
import { Box, Flex } from '@chakra-ui/react';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MyIcon from '@fastgpt/web/components/common/Icon';
import UserAvatarPopover from '@/pageComponents/chat/UserAvatarPopover';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useSystemStore } from '@/web/common/system/useSystemStore';
const ChatSliderFooter = () => {
const { userInfo } = useUserStore();
const { feConfigs } = useSystemStore();
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
const isSettingPane = pane === ChatSidebarPaneEnum.SETTING;
return (
<Flex flexShrink={0} gap={2} alignItems="center" justifyContent="space-between" p={2}>
<UserAvatarPopover isCollapsed={false} placement="top-end">
<Flex alignItems="center" gap={2} borderRadius="50%" p={2}>
<Avatar src={userInfo?.avatar} w={8} h={8} borderRadius="50%" bg="myGray.200" />
<Box className="textEllipsis" flexGrow={1} fontSize={'sm'} fontWeight={500} minW={0}>
{userInfo?.username}
</Box>
</Flex>
</UserAvatarPopover>
{feConfigs.isPlus && (
<Flex
_hover={{ bg: 'myGray.200' }}
bg={isSettingPane ? 'myGray.200' : 'transparent'}
borderRadius={'8px'}
p={2}
cursor={'pointer'}
w="40px"
h="40px"
alignItems="center"
justifyContent="center"
onClick={() => {
handlePaneChange(ChatSidebarPaneEnum.SETTING);
onCloseSlider();
}}
>
<MyIcon
w="20px"
name="common/setting"
fill={isSettingPane ? 'primary.500' : 'myGray.400'}
/>
</Flex>
)}
</Flex>
);
};
export default ChatSliderFooter;
projects/app/src/pageComponents/chat/slider/ChatSliderHeader.tsx 0 → 100644
import { GridItem, Grid } from '@chakra-ui/react';
import React from 'react';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
import { ChatSidebarPaneEnum } from '@/pageComponents/chat/constants';
import { useContextSelector } from 'use-context-selector';
import { ChatContext } from '@/web/core/chat/context/chatContext';
import { useChatStore } from '@/web/core/chat/context/useChatStore';
import { useTranslation } from 'react-i18next';
import { Box, Flex, Image } from '@chakra-ui/react';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
import MyDivider from '@fastgpt/web/components/common/MyDivider';
import { DEFAULT_LOGO_BANNER_URL } from '@/pageComponents/chat/constants';
type Props = {
title?: string;
banner?: string;
};
const ChatSliderHeader = ({ title, banner }: Props) => {
const { t } = useTranslation();
const { isPc } = useSystem();
const { setChatId } = useChatStore();
const pane = useContextSelector(ChatSettingContext, (v) => v.pane);
const handlePaneChange = useContextSelector(ChatSettingContext, (v) => v.handlePaneChange);
const appName = useContextSelector(ChatItemContext, (v) => v.chatBoxData?.app.name);
const appAvatar = useContextSelector(ChatItemContext, (v) => v.chatBoxData?.app.avatar);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const isHomePane = pane === ChatSidebarPaneEnum.HOME;
const isTeamAppsPane = pane === ChatSidebarPaneEnum.TEAM_APPS;
return isPc ? (
<Flex pt={5} px={[2, 5]} alignItems={'center'} fontSize={'sm'} pb={title ? 0 : 2}>
{!title && <Avatar src={appAvatar} borderRadius={'md'} />}
<Box
flex={'1 0 0'}
w={0}
ml={2}
fontWeight={'bold'}
fontSize={title ? '16px' : 'inherit'}
color={title ? 'myGray.900' : 'inherit'}
className={'textEllipsis'}
>
{title || appName}
</Box>
</Flex>
) : (
<>
<Flex align={'center'} justify={'flex-start'} p={2}>
<Image src={banner || DEFAULT_LOGO_BANNER_URL} alt="banner" w="70%" />
</Flex>
<MyDivider h="0.5px" bg="myGray.100" my={2} mx={2} w="calc(100% - 16px)" />
<Grid templateRows="repeat(1, 1fr)" rowGap={2} py={2}>
<GridItem
onClick={() => {
handlePaneChange(ChatSidebarPaneEnum.HOME);
onCloseSlider();
setChatId();
}}
>
<Flex
p={2}
mx={2}
gap={2}
cursor={'pointer'}
borderRadius={'8px'}
alignItems={'center'}
bg={isHomePane ? 'primary.100' : 'transparent'}
color={isHomePane ? 'primary.600' : 'myGray.500'}
_hover={{
bg: 'primary.100',
color: 'primary.600'
}}
>
<MyIcon name="core/chat/sidebar/home" w="20px" h="20px" />
<Box fontSize="sm" fontWeight={500} flexShrink={0} whiteSpace="nowrap">
{t('chat:sidebar.home')}
</Box>
</Flex>
</GridItem>
<GridItem
onClick={() => {
handlePaneChange(ChatSidebarPaneEnum.TEAM_APPS);
onCloseSlider();
}}
>
<Flex
p={2}
mx={2}
gap={2}
cursor={'pointer'}
borderRadius={'8px'}
alignItems={'center'}
bg={isTeamAppsPane ? 'primary.100' : 'transparent'}
color={isTeamAppsPane ? 'primary.600' : 'myGray.500'}
_hover={{
bg: 'primary.100',
color: 'primary.600'
}}
>
<MyIcon name="common/app" w="20px" h="20px" />
<Box fontSize="sm" fontWeight={500} flexShrink={0} whiteSpace="nowrap">
{t('chat:sidebar.team_apps')}
</Box>
</Flex>
</GridItem>
</Grid>
<MyDivider h="0.5px" bg="myGray.100" my={2} mx={2} w="calc(100% - 16px)" />
</>
);
};
export default ChatSliderHeader;
projects/app/src/pageComponents/chat/slider/ChatSliderList.tsx 0 → 100644
import React from 'react';
import { useContextSelector } from 'use-context-selector';
import { ChatContext } from '@/web/core/chat/context/chatContext';
import { useChatStore } from '@/web/core/chat/context/useChatStore';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useEditTitle } from '@/web/common/hooks/useEditTitle';
import { Box, Flex, IconButton } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
const ChatSliderList = () => {
const { isPc } = useSystem();
const { t } = useTranslation();
const { chatId: activeChatId } = useChatStore();
const histories = useContextSelector(ChatContext, (v) => v.histories);
const ScrollData = useContextSelector(ChatContext, (v) => v.ScrollData);
const onDelHistory = useContextSelector(ChatContext, (v) => v.onDelHistory);
const onUpdateHistory = useContextSelector(ChatContext, (v) => v.onUpdateHistory);
const onChangeChatId = useContextSelector(ChatContext, (v) => v.onChangeChatId);
const setCiteModalData = useContextSelector(ChatItemContext, (v) => v.setCiteModalData);
const concatHistory = useMemo(() => {
const formatHistories: {
id: string;
title: string;
customTitle?: string;
top?: boolean;
updateTime: Date;
}[] = histories.map((item) => {
return {
id: item.chatId,
title: item.title,
customTitle: item.customTitle,
top: item.top,
updateTime: item.updateTime
};
});
const newChat: {
id: string;
title: string;
customTitle?: string;
top?: boolean;
updateTime: Date;
} = {
id: activeChatId,
title: t('common:core.chat.New Chat'),
updateTime: new Date()
};
const activeChat = histories.find((item) => item.chatId === activeChatId);
return !activeChat ? [newChat].concat(formatHistories) : formatHistories;
}, [activeChatId, histories, t]);
// custom title edit
const { onOpenModal, EditModal: EditTitleModal } = useEditTitle({
title: t('common:core.chat.Custom History Title'),
placeholder: t('common:core.chat.Custom History Title Description')
});
return (
<>
<ScrollData flex={'1 0 0'} h={0} px={[2, 5]} overflow={'overlay'}>
{concatHistory.map((item, i) => (
<Flex
position={'relative'}
key={item.id}
alignItems={'center'}
px={4}
h={'44px'}
cursor={'pointer'}
userSelect={'none'}
borderRadius={'md'}
fontSize={'sm'}
_hover={{
bg: 'myGray.50',
'& .more': {
display: 'block'
},
'& .time': {
display: isPc ? 'none' : 'block'
}
}}
bg={item.top ? '#E6F6F6 !important' : ''}
{...(item.id === activeChatId
? {
backgroundColor: 'primary.50 !important',
color: 'primary.600'
}
: {
onClick: () => {
onChangeChatId(item.id);
setCiteModalData(undefined);
}
})}
{...(i !== concatHistory.length - 1 && {
mb: '8px'
})}
>
<MyIcon
name={item.id === activeChatId ? 'core/chat/chatFill' : 'core/chat/chatLight'}
w={'16px'}
/>
<Box flex={'1 0 0'} ml={3} className="textEllipsis">
{item.customTitle || item.title}
</Box>
{!!item.id && (
<Flex gap={2} alignItems={'center'}>
<Box
className="time"
display={'block'}
fontWeight={'400'}
fontSize={'mini'}
color={'myGray.500'}
>
{t(formatTimeToChatTime(item.updateTime) as any).replace('#', ':')}
</Box>
<Box className="more" display={['block', 'none']}>
<MyMenu
Button={
<IconButton
size={'xs'}
variant={'whiteBase'}
icon={<MyIcon name={'more'} w={'14px'} p={1} />}
aria-label={''}
/>
}
menuList={[
{
children: [
{
label: item.top
? t('common:core.chat.Unpin')
: t('common:core.chat.Pin'),
icon: 'core/chat/setTopLight',
onClick: () => {
onUpdateHistory({
chatId: item.id,
top: !item.top
});
}
},
{
label: t('common:custom_title'),
icon: 'common/customTitleLight',
onClick: () => {
onOpenModal({
defaultVal: item.customTitle || item.title,
onSuccess: (e) =>
onUpdateHistory({
chatId: item.id,
customTitle: e
})
});
}
},
{
label: t('common:Delete'),
icon: 'delete',
onClick: () => {
onDelHistory(item.id);
if (item.id === activeChatId) {
onChangeChatId();
setCiteModalData(undefined);
}
},
type: 'danger'
}
]
}
]}
/>
</Box>
</Flex>
)}
</Flex>
))}
</ScrollData>
<EditTitleModal />
</>
);
};
export default ChatSliderList;
projects/app/src/pageComponents/chat/slider/ChatSliderMenu.tsx 0 → 100644
import { useContextSelector } from 'use-context-selector';
import { ChatContext } from '@/web/core/chat/context/chatContext';
import { useTranslation } from 'react-i18next';
import { Box, Button, Flex, IconButton } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
type Props = {
menuConfirmButtonText?: string;
};
const ChatSliderMenu = ({ menuConfirmButtonText }: Props) => {
const { t } = useTranslation();
const { isPc } = useSystem();
const histories = useContextSelector(ChatContext, (v) => v.histories);
const onClearHistory = useContextSelector(ChatContext, (v) => v.onClearHistories);
const onChangeChatId = useContextSelector(ChatContext, (v) => v.onChangeChatId);
const setCiteModalData = useContextSelector(ChatItemContext, (v) => v.setCiteModalData);
return (
<Flex
w={'100%'}
px={[2, 5]}
h={'36px'}
my={5}
justify={['space-between', '']}
alignItems={'center'}
>
{!isPc && (
<Flex height={'100%'} align={'center'} justify={'center'}>
<MyIcon ml={2} name="core/chat/sideLine" />
<Box ml={2} fontWeight={'bold'}>
{t('common:core.chat.History')}
</Box>
</Flex>
)}
<Button
variant={'whitePrimary'}
flex={['0 0 auto', 1]}
h={'100%'}
px={6}
color={'primary.600'}
borderRadius={'xl'}
leftIcon={<MyIcon name={'core/chat/chatLight'} w={'16px'} />}
overflow={'hidden'}
onClick={() => {
onChangeChatId();
setCiteModalData(undefined);
}}
>
{t('common:core.chat.New Chat')}
</Button>
{isPc && histories.length > 0 && (
<PopoverConfirm
Trigger={
<Box ml={3} h={'100%'}>
<IconButton
variant={'whiteDanger'}
size={'mdSquare'}
aria-label={''}
borderRadius={'50%'}
icon={<MyIcon name={'common/clearLight'} w={'16px'} />}
/>
</Box>
}
type="delete"
content={menuConfirmButtonText || t('common:Delete')}
onConfirm={() => onClearHistory()}
/>
)}
</Flex>
);
};
export default ChatSliderMenu;
projects/app/src/pageComponents/chat/slider/ChatSliderMobileDrawer.tsx 0 → 100644
import { Drawer, DrawerOverlay, DrawerContent, useTheme } from '@chakra-ui/react';
import React from 'react';
import MyBox from '@fastgpt/web/components/common/MyBox';
import ChatSliderHeader from '@/pageComponents/chat/slider/ChatSliderHeader';
import ChatSliderMenu from '@/pageComponents/chat/slider/ChatSliderMenu';
import ChatSliderList from '@/pageComponents/chat/slider/ChatSliderList';
import { useContextSelector } from 'use-context-selector';
import { ChatContext } from '@/web/core/chat/context/chatContext';
import ChatSliderFooter from '@/pageComponents/chat/slider/ChatSliderFooter';
type Props = {
title?: string;
banner?: string;
menuConfirmButtonText?: string;
showHeader?: boolean;
showFooter?: boolean;
};
const ChatSliderMobileDrawer = ({
title,
banner,
menuConfirmButtonText,
showHeader = false,
showFooter = false
}: Props) => {
const theme = useTheme();
const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
return (
<Drawer
size="xs"
placement="left"
autoFocus={false}
isOpen={isOpenSlider}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor="rgba(255,255,255,0.5)" />
<DrawerContent maxWidth="75vw">
<MyBox
display={'flex'}
flexDirection={'column'}
w={'100%'}
h={'100%'}
bg={'white'}
borderRight={['', theme.borders.base]}
whiteSpace={'nowrap'}
>
{showHeader && <ChatSliderHeader title={title} banner={banner} />}
<ChatSliderMenu menuConfirmButtonText={menuConfirmButtonText} />
<ChatSliderList />
{showFooter && <ChatSliderFooter />}
</MyBox>
</DrawerContent>
</Drawer>
);
};
export default ChatSliderMobileDrawer;
projects/app/src/pageComponents/chat/slider/ChatSliderSidebar.tsx 0 → 100644
import { useTheme } from '@chakra-ui/react';
import React from 'react';
import MyBox from '@fastgpt/web/components/common/MyBox';
import ChatSliderHeader from '@/pageComponents/chat/slider/ChatSliderHeader';
import ChatSliderMenu from '@/pageComponents/chat/slider/ChatSliderMenu';
import ChatSliderList from '@/pageComponents/chat/slider/ChatSliderList';
type Props = {
title?: string;
banner?: string;
menuConfirmButtonText?: string;
};
const ChatHistorySidebar = ({ title, banner, menuConfirmButtonText }: Props) => {
const theme = useTheme();
return (
<MyBox
display={'flex'}
flexDirection={'column'}
w={'100%'}
h={'100%'}
bg={'white'}
borderRight={['', theme.borders.base]}
whiteSpace={'nowrap'}
>
<ChatSliderHeader title={title} banner={banner} />
<ChatSliderMenu menuConfirmButtonText={menuConfirmButtonText} />
<ChatSliderList />
</MyBox>
);
};
export default ChatHistorySidebar;
projects/app/src/pages/chat/share.tsx
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Box, Flex, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { streamFetch } from '@/web/common/api/fetch'; import { streamFetch } from '@/web/common/api/fetch';
import SideBar from '@/components/SideBar'; import SideBar from '@/components/SideBar';
import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt'; import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt';
...@@ -10,7 +10,6 @@ import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type ...@@ -10,7 +10,6 @@ import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type
import PageContainer from '@/components/PageContainer'; import PageContainer from '@/components/PageContainer';
import ChatHeader from '@/pageComponents/chat/ChatHeader'; import ChatHeader from '@/pageComponents/chat/ChatHeader';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { serviceSideProps } from '@/web/common/i18n/utils'; import { serviceSideProps } from '@/web/common/i18n/utils';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { getInitOutLinkChatInfo } from '@/web/core/chat/api'; import { getInitOutLinkChatInfo } from '@/web/core/chat/api';
...@@ -41,6 +40,8 @@ import ChatQuoteList from '@/pageComponents/chat/ChatQuoteList'; ...@@ -41,6 +40,8 @@ import ChatQuoteList from '@/pageComponents/chat/ChatQuoteList';
import { useToast } from '@fastgpt/web/hooks/useToast'; import { useToast } from '@fastgpt/web/hooks/useToast';
import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants'; import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants';
import { ChatSidebarPaneEnum } from '@/pageComponents/chat/constants'; import { ChatSidebarPaneEnum } from '@/pageComponents/chat/constants';
import ChatHistorySidebar from '@/pageComponents/chat/slider/ChatSliderSidebar';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox')); const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));
...@@ -220,11 +221,7 @@ const OutLink = (props: Props) => { ...@@ -220,11 +221,7 @@ const OutLink = (props: Props) => {
const RenderHistoryList = useMemo(() => { const RenderHistoryList = useMemo(() => {
const Children = ( const Children = (
<ChatHistorySlider <ChatHistorySidebar menuConfirmButtonText={t('common:core.chat.Confirm to clear history')} />
chatSettings={undefined}
pane={ChatSidebarPaneEnum.RECENTLY_USED_APPS}
confirmClearText={t('common:core.chat.Confirm to clear share chat history')}
/>
); );
if (showHistory !== '1') return null; if (showHistory !== '1') return null;
...@@ -232,20 +229,11 @@ const OutLink = (props: Props) => { ...@@ -232,20 +229,11 @@ const OutLink = (props: Props) => {
return isPc ? ( return isPc ? (
<SideBar externalTrigger={!!datasetCiteData}>{Children}</SideBar> <SideBar externalTrigger={!!datasetCiteData}>{Children}</SideBar>
) : ( ) : (
<Drawer <ChatSliderMobileDrawer
isOpen={isOpenSlider} menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
placement="left" />
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'75vw'} boxShadow={'2px 0 10px rgba(0,0,0,0.15)'}>
{Children}
</DrawerContent>
</Drawer>
); );
}, [isOpenSlider, isPc, onCloseSlider, datasetCiteData, showHistory, t]); }, [isPc, datasetCiteData, showHistory, t]);
return ( return (
<> <>
......
projects/app/src/web/core/chat/context/chatSettingContext.tsx
...@@ -46,9 +46,9 @@ export const ChatSettingContextProvider = ({ children }: { children: React.React ...@@ -46,9 +46,9 @@ export const ChatSettingContextProvider = ({ children }: { children: React.React
const { feConfigs } = useSystemStore(); const { feConfigs } = useSystemStore();
const { appId, setLastPane, setLastChatAppId, lastPane } = useChatStore(); const { appId, setLastPane, setLastChatAppId, lastPane } = useChatStore();
const { pane = lastPane || ChatSidebarPaneEnum.HOME } = ( const { pane = lastPane || ChatSidebarPaneEnum.HOME } = router.query as {
pathname === '/chat/share' ? { pane: ChatSidebarPaneEnum.RECENTLY_USED_APPS } : router.query pane: ChatSidebarPaneEnum;
) as { pane: ChatSidebarPaneEnum }; };
const [collapse, setCollapse] = useState<CollapseStatusType>(defaultCollapseStatus); const [collapse, setCollapse] = useState<CollapseStatusType>(defaultCollapseStatus);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment