feat: build categorize list from object #918 (#1276)

### What problem does this PR solve?

feat: build categorize list from object #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/categorize-form/hooks.ts

@@ -1,4 +1,12 @@
+import get from 'lodash/get';
+import omit from 'lodash/omit';
+import { useCallback, useEffect } from 'react';
 import { Operator } from '../constant';
+import {
+  ICategorizeItem,
+  ICategorizeItemResult,
+  IOperatorForm,
+} from '../interface';
 import useGraphStore from '../store';
 
 // exclude some nodes downstream of the classification node
@@ -11,3 +19,74 @@ export const useBuildCategorizeToOptions = () => {
     .filter((x) => excludedNodes.every((y) => y !== x.data.label))
     .map((x) => ({ label: x.id, value: x.id }));
 };
+
+/**
+   * convert the following object into a list
+   * 
+   * {
+      "product_related": {
+      "description": "The question is about product usage, appearance and how it works.",
+      "examples": "Why it always beaming?\nHow to install it onto the wall?\nIt leaks, what to do?",
+      "to": "generate:0"
+      }
+      }
+*/
+const buildCategorizeListFromObject = (
+  categorizeItem: ICategorizeItemResult,
+) => {
+  return Object.keys(categorizeItem).reduce<Array<ICategorizeItem>>(
+    (pre, cur) => {
+      pre.push({ name: cur, ...categorizeItem[cur] });
+      return pre;
+    },
+    [],
+  );
+};
+
+/**
+   * Convert the list in the following form into an object
+   * {
+    "items": [
+      {
+        "name": "Categorize 1",
+        "description": "111",
+        "examples": "ddd",
+        "to": "Retrieval:LazyEelsStick"
+      }
+     ]
+    }
+*/
+const buildCategorizeObjectFromList = (list: Array<ICategorizeItem>) => {
+  return list.reduce<ICategorizeItemResult>((pre, cur) => {
+    if (cur?.name) {
+      pre[cur.name] = omit(cur, 'name');
+    }
+    return pre;
+  }, {});
+};
+
+export const useHandleFormValuesChange = ({
+  onValuesChange,
+  form,
+  node,
+}: IOperatorForm) => {
+  const handleValuesChange = useCallback(
+    (changedValues: any, values: any) => {
+      onValuesChange?.(changedValues, {
+        ...omit(values, 'items'),
+        category_description: buildCategorizeObjectFromList(values.items),
+      });
+    },
+    [onValuesChange],
+  );
+
+  useEffect(() => {
+    form?.setFieldsValue({
+      items: buildCategorizeListFromObject(
+        get(node, 'data.form.category_description', {}),
+      ),
+    });
+  }, [form, node]);
+
+  return { handleValuesChange };
+};

web/src/pages/flow/categorize-form/index.tsx

@@ -1,11 +1,19 @@
 import LLMSelect from '@/components/llm-select';
 import { useTranslate } from '@/hooks/commonHooks';
 import { Form } from 'antd';
+import { useSetLlmSetting } from '../hooks';
 import { IOperatorForm } from '../interface';
 import DynamicCategorize from './dynamic-categorize';
+import { useHandleFormValuesChange } from './hooks';
 
-const CategorizeForm = ({ form, onValuesChange }: IOperatorForm) => {
+const CategorizeForm = ({ form, onValuesChange, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
+  const { handleValuesChange } = useHandleFormValuesChange({
+    form,
+    node,
+    onValuesChange,
+  });
+  useSetLlmSetting(form);
 
   return (
     <Form
@@ -14,11 +22,14 @@ const CategorizeForm = ({ form, onValuesChange }: IOperatorForm) => {
       wrapperCol={{ span: 15 }}
       autoComplete="off"
       form={form}
-      onValuesChange={onValuesChange}
+      onValuesChange={handleValuesChange}
       initialValues={{ items: [{}] }}
-      // layout={'vertical'}
     >
-      <Form.Item name={['cite']} label={t('cite')} tooltip={t('citeTip')}>
+      <Form.Item
+        name={'llm_id'}
+        label={t('model', { keyPrefix: 'chat' })}
+        tooltip={t('modelTip', { keyPrefix: 'chat' })}
+      >
         <LLMSelect></LLMSelect>
       </Form.Item>
       <DynamicCategorize></DynamicCategorize>

web/src/pages/flow/flow-drawer/index.tsx

@@ -53,6 +53,7 @@ const FlowDrawer = ({
         <OperatorForm
           onValuesChange={handleValuesChange}
           form={form}
+          node={node}
         ></OperatorForm>
       )}
     </Drawer>

web/src/pages/flow/generate-form/index.tsx

@@ -1,44 +1,13 @@
 import LlmSettingItems from '@/components/llm-setting-items';
-import { variableEnabledFieldMap } from '@/constants/chat';
-import {
-  ModelVariableType,
-  settledModelVariableMap,
-} from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/commonHooks';
-import { Variable } from '@/interfaces/database/chat';
 import { Form, Input, Switch } from 'antd';
-import { useCallback, useEffect } from 'react';
+import { useSetLlmSetting } from '../hooks';
 import { IOperatorForm } from '../interface';
 
 const GenerateForm = ({ onValuesChange, form }: IOperatorForm) => {
   const { t } = useTranslate('flow');
-  const initialLlmSetting = undefined;
 
-  const handleParametersChange = useCallback(
-    (value: ModelVariableType) => {
-      const variable = settledModelVariableMap[value];
-      form?.setFieldsValue(variable);
-    },
-    [form],
-  );
-
-  useEffect(() => {
-    const switchBoxValues = Object.keys(variableEnabledFieldMap).reduce<
-      Record<string, boolean>
-    >((pre, field) => {
-      pre[field] =
-        initialLlmSetting === undefined
-          ? true
-          : !!initialLlmSetting[
-              variableEnabledFieldMap[
-                field as keyof typeof variableEnabledFieldMap
-              ] as keyof Variable
-            ];
-      return pre;
-    }, {});
-    const otherValues = settledModelVariableMap[ModelVariableType.Precise];
-    form?.setFieldsValue({ ...switchBoxValues, ...otherValues });
-  }, [form, initialLlmSetting]);
+  useSetLlmSetting(form);
 
   return (
     <Form
@@ -49,9 +18,7 @@ const GenerateForm = ({ onValuesChange, form }: IOperatorForm) => {
       form={form}
       onValuesChange={onValuesChange}
     >
-      <LlmSettingItems
-        handleParametersChange={handleParametersChange}
-      ></LlmSettingItems>
+      <LlmSettingItems></LlmSettingItems>
       <Form.Item
         name={['prompt']}
         label={t('prompt', { keyPrefix: 'knowledgeConfiguration' })}

web/src/pages/flow/hooks.ts

@@ -15,7 +15,14 @@ import React, {
 } from 'react';
 import { Node, Position, ReactFlowInstance } from 'reactflow';
 // import { shallow } from 'zustand/shallow';
+import { variableEnabledFieldMap } from '@/constants/chat';
+import {
+  ModelVariableType,
+  settledModelVariableMap,
+} from '@/constants/knowledge';
+import { Variable } from '@/interfaces/database/chat';
 import { useDebounceEffect } from 'ahooks';
+import { FormInstance } from 'antd';
 import { humanId } from 'human-id';
 import { useParams } from 'umi';
 import { Operator } from './constant';
@@ -218,3 +225,25 @@ export const useFetchDataOnMount = () => {
 export const useFlowIsFetching = () => {
   return useIsFetching({ queryKey: ['flowDetail'] }) > 0;
 };
+
+export const useSetLlmSetting = (form?: FormInstance) => {
+  const initialLlmSetting = undefined;
+
+  useEffect(() => {
+    const switchBoxValues = Object.keys(variableEnabledFieldMap).reduce<
+      Record<string, boolean>
+    >((pre, field) => {
+      pre[field] =
+        initialLlmSetting === undefined
+          ? true
+          : !!initialLlmSetting[
+              variableEnabledFieldMap[
+                field as keyof typeof variableEnabledFieldMap
+              ] as keyof Variable
+            ];
+      return pre;
+    }, {});
+    const otherValues = settledModelVariableMap[ModelVariableType.Precise];
+    form?.setFieldsValue({ ...switchBoxValues, ...otherValues });
+  }, [form, initialLlmSetting]);
+};

web/src/pages/flow/interface.ts

@@ -1,4 +1,5 @@
 import { FormInstance } from 'antd';
+import { Node } from 'reactflow';
 
 export interface DSLComponentList {
   id: string;
@@ -8,6 +9,7 @@ export interface DSLComponentList {
 export interface IOperatorForm {
   onValuesChange?(changedValues: any, values: any): void;
   form?: FormInstance;
+  node?: Node<NodeData>;
 }
 
 export interface IBeginForm {
@@ -35,9 +37,23 @@ export interface IGenerateForm {
   llm_id: string;
   parameters: { key: string; component_id: string };
 }
+export interface ICategorizeItem {
+  name: string;
+  description?: string;
+  examples?: string;
+  to?: string;
+}
+
+export type ICategorizeItemResult = Record<
+  string,
+  Omit<ICategorizeItem, 'name'>
+>;
+export interface ICategorizeForm extends IGenerateForm {
+  category_description: ICategorizeItemResult;
+}
 
 export type NodeData = {
   label: string;
   color: string;
-  form: IBeginForm | IRetrievalForm | IGenerateForm;
+  form: IBeginForm | IRetrievalForm | IGenerateForm | ICategorizeForm;
 };

web/src/pages/flow/store.ts

@@ -39,6 +39,7 @@ export type RFState = {
   deleteEdgeById: (id: string) => void;
   deleteNodeById: (id: string) => void;
   findNodeByName: (operatorName: Operator) => Node | undefined;
+  findNodeById: (id: string) => Node | undefined;
 };
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
@@ -125,6 +126,9 @@ const useGraphStore = create<RFState>()(
       findNodeByName: (name: Operator) => {
         return get().nodes.find((x) => x.data.label === name);
       },
+      findNodeById: (id: string) => {
+        return get().nodes.find((x) => x.id === id);
+      },
       updateNodeForm: (nodeId: string, values: any) => {
         set({
           nodes: get().nodes.map((node) => {

web/src/pages/flow/utils.ts

@@ -114,7 +114,10 @@ const buildComponentDownstreamOrUpstream = (
 
 const removeUselessDataInTheOperator = curry(
   (operatorName: string, params: Record<string, unknown>) => {
-    if (operatorName === Operator.Generate) {
+    if (
+      operatorName === Operator.Generate ||
+      operatorName === Operator.Categorize
+    ) {
       return removeUselessFieldsFromValues(params, '');
     }
     return params;