Feat: Add TagFeatureItem #4368 (#4432)

### What problem does this PR solve?

Feat: Add TagFeatureItem #4368

### Type of change


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

web/src/components/edit-tag/index.tsx

 import styles from './index.less';
 
 interface EditTagsProps {
-  tags?: string[];
-  setTags?: (tags: string[]) => void;
+  value?: string[];
+  onChange?: (tags: string[]) => void;
 }
 
-const EditTag = ({ tags, setTags }: EditTagsProps) => {
+const EditTag = ({ value = [], onChange }: EditTagsProps) => {
   const { token } = theme.useToken();
   const [inputVisible, setInputVisible] = useState(false);
   const [inputValue, setInputValue] = useState('');
   }, [inputVisible]);
 
   const handleClose = (removedTag: string) => {
-    const newTags = tags?.filter((tag) => tag !== removedTag);
-    setTags?.(newTags ?? []);
+    const newTags = value?.filter((tag) => tag !== removedTag);
+    onChange?.(newTags ?? []);
   };
 
   const showInput = () => {
   };
 
   const handleInputConfirm = () => {
-    if (inputValue && tags) {
+    if (inputValue && value) {
       const newTags = inputValue
         .split(';')
         .map((tag) => tag.trim())
-        .filter((tag) => tag && !tags.includes(tag)); 
-      setTags?.([...tags, ...newTags]);
+        .filter((tag) => tag && !value.includes(tag));
+      onChange?.([...value, ...newTags]);
     }
     setInputVisible(false);
     setInputValue('');
     );
   };
 
-  const tagChild = tags?.map(forMap);
+  const tagChild = value?.map(forMap);
 
   const tagPlusStyle: React.CSSProperties = {
     background: token.colorBgContainer,

web/src/components/entity-types-item.tsx

       label={t('entityTypes')}
       rules={[{ required: true }]}
       initialValue={initialEntityTypes}
-      valuePropName="tags"
-      trigger="setTags"
     >
       <EditTag></EditTag>
     </Form.Item>

web/src/hooks/chunk-hooks.ts

     queryKey: ['fetchChunk'],
     enabled: !!chunkId,
     initialData: {},
+    gcTime: 0,
     queryFn: async () => {
       const data = await kbService.get_chunk({
         chunk_id: chunkId,

web/src/hooks/knowledge-hooks.ts

 } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
 import { message } from 'antd';
+import { useState } from 'react';
 import { useSearchParams } from 'umi';
 import { useHandleSearchChange } from './logic-hooks';
 import { useSetPaginationParams } from './route-hook';
 export const useFetchKnowledgeBaseConfiguration = () => {
   const knowledgeBaseId = useKnowledgeBaseId();
 
-  const { data, isFetching: loading } = useQuery({
+  const { data, isFetching: loading } = useQuery<IKnowledge>({
     queryKey: ['fetchKnowledgeDetail'],
-    initialData: {},
+    initialData: {} as IKnowledge,
     gcTime: 0,
     queryFn: async () => {
       const { data } = await kbService.get_kb_detail({
   return useIsMutating({ mutationKey: ['renameTag'] }) > 0;
 };
 
+export const useFetchTagListByKnowledgeIds = () => {
+  const [knowledgeIds, setKnowledgeIds] = useState<string[]>([]);
+
+  const { data, isFetching: loading } = useQuery<Array<[string, number]>>({
+    queryKey: ['fetchTagListByKnowledgeIds'],
+    enabled: knowledgeIds.length > 0,
+    initialData: [],
+    gcTime: 0, // https://tanstack.com/query/latest/docs/framework/react/guides/caching?from=reactQueryV3
+    queryFn: async () => {
+      const { data } = await kbService.listTagByKnowledgeIds({
+        kb_ids: knowledgeIds.join(','),
+      });
+      const list = data?.data || [];
+      return list;
+    },
+  });
+
+  return { list: data, loading, setKnowledgeIds };
+};
+
 //#endregion

web/src/hooks/logic-hooks.ts

   removeMessageById(messageId: string): void;
 }
 
-export const useRemoveMessageById = (
-  setCurrentConversation: (
-    callback: (state: IClientConversation) => IClientConversation,
-  ) => void,
-) => {
-  const removeMessageById = useCallback(
-    (messageId: string) => {
-      setCurrentConversation((pre) => {
-        const nextMessages =
-          pre.message?.filter(
-            (x) => getMessagePureId(x.id) !== getMessagePureId(messageId),
-          ) ?? [];
-        return {
-          ...pre,
-          message: nextMessages,
-        };
-      });
-    },
-    [setCurrentConversation],
-  );
-
-  return { removeMessageById };
-};
-
 export const useRemoveMessagesAfterCurrentMessage = (
   setCurrentConversation: (
     callback: (state: IClientConversation) => IClientConversation,

web/src/interfaces/database/knowledge.ts

   doc_num: number;
   id: string;
   name: string;
-  parser_config: Parserconfig;
+  parser_config: ParserConfig;
   parser_id: string;
   permission: string;
   similarity_threshold: number;
   nickname?: string;
 }
 
-export interface Parserconfig {
-  from_page: number;
-  to_page: number;
+export interface Raptor {
+  use_raptor: boolean;
+}
+
+export interface ParserConfig {
+  from_page?: number;
+  to_page?: number;
+  auto_keywords?: number;
+  auto_questions?: number;
+  chunk_token_num?: number;
+  delimiter?: string;
+  html4excel?: boolean;
+  layout_recognize?: boolean;
+  raptor?: Raptor;
+  tag_kb_ids?: string[];
+  topn_tags?: number;
 }
 
 export interface IKnowledgeFileParserConfig {
   doc_id: string;
   doc_name: string;
   img_id: string;
-  important_kwd: any[];
+  important_kwd?: string[];
+  question_kwd?: string[]; // keywords
+  tag_kwd?: string[];
   positions: number[][];
+  tag_feas?: Record<string, number>;
 }
 
 export interface ITestingChunk {

web/src/locales/en.ts

 </ul>
       `,
       topnTags: 'Top-N Tags',
+      tags: 'Tags',
+      addTag: 'Add tag',
     },
     chunk: {
       chunk: 'Chunk',

web/src/locales/zh-traditional.ts

  <li>關鍵字由 LLM 生成，既昂貴又耗時。
 </ul>
  `,
+      tags: '標籤',
+      addTag: '增加標籤',
     },
     chunk: {
       chunk: '解析塊',

web/src/locales/zh.ts

       <li>关键字由 LLM 生成，这既昂贵又耗时。 </li>
       </ul>
       `,
+      tags: '标签',
+      addTag: '增加标签',
     },
     chunk: {
       chunk: '解析块',

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx

 import EditTag from '@/components/edit-tag';
 import { useFetchChunk } from '@/hooks/chunk-hooks';
 import { IModalProps } from '@/interfaces/common';
-import { DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { Divider, Form, Input, Modal, Space, Switch, Tooltip } from 'antd';
-import React, { useEffect, useState } from 'react';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Divider, Form, Input, Modal, Space, Switch } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDeleteChunkByIds } from '../../hooks';
+import {
+  transformTagFeaturesArrayToObject,
+  transformTagFeaturesObjectToArray,
+} from '../../utils';
+import { TagFeatureItem } from './tag-feature-item';
+
+type FieldType = Pick<
+  IChunk,
+  'content_with_weight' | 'tag_kwd' | 'question_kwd' | 'important_kwd'
+>;
 
-type FieldType = {
-  content?: string;
-};
 interface kFProps {
   doc_id: string;
   chunkId: string | undefined;
 }) => {
   const [form] = Form.useForm();
   const [checked, setChecked] = useState(false);
-  const [keywords, setKeywords] = useState<string[]>([]);
-  const [question, setQuestion] = useState<string[]>([]);
-  const [tagKeyWords, setTagKeyWords] = useState<string[]>([]);
   const { removeChunk } = useDeleteChunkByIds();
   const { data } = useFetchChunk(chunkId);
   const { t } = useTranslation();
 
   const isTagParser = parserId === 'tag';
 
-  useEffect(() => {
-    if (data?.code === 0) {
-      const {
-        content_with_weight,
-        important_kwd = [],
-        available_int,
-        question_kwd = [],
-        tag_kwd = [],
-      } = data.data;
-      form.setFieldsValue({ content: content_with_weight });
-      setKeywords(important_kwd);
-      setQuestion(question_kwd);
-      setTagKeyWords(tag_kwd);
-      setChecked(available_int !== 0);
-    }
-
-    if (!chunkId) {
-      setKeywords([]);
-      setQuestion([]);
-      setTagKeyWords([]);
-      form.setFieldsValue({ content: undefined });
-    }
-  }, [data, form, chunkId]);
-
-  const handleOk = async () => {
+  const handleOk = useCallback(async () => {
     try {
       const values = await form.validateFields();
+      console.log('🚀 ~ handleOk ~ values:', values);
+
       onOk?.({
-        content: values.content,
-        keywords, // keywords
-        question_kwd: question,
-        tag_kwd: tagKeyWords,
+        ...values,
+        tag_feas: transformTagFeaturesArrayToObject(values.tag_feas),
         available_int: checked ? 1 : 0, // available_int
       });
     } catch (errorInfo) {
       console.log('Failed:', errorInfo);
     }
-  };
+  }, [checked, form, onOk]);
 
-  const handleRemove = () => {
+  const handleRemove = useCallback(() => {
     if (chunkId) {
       return removeChunk([chunkId], doc_id);
     }
-  };
-  const handleCheck = () => {
+  }, [chunkId, doc_id, removeChunk]);
+
+  const handleCheck = useCallback(() => {
     setChecked(!checked);
-  };
+  }, [checked]);
+
+  useEffect(() => {
+    if (data?.code === 0) {
+      const { available_int, tag_feas } = data.data;
+      form.setFieldsValue({
+        ...(data.data || {}),
+        tag_feas: transformTagFeaturesObjectToArray(tag_feas),
+      });
+
+      setChecked(available_int !== 0);
+    }
+  }, [data, form, chunkId]);
 
   return (
     <Modal
       <Form form={form} autoComplete="off" layout={'vertical'}>
         <Form.Item<FieldType>
           label={t('chunk.chunk')}
-          name="content"
+          name="content_with_weight"
           rules={[{ required: true, message: t('chunk.chunkMessage') }]}
         >
           <Input.TextArea autoSize={{ minRows: 4, maxRows: 10 }} />
         </Form.Item>
+
+        <Form.Item<FieldType> label={t('chunk.keyword')} name="important_kwd">
+          <EditTag></EditTag>
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('chunk.question')}
+          name="question_kwd"
+          tooltip={t('chunk.questionTip')}
+        >
+          <EditTag></EditTag>
+        </Form.Item>
+        {isTagParser && (
+          <Form.Item<FieldType>
+            label={t('knowledgeConfiguration.tagName')}
+            name="tag_kwd"
+          >
+            <EditTag></EditTag>
+          </Form.Item>
+        )}
+
+        {!isTagParser && <TagFeatureItem></TagFeatureItem>}
       </Form>
-      <section>
-        <p className="mb-2">{t('chunk.keyword')} </p>
-        <EditTag tags={keywords} setTags={setKeywords} />
-      </section>
-      <section className="mt-4">
-        <div className="flex items-center gap-2 mb-2">
-          <span>{t('chunk.question')}</span>
-          <Tooltip title={t('chunk.questionTip')}>
-            <QuestionCircleOutlined className="text-xs" />
-          </Tooltip>
-        </div>
-        <EditTag tags={question} setTags={setQuestion} />
-      </section>
-      {isTagParser && (
-        <section className="mt-4">
-          <p className="mb-2">{t('knowledgeConfiguration.tagName')} </p>
-          <EditTag tags={tagKeyWords} setTags={setTagKeyWords} />
-        </section>
-      )}
+
       {chunkId && (
         <section>
           <Divider></Divider>

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/tag-feature-item.tsx

+import {
+  useFetchKnowledgeBaseConfiguration,
+  useFetchTagListByKnowledgeIds,
+} from '@/hooks/knowledge-hooks';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Form, InputNumber, Select } from 'antd';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FormListItem } from '../../utils';
+
+const FieldKey = 'tag_feas';
+
+export const TagFeatureItem = () => {
+  const form = Form.useFormInstance();
+  const { t } = useTranslation();
+  const { data: knowledgeConfiguration } = useFetchKnowledgeBaseConfiguration();
+
+  const { setKnowledgeIds, list } = useFetchTagListByKnowledgeIds();
+
+  const tagKnowledgeIds = useMemo(() => {
+    return knowledgeConfiguration?.parser_config?.tag_kb_ids ?? [];
+  }, [knowledgeConfiguration?.parser_config?.tag_kb_ids]);
+
+  const options = useMemo(() => {
+    return list.map((x) => ({
+      value: x[0],
+      label: x[0],
+    }));
+  }, [list]);
+
+  const filterOptions = useCallback(
+    (index: number) => {
+      const tags: FormListItem[] = form.getFieldValue(FieldKey) ?? [];
+
+      // Exclude it's own current data
+      const list = tags
+        .filter((x, idx) => x && index !== idx)
+        .map((x) => x.tag);
+
+      // Exclude the selected data from other options from one's own options.
+      return options.filter((x) => !list.some((y) => x.value === y));
+    },
+    [form, options],
+  );
+
+  useEffect(() => {
+    setKnowledgeIds(tagKnowledgeIds);
+  }, [setKnowledgeIds, tagKnowledgeIds]);
+
+  return (
+    <Form.Item label={t('knowledgeConfiguration.tags')}>
+      <Form.List name={FieldKey} initialValue={[]}>
+        {(fields, { add, remove }) => (
+          <>
+            {fields.map(({ key, name, ...restField }) => (
+              <div key={key} className="flex gap-3 items-center">
+                <div className="flex flex-1  gap-8">
+                  <Form.Item
+                    {...restField}
+                    name={[name, 'tag']}
+                    rules={[
+                      { required: true, message: t('common.pleaseSelect') },
+                    ]}
+                    className="w-2/3"
+                  >
+                    <Select
+                      showSearch
+                      placeholder={t('knowledgeConfiguration.tagName')}
+                      options={filterOptions(name)}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    {...restField}
+                    name={[name, 'frequency']}
+                    rules={[
+                      { required: true, message: t('common.pleaseInput') },
+                    ]}
+                  >
+                    <InputNumber
+                      placeholder={t('knowledgeConfiguration.frequency')}
+                      max={10}
+                      min={0}
+                    />
+                  </Form.Item>
+                </div>
+                <MinusCircleOutlined
+                  onClick={() => remove(name)}
+                  className="mb-6"
+                />
+              </div>
+            ))}
+            <Form.Item>
+              <Button
+                type="dashed"
+                onClick={() => add()}
+                block
+                icon={<PlusOutlined />}
+              >
+                {t('knowledgeConfiguration.addTag')}
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+    </Form.Item>
+  );
+};

web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts

   const { documentId } = useGetKnowledgeSearchParams();
 
   const onChunkUpdatingOk = useCallback(
-    async ({
-      content,
-      keywords,
-      available_int,
-      question_kwd,
-      tag_kwd,
-    }: {
-      content: string;
-      keywords: string;
-      available_int: number;
-      question_kwd: string;
-      tag_kwd: string;
-    }) => {
+    async (params: IChunk) => {
       const code = await createChunk({
-        content_with_weight: content,
+        ...params,
         doc_id: documentId,
         chunk_id: chunkId,
-        important_kwd: keywords, // keywords
-        available_int,
-        question_kwd,
-        tag_kwd,
       });
 
       if (code === 0) {

web/src/pages/add-knowledge/components/knowledge-chunk/utils.ts

+export type FormListItem = {
+  frequency: number;
+  tag: string;
+};
+
+export function transformTagFeaturesArrayToObject(
+  list: Array<FormListItem> = [],
+) {
+  return list.reduce<Record<string, number>>((pre, cur) => {
+    pre[cur.tag] = cur.frequency;
+
+    return pre;
+  }, {});
+}
+
+export function transformTagFeaturesObjectToArray(
+  object: Record<string, number> = {},
+) {
+  return Object.keys(object).reduce<Array<FormListItem>>((pre, key) => {
+    pre.push({ frequency: object[key], tag: key });
+
+    return pre;
+  }, []);
+}

web/src/services/knowledge-service.ts

   knowledge_graph,
   document_infos,
   upload_and_parse,
+  listTagByKnowledgeIds,
 } = api;
 
 const methods = {
     url: upload_and_parse,
     method: 'post',
   },
+  listTagByKnowledgeIds: {
+    url: listTagByKnowledgeIds,
+    method: 'get',
+  },
 };
 
 const kbService = registerServer<keyof typeof methods>(methods, request);

web/src/utils/api.ts

 
   // tags
   listTag: (knowledgeId: string) => `${api_host}/kb/${knowledgeId}/tags`,
+  listTagByKnowledgeIds: `${api_host}/kb/tags`,
   removeTag: (knowledgeId: string) => `${api_host}/kb/${knowledgeId}/rm_tags`,
   renameTag: (knowledgeId: string) =>
     `${api_host}/kb/${knowledgeId}/rename_tag`,