2cfb336411
weird 0 popping out when toggling chat. wasn't able to find which component is responsible. Used bare mininum scss. May refactor in the future.
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { Spin } from 'antd';
|
|
import { Virtuoso } from 'react-virtuoso';
|
|
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
|
import { ChatMessage } from '../../interfaces/chat-message.model';
|
|
import { ChatState } from '../../interfaces/application-state';
|
|
import ChatUserMessage from './ChatUserMessage';
|
|
import { LoadingOutlined } from '@ant-design/icons';
|
|
|
|
interface Props {
|
|
messages: ChatMessage[];
|
|
state: ChatState;
|
|
}
|
|
|
|
export default function ChatContainer(props: Props) {
|
|
const { messages, state } = props;
|
|
const loading = state === ChatState.Loading;
|
|
|
|
const chatContainerRef = useRef(null);
|
|
const spinIcon = <LoadingOutlined style={{fontSize: '32px'}} spin />
|
|
|
|
return (
|
|
<div>
|
|
<h1>Chat</h1>
|
|
<Spin spinning={loading} indicator={spinIcon} />
|
|
<Virtuoso
|
|
ref={chatContainerRef}
|
|
initialTopMostItemIndex={999}
|
|
data={messages}
|
|
itemContent={(index, message) => (
|
|
<ChatUserMessage message={message} showModeratorMenu={false} />
|
|
)}
|
|
followOutput="smooth"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|