Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit f5fad608 by archer
Options

fix: chat test overflow

parent e49a831c
Showing with 85 additions and 79 deletions
client/src/components/ChatBox/index.tsx
...@@ -100,15 +100,13 @@ const Empty = () => { ...@@ -100,15 +100,13 @@ const Empty = () => {
const ChatAvatar = ({ const ChatAvatar = ({
src, src,
order,
ml, ml,
mr mr
}: { }: {
src: string; src?: string;
order: number;
ml?: (string | number) | (string | number)[]; ml?: (string | number) | (string | number)[];
mr?: (string | number) | (string | number)[]; mr?: (string | number) | (string | number)[];
}) => <Avatar src={src} w={['24px', '34px']} h={['24px', '34px']} order={order} ml={ml} mr={mr} />; }) => <Avatar src={src} w={['24px', '34px']} h={['24px', '34px']} ml={ml} mr={mr} />;
const ChatBox = ( const ChatBox = (
{ {
...@@ -169,8 +167,6 @@ const ChatBox = ( ...@@ -169,8 +167,6 @@ const ChatBox = (
return true; return true;
}, [chatHistory.length, variableModules, variables]); }, [chatHistory.length, variableModules, variables]);
const isLargeWidth = ChatBoxRef?.current?.clientWidth && ChatBoxRef?.current?.clientWidth >= 900;
const { register, reset, getValues, setValue, handleSubmit } = useForm<Record<string, any>>({ const { register, reset, getValues, setValue, handleSubmit } = useForm<Record<string, any>>({
defaultValues: variables defaultValues: variables
}); });
...@@ -391,6 +387,9 @@ const ChatBox = ( ...@@ -391,6 +387,9 @@ const ChatBox = (
zIndex: 1, zIndex: 1,
w: '100%' w: '100%'
}; };
console.log(ChatBoxRef.current?.clientWidth);
const messageCardMaxW = ['calc(100% - 48px)', 'calc(100% - 65px)'];
const showEmpty = useMemo( const showEmpty = useMemo(
() => () =>
...@@ -410,14 +409,23 @@ const ChatBox = ( ...@@ -410,14 +409,23 @@ const ChatBox = (
return ( return (
<Flex flexDirection={'column'} h={'100%'}> <Flex flexDirection={'column'} h={'100%'}>
<Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 7]} pt={[0, 5]}> <Box
ref={ChatBoxRef}
flex={'1 0 0'}
h={0}
w={'100%'}
overflow={'overlay'}
px={[2, 5]}
mt={[0, 5]}
pb={3}
>
<Box maxW={['100%', '1000px', '1200px']} h={'100%'} mx={'auto'}> <Box maxW={['100%', '1000px', '1200px']} h={'100%'} mx={'auto'}>
{showEmpty && <Empty />} {showEmpty && <Empty />}
{!!welcomeText && ( {!!welcomeText && (
<Flex alignItems={'flex-start'} py={2}> <Flex alignItems={'flex-start'} py={2}>
{/* avatar */} {/* avatar */}
<ChatAvatar src={appAvatar} order={1} mr={['6px', 2]} /> <ChatAvatar src={appAvatar} mr={['6px', 2]} />
{/* message */} {/* message */}
<Card <Card
order={2} order={2}
...@@ -425,7 +433,7 @@ const ChatBox = ( ...@@ -425,7 +433,7 @@ const ChatBox = (
px={4} px={4}
py={3} py={3}
bg={'white'} bg={'white'}
maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`} maxW={messageCardMaxW}
borderRadius={'0 8px 8px 8px'} borderRadius={'0 8px 8px 8px'}
> >
<Markdown <Markdown
...@@ -444,7 +452,7 @@ const ChatBox = ( ...@@ -444,7 +452,7 @@ const ChatBox = (
{!!variableModules?.length && ( {!!variableModules?.length && (
<Flex alignItems={'flex-start'} py={2}> <Flex alignItems={'flex-start'} py={2}>
{/* avatar */} {/* avatar */}
<ChatAvatar src={appAvatar} order={1} mr={['6px', 2]} /> <ChatAvatar src={appAvatar} mr={['6px', 2]} />
{/* message */} {/* message */}
<Card <Card
order={2} order={2}
...@@ -454,7 +462,7 @@ const ChatBox = ( ...@@ -454,7 +462,7 @@ const ChatBox = (
py={3} py={3}
borderRadius={'0 8px 8px 8px'} borderRadius={'0 8px 8px 8px'}
flex={'0 0 400px'} flex={'0 0 400px'}
maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`} maxW={messageCardMaxW}
> >
{variableModules.map((item) => ( {variableModules.map((item) => (
<Box key={item.id} mb={4}> <Box key={item.id} mb={4}>
...@@ -503,36 +511,70 @@ const ChatBox = ( ...@@ -503,36 +511,70 @@ const ChatBox = (
)} )}
{/* chat history */} {/* chat history */}
<Box id={'history'} pb={8}> <Box id={'history'}>
{chatHistory.map((item, index) => ( {chatHistory.map((item, index) => (
<Flex <Flex
position={'relative'}
key={item._id} key={item._id}
alignItems={'flex-start'} alignItems={'flex-start'}
py={4} justifyContent={item.obj === 'Human' ? 'flex-end' : 'flex-start'}
py={5}
_hover={{ _hover={{
'& .control': { '& .control': {
display: item.status === 'finish' ? 'flex' : 'none' display: item.status === 'finish' ? 'flex' : 'none'
} }
}} }}
> >
{item.obj === 'Human' && <Box flex={1} />} {item.obj === 'Human' && (
{/* avatar */} <>
<ChatAvatar <Box position={'relative'} maxW={messageCardMaxW}>
src={item.obj === 'Human' ? userInfo?.avatar || HUMAN_ICON : appAvatar} <Card
{...(item.obj === 'AI' className="markdown"
? { whiteSpace={'pre-wrap'}
order: 1, px={4}
mr: ['6px', 2] py={3}
} borderRadius={'8px 0 8px 8px'}
: { bg={'myBlue.300'}
order: 3, >
ml: ['6px', 2] <Box as={'p'}>{item.value}</Box>
})} </Card>
<Flex {...controlContainerStyle} justifyContent={'flex-end'}>
<MyTooltip label={'复制'}>
<MyIcon
{...controlIconStyle}
name={'copy'}
_hover={{ color: 'myBlue.700' }}
onClick={() => onclickCopy(item.value)}
/> />
{/* message */} </MyTooltip>
<Box order={2} pt={2} maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}> {onDelMessage && (
{item.obj === 'AI' ? ( <MyTooltip label={'删除'}>
<Box w={'100%'} position={'relative'}> <MyIcon
{...controlIconStyle}
mr={0}
name={'delete'}
_hover={{ color: 'red.600' }}
onClick={() => {
setChatHistory((state) =>
state.filter((chat) => chat._id !== item._id)
);
onDelMessage({
contentId: item._id,
index
});
}}
/>
</MyTooltip>
)}
</Flex>
</Box>
<ChatAvatar src={userInfo?.avatar} ml={['6px', 2]} />
</>
)}
{item.obj === 'AI' && (
<>
<ChatAvatar src={appAvatar} mr={['6px', 2]} />
<Box position={'relative'} maxW={messageCardMaxW}>
<Card bg={'white'} px={4} py={3} borderRadius={'0 8px 8px 8px'}> <Card bg={'white'} px={4} py={3} borderRadius={'0 8px 8px 8px'}>
<Markdown <Markdown
source={item.value} source={item.value}
...@@ -595,51 +637,9 @@ const ChatBox = ( ...@@ -595,51 +637,9 @@ const ChatBox = (
)} )}
</Flex> </Flex>
</Box> </Box>
) : ( </>
<Box position={'relative'}>
<Card
className="markdown"
whiteSpace={'pre-wrap'}
px={4}
py={3}
borderRadius={'8px 0 8px 8px'}
bg={'myBlue.300'}
>
<Box as={'p'}>{item.value}</Box>
</Card>
<Flex {...controlContainerStyle} justifyContent={'flex-end'}>
<MyTooltip label={'复制'}>
<MyIcon
{...controlIconStyle}
name={'copy'}
_hover={{ color: 'myBlue.700' }}
onClick={() => onclickCopy(item.value)}
/>
</MyTooltip>
{onDelMessage && (
<MyTooltip label={'删除'}>
<MyIcon
{...controlIconStyle}
mr={0}
name={'delete'}
_hover={{ color: 'red.600' }}
onClick={() => {
setChatHistory((state) =>
state.filter((chat) => chat._id !== item._id)
);
onDelMessage({
contentId: item._id,
index
});
}}
/>
</MyTooltip>
)} )}
</Flex> </Flex>
</Box>
)}
</Box>
</Flex>
))} ))}
</Box> </Box>
</Box> </Box>
......
client/src/pages/app/detail/components/BasicEdit/index.tsx
...@@ -161,6 +161,7 @@ const Settings = ({ appId }: { appId: string }) => { ...@@ -161,6 +161,7 @@ const Settings = ({ appId }: { appId: string }) => {
borderRight={'1.5px solid'} borderRight={'1.5px solid'}
borderColor={'myGray.200'} borderColor={'myGray.200'}
pt={4} pt={4}
pl={4}
> >
<Flex overflowY={'auto'} pr={4} justifyContent={'space-between'}> <Flex overflowY={'auto'} pr={4} justifyContent={'space-between'}>
<Box fontSize={['md', 'xl']} fontWeight={'bold'}> <Box fontSize={['md', 'xl']} fontWeight={'bold'}>
...@@ -482,8 +483,8 @@ const ChatTest = ({ appId }: { appId: string }) => { ...@@ -482,8 +483,8 @@ const ChatTest = ({ appId }: { appId: string }) => {
}, [appDetail, resetChatBox]); }, [appDetail, resetChatBox]);
return ( return (
<Flex flexDirection={'column'} h={'100%'} pl={4} py={4}> <Flex flexDirection={'column'} h={'100%'} py={4} overflowX={'auto'}>
<Flex> <Flex px={[2, 5]}>
<Box fontSize={['md', 'xl']} fontWeight={'bold'} flex={1}> <Box fontSize={['md', 'xl']} fontWeight={'bold'} flex={1}>
调试预览 调试预览
</Box> </Box>
......
client/src/pages/app/detail/components/KBSelectModal.tsx
...@@ -212,3 +212,5 @@ export const KbParamsModal = ({ ...@@ -212,3 +212,5 @@ export const KbParamsModal = ({
</Modal> </Modal>
); );
}; };
export default KBSelectModal;
client/src/pages/app/detail/components/OverView.tsx
...@@ -49,7 +49,7 @@ const OverView = ({ appId }: { appId: string }) => { ...@@ -49,7 +49,7 @@ const OverView = ({ appId }: { appId: string }) => {
}, [appDetail, setIsLoading, toast, router]); }, [appDetail, setIsLoading, toast, router]);
// load app data // load app data
const { refetch } = useQuery([appId], () => loadAppDetail(appId, true), { useQuery([appId], () => loadAppDetail(appId, true), {
enabled: false enabled: false
}); });
...@@ -142,7 +142,7 @@ const OverView = ({ appId }: { appId: string }) => { ...@@ -142,7 +142,7 @@ const OverView = ({ appId }: { appId: string }) => {
</Flex> </Flex>
</Grid> </Grid>
<Box flex={'1 0 0'} h={0} mt={4} borderTop={theme.borders.base} px={[3, 5, 8]}> <Box flex={'1 0 0'} h={0} mt={4} borderTop={theme.borders.base}>
<BasicEdit appId={appId} /> <BasicEdit appId={appId} />
</Box> </Box>
......
client/src/pages/app/detail/index.tsx
...@@ -64,10 +64,13 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => { ...@@ -64,10 +64,13 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
); );
useEffect(() => { useEffect(() => {
window.onbeforeunload = (e) => { window.onbeforeunload =
process.env.NODE_ENV === 'production'
? (e) => {
e.preventDefault(); e.preventDefault();
e.returnValue = '内容已修改，确认离开页面吗？'; e.returnValue = '内容已修改，确认离开页面吗？';
}; }
: null;
return () => { return () => {
window.onbeforeunload = null; window.onbeforeunload = null;
......
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