From 37751dfd4d759ebb4fbce5350a5bee770c722a58 Mon Sep 17 00:00:00 2001 From: bill Date: Thu, 5 Dec 2024 16:41:00 +0800 Subject: [PATCH 1/2] Feat: Add tooltip to question item of ChunkCreatingModal #3873 --- web/src/components/edit-tag/index.less | 23 +++++++++--- web/src/components/edit-tag/index.tsx | 17 ++++----- web/src/locales/en.ts | 1 + web/src/locales/zh-traditional.ts | 1 + web/src/locales/zh.ts | 1 + .../components/chunk-creating-modal/index.tsx | 17 +++++---- web/src/pages/flow/canvas/index.tsx | 35 ++++++++++++++++++- web/src/utils/file-util.ts | 14 -------- 8 files changed, 73 insertions(+), 36 deletions(-) diff --git a/web/src/components/edit-tag/index.less b/web/src/components/edit-tag/index.less index df7a2da0296..ef67d102383 100644 --- a/web/src/components/edit-tag/index.less +++ b/web/src/components/edit-tag/index.less @@ -1,8 +1,21 @@ .tweenGroup { - display: inline-block; - :global(.ant-tag) { - margin-bottom: 8px; - font-size: 14px; - padding: 2px 8px; + display: flex; + gap: 8px; + flex-wrap: wrap; + width: 100%; + 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; } } diff --git a/web/src/components/edit-tag/index.tsx b/web/src/components/edit-tag/index.tsx index 28265da6e7a..1c9f0aee846 100644 --- a/web/src/components/edit-tag/index.tsx +++ b/web/src/components/edit-tag/index.tsx @@ -45,8 +45,10 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => { }; const forMap = (tag: string) => { - const tagElem = ( + return ( { e.preventDefault(); @@ -56,11 +58,6 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => { {tag} ); - return ( - - {tagElem} - - ); }; const tagChild = tags?.map(forMap); @@ -71,8 +68,8 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => { }; return ( - <> - +
+ {Array.isArray(tagChild) && tagChild.length > 0 && ( { > {tagChild} - + )} {inputVisible ? ( { )} - +
); }; diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index c5c850b1120..395e7d2d4aa 100644 --- a/web/src/locales/en.ts +++ b/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', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index 311b408339b..77f1d13cad4 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -310,6 +310,7 @@ export default { graph: '知識圖譜', mind: '心智圖', question: '問題', + questionTip: `如果存在給定的問題，則區塊的嵌入將基於它們。`, }, chat: { newConversation: '新會話', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index e4fc4a8b8d0..2b8f8a0e464 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -327,6 +327,7 @@ export default { graph: '知识图谱', mind: '思维导图', question: '问题', + questionTip: `如果有给定的问题，则块的嵌入将基于它们。`, }, chat: { newConversation: '新会话', diff --git 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 index 922a1c9a14d..01a7b34da91 100644 --- 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,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 { Divider, Form, Input, Modal, Space, Switch } from 'antd'; +import { DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons'; +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 & 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 & kFProps> = ({
-

{t('chunk.keyword')} *

+

{t('chunk.keyword')}

-
-

{t('chunk.question')} *

+
+
+ {t('chunk.question')} + + + +
{chunkId && ( diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx index d372f119862..206db188b91 100644 --- a/web/src/pages/flow/canvas/index.tsx +++ b/web/src/pages/flow/canvas/index.tsx @@ -1,8 +1,16 @@ +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip'; import { useSetModalState } from '@/hooks/common-hooks'; +import { FolderOutput, Import } from 'lucide-react'; import { useCallback, useEffect } from 'react'; import ReactFlow, { Background, ConnectionMode, + ControlButton, Controls, NodeMouseHandler, } from 'reactflow'; @@ -192,7 +200,32 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) { deleteKeyCode={['Delete', 'Backspace']} > - + + alert('Something magical just happened. ✨')} + > + + + + + + Import + + + + alert('Something magical just happened. ✨')} + > + + + + + + Export + + + + {formDrawerVisible && ( { 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, From e4c42a9be654bc22857091cc3d52efbef924d132 Mon Sep 17 00:00:00 2001 From: bill Date: Thu, 5 Dec 2024 16:45:15 +0800 Subject: [PATCH 2/2] Feat: Add tooltip to question item of ChunkCreatingModal again #3873 --- web/src/components/edit-tag/index.less | 23 ++++--------------- web/src/components/edit-tag/index.tsx | 17 ++++++++------ web/src/locales/en.ts | 1 - web/src/locales/zh-traditional.ts | 1 - web/src/locales/zh.ts | 1 - .../components/chunk-creating-modal/index.tsx | 17 +++++--------- web/src/utils/file-util.ts | 14 +++++++++++ 7 files changed, 35 insertions(+), 39 deletions(-) diff --git a/web/src/components/edit-tag/index.less b/web/src/components/edit-tag/index.less index ef67d102383..df7a2da0296 100644 --- a/web/src/components/edit-tag/index.less +++ b/web/src/components/edit-tag/index.less @@ -1,21 +1,8 @@ .tweenGroup { - display: flex; - gap: 8px; - flex-wrap: wrap; - width: 100%; - 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; + display: inline-block; + :global(.ant-tag) { + margin-bottom: 8px; + font-size: 14px; + padding: 2px 8px; } } diff --git a/web/src/components/edit-tag/index.tsx b/web/src/components/edit-tag/index.tsx index 1c9f0aee846..28265da6e7a 100644 --- a/web/src/components/edit-tag/index.tsx +++ b/web/src/components/edit-tag/index.tsx @@ -45,10 +45,8 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => { }; const forMap = (tag: string) => { - return ( + const tagElem = ( { e.preventDefault(); @@ -58,6 +56,11 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => { {tag} ); + return ( + + {tagElem} + + ); }; const tagChild = tags?.map(forMap); @@ -68,8 +71,8 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => { }; return ( -
- {Array.isArray(tagChild) && tagChild.length > 0 && ( + <> + { > {tagChild} - )} + {inputVisible ? ( { )} -
+ ); }; diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 395e7d2d4aa..c5c850b1120 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -326,7 +326,6 @@ 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', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index 77f1d13cad4..311b408339b 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -310,7 +310,6 @@ export default { graph: '知識圖譜', mind: '心智圖', question: '問題', - questionTip: `如果存在給定的問題，則區塊的嵌入將基於它們。`, }, chat: { newConversation: '新會話', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index 2b8f8a0e464..e4fc4a8b8d0 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -327,7 +327,6 @@ export default { graph: '知识图谱', mind: '思维导图', question: '问题', - questionTip: `如果有给定的问题，则块的嵌入将基于它们。`, }, chat: { newConversation: '新会话', diff --git 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 index 01a7b34da91..922a1c9a14d 100644 --- 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,8 +1,8 @@ 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 { DeleteOutlined } from '@ant-design/icons'; +import { Divider, Form, Input, Modal, Space, Switch } 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 & kFProps> = ({ form.setFieldsValue({ content: content_with_weight }); setKeywords(important_kwd); setQuestion(question_kwd); - setChecked(available_int !== 0); + setChecked(available_int === 1); } if (!chunkId) { @@ -93,16 +93,11 @@ const ChunkCreatingModal: React.FC & kFProps> = ({
-

{t('chunk.keyword')}

+

{t('chunk.keyword')} *

-
-
- {t('chunk.question')} - - - -
+
+

{t('chunk.question')} *

{chunkId && ( diff --git a/web/src/utils/file-util.ts b/web/src/utils/file-util.ts index 9645b560a35..c2b0fb9d385 100644 --- a/web/src/utils/file-util.ts +++ b/web/src/utils/file-util.ts @@ -112,6 +112,20 @@ 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,