From f5fad6083a84702e4bbc9ef8e060f5a2eef8de42 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Sat, 22 Jul 2023 21:56:57 +0800
Subject: [PATCH] fix: chat test overflow

---
 client/src/components/ChatBox/index.tsx       | 150 +++++++++---------
 .../app/detail/components/BasicEdit/index.tsx |   5 +-
 .../app/detail/components/KBSelectModal.tsx   |   2 +
 .../pages/app/detail/components/OverView.tsx  |   4 +-
 client/src/pages/app/detail/index.tsx         |  11 +-
 5 files changed, 89 insertions(+), 83 deletions(-)

diff --git a/client/src/components/ChatBox/index.tsx b/client/src/components/ChatBox/index.tsx
index 52337c1bb..02a49897b 100644
--- a/client/src/components/ChatBox/index.tsx
+++ b/client/src/components/ChatBox/index.tsx
@@ -100,15 +100,13 @@ const Empty = () => {
 
 const ChatAvatar = ({
   src,
-  order,
   ml,
   mr
 }: {
-  src: string;
-  order: number;
+  src?: string;
   ml?: (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 = (
   {
@@ -169,8 +167,6 @@ const ChatBox = (
     return true;
   }, [chatHistory.length, variableModules, variables]);
 
-  const isLargeWidth = ChatBoxRef?.current?.clientWidth && ChatBoxRef?.current?.clientWidth >= 900;
-
   const { register, reset, getValues, setValue, handleSubmit } = useForm<Record<string, any>>({
     defaultValues: variables
   });
@@ -391,6 +387,9 @@ const ChatBox = (
     zIndex: 1,
     w: '100%'
   };
+  console.log(ChatBoxRef.current?.clientWidth);
+
+  const messageCardMaxW = ['calc(100% - 48px)', 'calc(100% - 65px)'];
 
   const showEmpty = useMemo(
     () =>
@@ -410,14 +409,23 @@ const ChatBox = (
 
   return (
     <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'}>
           {showEmpty && <Empty />}
 
           {!!welcomeText && (
             <Flex alignItems={'flex-start'} py={2}>
               {/* avatar */}
-              <ChatAvatar src={appAvatar} order={1} mr={['6px', 2]} />
+              <ChatAvatar src={appAvatar} mr={['6px', 2]} />
               {/* message */}
               <Card
                 order={2}
@@ -425,7 +433,7 @@ const ChatBox = (
                 px={4}
                 py={3}
                 bg={'white'}
-                maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}
+                maxW={messageCardMaxW}
                 borderRadius={'0 8px 8px 8px'}
               >
                 <Markdown
@@ -444,7 +452,7 @@ const ChatBox = (
           {!!variableModules?.length && (
             <Flex alignItems={'flex-start'} py={2}>
               {/* avatar */}
-              <ChatAvatar src={appAvatar} order={1} mr={['6px', 2]} />
+              <ChatAvatar src={appAvatar} mr={['6px', 2]} />
               {/* message */}
               <Card
                 order={2}
@@ -454,7 +462,7 @@ const ChatBox = (
                 py={3}
                 borderRadius={'0 8px 8px 8px'}
                 flex={'0 0 400px'}
-                maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}
+                maxW={messageCardMaxW}
               >
                 {variableModules.map((item) => (
                   <Box key={item.id} mb={4}>
@@ -503,36 +511,70 @@ const ChatBox = (
           )}
 
           {/* chat history */}
-          <Box id={'history'} pb={8}>
+          <Box id={'history'}>
             {chatHistory.map((item, index) => (
               <Flex
+                position={'relative'}
                 key={item._id}
                 alignItems={'flex-start'}
-                py={4}
+                justifyContent={item.obj === 'Human' ? 'flex-end' : 'flex-start'}
+                py={5}
                 _hover={{
                   '& .control': {
                     display: item.status === 'finish' ? 'flex' : 'none'
                   }
                 }}
               >
-                {item.obj === 'Human' && <Box flex={1} />}
-                {/* avatar */}
-                <ChatAvatar
-                  src={item.obj === 'Human' ? userInfo?.avatar || HUMAN_ICON : appAvatar}
-                  {...(item.obj === 'AI'
-                    ? {
-                        order: 1,
-                        mr: ['6px', 2]
-                      }
-                    : {
-                        order: 3,
-                        ml: ['6px', 2]
-                      })}
-                />
-                {/* message */}
-                <Box order={2} pt={2} maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}>
-                  {item.obj === 'AI' ? (
-                    <Box w={'100%'} position={'relative'}>
+                {item.obj === 'Human' && (
+                  <>
+                    <Box position={'relative'} maxW={messageCardMaxW}>
+                      <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>
+                    </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'}>
                         <Markdown
                           source={item.value}
@@ -595,50 +637,8 @@ const ChatBox = (
                         )}
                       </Flex>
                     </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>
-                    </Box>
-                  )}
-                </Box>
+                  </>
+                )}
               </Flex>
             ))}
           </Box>
diff --git a/client/src/pages/app/detail/components/BasicEdit/index.tsx b/client/src/pages/app/detail/components/BasicEdit/index.tsx
index 7f51cd7fe..ffd4ed3d5 100644
--- a/client/src/pages/app/detail/components/BasicEdit/index.tsx
+++ b/client/src/pages/app/detail/components/BasicEdit/index.tsx
@@ -161,6 +161,7 @@ const Settings = ({ appId }: { appId: string }) => {
       borderRight={'1.5px solid'}
       borderColor={'myGray.200'}
       pt={4}
+      pl={4}
     >
       <Flex overflowY={'auto'} pr={4} justifyContent={'space-between'}>
         <Box fontSize={['md', 'xl']} fontWeight={'bold'}>
@@ -482,8 +483,8 @@ const ChatTest = ({ appId }: { appId: string }) => {
   }, [appDetail, resetChatBox]);
 
   return (
-    <Flex flexDirection={'column'} h={'100%'} pl={4} py={4}>
-      <Flex>
+    <Flex flexDirection={'column'} h={'100%'} py={4} overflowX={'auto'}>
+      <Flex px={[2, 5]}>
         <Box fontSize={['md', 'xl']} fontWeight={'bold'} flex={1}>
           调试预览
         </Box>
diff --git a/client/src/pages/app/detail/components/KBSelectModal.tsx b/client/src/pages/app/detail/components/KBSelectModal.tsx
index 4a5535aed..022043b0d 100644
--- a/client/src/pages/app/detail/components/KBSelectModal.tsx
+++ b/client/src/pages/app/detail/components/KBSelectModal.tsx
@@ -212,3 +212,5 @@ export const KbParamsModal = ({
     </Modal>
   );
 };
+
+export default KBSelectModal;
diff --git a/client/src/pages/app/detail/components/OverView.tsx b/client/src/pages/app/detail/components/OverView.tsx
index e3db24876..c20d833a6 100644
--- a/client/src/pages/app/detail/components/OverView.tsx
+++ b/client/src/pages/app/detail/components/OverView.tsx
@@ -49,7 +49,7 @@ const OverView = ({ appId }: { appId: string }) => {
   }, [appDetail, setIsLoading, toast, router]);
 
   // load app data
-  const { refetch } = useQuery([appId], () => loadAppDetail(appId, true), {
+  useQuery([appId], () => loadAppDetail(appId, true), {
     enabled: false
   });
 
@@ -142,7 +142,7 @@ const OverView = ({ appId }: { appId: string }) => {
         </Flex>
       </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} />
       </Box>
 
diff --git a/client/src/pages/app/detail/index.tsx b/client/src/pages/app/detail/index.tsx
index 00cb7d9d0..fa7ad3a65 100644
--- a/client/src/pages/app/detail/index.tsx
+++ b/client/src/pages/app/detail/index.tsx
@@ -64,10 +64,13 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   );
 
   useEffect(() => {
-    window.onbeforeunload = (e) => {
-      e.preventDefault();
-      e.returnValue = '内容已修改，确认离开页面吗？';
-    };
+    window.onbeforeunload =
+      process.env.NODE_ENV === 'production'
+        ? (e) => {
+            e.preventDefault();
+            e.returnValue = '内容已修改，确认离开页面吗？';
+          }
+        : null;
 
     return () => {
       window.onbeforeunload = null;