Python Sandbox (#4380)

* Python3 Sandbox (#3944)

* update python box (#4251)

* update python box

* Adjust the height of the NodeCode border.

* update python sandbox and add test systemcall bash

* update sandbox

* add VERSION_RELEASE (#4376)

* save empty docx

* fix pythonbox log error

* fix: js template

---------

Co-authored-by: dogfar <37035781+dogfar@users.noreply.github.com>
Co-authored-by: gggaaallleee <91131304+gggaaallleee@users.noreply.github.com>
Co-authored-by: gggaaallleee <1293587368@qq.com>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeCode.tsx

@@ -15,38 +15,89 @@ import RenderOutput from './render/RenderOutput';
 import CodeEditor from '@fastgpt/web/components/common/Textarea/CodeEditor';
 import { Box, Flex } from '@chakra-ui/react';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { JS_TEMPLATE } from '@fastgpt/global/core/workflow/template/system/sandbox/constants';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import {
+  JS_TEMPLATE,
+  PY_TEMPLATE,
+  SandboxCodeTypeEnum,
+  SNADBOX_CODE_TEMPLATE
+} from '@fastgpt/global/core/workflow/template/system/sandbox/constants';
+import MySelect from '@fastgpt/web/components/common/MySelect';
 
 const NodeCode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
   const { t } = useTranslation();
   const { nodeId, inputs, outputs } = data;
 
+  const codeType = inputs.find(
+    (item) => item.key === NodeInputKeyEnum.codeType
+  ) as FlowNodeInputItemType;
+
   const splitToolInputs = useContextSelector(WorkflowContext, (ctx) => ctx.splitToolInputs);
   const onChangeNode = useContextSelector(WorkflowContext, (ctx) => ctx.onChangeNode);
 
-  const { ConfirmModal, openConfirm } = useConfirm({
+  // 重置模板确认
+  const { ConfirmModal: ResetTemplateConfirm, openConfirm: openResetTemplateConfirm } = useConfirm({
     content: t('workflow:code.Reset template confirm')
   });
 
+  // 切换语言确认
+  const { ConfirmModal: SwitchLangConfirm, openConfirm: openSwitchLangConfirm } = useConfirm({
+    content: t('workflow:code.Switch language confirm')
+  });
+
   const CustomComponent = useMemo(() => {
     return {
       [NodeInputKeyEnum.code]: (item: FlowNodeInputItemType) => {
         return (
-          <Box mt={-3}>
-            <Flex mb={2} alignItems={'flex-end'}>
-              <Box flex={'1'}>{'Javascript ' + t('workflow:Code')}</Box>
+          <Box mt={-4}>
+            <Flex mb={2} alignItems={'center'} className="nodrag">
+              <MySelect<SandboxCodeTypeEnum>
+                fontSize="xs"
+                size="sm"
+                list={[
+                  { label: 'JavaScript', value: SandboxCodeTypeEnum.js },
+                  { label: 'Python 3', value: SandboxCodeTypeEnum.py }
+                ]}
+                value={codeType?.value}
+                onChange={(newLang) => {
+                  console.log(newLang);
+                  openSwitchLangConfirm(() => {
+                    onChangeNode({
+                      nodeId,
+                      type: 'updateInput',
+                      key: NodeInputKeyEnum.codeType,
+                      value: { ...codeType, value: newLang }
+                    });
+
+                    onChangeNode({
+                      nodeId,
+                      type: 'updateInput',
+                      key: item.key,
+                      value: {
+                        ...item,
+                        value: SNADBOX_CODE_TEMPLATE[newLang]
+                      }
+                    });
+                  })();
+                }}
+              />
+              {codeType.value === 'py' && (
+                <QuestionTip ml={2} label={t('workflow:support_code_language')} />
+              )}
               <Box
                 cursor={'pointer'}
                 color={'primary.500'}
                 fontSize={'xs'}
-                onClick={openConfirm(() => {
+                ml="auto"
+                mr={2}
+                onClick={openResetTemplateConfirm(() => {
                   onChangeNode({
                     nodeId,
                     type: 'updateInput',
                     key: item.key,
                     value: {
                       ...item,
-                      value: JS_TEMPLATE
+                      value: codeType.value === 'js' ? JS_TEMPLATE : PY_TEMPLATE
                     }
                   });
                 })}
@@ -63,29 +114,25 @@ const NodeCode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                   nodeId,
                   type: 'updateInput',
                   key: item.key,
-                  value: {
-                    ...item,
-                    value: e
-                  }
+                  value: { ...item, value: e }
                 });
               }}
+              language={codeType.value}
             />
           </Box>
         );
       }
     };
-  }, [nodeId, onChangeNode, openConfirm, t]);
+  }, [codeType, nodeId, onChangeNode, openResetTemplateConfirm, openSwitchLangConfirm, t]);
 
   const { isTool, commonInputs } = splitToolInputs(inputs, nodeId);
 
   return (
     <NodeCard minW={'400px'} selected={selected} {...data}>
       {isTool && (
-        <>
-          <Container>
-            <RenderToolInput nodeId={nodeId} inputs={inputs} />
-          </Container>
-        </>
+        <Container>
+          <RenderToolInput nodeId={nodeId} inputs={inputs} />
+        </Container>
       )}
       <Container>
         <IOTitle text={t('common:common.Input')} mb={-1} />
@@ -99,7 +146,8 @@ const NodeCode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
         <IOTitle text={t('common:common.Output')} />
         <RenderOutput nodeId={nodeId} flowOutputList={outputs} />
       </Container>
-      <ConfirmModal />
+      <ResetTemplateConfirm />
+      <SwitchLangConfirm />
     </NodeCard>
   );
 };