File size: 2,119 Bytes
5365cac
2653e84
13080d4
be99f83
 
 
70b1cb8
be99f83
 
2653e84
ed19e93
457df3d
be99f83
457df3d
be99f83
 
 
 
 
 
 
 
 
 
70b1cb8
ed19e93
457df3d
 
be99f83
 
591888d
 
be99f83
 
 
 
 
 
591888d
13080d4
2653e84
 
13080d4
be99f83
5365cac
13080d4
 
 
 
 
 
5365cac
 
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
import { IModalProps } from '@/interfaces/common';
import { Drawer, Form, Input } from 'antd';
import { useEffect } from 'react';
import { Node } from 'reactflow';
import AnswerForm from '../answer-form';
import BeginForm from '../begin-form';
import CategorizeForm from '../categorize-form';
import { Operator } from '../constant';
import GenerateForm from '../generate-form';
import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
import MessageForm from '../message-form';
import RelevantForm from '../relevant-form';
import RetrievalForm from '../retrieval-form';
import RewriteQuestionForm from '../rewrite-question-form';

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,
};

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 { handleValuesChange } = useHandleFormValuesChange(node?.id);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue(node?.data?.form);
    }
  }, [visible, form, node?.data?.form]);

  return (
    <Drawer
      title={
        <Input
          value={name}
          onBlur={handleNameBlur}
          onChange={handleNameChange}
        ></Input>
      }
      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;