fix: response modal (#2228)

This commit is contained in:
Archer
2024-07-31 16:11:04 +08:00
committed by GitHub
parent 2fdca621e6
commit 834d36981f
2 changed files with 65 additions and 71 deletions

View File

@@ -170,81 +170,77 @@ export const ResponseBox = React.memo(function ResponseBox({
</Box> </Box>
</Flex> </Flex>
) : ( ) : (
<> <Box h={'100%'} overflow={'auto'}>
<Box position={'relative'} overflow={isOpenMobileModal ? 'hidden' : ''}> {!isOpenMobileModal && (
{!isOpenMobileModal && ( <WholeResponseSideTab
<Box height={'100%'}> response={sideResponse}
<WholeResponseSideTab value={currentNodeId}
response={sideResponse} onChange={(item: string) => {
value={currentNodeId} setCurrentNodeId(item);
onChange={(item: string) => { onOpenMobileModal();
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' }}
/>
<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 flex={'1 0 0'} overflow={'auto'}>
<WholeResponseContent
activeModule={activeModule}
hideTabs={hideTabs}
showDetail={showDetail}
/> />
</Box> </Box>
)} </Flex>
{isOpenMobileModal && ( )}
<Box h={'100%'} w={'100%'} zIndex={10} background={'white'}> </Box>
<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'}
/>
<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>
</Box>
)}
</Box>
</>
)} )}
</> </>
); );
}); });
const WholeResponseContent = ({ export const WholeResponseContent = ({
activeModule, activeModule,
hideTabs, hideTabs,
showDetail showDetail

View File

@@ -25,7 +25,7 @@ import { QuestionOutlineIcon } from '@chakra-ui/icons';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip'; import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest'; import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useWorkflowUtils } from '../../hooks/useUtils'; import { useWorkflowUtils } from '../../hooks/useUtils';
import { ResponseBox } from '@/components/core/chat/components/WholeResponseModal'; import { WholeResponseContent } from '@/components/core/chat/components/WholeResponseModal';
type Props = FlowNodeItemType & { type Props = FlowNodeItemType & {
children?: React.ReactNode | React.ReactNode[] | string; children?: React.ReactNode | React.ReactNode[] | string;
@@ -623,9 +623,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
{debugResult.message} {debugResult.message}
</Box> </Box>
)} )}
{response && ( {response && <WholeResponseContent activeModule={response} showDetail />}
<ResponseBox useMobile={true} response={[response]} showDetail hideTabs />
)}
</Box> </Box>
</Card> </Card>
)} )}