File size: 3,087 Bytes
a432686 8441328 12f28d5 f859b0d 5743e5f bdb8bf3 f859b0d a432686 2bdad3e bdb8bf3 2bdad3e f859b0d 2bdad3e e3322d7 09502ac ad5587c 09502ac ad5587c e3322d7 f859b0d 8441328 12f28d5 5743e5f ad5587c f859b0d a432686 f859b0d e3322d7 8441328 bdb8bf3 4928b00 bdb8bf3 8441328 f859b0d 12f28d5 8441328 f859b0d 12f28d5 8441328 a432686 414b804 5743e5f 8441328 a432686 5743e5f 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 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 |
import EmbedModal from '@/components/api-service/embed-modal';
import { useShowEmbedModal } from '@/components/api-service/hooks';
import { SharedFrom } from '@/constants/chat';
import { useTranslate } from '@/hooks/common-hooks';
import { useFetchFlow } from '@/hooks/flow-hooks';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Button, Flex, Space } from 'antd';
import { useCallback } from 'react';
import { Link, useParams } from 'umi';
import {
useGetBeginNodeDataQuery,
useGetBeginNodeDataQueryIsEmpty,
} from '../hooks/use-get-begin-query';
import {
useSaveGraph,
useSaveGraphBeforeOpeningDebugDrawer,
useWatchAgentChange,
} from '../hooks/use-save-graph';
import { BeginQuery } from '../interface';
import styles from './index.less';
interface IProps {
showChatDrawer(): void;
chatDrawerVisible: boolean;
}
const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
const { saveGraph } = useSaveGraph();
const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
const { data } = useFetchFlow();
const { t } = useTranslate('flow');
const { id } = useParams();
const time = useWatchAgentChange(chatDrawerVisible);
const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
useShowEmbedModal();
const isBeginNodeDataQueryEmpty = useGetBeginNodeDataQueryIsEmpty();
const handleShowEmbedModal = useCallback(() => {
showEmbedModal();
}, [showEmbedModal]);
const handleRunAgent = useCallback(() => {
const query: BeginQuery[] = getBeginNodeDataQuery();
if (query.length > 0) {
showChatDrawer();
} else {
handleRun();
}
}, [getBeginNodeDataQuery, handleRun, showChatDrawer]);
return (
<>
<Flex
align="center"
justify={'space-between'}
gap={'large'}
className={styles.flowHeader}
>
<Space size={'large'}>
<Link to={`/flow`}>
<ArrowLeftOutlined />
</Link>
<div className="flex flex-col">
<span className="font-semibold text-[18px]">{data.title}</span>
<span className="font-normal text-sm">
{t('autosaved')} {time}
</span>
</div>
</Space>
<Space size={'large'}>
<Button onClick={handleRunAgent}>
<b>{t('run')}</b>
</Button>
<Button type="primary" onClick={() => saveGraph()}>
<b>{t('save')}</b>
</Button>
<Button
type="primary"
onClick={handleShowEmbedModal}
disabled={!isBeginNodeDataQueryEmpty}
>
<b>{t('embedIntoSite', { keyPrefix: 'common' })}</b>
</Button>
</Space>
</Flex>
{embedVisible && (
<EmbedModal
visible={embedVisible}
hideModal={hideEmbedModal}
token={id!}
form={SharedFrom.Agent}
beta={beta}
isAgent
></EmbedModal>
)}
</>
);
};
export default FlowHeader;
|