ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-10-14 15:11:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* refactor: chat slider components structure
This commit is contained in:
伍闲犬
2025-08-20 20:22:21 +08:00
committed by GitHub
parent 6da65ea53d
commit ff9c6c9b81
18 changed files with 673 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
projects/app/src/components/Select/AIModelSelector.tsx
View File

@@ -60,7 +60,7 @@ const OneRowSelector = ({ list, onChange, disableTip, ...props }: Props) => {
fallbackSrc={HUGGING_FACE_ICON}
/>
<Box>{modelData.name}</Box>
<Box noOfLines={1}>{modelData.name}</Box>
</Flex>
)
};

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

@@ -256,7 +256,7 @@ const ChatInput = ({
gap={[0, 1]}
>
{/* 左侧自定义按钮组 */}
<Flex alignItems={'center'} gap={2} flex={'1 0 0'} w={0}>
<Flex alignItems={'center'} gap={2}>
{InputLeftComponent}
</Flex>

5
projects/app/src/pageComponents/chat/ChatHeader.tsx
View File

@@ -38,11 +38,13 @@ const ChatHeader = ({
showHistory,
apps,
totalRecordsCount,
pane,
chatSettings
}: {
pane: ChatSidebarPaneEnum;
chatSettings: ChatSettingSchema | undefined;
history: ChatItemType[];
showHistory?: boolean;
apps?: AppListItemType[];
@@ -51,13 +53,14 @@ const ChatHeader = ({
const { t } = useTranslation();
const { isPc } = useSystem();
const pathname = usePathname();
const { source } = useChatStore();
const chatData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
const isVariableVisible = useContextSelector(ChatItemContext, (v) => v.isVariableVisible);
const isPlugin = chatData.app.type === AppTypeEnum.plugin;
const isChat = pathname === '/chat';
const isShare = pathname === '/chat/share';
const isShare = source === 'share';
return isPc && isPlugin ? null : (
<Flex

426
projects/app/src/pageComponents/chat/ChatHistorySlider.tsx
View File

@@ -1,426 +0,0 @@
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';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useTranslation } from 'next-i18next';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
import { useContextSelector } from 'use-context-selector';
import { ChatContext } from '@/web/core/chat/context/chatContext';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
import { useChatStore } from '@/web/core/chat/context/useChatStore';
import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
import { ChatSidebarPaneEnum, DEFAULT_LOGO_BANNER_URL } from '@/pageComponents/chat/constants';
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;
title: string;
customTitle?: string;
top?: boolean;
updateTime: Date;
};
const ChatHistorySlider = ({
confirmClearText,
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();
const { userInfo } = useUserStore();
const { chatId: activeChatId, setChatId } = useChatStore();
const onChangeChatId = useContextSelector(ChatContext, (v) => v.onChangeChatId);
const ScrollData = useContextSelector(ChatContext, (v) => v.ScrollData);
const histories = useContextSelector(ChatContext, (v) => v.histories);
const onDelHistory = useContextSelector(ChatContext, (v) => v.onDelHistory);
const onClearHistory = useContextSelector(ChatContext, (v) => v.onClearHistories);
const onUpdateHistory = useContextSelector(ChatContext, (v) => v.onUpdateHistory);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const appName = useContextSelector(ChatItemContext, (v) => v.chatBoxData?.app.name);
const appAvatar = useContextSelector(ChatItemContext, (v) => v.chatBoxData?.app.avatar);
const setCiteModalData = useContextSelector(ChatItemContext, (v) => v.setCiteModalData);
const isActivePane = useCallback((active: ChatSidebarPaneEnum) => active === pane, [pane]);
const isShare = pathname === '/chat/share';
const concatHistory = useMemo(() => {
const formatHistories: HistoryItemType[] = histories.map((item) => {
return {
id: item.chatId,
title: item.title,
customTitle: item.customTitle,
top: item.top,
updateTime: item.updateTime
};
});
const newChat: HistoryItemType = {
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 (
<MyBox
display={'flex'}
flexDirection={'column'}
w={'100%'}
h={'100%'}
bg={'white'}
borderRight={['', theme.borders.base]}
whiteSpace={'nowrap'}
>
{isPc && (
<Flex
pt={5}
px={[2, 5]}
alignItems={'center'}
fontSize={'sm'}
pb={customSliderTitle ? 0 : 2}
>
{!customSliderTitle && <Avatar src={appAvatar} borderRadius={'md'} />}
<Box
flex={'1 0 0'}
w={0}
ml={2}
fontWeight={'bold'}
fontSize={customSliderTitle ? '16px' : 'inherit'}
color={customSliderTitle ? 'myGray.900' : 'inherit'}
className={'textEllipsis'}
>
{customSliderTitle || appName}
</Box>
</Flex>
)}
{!isPc && (
<>
<Flex align={'center'} justify={'flex-start'} p={2}>
<Image
src={chatSettings?.wideLogoUrl || DEFAULT_LOGO_BANNER_URL}
alt="banner"
w="70%"
/>
</Flex>
<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={() => {
onPaneChange?.(ChatSidebarPaneEnum.HOME);
onCloseSlider();
setChatId();
}}
>
<Flex
p={2}
mx={2}
gap={2}
cursor={'pointer'}
borderRadius={'8px'}
alignItems={'center'}
bg={isActivePane(ChatSidebarPaneEnum.HOME) ? 'primary.100' : 'transparent'}
color={isActivePane(ChatSidebarPaneEnum.HOME) ? '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={() => {
onPaneChange?.(ChatSidebarPaneEnum.TEAM_APPS);
onCloseSlider();
}}
>
<Flex
p={2}
mx={2}
gap={2}
cursor={'pointer'}
borderRadius={'8px'}
alignItems={'center'}
bg={isActivePane(ChatSidebarPaneEnum.TEAM_APPS) ? 'primary.100' : 'transparent'}
color={
isActivePane(ChatSidebarPaneEnum.TEAM_APPS) ? '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)" />
</>
)}
</>
)}
{/* menu */}
<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>
{/* Clear */}
{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={confirmClearText}
onConfirm={() => onClearHistory()}
/>
)}
</Flex>
<ScrollData flex={'1 0 0'} h={0} px={[2, 5]} overflow={'overlay'}>
{/* chat history */}
<>
{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>
{!isPc && (
<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>
{!isShare && (
<Flex
_hover={{ bg: 'myGray.200' }}
bg={isActivePane(ChatSidebarPaneEnum.SETTING) ? 'myGray.200' : 'transparent'}
borderRadius={'8px'}
p={2}
cursor={'pointer'}
w="40px"
h="40px"
alignItems="center"
justifyContent="center"
onClick={() => {
onPaneChange?.(ChatSidebarPaneEnum.SETTING);
onCloseSlider();
}}
>
<MyIcon
w="20px"
name="common/setting"
fill={isActivePane(ChatSidebarPaneEnum.SETTING) ? 'primary.500' : 'myGray.400'}
/>
</Flex>
)}
</Flex>
)}
<EditTitleModal />
</MyBox>
);
};
export default ChatHistorySlider;

65
projects/app/src/pageComponents/chat/ChatSetting/index.tsx
View File

@@ -1,17 +1,17 @@
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 dynamic from 'next/dynamic';
import SettingTabs from '@/pageComponents/chat/ChatSetting/SettingTabs';
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 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 NextHead from '@/components/common/NextHead';
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 LogDetails = dynamic(() => import('@/pageComponents/chat/ChatSetting/LogDetails'));
@@ -24,21 +24,15 @@ const ChatSetting = () => {
const [isOpenDiagram, setIsOpenDiagram] = useState(false);
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 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 }) => (
<>
<SettingTabs tab={tab} onChange={setTab}>
{children}
</SettingTabs>
</>
({ children }: PropsWithChildren) => (
<SettingTabs tab={tab} onChange={setTab}>
{children}
</SettingTabs>
),
[tab, setTab]
);
@@ -48,33 +42,24 @@ const ChatSetting = () => {
<NextHead title={chatSettings?.homeTabTitle || 'FastGPT'} icon="/icon/logo.svg" />
{!isPc && (
<Flex h="46px" w="100vw" position="absolute" borderBottom="sm" color="myGray.900">
<MyIcon
ml={3}
w="20px"
color="myGray.900"
name="core/chat/sidebar/menu"
onClick={onOpenSlider}
/>
<>
<Flex h="46px" w="100vw" position="absolute" borderBottom="sm" color="myGray.900">
<MyIcon
ml={3}
w="20px"
color="myGray.900"
name="core/chat/sidebar/menu"
onClick={onOpenSlider}
/>
</Flex>
<Drawer
size="xs"
placement="left"
autoFocus={false}
isOpen={isOpenSlider}
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>
<ChatSliderMobileDrawer
showHeader
showFooter
banner={chatSettings?.wideLogoUrl}
menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
/>
</>
)}
{/* homepage setting */}

35
projects/app/src/pageComponents/chat/ChatTeamApp/index.tsx
View File

@@ -1,7 +1,5 @@
'use client';
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 { useContextSelector } from 'use-context-selector';
import AppListContextProvider, { AppListContext } from '@/pageComponents/dashboard/apps/context';
@@ -13,27 +11,23 @@ import { useSystem } from '@fastgpt/web/hooks/useSystem';
import List from '@/pageComponents/chat/ChatTeamApp/List';
import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
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 NextHead from '@/components/common/NextHead';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
const MyApps = () => {
const { t } = useTranslation();
const router = useRouter();
const { isPc } = useSystem();
const { paths, myApps, isFetchingApps, setSearchKey } = useContextSelector(
AppListContext,
(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);
const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider);
const map = useMemo(
@@ -69,23 +63,12 @@ const MyApps = () => {
onClick={onOpenSlider}
/>
<Drawer
size="xs"
placement="left"
autoFocus={false}
isOpen={isOpenSlider}
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>
<ChatSliderMobileDrawer
showHeader
showFooter
banner={chatSettings?.wideLogoUrl}
menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
/>
</Flex>
)}

43
projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx
View File

@@ -1,7 +1,6 @@
import ChatHeader from '@/pageComponents/chat/ChatHeader';
import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
import { Flex, Box, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { Flex, Box } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import SideBar from '@/components/SideBar';
@@ -20,26 +19,26 @@ import { ChatRecordContext } from '@/web/core/chat/context/chatRecordContext';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { getInitChatInfo } from '@/web/core/chat/api';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useRouter } from 'next/router';
import NextHead from '@/components/common/NextHead';
import { ChatSettingContext } from '@/web/core/chat/context/chatSettingContext';
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 = {
myApps: AppListItemType[];
};
const AppChatWindow = ({ myApps }: Props) => {
const router = useRouter();
const { userInfo } = useUserStore();
const { chatId, appId, outLinkAuthData } = useChatStore();
const { feConfigs } = useSystemStore();
const { t } = useTranslation();
const { isPc } = useSystem();
const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const onUpdateHistoryTitle = useContextSelector(ChatContext, (v) => v.onUpdateHistoryTitle);
const chatBoxData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
@@ -123,33 +122,19 @@ const AppChatWindow = ({ myApps }: Props) => {
<NextHead title={chatBoxData.app.name} icon={chatBoxData.app.avatar} />
{/* show history slider */}
{isPc || !appId ? (
{isPc ? (
<SideBar externalTrigger={Boolean(datasetCiteData)}>
<ChatHistorySlider
confirmClearText={t('common:core.chat.Confirm to clear history')}
pane={pane}
chatSettings={chatSettings}
onPaneChange={handlePaneChange}
<ChatHistorySidebar
menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
/>
</SideBar>
) : (
<Drawer
size="xs"
placement="left"
autoFocus={false}
isOpen={isOpenSlider}
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>
<ChatSliderMobileDrawer
showHeader
showFooter
banner={chatSettings?.wideLogoUrl}
menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
/>
)}
{/* chat container */}

116
projects/app/src/pageComponents/chat/ChatWindow/HomeChatWindow.tsx
View File

@@ -2,9 +2,6 @@ import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
import {
Flex,
Box,
Drawer,
DrawerOverlay,
DrawerContent,
Button,
Menu,
MenuButton,
@@ -12,7 +9,6 @@ import {
MenuItem,
Checkbox
} from '@chakra-ui/react';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { useTranslation } from 'react-i18next';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import SideBar from '@/components/SideBar';
@@ -48,10 +44,9 @@ import type {
} from '@fastgpt/global/core/app/type';
import ChatHeader from '@/pageComponents/chat/ChatHeader';
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 ChatHistorySidebar from '@/pageComponents/chat/slider/ChatSliderSidebar';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
type Props = {
myApps: AppListItemType[];
@@ -77,9 +72,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
const { llmModelList, defaultModels, feConfigs } = useSystemStore();
const { chatId, appId, outLinkAuthData } = useChatStore();
const isOpenSlider = useContextSelector(ChatContext, (v) => v.isOpenSlider);
const forbidLoadChat = useContextSelector(ChatContext, (v) => v.forbidLoadChat);
const onCloseSlider = useContextSelector(ChatContext, (v) => v.onCloseSlider);
const onUpdateHistoryTitle = useContextSelector(ChatContext, (v) => v.onUpdateHistoryTitle);
const chatBoxData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
@@ -101,14 +94,6 @@ 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 || [],
@@ -129,6 +114,8 @@ const HomeChatWindow = ({ myApps }: Props) => {
setSelectedToolIds(
selectedToolIds.filter((id) => availableTools.some((tool) => tool.pluginId === id))
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [availableTools, chatSettings?.selectedTools]);
// 初始化聊天数据
@@ -254,38 +241,33 @@ const HomeChatWindow = ({ myApps }: Props) => {
<>
{/* 模型选择 */}
{availableModels.length > 0 && (
<AIModelSelector
h={['30px', '36px']}
boxShadow={'none'}
size="sm"
bg={'myGray.50'}
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,
app: {
...state.app,
chatConfig: {
...state.app.chatConfig,
fileSelectConfig: {
...defaultFileSelectConfig,
canSelectImg: !!getWebLLMModel(model).vision
<Box w="auto">
<AIModelSelector
h={['30px', '36px']}
boxShadow={'none'}
size="sm"
bg={'myGray.50'}
rounded="full"
list={availableModels}
value={selectedModel}
onChange={async (model) => {
setChatBoxData((state) => ({
...state,
app: {
...state.app,
chatConfig: {
...state.app.chatConfig,
fileSelectConfig: {
...defaultFileSelectConfig,
canSelectImg: !!getWebLLMModel(model).vision
}
}
}
}
}));
setSelectedModel(model);
}}
/>
}));
setSelectedModel(model);
}}
/>
</Box>
)}
{/* 工具选择下拉框 */}
@@ -299,6 +281,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
rounded="full"
variant="whiteBase"
leftIcon={<MyIcon name="core/app/toolCall" w="14px" />}
flexShrink={0}
_active={{
transform: 'none'
}}
@@ -361,9 +344,7 @@ const HomeChatWindow = ({ myApps }: Props) => {
selectedToolIds,
setSelectedToolIds,
setChatBoxData,
isPc,
selectedModelAvatar,
selectedModelButtonLabel
isPc
]
);
@@ -373,35 +354,20 @@ const HomeChatWindow = ({ myApps }: Props) => {
<NextHead title={chatSettings?.homeTabTitle || 'FastGPT'} icon="/icon/logo.svg" />
{/* show history slider */}
{isPc || !appId ? (
{isPc ? (
<SideBar externalTrigger={Boolean(datasetCiteData)}>
<ChatHistorySlider
customSliderTitle={t('chat:history_slider.home.title')}
confirmClearText={t('common:core.chat.Confirm to clear history')}
pane={pane}
chatSettings={chatSettings}
onPaneChange={handlePaneChange}
<ChatHistorySidebar
title={t('chat:history_slider.home.title')}
menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
/>
</SideBar>
) : (
<Drawer
size="xs"
placement="left"
autoFocus={false}
isOpen={isOpenSlider}
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>
<ChatSliderMobileDrawer
showHeader
showFooter
banner={chatSettings?.wideLogoUrl}
menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
/>
)}
{/* chat container */}

4
projects/app/src/pageComponents/chat/SliderApps.tsx
View File

@@ -397,6 +397,7 @@ const BottomSection = () => {
display="flex"
alignItems="center"
justifyContent={'flex-start'}
maxW={isCollapsed ? 'fit-content' : 'calc(100% - 52px)'}
>
{isLoggedIn ? (
<UserAvatarPopover
@@ -418,9 +419,6 @@ const BottomSection = () => {
flexGrow={1}
fontSize={'sm'}
fontWeight={500}
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
minW={0}
>
{username}

12
projects/app/src/pageComponents/chat/UserAvatarPopover.tsx
View File

@@ -33,7 +33,11 @@ const UserAvatarPopover = ({
return (
<>
<MyPopover
Trigger={<Box cursor="pointer">{children}</Box>}
Trigger={
<Box cursor="pointer" w="full">
{children}
</Box>
}
trigger="hover"
placement={placement}
w="160px"
@@ -59,7 +63,9 @@ const UserAvatarPopover = ({
gap={2}
>
<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>
)}
@@ -75,7 +81,7 @@ const UserAvatarPopover = ({
w="100%"
>
<MyIcon name="core/chat/sidebar/logout" />
<Text fontSize="14px"> {t('common:logout')}</Text>
<Text fontSize="14px">{t('common:logout')}</Text>
</Flex>
</Flex>
);

61
projects/app/src/pageComponents/chat/slider/ChatSliderFooter.tsx Normal file
View File

@@ -0,0 +1,61 @@
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;

124
projects/app/src/pageComponents/chat/slider/ChatSliderHeader.tsx Normal file
View File

@@ -0,0 +1,124 @@
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;

193
projects/app/src/pageComponents/chat/slider/ChatSliderList.tsx Normal file
View File

@@ -0,0 +1,193 @@
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;

81
projects/app/src/pageComponents/chat/slider/ChatSliderMenu.tsx Normal file
View File

@@ -0,0 +1,81 @@
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;

64
projects/app/src/pageComponents/chat/slider/ChatSliderMobileDrawer.tsx Normal file
View File

@@ -0,0 +1,64 @@
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;

34
projects/app/src/pageComponents/chat/slider/ChatSliderSidebar.tsx Normal file
View File

@@ -0,0 +1,34 @@
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;

28
projects/app/src/pages/chat/share.tsx
View File

@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
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 SideBar from '@/components/SideBar';
import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt';
@@ -10,7 +10,6 @@ import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type
import PageContainer from '@/components/PageContainer';
import ChatHeader from '@/pageComponents/chat/ChatHeader';
import ChatHistorySlider from '@/pageComponents/chat/ChatHistorySlider';
import { serviceSideProps } from '@/web/common/i18n/utils';
import { useTranslation } from 'next-i18next';
import { getInitOutLinkChatInfo } from '@/web/core/chat/api';
@@ -41,6 +40,8 @@ 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';
import ChatHistorySidebar from '@/pageComponents/chat/slider/ChatSliderSidebar';
import ChatSliderMobileDrawer from '@/pageComponents/chat/slider/ChatSliderMobileDrawer';
const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));
@@ -220,11 +221,7 @@ 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')}
/>
<ChatHistorySidebar menuConfirmButtonText={t('common:core.chat.Confirm to clear history')} />
);
if (showHistory !== '1') return null;
@@ -232,20 +229,11 @@ const OutLink = (props: Props) => {
return isPc ? (
<SideBar externalTrigger={!!datasetCiteData}>{Children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
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>
<ChatSliderMobileDrawer
menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
/>
);
}, [isOpenSlider, isPc, onCloseSlider, datasetCiteData, showHistory, t]);
}, [isPc, datasetCiteData, showHistory, t]);
return (
<>

6
projects/app/src/web/core/chat/context/chatSettingContext.tsx
View File

@@ -46,9 +46,9 @@ export const ChatSettingContextProvider = ({ children }: { children: React.React
const { feConfigs } = useSystemStore();
const { appId, setLastPane, setLastChatAppId, lastPane } = useChatStore();
const { pane = lastPane || ChatSidebarPaneEnum.HOME } = (
pathname === '/chat/share' ? { pane: ChatSidebarPaneEnum.RECENTLY_USED_APPS } : router.query
) as { pane: ChatSidebarPaneEnum };
const { pane = lastPane || ChatSidebarPaneEnum.HOME } = router.query as {
pane: ChatSidebarPaneEnum;
};
const [collapse, setCollapse] = useState<CollapseStatusType>(defaultCollapseStatus);