mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-23 13:03:50 +00:00
perf: 运行详情弹窗优化 (#2192)
* perf: 运行详情弹窗优化 * style: 调整样式 * style: 弹窗样式优化&&应用切换圆角添加 * fix: 修复编译错误
This commit is contained in:
papapatrick
@@ -1 +1,11 @@
|
||||
<?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">
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.9 KiB |
@@ -13,7 +13,7 @@ const RenderResponseDetail = () => {
|
||||
<>{'进行中'}</>
|
||||
) : (
|
||||
<Box flex={'1 0 0'} h={'100%'} overflow={'auto'}>
|
||||
<ResponseBox response={responseData} showDetail={true} />
|
||||
<ResponseBox useMobile={true} response={responseData} showDetail={true} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
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 { useTranslation } from 'next-i18next';
|
||||
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 Markdown from '@/components/Markdown';
|
||||
import { QuoteList } from '../ChatContainer/ChatBox/components/QuoteModal';
|
||||
@@ -13,6 +11,17 @@ import { formatNumber } from '@fastgpt/global/common/math/tools';
|
||||
import { useI18n } from '@/web/context/I18n';
|
||||
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
|
||||
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({
|
||||
children,
|
||||
@@ -40,7 +49,6 @@ function Row({
|
||||
value?: string | number | boolean | object;
|
||||
rawDom?: React.ReactNode;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
const val = value || rawDom;
|
||||
const isObject = typeof value === 'object';
|
||||
|
||||
@@ -66,9 +74,9 @@ function Row({
|
||||
label={label}
|
||||
mb={isObject ? 0 : 1}
|
||||
{...(isObject
|
||||
? { transform: 'translateY(-3px)' }
|
||||
? { py: 2, transform: 'translateY(-3px)' }
|
||||
: value
|
||||
? { px: 3, py: 2, border: theme.borders.base }
|
||||
? { px: 3, py: 2, border: 'base' }
|
||||
: {})}
|
||||
>
|
||||
<Markdown source={formatValue} />
|
||||
@@ -93,7 +101,8 @@ const WholeResponseModal = ({
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
h={['90vh', '80vh']}
|
||||
minW={['90vw', '600px']}
|
||||
maxH={['90vh', '700px']}
|
||||
minW={['90vw', '880px']}
|
||||
iconSrc="/imgs/modal/wholeRecord.svg"
|
||||
title={
|
||||
<Flex alignItems={'center'}>
|
||||
@@ -112,59 +121,138 @@ export default WholeResponseModal;
|
||||
export const ResponseBox = React.memo(function ResponseBox({
|
||||
response,
|
||||
showDetail,
|
||||
hideTabs = false
|
||||
hideTabs = false,
|
||||
useMobile = false
|
||||
}: {
|
||||
response: ChatHistoryItemResType[];
|
||||
showDetail: boolean;
|
||||
hideTabs?: boolean;
|
||||
useMobile?: boolean;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
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%)'}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<WholeResponseContent
|
||||
activeModule={activeModule}
|
||||
hideTabs={hideTabs}
|
||||
showDetail={showDetail}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
const WholeResponseContent = ({
|
||||
activeModule,
|
||||
hideTabs,
|
||||
showDetail
|
||||
}: {
|
||||
activeModule: ChatHistoryItemResType;
|
||||
hideTabs?: boolean;
|
||||
showDetail: boolean;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { workflowT } = useI18n();
|
||||
|
||||
const list = useMemo(
|
||||
() =>
|
||||
response.map((item, i) => ({
|
||||
label: (
|
||||
<Flex alignItems={'center'} justifyContent={'center'} px={2} py={1}>
|
||||
<Avatar
|
||||
src={
|
||||
item.moduleLogo ||
|
||||
moduleTemplatesFlat.find((template) => item.moduleType === template.flowNodeType)
|
||||
?.avatar
|
||||
}
|
||||
alt={''}
|
||||
w={'1.25rem'}
|
||||
borderRadius={'sm'}
|
||||
/>
|
||||
<Box ml={1.5}> {t(item.moduleName as any)}</Box>
|
||||
</Flex>
|
||||
),
|
||||
value: `${i}`
|
||||
})),
|
||||
[response, t]
|
||||
);
|
||||
|
||||
const [currentTab, setCurrentTab] = useState(`0`);
|
||||
|
||||
const activeModule = useMemo(() => response[Number(currentTab)], [currentTab, response]);
|
||||
|
||||
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 && (
|
||||
<Box
|
||||
py={2}
|
||||
@@ -176,6 +264,7 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
overflow: 'auto'
|
||||
})}
|
||||
>
|
||||
{/* common info */}
|
||||
<>
|
||||
<Row
|
||||
label={t('common:core.chat.response.module name')}
|
||||
@@ -208,7 +297,6 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
/>
|
||||
<Row label={workflowT('response.Error')} value={activeModule?.error} />
|
||||
</>
|
||||
|
||||
{/* ai chat */}
|
||||
<>
|
||||
<Row
|
||||
@@ -223,7 +311,7 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
label={t('common:core.chat.response.module historyPreview')}
|
||||
rawDom={
|
||||
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) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -245,7 +333,6 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
}
|
||||
/>
|
||||
</>
|
||||
|
||||
{/* dataset search */}
|
||||
<>
|
||||
{activeModule?.searchMode && (
|
||||
@@ -279,7 +366,6 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
{/* classify question */}
|
||||
<>
|
||||
<Row
|
||||
@@ -294,7 +380,6 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
})()}
|
||||
/>
|
||||
</>
|
||||
|
||||
{/* if-else */}
|
||||
<>
|
||||
<Row
|
||||
@@ -302,7 +387,6 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
value={activeModule?.ifElseResult}
|
||||
/>
|
||||
</>
|
||||
|
||||
{/* extract */}
|
||||
<>
|
||||
<Row
|
||||
@@ -314,7 +398,6 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
value={activeModule?.extractResult}
|
||||
/>
|
||||
</>
|
||||
|
||||
{/* http */}
|
||||
<>
|
||||
<Row label={'Headers'} value={activeModule?.headers} />
|
||||
@@ -325,49 +408,236 @@ export const ResponseBox = React.memo(function ResponseBox({
|
||||
value={activeModule?.httpResult}
|
||||
/>
|
||||
</>
|
||||
|
||||
{/* plugin */}
|
||||
<>
|
||||
<Row
|
||||
label={t('common:core.chat.response.plugin output')}
|
||||
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 */}
|
||||
<Row
|
||||
label={t('common:core.chat.response.text output')}
|
||||
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 */}
|
||||
<Row label={workflowT('response.Custom outputs')} value={activeModule?.customOutputs} />
|
||||
<Row label={workflowT('response.Custom inputs')} value={activeModule?.customInputs} />
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
@@ -573,8 +573,8 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
|
||||
top={0}
|
||||
zIndex={10}
|
||||
w={'420px'}
|
||||
maxH={'100%'}
|
||||
minH={'300px'}
|
||||
maxH={'100%'}
|
||||
border={'base'}
|
||||
>
|
||||
{/* Status header */}
|
||||
@@ -614,7 +614,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
|
||||
)}
|
||||
</Flex>
|
||||
{/* Show result */}
|
||||
<Box maxH={'calc(100%-54px)'} overflow={'auto'}>
|
||||
<Box overflowY={'auto'}>
|
||||
{!debugResult.message && !response && (
|
||||
<EmptyTip text={t('common:core.workflow.debug.Not result')} pt={2} pb={5} />
|
||||
)}
|
||||
@@ -623,7 +623,9 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
|
||||
{debugResult.message}
|
||||
</Box>
|
||||
)}
|
||||
{response && <ResponseBox response={[response]} showDetail hideTabs />}
|
||||
{response && (
|
||||
<ResponseBox useMobile={true} response={[response]} showDetail hideTabs />
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
@@ -174,7 +174,7 @@ const MobileDrawer = ({
|
||||
onClick: () => onclickApp(item._id)
|
||||
})}
|
||||
>
|
||||
<Avatar src={item.avatar} w={'24px'} />
|
||||
<Avatar src={item.avatar} w={'24px'} borderRadius={'sm'} />
|
||||
<Box ml={2} className={'textEllipsis'}>
|
||||
{item.name}
|
||||
</Box>
|
||||
@@ -223,7 +223,7 @@ const MobileHeader = ({
|
||||
)}
|
||||
<Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
|
||||
<Flex alignItems={'center'} onClick={toggleDrawer}>
|
||||
<Avatar src={avatar} w={'1rem'} />
|
||||
<Avatar borderRadius={'sm'} src={avatar} w={'1rem'} />
|
||||
<Box ml={1} className="textEllipsis">
|
||||
{name}
|
||||
</Box>
|
||||
|
||||
@@ -27,7 +27,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => {
|
||||
<PluginRunBox {...props} tab={PluginRunBoxTabEnum.input} />
|
||||
</Box>
|
||||
<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>
|
||||
list={[
|
||||
{ label: t('common:common.Output'), value: PluginRunBoxTabEnum.output },
|
||||
@@ -61,7 +61,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => {
|
||||
py={0}
|
||||
fontSize={'sm'}
|
||||
/>
|
||||
<Box mt={3} flex={'1 0 0'} w={'100%'}>
|
||||
<Box flex={'1 0 0'} w={'100%'}>
|
||||
<PluginRunBox {...props} />
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user