File size: 4,108 Bytes
8c4ec99 452020d 8c4ec99 452020d 8c4ec99 452020d 8c4ec99 452020d 6b8fc2c 362ec6c 8c4ec99 452020d 8c4ec99 452020d 8c4ec99 452020d 6b8fc2c 362ec6c |
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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
import { DeleteOutlined, EditOutlined, FormOutlined } from '@ant-design/icons';
import {
Button,
Card,
Divider,
Dropdown,
Flex,
MenuProps,
Space,
Tag,
} from 'antd';
import ChatContainer from './chat-container';
import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
import ModalManager from '@/components/modal-manager';
import classNames from 'classnames';
import ChatConfigurationModal from './chat-configuration-modal';
import { useFetchDialogList } from './hooks';
import { useState } from 'react';
import styles from './index.less';
const Chat = () => {
const dialogList = useFetchDialogList();
const [activated, setActivated] = useState<string>('');
const handleAppCardEnter = (id: string) => () => {
setActivated(id);
};
const handleAppCardLeave = () => {
setActivated('');
};
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.antgroup.com"
>
1st menu item
</a>
),
},
];
const appItems: MenuProps['items'] = [
{
key: '1',
label: (
<Space>
<EditOutlined />
Edit
</Space>
),
},
{ type: 'divider' },
{
key: '2',
label: (
<Space>
<DeleteOutlined />
Delete chat
</Space>
),
},
];
return (
<Flex className={styles.chatWrapper}>
<Flex className={styles.chatAppWrapper}>
<Flex flex={1} vertical>
<ModalManager>
{({ visible, showModal, hideModal }) => {
return (
<>
<Button type="primary" onClick={() => showModal()}>
Create an Assistant
</Button>
<ChatConfigurationModal
visible={visible}
showModal={showModal}
hideModal={hideModal}
></ChatConfigurationModal>
</>
);
}}
</ModalManager>
<Divider></Divider>
<Space direction={'vertical'} size={'middle'}>
{dialogList.map((x) => (
<Card
key={x.id}
className={classNames(styles.chatAppCard)}
onMouseEnter={handleAppCardEnter(x.id)}
onMouseLeave={handleAppCardLeave}
>
<Flex justify="space-between" align="center">
<Space>
{x.icon}
<section>
<b>{x.name}</b>
<div>{x.description}</div>
</section>
</Space>
{activated === x.id && (
<section>
<Dropdown menu={{ items: appItems }}>
<ChatAppCube className={styles.cubeIcon}></ChatAppCube>
</Dropdown>
</section>
)}
</Flex>
</Card>
))}
</Space>
</Flex>
</Flex>
<Divider type={'vertical'} className={styles.divider}></Divider>
<Flex className={styles.chatTitleWrapper}>
<Flex flex={1} vertical>
<Flex
justify={'space-between'}
align="center"
className={styles.chatTitle}
>
<Space>
<b>Chat</b>
<Tag>25</Tag>
</Space>
<Dropdown menu={{ items }}>
<FormOutlined />
</Dropdown>
</Flex>
<Divider></Divider>
<section className={styles.chatTitleContent}>today</section>
</Flex>
</Flex>
<Divider type={'vertical'} className={styles.divider}></Divider>
<ChatContainer></ChatContainer>
</Flex>
);
};
export default Chat;
|