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)
2025-08-14 18:35:58 +08:00 · 2025-01-09 18:24:27 +08:00 · 2025-01-09 18:24:27 +08:00 · 300d8ecf51
commit 300d8ecf51
parent dac54ded96
15 changed files with 259 additions and 123 deletions
--- a/web/src/components/edit-tag/index.tsx
+++ b/web/src/components/edit-tag/index.tsx
@ -7,11 +7,11 @@ import React, { useEffect, useRef, useState } from 'react';
 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('');
@ -24,8 +24,8 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
  }, [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 = () => {
@ -37,12 +37,12 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
  };

  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('');
@ -64,7 +64,7 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
    );
  };

-  const tagChild = tags?.map(forMap);
+  const tagChild = value?.map(forMap);

  const tagPlusStyle: React.CSSProperties = {
    background: token.colorBgContainer,
--- a/web/src/components/entity-types-item.tsx
+++ b/web/src/components/entity-types-item.tsx
@ -18,8 +18,6 @@ const EntityTypesItem = () => {
      label={t('entityTypes')}
      rules={[{ required: true }]}
      initialValue={initialEntityTypes}
-      valuePropName="tags"
-      trigger="setTags"
    >
      <EditTag></EditTag>
    </Form.Item>
--- a/web/src/hooks/chunk-hooks.ts
+++ b/web/src/hooks/chunk-hooks.ts
@ -194,6 +194,7 @@ export const useFetchChunk = (chunkId?: string): ResponseType<any> => {
    queryKey: ['fetchChunk'],
    enabled: !!chunkId,
    initialData: {},
+    gcTime: 0,
    queryFn: async () => {
      const data = await kbService.get_chunk({
        chunk_id: chunkId,
--- a/web/src/hooks/knowledge-hooks.ts
+++ b/web/src/hooks/knowledge-hooks.ts
@ -20,6 +20,7 @@ import {
 } 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';
@ -34,9 +35,9 @@ export const useKnowledgeBaseId = (): string => {
 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({
@ -341,4 +342,24 @@ export const useTagIsRenaming = () => {
  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
--- a/web/src/hooks/logic-hooks.ts
+++ b/web/src/hooks/logic-hooks.ts
@ -405,30 +405,6 @@ export interface IRemoveMessageById {
  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,
--- a/web/src/interfaces/database/knowledge.ts
+++ b/web/src/interfaces/database/knowledge.ts
@ -11,7 +11,7 @@ export interface IKnowledge {
  doc_num: number;
  id: string;
  name: string;
-  parser_config: Parserconfig;
+  parser_config: ParserConfig;
  parser_id: string;
  permission: string;
  similarity_threshold: number;
@ -25,9 +25,22 @@ export interface IKnowledge {
  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 {
@ -83,8 +96,11 @@ export interface IChunk {
  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 {
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -338,6 +338,8 @@ This procedure will improve precision of retrieval by adding more information to
 </ul>
      `,
      topnTags: 'Top-N Tags',
+      tags: 'Tags',
+      addTag: 'Add tag',
    },
    chunk: {
      chunk: 'Chunk',
--- a/web/src/locales/zh-traditional.ts
+++ b/web/src/locales/zh-traditional.ts
@ -322,6 +322,8 @@ export default {
 <li>關鍵字由 LLM 生成，既昂貴又耗時。
 </ul>
 `,
+      tags: '標籤',
+      addTag: '增加標籤',
    },
    chunk: {
      chunk: '解析塊',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -339,6 +339,8 @@ export default {
      <li>关键字由 LLM 生成，这既昂贵又耗时。 </li>
      </ul>
      `,
+      tags: '标签',
+      addTag: '增加标签',
    },
    chunk: {
      chunk: '解析块',
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx
@ -1,15 +1,23 @@
 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;
@ -26,62 +34,48 @@ const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
 }) => {
  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
@ -95,31 +89,34 @@ const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
      <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>
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/tag-feature-item.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/tag-feature-item.tsx
@ -0,0 +1,107 @@
+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>
+  );
+};
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts
@ -95,27 +95,11 @@ export const useUpdateChunk = () => {
  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) {
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/utils.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/utils.ts
@ -0,0 +1,24 @@
+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;
+  }, []);
+}
--- a/web/src/services/knowledge-service.ts
+++ b/web/src/services/knowledge-service.ts
@ -30,6 +30,7 @@ const {
  knowledge_graph,
  document_infos,
  upload_and_parse,
+  listTagByKnowledgeIds,
 } = api;

 const methods = {
@ -140,6 +141,10 @@ const methods = {
    url: upload_and_parse,
    method: 'post',
  },
+  listTagByKnowledgeIds: {
+    url: listTagByKnowledgeIds,
+    method: 'get',
+  },
 };

 const kbService = registerServer<keyof typeof methods>(methods, request);
--- a/web/src/utils/api.ts
+++ b/web/src/utils/api.ts
@ -39,6 +39,7 @@ export default {

  // 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`,