File size: 3,874 Bytes
c33b05f 7ae407c c33b05f 7ae407c c33b05f |
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 |
import { IModalManagerChildrenProps } from '@/components/modal-manager';
import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
import { useSelectItem } from '@/hooks/logic-hooks';
import { Button, Card, Flex, List, Modal, Typography } from 'antd';
import { useCallback, useState } from 'react';
import CreateAgentModal from './create-agent-modal';
import GraphAvatar from './graph-avatar';
import DOMPurify from 'dompurify';
import styles from './index.less';
const { Title, Text, Paragraph } = Typography;
interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
loading: boolean;
onOk: (name: string, templateId: string) => void;
showModal?(): void;
}
const AgentTemplateModal = ({ visible, hideModal, loading, onOk }: IProps) => {
const { t } = useTranslate('common');
const { data: list } = useFetchFlowTemplates();
const { selectedId, handleItemClick } = useSelectItem('');
const [checkedId, setCheckedId] = useState<string>('');
const {
visible: creatingVisible,
hideModal: hideCreatingModal,
showModal: showCreatingModal,
} = useSetModalState();
const handleOk = useCallback(
async (name: string) => {
return onOk(name, checkedId);
},
[onOk, checkedId],
);
const onShowCreatingModal = useCallback(
(id: string) => () => {
showCreatingModal();
setCheckedId(id);
},
[showCreatingModal],
);
return (
<Modal
title={t('createGraph', { keyPrefix: 'flow' })}
open={visible}
width={'100vw'}
onCancel={hideModal}
okButtonProps={{ loading }}
confirmLoading={loading}
className={styles.agentTemplateModal}
wrapClassName={styles.agentTemplateModalWrapper}
footer={null}
>
<section className={styles.createModalContent}>
<Title level={5}>
{t('createFromTemplates', { keyPrefix: 'flow' })}
</Title>
<List
grid={{ gutter: 16, column: 4 }}
dataSource={list}
renderItem={(x) => (
<List.Item>
<Card
key={x.id}
onMouseEnter={handleItemClick(x.id)}
onMouseLeave={handleItemClick('')}
className={styles.flowTemplateCard}
>
<Flex gap={'middle'} align="center">
<GraphAvatar avatar={x.avatar}></GraphAvatar>
<b className={styles.agentTitleWrapper}>
<Text
style={{ width: '96%' }}
ellipsis={{ tooltip: x.title }}
>
{x.title}
</Text>
</b>
</Flex>
<div className={styles.agentDescription}>
<Paragraph ellipsis={{ tooltip: x.description, rows: 5 }}>
<div
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(x.description),
}}
></div>
</Paragraph>
</div>
{selectedId === x.id && (
<Button
type={'primary'}
block
onClick={onShowCreatingModal(x.id)}
className={styles.useButton}
>
{t('useTemplate', { keyPrefix: 'flow' })}
</Button>
)}
</Card>
</List.Item>
)}
/>
</section>
{creatingVisible && (
<CreateAgentModal
loading={loading}
visible={creatingVisible}
hideModal={hideCreatingModal}
onOk={handleOk}
></CreateAgentModal>
)}
</Modal>
);
};
export default AgentTemplateModal;
|