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>
   );
 }

web/components/ui/Sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatContainer from '../../chat/ChatContainer';
 import { chatMessages, chatVisibility as chatVisibilityAtom } from '../../stores/ClientConfigStore';
 import { ChatVisibilityState } from '../../../interfaces/application-state';
+import ChatTextField from '../../chat/ChatTextField';
 
 export default function Sidebar() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessages);
@@ -21,6 +22,7 @@ export default function Sidebar() {
       }}
     >
       <ChatContainer messages={messages} />
+      <ChatTextField />
     </Sider>
   );
 }