File size: 2,954 Bytes
8207a08 68ed806 8441328 8207a08 8a4bb0c 8441328 598945f 8207a08 8a4bb0c 8207a08 8a4bb0c 8207a08 598945f 8207a08 8a4bb0c 8207a08 8a4bb0c 8207a08 18da36c 8207a08 8441328 8a4bb0c 8441328 8207a08 18a496b 0086f8a 8a4bb0c 8207a08 09502ac 8207a08 |
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 |
import MessageItem from '@/components/message-item';
import DocumentPreviewer from '@/components/pdf-previewer';
import { MessageType } from '@/constants/chat';
import { useTranslate } from '@/hooks/common-hooks';
import { useClickDrawer, useGetFileIcon } from '@/pages/chat/hooks';
import { buildMessageItemReference } from '@/pages/chat/utils';
import { Button, Drawer, Flex, Input, Spin } from 'antd';
import { useSendNextMessage } from './hooks';
import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
import styles from './index.less';
const FlowChatBox = () => {
const {
sendLoading,
handleInputChange,
handlePressEnter,
value,
loading,
ref,
derivedMessages,
reference,
} = useSendNextMessage();
const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
useClickDrawer();
useGetFileIcon();
const { t } = useTranslate('chat');
const { data: userInfo } = useFetchUserInfo();
return (
<>
<Flex flex={1} className={styles.chatContainer} vertical>
<Flex flex={1} vertical className={styles.messageContainer}>
<div>
<Spin spinning={loading}>
{derivedMessages?.map((message, i) => {
return (
<MessageItem
loading={
message.role === MessageType.Assistant &&
sendLoading &&
derivedMessages.length - 1 === i
}
key={message.id}
nickname={userInfo.nickname}
avatar={userInfo.avatar}
item={message}
reference={buildMessageItemReference(
{ message: derivedMessages, reference },
message,
)}
clickDocumentButton={clickDocumentButton}
index={i}
showLikeButton={false}
sendLoading={sendLoading}
></MessageItem>
);
})}
</Spin>
</div>
<div ref={ref} />
</Flex>
<Input
size="large"
placeholder={t('sendPlaceholder')}
value={value}
suffix={
<Button
type="primary"
onClick={handlePressEnter}
loading={sendLoading}
>
{t('send')}
</Button>
}
onPressEnter={handlePressEnter}
onChange={handleInputChange}
/>
</Flex>
<Drawer
title="Document Previewer"
onClose={hideModal}
open={visible}
width={'50vw'}
mask={false}
>
<DocumentPreviewer
documentId={documentId}
chunk={selectedChunk}
visible={visible}
></DocumentPreviewer>
</Drawer>
</>
);
};
export default FlowChatBox;
|