V4.8.20 feature (#3686)
* Aiproxy (#3649) * model config * feat: model config ui * perf: rename variable * feat: custom request url * perf: model buffer * perf: init model * feat: json model config * auto login * fix: ts * update packages * package * fix: dockerfile * feat: usage filter & export & dashbord (#3538) * feat: usage filter & export & dashbord * adjust ui * fix tmb scroll * fix code & selecte all * merge * perf: usages list；perf: move components (#3654) * perf: usages list * team sub plan load * perf: usage dashboard code * perf: dashboard ui * perf: move components * add default model config (#3653) * 4.8.20 test (#3656) * provider * perf: model config * model perf (#3657) * fix: model * dataset quote * perf: model config * model tag * doubao model config * perf: config model * feat: model test * fix: POST 500 error on dingtalk bot (#3655) * feat: default model (#3662) * move model config * feat: default model * fix: false triggerd org selection (#3661) * export usage csv i18n (#3660) * export usage csv i18n * fix build * feat: markdown extension (#3663) * feat: markdown extension * media cros * rerank test * default price * perf: default model * fix: cannot custom provider * fix: default model select * update bg * perf: default model selector * fix: usage export * i18n * fix: rerank * update init extension * perf: ip limit check * doubao model order * web default modle * perf: tts selector * perf: tts error * qrcode package * reload buffer (#3665) * reload buffer * reload buffer * tts selector * fix: err tip (#3666) * fix: err tip * perf: training queue * doc * fix interactive edge (#3659) * fix interactive edge * fix * comment * add gemini model * fix: chat model select * perf: supplement assistant empty response (#3669) * perf: supplement assistant empty response * check array * perf: max_token count;feat: support resoner output;fix: member scroll (#3681) * perf: supplement assistant empty response * check array * perf: max_token count * feat: support resoner output * member scroll * update provider order * i18n * fix: stream response (#3682) * perf: supplement assistant empty response * check array * fix: stream response * fix: model config cannot set to null * fix: reasoning response (#3684) * perf: supplement assistant empty response * check array * fix: reasoning response * fix: reasoning response * doc (#3685) * perf: supplement assistant empty response * check array * doc * lock * animation * update doc * update compose * doc * doc --------- Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>
This commit is contained in:
Archer
291
projects/app/src/pageComponents/chat/ChatHeader.tsx
Normal file
291
projects/app/src/pageComponents/chat/ChatHeader.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Flex, Box, useDisclosure } from '@chakra-ui/react';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import Avatar from '@fastgpt/web/components/common/Avatar';
|
||||
import ToolMenu from './ToolMenu';
|
||||
import type { ChatItemType } from '@fastgpt/global/core/chat/type';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
import MyTag from '@fastgpt/web/components/common/Tag/index';
|
||||
import { useContextSelector } from 'use-context-selector';
|
||||
import { ChatContext } from '@/web/core/chat/context/chatContext';
|
||||
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
|
||||
import { AppFolderTypeList, AppTypeEnum } from '@fastgpt/global/core/app/constants';
|
||||
import { useSystem } from '@fastgpt/web/hooks/useSystem';
|
||||
import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
|
||||
import { useRouter } from 'next/router';
|
||||
import { AppListItemType } from '@fastgpt/global/core/app/type';
|
||||
import {
|
||||
GetResourceFolderListProps,
|
||||
GetResourceListItemResponse
|
||||
} from '@fastgpt/global/common/parentFolder/type';
|
||||
import { getMyApps } from '@/web/core/app/api';
|
||||
import SelectOneResource from '@/components/common/folder/SelectOneResource';
|
||||
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
|
||||
|
||||
const ChatHeader = ({
|
||||
history,
|
||||
showHistory,
|
||||
apps,
|
||||
totalRecordsCount
|
||||
}: {
|
||||
history: ChatItemType[];
|
||||
showHistory?: boolean;
|
||||
apps?: AppListItemType[];
|
||||
totalRecordsCount: number;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { isPc } = useSystem();
|
||||
|
||||
const chatData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
|
||||
const isPlugin = chatData.app.type === AppTypeEnum.plugin;
|
||||
|
||||
return isPc && isPlugin ? null : (
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
px={[3, 5]}
|
||||
minH={['46px', '60px']}
|
||||
borderBottom={'sm'}
|
||||
color={'myGray.900'}
|
||||
fontSize={'sm'}
|
||||
>
|
||||
{isPc ? (
|
||||
<>
|
||||
<PcHeader
|
||||
totalRecordsCount={totalRecordsCount}
|
||||
title={chatData.title || t('common:core.chat.New Chat')}
|
||||
chatModels={chatData.app.chatModels}
|
||||
/>
|
||||
<Box flex={1} />
|
||||
</>
|
||||
) : (
|
||||
<MobileHeader
|
||||
apps={apps}
|
||||
appId={chatData.appId}
|
||||
name={chatData.app.name}
|
||||
avatar={chatData.app.avatar}
|
||||
showHistory={showHistory}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* control */}
|
||||
{!isPlugin && <ToolMenu history={history} />}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const MobileDrawer = ({
|
||||
onCloseDrawer,
|
||||
appId,
|
||||
apps
|
||||
}: {
|
||||
onCloseDrawer: () => void;
|
||||
appId: string;
|
||||
apps?: AppListItemType[];
|
||||
}) => {
|
||||
enum TabEnum {
|
||||
recently = 'recently',
|
||||
app = 'app'
|
||||
}
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const isTeamChat = router.pathname === '/chat/team';
|
||||
const [currentTab, setCurrentTab] = useState<TabEnum>(TabEnum.recently);
|
||||
|
||||
const getAppList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
|
||||
return getMyApps({ parentId }).then((res) =>
|
||||
res.map<GetResourceListItemResponse>((item) => ({
|
||||
id: item._id,
|
||||
name: item.name,
|
||||
avatar: item.avatar,
|
||||
isFolder: AppFolderTypeList.includes(item.type)
|
||||
}))
|
||||
);
|
||||
}, []);
|
||||
const { onChangeAppId } = useContextSelector(ChatContext, (v) => v);
|
||||
|
||||
const onclickApp = (id: string) => {
|
||||
onChangeAppId(id);
|
||||
onCloseDrawer();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
position={'absolute'}
|
||||
top={'45px'}
|
||||
w={'100vw'}
|
||||
h={'calc(100% - 45px)'}
|
||||
background={'rgba(0, 0, 0, 0.2)'}
|
||||
left={0}
|
||||
zIndex={5}
|
||||
onClick={() => {
|
||||
onCloseDrawer();
|
||||
}}
|
||||
>
|
||||
{/* menu */}
|
||||
<Box
|
||||
w={'100vw'}
|
||||
px={[2, 5]}
|
||||
padding={2}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
background={'white'}
|
||||
position={'relative'}
|
||||
>
|
||||
<LightRowTabs<TabEnum>
|
||||
gap={3}
|
||||
inlineStyles={{
|
||||
px: 2
|
||||
}}
|
||||
list={[
|
||||
...(isTeamChat
|
||||
? [{ label: t('app:all_apps'), value: TabEnum.recently }]
|
||||
: [
|
||||
{ label: t('common:core.chat.Recent use'), value: TabEnum.recently },
|
||||
{ label: t('app:all_apps'), value: TabEnum.app }
|
||||
])
|
||||
]}
|
||||
value={currentTab}
|
||||
onChange={setCurrentTab}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
width={'100%'}
|
||||
minH={'10vh'}
|
||||
background={'white'}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
borderRadius={'0 0 10px 10px'}
|
||||
position={'relative'}
|
||||
py={3}
|
||||
pt={0}
|
||||
pb={4}
|
||||
h={'65vh'}
|
||||
>
|
||||
{/* history */}
|
||||
{currentTab === TabEnum.recently && (
|
||||
<Box px={3} overflow={'auto'} h={'100%'}>
|
||||
{Array.isArray(apps) &&
|
||||
apps.map((item) => (
|
||||
<Flex justify={'center'} key={item._id}>
|
||||
<Flex
|
||||
py={2.5}
|
||||
px={2}
|
||||
width={'100%'}
|
||||
borderRadius={'md'}
|
||||
alignItems={'center'}
|
||||
{...(item._id === appId
|
||||
? {
|
||||
backgroundColor: 'primary.50 !important',
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {
|
||||
onClick: () => onclickApp(item._id)
|
||||
})}
|
||||
>
|
||||
<Avatar src={item.avatar} w={'24px'} borderRadius={'sm'} />
|
||||
<Box ml={2} className={'textEllipsis'}>
|
||||
{item.name}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
{currentTab === TabEnum.app && (
|
||||
<SelectOneResource
|
||||
value={appId}
|
||||
onSelect={(id) => {
|
||||
if (!id) return;
|
||||
onclickApp(id);
|
||||
}}
|
||||
server={getAppList}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const MobileHeader = ({
|
||||
showHistory,
|
||||
name,
|
||||
avatar,
|
||||
appId,
|
||||
apps
|
||||
}: {
|
||||
showHistory?: boolean;
|
||||
avatar: string;
|
||||
name: string;
|
||||
apps?: AppListItemType[];
|
||||
appId: string;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider);
|
||||
const { isOpen: isOpenDrawer, onToggle: toggleDrawer, onClose: onCloseDrawer } = useDisclosure();
|
||||
const isShareChat = router.pathname === '/chat/share';
|
||||
|
||||
return (
|
||||
<>
|
||||
{showHistory && (
|
||||
<MyIcon name={'menu'} w={'20px'} h={'20px'} color={'myGray.900'} onClick={onOpenSlider} />
|
||||
)}
|
||||
<Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
|
||||
<Flex alignItems={'center'} onClick={toggleDrawer}>
|
||||
<Avatar borderRadius={'sm'} src={avatar} w={'1rem'} />
|
||||
<Box ml={1} className="textEllipsis">
|
||||
{name}
|
||||
</Box>
|
||||
{isShareChat ? null : (
|
||||
<MyIcon
|
||||
name={'core/chat/chevronSelector'}
|
||||
w={'1.25rem'}
|
||||
color={isOpenDrawer ? 'primary.600' : 'myGray.900'}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
{isOpenDrawer && !isShareChat && (
|
||||
<MobileDrawer apps={apps} appId={appId} onCloseDrawer={onCloseDrawer} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const PcHeader = ({
|
||||
title,
|
||||
chatModels,
|
||||
totalRecordsCount
|
||||
}: {
|
||||
title: string;
|
||||
chatModels?: string[];
|
||||
totalRecordsCount: number;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box mr={3} maxW={'200px'} className="textEllipsis" color={'myGray.1000'}>
|
||||
{title}
|
||||
</Box>
|
||||
<MyTag>
|
||||
<MyIcon name={'history'} w={'14px'} />
|
||||
<Box ml={1}>
|
||||
{totalRecordsCount === 0
|
||||
? t('common:core.chat.New Chat')
|
||||
: t('common:core.chat.History Amount', { amount: totalRecordsCount })}
|
||||
</Box>
|
||||
</MyTag>
|
||||
{!!chatModels && chatModels.length > 0 && (
|
||||
<MyTooltip label={chatModels.join(',')}>
|
||||
<MyTag ml={2} colorSchema={'green'}>
|
||||
<MyIcon name={'core/chat/chatModelTag'} w={'14px'} />
|
||||
<Box ml={1} maxW={'200px'} className="textEllipsis">
|
||||
{chatModels.join(',')}
|
||||
</Box>
|
||||
</MyTag>
|
||||
</MyTooltip>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatHeader;
|
||||
317
projects/app/src/pageComponents/chat/ChatHistorySlider.tsx
Normal file
317
projects/app/src/pageComponents/chat/ChatHistorySlider.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Box, Button, Flex, useTheme, IconButton } from '@chakra-ui/react';
|
||||
import { useSystem } from '@fastgpt/web/hooks/useSystem';
|
||||
import { useEditTitle } from '@/web/common/hooks/useEditTitle';
|
||||
import { useRouter } from 'next/router';
|
||||
import Avatar from '@fastgpt/web/components/common/Avatar';
|
||||
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
|
||||
import { useUserStore } from '@/web/support/user/useUserStore';
|
||||
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';
|
||||
|
||||
type HistoryItemType = {
|
||||
id: string;
|
||||
title: string;
|
||||
customTitle?: string;
|
||||
top?: boolean;
|
||||
updateTime: Date;
|
||||
};
|
||||
|
||||
const ChatHistorySlider = ({ confirmClearText }: { confirmClearText: string }) => {
|
||||
const theme = useTheme();
|
||||
const router = useRouter();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { isPc } = useSystem();
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
const { appId, chatId: activeChatId } = useChatStore();
|
||||
const onChangeChatId = useContextSelector(ChatContext, (v) => v.onChangeChatId);
|
||||
const isLoading = useContextSelector(ChatContext, (v) => v.isLoading);
|
||||
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 appName = useContextSelector(ChatItemContext, (v) => v.chatBoxData?.app.name);
|
||||
const appAvatar = useContextSelector(ChatItemContext, (v) => v.chatBoxData?.app.avatar);
|
||||
const showRouteToAppDetail = useContextSelector(ChatItemContext, (v) => v.showRouteToAppDetail);
|
||||
|
||||
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')
|
||||
});
|
||||
const { openConfirm, ConfirmModal } = useConfirm({
|
||||
content: confirmClearText
|
||||
});
|
||||
|
||||
const canRouteToDetail = useMemo(
|
||||
() => appId && userInfo?.team.permission.hasWritePer && showRouteToAppDetail,
|
||||
[appId, userInfo?.team.permission.hasWritePer, showRouteToAppDetail]
|
||||
);
|
||||
|
||||
return (
|
||||
<MyBox
|
||||
isLoading={isLoading}
|
||||
display={'flex'}
|
||||
flexDirection={'column'}
|
||||
w={'100%'}
|
||||
h={'100%'}
|
||||
bg={'white'}
|
||||
borderRight={['', theme.borders.base]}
|
||||
whiteSpace={'nowrap'}
|
||||
>
|
||||
{isPc && (
|
||||
<MyTooltip label={canRouteToDetail ? t('app:app_detail') : ''} offset={[0, 0]}>
|
||||
<Flex
|
||||
pt={5}
|
||||
pb={2}
|
||||
px={[2, 5]}
|
||||
alignItems={'center'}
|
||||
cursor={canRouteToDetail ? 'pointer' : 'default'}
|
||||
fontSize={'sm'}
|
||||
onClick={() =>
|
||||
canRouteToDetail &&
|
||||
router.push({
|
||||
pathname: '/app/detail',
|
||||
query: { appId }
|
||||
})
|
||||
}
|
||||
>
|
||||
<Avatar src={appAvatar} borderRadius={'md'} />
|
||||
<Box flex={'1 0 0'} w={0} ml={2} fontWeight={'bold'} className={'textEllipsis'}>
|
||||
{appName}
|
||||
</Box>
|
||||
</Flex>
|
||||
</MyTooltip>
|
||||
)}
|
||||
|
||||
{/* 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()}
|
||||
>
|
||||
{t('common:core.chat.New Chat')}
|
||||
</Button>
|
||||
{/* Clear */}
|
||||
{isPc && histories.length > 0 && (
|
||||
<IconButton
|
||||
ml={3}
|
||||
h={'100%'}
|
||||
variant={'whiteDanger'}
|
||||
size={'mdSquare'}
|
||||
aria-label={''}
|
||||
borderRadius={'50%'}
|
||||
icon={<MyIcon name={'common/clearLight'} w={'16px'} />}
|
||||
onClick={() =>
|
||||
openConfirm(() => {
|
||||
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);
|
||||
}
|
||||
})}
|
||||
{...(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:common.Custom Title'),
|
||||
icon: 'common/customTitleLight',
|
||||
onClick: () => {
|
||||
onOpenModal({
|
||||
defaultVal: item.customTitle || item.title,
|
||||
onSuccess: (e) =>
|
||||
onUpdateHistory({
|
||||
chatId: item.id,
|
||||
customTitle: e
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('common:common.Delete'),
|
||||
icon: 'delete',
|
||||
onClick: () => {
|
||||
onDelHistory(item.id);
|
||||
if (item.id === activeChatId) {
|
||||
onChangeChatId();
|
||||
}
|
||||
},
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
))}
|
||||
</>
|
||||
</ScrollData>
|
||||
|
||||
{/* exec */}
|
||||
{!isPc && !!canRouteToDetail && (
|
||||
<Flex
|
||||
mt={2}
|
||||
borderTop={theme.borders.base}
|
||||
alignItems={'center'}
|
||||
cursor={'pointer'}
|
||||
p={3}
|
||||
onClick={() => router.push('/app/list')}
|
||||
>
|
||||
<IconButton
|
||||
mr={3}
|
||||
icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
|
||||
bg={'white'}
|
||||
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
|
||||
size={'smSquare'}
|
||||
borderRadius={'50%'}
|
||||
aria-label={''}
|
||||
/>
|
||||
{t('common:core.chat.Exit Chat')}
|
||||
</Flex>
|
||||
)}
|
||||
<EditTitleModal />
|
||||
<ConfirmModal />
|
||||
</MyBox>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatHistorySlider;
|
||||
75
projects/app/src/pageComponents/chat/CustomPluginRunBox.tsx
Normal file
75
projects/app/src/pageComponents/chat/CustomPluginRunBox.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { PluginRunBoxProps } from '@/components/core/chat/ChatContainer/PluginRunBox/type';
|
||||
import { useSystem } from '@fastgpt/web/hooks/useSystem';
|
||||
import React, { useEffect } from 'react';
|
||||
import PluginRunBox from '@/components/core/chat/ChatContainer/PluginRunBox';
|
||||
import { Box, Grid, Stack } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { PluginRunBoxTabEnum } from '@/components/core/chat/ChatContainer/PluginRunBox/constants';
|
||||
import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
|
||||
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
|
||||
import { useContextSelector } from 'use-context-selector';
|
||||
|
||||
const CustomPluginRunBox = (props: PluginRunBoxProps) => {
|
||||
const { isPc } = useSystem();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const tab = useContextSelector(ChatItemContext, (v) => v.pluginRunTab);
|
||||
const setTab = useContextSelector(ChatItemContext, (v) => v.setPluginRunTab);
|
||||
|
||||
useEffect(() => {
|
||||
if (isPc && tab === PluginRunBoxTabEnum.input) {
|
||||
setTab(PluginRunBoxTabEnum.output);
|
||||
}
|
||||
}, [isPc, setTab, tab]);
|
||||
|
||||
return isPc ? (
|
||||
<Grid gridTemplateColumns={'450px 1fr'} h={'100%'}>
|
||||
<Box px={3} py={4} borderRight={'base'} h={'100%'} overflowY={'auto'} w={'100%'}>
|
||||
<Box color={'myGray.900'} mb={5}>
|
||||
{t('common:common.Input')}
|
||||
</Box>
|
||||
<PluginRunBox {...props} showTab={PluginRunBoxTabEnum.input} />
|
||||
</Box>
|
||||
<Stack px={3} py={4} h={'100%'} alignItems={'flex-start'} w={'100%'} overflow={'auto'}>
|
||||
<Box display={'inline-block'}>
|
||||
<LightRowTabs<PluginRunBoxTabEnum>
|
||||
list={[
|
||||
{ label: t('common:common.Output'), value: PluginRunBoxTabEnum.output },
|
||||
{ label: t('common:common.all_result'), value: PluginRunBoxTabEnum.detail }
|
||||
]}
|
||||
value={tab}
|
||||
onChange={setTab}
|
||||
inlineStyles={{ px: 0.5, pt: 0 }}
|
||||
gap={5}
|
||||
py={0}
|
||||
fontSize={'sm'}
|
||||
/>
|
||||
</Box>
|
||||
<Box flex={'1 0 0'} overflow={'auto'} w={'100%'}>
|
||||
<PluginRunBox {...props} />
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid>
|
||||
) : (
|
||||
<Stack py={2} px={4} h={'100%'}>
|
||||
<LightRowTabs<PluginRunBoxTabEnum>
|
||||
list={[
|
||||
{ label: t('common:common.Input'), value: PluginRunBoxTabEnum.input },
|
||||
{ label: t('common:common.Output'), value: PluginRunBoxTabEnum.output },
|
||||
{ label: t('common:common.all_result'), value: PluginRunBoxTabEnum.detail }
|
||||
]}
|
||||
value={tab}
|
||||
onChange={setTab}
|
||||
inlineStyles={{ px: 0.5, pt: 0 }}
|
||||
gap={5}
|
||||
py={0}
|
||||
fontSize={'sm'}
|
||||
/>
|
||||
<Box flex={'1 0 0'} w={'100%'}>
|
||||
<PluginRunBox {...props} />
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(CustomPluginRunBox);
|
||||
60
projects/app/src/pageComponents/chat/Empty.tsx
Normal file
60
projects/app/src/pageComponents/chat/Empty.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { Card, Box, Flex } from '@chakra-ui/react';
|
||||
import { useMarkdown } from '@/web/common/hooks/useMarkdown';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
const Markdown = dynamic(() => import('@/components/Markdown'));
|
||||
const Avatar = dynamic(() => import('@fastgpt/web/components/common/Avatar'));
|
||||
|
||||
const Empty = ({
|
||||
showChatProblem,
|
||||
model: { name, intro, avatar }
|
||||
}: {
|
||||
showChatProblem: boolean;
|
||||
model: {
|
||||
name: string;
|
||||
intro: string;
|
||||
avatar: string;
|
||||
};
|
||||
}) => {
|
||||
const { data: chatProblem } = useMarkdown({ url: '/chatProblem.md' });
|
||||
const { data: versionIntro } = useMarkdown({ url: '/versionIntro.md' });
|
||||
|
||||
return (
|
||||
<Box
|
||||
minH={'100%'}
|
||||
w={'85%'}
|
||||
maxW={'600px'}
|
||||
m={'auto'}
|
||||
py={'5vh'}
|
||||
alignItems={'center'}
|
||||
justifyContent={'center'}
|
||||
>
|
||||
{name && (
|
||||
<Card p={4} mb={10}>
|
||||
<Flex mb={2} alignItems={'center'} justifyContent={'center'}>
|
||||
<Avatar src={avatar} w={'32px'} h={'32px'} />
|
||||
<Box ml={3} fontSize={'3xl'} fontWeight={'bold'}>
|
||||
{name}
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box whiteSpace={'pre-line'}>{intro}</Box>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{showChatProblem && (
|
||||
<>
|
||||
{/* version intro */}
|
||||
<Card p={4} mb={10}>
|
||||
<Markdown source={versionIntro} />
|
||||
</Card>
|
||||
<Card p={4}>
|
||||
<Markdown source={chatProblem} />
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Empty;
|
||||
172
projects/app/src/pageComponents/chat/SliderApps.tsx
Normal file
172
projects/app/src/pageComponents/chat/SliderApps.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Flex, Box, IconButton, HStack } from '@chakra-ui/react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import Avatar from '@fastgpt/web/components/common/Avatar';
|
||||
import { AppListItemType } from '@fastgpt/global/core/app/type';
|
||||
import MyDivider from '@fastgpt/web/components/common/MyDivider';
|
||||
import MyPopover from '@fastgpt/web/components/common/MyPopover/index';
|
||||
import { getMyApps } from '@/web/core/app/api';
|
||||
import {
|
||||
GetResourceFolderListProps,
|
||||
GetResourceListItemResponse
|
||||
} from '@fastgpt/global/common/parentFolder/type';
|
||||
import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
|
||||
import { useContextSelector } from 'use-context-selector';
|
||||
|
||||
const SelectOneResource = dynamic(() => import('@/components/common/folder/SelectOneResource'));
|
||||
|
||||
const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppId: string }) => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const isTeamChat = router.pathname === '/chat/team';
|
||||
|
||||
const showRouteToAppDetail = useContextSelector(ChatItemContext, (v) => v.showRouteToAppDetail);
|
||||
|
||||
const getAppList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
|
||||
return getMyApps({
|
||||
parentId,
|
||||
type: [AppTypeEnum.folder, AppTypeEnum.simple, AppTypeEnum.workflow, AppTypeEnum.plugin]
|
||||
}).then((res) =>
|
||||
res.map<GetResourceListItemResponse>((item) => ({
|
||||
id: item._id,
|
||||
name: item.name,
|
||||
avatar: item.avatar,
|
||||
isFolder: item.type === AppTypeEnum.folder
|
||||
}))
|
||||
);
|
||||
}, []);
|
||||
|
||||
const onChangeApp = useCallback(
|
||||
(appId: string) => {
|
||||
router.replace({
|
||||
query: {
|
||||
...router.query,
|
||||
appId
|
||||
}
|
||||
});
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex flexDirection={'column'} h={'100%'}>
|
||||
{showRouteToAppDetail && (
|
||||
<>
|
||||
<Box mt={4} px={4}>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
cursor={'pointer'}
|
||||
py={2}
|
||||
px={3}
|
||||
borderRadius={'md'}
|
||||
_hover={{ bg: 'myGray.200' }}
|
||||
onClick={() => router.push('/app/list')}
|
||||
>
|
||||
<IconButton
|
||||
mr={3}
|
||||
icon={<MyIcon name={'common/backFill'} w={'1rem'} color={'primary.500'} />}
|
||||
bg={'white'}
|
||||
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
|
||||
size={'smSquare'}
|
||||
borderRadius={'50%'}
|
||||
aria-label={''}
|
||||
/>
|
||||
{t('common:core.chat.Exit Chat')}
|
||||
</Flex>
|
||||
</Box>
|
||||
<MyDivider h={2} my={1} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isTeamChat && (
|
||||
<>
|
||||
<HStack
|
||||
px={4}
|
||||
my={2}
|
||||
color={'myGray.500'}
|
||||
fontSize={'sm'}
|
||||
justifyContent={'space-between'}
|
||||
>
|
||||
<Box>{t('common:core.chat.Recent use')}</Box>
|
||||
<MyPopover
|
||||
placement="bottom-end"
|
||||
offset={[20, 10]}
|
||||
p={4}
|
||||
trigger="hover"
|
||||
Trigger={
|
||||
<HStack
|
||||
spacing={0.5}
|
||||
cursor={'pointer'}
|
||||
px={2}
|
||||
py={'0.5'}
|
||||
borderRadius={'md'}
|
||||
mr={-2}
|
||||
userSelect={'none'}
|
||||
_hover={{
|
||||
bg: 'myGray.200'
|
||||
}}
|
||||
>
|
||||
<Box>{t('common:common.More')}</Box>
|
||||
<MyIcon name={'common/select'} w={'1rem'} />
|
||||
</HStack>
|
||||
}
|
||||
>
|
||||
{({ onClose }) => (
|
||||
<Box minH={'200px'}>
|
||||
<SelectOneResource
|
||||
maxH={'60vh'}
|
||||
value={activeAppId}
|
||||
onSelect={(id) => {
|
||||
if (!id) return;
|
||||
onChangeApp(id);
|
||||
onClose();
|
||||
}}
|
||||
server={getAppList}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</MyPopover>
|
||||
</HStack>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Box flex={'1 0 0'} px={4} h={0} overflow={'overlay'}>
|
||||
{apps.map((item) => (
|
||||
<Flex
|
||||
key={item._id}
|
||||
py={2}
|
||||
px={3}
|
||||
mb={3}
|
||||
cursor={'pointer'}
|
||||
borderRadius={'md'}
|
||||
alignItems={'center'}
|
||||
fontSize={'sm'}
|
||||
{...(item._id === activeAppId
|
||||
? {
|
||||
bg: 'white',
|
||||
boxShadow: 'md',
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {
|
||||
_hover: {
|
||||
bg: 'myGray.200'
|
||||
},
|
||||
onClick: () => onChangeApp(item._id)
|
||||
})}
|
||||
>
|
||||
<Avatar src={item.avatar} w={'1.5rem'} borderRadius={'md'} />
|
||||
<Box ml={2} className={'textEllipsis'}>
|
||||
{item.name}
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SliderApps);
|
||||
81
projects/app/src/pageComponents/chat/ToolMenu.tsx
Normal file
81
projects/app/src/pageComponents/chat/ToolMenu.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import { useChatBox } from '@/components/core/chat/ChatContainer/ChatBox/hooks/useChatBox';
|
||||
import type { ChatItemType } from '@fastgpt/global/core/chat/type.d';
|
||||
import { Box, IconButton } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import MyMenu from '@fastgpt/web/components/common/MyMenu';
|
||||
import { useContextSelector } from 'use-context-selector';
|
||||
import { ChatContext } from '@/web/core/chat/context/chatContext';
|
||||
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const { onExportChat } = useChatBox();
|
||||
|
||||
const onChangeChatId = useContextSelector(ChatContext, (v) => v.onChangeChatId);
|
||||
const chatData = useContextSelector(ChatItemContext, (v) => v.chatBoxData);
|
||||
const showRouteToAppDetail = useContextSelector(ChatItemContext, (v) => v.showRouteToAppDetail);
|
||||
|
||||
return (
|
||||
<MyMenu
|
||||
Button={
|
||||
<IconButton
|
||||
icon={<MyIcon name={'more'} w={'14px'} p={2} />}
|
||||
aria-label={''}
|
||||
size={'sm'}
|
||||
variant={'whitePrimary'}
|
||||
/>
|
||||
}
|
||||
menuList={[
|
||||
{
|
||||
children: [
|
||||
{
|
||||
icon: 'core/chat/chatLight',
|
||||
label: t('common:core.chat.New Chat'),
|
||||
onClick: () => {
|
||||
onChangeChatId();
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
children: [
|
||||
// {
|
||||
// icon: 'core/app/appApiLight',
|
||||
// label: `HTML ${t('common:Export')}`,
|
||||
// onClick: () => onExportChat({ type: 'html', history })
|
||||
// },
|
||||
{
|
||||
icon: 'file/markdown',
|
||||
label: `Markdown ${t('common:Export')}`,
|
||||
onClick: () => onExportChat({ type: 'md', history })
|
||||
}
|
||||
// {
|
||||
// icon: 'core/chat/export/pdf',
|
||||
// label: `PDF ${t('common:Export')}`,
|
||||
// onClick: () => onExportChat({ type: 'pdf', history })
|
||||
// }
|
||||
]
|
||||
},
|
||||
...(showRouteToAppDetail
|
||||
? [
|
||||
{
|
||||
children: [
|
||||
{
|
||||
icon: 'core/app/aiLight',
|
||||
label: t('app:app_detail'),
|
||||
onClick: () => router.push(`/app/detail?appId=${chatData.appId}`)
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
: [])
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToolMenu;
|
||||
Reference in New Issue
Block a user