From 1f967191d4f7005252ead34381102f20307adcd3 Mon Sep 17 00:00:00 2001 From: balibabu Date: Mon, 8 Jul 2024 12:32:46 +0800 Subject: [PATCH] feat: add icon to title of operator form #918 (#1413) ### What problem does this PR solve? feat: add icon to title of operator form #918 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/locales/en.ts | 1 + web/src/locales/zh-traditional.ts | 1 + web/src/locales/zh.ts | 1 + web/src/pages/flow/flow-drawer/index.less | 3 +++ web/src/pages/flow/flow-drawer/index.tsx | 25 ++++++++++++++----- web/src/pages/flow/generate-form/index.tsx | 4 +-- web/src/pages/flow/relevant-form/index.tsx | 4 +-- .../flow/rewrite-question-form/index.tsx | 4 +-- 8 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 web/src/pages/flow/flow-drawer/index.less diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index ef52a7d20..60ba6c1e2 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -567,6 +567,7 @@ The above is the content you need to summarize.`, operation: 'operation', run: 'Run', save: 'Save', + title: 'Title:', beginDescription: 'This is where the flow begin', answerDescription: `This component is used as an interface between bot and human. It receives input of user and display the result of the computation of the bot.`, retrievalDescription: `This component is for the process of retrieving relevent information from knowledge base. So, knowledgebases should be selected. If there's nothing retrieved, the 'Empty response' will be returned.`, diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index 4562e2565..5a7fd4c67 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -527,6 +527,7 @@ export default { operation: '操作', run: '運行', save: '儲存', + title: '標題：', beginDescription: '這是流程開始的地方', answerDescription: `該組件用作機器人與人類之間的介面。它接收使用者的輸入並顯示機器人的計算結果。`, retrievalDescription: `此元件用於從知識庫中檢索相關資訊。選擇知識庫。如果沒有檢索到任何內容，將傳回「空響應」。`, diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index e669c7668..a4562ada6 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -546,6 +546,7 @@ export default { operation: '操作', run: '运行', save: '保存', + title: '标题：', beginDescription: '这是流程开始的地方', answerDescription: `该组件用作机器人与人类之间的接口。它接收用户的输入并显示机器人的计算结果。`, retrievalDescription: `此组件用于从知识库中检索相关信息。选择知识库。如果没有检索到任何内容，将返回“空响应”。`, diff --git a/web/src/pages/flow/flow-drawer/index.less b/web/src/pages/flow/flow-drawer/index.less new file mode 100644 index 000000000..c6740fa7c --- /dev/null +++ b/web/src/pages/flow/flow-drawer/index.less @@ -0,0 +1,3 @@ +.title { + flex-basis: 60px; +} diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx index 355e1a39c..372ae5452 100644 --- a/web/src/pages/flow/flow-drawer/index.tsx +++ b/web/src/pages/flow/flow-drawer/index.tsx @@ -1,5 +1,6 @@ +import { useTranslate } from '@/hooks/commonHooks'; import { IModalProps } from '@/interfaces/common'; -import { Drawer, Form, Input } from 'antd'; +import { Drawer, Flex, Form, Input } from 'antd'; import { useEffect } from 'react'; import { Node } from 'reactflow'; import AnswerForm from '../answer-form'; @@ -9,10 +10,13 @@ import { Operator } from '../constant'; import GenerateForm from '../generate-form'; import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks'; import MessageForm from '../message-form'; +import OperatorIcon from '../operator-icon'; import RelevantForm from '../relevant-form'; import RetrievalForm from '../retrieval-form'; import RewriteQuestionForm from '../rewrite-question-form'; +import styles from './index.less'; + interface IProps { node?: Node; } @@ -40,6 +44,7 @@ const FlowDrawer = ({ const [form] = Form.useForm(); const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange(node); + const { t } = useTranslate('flow'); const { handleValuesChange } = useHandleFormValuesChange(node?.id); @@ -52,11 +57,19 @@ const FlowDrawer = ({ return ( + + + + + + + } placement="right" onClose={hideModal} diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx index 159f1ad8a..8cb833a26 100644 --- a/web/src/pages/flow/generate-form/index.tsx +++ b/web/src/pages/flow/generate-form/index.tsx @@ -13,8 +13,8 @@ const GenerateForm = ({ onValuesChange, form, node }: IOperatorForm) => { return (
{ return ( { return (