feat: add atom components to flow (upload、codeEditor)

web/app/i18n.ts

@@ -2,6 +2,9 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 const en = {
+  UploadData: 'Upload Data',
+  CodeEditor: 'Code Editor:',
+  openCodeEditor:'Open Code Editor',
   Knowledge_Space: 'Knowledge',
   space: 'space',
   Vector: 'Vector',
@@ -234,6 +237,9 @@ export interface Resources {
 }
 
 const zh: Resources['translation'] = {
+  UploadData: '上传数据',
+  CodeEditor: '代码编辑:',
+  openCodeEditor: '打开代码编辑器',
   Knowledge_Space: '知识库',
   space: '知识库',
   Vector: '向量',

web/components/flow/node-param-handler.tsx

@@ -15,8 +15,9 @@ import {
   RenderTreeSelect,
   RenderTimePicker,
   RenderTextArea,
+  RenderUpload,
+  RenderCodeEditor,
 } from './node-renderer';
-import { convertKeysToCamelCase } from '@/utils/flow';
 
 interface NodeParamHandlerProps {
   node: IFlowNode;
@@ -139,6 +140,10 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
         return <RenderTimePicker {...props} />;
       case 'tree_select':
         return <RenderTreeSelect {...props} />;
+      case 'upload':
+        return <RenderUpload {...props} />;
+      case 'code_editor':
+        return <RenderCodeEditor {...props} />;
       default:
         return null;
     }

web/components/flow/node-renderer/codeEditor.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useMemo } from 'react';
+import { Button, Modal } from 'antd';
+import Editor from '@monaco-editor/react';
+import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderCodeEditor = (params: Props) => {
+  const { t } = useTranslation();
+
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+  /**
+   * 设置弹窗宽度
+   */
+  const modalWidth = useMemo(() => {
+    if (data?.ui?.editor?.width) {
+      return data?.ui?.editor?.width + 100
+    }
+    return '80%';
+  }, [data?.ui?.editor?.width]);
+
+  return (
+    <div style={{ textAlign: 'center' }} className="p-2 text-sm">
+      <Button type="primary" onClick={showModal}>
+        {t('openCodeEditor')}
+      </Button>
+      <Modal title={t('openCodeEditor')} width={modalWidth} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+        <Editor
+          {...data?.ui?.attr}
+          width={data?.ui?.editor?.width || '100%'}
+          value={defaultValue}
+          style={{ padding: '10px' }}
+          height={data?.ui?.editor?.height || 200}
+          defaultLanguage={data?.ui?.language}
+          onChange={onChange}
+          theme='vs-dark' 
+          options={{
+            minimap: {
+              enabled: false,
+            },
+            wordWrap: 'on',
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};

web/components/flow/node-renderer/index.ts

@@ -8,3 +8,5 @@ export * from './textarea';
 export * from './slider';
 export * from './time-picker';
 export * from './tree-select';
+export * from './codeEditor';
+export * from './upload';

web/components/flow/node-renderer/textarea.tsx

@@ -13,10 +13,11 @@ type TextAreaProps = {
 export const RenderTextArea = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
   convertKeysToCamelCase(data?.ui?.attr?.autosize || {});
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
     <div className="p-2 text-sm">
-      <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
+      <TextArea {...attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
     </div>
   );
 };

web/components/flow/node-renderer/tree-select.tsx

@@ -1,109 +1,28 @@
 import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
-import type { TreeSelectProps } from 'antd';
 import { IFlowNodeParameter } from '@/types/flow';
-import { Label } from '@mui/icons-material';
+import { convertKeysToCamelCase } from '@/utils/flow';
 
 type TextAreaProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
 };
-const treeData = [
-  {
-    value: 'parent 1',
-    title: 'parent 1',
-    children: [
-      {
-        value: 'parent 1-0',
-        title: 'parent 1-0',
-        children: [
-          {
-            value: 'leaf1',
-            title: 'leaf1',
-          },
-          {
-            value: 'leaf2',
-            title: 'leaf2',
-          },
-          {
-            value: 'leaf3',
-            title: 'leaf3',
-          },
-          {
-            value: 'leaf4',
-            title: 'leaf4',
-          },
-          {
-            value: 'leaf5',
-            title: 'leaf5',
-          },
-          {
-            value: 'leaf6',
-            title: 'leaf6',
-          },
-        ],
-      },
-      {
-        value: 'parent 1-1',
-        title: 'parent 1-1',
-        children: [
-          {
-            value: 'leaf11',
-            title: <b style={{ color: '#08c' }}>leaf11</b>,
-          },
-        ],
-      },
-    ],
-  },
-];
 export const RenderTreeSelect = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-  // console.log(data.options);
-  // const [value, setValue] = useState<string>();
-
-  // const onChange = (newValue: string) => {
-  //   setValue(newValue);
-  // };
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-
-  const handleDropdownVisibleChange = (visible: boolean | ((prevState: boolean) => boolean)) => {
-    setDropdownVisible(visible);
-
-    // 你可以在这里执行更多的逻辑，比如发送请求、更新状态等
-    console.log('Dropdown is now:', visible ? 'visible' : 'hidden');
-  };
-
-  const focus = () => {
-    // console.log('focus==========');
-  };
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
     <div className="p-2 text-sm">
       <TreeSelect
         fieldNames={{ label: 'label', value: 'value', children: 'children' }}
-        {...data.ui.attr}
+        {...attr}
         style={{ width: '100%' }}
         value={defaultValue}
         treeDefaultExpandAll
         onChange={onChange}
         treeData={data.options}
-        onDropdownVisibleChange={handleDropdownVisibleChange}
       />
     </div>
-
-    // TODO: Implement the TreeSelect component
-    //   <TreeSelect
-    //   showSearch
-    //   style={{ width: '100%' }}
-    //   value={value}
-    //   dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-    //   placeholder="Please select"
-    //   allowClear
-    //   treeDefaultExpandAll
-    //   onChange={onChange}
-    //   treeData={treeData}
-    //   getPopupContainer={() => document.body}
-    // />
   );
 };

web/components/flow/node-renderer/upload.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+import { Button, message, Upload } from 'antd';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { IFlowNodeParameter } from '@/types/flow';
+import { useTranslation } from 'react-i18next';
+
+const props: UploadProps = {
+  name: 'file',
+  action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+  headers: {
+    authorization: 'authorization-text',
+  },
+};
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderUpload = (params: Props) => {
+  const { t } = useTranslation();
+
+  const { data, defaultValue, onChange } = params;
+
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return (
+    <div style={{ textAlign: 'center' }} className="p-2 text-sm">
+      <Upload {...attr}   {...props}>
+        <Button icon={<UploadOutlined />}>{t('UploadData')}</Button>
+      </Upload>
+    </div>
+  )
+
+
+}
+

web/types/flow.ts

@@ -54,10 +54,15 @@ export type IFlowNodeParameter = {
 
 export type IFlowNodeParameterUI = {
   ui_type: string;
+  language: string;
   attr: {
     disabled: boolean;
     [key: string]: any;
   };
+  editor: {
+    width: Number;
+    height: Number;
+  };
   show_input: boolean;
 };
 

web/utils/request.ts

@@ -1,7 +1,6 @@
 import { message } from 'antd';
 import axios from './ctx-axios';
 import { isPlainObject } from 'lodash';
-
 const DEFAULT_HEADERS = {
   'content-type': 'application/json',
 };