File size: 2,151 Bytes
5743e5f
 
8441328
 
12f28d5
5743e5f
f5ebe5e
f72cd8c
e3322d7
 
09502ac
 
 
 
 
e3322d7
f72cd8c
8441328
12f28d5
5743e5f
 
 
 
 
f5ebe5e
5743e5f
e3322d7
 
8441328
 
 
 
 
 
 
 
 
 
 
 
 
 
f72cd8c
12f28d5
8441328
 
12f28d5
8441328
f5ebe5e
5743e5f
f5ebe5e
 
 
5743e5f
8441328
 
5743e5f
 
 
 
 
 
 
 
f5ebe5e
8441328
e3322d7
 
 
 
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
import ChatOverviewModal from '@/components/api-service/chat-overview-modal';
import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
import { useFetchFlow } from '@/hooks/flow-hooks';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Button, Flex, Space } from 'antd';
import { Link, useParams } from 'umi';
import FlowIdModal from '../flow-id-modal';
import { useSaveGraph, useSaveGraphBeforeOpeningDebugDrawer } from '../hooks';
import styles from './index.less';

interface IProps {
  showChatDrawer(): void;
}

const FlowHeader = ({ showChatDrawer }: IProps) => {
  const { saveGraph } = useSaveGraph();
  const handleRun = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
  const { data } = useFetchFlow();
  const { t } = useTranslate('flow');
  const {
    visible: overviewVisible,
    hideModal: hideOverviewModal,
    showModal: showOverviewModal,
  } = useSetModalState();
  const { visible, hideModal, showModal } = useSetModalState();
  const { id } = useParams();

  return (
    <>
      <Flex
        align="center"
        justify={'space-between'}
        gap={'large'}
        className={styles.flowHeader}
      >
        <Space size={'large'}>
          <Link to={`/flow`}>
            <ArrowLeftOutlined />
          </Link>
          <h3>{data.title}</h3>
        </Space>
        <Space size={'large'}>
          <Button onClick={handleRun}>
            <b>{t('run')}</b>
          </Button>
          <Button type="primary" onClick={saveGraph}>
            <b>{t('save')}</b>
          </Button>
          {/* <Button type="primary" onClick={showOverviewModal} disabled>
            <b>{t('publish')}</b>
          </Button> */}
          <Button type="primary" onClick={showModal}>
            <b>Agent ID</b>
          </Button>
        </Space>
      </Flex>
      {overviewVisible && (
        <ChatOverviewModal
          visible={overviewVisible}
          hideModal={hideOverviewModal}
          id={id!}
          idKey="canvasId"
        ></ChatOverviewModal>
      )}
      {visible && <FlowIdModal hideModal={hideModal}></FlowIdModal>}
    </>
  );
};

export default FlowHeader;