Update from GetStream/stream-chat-react@81f33ba

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

@@ -76,37 +76,22 @@ body,
   display: flex;
   height: 100%;
 
-  .str-chat__channel-list {
+  .str-chat-channel-list {
     position: fixed;
     z-index: 1;
-    height: 100%;
     width: 0;
-    flex-shrink: 0;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
 
     &--open {
-      width: 30%;
-      position: fixed;
+      width: 100%;
     }
-    transition: width 0.3s ease-out;
-  }
-
-  .str-chat__channel {
-    flex: 1;
-    min-width: 0;
   }
 
-  .str-chat__main-panel {
-    min-width: 0;
-    flex: 1;
-
-    &--thread-open {
-      display: none;
-    }
+  .str-chat-channel {
+    width: 100%;
   }
 
   .str-chat__thread {
-    flex: 1;
+    width: 100%;
     height: 100%;
     position: fixed;
     z-index: 1;
@@ -132,8 +117,9 @@ body,
   }
 
   @media screen and (min-width: 768px) {
-    .str-chat__channel-list {
+    .str-chat-channel-list {
       width: 30%;
+      max-width: 420px;
       position: initial;
       z-index: 0;
     }
@@ -142,24 +128,11 @@ body,
       position: initial;
       z-index: 0;
     }
-
-    .str-chat__channel-header .str-chat__header-hamburger {
-      display: none;
-    }
   }
 
   @media screen and (min-width: 1024px) {
-    .str-chat__main-panel {
-      min-width: 0;
-
-      &--thread-open {
-        max-width: 55%;
-        display: flex;
-      }
-    }
-
     .str-chat__thread {
-      max-width: 45%;
+      width: 45%;
     }
 
     .str-chat__channel-header .str-chat__header-hamburger {
@@ -171,7 +144,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/basics/overview.mdx

@@ -14,13 +14,12 @@ Use cases include team and social messaging, virtual events, livestream gaming,
 - Text input commands (ex: Giphy and @mentions)
 - Image and file uploads
 - Video playback
-- Audio recording
 - Read state and typing indicators
 - Channel and message lists
 
 ## Where to get started
 
-If you are new to our SDK it is best to go through our [tutorial](https://getstream.io/chat/react-chat/tutorial/).
+If you are new to our SDK it is best to go through a of our [tutorial](https://getstream.io/chat/react-chat/tutorial/).
 
 After that, our [getting started page](./getting-started.mdx) is a great next step.
 
@@ -33,4 +32,4 @@ If you are integrating our SDK, please pay attention to our [Theming](../theming
 A common pattern in the library is the use of context provider hooks. These custom hooks allow for effective value sharing between parent components and their children.
 This makes customization straightforward, as you can use our exported hooks in your custom components to receive the exact values needed, while also subscribing to context changes.
 
-The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions for adding the library to your React project.
+The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your React project.

docusaurus/docs/React/components/contexts/channel-state-context.mdx

@@ -18,7 +18,7 @@ const { channel, watchers } = useChannelStateContext();
 
 ### acceptedFiles
 
-The value is forwarded to the context from the `Channel` component [prop `acceptedFiles`](../../components/core-components/channel.mdx#acceptedfiles).
+A list of accepted file upload types.
 
 | Type     |
 | -------- |
@@ -48,24 +48,9 @@ The configurations object for the currently active channel.
 | ------ |
 | object |
 
-### channelUnreadUiState
-
-The read state maintained for use by components representing channel unread state (for example `UnreadMessagesSeparator`, `UnreadMessagesNotification`).
-
-| Property                    | Type                    | Description                                                                                                                                                                                               |
-| --------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **last_read**               | `Date`                  | Date when the channel was marked read the last time.                                                                                                                                                      |
-| **unread_messages**         | `number`                | The count of unread messages in a given channel. Unread count refers only to foreign (not own) unread messages.                                                                                           |
-| **first_unread_message_id** | `string` or `undefined` | The ID of the message that was marked unread (`notification.mark_unread` event). The value is available only when a message is marked unread. Therefore, cannot be relied on to place unread messages UI. |
-| **last_read_message_id**    | `string` or `undefined` | The ID of the message preceding the first unread message.                                                                                                                                                 |
-
-| Type                   |
-| ---------------------- |
-| `ChannelUnreadUiState` |
-
 ### dragAndDropWindow
 
-The value is forwarded to the context from the `Channel` component [prop `dragAndDropWindow`](../../components/core-components/channel.mdx#draganddropwindow).
+If true, chat users will be able to drag and drop file uploads to the entire channel window.
 
 | Type    | Default |
 | ------- | ------- |
@@ -81,7 +66,8 @@ Number of milliseconds to debounce firing the URL enrichment queries when typing
 
 ### enrichURLForPreview
 
-The value is forwarded to the context from the `Channel` component [prop `enrichURLForPreview`](../../components/core-components/channel.mdx#enrichurlforpreview).
+A global flag to toggle the URL enrichment and link previews in `MessageInput`. By default, the feature is disabled. It can be overridden on Thread and MessageList level through `additionalMessageInputProps`
+or directly on `MessageInput` level through `urlEnrichmentConfig` prop.
 
 | Type    | Default |
 | ------- | ------- |
@@ -105,18 +91,18 @@ Custom function to identify URLs in a string for later generation of link previe
 
 ### giphyVersion
 
-The value is forwarded to the context from the `Channel` component [prop `giphyVersion`](../../components/core-components/channel.mdx#giphyversion).
+The giphy version to use when displaying giphies.
 
-| Type   | Default        |
-| ------ | -------------- |
-| string | 'fixed_height' |
+| Type                                                                                                                                                                  |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'original'` \| `'fixed_height'` \| `'fixed_height_still'` \| `'fixed_height_downsampled'` \| `'fixed_width'` \| `'fixed_width_still'` \| `'fixed_width_downsampled'` |
 
 ### imageAttachmentSizeHandler
 
-The value is forwarded to the context from the `Channel` component [prop `imageAttachmentSizeHandler`](../../components/core-components/channel.mdx#imageattachmentsizehandler).
+A custom function to provide size configuration for image attachments
 
-| Type                                                              |
-| ----------------------------------------------------------------- |
+| Type                                                             |
+| ---------------------------------------------------------------- |
 | `(a: Attachment, e: HTMLElement) => ImageAttachmentConfiguration` |
 
 ### hasMore
@@ -159,7 +145,7 @@ Boolean for the `channel` loading more messages.
 | ------- |
 | boolean |
 
-### loadingMoreNewer
+### loadingMoreNewer?
 
 Flag signalling whether newer messages are being loaded as the user scrolls down in the message list. Used internally by `VirtualizedMessageList`.
 
@@ -169,7 +155,7 @@ Flag signalling whether newer messages are being loaded as the user scrolls down
 
 ### maxNumberOfFiles
 
-The value is forwarded to the context from the `Channel` component [prop `maxNumberOfFiles`](../../components/core-components/channel.mdx#maxnumberoffiles).
+The maximum number of attachments allowed per `message`, defaults to the Stream Chat API maximum.
 
 | Type   | Default |
 | ------ | ------- |
@@ -193,7 +179,7 @@ Array of [message objects](https://getstream.io/chat/docs/javascript/message_for
 
 ### multipleUploads
 
-The value is forwarded to the context from the `Channel` component [prop `multipleUploads`](../../components/core-components/channel.mdx#multipleuploads).
+Whether to allow multiple attachment uploads on a message.
 
 | Type    | Default |
 | ------- | ------- |
@@ -223,6 +209,21 @@ Custom function to react to link preview dismissal. See the guide [Link Previews
 | ------------------------------------ |
 | `(linkPreview: LinkPreview) => void` |
 
+### channelUnreadUiState
+
+The read state maintained for use by components representing channel unread state (for example `UnreadMessagesSeparator`, `UnreadMessagesNotification`).
+
+| Property                    | Type                    | Description                                                                                                                                                                                               |
+|-----------------------------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **last_read**               | `Date`                  | Date when the channel was marked read the last time.                                                                                                                                                      |
+| **unread_messages**         | `number`                | The count of unread messages in a given channel. Unread count refers only to foreign (not own) unread messages.                                                                                           |
+| **first_unread_message_id** | `string` or `undefined` | The ID of the message that was marked unread (`notification.mark_unread` event). The value is available only when a message is marked unread. Therefore, cannot be relied on to place unread messages UI. |
+| **last_read_message_id**    | `string` or `undefined` | The ID of the message preceding the first unread message.                                                                                                                                                 |
+
+| Type                  |
+|-----------------------|
+| `ChannelUnreadUiState` |
+
 ### pinnedMessages
 
 The messages that are pinned in the `channel`.
@@ -257,7 +258,7 @@ Flag signalling whether the scroll to the bottom is prevented. Used internally b
 
 ### shouldGenerateVideoThumbnail
 
-The value is forwarded to the context from the `Channel` component [prop `shouldGenerateVideoThumbnail`](../../components/core-components/channel.mdx#shouldgeneratevideothumbnail).
+You can turn on/off thumbnail generation for video attachments
 
 | Type      |
 | --------- |
@@ -305,7 +306,7 @@ Flag signalling whether the scroll to the bottom is prevented in thread. Used in
 
 ### videoAttachmentSizeHandler
 
-The value is forwarded to the context from the `Channel` component [prop `videoAttachmentSizeHandler`](../../components/core-components/channel.mdx#videoattachmentsizehandler).
+A custom function to provide size configuration for video attachments
 
 | Type                                                              |
 | ----------------------------------------------------------------- |

docusaurus/docs/React/components/contexts/chat-context.mdx

@@ -18,7 +18,7 @@ const { client, setActiveChannel } = useChatContext();
 
 ### client
 
-The value is forwarded to the context from the `Chat` component [prop `client`](../../components/core-components/chat.mdx#client).
+The `StreamChat` client instance. Any methods from the `stream-chat-js` API interface can be run off this object.
 
 | Type   |
 | ------ |
@@ -49,7 +49,7 @@ The `queryInProgress` values are:
 - `null` - at least one channels page has been loaded and there is no query in progress at the moment
 
 | Type                 |
-| -------------------- |
+|----------------------|
 | `ChannelsQueryState` |
 
 ### closeMobileNav
@@ -62,7 +62,8 @@ The function to close mobile navigation.
 
 ### customClasses
 
-The value is forwarded to the context from the `Chat` component [prop `customClasses`](../../components/core-components/chat.mdx#customclasses)
+Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
+for implementation assistance.
 
 | Type   |
 | ------ |
@@ -119,15 +120,25 @@ You can override the default behavior by pulling it from context and then utiliz
 
 ### theme
 
-The value is forwarded to the context from the `Chat` component [prop `theme`](../../components/core-components/chat.mdx#theme)
+Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../../guides/theming/css-and-theming.mdx#css-variables) of your app.
 
-| Type   |
-| ------ |
-| string |
+| Type  |
+| ----- |
+| Theme |
+
+### themeVersion
+
+Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../theming/introduction.mdx).
+
+| Type           | Default |
+| -------------- | ------- |
+| `'1'` \| `'2'` | `'1'`   |
 
 ### useImageFlagEmojisOnWindow
 
-The value is forwarded to the context from the `Chat` component [prop `useImageFlagEmojisOnWindow`](../../components/core-components/chat.mdx#useimageflagemojisonwindow).
+Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead.
+Stream Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending
+on the platform). Set this prop to true if you want to use these custom emojis for Windows users.
 
 | Type    | Default |
 | ------- | ------- |

docusaurus/docs/React/components/contexts/component-context.mdx

@@ -36,6 +36,14 @@ Custom UI component to display a attachment previews in `MessageInput`.
 | --------- | ---------------------------------------------------------------------------------------------- |
 | component | <GHComponentLink text='AttachmentPreviewList' path='/MessageInput/AttachmentPreviewList.tsx'/> |
 
+### AutocompleteSuggestionHeader
+
+Custom UI component to override the default suggestion header component.
+
+| Type      | Default                                                                  |
+| --------- | ------------------------------------------------------------------------ |
+| component | <GHComponentLink text='Header' path='/AutoCompleteTextarea/Header.tsx'/> |
+
 ### AutocompleteSuggestionItem
 
 Custom UI component to override the default suggestion Item component.
@@ -338,11 +346,11 @@ Custom UI component to display the header of a `Thread`.
 
 ### ThreadInput
 
-Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
-| Type      | Default                                                                              |
-| --------- | ------------------------------------------------------------------------------------ |
-| component | <GHComponentLink text='MessageInputFlat' path='/MessageInput/MessageInputFlat.tsx'/> |
+| Type      | Default                                                                                                                                                                                             |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| component | <GHComponentLink text='MessageInputSmall (theme v1)' path='/MessageInput/MessageInputSmall.tsx'/> / <GHComponentLink text='MessageInputFlat (theme v2)' path='/MessageInput/MessageInputFlat.tsx'/> |
 
 ### ThreadStart