Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit e27abe1f by papapatrick Committed by GitHub
Options

perf: 运行详情弹窗优化 (#2192) 

* perf: 运行详情弹窗优化

* style: 调整样式

* style: 弹窗样式优化&&应用切换圆角添加

* fix: 修复编译错误
parent 5cecef58
Showing with 366 additions and 85 deletions
projects/app/public/imgs/modal/wholeRecord.svg
<?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="1700705708636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23671" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M179.5 890.1C116.4 890.1 65 838.7 65 775.6V371.4c0-63.1 51.4-114.5 114.5-114.5h561.6c63.1 0 114.5 51.4 114.5 114.5v404.2c0 63.1-51.4 114.5-114.5 114.5H179.5z m0-584.6c-36.4 0-65.9 29.6-65.9 65.9v404.2c0 36.4 29.6 65.9 65.9 65.9h561.6c36.4 0 66-29.6 66-65.9V371.4c0-36.4-29.6-65.9-66-65.9H179.5z" fill="#6B400D" p-id="23672"></path><path d="M521.3 511H195.2c-1.6 0-2.8-1.3-2.8-2.8v-44.1c0-1.6 1.3-2.8 2.8-2.8h326.1c1.6 0 2.8 1.3 2.8 2.8v44.1c0 1.6-1.2 2.8-2.8 2.8zM521.3 685.7H195.2c-1.6 0-2.8-1.3-2.8-2.8v-44.1c0-1.6 1.3-2.8 2.8-2.8h326.1c1.6 0 2.8 1.3 2.8 2.8v44.1c0 1.5-1.2 2.8-2.8 2.8zM625 547.1c-4.9 0-9.4-1.9-12.9-5.4l-48.6-48.8c-7.1-7.1-7.1-18.7 0-25.8 3.4-3.4 8-5.3 12.9-5.3s9.4 1.9 12.9 5.3l35.8 35.9 72.2-72.5c3.4-3.5 8-5.3 12.9-5.3s9.4 1.9 12.9 5.3c7.1 7.1 7.1 18.7 0 25.8L638 541.7c-3.6 3.5-8.2 5.4-13 5.4zM625 721.8c-4.9 0-9.4-1.9-12.9-5.4l-48.6-48.8c-7.1-7.1-7.1-18.7 0-25.8 3.4-3.4 8-5.3 12.9-5.3s9.4 1.9 12.9 5.3l35.8 35.9 72.2-72.5c3.4-3.5 8-5.3 12.9-5.3s9.4 1.9 12.9 5.3c7.1 7.1 7.1 18.7 0 25.8L638 716.4c-3.6 3.5-8.2 5.4-13 5.4z" fill="#6B400D" p-id="23673"></path><path d="M853.5 371.4c0-62-50.4-112.4-112.4-112.4H179.5c-2.7 0-5.4 0.2-8.1 0.4l-1.1 0.1-0.3-1.1v-4.9c0-63.1 51.4-114.5 114.5-114.5h561.6c63.1 0 114.5 51.4 114.5 114.5v404.2c0 59.5-46.5 109.6-105.9 114.1l-1.1 0.1V371.4z" fill="#6B400D" p-id="23674"></path><path d="M846.1 186.5H284.5c-36.9 0-67 30-67 67v4.5H741c62.6 0 113.5 50.9 113.5 113.5v352.3c32.9-4.2 58.5-32.1 58.5-66.1V253.5c0-37-30-67-66.9-67z" fill="#FFD524" p-id="23675"></path></svg> <svg viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
\ No newline at end of file <g id="icon/line/response">
<g id="Vector">
<path d="M7.34834 4.11888H12.6517C13.5813 4.11888 14.1767 4.12022 14.6283 4.15772C15.0601 4.19358 15.2092 4.25367 15.2748 4.28776C15.5488 4.43007 15.7721 4.65345 15.9145 4.92741C15.9485 4.99304 16.0086 5.14216 16.0445 5.57387C16.082 6.02554 16.0833 6.62087 16.0833 7.55054V8.694C16.0833 9.15424 16.4564 9.52733 16.9167 9.52733C17.3769 9.52733 17.75 9.15424 17.75 8.694V7.55054C17.75 5.74716 17.75 4.84546 17.3935 4.15912C17.093 3.58075 16.6215 3.10917 16.0431 2.80873C15.3568 2.45221 14.4551 2.45221 12.6517 2.45221H7.34834C5.54495 2.45221 4.64326 2.45221 3.95692 2.80873C3.37855 3.10917 2.90697 3.58075 2.60653 4.15912C2.25001 4.84546 2.25001 5.74716 2.25001 7.55054V14.0205C2.25001 15.8239 2.25001 16.7256 2.60653 17.412C2.90697 17.9903 3.37855 18.4619 3.95692 18.7624C4.64326 19.1189 5.54495 19.1189 7.34834 19.1189H7.75418C8.21442 19.1189 8.58752 18.7458 8.58752 18.2855C8.58752 17.8253 8.21442 17.4522 7.75418 17.4522H7.34834C6.41867 17.4522 5.82334 17.4509 5.37167 17.4134C4.93996 17.3775 4.79083 17.3174 4.72521 17.2833C4.45125 17.141 4.22787 16.9176 4.08555 16.6437C4.05147 16.578 3.99137 16.4289 3.95552 15.9972C3.91801 15.5455 3.91667 14.9502 3.91667 14.0205V7.55054C3.91667 6.62087 3.91801 6.02554 3.95552 5.57387C3.99137 5.14216 4.05147 4.99304 4.08555 4.92741C4.22787 4.65345 4.45125 4.43007 4.72521 4.28776C4.79083 4.25367 4.93996 4.19358 5.37167 4.15772C5.82334 4.12022 6.41867 4.11888 7.34834 4.11888Z" fill="#3370FF"/>
<path d="M6.54546 5.85994C6.08522 5.85994 5.71213 6.23304 5.71213 6.69328C5.71213 7.15351 6.08522 7.52661 6.54546 7.52661H13.4545C13.9148 7.52661 14.2879 7.15351 14.2879 6.69328C14.2879 6.23304 13.9148 5.85994 13.4545 5.85994H6.54546Z" fill="#3370FF"/>
<path d="M5.71213 9.78883C5.71213 9.32859 6.08522 8.95549 6.54546 8.95549H8.40652C8.86676 8.95549 9.23986 9.32859 9.23986 9.78883C9.23986 10.2491 8.86676 10.6222 8.40652 10.6222H6.54546C6.08522 10.6222 5.71213 10.2491 5.71213 9.78883Z" fill="#3370FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0844 14.8705C19.0844 17.6848 16.803 19.9662 13.9887 19.9662C11.1745 19.9662 8.89305 17.6848 8.89305 14.8705C8.89305 12.0563 11.1745 9.77486 13.9887 9.77486C16.803 9.77486 19.0844 12.0563 19.0844 14.8705ZM17.5844 14.8705C17.5844 16.8563 15.9745 18.4662 13.9887 18.4662C12.0029 18.4662 10.393 16.8563 10.393 14.8705C10.393 12.8847 12.0029 11.2749 13.9887 11.2749C15.9745 11.2749 17.5844 12.8847 17.5844 14.8705Z" fill="#3370FF"/>
<path d="M13.9887 12.3868C13.5745 12.3868 13.2387 12.7225 13.2387 13.1368V14.7039C13.2387 14.8669 13.2907 15.0178 13.3791 15.1408C13.4423 15.2705 13.5436 15.3833 13.6779 15.4609L15.0368 16.2454C15.3955 16.4525 15.8542 16.3296 16.0613 15.9709C16.2684 15.6122 16.1455 15.1535 15.7868 14.9464L14.7387 14.3413V13.1368C14.7387 12.7225 14.4029 12.3868 13.9887 12.3868Z" fill="#3370FF"/>
</g>
</g>
</svg>
projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/RenderResponseDetail.tsx
...@@ -13,7 +13,7 @@ const RenderResponseDetail = () => { ...@@ -13,7 +13,7 @@ const RenderResponseDetail = () => {
<>{'进行中'}</> <>{'进行中'}</>
) : ( ) : (
<Box flex={'1 0 0'} h={'100%'} overflow={'auto'}> <Box flex={'1 0 0'} h={'100%'} overflow={'auto'}>
<ResponseBox response={responseData} showDetail={true} /> <ResponseBox useMobile={true} response={responseData} showDetail={true} />
</Box> </Box>
); );
}; };
......
projects/app/src/components/core/chat/components/WholeResponseModal.tsx
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Box, useTheme, Flex, Image, BoxProps } from '@chakra-ui/react'; import { Box, Flex, BoxProps, useDisclosure } from '@chakra-ui/react';
import type { ChatHistoryItemResType } from '@fastgpt/global/core/chat/type.d'; import type { ChatHistoryItemResType } from '@fastgpt/global/core/chat/type.d';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { moduleTemplatesFlat } from '@fastgpt/global/core/workflow/template/constants'; import { moduleTemplatesFlat } from '@fastgpt/global/core/workflow/template/constants';
import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
import MyModal from '@fastgpt/web/components/common/MyModal'; import MyModal from '@fastgpt/web/components/common/MyModal';
import Markdown from '@/components/Markdown'; import Markdown from '@/components/Markdown';
import { QuoteList } from '../ChatContainer/ChatBox/components/QuoteModal'; import { QuoteList } from '../ChatContainer/ChatBox/components/QuoteModal';
...@@ -13,6 +11,17 @@ import { formatNumber } from '@fastgpt/global/common/math/tools'; ...@@ -13,6 +11,17 @@ import { formatNumber } from '@fastgpt/global/common/math/tools';
import { useI18n } from '@/web/context/I18n'; import { useI18n } from '@/web/context/I18n';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip'; import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import Avatar from '@fastgpt/web/components/common/Avatar'; import Avatar from '@fastgpt/web/components/common/Avatar';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import MyIcon from '@fastgpt/web/components/common/Icon';
type sideTabItemType = {
moduleLogo?: string;
moduleName: string;
runningTime?: number;
moduleType: string;
nodeId: string;
children: sideTabItemType[];
};
function RowRender({ function RowRender({
children, children,
...@@ -40,7 +49,6 @@ function Row({ ...@@ -40,7 +49,6 @@ function Row({
value?: string | number | boolean | object; value?: string | number | boolean | object;
rawDom?: React.ReactNode; rawDom?: React.ReactNode;
}) { }) {
const theme = useTheme();
const val = value || rawDom; const val = value || rawDom;
const isObject = typeof value === 'object'; const isObject = typeof value === 'object';
...@@ -66,9 +74,9 @@ function Row({ ...@@ -66,9 +74,9 @@ function Row({
label={label} label={label}
mb={isObject ? 0 : 1} mb={isObject ? 0 : 1}
{...(isObject {...(isObject
? { transform: 'translateY(-3px)' } ? { py: 2, transform: 'translateY(-3px)' }
: value : value
? { px: 3, py: 2, border: theme.borders.base } ? { px: 3, py: 2, border: 'base' }
: {})} : {})}
> >
<Markdown source={formatValue} /> <Markdown source={formatValue} />
...@@ -93,7 +101,8 @@ const WholeResponseModal = ({ ...@@ -93,7 +101,8 @@ const WholeResponseModal = ({
isOpen={true} isOpen={true}
onClose={onClose} onClose={onClose}
h={['90vh', '80vh']} h={['90vh', '80vh']}
minW={['90vw', '600px']} maxH={['90vh', '700px']}
minW={['90vw', '880px']}
iconSrc="/imgs/modal/wholeRecord.svg" iconSrc="/imgs/modal/wholeRecord.svg"
title={ title={
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
...@@ -112,59 +121,138 @@ export default WholeResponseModal; ...@@ -112,59 +121,138 @@ export default WholeResponseModal;
export const ResponseBox = React.memo(function ResponseBox({ export const ResponseBox = React.memo(function ResponseBox({
response, response,
showDetail, showDetail,
hideTabs = false hideTabs = false,
useMobile = false
}: { }: {
response: ChatHistoryItemResType[]; response: ChatHistoryItemResType[];
showDetail: boolean; showDetail: boolean;
hideTabs?: boolean; hideTabs?: boolean;
useMobile?: boolean;
}) { }) {
const theme = useTheme();
const { t } = useTranslation(); const { t } = useTranslation();
const { workflowT } = useI18n(); const { isPc } = useSystem();
const flattedResponse = useMemo(() => flattenArray(response), [response]);
const [currentNodeId, setCurrentNodeId] = useState(
flattedResponse[0]?.nodeId ? flattedResponse[0].nodeId : ''
);
const activeModule = useMemo(
() => flattedResponse.find((item) => item.nodeId === currentNodeId) as ChatHistoryItemResType,
[currentNodeId, flattedResponse]
);
const sideResponse: sideTabItemType[] = useMemo(() => {
return pretreatmentResponse(response);
}, [response]);
const {
isOpen: isOpenMobileModal,
onOpen: onOpenMobileModal,
onClose: onCloseMobileModal
} = useDisclosure();
return (
<>
{isPc && !useMobile ? (
<Flex overflow={'hidden'}>
<Box flex={'2 0 0'} borderRight={'sm'} p={3}>
<Box overflow={'auto'} height={'100%'}>
<WholeResponseSideTab
response={sideResponse}
value={currentNodeId}
onChange={setCurrentNodeId}
/>
</Box>
</Box>
<Box flex={'5 0 0'} overflowY={'auto'} overflowX={'hidden'} height={'100%'}>
<WholeResponseContent
activeModule={activeModule}
hideTabs={hideTabs}
showDetail={showDetail}
/>
</Box>
</Flex>
) : (
<>
<Box position={'relative'}>
{!isOpenMobileModal && (
<Box height={'100%'}>
<WholeResponseSideTab
response={sideResponse}
value={currentNodeId}
onChange={(item: string) => {
setCurrentNodeId(item);
onOpenMobileModal();
}}
isMobile={true}
/>
</Box>
)}
{isOpenMobileModal && (
<Box h={'100%'} w={'100%'} zIndex={10} background={'white'}>
<Flex
align={'center'}
justifyContent={'center'}
px={2}
py={2}
borderBottom={'sm'}
position={'relative'}
>
<MyIcon
width={4}
height={4}
name="common/backLight"
onClick={(e) => {
e.stopPropagation();
onCloseMobileModal();
}}
position={'absolute'}
left={2}
top={'50%'}
transform={'translateY(-50%)'}
/>
const list = useMemo(
() =>
response.map((item, i) => ({
label: (
<Flex alignItems={'center'} justifyContent={'center'} px={2} py={1}>
<Avatar <Avatar
src={ src={
item.moduleLogo || activeModule.moduleLogo ||
moduleTemplatesFlat.find((template) => item.moduleType === template.flowNodeType) moduleTemplatesFlat.find(
?.avatar (template) => activeModule.moduleType === template.flowNodeType
)?.avatar
} }
alt={''}
w={'1.25rem'} w={'1.25rem'}
h={'1.25rem'}
borderRadius={'sm'} borderRadius={'sm'}
/> />
<Box ml={1.5}> {t(item.moduleName as any)}</Box>
<Box ml={1.5} lineHeight={'1.25rem'} alignItems={'center'}>
{t(activeModule.moduleName as any)}
</Box>
</Flex> </Flex>
), <WholeResponseContent
value: `${i}` activeModule={activeModule}
})), hideTabs={hideTabs}
[response, t] showDetail={showDetail}
/>
</Box>
)}
</Box>
</>
)}
</>
); );
});
const [currentTab, setCurrentTab] = useState(`0`); const WholeResponseContent = ({
activeModule,
const activeModule = useMemo(() => response[Number(currentTab)], [currentTab, response]); hideTabs,
showDetail
}: {
activeModule: ChatHistoryItemResType;
hideTabs?: boolean;
showDetail: boolean;
}) => {
const { t } = useTranslation();
const { workflowT } = useI18n();
return ( return (
<Box <>
{...(hideTabs ? { overflow: 'auto' } : { display: 'flex', flexDirection: 'column' })}
h={'100%'}
>
{!hideTabs && (
<Box>
<LightRowTabs
w={'100%'}
list={list}
value={currentTab}
inlineStyles={{ pt: 0 }}
onChange={setCurrentTab}
/>
</Box>
)}
{activeModule && ( {activeModule && (
<Box <Box
py={2} py={2}
...@@ -176,6 +264,7 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -176,6 +264,7 @@ export const ResponseBox = React.memo(function ResponseBox({
overflow: 'auto' overflow: 'auto'
})} })}
> >
{/* common info */}
<> <>
<Row <Row
label={t('common:core.chat.response.module name')} label={t('common:core.chat.response.module name')}
...@@ -208,7 +297,6 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -208,7 +297,6 @@ export const ResponseBox = React.memo(function ResponseBox({
/> />
<Row label={workflowT('response.Error')} value={activeModule?.error} /> <Row label={workflowT('response.Error')} value={activeModule?.error} />
</> </>
{/* ai chat */} {/* ai chat */}
<> <>
<Row <Row
...@@ -223,7 +311,7 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -223,7 +311,7 @@ export const ResponseBox = React.memo(function ResponseBox({
label={t('common:core.chat.response.module historyPreview')} label={t('common:core.chat.response.module historyPreview')}
rawDom={ rawDom={
activeModule.historyPreview ? ( activeModule.historyPreview ? (
<Box px={3} py={2} border={theme.borders.base} borderRadius={'md'}> <Box px={3} py={2} border={'base'} borderRadius={'md'}>
{activeModule.historyPreview?.map((item, i) => ( {activeModule.historyPreview?.map((item, i) => (
<Box <Box
key={i} key={i}
...@@ -245,7 +333,6 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -245,7 +333,6 @@ export const ResponseBox = React.memo(function ResponseBox({
} }
/> />
</> </>
{/* dataset search */} {/* dataset search */}
<> <>
{activeModule?.searchMode && ( {activeModule?.searchMode && (
...@@ -279,7 +366,6 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -279,7 +366,6 @@ export const ResponseBox = React.memo(function ResponseBox({
/> />
)} )}
</> </>
{/* classify question */} {/* classify question */}
<> <>
<Row <Row
...@@ -294,7 +380,6 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -294,7 +380,6 @@ export const ResponseBox = React.memo(function ResponseBox({
})()} })()}
/> />
</> </>
{/* if-else */} {/* if-else */}
<> <>
<Row <Row
...@@ -302,7 +387,6 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -302,7 +387,6 @@ export const ResponseBox = React.memo(function ResponseBox({
value={activeModule?.ifElseResult} value={activeModule?.ifElseResult}
/> />
</> </>
{/* extract */} {/* extract */}
<> <>
<Row <Row
...@@ -314,7 +398,6 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -314,7 +398,6 @@ export const ResponseBox = React.memo(function ResponseBox({
value={activeModule?.extractResult} value={activeModule?.extractResult}
/> />
</> </>
{/* http */} {/* http */}
<> <>
<Row label={'Headers'} value={activeModule?.headers} /> <Row label={'Headers'} value={activeModule?.headers} />
...@@ -325,49 +408,236 @@ export const ResponseBox = React.memo(function ResponseBox({ ...@@ -325,49 +408,236 @@ export const ResponseBox = React.memo(function ResponseBox({
value={activeModule?.httpResult} value={activeModule?.httpResult}
/> />
</> </>
{/* plugin */} {/* plugin */}
<> <>
<Row <Row
label={t('common:core.chat.response.plugin output')} label={t('common:core.chat.response.plugin output')}
value={activeModule?.pluginOutput} value={activeModule?.pluginOutput}
/> />
{activeModule?.pluginDetail && activeModule?.pluginDetail.length > 0 && (
<Row
label={t('common:core.chat.response.Plugin response detail')}
rawDom={
<Box h={'60vh'}>
<ResponseBox response={activeModule.pluginDetail} showDetail={showDetail} />
</Box>
}
/>
)}
</> </>
{/* text output */} {/* text output */}
<Row <Row
label={t('common:core.chat.response.text output')} label={t('common:core.chat.response.text output')}
value={activeModule?.textOutput} value={activeModule?.textOutput}
/> />
{/* tool call */}
{activeModule?.toolDetail && activeModule?.toolDetail.length > 0 && (
<Row
label={t('common:core.chat.response.Tool call response detail')}
rawDom={
<Box h={'60vh'}>
<ResponseBox response={activeModule.toolDetail} showDetail={showDetail} />
</Box>
}
/>
)}
{/* code */} {/* code */}
<Row label={workflowT('response.Custom outputs')} value={activeModule?.customOutputs} /> <Row label={workflowT('response.Custom outputs')} value={activeModule?.customOutputs} />
<Row label={workflowT('response.Custom inputs')} value={activeModule?.customInputs} /> <Row label={workflowT('response.Custom inputs')} value={activeModule?.customInputs} />
<Row label={workflowT('response.Code log')} value={activeModule?.codeLog} /> <Row label={workflowT('response.Code log')} value={activeModule?.codeLog} />
</Box> </Box>
)} )}
</>
);
};
const WholeResponseSideTab = ({
response,
value,
onChange,
isMobile = false
}: {
response: sideTabItemType[];
value: string;
onChange: (index: string) => void;
isMobile?: boolean;
}) => {
return (
<>
{response.map((item) => (
<Box
key={item.nodeId}
bg={isMobile ? 'myGray.100' : ''}
m={isMobile ? 3 : 0}
borderRadius={'md'}
minW={'12rem'}
>
<SideTabItem value={value} onChange={onChange} sideBarItem={item} index={0} />
</Box>
))}
</>
);
};
const AccordionSideTabItem = ({
sideBarItem,
onChange,
value,
index
}: {
sideBarItem: sideTabItemType;
onChange: (nodeId: string) => void;
value: string;
index: number;
}) => {
const { isOpen: isShowAccordion, onToggle: onToggleShowAccordion } = useDisclosure({
defaultIsOpen: false
});
return (
<>
<Flex align={'center'} position={'relative'}>
<NormalSideTabItem
index={index}
value={value}
onChange={onChange}
sideBarItem={sideBarItem}
>
<MyIcon
h={'20px'}
w={'20px'}
name={isShowAccordion ? 'core/chat/chevronUp' : 'core/chat/chevronDown'}
onClick={(e) => {
e.stopPropagation();
onToggleShowAccordion();
}}
_hover={{ color: 'primary.600', cursor: 'pointer' }}
/>
</NormalSideTabItem>
</Flex>
{isShowAccordion && (
<Box position={'relative'}>
{sideBarItem.children.map((item) => (
<SideTabItem
value={value}
key={item.nodeId}
sideBarItem={item}
onChange={onChange}
index={index + 1}
/>
))}
</Box>
)}
</>
);
};
const NormalSideTabItem = ({
sideBarItem,
onChange,
value,
index,
children
}: {
sideBarItem: sideTabItemType;
onChange: (nodeId: string) => void;
value: string;
index: number;
children?: React.ReactNode;
}) => {
const { t } = useTranslation();
const leftIndex = index > 3 ? 3 : index;
return (
<Flex
alignItems={'center'}
onClick={() => {
onChange(sideBarItem.nodeId);
}}
background={value === sideBarItem.nodeId ? 'myGray.100' : ''}
_hover={{ background: 'myGray.100' }}
p={2}
width={'100%'}
cursor={'pointer'}
pl={leftIndex === 0 ? '0.5rem' : `${1.5 * leftIndex + 0.5}rem`}
borderRadius={'md'}
position={'relative'}
>
<Avatar
src={
sideBarItem.moduleLogo ||
moduleTemplatesFlat.find((template) => sideBarItem.moduleType === template.flowNodeType)
?.avatar
}
alt={''}
w={'1.5rem'}
h={'1.5rem'}
borderRadius={'sm'}
/>
<Box ml={2}>
<Box fontSize={'xs'} fontWeight={'bold'}>
{t(sideBarItem.moduleName as any)}
</Box>
<Box fontSize={'2xs'} color={'myGray.500'}>
{t(sideBarItem.runningTime as any) + 's'}
</Box>
</Box>
<Box
h={'20px'}
w={'20px'}
position={'absolute'}
right={2}
top={'50%'}
transform={'translateY(-50%)'}
>
{children}
</Box> </Box>
</Flex>
); );
}); };
const SideTabItem = ({
sideBarItem,
onChange,
value,
index
}: {
sideBarItem: sideTabItemType;
onChange: (nodeId: string) => void;
value: string;
index: number;
}) => {
if (!sideBarItem) return null;
return sideBarItem.children.length !== 0 ? (
<>
<Box>
<AccordionSideTabItem
sideBarItem={sideBarItem}
onChange={onChange}
value={value}
index={index}
/>
</Box>
</>
) : (
<NormalSideTabItem index={index} value={value} onChange={onChange} sideBarItem={sideBarItem} />
);
};
function pretreatmentResponse(res: ChatHistoryItemResType[]): sideTabItemType[] {
return res.map((item) => {
let children: sideTabItemType[] = [];
if (!!(item?.toolDetail || item?.pluginDetail)) {
if (item?.toolDetail) children.push(...pretreatmentResponse(item?.toolDetail));
if (item?.pluginDetail) children.push(...pretreatmentResponse(item?.pluginDetail));
}
return {
moduleLogo: item.moduleLogo,
moduleName: item.moduleName,
runningTime: item.runningTime,
moduleType: item.moduleType,
nodeId: item.nodeId,
children
};
});
}
function flattenArray(arr: ChatHistoryItemResType[]) {
const result: ChatHistoryItemResType[] = [];
function helper(currentArray: ChatHistoryItemResType[]) {
currentArray.forEach((item) => {
if (item && typeof item === 'object') {
result.push(item);
if (Array.isArray(item.toolDetail)) {
helper(item.toolDetail);
}
if (Array.isArray(item.pluginDetail)) {
helper(item.pluginDetail);
}
}
});
}
helper(arr);
return result;
}
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
...@@ -573,8 +573,8 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({ ...@@ -573,8 +573,8 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
top={0} top={0}
zIndex={10} zIndex={10}
w={'420px'} w={'420px'}
maxH={'100%'}
minH={'300px'} minH={'300px'}
maxH={'100%'}
border={'base'} border={'base'}
> >
{/* Status header */} {/* Status header */}
...@@ -614,7 +614,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({ ...@@ -614,7 +614,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
)} )}
</Flex> </Flex>
{/* Show result */} {/* Show result */}
<Box maxH={'calc(100%-54px)'} overflow={'auto'}> <Box overflowY={'auto'}>
{!debugResult.message && !response && ( {!debugResult.message && !response && (
<EmptyTip text={t('common:core.workflow.debug.Not result')} pt={2} pb={5} /> <EmptyTip text={t('common:core.workflow.debug.Not result')} pt={2} pb={5} />
)} )}
...@@ -623,7 +623,9 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({ ...@@ -623,7 +623,9 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
{debugResult.message} {debugResult.message}
</Box> </Box>
)} )}
{response && <ResponseBox response={[response]} showDetail hideTabs />} {response && (
<ResponseBox useMobile={true} response={[response]} showDetail hideTabs />
)}
</Box> </Box>
</Card> </Card>
)} )}
......
projects/app/src/pages/chat/components/ChatHeader.tsx
...@@ -174,7 +174,7 @@ const MobileDrawer = ({ ...@@ -174,7 +174,7 @@ const MobileDrawer = ({
onClick: () => onclickApp(item._id) onClick: () => onclickApp(item._id)
})} })}
> >
<Avatar src={item.avatar} w={'24px'} /> <Avatar src={item.avatar} w={'24px'} borderRadius={'sm'} />
<Box ml={2} className={'textEllipsis'}> <Box ml={2} className={'textEllipsis'}>
{item.name} {item.name}
</Box> </Box>
...@@ -223,7 +223,7 @@ const MobileHeader = ({ ...@@ -223,7 +223,7 @@ const MobileHeader = ({
)} )}
<Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}> <Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
<Flex alignItems={'center'} onClick={toggleDrawer}> <Flex alignItems={'center'} onClick={toggleDrawer}>
<Avatar src={avatar} w={'1rem'} /> <Avatar borderRadius={'sm'} src={avatar} w={'1rem'} />
<Box ml={1} className="textEllipsis"> <Box ml={1} className="textEllipsis">
{name} {name}
</Box> </Box>
......
projects/app/src/pages/chat/components/CustomPluginRunBox.tsx
...@@ -27,7 +27,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => { ...@@ -27,7 +27,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => {
<PluginRunBox {...props} tab={PluginRunBoxTabEnum.input} /> <PluginRunBox {...props} tab={PluginRunBoxTabEnum.input} />
</Box> </Box>
<Stack px={3} py={4} h={'100%'} alignItems={'flex-start'} w={'100%'} overflow={'auto'}> <Stack px={3} py={4} h={'100%'} alignItems={'flex-start'} w={'100%'} overflow={'auto'}>
<Box display={'inline-block'} mb={5}> <Box display={'inline-block'}>
<LightRowTabs<PluginRunBoxTabEnum> <LightRowTabs<PluginRunBoxTabEnum>
list={[ list={[
{ label: t('common:common.Output'), value: PluginRunBoxTabEnum.output }, { label: t('common:common.Output'), value: PluginRunBoxTabEnum.output },
...@@ -61,7 +61,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => { ...@@ -61,7 +61,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => {
py={0} py={0}
fontSize={'sm'} fontSize={'sm'}
/> />
<Box mt={3} flex={'1 0 0'} w={'100%'}> <Box flex={'1 0 0'} w={'100%'}>
<PluginRunBox {...props} /> <PluginRunBox {...props} />
</Box> </Box>
</Stack> </Stack>
......
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