39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { FloatButton } from 'antd';
|
|
import { CommentOutlined } from '@ant-design/icons';
|
|
import { DeepChat } from 'deep-chat-react';
|
|
|
|
function AiChat() {
|
|
const [visible, setVisible] = React.useState(false);
|
|
|
|
return (
|
|
<>
|
|
{visible ? (
|
|
<div style={{ position: 'fixed', bottom: 100, right: 10, zIndex: 10000, maxWidth: '95vw', width: 500, height: 1000, maxHeight: 'calc(100vh - 165px)' }}>
|
|
<DeepChat
|
|
style={{ width: '100%', height: '100%', borderRadius: 10, boxShadow: '0 0 10px rgba(0,0,0,0.1)', bottom: 0, position: 'absolute' }}
|
|
history={[
|
|
{ text: 'Show me a modern city', role: 'user' },
|
|
{ files: [{ src: 'https://test.ex.umbach.dev/api/statico/809fe37e-8c41-4a44-98d1-d9247affd531/67c763b6-ea67-4b49-9621-2f78b85eb180.png', type: 'image' }], role: 'ai' },
|
|
{ text: 'Whats on your mind?', role: 'user' },
|
|
{ text: 'Peace and tranquility', role: 'ai' },
|
|
]}
|
|
></DeepChat>
|
|
</div>
|
|
) : null}
|
|
|
|
<FloatButton
|
|
icon={<CommentOutlined />}
|
|
type="primary"
|
|
onClick={() => console.log('onClick')}
|
|
style={{ zIndex: 10000 }}
|
|
onClickCapture={() => {
|
|
setVisible(!visible);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default AiChat;
|