gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

monorepo packages (#344)

Browse Source
This commit is contained in:
Archer
2023-09-24 18:02:09 +08:00
committed by GitHub
parent a4ff5a3f73
commit 3d7178d06f
535 changed files with 12048 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
projects/app/src/pages/chat/components/ChatHeader.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React, { useMemo } from 'react';
import { Flex, useTheme, Box } from '@chakra-ui/react';
import { useGlobalStore } from '@/store/global';
import MyIcon from '@/components/Icon';
import Tag from '@/components/Tag';
import Avatar from '@/components/Avatar';
import ToolMenu from './ToolMenu';
import { ChatItemType } from '@/types/chat';
import { useRouter } from 'next/router';
const ChatHeader = ({
history,
appName,
appAvatar,
chatModels,
appId,
onOpenSlider
}: {
history: ChatItemType[];
appName: string;
appAvatar: string;
chatModels?: string[];
appId?: string;
onOpenSlider: () => void;
}) => {
const router = useRouter();
const theme = useTheme();
const { isPc } = useGlobalStore();
const title = useMemo(
() => history[history.length - 2]?.value?.slice(0, 8) || appName || '新对话',
[appName, history]
);
return (
<Flex
alignItems={'center'}
px={[3, 5]}
h={['46px', '60px']}
borderBottom={theme.borders.base}
borderBottomColor={'gray.200'}
color={'myGray.900'}
>
{isPc ? (
<>
<Box mr={3} color={'myGray.1000'}>
{title}
</Box>
<Tag>
<MyIcon name={'history'} w={'14px'} />
<Box ml={1}>{history.length === 0 ? '新的对话' : `${history.length}条记录`}</Box>
</Tag>
{!!chatModels && chatModels.length > 0 && (
<Tag ml={2} colorSchema={'green'}>
<MyIcon name={'chatModelTag'} w={'14px'} />
<Box ml={1}>{chatModels.join(',')}</Box>
</Tag>
)}
<Box flex={1} />
</>
) : (
<>
<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'}>
<Avatar src={appAvatar} w={'16px'} />
<Box
ml={1}
className="textEllipsis"
onClick={() => {
appId && router.push(`/app/detail?appId=${appId}`);
}}
>
{appName}
</Box>
</Flex>
</>
)}
{/* control */}
<ToolMenu history={history} />
</Flex>
);
};
export default ChatHeader;

337
projects/app/src/pages/chat/components/ChatHistorySlider.tsx Normal file
View File

@@ -0,0 +1,337 @@
import React, { useMemo, useState } from 'react';
import {
Box,
Button,
Flex,
useTheme,
Menu,
MenuButton,
MenuList,
MenuItem,
IconButton
} from '@chakra-ui/react';
import { useGlobalStore } from '@/store/global';
import { useEditTitle } from '@/hooks/useEditTitle';
import { useRouter } from 'next/router';
import Avatar from '@/components/Avatar';
import MyTooltip from '@/components/MyTooltip';
import MyIcon from '@/components/Icon';
import { useTranslation } from 'react-i18next';
import { useConfirm } from '@/hooks/useConfirm';
import Tabs from '@/components/Tabs';
import { useUserStore } from '@/store/user';
import { useQuery } from '@tanstack/react-query';
type HistoryItemType = {
id: string;
title: string;
customTitle?: string;
top?: boolean;
};
enum TabEnum {
'app' = 'app',
'history' = 'history'
}
const ChatHistorySlider = ({
appId,
appName,
appAvatar,
history,
activeChatId,
onChangeChat,
onDelHistory,
onClearHistory,
onSetHistoryTop,
onSetCustomTitle,
onClose
}: {
appId?: string;
appName: string;
appAvatar: string;
history: HistoryItemType[];
activeChatId: string;
onChangeChat: (chatId?: string) => void;
onDelHistory: (chatId: string) => void;
onClearHistory: () => void;
onSetHistoryTop?: (e: { chatId: string; top: boolean }) => void;
onSetCustomTitle?: (e: { chatId: string; title: string }) => void;
onClose: () => void;
}) => {
const theme = useTheme();
const router = useRouter();
const { t } = useTranslation();
const { isPc } = useGlobalStore();
const { myApps, loadMyApps, userInfo } = useUserStore();
const [currentTab, setCurrentTab] = useState<`${TabEnum}`>(TabEnum.history);
const isShare = useMemo(() => !appId || !userInfo, [appId, userInfo]);
// custom title edit
const { onOpenModal, EditModal: EditTitleModal } = useEditTitle({
title: '自定义历史记录标题',
placeholder: '如果设置为空，会自动跟随聊天记录。'
});
const { openConfirm, ConfirmModal } = useConfirm({
content: isShare
? t('chat.Confirm to clear share chat histroy')
: t('chat.Confirm to clear history')
});
const concatHistory = useMemo<HistoryItemType[]>(
() =>
!activeChatId ? [{ id: activeChatId, title: t('chat.New Chat') }].concat(history) : history,
[activeChatId, history, t]
);
useQuery(['init'], () => {
if (isShare) {
setCurrentTab(TabEnum.history);
return null;
}
return loadMyApps(false);
});
return (
<Flex
position={'relative'}
flexDirection={'column'}
w={'100%'}
h={'100%'}
bg={'white'}
borderRight={['', theme.borders.base]}
whiteSpace={'nowrap'}
>
{isPc && (
<MyTooltip label={appId ? t('app.App Detail') : ''} offset={[0, 0]}>
<Flex
pt={5}
pb={2}
px={[2, 5]}
alignItems={'center'}
cursor={appId ? 'pointer' : 'default'}
onClick={() =>
appId &&
router.replace({
pathname: '/app/detail',
query: { appId }
})
}
>
<Avatar src={appAvatar} />
<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} alignItems={'center'}>
{!isPc && !isShare && (
<Tabs
w={'120px'}
mr={2}
list={[
{ label: 'App', id: TabEnum.app },
{ label: 'chat.History', id: TabEnum.history }
]}
activeId={currentTab}
onChange={(e) => setCurrentTab(e as `${TabEnum}`)}
/>
)}
<Button
variant={'base'}
flex={1}
h={'100%'}
color={'myBlue.700'}
borderRadius={'xl'}
leftIcon={<MyIcon name={'chat'} w={'16px'} />}
overflow={'hidden'}
onClick={() => onChangeChat()}
>
{t('chat.New Chat')}
</Button>
{(isPc || isShare) && (
<IconButton
ml={3}
h={'100%'}
variant={'base'}
aria-label={''}
borderRadius={'xl'}
onClick={openConfirm(onClearHistory)}
>
<MyIcon name={'clear'} w={'16px'} />
</IconButton>
)}
</Flex>
<Box flex={'1 0 0'} h={0} px={[2, 5]} overflow={'overlay'}>
{/* chat history */}
{(currentTab === TabEnum.history || isPc) && (
<>
{concatHistory.map((item, i) => (
<Flex
position={'relative'}
key={item.id || `${i}`}
alignItems={'center'}
py={3}
px={4}
cursor={'pointer'}
userSelect={'none'}
borderRadius={'lg'}
mb={2}
_hover={{
bg: 'myGray.100',
'& .more': {
display: 'block'
}
}}
bg={item.top ? '#E6F6F6 !important' : ''}
{...(item.id === activeChatId
? {
backgroundColor: 'myBlue.100 !important',
color: 'myBlue.700'
}
: {
onClick: () => {
onChangeChat(item.id);
}
})}
>
<MyIcon name={item.id === activeChatId ? 'chatFill' : 'chat'} w={'16px'} />
<Box flex={'1 0 0'} ml={3} className="textEllipsis">
{item.customTitle || item.title}
</Box>
{!!item.id && (
<Box className="more" display={['block', 'none']}>
<Menu autoSelect={false} isLazy offset={[0, 5]}>
<MenuButton
_hover={{ bg: 'white' }}
cursor={'pointer'}
borderRadius={'md'}
onClick={(e) => {
e.stopPropagation();
}}
>
<MyIcon name={'more'} w={'14px'} p={1} />
</MenuButton>
<MenuList color={'myGray.700'} minW={`90px !important`}>
{onSetHistoryTop && (
<MenuItem
onClick={(e) => {
e.stopPropagation();
onSetHistoryTop({ chatId: item.id, top: !item.top });
}}
>
<MyIcon mr={2} name={'setTop'} w={'16px'}></MyIcon>
{item.top ? '取消置顶' : '置顶'}
</MenuItem>
)}
{onSetCustomTitle && (
<MenuItem
onClick={(e) => {
e.stopPropagation();
onOpenModal({
defaultVal: item.customTitle || item.title,
onSuccess: (e) =>
onSetCustomTitle({
chatId: item.id,
title: e
})
});
}}
>
<MyIcon mr={2} name={'customTitle'} w={'16px'}></MyIcon>
自定义标题
</MenuItem>
)}
<MenuItem
_hover={{ color: 'red.500' }}
onClick={(e) => {
e.stopPropagation();
onDelHistory(item.id);
if (item.id === activeChatId) {
onChangeChat();
}
}}
>
<MyIcon mr={2} name={'delete'} w={'16px'}></MyIcon>
删除
</MenuItem>
</MenuList>
</Menu>
</Box>
)}
</Flex>
))}
</>
)}
{currentTab === TabEnum.app && !isPc && (
<>
{myApps.map((item) => (
<Flex
key={item._id}
py={2}
px={3}
mb={3}
borderRadius={'lg'}
alignItems={'center'}
{...(item._id === appId
? {
backgroundColor: 'myBlue.100 !important',
color: 'myBlue.700'
}
: {
onClick: () => {
router.replace({
query: {
appId: item._id
}
});
onClose();
}
})}
>
<Avatar src={item.avatar} w={'24px'} />
<Box ml={2} className={'textEllipsis'}>
{item.name}
</Box>
</Flex>
))}
</>
)}
</Box>
{!isPc && appId && (
<Flex
mt={2}
borderTop={theme.borders.base}
alignItems={'center'}
cursor={'pointer'}
p={3}
onClick={() => router.push('/app/list')}
>
<IconButton
mr={3}
icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
bg={'white'}
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
h={'28px'}
size={'sm'}
borderRadius={'50%'}
aria-label={''}
/>
{t('chat.Exit Chat')}
</Flex>
)}
<EditTitleModal />
<ConfirmModal />
</Flex>
);
};
export default ChatHistorySlider;

58
projects/app/src/pages/chat/components/Empty.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
import { Card, Box, Flex } from '@chakra-ui/react';
import { useMarkdown } from '@/hooks/useMarkdown';
import Markdown from '@/components/Markdown';
import Avatar from '@/components/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;

81
projects/app/src/pages/chat/components/SliderApps.tsx Normal file
View File

@@ -0,0 +1,81 @@
import React from 'react';
import { Flex, Box, IconButton } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import { useUserStore } from '@/store/user';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import MyIcon from '@/components/Icon';
import Avatar from '@/components/Avatar';
const SliderApps = ({ appId }: { appId: string }) => {
const { t } = useTranslation();
const router = useRouter();
const { myApps, loadMyApps } = useUserStore();
useQuery(['loadModels'], () => loadMyApps(false));
return (
<Flex flexDirection={'column'} h={'100%'}>
<Box px={5} py={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={'backFill'} w={'18px'} color={'myBlue.600'} />}
bg={'white'}
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
h={'28px'}
size={'sm'}
borderRadius={'50%'}
aria-label={''}
/>
{t('chat.Exit Chat')}
</Flex>
</Box>
<Box flex={'1 0 0'} h={0} px={5} overflow={'overlay'}>
{myApps.map((item) => (
<Flex
key={item._id}
py={2}
px={3}
mb={3}
cursor={'pointer'}
borderRadius={'lg'}
alignItems={'center'}
{...(item._id === appId
? {
bg: 'white',
boxShadow: 'md'
}
: {
_hover: {
bg: 'myGray.200'
},
onClick: () => {
router.replace({
query: {
appId: item._id
}
});
}
})}
>
<Avatar src={item.avatar} w={'24px'} />
<Box ml={2} className={'textEllipsis'}>
{item.name}
</Box>
</Flex>
))}
</Box>
</Flex>
);
};
export default SliderApps;

68
projects/app/src/pages/chat/components/ToolMenu.tsx Normal file
View File

@@ -0,0 +1,68 @@
import React, { useMemo } from 'react';
import { useChatBox } from '@/components/ChatBox';
import { ChatItemType } from '@/types/chat';
import { Menu, MenuButton, MenuList, MenuItem, Box } from '@chakra-ui/react';
import MyIcon from '@/components/Icon';
import { useRouter } from 'next/router';
const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
const { onExportChat } = useChatBox();
const router = useRouter();
const { appId, shareId } = router.query;
const menuList = useMemo(
() => [
{
icon: 'chat',
label: '新对话',
onClick: () => {
router.replace({
query: {
appId,
shareId
}
});
}
},
{
icon: 'apiLight',
label: 'HTML导出',
onClick: () => onExportChat({ type: 'html', history })
},
{
icon: 'markdown',
label: 'Markdown导出',
onClick: () => onExportChat({ type: 'md', history })
},
{ icon: 'pdf', label: 'PDF导出', onClick: () => onExportChat({ type: 'pdf', history }) }
],
[appId, history, onExportChat, router, shareId]
);
return history.length > 0 ? (
<Menu autoSelect={false} isLazy>
<MenuButton
_hover={{ bg: 'myWhite.600 ' }}
cursor={'pointer'}
borderRadius={'md'}
onClick={(e) => {
e.stopPropagation();
}}
>
<MyIcon name={'more'} w={'14px'} p={2} />
</MenuButton>
<MenuList color={'myGray.700'} minW={`120px !important`} zIndex={10}>
{menuList.map((item) => (
<MenuItem key={item.label} onClick={item.onClick} py={[2, 3]}>
<MyIcon name={item.icon as any} w={['14px', '16px']} />
<Box ml={[1, 2]}>{item.label}</Box>
</MenuItem>
))}
</MenuList>
</Menu>
) : (
<Box w={'28px'} h={'28px'} />
);
};
export default ToolMenu;

30
projects/app/src/pages/chat/index.module.scss Normal file
View File

@@ -0,0 +1,30 @@
.stopIcon {
animation: zoomStopIcon 0.4s infinite alternate;
}
@keyframes zoomStopIcon {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1.2);
}
}
.newChat {
.modelListContainer {
height: 0;
overflow: hidden;
}
.modelList {
border-radius: 6px;
}
&:hover {
.modelListContainer {
height: 60vh;
}
.modelList {
box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.05);
border: 1px solid #dee0e2;
}
}
}

390
projects/app/src/pages/chat/index.tsx Normal file
View File

@@ -0,0 +1,390 @@
import React, { useCallback, useRef } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { getInitChatSiteInfo, delChatRecordById, putChatHistory } from '@/api/chat';
import {
Box,
Flex,
useDisclosure,
Drawer,
DrawerOverlay,
DrawerContent,
useTheme
} from '@chakra-ui/react';
import { useGlobalStore } from '@/store/global';
import { useQuery } from '@tanstack/react-query';
import { streamFetch } from '@/api/fetch';
import { useChatStore } from '@/store/chat';
import { useLoading } from '@/hooks/useLoading';
import { useToast } from '@/hooks/useToast';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
import type { ChatHistoryItemType } from '@/types/chat';
import { useTranslation } from 'react-i18next';
import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
import PageContainer from '@/components/PageContainer';
import SideBar from '@/components/SideBar';
import ChatHistorySlider from './components/ChatHistorySlider';
import SliderApps from './components/SliderApps';
import ChatHeader from './components/ChatHeader';
import { getErrText } from '@/utils/tools';
import { useUserStore } from '@/store/user';
import { serviceSideProps } from '@/utils/web/i18n';
const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
const router = useRouter();
const theme = useTheme();
const { t } = useTranslation();
const { toast } = useToast();
const ChatBoxRef = useRef<ComponentRef>(null);
const forbidRefresh = useRef(false);
const {
lastChatAppId,
setLastChatAppId,
lastChatId,
setLastChatId,
history,
loadHistory,
updateHistory,
delHistory,
clearHistory,
chatData,
setChatData
} = useChatStore();
const { myApps, loadMyApps, userInfo } = useUserStore();
const { isPc } = useGlobalStore();
const { Loading, setIsLoading } = useLoading();
const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
const startChat = useCallback(
async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
const prompts = messages.slice(-2);
const completionChatId = chatId ? chatId : nanoid();
const { responseText, responseData } = await streamFetch({
data: {
messages: prompts,
variables,
appId,
chatId: completionChatId
},
onMessage: generatingMessage,
abortSignal: controller
});
const newTitle = prompts[0].content?.slice(0, 20) || '新对话';
// update history
if (completionChatId !== chatId) {
const newHistory: ChatHistoryItemType = {
chatId: completionChatId,
updateTime: new Date(),
title: newTitle,
appId,
top: false
};
updateHistory(newHistory);
if (controller.signal.reason !== 'leave') {
forbidRefresh.current = true;
router.replace({
query: {
chatId: completionChatId,
appId
}
});
}
} else {
const currentChat = history.find((item) => item.chatId === chatId);
currentChat &&
updateHistory({
...currentChat,
updateTime: new Date(),
title: newTitle
});
}
// update chat window
setChatData((state) => ({
...state,
title: newTitle,
history: ChatBoxRef.current?.getChatHistory() || state.history
}));
return { responseText, responseData };
},
[appId, chatId, history, router, setChatData, updateHistory]
);
// del one chat content
const delOneHistoryItem = useCallback(
async ({ contentId, index }: { contentId?: string; index: number }) => {
if (!chatId || !contentId) return;
try {
setChatData((state) => ({
...state,
history: state.history.filter((_, i) => i !== index)
}));
await delChatRecordById({ chatId, contentId });
} catch (err) {
console.log(err);
}
},
[chatId, setChatData]
);
// get chat app info
const loadChatInfo = useCallback(
async ({
appId,
chatId,
loading = false
}: {
appId: string;
chatId: string;
loading?: boolean;
}) => {
try {
loading && setIsLoading(true);
const res = await getInitChatSiteInfo({ appId, chatId });
const history = res.history.map((item) => ({
...item,
status: 'finish' as any
}));
setChatData({
...res,
history
});
// have records.
ChatBoxRef.current?.resetHistory(history);
ChatBoxRef.current?.resetVariables(res.variables);
if (res.history.length > 0) {
setTimeout(() => {
ChatBoxRef.current?.scrollToBottom('auto');
}, 500);
}
} catch (e: any) {
// reset all chat tore
setLastChatAppId('');
setLastChatId('');
toast({
title: getErrText(e, '初始化聊天失败'),
status: 'error'
});
if (e?.code === 501) {
router.replace('/app/list');
} else {
router.replace('/chat');
}
}
setIsLoading(false);
return null;
},
[setIsLoading, setChatData, router, setLastChatAppId, setLastChatId, toast]
);
// 初始化聊天框
useQuery(['init', appId, chatId], () => {
// pc: redirect to latest model chat
if (!appId && lastChatAppId) {
return router.replace({
query: {
appId: lastChatAppId,
chatId: lastChatId
}
});
}
if (!appId && myApps[0]) {
return router.replace({
query: {
appId: myApps[0]._id,
chatId: lastChatId
}
});
}
if (!appId) {
(async () => {
const apps = await loadMyApps();
if (apps.length === 0) {
toast({
status: 'error',
title: t('chat.You need to a chat app')
});
router.replace('/app/list');
} else {
router.replace({
query: {
appId: apps[0]._id,
chatId: lastChatId
}
});
}
})();
return;
}
// store id
appId && setLastChatAppId(appId);
setLastChatId(chatId);
if (forbidRefresh.current) {
forbidRefresh.current = false;
return null;
}
return loadChatInfo({
appId,
chatId,
loading: appId !== chatData.appId
});
});
useQuery(['loadHistory', appId], () => (appId ? loadHistory({ appId }) : null));
return (
<Flex h={'100%'}>
<Head>
<title>{chatData.app.name}</title>
</Head>
{/* pc show myself apps */}
{isPc && (
<Box borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
<SliderApps appId={appId} />
</Box>
)}
<PageContainer flex={'1 0 0'} w={0} bg={'myWhite.600'} position={'relative'}>
<Flex h={'100%'} flexDirection={['column', 'row']}>
{/* pc always show history. */}
{((children: React.ReactNode) => {
return isPc || !appId ? (
<SideBar>{children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'250px'}>{children}</DrawerContent>
</Drawer>
);
})(
<ChatHistorySlider
appId={appId}
appName={chatData.app.name}
appAvatar={chatData.app.avatar}
activeChatId={chatId}
onClose={onCloseSlider}
history={history.map((item, i) => ({
id: item.chatId,
title: item.title,
customTitle: item.customTitle,
top: item.top
}))}
onChangeChat={(chatId) => {
router.replace({
query: {
chatId: chatId || '',
appId
}
});
if (!isPc) {
onCloseSlider();
}
}}
onDelHistory={delHistory}
onClearHistory={() => {
clearHistory(appId);
router.replace({
query: {
appId
}
});
}}
onSetHistoryTop={async (e) => {
try {
await putChatHistory(e);
const historyItem = history.find((item) => item.chatId === e.chatId);
if (!historyItem) return;
updateHistory({
...historyItem,
top: e.top
});
} catch (error) {}
}}
onSetCustomTitle={async (e) => {
try {
await putChatHistory({
chatId: e.chatId,
customTitle: e.title
});
const historyItem = history.find((item) => item.chatId === e.chatId);
if (!historyItem) return;
updateHistory({
...historyItem,
customTitle: e.title
});
} catch (error) {}
}}
/>
)}
{/* chat container */}
<Flex
position={'relative'}
h={[0, '100%']}
w={['100%', 0]}
flex={'1 0 0'}
flexDirection={'column'}
>
{/* header */}
<ChatHeader
appAvatar={chatData.app.avatar}
appName={chatData.app.name}
appId={appId}
history={chatData.history}
chatModels={chatData.app.chatModels}
onOpenSlider={onOpenSlider}
/>
{/* chat box */}
<Box flex={1}>
<ChatBox
ref={ChatBoxRef}
showEmptyIntro
chatId={chatId}
appAvatar={chatData.app.avatar}
userAvatar={userInfo?.avatar}
variableModules={chatData.app.variableModules}
feedbackType={'user'}
welcomeText={chatData.app.welcomeText}
onUpdateVariable={(e) => {}}
onStartChat={startChat}
onDelMessage={delOneHistoryItem}
/>
</Box>
</Flex>
</Flex>
<Loading fixed={false} />
</PageContainer>
</Flex>
);
};
export async function getServerSideProps(context: any) {
return {
props: {
appId: context?.query?.appId || '',
chatId: context?.query?.chatId || '',
...(await serviceSideProps(context))
}
};
}
export default Chat;

259
projects/app/src/pages/chat/share.tsx Normal file
View File

@@ -0,0 +1,259 @@
import React, { useCallback, useMemo, useRef } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { initShareChatInfo } from '@/api/support/outLink';
import { Box, Flex, useDisclosure, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react';
import { useToast } from '@/hooks/useToast';
import { useGlobalStore } from '@/store/global';
import { useQuery } from '@tanstack/react-query';
import { streamFetch } from '@/api/fetch';
import { useShareChatStore, defaultHistory } from '@/store/shareChat';
import SideBar from '@/components/SideBar';
import { gptMessage2ChatType } from '@/utils/adapt';
import { getErrText } from '@/utils/tools';
import { ChatSiteItemType } from '@/types/chat';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
import PageContainer from '@/components/PageContainer';
import ChatHeader from './components/ChatHeader';
import ChatHistorySlider from './components/ChatHistorySlider';
import { serviceSideProps } from '@/utils/web/i18n';
const OutLink = ({ shareId, chatId }: { shareId: string; chatId: string }) => {
const router = useRouter();
const { toast } = useToast();
const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
const { isPc } = useGlobalStore();
const ChatBoxRef = useRef<ComponentRef>(null);
const {
shareChatData,
setShareChatData,
shareChatHistory,
saveChatResponse,
delShareChatHistoryItemById,
delOneShareHistoryByChatId,
delManyShareChatHistoryByShareId
} = useShareChatStore();
const history = useMemo(
() => shareChatHistory.filter((item) => item.shareId === shareId),
[shareChatHistory, shareId]
);
const startChat = useCallback(
async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
const prompts = messages.slice(-2);
const completionChatId = chatId ? chatId : nanoid();
const { responseText, responseData } = await streamFetch({
data: {
messages: prompts,
variables,
shareId,
chatId: completionChatId
},
onMessage: generatingMessage,
abortSignal: controller
});
const result: ChatSiteItemType[] = gptMessage2ChatType(prompts).map((item) => ({
...item,
status: 'finish'
}));
result[1].value = responseText;
result[1].responseData = responseData;
/* save chat */
saveChatResponse({
chatId: completionChatId,
prompts: result,
variables,
shareId
});
if (completionChatId !== chatId && controller.signal.reason !== 'leave') {
router.replace({
query: {
shareId,
chatId: completionChatId
}
});
}
window.top?.postMessage(
{
type: 'shareChatFinish',
data: {
question: result[0]?.value,
answer: result[1]?.value
}
},
'*'
);
return { responseText, responseData };
},
[chatId, router, saveChatResponse, shareId]
);
const loadAppInfo = useCallback(
async (shareId: string, chatId: string) => {
if (!shareId) return null;
const history = shareChatHistory.find((item) => item.chatId === chatId) || defaultHistory;
ChatBoxRef.current?.resetHistory(history.chats);
ChatBoxRef.current?.resetVariables(history.variables);
try {
const chatData = await (async () => {
if (shareChatData.app.name === '') {
return initShareChatInfo({
shareId
});
}
return shareChatData;
})();
setShareChatData({
...chatData,
history
});
} catch (e: any) {
toast({
status: 'error',
title: getErrText(e, '获取应用失败')
});
if (e?.code === 501) {
delManyShareChatHistoryByShareId(shareId);
}
}
if (history.chats.length > 0) {
setTimeout(() => {
ChatBoxRef.current?.scrollToBottom('auto');
}, 500);
}
return history;
},
[delManyShareChatHistoryByShareId, setShareChatData, shareChatData, shareChatHistory, toast]
);
useQuery(['init', shareId, chatId], () => {
return loadAppInfo(shareId, chatId);
});
return (
<PageContainer>
<Head>
<title>{shareChatData.app.name}</title>
</Head>
<Flex h={'100%'} flexDirection={['column', 'row']}>
{((children: React.ReactNode) => {
return isPc ? (
<SideBar>{children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'250px'} boxShadow={'2px 0 10px rgba(0,0,0,0.15)'}>
{children}
</DrawerContent>
</Drawer>
);
})(
<ChatHistorySlider
appName={shareChatData.app.name}
appAvatar={shareChatData.app.avatar}
activeChatId={chatId}
history={history.map((item) => ({
id: item.chatId,
title: item.title
}))}
onClose={onCloseSlider}
onChangeChat={(chatId) => {
console.log(chatId);
router.replace({
query: {
chatId: chatId || '',
shareId
}
});
if (!isPc) {
onCloseSlider();
}
}}
onDelHistory={delOneShareHistoryByChatId}
onClearHistory={() => {
delManyShareChatHistoryByShareId(shareId);
router.replace({
query: {
shareId
}
});
}}
/>
)}
{/* chat container */}
<Flex
position={'relative'}
h={[0, '100%']}
w={['100%', 0]}
flex={'1 0 0'}
flexDirection={'column'}
>
{/* header */}
<ChatHeader
appAvatar={shareChatData.app.avatar}
appName={shareChatData.app.name}
history={shareChatData.history.chats}
onOpenSlider={onOpenSlider}
/>
{/* chat box */}
<Box flex={1}>
<ChatBox
ref={ChatBoxRef}
appAvatar={shareChatData.app.avatar}
userAvatar={shareChatData.userAvatar}
variableModules={shareChatData.app.variableModules}
welcomeText={shareChatData.app.welcomeText}
feedbackType={'user'}
onUpdateVariable={(e) => {
setShareChatData((state) => ({
...state,
history: {
...state.history,
variables: e
}
}));
}}
onStartChat={startChat}
onDelMessage={({ index }) => delShareChatHistoryItemById({ chatId, index })}
/>
</Box>
</Flex>
</Flex>
</PageContainer>
);
};
export async function getServerSideProps(context: any) {
const shareId = context?.query?.shareId || '';
const chatId = context?.query?.chatId || '';
return {
props: { shareId, chatId, ...(await serviceSideProps(context)) }
};
}
export default OutLink;