From 834d36981f55817de876258daeac71c270e2c18e Mon Sep 17 00:00:00 2001
From: Archer <545436317@qq.com>
Date: Wed, 31 Jul 2024 16:11:04 +0800
Subject: [PATCH] fix: response modal (#2228)

---
 .../chat/components/WholeResponseModal.tsx    | 124 +++++++++---------
 .../Flow/nodes/render/NodeCard.tsx            |   6 +-
 2 files changed, 62 insertions(+), 68 deletions(-)

diff --git a/projects/app/src/components/core/chat/components/WholeResponseModal.tsx b/projects/app/src/components/core/chat/components/WholeResponseModal.tsx
index 4c8072d1ab18..31f11f713de1 100644
--- a/projects/app/src/components/core/chat/components/WholeResponseModal.tsx
+++ b/projects/app/src/components/core/chat/components/WholeResponseModal.tsx
@@ -170,81 +170,77 @@ export const ResponseBox = React.memo(function ResponseBox({
           </Box>
         </Flex>
       ) : (
-        <>
-          <Box position={'relative'} overflow={isOpenMobileModal ? 'hidden' : ''}>
-            {!isOpenMobileModal && (
-              <Box height={'100%'}>
-                <WholeResponseSideTab
-                  response={sideResponse}
-                  value={currentNodeId}
-                  onChange={(item: string) => {
-                    setCurrentNodeId(item);
-                    onOpenMobileModal();
+        <Box h={'100%'} overflow={'auto'}>
+          {!isOpenMobileModal && (
+            <WholeResponseSideTab
+              response={sideResponse}
+              value={currentNodeId}
+              onChange={(item: string) => {
+                setCurrentNodeId(item);
+                onOpenMobileModal();
+              }}
+              isMobile={true}
+            />
+          )}
+          {isOpenMobileModal && (
+            <Flex flexDirection={'column'} h={'100%'}>
+              <Flex
+                align={'center'}
+                justifyContent={'center'}
+                px={2}
+                py={2}
+                borderBottom={'sm'}
+                position={'relative'}
+                height={'40px'}
+              >
+                <MyIcon
+                  width={4}
+                  height={4}
+                  name="common/backLight"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onCloseMobileModal();
                   }}
-                  isMobile={true}
+                  position={'absolute'}
+                  left={2}
+                  top={'50%'}
+                  transform={'translateY(-50%)'}
+                  cursor={'pointer'}
+                  _hover={{ color: 'primary.500' }}
                 />
-              </Box>
-            )}
-            {isOpenMobileModal && (
-              <Box h={'100%'} w={'100%'} zIndex={10} background={'white'}>
-                <Flex
-                  align={'center'}
-                  justifyContent={'center'}
-                  px={2}
-                  py={2}
-                  borderBottom={'sm'}
-                  position={'relative'}
-                  height={'40px'}
-                >
-                  <MyIcon
-                    width={4}
-                    height={4}
-                    name="common/backLight"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onCloseMobileModal();
-                    }}
-                    position={'absolute'}
-                    left={2}
-                    top={'50%'}
-                    transform={'translateY(-50%)'}
-                    cursor={'pointer'}
-                    _hover={{ color: 'primary.500' }}
-                  />
 
-                  <Avatar
-                    src={
-                      activeModule.moduleLogo ||
-                      moduleTemplatesFlat.find(
-                        (template) => activeModule.moduleType === template.flowNodeType
-                      )?.avatar
-                    }
-                    w={'1.25rem'}
-                    h={'1.25rem'}
-                    borderRadius={'sm'}
-                  />
+                <Avatar
+                  src={
+                    activeModule.moduleLogo ||
+                    moduleTemplatesFlat.find(
+                      (template) => activeModule.moduleType === template.flowNodeType
+                    )?.avatar
+                  }
+                  w={'1.25rem'}
+                  h={'1.25rem'}
+                  borderRadius={'sm'}
+                />
 
-                  <Box ml={1.5} lineHeight={'1.25rem'} alignItems={'center'}>
-                    {t(activeModule.moduleName as any)}
-                  </Box>
-                </Flex>
-                <Box overflow={'auto'} height={'calc(100% - 40px)'}>
-                  <WholeResponseContent
-                    activeModule={activeModule}
-                    hideTabs={hideTabs}
-                    showDetail={showDetail}
-                  />
+                <Box ml={1.5} lineHeight={'1.25rem'} alignItems={'center'}>
+                  {t(activeModule.moduleName as any)}
                 </Box>
+              </Flex>
+              <Box flex={'1 0 0'} overflow={'auto'}>
+                <WholeResponseContent
+                  activeModule={activeModule}
+                  hideTabs={hideTabs}
+                  showDetail={showDetail}
+                />
               </Box>
-            )}
-          </Box>
-        </>
+            </Flex>
+          )}
+        </Box>
       )}
     </>
   );
 });
 
-const WholeResponseContent = ({
+export const WholeResponseContent = ({
   activeModule,
   hideTabs,
   showDetail
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
index 36b5059d00f7..f1ceefed9001 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
@@ -25,7 +25,7 @@ import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useWorkflowUtils } from '../../hooks/useUtils';
-import { ResponseBox } from '@/components/core/chat/components/WholeResponseModal';
+import { WholeResponseContent } from '@/components/core/chat/components/WholeResponseModal';
 
 type Props = FlowNodeItemType & {
   children?: React.ReactNode | React.ReactNode[] | string;
@@ -623,9 +623,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
                   {debugResult.message}
                 </Box>
               )}
-              {response && (
-                <ResponseBox useMobile={true} response={[response]} showDetail hideTabs />
-              )}
+              {response && <WholeResponseContent activeModule={response} showDetail />}
             </Box>
           </Card>
         )}