Feat: Add TagFeatureItem #4368

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,

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>

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,

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

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,

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 {

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',

web/src/locales/zh-traditional.ts

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

web/src/locales/zh.ts

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

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>