v10.8.8

docusaurus/docs/React/basics/getting-started.mdx

@@ -200,10 +200,10 @@ const options = { state: true, presence: true, limit: 10 };
 const sort = { last_message_at: -1 };
 
 const App = () => {
-const [client, setClient] = useState(null);
+  const [client, setClient] = useState(null);
 
-useEffect(() => {
-const newClient = new StreamChat('your_api_key');
+  useEffect(() => {
+    const newClient = new StreamChat('your_api_key');
 
     const handleConnectionChange = ({ online = false }) => {
       if (!online) return console.log('connection lost');
@@ -224,23 +224,23 @@ const newClient = new StreamChat('your_api_key');
       newClient.off('connection.changed', handleConnectionChange);
       newClient.disconnectUser().then(() => console.log('connection closed'));
     };
-}, []);
-
-if (!client) return null;
-
-return (
-<Chat client={client}>
-<ChannelList filters={filters} sort={sort} options={options} />
-<Channel>
-<Window>
-<ChannelHeader />
-<MessageList />
-<MessageInput />
-</Window>
-<Thread />
-</Channel>
-</Chat>
-);
+  }, []);
+
+  if (!client) return null;
+
+  return (
+    <Chat client={client}>
+      <ChannelList filters={filters} sort={sort} options={options} />
+      <Channel>
+        <Window>
+          <ChannelHeader />
+          <MessageList />
+          <MessageInput />
+        </Window>
+        <Thread />
+      </Channel>
+    </Chat>
+  );
 };
 
 export default App;

package.json

@@ -30,7 +30,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.2",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "^3.10.3",
+    "@stream-io/stream-chat-css": "^3.11.0",
     "clsx": "^1.1.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",

src/components/MessageList/VirtualizedMessageList.tsx

@@ -41,10 +41,18 @@ import { isDate } from '../../context/TranslationContext';
 
 import type { Channel } from 'stream-chat';
 
+import type { ChatProps } from '../Chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 
 const PREPEND_OFFSET = 10 ** 7;
 
+type VirtuosoContext = {
+  customClasses: ChatProps['customClasses'];
+  messageGroupStyles: Record<string, GroupStyle>;
+  numItemsPrepended: number;
+  processedMessages: StreamMessage[];
+};
+
 type VirtualizedMessageListWithContextProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = VirtualizedMessageListProps<StreamChatGenerics> & {
@@ -358,15 +366,18 @@ const VirtualizedMessageListWithContext = <
     // using 'display: inline-block'
     // traps CSS margins of the item elements, preventing incorrect item measurements
     const Item: Components['Item'] = (props) => {
-      const streamMessageIndex = props['data-item-index'] + numItemsPrepended - PREPEND_OFFSET;
-      const message = processedMessages[streamMessageIndex];
-      const groupStyles: GroupStyle = messageGroupStyles[message.id] || '';
+      const context = props.context as VirtuosoContext;
+
+      const streamMessageIndex =
+        props['data-item-index'] + context.numItemsPrepended - PREPEND_OFFSET;
+      const message = context.processedMessages[streamMessageIndex];
+      const groupStyles: GroupStyle = context.messageGroupStyles[message.id] || '';
 
       return (
         <div
           {...props}
           className={
-            customClasses?.virtualMessage ||
+            context?.customClasses?.virtualMessage ||
             clsx('str-chat__virtual-list-message-wrapper str-chat__li', {
               [`str-chat__li--${groupStyles}`]: groupStyles,
             })
@@ -375,12 +386,7 @@ const VirtualizedMessageListWithContext = <
       );
     };
     return Item;
-  }, [
-    customClasses?.virtualMessage,
-    numItemsPrepended,
-    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
-    processedMessages.length,
-  ]);
+  }, []);
 
   const virtuosoComponents: Partial<Components> = useMemo(() => {
     const EmptyPlaceholder: Components['EmptyPlaceholder'] = () => (
@@ -454,6 +460,14 @@ const VirtualizedMessageListWithContext = <
             computeItemKey={(index) =>
               processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id
             }
+            context={
+              {
+                customClasses,
+                messageGroupStyles,
+                numItemsPrepended,
+                processedMessages,
+              } as VirtuosoContext
+            }
             endReached={endReached}
             firstItemIndex={PREPEND_OFFSET - numItemsPrepended}
             followOutput={followOutput}

yarn.lock

@@ -2256,10 +2256,10 @@
     crypto-browserify "^3.11.0"
     process-es6 "^0.11.2"
 
-"@stream-io/stream-chat-css@^3.10.3":
-  version "3.10.3"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-3.10.3.tgz#59c9e179949f99624600bf517e61c00f914647ad"
-  integrity sha512-zEU9OYFfDASOSJvcnh/6F1hdzgWHve77al2B4W8Vomo2ff91GJPp/MohDgiCMJN4OO7l6ut9xosiOBfc4j9YuA==
+"@stream-io/stream-chat-css@^3.11.0":
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-3.11.0.tgz#46347bfd265d71ccec4e0bb3e00619a4fdbcc122"
+  integrity sha512-LIwSkCihlCQgh2HYbrsm8fJ6pgRWVlGUzxQJwPMolfwY+FhBi17QYg/V65JE9kK6GCHPn+v9o854pn8CHs+S0w==
 
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"