From 3368bce46085a9dc583c1adf730684b39e057e8d Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Tue, 25 Jun 2024 16:15:09 +0800
Subject: [PATCH] feat: add DynamicCategorize #918

---
 web/src/components/llm-select/index.tsx       |  7 +-
 .../components/right-toolbar/index.tsx        |  4 +-
 web/src/locales/zh-traditional.ts             |  1 +
 web/src/locales/zh.ts                         |  1 +
 web/src/pages/flow/canvas/node/index.tsx      |  5 +-
 .../categorize-form/dynamic-categorize.tsx    | 69 +++++++++++++++++++
 web/src/pages/flow/categorize-form/hooks.ts   | 13 ++++
 web/src/pages/flow/categorize-form/index.tsx  | 26 +++++--
 web/src/pages/flow/constant.tsx               |  1 +
 9 files changed, 114 insertions(+), 13 deletions(-)
 create mode 100644 web/src/pages/flow/categorize-form/dynamic-categorize.tsx
 create mode 100644 web/src/pages/flow/categorize-form/hooks.ts

diff --git a/web/src/components/llm-select/index.tsx b/web/src/components/llm-select/index.tsx
index 7e1bc7a432..4d730c80c6 100644
--- a/web/src/components/llm-select/index.tsx
+++ b/web/src/components/llm-select/index.tsx
@@ -10,12 +10,7 @@ const LLMSelect = () => {
 
   return (
     <Popover content={content} trigger="click" placement="left" arrow={false}>
-      {/* <Button>Click me</Button> */}
-      <Select
-        defaultValue="lucy"
-        style={{ width: '100%' }}
-        dropdownStyle={{ display: 'none' }}
-      />
+      <Select style={{ width: '100%' }} dropdownStyle={{ display: 'none' }} />
     </Popover>
   );
 };
diff --git a/web/src/layouts/components/right-toolbar/index.tsx b/web/src/layouts/components/right-toolbar/index.tsx
index 68e99201f6..5970727e22 100644
--- a/web/src/layouts/components/right-toolbar/index.tsx
+++ b/web/src/layouts/components/right-toolbar/index.tsx
@@ -25,7 +25,9 @@ const handleGithubCLick = () => {
 const RightToolBar = () => {
   const { t } = useTranslate('common');
   const changeLanguage = useChangeLanguage();
-  const { language = '' } = useSelector((state) => state.settingModel.userInfo);
+  const { language = 'en' } = useSelector(
+    (state) => state.settingModel.userInfo,
+  );
 
   const handleItemClick: MenuProps['onClick'] = ({ key }) => {
     changeLanguage(key);
diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts
index 3b96cf4daf..5bc5c9177a 100644
--- a/web/src/locales/zh-traditional.ts
+++ b/web/src/locales/zh-traditional.ts
@@ -505,6 +505,7 @@ export default {
       preview: '預覽',
       fileError: '文件錯誤',
     },
+    flow: { cite: '引用', citeTip: 'citeTip' },
     footer: {
       profile: '“保留所有權利 @ react”',
     },
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 920d151274..34299e2ae6 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -523,6 +523,7 @@ export default {
       preview: '预览',
       fileError: '文件错误',
     },
+    flow: { cite: '引用', citeTip: 'citeTip' },
     footer: {
       profile: 'All rights reserved @ React',
     },
diff --git a/web/src/pages/flow/canvas/node/index.tsx b/web/src/pages/flow/canvas/node/index.tsx
index 18061203f1..8587fa17d9 100644
--- a/web/src/pages/flow/canvas/node/index.tsx
+++ b/web/src/pages/flow/canvas/node/index.tsx
@@ -7,6 +7,7 @@ import { Flex, MenuProps, Space, Typography } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Operator, operatorMap } from '../../constant';
+import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import useGraphStore from '../../store';
 import styles from './index.less';
@@ -18,7 +19,7 @@ export function RagNode({
   data,
   isConnectable = true,
   selected,
-}: NodeProps<{ label: string }>) {
+}: NodeProps<NodeData>) {
   const { t } = useTranslation();
   const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
   const duplicateNodeById = useGraphStore((store) => store.duplicateNode);
@@ -78,7 +79,7 @@ export function RagNode({
             name={data.label as Operator}
             fontSize={12}
           ></OperatorIcon>
-          <span>{data.label}</span>
+          <span>{id}</span>
         </Space>
         <OperateDropdown
           iconFontSize={14}
diff --git a/web/src/pages/flow/categorize-form/dynamic-categorize.tsx b/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
new file mode 100644
index 0000000000..3bba4f41fd
--- /dev/null
+++ b/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
@@ -0,0 +1,69 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Card, Form, Input, Select, Typography } from 'antd';
+import { useBuildCategorizeToOptions } from './hooks';
+
+const DynamicCategorize = () => {
+  const form = Form.useFormInstance();
+  const options = useBuildCategorizeToOptions();
+
+  return (
+    <>
+      <Form.List name="items">
+        {(fields, { add, remove }) => (
+          <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
+            {fields.map((field) => (
+              <Card
+                size="small"
+                key={field.key}
+                extra={
+                  <CloseOutlined
+                    onClick={() => {
+                      remove(field.name);
+                    }}
+                  />
+                }
+              >
+                <Form.Item
+                  label="name"
+                  name={[field.name, 'name']}
+                  initialValue={`Categorize ${field.name + 1}`}
+                  rules={[
+                    { required: true, message: 'Please input your name!' },
+                  ]}
+                >
+                  <Input />
+                </Form.Item>
+                <Form.Item
+                  label="description"
+                  name={[field.name, 'description']}
+                >
+                  <Input.TextArea rows={3} />
+                </Form.Item>
+                <Form.Item label="examples" name={[field.name, 'examples']}>
+                  <Input.TextArea rows={3} />
+                </Form.Item>
+                <Form.Item label="to" name={[field.name, 'to']}>
+                  <Select options={options} />
+                </Form.Item>
+              </Card>
+            ))}
+
+            <Button type="dashed" onClick={() => add()} block>
+              + Add Item
+            </Button>
+          </div>
+        )}
+      </Form.List>
+
+      <Form.Item noStyle shouldUpdate>
+        {() => (
+          <Typography>
+            <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
+          </Typography>
+        )}
+      </Form.Item>
+    </>
+  );
+};
+
+export default DynamicCategorize;
diff --git a/web/src/pages/flow/categorize-form/hooks.ts b/web/src/pages/flow/categorize-form/hooks.ts
new file mode 100644
index 0000000000..d6ce5b3f24
--- /dev/null
+++ b/web/src/pages/flow/categorize-form/hooks.ts
@@ -0,0 +1,13 @@
+import { Operator } from '../constant';
+import useGraphStore from '../store';
+
+// exclude some nodes downstream of the classification node
+const excludedNodes = [Operator.Categorize, Operator.Answer, Operator.Begin];
+
+export const useBuildCategorizeToOptions = () => {
+  const nodes = useGraphStore((state) => state.nodes);
+
+  return nodes
+    .filter((x) => excludedNodes.every((y) => y !== x.data.label))
+    .map((x) => ({ label: x.id, value: x.id }));
+};
diff --git a/web/src/pages/flow/categorize-form/index.tsx b/web/src/pages/flow/categorize-form/index.tsx
index 17fe73902b..6cdabe3e01 100644
--- a/web/src/pages/flow/categorize-form/index.tsx
+++ b/web/src/pages/flow/categorize-form/index.tsx
@@ -1,10 +1,28 @@
 import LLMSelect from '@/components/llm-select';
+import { useTranslate } from '@/hooks/commonHooks';
+import { Form } from 'antd';
+import { IOperatorForm } from '../interface';
+import DynamicCategorize from './dynamic-categorize';
+
+const CategorizeForm = ({ form, onValuesChange }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
 
-const CategorizeForm = () => {
   return (
-    <section>
-      <LLMSelect></LLMSelect>
-    </section>
+    <Form
+      name="basic"
+      labelCol={{ span: 9 }}
+      wrapperCol={{ span: 15 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+      initialValues={{ items: [{}] }}
+      // layout={'vertical'}
+    >
+      <Form.Item name={['cite']} label={t('cite')} tooltip={t('citeTip')}>
+        <LLMSelect></LLMSelect>
+      </Form.Item>
+      <DynamicCategorize></DynamicCategorize>
+    </Form>
   );
 };
 
diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx
index acede6f727..866eb4ec80 100644
--- a/web/src/pages/flow/constant.tsx
+++ b/web/src/pages/flow/constant.tsx
@@ -80,4 +80,5 @@ export const initialFormValuesMap = {
   [Operator.Retrieval]: initialRetrievalValues,
   [Operator.Generate]: initialGenerateValues,
   [Operator.Answer]: {},
+  [Operator.Categorize]: {},
 };