Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 877aab85 by archer
Options

fix: phone ui

parent 077ee950
Showing with 213 additions and 161 deletions
client/src/components/ChatBox/index.tsx
...@@ -312,8 +312,8 @@ const ChatBox = ( ...@@ -312,8 +312,8 @@ const ChatBox = (
}; };
const controlContainerStyle = { const controlContainerStyle = {
className: 'control', className: 'control',
display: isChatting ? 'none' : ['flex', 'none'],
color: 'myGray.400', color: 'myGray.400',
display: ['flex', 'none'],
pl: 1, pl: 1,
mt: 2, mt: 2,
position: 'absolute' as any, position: 'absolute' as any,
...@@ -321,12 +321,17 @@ const ChatBox = ( ...@@ -321,12 +321,17 @@ const ChatBox = (
w: '100%' w: '100%'
}; };
const hasVariableInput = useMemo(
() => variableModules || welcomeText,
[variableModules, welcomeText]
);
return ( return (
<Flex flexDirection={'column'} h={'100%'}> <Flex flexDirection={'column'} h={'100%'}>
<Box ref={ChatBoxRef} flex={'1 0 0'} overflow={'overlay'} px={[2, 5, 8]} py={5}> <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 8]} py={[0, 5]}>
<Box maxW={['100%', '1000px', '1200px']} mx={'auto'}> <Box maxW={['100%', '1000px', '1200px']} h={'100%'} mx={'auto'}>
{/* variable input */} {/* variable input */}
{(variableModules || welcomeText) && ( {hasVariableInput && (
<Flex alignItems={'flex-start'} py={2}> <Flex alignItems={'flex-start'} py={2}>
{/* avatar */} {/* avatar */}
<Avatar <Avatar
...@@ -396,8 +401,10 @@ const ChatBox = ( ...@@ -396,8 +401,10 @@ const ChatBox = (
</Flex> </Flex>
</Flex> </Flex>
)} )}
{/* empty guide */}
{/* chat history */} {/* chat history */}
<Box id={'history'}> <Box id={'history'} pb={[8, 2]}>
{chatHistory.map((item, index) => ( {chatHistory.map((item, index) => (
<Flex <Flex
key={item._id} key={item._id}
...@@ -486,7 +493,7 @@ const ChatBox = ( ...@@ -486,7 +493,7 @@ const ChatBox = (
> >
<Box as={'p'}>{item.value}</Box> <Box as={'p'}>{item.value}</Box>
</Card> </Card>
<Flex {...controlContainerStyle} right={0}> <Flex {...controlContainerStyle} justifyContent={'flex-end'}>
<MyTooltip label={'复制'}> <MyTooltip label={'复制'}>
<MyIcon <MyIcon
{...controlIconStyle} {...controlIconStyle}
...@@ -523,6 +530,7 @@ const ChatBox = ( ...@@ -523,6 +530,7 @@ const ChatBox = (
</Box> </Box>
</Box> </Box>
</Box> </Box>
{/* input */}
{variableIsFinish ? ( {variableIsFinish ? (
<Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']} px={[0, 5]}> <Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']} px={[0, 5]}>
<Box <Box
......
client/src/components/Icon/icons/file/html.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689324646567" class="icon" viewBox="0 0 1110 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3584" data-spm-anchor-id="a313x.7781069.0.i4" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.375" height="64"><path d="M919.75593219 424.16813563a21.72203344 21.72203344 0 0 0 21.65694937-21.78711844V140.93559313c0-60.04067812-48.545085-108.93559312-108.26847469-108.93559313H140.26033906C80.545085 32 32 80.894915 32 140.93559313v740.77017c0 60.04067812 48.545085 108.93559312 108.26033906 108.93559312h692.88406781c59.71525406 0 108.26033906-48.894915 108.26033907-108.93559312V750.98305063a21.72203344 21.72203344 0 0 0-21.64881375-21.78711844 21.72203344 21.72203344 0 0 0-21.65694938 21.78711843v130.72271251c0 36.04067812-29.14169531 65.36135625-64.95457594 65.36135531H140.26033906c-35.81288156 0-64.95457594-29.32881375-64.95457593-65.36135531V249.87118625h822.80135531v152.50983094a21.72203344 21.72203344 0 0 0 21.64881375 21.78711843zM75.30576312 206.29694937V140.93559313c0-36.04067812 29.14169531-65.36135625 64.95457594-65.36135625h692.88406781c35.81288156 0 64.96271156 29.32881375 64.96271157 65.36135625v65.36135625H75.30576312z m64.95457594-43.57423781a21.72203344 21.72203344 0 0 0 21.65694938-21.78711843 21.72203344 21.72203344 0 0 0-21.65694938-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843z m86.61152531 0a21.72203344 21.72203344 0 0 0 21.65694938-21.78711843 21.72203344 21.72203344 0 0 0-21.65694938-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843z m86.61152532 0a21.72203344 21.72203344 0 0 0 21.65694937-21.78711843 21.72203344 21.72203344 0 0 0-21.65694937-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843zM486.70644031 467.7423725a21.72203344 21.72203344 0 0 1 21.64881375 21.795255v174.29694844a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694844-21.78711937v-65.36135531H378.43796656v65.36135531a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694937-21.78711937V489.5376275a21.72203344 21.72203344 0 0 1 21.65694937-21.795255 21.72203344 21.72203344 0 0 1 21.64881375 21.795255v65.36135531H465.0576275v-65.36135531a21.72203344 21.72203344 0 0 1 21.65694844-21.795255z m173.21491594 0c11.95932188 0 21.665085 9.76271156 21.66508406 21.78711937a21.72203344 21.72203344 0 0 1-21.65694844 21.78711844h-21.65694937v152.51796563a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694938-21.78711937V511.31661031h-21.64881281a21.72203344 21.72203344 0 0 1-21.65694937-21.77898281 21.72203344 21.72203344 0 0 1 21.65694937-21.795255h86.60338969z m224.80271156 1.70847469a21.79525406 21.79525406 0 0 1 13.38305063 20.1274575v174.29694937a21.72203344 21.72203344 0 0 1-21.64881375 21.74644125 21.72203344 21.72203344 0 0 1-21.65694844-21.78711937v-121.70847469l-27.97830562 28.14915281a21.57559313 21.57559313 0 0 1-30.61423688 0l-28.01898281-28.14915281v121.70847469a21.72203344 21.72203344 0 0 1-21.65694938 21.78711937 21.72203344 21.72203344 0 0 1-21.64881375-21.78711937V489.5376275c0-8.80271156 5.28813563-16.77559313 13.38305063-20.13559406a21.68135625 21.68135625 0 0 1 23.59322062 4.71050906l49.62711844 49.97694937 49.62711844-49.93627125a21.38847469 21.38847469 0 0 1 23.60949187-4.71050906z m164.94915281 172.58847468a21.72203344 21.72203344 0 0 1 21.65694844 21.78711844 21.72203344 21.72203344 0 0 1-21.65694843 21.78711938h-86.61152532a21.72203344 21.72203344 0 0 1-21.64881375-21.78711938V489.52949188a21.72203344 21.72203344 0 0 1 21.64881375-21.78711938 21.72203344 21.72203344 0 0 1 21.65694844 21.78711938v152.50982999h64.95457688z" p-id="3585"></path></svg>
\ No newline at end of file
client/src/components/Icon/icons/file/markdown.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689324655973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 601.09184948l-213.36752354-331.89890023A41.3976083 41.3976083 0 0 0 222.02342717 291.06546788v428.06065559H208.2150185a41.42522469 41.42522469 0 0 0 0 82.85044936h110.46726671a41.42522469 41.42522469 0 0 0 0-82.85044936h-13.80840868V432.10455041l172.27370066 267.99358607a41.42522469 41.42522469 0 0 0 69.70484562 0l172.27370066-267.99358607V719.12612347H705.31771479a41.42522469 41.42522469 0 0 0 0 82.85044936h110.46726671a41.42522469 41.42522469 0 0 0 0-82.85044936h-13.80840867V291.06546788a41.42522469 41.42522469 0 0 0-76.69189974-21.76205051L512 601.09184948z" p-id="3735"></path><path d="M14.8973037 180.59820247a165.70089876 165.70089876 0 0 1 165.70089877-165.70089877h662.80359506a165.70089876 165.70089876 0 0 1 165.70089877 165.70089877v662.80359506a165.70089876 165.70089876 0 0 1-165.70089877 165.70089877H180.59820247a165.70089876 165.70089876 0 0 1-165.70089877-165.70089877V180.59820247z m165.70089877-82.85044938a82.85044939 82.85044939 0 0 0-82.85044938 82.85044938v662.80359506a82.85044939 82.85044939 0 0 0 82.85044938 82.85044938h662.80359506a82.85044939 82.85044939 0 0 0 82.85044938-82.85044938V180.59820247a82.85044939 82.85044939 0 0 0-82.85044938-82.85044938H180.59820247z" p-id="3736"></path></svg>
\ No newline at end of file
client/src/components/Icon/icons/file/pdf.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689325086843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1918" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M75.09333333 220.72888889h-36.40888888H75.09333333z m0 582.54222222h0z m194.18074112 194.18074112v-36.40888889 36.40888889z m485.4518511 0v0z m194.18074112-194.18074112h-36.40888889 36.40888889z m0-307.92211001h0zM480.10581333 26.54814777v-36.40888889V26.54814777zM269.27407445 26.54814777v0z m622.73763556 331.46652444l-25.72894891 25.72894891 25.72894891-25.72894891z m-274.57156779-274.57156664l25.72894777-25.72894891-25.72894777 25.72894891zM560.54518557 220.72888889h-36.4088889 36.4088889z m194.18073998 194.18074112v0zM38.68444445 220.72888889v582.54222222h72.81777777V220.72888889h-72.81777777zM269.27407445 1033.86074112h485.4518511v-72.81777778H269.27407445v72.81777778zM985.31555555 803.27111111v-307.92211001h-72.81777777V803.27111111h72.81777777zM480.10581333-9.86074112H269.27407445v72.81777778h210.83173888v-72.81777778z m437.68339001 342.14646557l-274.62011335-274.62011222-51.45789554 51.45789554 274.57156665 274.66865778 51.45789668-51.45789554zM480.10581333 62.95703666a157.77185223 157.77185223 0 0 1 111.55683556 46.21501667l51.45789668-51.45789667a230.58963001 230.58963001 0 0 0-163.01473224-67.57489778v72.81777778z m505.20974222 432.39196444c0-61.16693333-24.27259221-119.80951666-67.52635221-163.06327665l-51.45789667 51.45789667c29.56401778 29.61256334 46.16647111 69.75943111 46.16647111 111.60537998h72.81777777zM38.68444445 803.27111111A230.58963001 230.58963001 0 0 0 269.27407445 1033.86074112v-72.81777778A157.77185223 157.77185223 0 0 1 111.50222222 803.27111111h-72.81777777z m72.81777777-582.54222222A157.77185223 157.77185223 0 0 1 269.27407445 62.95703666v-72.81777778A230.58963001 230.58963001 0 0 0 38.68444445 220.72888889h72.81777777zM754.72592555 1033.86074112A230.58963001 230.58963001 0 0 0 985.31555555 803.27111111h-72.81777777A157.77185223 157.77185223 0 0 1 754.72592555 961.04296334v72.81777778zM524.13629667 26.54814777v194.18074112h72.81777778V26.54814777h-72.81777778zM754.72592555 451.3185189h194.18074112v-72.81777778h-194.18074112v72.81777778zM524.13629667 220.72888889A230.58963001 230.58963001 0 0 0 754.72592555 451.3185189v-72.81777778A157.77185223 157.77185223 0 0 1 596.95407445 220.72888889h-72.81777778z" p-id="1919"></path><path d="M241.94313443 594.76954112V803.27111111h42.08867556v-78.6432h27.42803001c19.07825778 0 33.64181333-0.97090333 43.69066667-3.0098011 7.37886777-1.60199111 14.61210112-4.8545189 21.74824334-9.80612779 7.18468779-5.00015445 13.1072-11.89356999 17.76753778-20.63170332 4.66033778-8.73813333 6.99050667-19.46661888 6.99050666-32.28254891 0-16.55390777-4.02924999-30.09801443-12.13629667-40.53522887a54.56478777 54.56478777 0 0 0-30.00092445-20.43752334c-7.76723001-2.08744334-24.46677333-3.15543666-50.00154112-3.15543666H241.89459001z m271.07631446 0h-76.9441189V803.27111111h79.1771978c15.53445888 0 28.01057223-1.45635555 37.28270222-4.36906666 12.42756779-4.02924999 22.28224-9.5634011 29.6125622-16.69954333 9.66049223-9.36922112 17.08790557-21.65115221 22.33078557-36.79725113 4.22343111-12.42756779 6.35941888-27.18530333 6.35941888-44.37029888 0-19.56371001-2.28162333-35.92343666-6.79632555-49.22481778a91.02222222 91.02222222 0 0 0-19.90352554-33.83599445 69.71088555 69.71088555 0 0 0-31.45728-19.22389333c-9.12649443-2.66998557-22.33078557-3.98070557-39.66141668-3.98070443z m133.98471111 0V803.27111111h42.04012999v-88.59496334h87.0415178v-35.29234887h-87.0415178v-49.32190891h100.87689558v-35.29234887H646.95561443zM283.98326557 689.18992555v-59.12803556h20.34043221q22.71914667 0 30.29219555 1.40781113a29.12711111 29.12711111 0 0 1 16.89372445 9.22358443c4.46615666 4.95160889 6.69923555 11.16539221 6.69923555 18.78698666a27.71930112 27.71930112 0 0 1-17.9617189 26.45712669c-5.53415111 2.18453333-16.6509989 3.25252779-33.25345109 3.25252665h-23.01041777z m194.13219555 78.93447111v-138.06250667h18.93262222c17.13644999 0 28.64165888 0.63108779 34.51562667 1.94180779q11.79648 2.57289443 19.51516444 9.85467221c5.09724445 4.8545189 9.07795001 11.55375445 11.94211556 20.1947978 2.81562112 8.64104334 4.27197667 20.97152 4.27197554 37.0885211s-1.45635555 28.88438557-4.27197554 38.30215111c-2.86416555 9.27212999-6.5536 15.97136555-11.11684779 20.0491611q-6.65068999 6.11669333-16.89372444 8.64104335a114.66372779 114.66372779 0 0 1-25.48622223 1.99035221h-31.40873443z" p-id="1920"></path></svg>
\ No newline at end of file
client/src/components/Icon/index.tsx
...@@ -51,7 +51,10 @@ const map = { ...@@ -51,7 +51,10 @@ const map = {
variable: require('./icons/modules/variable.svg').default, variable: require('./icons/modules/variable.svg').default,
setTop: require('./icons/light/setTop.svg').default, setTop: require('./icons/light/setTop.svg').default,
fullScreenLight: require('./icons/light/fullScreen.svg').default, fullScreenLight: require('./icons/light/fullScreen.svg').default,
voice: require('./icons/voice.svg').default voice: require('./icons/voice.svg').default,
html: require('./icons/file/html.svg').default,
pdf: require('./icons/file/pdf.svg').default,
markdown: require('./icons/file/markdown.svg').default
}; };
export type IconName = keyof typeof map; export type IconName = keyof typeof map;
......
client/src/components/Layout/index.tsx
...@@ -63,7 +63,8 @@ const Layout = ({ children }: { children: JSX.Element }) => { ...@@ -63,7 +63,8 @@ const Layout = ({ children }: { children: JSX.Element }) => {
return ( return (
<> <>
<Box h={'100%'} bg={'myWhite.600'}> <Box h={'100%'} bg={'myWhite.600'}>
<Box h={'100%'} display={['none', 'block']}> {isPc ? (
<>
{pcUnShowLayoutRoute[router.pathname] ? ( {pcUnShowLayoutRoute[router.pathname] ? (
<Auth>{children}</Auth> <Auth>{children}</Auth>
) : ( ) : (
...@@ -76,7 +77,9 @@ const Layout = ({ children }: { children: JSX.Element }) => { ...@@ -76,7 +77,9 @@ const Layout = ({ children }: { children: JSX.Element }) => {
</Box> </Box>
</> </>
)} )}
</Box> </>
) : (
<>
<Box h={'100%'} display={['block', 'none']}> <Box h={'100%'} display={['block', 'none']}>
{phoneUnShowLayoutRoute[router.pathname] || isChatPage ? ( {phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
<Auth>{children}</Auth> <Auth>{children}</Auth>
...@@ -91,6 +94,8 @@ const Layout = ({ children }: { children: JSX.Element }) => { ...@@ -91,6 +94,8 @@ const Layout = ({ children }: { children: JSX.Element }) => {
</Flex> </Flex>
)} )}
</Box> </Box>
</>
)}
</Box> </Box>
<Loading loading={loading} /> <Loading loading={loading} />
</> </>
......
client/src/pages/_app.tsx
...@@ -44,7 +44,7 @@ function App({ Component, pageProps }: AppProps) { ...@@ -44,7 +44,7 @@ function App({ Component, pageProps }: AppProps) {
<> <>
<Head> <Head>
<title>Fast GPT</title> <title>Fast GPT</title>
<meta name="description" content="Generated by Fast GPT" /> <meta name="description" content="Embedding + LLM, Build AI knowledge base" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover"
...@@ -67,7 +67,6 @@ function App({ Component, pageProps }: AppProps) { ...@@ -67,7 +67,6 @@ function App({ Component, pageProps }: AppProps) {
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} /> <ColorModeScript initialColorMode={theme.config.initialColorMode} />
{/* @ts-ignore */}
<Layout> <Layout>
<Component {...pageProps} /> <Component {...pageProps} />
</Layout> </Layout>
......
client/src/pages/chat/components/ChatHeader.tsx 0 → 100644
import React 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';
const ChatHeader = ({
title,
history,
appAvatar,
onOpenSlider
}: {
title: string;
history: ChatItemType[];
appAvatar: string;
onOpenSlider: () => void;
}) => {
const theme = useTheme();
const { isPc } = useGlobalStore();
return (
<Flex
alignItems={'center'}
py={[3, 5]}
px={[3, 5]}
borderBottom={theme.borders.base}
borderBottomColor={'gray.200'}
color={'myGray.900'}
>
{isPc ? (
<>
<Box mr={3} color={'myGray.1000'}>
{title}
</Box>
<Tag display={'flex'}>
<MyIcon name={'history'} w={'14px'} />
<Box ml={1}>{history.length}条记录</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">
{title}
</Box>
</Flex>
</>
)}
{/* control */}
<ToolMenu history={history} />
</Flex>
);
};
export default ChatHeader;
client/src/pages/chat/components/ChatHistorySlider.tsx
...@@ -7,7 +7,8 @@ import { ...@@ -7,7 +7,8 @@ import {
Menu, Menu,
MenuButton, MenuButton,
MenuList, MenuList,
MenuItem MenuItem,
IconButton
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useGlobalStore } from '@/store/global'; import { useGlobalStore } from '@/store/global';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
...@@ -29,8 +30,7 @@ const ChatHistorySlider = ({ ...@@ -29,8 +30,7 @@ const ChatHistorySlider = ({
activeHistoryId, activeHistoryId,
onChangeChat, onChangeChat,
onDelHistory, onDelHistory,
onSetHistoryTop, onSetHistoryTop
onCloseSlider
}: { }: {
appId?: string; appId?: string;
appName: string; appName: string;
...@@ -40,7 +40,6 @@ const ChatHistorySlider = ({ ...@@ -40,7 +40,6 @@ const ChatHistorySlider = ({
onChangeChat: (historyId?: string) => void; onChangeChat: (historyId?: string) => void;
onDelHistory: (historyId: string) => void; onDelHistory: (historyId: string) => void;
onSetHistoryTop?: (e: { historyId: string; top: boolean }) => void; onSetHistoryTop?: (e: { historyId: string; top: boolean }) => void;
onCloseSlider: () => void;
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const router = useRouter(); const router = useRouter();
...@@ -180,6 +179,29 @@ const ChatHistorySlider = ({ ...@@ -180,6 +179,29 @@ const ChatHistorySlider = ({
</Flex> </Flex>
))} ))}
</Box> </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={''}
/>
切换应用
</Flex>
)}
</Flex> </Flex>
); );
}; };
......
client/src/pages/chat/components/SliderApps.tsx
...@@ -21,7 +21,7 @@ const SliderApps = ({ appId }: { appId: string }) => { ...@@ -21,7 +21,7 @@ const SliderApps = ({ appId }: { appId: string }) => {
px={3} px={3}
borderRadius={'md'} borderRadius={'md'}
_hover={{ bg: 'myGray.200' }} _hover={{ bg: 'myGray.200' }}
onClick={() => router.back()} onClick={() => router.push('/app/list')}
> >
<IconButton <IconButton
mr={3} mr={3}
......
client/src/pages/chat/components/ToolMenu.tsx
import React from 'react'; import React, { useRef } from 'react';
import { useChatBox } from '@/components/ChatBox'; import { useChatBox } from '@/components/ChatBox';
import { ChatItemType } from '@/types/chat'; import { ChatItemType } from '@/types/chat';
import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react'; import { Menu, MenuButton, MenuList, MenuItem, Box } from '@chakra-ui/react';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
const ToolMenu = ({ history }: { history: ChatItemType[] }) => { const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
const { onExportChat } = useChatBox(); const { onExportChat } = useChatBox();
const menuList = useRef([
{
icon: 'shareLight',
label: '分享对话',
onClick: () => {}
},
{
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 }) }
]);
return ( return (
<Menu autoSelect={false} isLazy> <Menu autoSelect={false} isLazy>
<MenuButton <MenuButton
...@@ -18,10 +36,13 @@ const ToolMenu = ({ history }: { history: ChatItemType[] }) => { ...@@ -18,10 +36,13 @@ const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
> >
<MyIcon name={'more'} w={'14px'} p={2} /> <MyIcon name={'more'} w={'14px'} p={2} />
</MenuButton> </MenuButton>
<MenuList color={'myGray.700'} minW={`90px !important`}> <MenuList color={'myGray.700'} minW={`120px !important`} zIndex={10}>
<MenuItem onClick={() => onExportChat({ type: 'html', history })}>导出HTML格式</MenuItem> {menuList.current.map((item) => (
<MenuItem onClick={() => onExportChat({ type: 'pdf', history })}>导出PDF格式</MenuItem> <MenuItem key={item.label} onClick={item.onClick} py={[2, 3]}>
<MenuItem onClick={() => onExportChat({ type: 'md', history })}>导出Markdown格式</MenuItem> <MyIcon name={item.icon as any} w={['14px', '16px']} />
<Box ml={[1, 2]}>{item.label}</Box>
</MenuItem>
))}
</MenuList> </MenuList>
</Menu> </Menu>
); );
......
client/src/pages/chat/index.tsx
import React, { useCallback, useState, useRef } from 'react'; import React, { useCallback, useState, useRef } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { import { getInitChatSiteInfo, delChatRecordByIndex, putChatHistory } from '@/api/chat';
getInitChatSiteInfo,
delChatRecordByIndex,
delChatHistoryById,
putChatHistory
} from '@/api/chat';
import { import {
Box, Box,
Flex, Flex,
...@@ -39,6 +34,7 @@ import ChatHistorySlider from './components/ChatHistorySlider'; ...@@ -39,6 +34,7 @@ import ChatHistorySlider from './components/ChatHistorySlider';
import SliderApps from './components/SliderApps'; import SliderApps from './components/SliderApps';
import Tag from '@/components/Tag'; import Tag from '@/components/Tag';
import ToolMenu from './components/ToolMenu'; import ToolMenu from './components/ToolMenu';
import ChatHeader from './components/ChatHeader';
const Chat = () => { const Chat = () => {
const router = useRouter(); const router = useRouter();
...@@ -59,6 +55,7 @@ const Chat = () => { ...@@ -59,6 +55,7 @@ const Chat = () => {
history, history,
loadHistory, loadHistory,
updateHistory, updateHistory,
delHistory,
chatData, chatData,
setChatData setChatData
} = useChatStore(); } = useChatStore();
...@@ -138,14 +135,6 @@ const Chat = () => { ...@@ -138,14 +135,6 @@ const Chat = () => {
}, },
[historyId, setChatData] [historyId, setChatData]
); );
// delete a history
const delHistoryById = useCallback(
async (historyId: string) => {
await delChatHistoryById(historyId);
loadHistory({ appId });
},
[appId, loadHistory]
);
// get chat app info // get chat app info
const loadChatInfo = useCallback( const loadChatInfo = useCallback(
...@@ -232,7 +221,7 @@ const Chat = () => { ...@@ -232,7 +221,7 @@ const Chat = () => {
useQuery(['loadHistory', appId], () => (appId ? loadHistory({ appId }) : null)); useQuery(['loadHistory', appId], () => (appId ? loadHistory({ appId }) : null));
return ( return (
<Flex h={'100%'} flexDirection={['column', 'row']}> <Flex h={'100%'}>
{/* pc show myself apps */} {/* pc show myself apps */}
{isPc && ( {isPc && (
<Box p={5} borderRight={theme.borders.base} w={'220px'} flexShrink={0}> <Box p={5} borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
...@@ -270,15 +259,22 @@ const Chat = () => { ...@@ -270,15 +259,22 @@ const Chat = () => {
appId appId
} }
}); });
if (!isPc) {
onCloseSlider();
}
}} }}
onDelHistory={delHistoryById} onDelHistory={delHistory}
onSetHistoryTop={async (e) => { onSetHistoryTop={async (e) => {
try { try {
await putChatHistory(e); await putChatHistory(e);
loadHistory({ appId }); const historyItem = history.find((item) => item._id === e.historyId);
if (!historyItem) return;
updateHistory({
...historyItem,
top: e.top
});
} catch (error) {} } catch (error) {}
}} }}
onCloseSlider={onCloseSlider}
/> />
)} )}
{/* chat container */} {/* chat container */}
...@@ -289,38 +285,14 @@ const Chat = () => { ...@@ -289,38 +285,14 @@ const Chat = () => {
flex={'1 0 0'} flex={'1 0 0'}
flexDirection={'column'} flexDirection={'column'}
> >
<Flex {/* header */}
alignItems={'center'} <ChatHeader
py={[3, 5]} appAvatar={chatData.app.avatar}
px={5} title={chatData.app.name}
borderBottom={theme.borders.base} history={chatData.history}
borderBottomColor={useColorModeValue('gray.200', 'gray.700')} onOpenSlider={onOpenSlider}
color={useColorModeValue('myGray.900', 'white')}
>
{isPc ? (
<>
<Box mr={3} color={'myGray.1000'}>
{chatData.title}
</Box>
<Tag display={'flex'}>
<MyIcon name={'history'} w={'14px'} />
<Box ml={1}>{chatData.history.length}条记录</Box>
</Tag>
</>
) : (
<>
<MyIcon
name={'menu'}
w={'20px'}
h={'20px'}
color={useColorModeValue('blackAlpha.700', 'white')}
onClick={onOpenSlider}
/> />
</>
)}
<Box flex={1} />
<ToolMenu history={chatData.history} />
</Flex>
{/* chat box */} {/* chat box */}
<Box flex={1}> <Box flex={1}>
<ChatBox <ChatBox
......
client/src/pages/chat/share.tsx
import React, { useCallback, useRef } from 'react'; import React, { useCallback, useEffect, useRef } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { initShareChatInfo } from '@/api/chat'; import { initShareChatInfo } from '@/api/chat';
import { import { Box, Flex, useDisclosure, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react';
Box,
Flex,
useColorModeValue,
useDisclosure,
Drawer,
DrawerOverlay,
DrawerContent,
useTheme
} from '@chakra-ui/react';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { useGlobalStore } from '@/store/global'; import { useGlobalStore } from '@/store/global';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
...@@ -21,15 +12,12 @@ import { gptMessage2ChatType } from '@/utils/adapt'; ...@@ -21,15 +12,12 @@ import { gptMessage2ChatType } from '@/utils/adapt';
import { getErrText } from '@/utils/tools'; import { getErrText } from '@/utils/tools';
import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox'; import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
import MyIcon from '@/components/Icon';
import Tag from '@/components/Tag';
import PageContainer from '@/components/PageContainer'; import PageContainer from '@/components/PageContainer';
import ChatHistorySlider from './components/ChatHistorySlider'; import ChatHistorySlider from './components/ChatHistorySlider';
import ChatHeader from './components/ChatHeader';
const ShareChat = () => { const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string }) => {
const theme = useTheme();
const router = useRouter(); const router = useRouter();
const { shareId = '', historyId } = router.query as { shareId: string; historyId: string };
const { toast } = useToast(); const { toast } = useToast();
const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure(); const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
const { isPc } = useGlobalStore(); const { isPc } = useGlobalStore();
...@@ -48,8 +36,6 @@ const ShareChat = () => { ...@@ -48,8 +36,6 @@ const ShareChat = () => {
const startChat = useCallback( const startChat = useCallback(
async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => { async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
console.log(messages, variables);
const prompts = messages.slice(-shareChatData.maxContext - 2); const prompts = messages.slice(-shareChatData.maxContext - 2);
const { responseText } = await streamFetch({ const { responseText } = await streamFetch({
data: { data: {
...@@ -103,8 +89,8 @@ const ShareChat = () => { ...@@ -103,8 +89,8 @@ const ShareChat = () => {
); );
const loadAppInfo = useCallback( const loadAppInfo = useCallback(
async (shareId?: string) => { async (shareId: string, historyId: string) => {
if (!shareId) return null; if (!shareId || !historyId) return null;
const history = shareChatHistory.find((item) => item._id === historyId) || defaultHistory; const history = shareChatHistory.find((item) => item._id === historyId) || defaultHistory;
ChatBoxRef.current?.resetHistory(history.chats); ChatBoxRef.current?.resetHistory(history.chats);
...@@ -140,52 +126,28 @@ const ShareChat = () => { ...@@ -140,52 +126,28 @@ const ShareChat = () => {
return history; return history;
}, },
[ [delManyShareChatHistoryByShareId, setShareChatData, shareChatData, shareChatHistory, toast]
delManyShareChatHistoryByShareId,
historyId,
setShareChatData,
shareChatData,
shareChatHistory,
toast
]
); );
useQuery(['init', shareId, historyId], () => { useEffect(() => {
return loadAppInfo(shareId); loadAppInfo(shareId, historyId);
}); }, [shareId, historyId]);
return ( return (
<PageContainer> <PageContainer>
<Flex h={'100%'} flexDirection={['column', 'row']}> <Flex h={'100%'} flexDirection={['column', 'row']}>
{/* slider */} {((children: React.ReactNode) => {
{isPc ? ( return isPc ? (
<SideBar> <SideBar>{children}</SideBar>
<ChatHistorySlider
appName={shareChatData.app.name}
appAvatar={shareChatData.app.avatar}
activeHistoryId={historyId}
history={shareChatHistory
.filter((item) => item.shareId === shareId)
.map((item) => ({
id: item._id,
title: item.title
}))}
onChangeChat={(historyId) => {
router.push({
query: {
historyId: historyId || '',
shareId
}
});
}}
onDelHistory={delOneShareHistoryByHistoryId}
onCloseSlider={onCloseSlider}
/>
</SideBar>
) : ( ) : (
<Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}> <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} /> <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'250px'}> <DrawerContent maxWidth={'250px'} boxShadow={'2px 0 10px rgba(0,0,0,0.15)'}>
{children}
</DrawerContent>
</Drawer>
);
})(
<ChatHistorySlider <ChatHistorySlider
appName={shareChatData.app.name} appName={shareChatData.app.name}
appAvatar={shareChatData.app.avatar} appAvatar={shareChatData.app.avatar}
...@@ -201,13 +163,15 @@ const ShareChat = () => { ...@@ -201,13 +163,15 @@ const ShareChat = () => {
shareId shareId
} }
}); });
if (!isPc) {
onCloseSlider();
}
}} }}
onDelHistory={delOneShareHistoryByHistoryId} onDelHistory={delOneShareHistoryByHistoryId}
onCloseSlider={onCloseSlider} onCloseSlider={onCloseSlider}
/> />
</DrawerContent>
</Drawer>
)} )}
{/* chat container */} {/* chat container */}
<Flex <Flex
position={'relative'} position={'relative'}
...@@ -216,36 +180,13 @@ const ShareChat = () => { ...@@ -216,36 +180,13 @@ const ShareChat = () => {
flex={'1 0 0'} flex={'1 0 0'}
flexDirection={'column'} flexDirection={'column'}
> >
<Flex {/* header */}
alignItems={'center'} <ChatHeader
py={[3, 5]} appAvatar={shareChatData.app.avatar}
px={5} title={shareChatData.history.title}
borderBottom={theme.borders.base} history={shareChatData.history.chats}
borderBottomColor={useColorModeValue('gray.200', 'gray.700')} onOpenSlider={onOpenSlider}
color={useColorModeValue('myGray.900', 'white')}
>
{isPc ? (
<>
<Box mr={3} color={'myGray.1000'}>
{shareChatData.history.title}
</Box>
<Tag display={'flex'}>
<MyIcon name={'history'} w={'14px'} />
<Box ml={1}>{shareChatData.history.chats.length}条记录</Box>
</Tag>
</>
) : (
<>
<MyIcon
name={'menu'}
w={'20px'}
h={'20px'}
color={useColorModeValue('blackAlpha.700', 'white')}
onClick={onOpenSlider}
/> />
</>
)}
</Flex>
{/* chat box */} {/* chat box */}
<Box flex={1}> <Box flex={1}>
<ChatBox <ChatBox
...@@ -272,4 +213,13 @@ const ShareChat = () => { ...@@ -272,4 +213,13 @@ const ShareChat = () => {
); );
}; };
export async function getServerSideProps(context: any) {
const shareId = context?.query?.shareId || '';
const historyId = context?.query?.historyId || '';
return {
props: { shareId, historyId }
};
}
export default ShareChat; export default ShareChat;
client/src/store/chat.ts
...@@ -4,12 +4,12 @@ import { immer } from 'zustand/middleware/immer'; ...@@ -4,12 +4,12 @@ import { immer } from 'zustand/middleware/immer';
import { ChatHistoryItemType } from '@/types/chat'; import { ChatHistoryItemType } from '@/types/chat';
import type { InitChatResponse } from '@/api/response/chat'; import type { InitChatResponse } from '@/api/response/chat';
import { getChatHistory } from '@/api/chat'; import { delChatHistoryById, getChatHistory } from '@/api/chat';
import { HUMAN_ICON } from '@/constants/chat';
type State = { type State = {
history: ChatHistoryItemType[]; history: ChatHistoryItemType[];
loadHistory: (data: { appId?: string }) => Promise<null>; loadHistory: (data: { appId?: string }) => Promise<null>;
delHistory(history: string): Promise<void>;
updateHistory: (history: ChatHistoryItemType) => void; updateHistory: (history: ChatHistoryItemType) => void;
chatData: InitChatResponse; chatData: InitChatResponse;
setChatData: (e: InitChatResponse | ((e: InitChatResponse) => InitChatResponse)) => void; setChatData: (e: InitChatResponse | ((e: InitChatResponse) => InitChatResponse)) => void;
...@@ -63,6 +63,12 @@ export const useChatStore = create<State>()( ...@@ -63,6 +63,12 @@ export const useChatStore = create<State>()(
}); });
return null; return null;
}, },
async delHistory(historyId) {
set((state) => {
state.history = state.history.filter((item) => item._id !== historyId);
});
await delChatHistoryById(historyId);
},
updateHistory(history) { updateHistory(history) {
const index = get().history.findIndex((item) => item._id === history._id); const index = get().history.findIndex((item) => item._id === history._id);
set((state) => { set((state) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment