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

web/package-lock.json

@@ -30,6 +30,7 @@
         "react-linkify": "1.0.0-alpha",
         "react-markdown": "8.0.0",
         "react-markdown-editor-lite": "1.3.2",
+        "react-virtuoso": "^2.10.2",
         "recoil": "^0.7.2",
         "ua-parser-js": "1.0.2",
         "video.js": "^7.18.1"
@@ -11453,6 +11454,25 @@
         "is-function": "^1.0.1"
       }
     },
+    "node_modules/@virtuoso.dev/react-urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
+      "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
+      "dependencies": {
+        "@virtuoso.dev/urx": "^0.2.13"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@virtuoso.dev/urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
+      "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -26756,6 +26776,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/react-virtuoso": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.10.2.tgz",
+      "integrity": "sha512-nQ8Wt/q64q6walcXo4y9SXkvZqjwuLiNUv7aKW3poKoZno8agTgeqcX1GMq3GPlaJ8wR5XMGwBxX4HONBMAGfg==",
+      "dependencies": {
+        "@virtuoso.dev/react-urx": "^0.2.12",
+        "@virtuoso.dev/urx": "^0.2.12"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -40135,6 +40171,19 @@
         "is-function": "^1.0.1"
       }
     },
+    "@virtuoso.dev/react-urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
+      "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
+      "requires": {
+        "@virtuoso.dev/urx": "^0.2.13"
+      }
+    },
+    "@virtuoso.dev/urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
+      "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -51972,6 +52021,15 @@
         }
       }
     },
+    "react-virtuoso": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.10.2.tgz",
+      "integrity": "sha512-nQ8Wt/q64q6walcXo4y9SXkvZqjwuLiNUv7aKW3poKoZno8agTgeqcX1GMq3GPlaJ8wR5XMGwBxX4HONBMAGfg==",
+      "requires": {
+        "@virtuoso.dev/react-urx": "^0.2.12",
+        "@virtuoso.dev/urx": "^0.2.12"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

web/package.json

@@ -33,6 +33,7 @@
     "react-linkify": "1.0.0-alpha",
     "react-markdown": "8.0.0",
     "react-markdown-editor-lite": "1.3.2",
+    "react-virtuoso": "^2.10.2",
     "recoil": "^0.7.2",
     "ua-parser-js": "1.0.2",
     "video.js": "^7.18.1"

web/stories/ChatContainer.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import ChatContainer from '../components/chat/ChatContainer';
 import { ChatMessage } from '../interfaces/chat-message.model';