gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4.8.13 test (#3085)

Browse Source 
* perf: workflow node ui

* chat iframe url
This commit is contained in:
Archer
2024-11-07 12:03:21 +08:00
committed by archer
parent f58dba2eda
commit 45aa2e7374
18 changed files with 108 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
projects/app/src/components/Markdown/codeBlock/Iframe.tsx
View File

@@ -1,16 +1,19 @@
import React, { useEffect, useRef, useCallback, useState } from 'react';
import React from 'react';
import { Box } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useMarkdownWidth } from '../hooks';
const MermaidBlock = ({ code }: { code: string }) => {
const IframeBlock = ({ code }: { code: string }) => {
const { width, Ref } = useMarkdownWidth();
return (
<Box w={'100%'}>
<Box w={width} ref={Ref}>
<iframe
src={code}
sandbox="allow-scripts allow-forms allow-popups allow-downloads allow-presentation allow-storage-access-by-user-activation"
referrerPolicy="no-referrer"
style={{
width: '100%',
height: '100%',
minHeight: '40vh',
minHeight: '70vh',
border: 'none'
}}
/>
@@ -18,4 +21,4 @@ const MermaidBlock = ({ code }: { code: string }) => {
);
};
export default MermaidBlock;
export default IframeBlock;

25
projects/app/src/components/Markdown/codeBlock/iframe-html.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React, { useEffect, useRef, useCallback, useState } from 'react';
import { Box } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useMarkdownWidth } from '../hooks';
const MermaidBlock = ({ code }: { code: string }) => {
const { width, Ref } = useMarkdownWidth();
return (
<Box w={width} ref={Ref}>
<iframe
src={code}
sandbox="allow-scripts allow-forms allow-popups allow-downloads allow-presentation allow-storage-access-by-user-activation"
referrerPolicy="no-referrer"
style={{
width: '100%',
height: '100%',
minHeight: '70vh',
border: 'none'
}}
/>
</Box>
);
};
export default MermaidBlock;

34
projects/app/src/components/Markdown/hooks.ts Normal file
View File

@@ -0,0 +1,34 @@
import { useScreen } from '@fastgpt/web/hooks/useScreen';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { useCallback, useEffect, useRef, useState } from 'react';
export const useMarkdownWidth = () => {
const Ref = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(400);
const { screenWidth } = useScreen();
const { isPc } = useSystem();
const findMarkdownDom = useCallback(() => {
if (!Ref.current) return;
// 一直找到 parent = markdown 的元素
let parent = Ref.current?.parentElement;
while (parent && !parent.className.includes('chat-box-card')) {
parent = parent.parentElement;
}
const ChatItemDom = parent?.parentElement;
const clientWidth = ChatItemDom?.clientWidth ? ChatItemDom.clientWidth - (isPc ? 90 : 60) : 500;
setWidth(clientWidth);
return parent?.parentElement;
}, [isPc]);
useEffect(() => {
findMarkdownDom();
}, [findMarkdownDom, screenWidth, Ref.current]);
return {
Ref,
width
};
};

6
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx
View File

@@ -157,10 +157,10 @@ const ButtonEdge = (props: EdgeProps) => {
position={'absolute'}
transform={`translate(-55%, -50%) translate(${labelX}px,${labelY}px)`}
pointerEvents={'all'}
w={'17px'}
h={'17px'}
w={'18px'}
h={'18px'}
bg={'white'}
borderRadius={'17px'}
borderRadius={'18px'}
cursor={'pointer'}
zIndex={defaultZIndex + 1000}
onClick={() => onDelConnect(id)}

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx
View File

@@ -6,7 +6,7 @@ const Container = ({ children, ...props }: BoxProps) => {
return (
<Flex
flexDirection={'column'}
mx={4}
mx={3}
p={4}
position={'relative'}
bg={'myGray.50'}

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeAnswer.tsx
View File

@@ -16,7 +16,7 @@ const NodeAnswer = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { isTool, commonInputs } = splitToolInputs(inputs, nodeId);
return (
<NodeCard minW={'400px'} selected={selected} {...data}>
<NodeCard selected={selected} {...data}>
<Container>
{isTool && (
<>

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx
View File

@@ -99,7 +99,7 @@ const NodeCQNode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
nodeId={nodeId}
handleId={getHandleId(nodeId, 'source', item.key)}
position={Position.Right}
translate={[36, 0]}
translate={[34, 0]}
/>
</Box>
</Box>

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
View File

@@ -266,7 +266,7 @@ const ListItem = ({
nodeId={nodeId}
handleId={handleId}
position={Position.Right}
translate={[3, 0]}
translate={[5, 0]}
/>
)}
</Flex>

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx
View File

@@ -98,7 +98,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
nodeId={nodeId}
handleId={elseHandleId}
position={Position.Right}
translate={[20, 0]}
translate={[18, 0]}
/>
</Flex>
</Container>

1
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx
View File

@@ -52,7 +52,6 @@ const NodeUserGuide = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
return (
<>
<NodeCard
minW={'420px'}
selected={selected}
menuForbid={{
debug: true,

5
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx
View File

@@ -63,9 +63,8 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
{t('common:option') + (i + 1)}
</Box>
</HStack>
<Box position={'relative'}>
<Box position={'relative'} mt={1}>
<Input
mt={1}
defaultValue={item.value}
bg={'white'}
fontSize={'sm'}
@@ -94,7 +93,7 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
nodeId={nodeId}
handleId={getHandleId(nodeId, 'source', item.key)}
position={Position.Right}
translate={[26, 0]}
translate={[34, 0]}
/>
</Box>
</Box>

1
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx
View File

@@ -65,7 +65,6 @@ const NodeStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const Render = useMemo(() => {
return (
<NodeCard
minW={'420px'}
selected={selected}
menuForbid={{
copy: true,

16
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx
View File

@@ -52,7 +52,7 @@ export const ConnectionSourceHandle = ({
nodeId={nodeId}
handleId={handleId}
position={Position.Right}
translate={[2, 0]}
translate={[4, 0]}
/>
);
})();
@@ -69,7 +69,7 @@ export const ConnectionSourceHandle = ({
nodeId={nodeId}
handleId={handleId}
position={Position.Left}
translate={[-6, 0]}
translate={[-8, 0]}
/>
);
})();
@@ -92,7 +92,7 @@ export const ConnectionSourceHandle = ({
nodeId={nodeId}
handleId={handleId}
position={Position.Top}
translate={[0, -2]}
translate={[0, -5]}
/>
);
})();
@@ -108,7 +108,7 @@ export const ConnectionSourceHandle = ({
nodeId={nodeId}
handleId={handleId}
position={Position.Bottom}
translate={[0, 2]}
translate={[0, 5]}
/>
);
})();
@@ -194,7 +194,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
nodeId={nodeId}
handleId={handleId}
position={Position.Left}
translate={[-2, 0]}
translate={[-4, 0]}
showHandle={showHandle}
/>
);
@@ -209,7 +209,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
nodeId={nodeId}
handleId={handleId}
position={Position.Right}
translate={[2, 0]}
translate={[4, 0]}
showHandle={showHandle}
/>
);
@@ -224,7 +224,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
nodeId={nodeId}
handleId={handleId}
position={Position.Top}
translate={[0, -2]}
translate={[0, -5]}
showHandle={showHandle}
/>
);
@@ -239,7 +239,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
nodeId={nodeId}
handleId={handleId}
position={Position.Bottom}
translate={[0, 2]}
translate={[0, 5]}
showHandle={showHandle}
/>
);

10
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx
View File

@@ -112,7 +112,15 @@ const MySourceHandle = React.memo(function MySourceHandle({
position={position}
isConnectableEnd={false}
>
{showAddIcon && <MyIcon name={'edgeAdd'} pointerEvents={'none'} />}
{showAddIcon && (
<MyIcon
name={'edgeAdd'}
color={'primary.500'}
pointerEvents={'none'}
w={'14px'}
h={'14px'}
/>
)}
</Handle>
);
}, [handleId, position, showAddIcon, styles, transform]);

12
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx
View File

@@ -1,8 +1,8 @@
export const primaryColor = '#487FFF';
export const lowPrimaryColor = '#94B5FF';
export const handleSize = {
width: '18px',
height: '18px'
width: '20px',
height: '20px'
};
export const sourceCommonStyle = {
@@ -12,16 +12,16 @@ export const sourceCommonStyle = {
};
export const handleConnectedStyle = {
borderColor: lowPrimaryColor,
width: '14px',
height: '14px'
width: '16px',
height: '16px'
};
export const handleHighLightStyle = {
borderColor: primaryColor,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '18px',
height: '18px'
width: '20px',
height: '20px'
};
export default function Dom() {

6
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
View File

@@ -150,7 +150,7 @@ const NodeCard = (props: Props) => {
<Box position={'relative'}>
{/* debug */}
{showHeader && (
<Box px={4} pt={4}>
<Box px={3} pt={4}>
{/* tool target handle */}
<ToolTargetHandle show={showToolHandle} nodeId={nodeId} />
@@ -667,7 +667,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
return !!debugResult && !!statusData ? (
<>
<Flex px={4} bg={statusData.bg} borderTopRadius={'md'} py={3}>
<Flex px={3} bg={statusData.bg} borderTopRadius={'md'} py={3}>
<MyIcon name={statusData.icon as any} w={'16px'} mr={2} />
<Box color={'myGray.900'} fontWeight={'bold'} flex={'1 0 0'}>
{statusData.text}
@@ -708,7 +708,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
border={'base'}
>
{/* Status header */}
<Flex h={'54x'} px={4} py={3} alignItems={'center'}>
<Flex h={'54x'} px={3} py={3} alignItems={'center'}>
<MyIcon mr={1} name={'core/workflow/debugResult'} w={'20px'} color={'primary.600'} />
<Box fontWeight={'bold'} flex={'1'}>
{t('common:core.workflow.debug.Run result')}

4
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/Label.tsx
View File

@@ -1,5 +1,5 @@
import { FlowNodeOutputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import React, { useMemo } from 'react';
import React from 'react';
import { useTranslation } from 'next-i18next';
import { Box, Flex } from '@chakra-ui/react';
import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
@@ -41,7 +41,7 @@ const OutputLabel = ({ nodeId, output }: { nodeId: string; output: FlowNodeOutpu
<SourceHandle
nodeId={nodeId}
handleId={getHandleId(nodeId, 'source', output.key)}
translate={[26, 0]}
translate={[34, 0]}
position={Position.Right}
/>
)}