From c8097e97cbe8683d1cdb5b1ba9012f33a8818e93 Mon Sep 17 00:00:00 2001 From: balibabu Date: Tue, 27 Aug 2024 18:49:08 +0800 Subject: [PATCH] feat: Modify the modal style of creating an agent so that there are more templates in the field of view #2122 (#2123) ### What problem does this PR solve? feat: Modify the modal style of creating an agent so that there are more templates in the field of view #2122 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- .../components/llm-setting-items/index.tsx | 4 +- web/src/locales/en.ts | 1 + web/src/locales/zh-traditional.ts | 1 + web/src/locales/zh.ts | 1 + .../testing-result/index.tsx | 4 - .../pages/flow/list/agent-template-modal.tsx | 116 ++++++++++++++++++ .../pages/flow/list/create-agent-modal.tsx | 54 ++++++++ web/src/pages/flow/list/create-flow-modal.tsx | 95 -------------- web/src/pages/flow/list/index.less | 54 ++++++-- web/src/pages/flow/list/index.tsx | 7 +- 10 files changed, 224 insertions(+), 113 deletions(-) create mode 100644 web/src/pages/flow/list/agent-template-modal.tsx create mode 100644 web/src/pages/flow/list/create-agent-modal.tsx delete mode 100644 web/src/pages/flow/list/create-flow-modal.tsx diff --git a/web/src/components/llm-setting-items/index.tsx b/web/src/components/llm-setting-items/index.tsx index 3cf2ec0cb..757007078 100644 --- a/web/src/components/llm-setting-items/index.tsx +++ b/web/src/components/llm-setting-items/index.tsx @@ -272,7 +272,7 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => { > @@ -281,7 +281,7 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => { diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 5acc44c3e..e3549316c 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -857,6 +857,7 @@ The above is the content you need to summarize.`, }, operator: 'Operator', value: 'Value', + useTemplate: 'Use this template', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index 12534fe22..3d2715db5 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -812,6 +812,7 @@ export default { }, operator: '操作符', value: '值', + useTemplate: '使用該模板', }, footer: { profile: '“保留所有權利 @ react”', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index b957e0693..654d636ce 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -830,6 +830,7 @@ export default { }, operator: '操作符', value: '值', + useTemplate: '使用该模板', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx index 199ba4c82..137cb5c1a 100644 --- a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx @@ -86,10 +86,6 @@ const TestingResult = ({ handleTesting }: IProps) => { {t('filesSelected')} - - {t('hits')} - {t('view')} - ), children: ( diff --git a/web/src/pages/flow/list/agent-template-modal.tsx b/web/src/pages/flow/list/agent-template-modal.tsx new file mode 100644 index 000000000..6dfa33e62 --- /dev/null +++ b/web/src/pages/flow/list/agent-template-modal.tsx @@ -0,0 +1,116 @@ +import { IModalManagerChildrenProps } from '@/components/modal-manager'; +import { useSetModalState, useTranslate } from '@/hooks/common-hooks'; +import { useFetchFlowTemplates } from '@/hooks/flow-hooks'; +import { useSelectItem } from '@/hooks/logic-hooks'; +import { Button, Card, Flex, List, Modal, Typography } from 'antd'; +import { useCallback, useState } from 'react'; +import CreateAgentModal from './create-agent-modal'; +import GraphAvatar from './graph-avatar'; + +import styles from './index.less'; + +const { Title, Text, Paragraph } = Typography; +interface IProps extends Omit { + loading: boolean; + onOk: (name: string, templateId: string) => void; + showModal?(): void; +} + +const AgentTemplateModal = ({ visible, hideModal, loading, onOk }: IProps) => { + const { t } = useTranslate('common'); + const { data: list } = useFetchFlowTemplates(); + const { selectedId, handleItemClick } = useSelectItem(''); + const [checkedId, setCheckedId] = useState(''); + + const { + visible: creatingVisible, + hideModal: hideCreatingModal, + showModal: showCreatingModal, + } = useSetModalState(); + + const handleOk = useCallback( + async (name: string) => { + return onOk(name, checkedId); + }, + [onOk, checkedId], + ); + + const onShowCreatingModal = useCallback( + (id: string) => () => { + showCreatingModal(); + setCheckedId(id); + }, + [showCreatingModal], + ); + + return ( + +
+ + {t('createFromTemplates', { keyPrefix: 'flow' })} + + ( + + + + + + + {x.title} + + + +
+ + {x.description} + +
+ {selectedId === x.id && ( + + )} + + + )} + /> +
+ {creatingVisible && ( + + )} + + ); +}; + +export default AgentTemplateModal; diff --git a/web/src/pages/flow/list/create-agent-modal.tsx b/web/src/pages/flow/list/create-agent-modal.tsx new file mode 100644 index 000000000..447bae391 --- /dev/null +++ b/web/src/pages/flow/list/create-agent-modal.tsx @@ -0,0 +1,54 @@ +import { IModalManagerChildrenProps } from '@/components/modal-manager'; +import { useTranslate } from '@/hooks/common-hooks'; +import { Form, Input, Modal } from 'antd'; + +interface IProps extends Omit { + loading: boolean; + onOk: (name: string) => void; + showModal?(): void; +} + +const CreateAgentModal = ({ visible, hideModal, loading, onOk }: IProps) => { + const [form] = Form.useForm(); + const { t } = useTranslate('common'); + + type FieldType = { + name?: string; + }; + + const handleOk = async () => { + const ret = await form.validateFields(); + + return onOk(ret.name); + }; + + return ( + +
+ + label={t('name')} + name="name" + rules={[{ required: true, message: t('namePlaceholder') }]} + > + + + +
+ ); +}; + +export default CreateAgentModal; diff --git a/web/src/pages/flow/list/create-flow-modal.tsx b/web/src/pages/flow/list/create-flow-modal.tsx deleted file mode 100644 index 255b42ec2..000000000 --- a/web/src/pages/flow/list/create-flow-modal.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { IModalManagerChildrenProps } from '@/components/modal-manager'; -import { useTranslate } from '@/hooks/common-hooks'; -import { useFetchFlowTemplates } from '@/hooks/flow-hooks'; -import { useSelectItem } from '@/hooks/logic-hooks'; -import { Card, Flex, Form, Input, Modal, Space, Typography } from 'antd'; -import classNames from 'classnames'; -import { useEffect } from 'react'; -import GraphAvatar from './graph-avatar'; -import styles from './index.less'; - -const { Title } = Typography; -interface IProps extends Omit { - loading: boolean; - initialName: string; - onOk: (name: string, templateId: string) => void; - showModal?(): void; -} - -const CreateFlowModal = ({ - visible, - hideModal, - loading, - initialName, - onOk, -}: IProps) => { - const [form] = Form.useForm(); - const { t } = useTranslate('common'); - const { data: list } = useFetchFlowTemplates(); - const { selectedId, handleItemClick } = useSelectItem(list?.at(0)?.id); - - type FieldType = { - name?: string; - }; - - const handleOk = async () => { - const ret = await form.validateFields(); - - return onOk(ret.name, selectedId); - }; - - useEffect(() => { - if (visible) { - form.setFieldValue('name', initialName); - } - }, [initialName, form, visible]); - - return ( - -
- - label={{t('name')}} - name="name" - rules={[{ required: true, message: t('namePlaceholder') }]} - > - - - - {t('createFromTemplates', { keyPrefix: 'flow' })} - - {list?.map((x) => ( - - - - {x.title} - -

{x.description}

- - ))} - -
- ); -}; - -export default CreateFlowModal; diff --git a/web/src/pages/flow/list/index.less b/web/src/pages/flow/list/index.less index 112e57d32..7dffd8a32 100644 --- a/web/src/pages/flow/list/index.less +++ b/web/src/pages/flow/list/index.less @@ -47,15 +47,53 @@ } } -.flowTemplateCard { - cursor: pointer; -} - -.selectedFlowTemplateCard { - background-color: @selectedBackgroundColor; -} - .templatesBox { max-height: 70vh; overflow: auto; } + +.agentTemplateModal { + top: 0; + margin: 0; + width: 100%; + max-width: 100%; + height: 100vh; + max-height: 100vh; + padding: 0; + + :global(.ant-modal-content) { + // width: 100vw; + height: 100%; + border-radius: 0; + } + .agentDescription { + padding-top: 18px; + height: 110px; + } + .createModalContent { + height: 90vh; + } + .agentTitleWrapper { + width: 80%; + } + .flowTemplateCard { + position: relative; + cursor: pointer; + } + + .selectedFlowTemplateCard { + background-color: @selectedBackgroundColor; + } + .useButton { + position: absolute; + width: 84%; + left: 0; + right: 0; + bottom: 10px; + margin: auto; + } +} + +.agentTemplateModalWrapper { + margin: 0; +} diff --git a/web/src/pages/flow/list/index.tsx b/web/src/pages/flow/list/index.tsx index 3e6f7caf0..20330b15b 100644 --- a/web/src/pages/flow/list/index.tsx +++ b/web/src/pages/flow/list/index.tsx @@ -1,6 +1,6 @@ import { PlusOutlined } from '@ant-design/icons'; import { Button, Empty, Flex, Spin } from 'antd'; -import CreateFlowModal from './create-flow-modal'; +import AgentTemplateModal from './agent-template-modal'; import FlowCard from './flow-card'; import { useFetchDataOnMount, useSaveFlow } from './hooks'; @@ -42,13 +42,12 @@ const FlowList = () => { {flowSettingVisible && ( - + > )} );