Update from GetStream/stream-chat-react@43895d3

GetStream · Oct 21, 2024 · d1bb3ce · d1bb3ce
1 parent 7eac605
commit d1bb3ce
Show file tree

Hide file tree

Showing 308 changed files with 23,030 additions and 1,834 deletions.
diff --git a/docusaurus/docs/React/assets/message-input-ui-attachments.png b/docusaurus/docs/React/assets/message-input-ui-attachments.png
diff --git a/docusaurus/docs/React/assets/message-input-ui-simple.png b/docusaurus/docs/React/assets/message-input-ui-simple.png
diff --git a/docusaurus/docs/React/assets/message-input-ui-upload-button.png b/docusaurus/docs/React/assets/message-input-ui-upload-button.png
diff --git a/.../assets/search-results-empty-theme-v2.png → ...act/assets/search-results-empty-theme.png b/.../assets/search-results-empty-theme-v2.png → ...act/assets/search-results-empty-theme.png
diff --git a/...assets/search-results-inline-theme-v2.png → ...ct/assets/search-results-inline-theme.png b/...assets/search-results-inline-theme-v2.png → ...ct/assets/search-results-inline-theme.png
diff --git a/...ssets/search-results-loading-theme-v2.png → ...t/assets/search-results-loading-theme.png b/...ssets/search-results-loading-theme-v2.png → ...t/assets/search-results-loading-theme.png
diff --git a/.../assets/search-results-popup-theme-v2.png → ...act/assets/search-results-popup-theme.png b/.../assets/search-results-popup-theme-v2.png → ...act/assets/search-results-popup-theme.png
diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx
@@ -76,22 +76,37 @@ 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: 100%;
+      width: 30%;
+      position: fixed;
     }
+    transition: width 0.3s ease-out;
+  }
+
+  .str-chat__channel {
+    flex: 1;
+    min-width: 0;
   }
 
-  .str-chat-channel {
-    width: 100%;
+  .str-chat__main-panel {
+    min-width: 0;
+    flex: 1;
+
+    &--thread-open {
+      display: none;
+    }
   }
 
   .str-chat__thread {
-    width: 100%;
+    flex: 1;
     height: 100%;
     position: fixed;
     z-index: 1;
@@ -117,9 +132,8 @@ 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;
     }
@@ -128,11 +142,24 @@ 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 {
-      width: 45%;
+      max-width: 45%;
     }
 
     .str-chat__channel-header .str-chat__header-hamburger {

diff --git a/docusaurus/docs/React/basics/overview.mdx b/docusaurus/docs/React/basics/overview.mdx
@@ -14,12 +14,13 @@ 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 a of our [tutorial](https://getstream.io/chat/react-chat/tutorial/).
+If you are new to our SDK it is best to go through our [tutorial](https://getstream.io/chat/react-chat/tutorial/).
 
 After that, our [getting started page](./getting-started.mdx) is a great next step.
 
@@ -32,4 +33,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 below 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 for adding the library to your React project.
diff --git a/docusaurus/docs/React/components/contexts/channel-state-context.mdx b/docusaurus/docs/React/components/contexts/channel-state-context.mdx
@@ -18,7 +18,7 @@ const { channel, watchers } = useChannelStateContext();
 
 ### acceptedFiles
 
-A list of accepted file upload types.
+The value is forwarded to the context from the `Channel` component [prop `acceptedFiles`](../../components/core-components/channel.mdx#acceptedfiles).
 
 | Type     |
 | -------- |
@@ -48,9 +48,24 @@ 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
 
-If true, chat users will be able to drag and drop file uploads to the entire channel window.
+The value is forwarded to the context from the `Channel` component [prop `dragAndDropWindow`](../../components/core-components/channel.mdx#draganddropwindow).
 
 | Type    | Default |
 | ------- | ------- |
@@ -66,8 +81,7 @@ Number of milliseconds to debounce firing the URL enrichment queries when typing
 
 ### 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.
+The value is forwarded to the context from the `Channel` component [prop `enrichURLForPreview`](../../components/core-components/channel.mdx#enrichurlforpreview).
 
 | Type    | Default |
 | ------- | ------- |
@@ -91,18 +105,18 @@ Custom function to identify URLs in a string for later generation of link previe
 
 ### giphyVersion
 
-The giphy version to use when displaying giphies.
+The value is forwarded to the context from the `Channel` component [prop `giphyVersion`](../../components/core-components/channel.mdx#giphyversion).
 
-| Type                                                                                                                                                                  |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `'original'` \| `'fixed_height'` \| `'fixed_height_still'` \| `'fixed_height_downsampled'` \| `'fixed_width'` \| `'fixed_width_still'` \| `'fixed_width_downsampled'` |
+| Type   | Default        |
+| ------ | -------------- |
+| string | 'fixed_height' |
 
 ### imageAttachmentSizeHandler
 
-A custom function to provide size configuration for image attachments
+The value is forwarded to the context from the `Channel` component [prop `imageAttachmentSizeHandler`](../../components/core-components/channel.mdx#imageattachmentsizehandler).
 
-| Type                                                             |
-| ---------------------------------------------------------------- |
+| Type                                                              |
+| ----------------------------------------------------------------- |
 | `(a: Attachment, e: HTMLElement) => ImageAttachmentConfiguration` |
 
 ### hasMore
@@ -145,7 +159,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`.
 
@@ -155,7 +169,7 @@ Flag signalling whether newer messages are being loaded as the user scrolls down
 
 ### maxNumberOfFiles
 
-The maximum number of attachments allowed per `message`, defaults to the Stream Chat API maximum.
+The value is forwarded to the context from the `Channel` component [prop `maxNumberOfFiles`](../../components/core-components/channel.mdx#maxnumberoffiles).
 
 | Type   | Default |
 | ------ | ------- |
@@ -179,7 +193,7 @@ Array of [message objects](https://getstream.io/chat/docs/javascript/message_for
 
 ### multipleUploads
 
-Whether to allow multiple attachment uploads on a message.
+The value is forwarded to the context from the `Channel` component [prop `multipleUploads`](../../components/core-components/channel.mdx#multipleuploads).
 
 | Type    | Default |
 | ------- | ------- |
@@ -209,21 +223,6 @@ 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`.
@@ -258,7 +257,7 @@ Flag signalling whether the scroll to the bottom is prevented. Used internally b
 
 ### shouldGenerateVideoThumbnail
 
-You can turn on/off thumbnail generation for video attachments
+The value is forwarded to the context from the `Channel` component [prop `shouldGenerateVideoThumbnail`](../../components/core-components/channel.mdx#shouldgeneratevideothumbnail).
 
 | Type      |
 | --------- |
@@ -306,7 +305,7 @@ Flag signalling whether the scroll to the bottom is prevented in thread. Used in
 
 ### videoAttachmentSizeHandler
 
-A custom function to provide size configuration for video attachments
+The value is forwarded to the context from the `Channel` component [prop `videoAttachmentSizeHandler`](../../components/core-components/channel.mdx#videoattachmentsizehandler).
 
 | Type                                                              |
 | ----------------------------------------------------------------- |

diff --git a/docusaurus/docs/React/components/contexts/chat-context.mdx b/docusaurus/docs/React/components/contexts/chat-context.mdx
@@ -18,7 +18,7 @@ const { client, setActiveChannel } = useChatContext();
 
 ### client
 
-The `StreamChat` client instance. Any methods from the `stream-chat-js` API interface can be run off this object.
+The value is forwarded to the context from the `Chat` component [prop `client`](../../components/core-components/chat.mdx#client).
 
 | 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,8 +62,7 @@ The function to close mobile navigation.
 
 ### 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.
+The value is forwarded to the context from the `Chat` component [prop `customClasses`](../../components/core-components/chat.mdx#customclasses)
 
 | Type   |
 | ------ |
@@ -120,25 +119,15 @@ You can override the default behavior by pulling it from context and then utiliz
 
 ### 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.
+The value is forwarded to the context from the `Chat` component [prop `theme`](../../components/core-components/chat.mdx#theme)
 
-| 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'`   |
+| Type   |
+| ------ |
+| string |
 
 ### 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.
+The value is forwarded to the context from the `Chat` component [prop `useImageFlagEmojisOnWindow`](../../components/core-components/chat.mdx#useimageflagemojisonwindow).
 
 | Type    | Default |
 | ------- | ------- |

diff --git a/docusaurus/docs/React/components/contexts/component-context.mdx b/docusaurus/docs/React/components/contexts/component-context.mdx
@@ -18,6 +18,35 @@ Pull values from context with our custom hook:
 const { Attachment, Avatar, Message } = useComponentContext();
 ```
 
+## WithComponents
+
+A component override functionality which utilises `ComponentContext` under the hood. This is direct replacement for a prop-based component overrides which are now slowly being deprecated.
+
+### Basic Usage of WithComponents
+
+In this case, top-level [`MessageInput`](../message-input-components/message-input.mdx) component reaches for the closest overrides and applies `MessageInputUi1`, the [`Thread`](../core-components/thread.mdx) component uses [`MessageInput`](../message-input-components/message-input.mdx) internally and its UI can be also overriden - in this case, the closest one provides override with component `MessageInputUi2`. If we were to remove this `WithComponents` wrapper over [`Thread`](../core-components/thread.mdx) component, the closest override for [`Thread`](../core-components/thread.mdx)'s [`MessageInput`](../message-input-components/message-input.mdx) component would be `MessageInputUi1`.
+
+```tsx
+const MessageInputUi1 = () => {
+  /*...*/
+};
+const MessageInputUi2 = () => {
+  /*...*/
+};
+
+<Channel>
+  <WithComponents overrides={{ Input: MessageInputUi1 }}>
+    <Window>
+      <MessageList />
+      <MessageInput focus />
+    </Window>
+    <WithComponents overrides={{ Input: MessageInputUi2 }}>
+      <Thread />
+    </WithComponents>
+  </WithComponents>
+</Channel>;
+```
+
 ## Values
 
 ### Attachment
@@ -36,14 +65,6 @@ 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.
@@ -346,11 +367,11 @@ Custom UI component to display the header of a `Thread`.
 
 ### ThreadInput
 
-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.
+Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.
 
-| Type      | Default                                                                                                                                                                                             |
-| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| component | <GHComponentLink text='MessageInputSmall (theme v1)' path='/MessageInput/MessageInputSmall.tsx'/> / <GHComponentLink text='MessageInputFlat (theme v2)' path='/MessageInput/MessageInputFlat.tsx'/> |
+| Type      | Default                                                                              |
+| --------- | ------------------------------------------------------------------------------------ |
+| component | <GHComponentLink text='MessageInputFlat' path='/MessageInput/MessageInputFlat.tsx'/> |
 
 ### ThreadStart