101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import useOverlayScroller from '@/hooks/use-overlay-scroller';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Modal, Typography } from 'antd';
|
|
import React from 'react';
|
|
import 'simplebar-react/dist/simplebar.min.css';
|
|
import promptList from '../config/prompt';
|
|
import '../style/prompt-modal.less';
|
|
|
|
type ViewModalProps = {
|
|
open: boolean;
|
|
onCancel: () => void;
|
|
onSelect: (list: { role: string; content: string }[]) => void;
|
|
};
|
|
|
|
const AddWorker: React.FC<ViewModalProps> = (props) => {
|
|
const { open, onCancel } = props || {};
|
|
const intl = useIntl();
|
|
const { initialize } = useOverlayScroller();
|
|
const scrollerRef = React.useRef<any>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (scrollerRef.current) {
|
|
initialize(scrollerRef.current);
|
|
}
|
|
}, [scrollerRef.current, initialize]);
|
|
|
|
const handleSelect = (item: {
|
|
title: string;
|
|
data: { role: string; content: string }[];
|
|
}) => {
|
|
props.onSelect(item.data);
|
|
onCancel();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="Prompts"
|
|
open={open}
|
|
centered={true}
|
|
onCancel={onCancel}
|
|
destroyOnClose={true}
|
|
closeIcon={true}
|
|
maskClosable={false}
|
|
keyboard={false}
|
|
width={660}
|
|
styles={{
|
|
content: {
|
|
padding: '0'
|
|
},
|
|
header: {
|
|
padding: 'var(--ant-modal-content-padding)',
|
|
marginBottom: '0'
|
|
}
|
|
}}
|
|
footer={null}
|
|
>
|
|
<div ref={scrollerRef} style={{ maxHeight: '550px', overflow: 'auto' }}>
|
|
<div className="prompt-wrapper">
|
|
{promptList.map((item, index) => {
|
|
return (
|
|
<div key={index} className="prompt-item">
|
|
<h3 className="title">
|
|
<span className="text">{item.title}</span>
|
|
<Button
|
|
size="middle"
|
|
type="default"
|
|
onClick={() => handleSelect(item)}
|
|
>
|
|
{intl.formatMessage({ id: 'playground.compare.apply' })}
|
|
</Button>
|
|
</h3>
|
|
{item.data.map((data, i) => {
|
|
return (
|
|
<div key={i} className="data-item">
|
|
<span className="role">{data.role}</span>
|
|
<span className="prompt">
|
|
<Typography.Paragraph
|
|
style={{ margin: 0 }}
|
|
ellipsis={{
|
|
rows: 2,
|
|
expandable: true,
|
|
symbol: 'more'
|
|
}}
|
|
>
|
|
{data.content}
|
|
</Typography.Paragraph>
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AddWorker);
|