Merge branch 'release-v11'

# Conflicts:
#	CHANGELOG.md
#	yarn.lock

Author: MartinCupela

CHANGELOG.md

@@ -91,6 +91,21 @@ TypingIndicator is rendered as a child of MessageListMainPanel
 
 * remove legacy style components ([#2394](https://github.com/GetStream/stream-chat-react/issues/2394)) ([9410153](https://github.com/GetStream/stream-chat-react/commit/94101535d1de9de23a1ab8913423af0e7009bab9))
 
+## [11.23.4](https://github.com/GetStream/stream-chat-react/compare/v11.23.3...v11.23.4) (2024-08-05)
+
+
+### Bug Fixes
+
+* downgrade react-markdown to v8 that supports React version < v18 ([#2461](https://github.com/GetStream/stream-chat-react/issues/2461)) ([5e6fea0](https://github.com/GetStream/stream-chat-react/commit/5e6fea0f6224c7266ef2eabc32c087cad81e3a8b))
+* prevent including own user in read count displayed in MessageStatus ([#2459](https://github.com/GetStream/stream-chat-react/issues/2459)) ([061d1a3](https://github.com/GetStream/stream-chat-react/commit/061d1a3eff7e029f9ce61e24206ed6497364b556))
+
+## [11.23.3](https://github.com/GetStream/stream-chat-react/compare/v11.23.2...v11.23.3) (2024-07-22)
+
+
+### Bug Fixes
+
+* start audio recorder timer if already recording ([#2453](https://github.com/GetStream/stream-chat-react/issues/2453)) ([836917e](https://github.com/GetStream/stream-chat-react/commit/836917e3b231f3c1f30a98004bce367d37cf4a63))
+
 ## [11.23.2](https://github.com/GetStream/stream-chat-react/compare/v11.23.1...v11.23.2) (2024-07-10)
 
 

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

@@ -171,7 +171,40 @@ body,
 
 ## Chat Client & Connecting User
 
-To communicate with the Stream Chat API the SDK requires a client with an established connection. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all of the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
+To communicate with the Stream Chat API the SDK requires a client with an established connection. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
+
+:::important
+The hook `useCreateChatClient` accepts parameter `options`. This is an object forwarded to the `StreamChat` constructor. Please make sure the `options` object is created outside the scope of the component invoking `useCreateChatClient` to prevent unnecessary re-renders and thus reconnects.
+
+```
+import {
+  Chat,
+  StreamChatOptions,
+  useCreateChatClient,
+} from 'stream-chat-react';
+
+const streamChatOptions: StreamChatOptions = {
+  timeout: 6000
+}
+
+const App = () => {
+  const client = useCreateChatClient({
+    apiKey,
+    options: streamChatOptions,
+    tokenOrProvider: token,
+    userData: { id: userId },
+  });
+
+  if (!client) return <div>Loading...</div>;
+
+  return (
+    <Chat client={client}>
+    </Chat>
+  );
+}
+```
+
+:::
 
 ## Creating a Channel
 

package.json

@@ -89,7 +89,7 @@
     "react-fast-compare": "^3.2.2",
     "react-image-gallery": "1.2.12",
     "react-is": "^18.1.0",
-    "react-markdown": "9.0.1",
+    "react-markdown": "^8.0.7",
     "react-player": "2.10.1",
     "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.3.0",

src/components/Chat/hooks/useCreateChatClient.ts

@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import {
+import { StreamChat } from 'stream-chat';
+
+import type {
   DefaultGenerics,
   ExtendableGenerics,
   OwnUserResponse,
-  StreamChat,
+  StreamChatOptions,
   TokenOrProvider,
   UserResponse,
 } from 'stream-chat';
@@ -14,12 +16,14 @@ import {
  */
 export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGenerics>({
   apiKey,
+  options,
   tokenOrProvider,
   userData,
 }: {
   apiKey: string;
   tokenOrProvider: TokenOrProvider;
   userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+  options?: StreamChatOptions;
 }) => {
   const [chatClient, setChatClient] = useState<StreamChat<SCG> | null>(null);
   const [cachedUserData, setCachedUserData] = useState(userData);
@@ -29,7 +33,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
   }
 
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey);
+    const client = new StreamChat<SCG>(apiKey, undefined, options);
     let didUserConnectInterrupt = false;
 
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -45,7 +49,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
           console.log(`Connection for user "${cachedUserData.id}" has been closed`);
         });
     };
-  }, [apiKey, cachedUserData, tokenOrProvider]);
+  }, [apiKey, cachedUserData, options, tokenOrProvider]);
 
   return chatClient;
 };

src/components/Message/MessageStatus.tsx

@@ -70,9 +70,10 @@ const UnMemoizedMessageStatus = <
   const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
   const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
 
-  const [lastReadUser] = deliveredAndRead
+  const readersWithoutOwnUser = deliveredAndRead
     ? readBy.filter((item) => item.id !== client.user?.id)
     : [];
+  const [lastReadUser] = readersWithoutOwnUser;
 
   return (
     <span
@@ -139,12 +140,12 @@ const UnMemoizedMessageStatus = <
               user={lastReadUser}
             />
 
-            {readBy.length > 2 && (
+            {readersWithoutOwnUser.length > 1 && (
               <span
                 className={`str-chat__message-${messageType}-status-number`}
                 data-testid='message-status-read-by-many'
               >
-                {readBy.length - 1}
+                {readersWithoutOwnUser.length}
               </span>
             )}
           </>

src/components/Message/__tests__/MessageStatus.test.js

@@ -9,11 +9,12 @@ import {
   TranslationProvider,
 } from '../../../context';
 import { MessageStatus } from '../MessageStatus';
-import { getTestClientWithUser } from '../../../mock-builders';
+import { generateMessage, generateUser, getTestClientWithUser } from '../../../mock-builders';
 
 const MESSAGE_STATUS_SENDING_TEST_ID = 'message-status-sending';
 const MESSAGE_STATUS_DELIVERED_TEST_ID = 'message-status-received';
 const MESSAGE_STATUS_READ_TEST_ID = 'message-status-read-by';
+const MESSAGE_STATUS_READ_COUNT_TEST_ID = 'message-status-read-by-many';
 
 const rootClassName = `str-chat__message-simple-status str-chat__message-status`;
 
@@ -32,6 +33,8 @@ const foreignMsg = {
   updated_at: '2024-05-28T15:13:20.900Z',
   user: null,
 };
+
+const ownMessage = generateMessage({ user });
 const errorMsg = { ...foreignMsg, type: 'error', user };
 const sendingMsg = { ...foreignMsg, status: 'sending', user };
 const deliveredMsg = { ...foreignMsg, user };
@@ -234,4 +237,31 @@ describe('MessageStatus', () => {
     expect(container.children[0]).not.toHaveClass('str-chat__message-simple-status');
     expect(container.children[0]).toHaveClass('str-chat__message-XXX-status');
   });
+
+  it('does not render count if read by own user only', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: ownMessage, readBy: [user] },
+    });
+    expect(screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('does not render count if read by 1 other user', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: ownMessage, readBy: [generateUser()] },
+    });
+    expect(screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('renders count if read by 2 other users', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: ownMessage, readBy: [generateUser(), generateUser()] },
+    });
+    expect(screen.getByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).toHaveTextContent('2');
+  });
 });

src/components/Message/renderText/__tests__/__snapshots__/renderText.test.js.snap

@@ -260,8 +260,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks around a blockquote 1`]
   "
 ",
   <blockquote>
-    
-
     <p>
       b
     </p>
@@ -551,8 +549,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 2
     </p>
@@ -576,8 +572,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 3
     </p>
@@ -619,8 +613,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 2
     </p>
@@ -644,8 +636,6 @@ exports[`keepLineBreaksPlugin present keeps line breaks between the items in an
   
 
   <li>
-    
-
     <p>
       item 3
     </p>

src/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.ts

@@ -4,9 +4,9 @@ import { u } from 'unist-builder';
 import { visit } from 'unist-util-visit';
 
 import type { Nodes } from 'hast-util-find-and-replace/lib';
-import type { Element } from 'react-markdown/lib';
+import type { Element } from 'react-markdown/lib/ast-to-react';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types';
 
 export const mentionsMarkdownPlugin = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics

src/components/Message/renderText/remarkPlugins/htmlToTextPlugin.ts

@@ -1,6 +1,6 @@
 import { visit, Visitor } from 'unist-util-visit';
 
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 
 const visitor: Visitor = (node) => {
   if (node.type !== 'html') return;

src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts

@@ -2,12 +2,10 @@ import { visit, Visitor } from 'unist-util-visit';
 import { u } from 'unist-builder';
 
 import type { Break } from 'mdast';
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 
 const visitor: Visitor = (node, index, parent) => {
-  if (typeof index === 'undefined' || index === 0) return;
-  if (typeof parent === 'undefined') return;
-  if (!node.position) return;
+  if (!(index && parent && node.position)) return;
 
   const prevSibling = parent.children.at(index - 1);
   if (!prevSibling?.position) return;