v4.1 (#183)

* chat item table

* perf: chat item save

* docs

* limit

* docs

* docs

* perf: node card

* docs

* docs

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeAnswer.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import { NodeProps } from 'reactflow';
 import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Divider from '../modules/Divider';
 import Container from '../modules/Container';
 import RenderInput from '../render/RenderInput';
 
-const NodeAnswer = ({
-  data: { moduleId, inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { moduleId, inputs, outputs, onChangeNode } = data;
   return (
-    <NodeCard minW={'400px'} moduleId={moduleId} {...props}>
+    <NodeCard minW={'400px'} {...data}>
       <Container borderTop={'2px solid'} borderTopColor={'myGray.200'}>
         <RenderInput moduleId={moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
       </Container>

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeCQNode.tsx

@@ -13,11 +13,10 @@ import MyIcon from '@/components/Icon';
 import { FlowOutputItemTypeEnum, FlowValueTypeEnum, SpecialInputKeyEnum } from '@/constants/flow';
 import SourceHandle from '../render/SourceHandle';
 
-const NodeCQNode = ({
-  data: { moduleId, inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeCQNode = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { moduleId, inputs, outputs, onChangeNode } = data;
   return (
-    <NodeCard minW={'400px'} moduleId={moduleId} {...props}>
+    <NodeCard minW={'400px'} {...data}>
       <Divider text="Input" />
       <Container>
         <RenderInput

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeChat.tsx

@@ -13,16 +13,15 @@ import MySlider from '@/components/Slider';
 import { Box } from '@chakra-ui/react';
 import { formatPrice } from '@/utils/user';
 
-const NodeChat = ({
-  data: { moduleId, inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeChat = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { moduleId, inputs, outputs, onChangeNode } = data;
   const outputsLen = useMemo(
     () => outputs.filter((item) => item.type !== FlowOutputItemTypeEnum.hidden).length,
     [outputs]
   );
 
   return (
-    <NodeCard minW={'400px'} moduleId={moduleId} {...props}>
+    <NodeCard minW={'400px'} {...data}>
       <Divider text="Input" />
       <Container>
         <RenderInput

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeEmpty.tsx

@@ -3,7 +3,7 @@ import { NodeProps } from 'reactflow';
 import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
 
-const NodeAnswer = ({ data: { ...props } }: NodeProps<FlowModuleItemType>) => {
-  return <NodeCard {...props}></NodeCard>;
+const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
+  return <NodeCard {...data}></NodeCard>;
 };
 export default React.memo(NodeAnswer);

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeExtract.tsx

@@ -15,14 +15,13 @@ import ExtractFieldModal from '../modules/ExtractFieldModal';
 import { ContextExtractEnum } from '@/constants/flow/flowField';
 import { FlowOutputItemTypeEnum, FlowValueTypeEnum } from '@/constants/flow';
 
-const NodeExtract = ({
-  data: { inputs, outputs, moduleId, onChangeNode, onDelEdge, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { inputs, outputs, moduleId, onChangeNode, onDelEdge } = data;
   const { t } = useTranslation();
   const [editExtractFiled, setEditExtractField] = useState<ContextExtractAgentItemType>();
 
   return (
-    <NodeCard minW={'400px'} moduleId={moduleId} {...props}>
+    <NodeCard minW={'400px'} {...data}>
       <Divider text="Input" />
       <Container>
         <RenderInput

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeHistory.tsx

@@ -7,22 +7,17 @@ import Container from '../modules/Container';
 import RenderInput from '../render/RenderInput';
 import RenderOutput from '../render/RenderOutput';
 
-const NodeHistory = ({
-  data: { inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeHistory = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { inputs, outputs, moduleId, onChangeNode } = data;
   return (
-    <NodeCard minW={'300px'} {...props}>
+    <NodeCard minW={'300px'} {...data}>
       <Divider text="Input" />
       <Container>
-        <RenderInput moduleId={props.moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
+        <RenderInput moduleId={moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
       </Container>
       <Divider text="Output" />
       <Container>
-        <RenderOutput
-          onChangeNode={onChangeNode}
-          moduleId={props.moduleId}
-          flowOutputList={outputs}
-        />
+        <RenderOutput onChangeNode={onChangeNode} moduleId={moduleId} flowOutputList={outputs} />
       </Container>
     </NodeCard>
   );

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeHttp.tsx

@@ -13,11 +13,10 @@ import { FlowInputItemTypeEnum, FlowOutputItemTypeEnum, FlowValueTypeEnum } from
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
 
-const NodeHttp = ({
-  data: { moduleId, inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeHttp = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { moduleId, inputs, outputs, onChangeNode } = data;
   return (
-    <NodeCard minW={'350px'} moduleId={moduleId} {...props}>
+    <NodeCard minW={'350px'} {...data}>
       <Container borderTop={'2px solid'} borderTopColor={'myGray.200'}>
         <RenderInput moduleId={moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
         <Button

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeKbSearch.tsx

@@ -69,11 +69,10 @@ const KBSelect = ({
   );
 };
 
-const NodeKbSearch = ({
-  data: { moduleId, inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeKbSearch = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { moduleId, inputs, outputs, onChangeNode } = data;
   return (
-    <NodeCard minW={'400px'} moduleId={moduleId} {...props}>
+    <NodeCard minW={'400px'} {...data}>
       <Divider text="Input" />
       <Container>
         <RenderInput

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeQuestionInput.tsx

@@ -8,11 +8,9 @@ import { SystemInputEnum } from '@/constants/app';
 import { FlowValueTypeEnum } from '@/constants/flow';
 import SourceHandle from '../render/SourceHandle';
 
-const QuestionInputNode = ({
-  data: { inputs, outputs, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const QuestionInputNode = ({ data }: NodeProps<FlowModuleItemType>) => {
   return (
-    <NodeCard minW={'240px'} {...props}>
+    <NodeCard minW={'240px'} {...data}>
       <Container borderTop={'2px solid'} borderTopColor={'myGray.200'} textAlign={'end'}>
         <Box position={'relative'}>
           用户问题

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeTFSwitch.tsx

@@ -8,9 +8,9 @@ import Divider from '../modules/Divider';
 import Container from '../modules/Container';
 import Label from '../modules/Label';
 
-const NodeTFSwitch = ({ data: { inputs, outputs, ...props } }: NodeProps<FlowModuleItemType>) => {
+const NodeTFSwitch = ({ data }: NodeProps<FlowModuleItemType>) => {
   return (
-    <NodeCard minW={'220px'} {...props}>
+    <NodeCard minW={'220px'} {...data}>
       <Divider text="输入输出" />
       <Container h={'100px'} py={0} px={0} display={'flex'} alignItems={'center'}>
         <Box flex={1} pl={'12px'}>

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeUserGuide.tsx

@@ -10,9 +10,8 @@ import MyIcon from '@/components/Icon';
 import MyTooltip from '@/components/MyTooltip';
 import { welcomeTextTip } from '@/constants/flow/ModuleTemplate';
 
-const NodeUserGuide = ({
-  data: { inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeUserGuide = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { inputs, moduleId, onChangeNode } = data;
   const welcomeText = useMemo(
     () => inputs.find((item) => item.key === SystemInputEnum.welcomeText),
     [inputs]
@@ -20,7 +19,7 @@ const NodeUserGuide = ({
 
   return (
     <>
-      <NodeCard minW={'300px'} {...props}>
+      <NodeCard minW={'300px'} {...data}>
         <Container borderTop={'2px solid'} borderTopColor={'myGray.200'}>
           <>
             <Flex mb={1} alignItems={'center'}>
@@ -40,7 +39,7 @@ const NodeUserGuide = ({
                 placeholder={welcomeTextTip}
                 onChange={(e) => {
                   onChangeNode({
-                    moduleId: props.moduleId,
+                    moduleId,
                     key: SystemInputEnum.welcomeText,
                     type: 'inputs',
                     value: {

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeVariable.tsx

@@ -22,9 +22,8 @@ export const defaultVariable: VariableItemType = {
   enums: [{ value: '' }]
 };
 
-const NodeUserGuide = ({
-  data: { inputs, outputs, onChangeNode, ...props }
-}: NodeProps<FlowModuleItemType>) => {
+const NodeUserGuide = ({ data }: NodeProps<FlowModuleItemType>) => {
+  const { inputs, moduleId, onChangeNode } = data;
   const variables = useMemo(
     () =>
       (inputs.find((item) => item.key === SystemInputEnum.variables)
@@ -37,7 +36,7 @@ const NodeUserGuide = ({
   const updateVariables = useCallback(
     (value: VariableItemType[]) => {
       onChangeNode({
-        moduleId: props.moduleId,
+        moduleId,
         key: SystemInputEnum.variables,
         type: 'inputs',
         value: {
@@ -46,7 +45,7 @@ const NodeUserGuide = ({
         }
       });
     },
-    [inputs, onChangeNode, props.moduleId]
+    [inputs, onChangeNode, moduleId]
   );
 
   const onclickSubmit = useCallback(
@@ -59,7 +58,7 @@ const NodeUserGuide = ({
 
   return (
     <>
-      <NodeCard minW={'300px'} {...props}>
+      <NodeCard minW={'300px'} {...data}>
         <Container borderTop={'2px solid'} borderTopColor={'myGray.200'}>
           <TableContainer>
             <Table>

client/src/pages/app/detail/components/AdEdit/components/modules/NodeCard.tsx

@@ -6,29 +6,25 @@ import type { FlowModuleItemType } from '@/types/flow';
 import MyTooltip from '@/components/MyTooltip';
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
+import { useCopyData } from '@/utils/tools';
 
-type Props = {
+type Props = FlowModuleItemType & {
   children?: React.ReactNode | React.ReactNode[] | string;
-  logo: string;
-  name: string;
-  description?: string;
-  intro: string;
   minW?: string | number;
-  moduleId: string;
-  onDelNode: FlowModuleItemType['onDelNode'];
-  onCopyNode: FlowModuleItemType['onCopyNode'];
 };
 
-const NodeCard = ({
-  children,
-  logo = '/icon/logo.svg',
-  name = '未知模块',
-  description,
-  minW = '300px',
-  onCopyNode,
-  onDelNode,
-  moduleId
-}: Props) => {
+const NodeCard = (props: Props) => {
+  const {
+    children,
+    logo = '/icon/logo.svg',
+    name = '未知模块',
+    description,
+    minW = '300px',
+    onCopyNode,
+    onDelNode,
+    moduleId
+  } = props;
+  const { copyData } = useCopyData();
   const { t } = useTranslation();
   const theme = useTheme();
 
@@ -39,16 +35,22 @@ const NodeCard = ({
         label: t('common.Copy'),
         onClick: () => onCopyNode(moduleId)
       },
+      // {
+      //   icon: 'settingLight',
+      //   label: t('app.Copy Module Config'),
+      //   onClick: () => {
+      //     const copyProps = { ...props };
+      //     delete copyProps.children;
+      //     delete copyProps.children;
+      //     console.log(copyProps);
+      //   }
+      // },
       {
         icon: 'delete',
         label: t('common.Delete'),
         onClick: () => onDelNode(moduleId)
       },
-      // {
-      //   icon: 'collectionLight',
-      //   label: t('common.Collect'),
-      //   onClick: () => {}
-      // },
+
       {
         icon: 'back',
         label: t('common.Cancel'),