File size: 3,083 Bytes
b9fe2b4 |
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,
useGetBeginNodeDataQueryIsSafe,
} 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 isBeginNodeDataQuerySafe = useGetBeginNodeDataQueryIsSafe();
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={!isBeginNodeDataQuerySafe}
>
<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;
|