feat: 重构会话模块

dataelement · Dec 1, 2023 · eda6961 · eda6961
1 parent bd87f74
commit eda6961
Show file tree

Hide file tree

Showing 25 changed files with 919 additions and 1,704 deletions.
diff --git a/src/frontend/public/locales/en/bs.json b/src/frontend/public/locales/en/bs.json
@@ -192,7 +192,9 @@
         "dropdown": "Dropdown",
         "maxLength": "Max Length",
         "options": "Options",
-        "variableName": "Variable Name"
+        "variableName": "Variable Name",
+        "varOptionRequired": "options are required",
+        "optionRepeated": "Option repeated"
     },
     "lib": {
         "enterLibraryName": "Enter Knowledge Base Name",
@@ -261,7 +263,11 @@
         "importButton": "Import",
         "start": "start",
         "formSettings": "Form Settings",
-        "requiredLabel": "Required"
+        "requiredLabel": "Required",
+        "isRequired": "is Required",
+        "fileRequired": "The current file is empty",
+        "selectComponent": "Select a component",
+        "varLength": "Length cannot exceed"
     },
     "status": {
         "1004": "This skill has been deleted",

diff --git a/src/frontend/public/locales/zh/bs.json b/src/frontend/public/locales/zh/bs.json
@@ -188,7 +188,9 @@
         "dropdown": "下拉框",
         "maxLength": "最大长度",
         "options": "选项",
-        "variableName": "变量名"
+        "variableName": "变量名",
+        "varOptionRequired": "请输入选项内容",
+        "optionRepeated": "选项重复"
     },
     "lib": {
         "enterLibraryName": "请输入知识库名称",
@@ -257,7 +259,11 @@
         "importButton": "导入",
         "start": "开始",
         "formSettings": "表单设置",
-        "requiredLabel": "必填"
+        "requiredLabel": "必填",
+        "isRequired": "是必填项",
+        "fileRequired": "当前文件为空",
+        "selectComponent": "选择一个组件",
+        "varLength": "长度不能超过"
     },
     "status": {
         "1004": "该技能已被删除",

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -1,14 +1,18 @@
 import { Info } from "lucide-react";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import VariablesComponent from "../../../../components/VariablesComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import DictComponent from "../../../../components/dictComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import FloatComponent from "../../../../components/floatComponent";
 import InputComponent from "../../../../components/inputComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import InputListComponent from "../../../../components/inputListComponent";
 import IntComponent from "../../../../components/intComponent";
+import KeypairListComponent from "../../../../components/keypairListComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
@@ -21,18 +25,13 @@ import { ParameterComponentType } from "../../../../types/components";
 import { cleanEdges, convertObjToArray, convertValuesToNumbers, hasDuplicateKeys } from "../../../../util/reactflowUtils";
 import {
   classNames,
+  getNodeNames,
   getRandomKeyByssmm,
   groupByFamily,
   isValidConnection,
   nodeColors,
-  nodeIconsLucide,
-  getNodeNames
+  nodeIconsLucide
 } from "../../../../utils";
-import DictComponent from "../../../../components/dictComponent";
-import KeypairListComponent from "../../../../components/keypairListComponent";
-import { Button } from "../../../../components/ui/button";
-import { Link, useParams } from "react-router-dom";
-import VariablesComponent from "../../../../components/VariablesComponent";
 
 export default function ParameterComponent({
   left,
@@ -211,7 +210,7 @@ export default function ParameterComponent({
             type === "code" ||
             type === "prompt" ||
             type === "file" ||
-            type === "int" || 
+            type === "int" ||
             type === "variable" ||
             type === "button") &&
           !optionalHandle ? (
@@ -418,10 +417,6 @@ export default function ParameterComponent({
               }}
             />
           </div>
-        ) : left === true && type === "button" ? (
-          <div className="mt-2 w-full">
-            <Link to={`/report/${flowId}`}><Button variant="outline" className="px-10">Edit</Button></Link>
-          </div>
         ) : left === true && type === "variable" ? (
           <div className="mt-2 w-full">
             <VariablesComponent nodeId={data.id} flowId={flowId} onChange={(newValue) => {

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -16,11 +16,15 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
+import { Link, useParams } from "react-router-dom";
+import { Button } from "../../components/ui/button";
 
 export default function GenericNode({ data, selected }: {
   data: NodeDataType;
   selected: boolean;
 }) {
+  const { id: flowId } = useParams();
+  // console.log('data :>> ', data);
 
   const { setErrorData } = useContext(alertContext);
   const showError = useRef(true);
@@ -208,9 +212,6 @@ export default function GenericNode({ data, selected }: {
             >
               {" "}
             </div>
-            {/* <div className="px-5 py-2 mt-2 text-center">
-                  Output
-              </div> */}
             {/* 输出节点 */}
             <ParameterComponent
               data={data}
@@ -225,6 +226,9 @@ export default function GenericNode({ data, selected }: {
               type={data.node.base_classes.join("|")}
               left={false}
             />
+            {data.type === 'Report' && <div className="w-full bg-muted px-5 py-2">
+              <Link to={`/report/${flowId}`}><Button variant="outline" className="px-10">Edit</Button></Link>
+            </div>}
           </>
         </div>
       </div>

diff --git a/src/frontend/src/components/VariablesComponent/VarDialog.tsx b/src/frontend/src/components/VariablesComponent/VarDialog.tsx
@@ -1,21 +1,53 @@
 import _ from 'lodash';
 import { ArrowDownUp, Plus, X } from "lucide-react";
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useTranslation } from 'react-i18next';
 import { generateUUID } from '../../utils';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { alertContext } from '../../contexts/alertContext';
 
 export default function VarDialog({ data, onSave, onClose }) {
 
     const [item, setItem] = useState(data)
     const { t } = useTranslation()
 
+    const [errors, setErrors] = useState([])
+    const { setErrorData } = useContext(alertContext);
+
     const handleSave = () => {
+        // 校验
+        const _errors = []
+        if (item.type === 'select') {
+            item.options.forEach((op, i) => {
+                if (!op.value) {
+                    _errors[i] = true
+                }
+            })
+            setErrors(_errors)
+
+            if (!item.options.length || _errors.length) {
+                return setErrorData({
+                    title: t('prompt'),
+                    list: [t('flow.varOptionRequired')],
+                });
+            }
+            const valiMap = {}
+            if (item.options.find((op) => {
+                if (valiMap[op.value]) return true
+                valiMap[op.value] = true
+            })) {
+                return setErrorData({
+                    title: t('prompt'),
+                    list: [t('flow.optionRepeated')]
+                });
+            }
+        }
+
         // 处理保存逻辑
-        onSave({ ...item });
+        onSave({ ...item })
     };
 
     const handleDragEnd = (result) => {
@@ -26,6 +58,7 @@ export default function VarDialog({ data, onSave, onClose }) {
         newOptions.splice(result.destination.index, 0, movedOption);
 
         setItem({ ...item, options: newOptions });
+        setErrors([])
     };
 
     const handleChangeOptionValue = (value, index) => {
@@ -44,7 +77,7 @@ export default function VarDialog({ data, onSave, onClose }) {
 
     return (
         <dialog className="modal bg-blur-shared modal-open">
-            <div className="w-[360px] bg-[#fff] rounded-xl p-8 shadow-lg">
+            <div className="w-[420px] bg-[#fff] rounded-xl p-8 shadow-lg">
                 <Tabs defaultValue={item.type}
                     className="w-full"
                     onValueChange={(t) => setItem(prevItem => ({
@@ -59,14 +92,14 @@ export default function VarDialog({ data, onSave, onClose }) {
                     <TabsContent value="text">
                         {VariablesName}
                         <div>
-                            <label className='text-sm text-gray-500'>{t('flow.max_length')}：</label>
+                            <label className='text-sm text-gray-500'>{t('flow.maxLength')}：</label>
                             <Input value={item.maxLength} className='mt-2' onChange={(e) => setItem(prevItem => ({
                                 ...prevItem,
                                 maxLength: e.target.value
                             }))} />
                         </div>
                     </TabsContent>
-                    <TabsContent value="select" className='pb-10'>
+                    <TabsContent value="select" className='pb-10 px-2 max-h-80 overflow-y-auto scrollbar-hide'>
                         {VariablesName}
                         <label className='text-sm text-gray-500'>{t('flow.options')}：</label>
                         <DragDropContext onDragEnd={handleDragEnd}>
@@ -82,13 +115,14 @@ export default function VarDialog({ data, onSave, onClose }) {
                                                             // backgroundColor: snapshot.isDragging,
                                                             ...provided.draggableProps.style
                                                         }}>
-                                                        <Input value={option.value} onChange={(e) => handleChangeOptionValue(e.target.value, index)} />
+                                                        <Input value={option.value} className={errors[index] && 'border-red-400'} onChange={(e) => handleChangeOptionValue(e.target.value, index)} />
                                                         <button onClick={() => {
                                                             setItem((old) => {
                                                                 let newItem = _.cloneDeep(old);
                                                                 newItem.options.splice(index, 1);
                                                                 return newItem;
                                                             });
+                                                            setErrors([])
                                                         }}>
                                                             <X className={"h-4 w-4 hover:text-accent-foreground"} />
                                                         </button>

diff --git a/src/frontend/src/components/VariablesComponent/index.tsx b/src/frontend/src/components/VariablesComponent/index.tsx
@@ -1,9 +1,9 @@
 import _ from "lodash";
-import { Plus, Settings, X } from "lucide-react";
+import { ExternalLink, Plus, Settings, X } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { Variable, delVariableApi, getVariablesApi, saveVariableApi } from "../../controllers/API/flow";
+import { Variable, VariableType, delVariableApi, getVariablesApi, saveVariableApi } from "../../controllers/API/flow";
 import { generateUUID } from "../../utils";
 import VarDialog from "./VarDialog";
 import { useTranslation } from "react-i18next";
@@ -60,8 +60,8 @@ export default function VariablesComponent({ nodeId, flowId, onChange }: {
             "flow_id": flowId,
             "node_id": nodeId,
             "variable_name": _item.name,
-            "value_type": Number(_item.type === 'select') + 1,
-            "value": _item.type === 'text' ? _item.maxLength : _item.options.map(el => el.value).join(',')
+            "value_type": Number(_item.type === VariableType.Select) + 1,
+            "value": _item.type === VariableType.Text ? _item.maxLength : _item.options.map(el => el.value).join(',')
         }
         if (_item.update) {
             param.id = _item.id
@@ -94,7 +94,7 @@ export default function VariablesComponent({ nodeId, flowId, onChange }: {
                         >{item.name}</div>
                         <button
                             onClick={() => { openPopUp(<VarDialog data={item} onSave={handleSave} onClose={closePopUp} />) }}
-                        ><Settings className={"h-4 w-4 hover:text-accent-foreground"} /></button>
+                        ><ExternalLink className={"h-4 w-4 hover:text-accent-foreground"} /></button>
                         <button onClick={() => handleDelClick(idx)} >
                             <X className={"h-4 w-4 hover:text-accent-foreground"} />
                         </button>
@@ -109,12 +109,14 @@ export default function VariablesComponent({ nodeId, flowId, onChange }: {
                             id: generateUUID(8),
                             name: "",
                             maxLength: 50,
-                            type: "text",
+                            type: VariableType.Text,
                             update: false,
                             options: [{
                                 key: generateUUID(4),
                                 value: ""
-                            }]
+                            }],
+                            nodeId,
+                            required: false
                         });
                         return newItems;
                     });

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
@@ -10,6 +10,7 @@ export default function InputComponent({
   disableCopyPaste = false,
   disabled,
   password,
+  maxLength = 100,
   editNode = false,
 }: InputComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
@@ -32,6 +33,7 @@ export default function InputComponent({
     <div className={disabled ? "input-component-div" : "relative"}>
       <input
         value={myValue}
+        // maxLength={maxLength}
         onFocus={() => {
           if (disableCopyPaste) setDisableCopyPaste(true);
         }}

diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -12,6 +12,7 @@ export default function InputFileComponent({
   disabled,
   suffixes,
   fileTypes,
+  placeholder = 'The current file is empty',
   onFileChange,
   editNode = false,
   isSSO = false
@@ -112,7 +113,7 @@ export default function InputFileComponent({
                 : "input-dialog input-primary text-muted-foreground"
           }
         >
-          {myValue !== "" ? myValue : "The current file is empty"}
+          {myValue !== "" ? myValue : placeholder}
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (

diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
@@ -53,7 +53,7 @@ export default function InputListComponent({
                 });
               }}
             />
-            {idx === inputList.length - 1 ? (
+            {idx === inputList.length - 1 && (
               <button
                 onClick={() => {
                   setInputList((old) => {
@@ -66,8 +66,9 @@ export default function InputListComponent({
               >
                 <Plus className={"h-4 w-4 hover:text-accent-foreground"} />
               </button>
-            ) : (
-              <button
+            )}
+            {
+              inputList.length !== 1 && <button
                 onClick={() => {
                   setInputList((old) => {
                     let newInputList = _.cloneDeep(old);
@@ -79,10 +80,10 @@ export default function InputListComponent({
               >
                 <X className="h-4 w-4 hover:text-status-red" />
               </button>
-            )}
+            }
           </div>
         );
       })}
     </div>
   );
-}
+}
diff --git a/src/frontend/src/contexts/locationContext.tsx b/src/frontend/src/contexts/locationContext.tsx
@@ -70,7 +70,8 @@ export function LocationProvider({ children }: { children: ReactNode }) {
     getAppConfig().then(res => {
       setAppConfig({
         isDev: res.data.data.env === 'dev',
-        libAccepts: res.data.data.uns_support
+        libAccepts: res.data.data.uns_support,
+        officeUrl: res.data.data.office_url
       })
     })
   }, [])