Sandbox (#1610) (#1611)

projects/app/src/components/core/workflow/Flow/index.tsx

@@ -58,7 +58,8 @@ const nodeTypes: Record<FlowNodeTypeEnum, any> = {
   ),
   [FlowNodeTypeEnum.lafModule]: dynamic(() => import('./nodes/NodeLaf')),
   [FlowNodeTypeEnum.ifElseNode]: dynamic(() => import('./nodes/NodeIfElse')),
-  [FlowNodeTypeEnum.variableUpdate]: dynamic(() => import('./nodes/NodeVariableUpdate'))
+  [FlowNodeTypeEnum.variableUpdate]: dynamic(() => import('./nodes/NodeVariableUpdate')),
+  [FlowNodeTypeEnum.code]: dynamic(() => import('./nodes/NodeCode'))
 };
 const edgeTypes = {
   [EDGE_TYPE]: ButtonEdge

projects/app/src/components/core/workflow/Flow/nodes/NodeCode.tsx

@@ -0,0 +1,107 @@
+import React, { useCallback, useMemo } from 'react';
+import { NodeProps } from 'reactflow';
+import NodeCard from './render/NodeCard';
+import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
+import Container from '../components/Container';
+import RenderInput from './render/RenderInput';
+import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
+import { useTranslation } from 'next-i18next';
+import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
+import { useContextSelector } from 'use-context-selector';
+import { WorkflowContext } from '../../context';
+import IOTitle from '../components/IOTitle';
+import RenderToolInput from './render/RenderToolInput';
+import RenderOutput from './render/RenderOutput';
+import CodeEditor from '@fastgpt/web/components/common/Textarea/CodeEditor';
+import { Box, Flex } from '@chakra-ui/react';
+import { useI18n } from '@/web/context/I18n';
+import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
+import { JS_TEMPLATE } from '@fastgpt/global/core/workflow/template/system/sandbox/constants';
+
+const NodeCode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
+  const { t } = useTranslation();
+  const { workflowT } = useI18n();
+  const { nodeId, inputs, outputs } = data;
+  const splitToolInputs = useContextSelector(WorkflowContext, (ctx) => ctx.splitToolInputs);
+  const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
+  const { toolInputs, commonInputs } = splitToolInputs(inputs, nodeId);
+  const { ConfirmModal, openConfirm } = useConfirm({
+    content: workflowT('code.Reset template confirm')
+  });
+
+  const CustomComponent = useMemo(
+    () => ({
+      [NodeInputKeyEnum.code]: (item: FlowNodeInputItemType) => {
+        return (
+          <Box>
+            <Flex mb={1} alignItems={'flex-end'}>
+              <Box flex={'1'}>{workflowT('Code')}</Box>
+              <Box
+                cursor={'pointer'}
+                color={'primary.500'}
+                fontSize={'xs'}
+                onClick={openConfirm(() => {
+                  onChangeNode({
+                    nodeId,
+                    type: 'updateInput',
+                    key: item.key,
+                    value: {
+                      ...item,
+                      value: JS_TEMPLATE
+                    }
+                  });
+                })}
+              >
+                {workflowT('code.Reset template')}
+              </Box>
+            </Flex>
+            <CodeEditor
+              bg={'white'}
+              borderRadius={'sm'}
+              value={item.value}
+              onChange={(e) => {
+                onChangeNode({
+                  nodeId,
+                  type: 'updateInput',
+                  key: item.key,
+                  value: {
+                    ...item,
+                    value: e
+                  }
+                });
+              }}
+            />
+          </Box>
+        );
+      }
+    }),
+    [nodeId, onChangeNode, openConfirm, workflowT]
+  );
+
+  return (
+    <NodeCard minW={'400px'} selected={selected} {...data}>
+      {toolInputs.length > 0 && (
+        <>
+          <Container>
+            <IOTitle text={t('core.module.tool.Tool input')} />
+            <RenderToolInput nodeId={nodeId} inputs={toolInputs} />
+          </Container>
+        </>
+      )}
+      <Container>
+        <IOTitle text={t('common.Input')} />
+        <RenderInput
+          nodeId={nodeId}
+          flowInputList={commonInputs}
+          CustomComponent={CustomComponent}
+        />
+      </Container>
+      <Container>
+        <IOTitle text={t('common.Output')} />
+        <RenderOutput nodeId={nodeId} flowOutputList={outputs} />
+      </Container>
+      <ConfirmModal />
+    </NodeCard>
+  );
+};
+export default React.memo(NodeCode);

projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/AddInputParam.tsx

@@ -72,7 +72,6 @@ const AddInputParam = (props: RenderInputProps) => {
             leftIcon={<SmallAddIcon />}
             iconSpacing={1}
             size={'sm'}
-            mr={'-5px'}
             onClick={() => setEditField(item.dynamicParamDefaultValue ?? {})}
           >
             {t('common.Add New')}

projects/app/src/components/core/workflow/Flow/nodes/render/RenderOutput/index.tsx

@@ -13,6 +13,7 @@ import { FlowValueTypeMap } from '@/web/core/workflow/constants/dataType';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '@/components/core/workflow/context';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 const RenderList: {
   types: `${FlowNodeOutputTypeEnum}`[];
@@ -61,6 +62,7 @@ const RenderOutput = ({
           <Box position={'relative'} fontWeight={'medium'}>
             {t('core.workflow.Custom outputs')}
           </Box>
+          <QuestionTip ml={1} label={addOutput.description} />
           <Box flex={'1 0 0'} />
           <Button
             variant={'whitePrimary'}