From cd3c7399822407e27e28bb95e13ed1e5a85075fa Mon Sep 17 00:00:00 2001 From: balibabu Date: Fri, 28 Jun 2024 16:25:20 +0800 Subject: [PATCH] feat: add MessageForm #918 (#1312) ### What problem does this PR solve? feat: add MessageForm #918 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/locales/en.ts | 4 + web/src/locales/zh-traditional.ts | 4 + web/src/locales/zh.ts | 4 + web/src/pages/flow/constant.tsx | 10 +++ web/src/pages/flow/flow-drawer/index.tsx | 2 + web/src/pages/flow/message-form/index.less | 16 ++++ web/src/pages/flow/message-form/index.tsx | 89 ++++++++++++++++------ 7 files changed, 105 insertions(+), 24 deletions(-) create mode 100644 web/src/pages/flow/message-form/index.less diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index a754ed8ea..cea7715b7 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -552,6 +552,10 @@ The above is the content you need to summarize.`, description: 'Description', examples: 'Examples', to: 'To', + message: 'Messages', + messagePlaceholder: 'message', + messageMsg: 'Please input message or delete this field.', + addField: 'Add field', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index bb10a4f3d..852f993f1 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -513,6 +513,10 @@ export default { description: '描述', examples: '範例', to: '到', + message: '訊息', + messagePlaceholder: '訊息', + messageMsg: '請輸入訊息或刪除此欄位。', + addField: '新增字段', }, footer: { profile: '“保留所有權利 @ react”', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index e24fdc8af..0a4df44d5 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -531,6 +531,10 @@ export default { description: '描述', examples: '示例', to: '到', + message: '消息', + messagePlaceholder: '消息', + messageMsg: '请输入消息或删除此字段。', + addField: '新增字段', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx index 12579bd50..10e64e311 100644 --- a/web/src/pages/flow/constant.tsx +++ b/web/src/pages/flow/constant.tsx @@ -1,6 +1,7 @@ import { DatabaseOutlined, MergeCellsOutlined, + MessageOutlined, RocketOutlined, SendOutlined, SlidersOutlined, @@ -12,6 +13,7 @@ export enum Operator { Generate = 'Generate', Answer = 'Answer', Categorize = 'Categorize', + Message = 'Message', } export const operatorIconMap = { @@ -20,6 +22,7 @@ export const operatorIconMap = { [Operator.Answer]: SendOutlined, [Operator.Begin]: SlidersOutlined, [Operator.Categorize]: DatabaseOutlined, + [Operator.Message]: MessageOutlined, }; export const operatorMap = { @@ -30,6 +33,7 @@ export const operatorMap = { [Operator.Answer]: { description: 'Answer description' }, [Operator.Begin]: { description: 'Begin description' }, [Operator.Categorize]: { description: 'Categorize description' }, + [Operator.Message]: { description: 'Message description' }, }; export const componentMenuList = [ @@ -49,6 +53,10 @@ export const componentMenuList = [ name: Operator.Categorize, description: operatorMap[Operator.Categorize].description, }, + { + name: Operator.Message, + description: operatorMap[Operator.Message].description, + }, ]; export const initialRetrievalValues = { @@ -106,6 +114,7 @@ export const RestrictedUpstreamMap = { [Operator.Answer]: [], [Operator.Retrieval]: [], [Operator.Generate]: [], + [Operator.Message]: [], }; export const NodeMap = { @@ -114,4 +123,5 @@ export const NodeMap = { [Operator.Retrieval]: 'ragNode', [Operator.Generate]: 'ragNode', [Operator.Answer]: 'ragNode', + [Operator.Message]: 'ragNode', }; diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx index eec9beab8..1f73b91db 100644 --- a/web/src/pages/flow/flow-drawer/index.tsx +++ b/web/src/pages/flow/flow-drawer/index.tsx @@ -8,6 +8,7 @@ import CategorizeForm from '../categorize-form'; import { Operator } from '../constant'; import GenerateForm from '../generate-form'; import { useHandleFormValuesChange } from '../hooks'; +import MessageForm from '../message-form'; import RetrievalForm from '../retrieval-form'; interface IProps { @@ -20,6 +21,7 @@ const FormMap = { [Operator.Generate]: GenerateForm, [Operator.Answer]: AnswerForm, [Operator.Categorize]: CategorizeForm, + [Operator.Message]: MessageForm, }; const FlowDrawer = ({ diff --git a/web/src/pages/flow/message-form/index.less b/web/src/pages/flow/message-form/index.less new file mode 100644 index 000000000..9725f89d2 --- /dev/null +++ b/web/src/pages/flow/message-form/index.less @@ -0,0 +1,16 @@ +.dynamicDeleteButton { + position: relative; + top: 4px; + margin: 0 8px; + color: #999; + font-size: 24px; + cursor: pointer; + transition: all 0.3s; + &:hover { + color: #777; + } + &[disabled] { + cursor: not-allowed; + opacity: 0.5; + } +} diff --git a/web/src/pages/flow/message-form/index.tsx b/web/src/pages/flow/message-form/index.tsx index 0e0267e64..64138474f 100644 --- a/web/src/pages/flow/message-form/index.tsx +++ b/web/src/pages/flow/message-form/index.tsx @@ -1,44 +1,85 @@ import { useTranslate } from '@/hooks/commonHooks'; -import type { FormProps } from 'antd'; -import { Form, Input } from 'antd'; +import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; +import { Button, Form, Input } from 'antd'; import { IOperatorForm } from '../interface'; -type FieldType = { - prologue?: string; +import styles from './index.less'; + +const formItemLayout = { + labelCol: { + sm: { span: 6 }, + }, + wrapperCol: { + sm: { span: 18 }, + }, }; -const onFinish: FormProps['onFinish'] = (values) => { - console.log('Success:', values); -}; - -const onFinishFailed: FormProps['onFinishFailed'] = (errorInfo) => { - console.log('Failed:', errorInfo); +const formItemLayoutWithOutLabel = { + wrapperCol: { + sm: { span: 18, offset: 6 }, + }, }; const MessageForm = ({ onValuesChange, form }: IOperatorForm) => { - const { t } = useTranslate('chat'); + const { t } = useTranslate('flow'); return (
- - name={'prologue'} - label={t('setAnOpener')} - tooltip={t('setAnOpenerTip')} - initialValue={t('setAnOpenerInitial')} - > - - + + {(fields, { add, remove }, {}) => ( + <> + {fields.map((field, index) => ( + + + + + {fields.length > 1 ? ( + remove(field.name)} + /> + ) : null} + + ))} + + + + + )} + ); };