98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import MessageItem from '@/components/message-item';
|
|
import { MessageType } from '@/constants/chat';
|
|
import { useTranslate } from '@/hooks/common-hooks';
|
|
import { useGetFileIcon } from '@/pages/chat/hooks';
|
|
import { buildMessageItemReference } from '@/pages/chat/utils';
|
|
import { Button, Flex, Input, Spin } from 'antd';
|
|
|
|
import { useSendNextMessage } from './hooks';
|
|
|
|
import PdfDrawer from '@/components/pdf-drawer';
|
|
import { useClickDrawer } from '@/components/pdf-drawer/hooks';
|
|
import { useFetchFlow } from '@/hooks/flow-hooks';
|
|
import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
|
|
import { buildMessageUuidWithRole } from '@/utils/chat';
|
|
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();
|
|
const { data: canvasInfo } = useFetchFlow();
|
|
|
|
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={buildMessageUuidWithRole(message)}
|
|
nickname={userInfo.nickname}
|
|
avatar={userInfo.avatar}
|
|
avatarDialog={canvasInfo.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>
|
|
<PdfDrawer
|
|
visible={visible}
|
|
hideModal={hideModal}
|
|
documentId={documentId}
|
|
chunk={selectedChunk}
|
|
></PdfDrawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FlowChatBox;
|