4.8.13 test (#3085)

* perf: workflow node ui

* chat iframe url

packages/web/components/common/Icon/icons/edgeAdd.svg

@@ -1,3 +1,3 @@
-<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg  viewBox="0 0 10 9"  xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09993 1.21182C6.09993 0.604303 5.60744 0.111816 4.99993 0.111816C4.39242 0.111816 3.89993 0.604303 3.89993 1.21182L3.89993 3.11182H1.9999C1.39239 3.11182 0.899902 3.6043 0.899902 4.21182C0.899902 4.81933 1.39239 5.31182 1.9999 5.31182H3.89993L3.89993 7.21182C3.89993 7.81933 4.39242 8.31182 4.99993 8.31182C5.60744 8.31182 6.09993 7.81933 6.09993 7.21182V5.31182H7.9999C8.60742 5.31182 9.0999 4.81933 9.0999 4.21182C9.0999 3.6043 8.60742 3.11182 7.9999 3.11182H6.09993V1.21182Z" fill="#487FFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09993 1.21182C6.09993 0.604303 5.60744 0.111816 4.99993 0.111816C4.39242 0.111816 3.89993 0.604303 3.89993 1.21182L3.89993 3.11182H1.9999C1.39239 3.11182 0.899902 3.6043 0.899902 4.21182C0.899902 4.81933 1.39239 5.31182 1.9999 5.31182H3.89993L3.89993 7.21182C3.89993 7.81933 4.39242 8.31182 4.99993 8.31182C5.60744 8.31182 6.09993 7.81933 6.09993 7.21182V5.31182H7.9999C8.60742 5.31182 9.0999 4.81933 9.0999 4.21182C9.0999 3.6043 8.60742 3.11182 7.9999 3.11182H6.09993V1.21182Z" />
 </svg>

projects/app/src/components/Markdown/codeBlock/Iframe.tsx

@@ -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;

projects/app/src/components/Markdown/codeBlock/iframe-html.tsx

@@ -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;

projects/app/src/components/Markdown/hooks.ts

@@ -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
+  };
+};

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

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

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

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

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

@@ -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 && (
             <>

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

@@ -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>

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

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

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

@@ -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>

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

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

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

@@ -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>

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

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

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

@@ -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}
         />
       );

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

@@ -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]);

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

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

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

@@ -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')}

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

@@ -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}
         />
       )}