File size: 3,820 Bytes
68ed806 5365cac 194d038 13080d4 be99f83 e878c81 4c2d648 6e0d24d be99f83 95ccaf9 70b1cb8 be99f83 0109a6b 6e0d24d 0109a6b be99f83 2c5f7df 95ccaf9 99d136b 2653e84 6e0d24d ed19e93 194d038 77dbe3e 42dbb1f 457df3d be99f83 457df3d 99e5e05 5d3a620 99e5e05 194d038 be99f83 70b1cb8 ed19e93 457df3d 6e0d24d 5d3a620 77dbe3e e878c81 95ccaf9 99d136b 284d945 2c5f7df 4c2d648 42dbb1f 0109a6b 99e5e05 be99f83 591888d be99f83 591888d 13080d4 2653e84 194d038 13080d4 be99f83 5365cac 13080d4 5365cac 2653e84 194d038 2653e84 5365cac be99f83 5365cac be99f83 13080d4 f277af2 13080d4 be99f83 5365cac |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import { useTranslate } from '@/hooks/common-hooks';
import { IModalProps } from '@/interfaces/common';
import { Drawer, Flex, Form, Input } from 'antd';
import { useEffect } from 'react';
import { Node } from 'reactflow';
import AnswerForm from '../answer-form';
import ArXivForm from '../arxiv-form';
import BaiduFanyiForm from '../baidu-fanyi-form';
import BaiduForm from '../baidu-form';
import BeginForm from '../begin-form';
import BingForm from '../bing-form';
import CategorizeForm from '../categorize-form';
import { Operator } from '../constant';
import DeepLForm from '../deepl-form';
import DuckDuckGoForm from '../duckduckgo-form';
import ExeSQLForm from '../exesql-form';
import GenerateForm from '../generate-form';
import GithubForm from '../github-form';
import GoogleForm from '../google-form';
import GoogleScholarForm from '../google-scholar-form';
import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
import KeywordExtractForm from '../keyword-extract-form';
import MessageForm from '../message-form';
import OperatorIcon from '../operator-icon';
import PubMedForm from '../pubmed-form';
import QWeatherForm from '../qweather-form';
import RelevantForm from '../relevant-form';
import RetrievalForm from '../retrieval-form';
import RewriteQuestionForm from '../rewrite-question-form';
import SwitchForm from '../switch-form';
import WikipediaForm from '../wikipedia-form';
import styles from './index.less';
interface IProps {
node?: Node;
}
const FormMap = {
[Operator.Begin]: BeginForm,
[Operator.Retrieval]: RetrievalForm,
[Operator.Generate]: GenerateForm,
[Operator.Answer]: AnswerForm,
[Operator.Categorize]: CategorizeForm,
[Operator.Message]: MessageForm,
[Operator.Relevant]: RelevantForm,
[Operator.RewriteQuestion]: RewriteQuestionForm,
[Operator.Baidu]: BaiduForm,
[Operator.DuckDuckGo]: DuckDuckGoForm,
[Operator.KeywordExtract]: KeywordExtractForm,
[Operator.Wikipedia]: WikipediaForm,
[Operator.PubMed]: PubMedForm,
[Operator.ArXiv]: ArXivForm,
[Operator.Google]: GoogleForm,
[Operator.Bing]: BingForm,
[Operator.GoogleScholar]: GoogleScholarForm,
[Operator.DeepL]: DeepLForm,
[Operator.GitHub]: GithubForm,
[Operator.BaiduFanyi]: BaiduFanyiForm,
[Operator.QWeather]: QWeatherForm,
[Operator.ExeSQL]: ExeSQLForm,
[Operator.Switch]: SwitchForm,
};
const EmptyContent = () => <div>empty</div>;
const FlowDrawer = ({
visible,
hideModal,
node,
}: IModalProps<any> & IProps) => {
const operatorName: Operator = node?.data.label;
const OperatorForm = FormMap[operatorName] ?? EmptyContent;
const [form] = Form.useForm();
const { name, handleNameBlur, handleNameChange } =
useHandleNodeNameChange(node);
const { t } = useTranslate('flow');
const { handleValuesChange } = useHandleFormValuesChange(node?.id);
useEffect(() => {
if (visible) {
form.setFieldsValue(node?.data?.form);
}
}, [visible, form, node?.data?.form]);
return (
<Drawer
title={
<Flex gap={'middle'} align="center">
<OperatorIcon name={operatorName}></OperatorIcon>
<Flex align="center" gap={'small'} flex={1}>
<label htmlFor="" className={styles.title}>
{t('title')}
</label>
<Input
value={name}
onBlur={handleNameBlur}
onChange={handleNameChange}
></Input>
</Flex>
</Flex>
}
placement="right"
onClose={hideModal}
open={visible}
getContainer={false}
mask={false}
width={470}
>
{visible && (
<OperatorForm
onValuesChange={handleValuesChange}
form={form}
node={node}
></OperatorForm>
)}
</Drawer>
);
};
export default FlowDrawer;
|