Merge branch 'master' into fix/browser-and-node-cjs

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,34 @@ 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. When the client is created, the first passed `options` value is used, and the client is **not** recreated when the `options` value updates. In most cases it's not a problem, however if you really need to recreate the client with the latest options and reconnect, you can set a `key` on the component that invokes `useCreateChatClient`:
+
+```ts
+import { Chat, StreamChatOptions, useCreateChatClient } from 'stream-chat-react';
+
+const App = () => {
+  const [timeout, setTimeout] = useState(6000);
+  const key = `timeout_${timeout}`;
+  return <ChatWithOptions key={key} timeout={timeout} />;
+};
+
+const ChatWithOptions = ({ timeout }: StreamChatOptions) => {
+  const client = useCreateChatClient({
+    apiKey,
+    options: { timeout },
+    tokenOrProvider: token,
+    userData: { id: userId },
+  });
+
+  if (!client) return <div>Loading...</div>;
+  return <Chat client={client}></Chat>;
+};
+```
+
+:::
 
 ## Creating a Channel
 

docusaurus/docs/React/components/contexts/message-input-context.mdx

@@ -69,22 +69,6 @@ Function to manually close the list of supported slash commands.
 | ---------- |
 | () => void |
 
-### closeEmojiPicker
-
-Function to close the `EmojiPicker` component.
-
-| Type                                        |
-| ------------------------------------------- |
-| React.MouseEventHandler<HTMLButtonElement\> |
-
-### closeEmojiPickerOnClick
-
-If true, picking an emoji from the `EmojiPicker` component will close the picker.
-
-| Type    |
-| ------- |
-| boolean |
-
 ### closeMentionsList
 
 Function to manually close the list of potential users to mention.

docusaurus/docs/React/components/message-input-components/message-input.mdx

@@ -51,14 +51,6 @@ Function to clear the editing state while editing a message.
 | ---------- |
 | () => void |
 
-### closeEmojiPickerOnClick
-
-If true, picking an emoji from the `EmojiPicker` component will close the picker.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
 ### disabled
 
 If true, disables the text input.

docusaurus/docs/React/guides/sdk-state-management.mdx

@@ -46,7 +46,7 @@ Before you can access the _reactive_ channel state you'll need to set the channe
     useEffect(() => {
       if (!channelId) return;
 
-      const channel = client.channel(channelId, channelType);
+      const channel = client.channel(channelType, channelId);
 
       setActiveChannel(channel);
     }, [channelId, channelType]);
@@ -65,7 +65,7 @@ Before you can access the _reactive_ channel state you'll need to set the channe
     const { client, setActiveChannel } = useChatContext();
 
     useEffect(() => {
-      const channel = client.channel(channelId, channelType);
+      const channel = client.channel(channelType, channelId);
       setActiveChannel(channel);
     }, [channelType, channelId]);
 

docusaurus/react_versioned_docs/version-11.x.x/components/contexts/message-input-context.mdx

@@ -69,22 +69,6 @@ Function to manually close the list of supported slash commands.
 | ---------- |
 | () => void |
 
-### closeEmojiPicker
-
-Function to close the `EmojiPicker` component.
-
-| Type                                        |
-| ------------------------------------------- |
-| React.MouseEventHandler<HTMLButtonElement\> |
-
-### closeEmojiPickerOnClick
-
-If true, picking an emoji from the `EmojiPicker` component will close the picker.
-
-| Type    |
-| ------- |
-| boolean |
-
 ### closeMentionsList
 
 Function to manually close the list of potential users to mention.
@@ -250,7 +234,7 @@ Function that runs onSubmit to the underlying `textarea` component.
 Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the send button in `EditMessageForm`. Received from `MessageInputProps`.
 
 | Type    | Default |
-|---------|---------|
+| ------- | ------- |
 | boolean | false   |
 
 ### imageOrder

docusaurus/react_versioned_docs/version-11.x.x/components/message-input-components/message-input.mdx

@@ -51,14 +51,6 @@ Function to clear the editing state while editing a message.
 | ---------- |
 | () => void |
 
-### closeEmojiPickerOnClick
-
-If true, picking an emoji from the `EmojiPicker` component will close the picker.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
 ### disabled
 
 If true, disables the text input.
@@ -128,7 +120,7 @@ If true, expands the text input vertically for new lines.
 Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the send button in `EditMessageForm`.
 
 | Type    | Default |
-|---------|---------|
+| ------- | ------- |
 | boolean | false   |
 
 ### Input

docusaurus/react_versioned_docs/version-11.x.x/guides/sdk-state-management.mdx

@@ -46,7 +46,7 @@ Before you can access the _reactive_ channel state you'll need to set the channe
     useEffect(() => {
       if (!channelId) return;
 
-      const channel = client.channel(channelId, channelType);
+      const channel = client.channel(channelType, channelId);
 
       setActiveChannel(channel);
     }, [channelId, channelType]);
@@ -65,7 +65,7 @@ Before you can access the _reactive_ channel state you'll need to set the channe
     const { client, setActiveChannel } = useChatContext();
 
     useEffect(() => {
-      const channel = client.channel(channelId, channelType);
+      const channel = client.channel(channelType, channelId);
       setActiveChannel(channel);
     }, [channelType, channelId]);
 

package.json

@@ -80,7 +80,6 @@
     "fix-webm-duration": "^1.0.5",
     "hast-util-find-and-replace": "^5.0.1",
     "i18next": "^21.6.14",
-    "isomorphic-ws": "^4.0.1",
     "linkifyjs": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.1",
@@ -93,7 +92,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);
@@ -28,8 +32,10 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
     setCachedUserData(userData);
   }
 
+  const [cachedOptions] = useState(options);
+
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey);
+    const client = new StreamChat<SCG>(apiKey, undefined, cachedOptions);
     let didUserConnectInterrupt = false;
 
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -45,7 +51,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
           console.log(`Connection for user "${cachedUserData.id}" has been closed`);
         });
     };
-  }, [apiKey, cachedUserData, tokenOrProvider]);
+  }, [apiKey, cachedUserData, cachedOptions, 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