Add performant list componant for rendering chat messages

web/components/chat/ChatContainer.tsx

@@ -1,6 +1,9 @@
 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';
 
 interface Props {
   messages: ChatMessage[];
@@ -11,11 +14,22 @@ export default function ChatContainer(props: Props) {
   const { messages, state } = props;
   const loading = state === ChatState.Loading;
 
+  const chatContainerRef = useRef(null);
+
   return (
     <div>
-      <Spin tip="Loading..." spinning={loading}>
-        Chat container with scrolling chat messages go here
-      </Spin>
+      <Spin spinning={loading} />
+
+      <Virtuoso
+        style={{ height: 400 }}
+        ref={chatContainerRef}
+        initialTopMostItemIndex={999}
+        data={messages}
+        itemContent={(index, message) => (
+          <ChatUserMessage message={message} showModeratorMenu={false} />
+        )}
+        followOutput="auto"
+      />
     </div>
   );
 }