fix: display messages in virtualized thread (theme v2) (#1799)

* fix: remove use of displayLeft MessageOptions prop in example apps

* feat: add conditionally new class str-chat__thread--virtualized on thread root element

* chore(deps): bump @stream-io/stream-chat-css to 3.5.4

Author: MartinCupela

examples/capacitor/src/components/CustomMessage.tsx

@@ -31,7 +31,7 @@ export const CustomMessage = () => {
     <div className='message-wrapper'>
       <Avatar image={message.user?.image} />
       <div className='message-wrapper-content'>
-        <MessageOptions displayLeft={false} messageWrapperRef={messageWrapperRef} />
+        <MessageOptions messageWrapperRef={messageWrapperRef} />
         <div className='message-header'>
           <div className='message-header-name'>{message.user?.name}</div>
           <div className='message-header-timestamp'>

package.json

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

src/components/Thread/Thread.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import clsx from 'clsx';
 
 import { MESSAGE_ACTIONS } from '../Message';
 import {
@@ -130,7 +131,13 @@ const ThreadInner = <
 
   if (!thread) return null;
 
-  const threadClass = customClasses?.thread || 'str-chat__thread-container str-chat__thread';
+  const threadClass =
+    customClasses?.thread ||
+    clsx('str-chat__thread-container str-chat__thread', {
+      'str-chat__thread--full': fullWidth,
+      'str-chat__thread--virtualized': virtualized,
+    });
+
   const head = (
     <ThreadHead
       key={thread.id}
@@ -141,7 +148,7 @@ const ThreadInner = <
   );
 
   return (
-    <div className={`${threadClass} ${fullWidth ? 'str-chat__thread--full' : ''}`}>
+    <div className={threadClass}>
       <ThreadHeader closeThread={closeThread} thread={thread} />
       <ThreadMessageList
         disableDateSeparator={!enableDateSeparator}

src/components/Thread/__tests__/Thread.test.js

@@ -35,6 +35,9 @@ jest.mock('../../Message/Message', () => ({
 jest.mock('../../MessageList/MessageList', () => ({
   MessageList: jest.fn(() => <div />),
 }));
+jest.mock('../../MessageList/VirtualizedMessageList', () => ({
+  VirtualizedMessageList: jest.fn(() => <div />),
+}));
 jest.mock('../../MessageInput/MessageInputSmall', () => ({
   MessageInputSmall: jest.fn(() => <div />),
 }));
@@ -266,6 +269,22 @@ describe('Thread', () => {
     expect(container.querySelector('.str-chat__thread--full')).not.toBeInTheDocument();
   });
 
+  it('should assign str-chat__thread--virtualized class to the root in virtualized mode', () => {
+    const { container } = renderComponent({
+      chatClient,
+      threadProps: { virtualized: true },
+    });
+    expect(container.querySelector('.str-chat__thread--virtualized')).toBeInTheDocument();
+  });
+
+  it('should not assign str-chat__thread--virtualized class to the root in non-virtualized mode', () => {
+    const { container } = renderComponent({
+      chatClient,
+      threadProps: { virtualized: false },
+    });
+    expect(container.querySelector('.str-chat__thread--virtualized')).not.toBeInTheDocument();
+  });
+
   it('should not render anything if the thread in context is falsy', () => {
     const { container } = renderComponent({
       channelStateOverrides: { thread: null },

yarn.lock

@@ -2078,10 +2078,10 @@
     crypto-browserify "^3.11.0"
     process-es6 "^0.11.2"
 
-"@stream-io/stream-chat-css@^3.5.3":
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-3.5.3.tgz#bf9c9a075e270517a876aa7f0c819157c0139de8"
-  integrity sha512-oUfYH8YC6hH2/eZTgiyOJ0J9ZnK+4baMgS+K1QGi3gsxjXok+645ffpYFGjEVrHVAFGvcwa7l4HzMWn6dCzliQ==
+"@stream-io/stream-chat-css@^3.5.4":
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-3.5.4.tgz#0a6ed50e0f671c61684d325fb3f10712ea674590"
+  integrity sha512-g2MviK1mTWyTm+sLtbltuoabbx6d7orC0bUxuRAR0snJgOXBsjwMjCBbkow/rlo6KlqjfCjBhaHE7Ht9NBKHjw==
 
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"