Feat: Add tooltip to question item of ChunkCreatingModal #3873 (#3880)

### What problem does this PR solve?

Feat: Add tooltip to question item of ChunkCreatingModal  #3873

### Type of change


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

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

@@ -1,8 +1,21 @@
 .tweenGroup {
-  display: inline-block;
+  display: flex;
-  :global(.ant-tag) {
+  gap: 8px;
-    margin-bottom: 8px;
+  flex-wrap: wrap;
-    font-size: 14px;
+  width: 100%;
-    padding: 2px 8px;
+  margin-bottom: 8px;
+}
+
+.tag {
+  max-width: 100%;
+  margin: 0;
+  padding: 2px 20px 2px 4px;
+  font-size: 14px;
+  .textEllipsis();
+  position: relative;
+  :global(.ant-tag-close-icon) {
+    position: absolute;
+    top: 7px;
+    right: 4px;
   }
 }

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

@@ -45,8 +45,10 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
   };
 
   const forMap = (tag: string) => {
-    const tagElem = (
+    return (
       <Tag
+        key={tag}
+        className={styles.tag}
         closable
         onClose={(e) => {
           e.preventDefault();
@@ -56,11 +58,6 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
         {tag}
       </Tag>
     );
-    return (
-      <span key={tag} style={{ display: 'inline-block' }}>
-        {tagElem}
-      </span>
-    );
   };
 
   const tagChild = tags?.map(forMap);
@@ -71,8 +68,8 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
   };
 
   return (
-    <>
+    <div>
-      <span>
+      {Array.isArray(tagChild) && tagChild.length > 0 && (
         <TweenOneGroup
           className={styles.tweenGroup}
           enter={{
@@ -91,7 +88,7 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
         >
           {tagChild}
         </TweenOneGroup>
-      </span>
+      )}
       {inputVisible ? (
         <Input
           ref={inputRef}
@@ -107,7 +104,7 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
           <PlusOutlined />
         </Tag>
       )}
-    </>
+    </div>
   );
 };
 

web/src/locales/en.ts

@@ -326,6 +326,7 @@ When you want to search the given knowledge base at first place, set a higher pa
       graph: 'Knowledge graph',
       mind: 'Mind map',
       question: 'Question',
+      questionTip: `If there're given questions, the embedding of the chunk will be based on them.`,
     },
     chat: {
       newConversation: 'New conversation',

web/src/locales/zh-traditional.ts

@@ -310,6 +310,7 @@ export default {
       graph: '知識圖譜',
       mind: '心智圖',
       question: '問題',
+      questionTip: `如果存在給定的問題，則區塊的嵌入將基於它們。`,
     },
     chat: {
       newConversation: '新會話',

web/src/locales/zh.ts

@@ -327,6 +327,7 @@ export default {
       graph: '知识图谱',
       mind: '思维导图',
       question: '问题',
+      questionTip: `如果有给定的问题，则块的嵌入将基于它们。`,
     },
     chat: {
       newConversation: '新会话',

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

@@ -1,8 +1,8 @@
 import EditTag from '@/components/edit-tag';
 import { useFetchChunk } from '@/hooks/chunk-hooks';
 import { IModalProps } from '@/interfaces/common';
-import { DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { Divider, Form, Input, Modal, Space, Switch } from 'antd';
+import { Divider, Form, Input, Modal, Space, Switch, Tooltip } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDeleteChunkByIds } from '../../hooks';
@@ -41,7 +41,7 @@ const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
       form.setFieldsValue({ content: content_with_weight });
       setKeywords(important_kwd);
       setQuestion(question_kwd);
-      setChecked(available_int === 1);
+      setChecked(available_int !== 0);
     }
 
     if (!chunkId) {
@@ -93,11 +93,16 @@ const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
         </Form.Item>
       </Form>
       <section>
-        <p className="mb-2">{t('chunk.keyword')} *</p>
+        <p className="mb-2">{t('chunk.keyword')} </p>
         <EditTag tags={keywords} setTags={setKeywords} />
       </section>
-      <section className="pt-2">
+      <section className="mt-4">
-        <p className="mb-2">{t('chunk.question')} *</p>
+        <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>
       {chunkId && (

web/src/utils/file-util.ts

@@ -112,20 +112,6 @@ export const downloadFileFromBlob = (blob: Blob, name?: string) => {
   window.URL.revokeObjectURL(url);
 };
 
-export const downloadFile = async ({
-  id,
-  filename,
-  target,
-}: {
-  id: string;
-  filename?: string;
-  target?: string;
-}) => {
-  const response = await fileManagerService.getFile({}, id);
-  const blob = new Blob([response.data], { type: response.data.type });
-  downloadFileFromBlob(blob, filename);
-};
-
 export const downloadDocument = async ({
   id,
   filename,