88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import HotKeys from '@/config/hotkeys';
|
|
import {
|
|
CodeOutlined,
|
|
DeleteOutlined,
|
|
EnterOutlined,
|
|
MacCommandOutlined,
|
|
PlusOutlined
|
|
} from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Col, Row, Space } from 'antd';
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
import '../style/chat-footer.less';
|
|
|
|
interface ChatFooterProps {
|
|
onSubmit: () => void;
|
|
onClear: () => void;
|
|
onNewMessage: () => void;
|
|
onView: () => void;
|
|
disabled?: boolean;
|
|
feedback?: React.ReactNode;
|
|
hasTokenResult?: boolean;
|
|
}
|
|
|
|
const ChatFooter: React.FC<ChatFooterProps> = (props) => {
|
|
const intl = useIntl();
|
|
const {
|
|
onSubmit,
|
|
onClear,
|
|
onNewMessage,
|
|
onView,
|
|
feedback,
|
|
disabled,
|
|
hasTokenResult
|
|
} = props;
|
|
useHotkeys(
|
|
HotKeys.SUBMIT.join(','),
|
|
() => {
|
|
onSubmit();
|
|
},
|
|
{ enabled: !disabled }
|
|
);
|
|
|
|
return (
|
|
<div className="chat-footer">
|
|
<Row style={{ width: '100%' }}>
|
|
<Col span={hasTokenResult ? 8 : 12}>
|
|
<Space size={20}>
|
|
<Button
|
|
disabled={disabled}
|
|
icon={<PlusOutlined />}
|
|
onClick={onNewMessage}
|
|
>
|
|
{intl.formatMessage({ id: 'playground.newMessage' })}
|
|
</Button>
|
|
<Button
|
|
icon={<DeleteOutlined></DeleteOutlined>}
|
|
onClick={onClear}
|
|
disabled={disabled}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.clear' })}
|
|
</Button>
|
|
</Space>
|
|
</Col>
|
|
<Col span={hasTokenResult ? 8 : 0}>{feedback}</Col>
|
|
<Col span={hasTokenResult ? 8 : 12} style={{ textAlign: 'right' }}>
|
|
<Space size={20}>
|
|
<Button
|
|
icon={<CodeOutlined></CodeOutlined>}
|
|
onClick={onView}
|
|
disabled={disabled}
|
|
>
|
|
{intl.formatMessage({ id: 'playground.viewcode' })}
|
|
</Button>
|
|
<Button disabled={disabled} type="primary" onClick={onSubmit}>
|
|
{intl.formatMessage({ id: 'common.button.submit' })}
|
|
<span className="m-l-5 opct-7">
|
|
<MacCommandOutlined /> + <EnterOutlined />
|
|
</span>
|
|
</Button>
|
|
</Space>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatFooter;
|