feat: add link previews to MessageInput (#2083)

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

@@ -22,7 +22,7 @@ const { closeThread, loadMoreThread } = useChannelActionContext();
 Function to add a temporary notification to `MessageList`, and it will be removed after 5 seconds.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 |          |
 
@@ -31,7 +31,7 @@ Function to add a temporary notification to `MessageList`, and it will be remove
 The function to close the currently open `Thread`.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### dispatch
@@ -47,7 +47,7 @@ The dispatch function for the [`ChannelStateReducer`](https://github.com/GetStre
 A function that takes a message to be edited, returns a Promise.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### jumpToLatestMessage
@@ -61,7 +61,7 @@ Used in conjunction with `jumpToMessage`. Restores the position of the message l
 ### jumpToMessage
 
 When called, `jumpToMessage` causes the current message list to jump to the message with the id specified in the `messageId` parameter.
-Here's an example of a button, which, when clicked, searches for a given message and  navigates to it:
+Here's an example of a button, which, when clicked, searches for a given message and navigates to it:
 
 ```tsx
 const JumpToMessage = () => {
@@ -90,104 +90,104 @@ const JumpToMessage = () => {
 
 // further down the line, add the JumpToMessage to the component tree as a child of `Channel`
 // ...
-  return (<Channel channel={channel}>
+return (
+  <Channel channel={channel}>
     <JumpToMessage />
     <Window>
       <MessageList />
     </Window>
-  </Channel>)
+  </Channel>
+);
 ```
 
-
 | Type                                   |
-| ------------------------------------   |
+| -------------------------------------- |
 | `(messageId: string) => Promise<void>` |
 
 ### loadMore
 
 The function to load next page/batch of `messages` (used for pagination).
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
-
 ### loadMoreNewer
 
 The function to load next page/batch of `messages` (used for pagination).
 
-| Type                                |
-|-------------------------------------|
+| Type                                 |
+| ------------------------------------ |
 | (limit?: number) => Promise<number\> |
 
 ### loadMoreThread
 
 The function to load next page/batch of `messages` in a currently active/open `Thread` (used for pagination).
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### onMentionsClick
 
 Custom action handler function to execute when @mention is clicked, takes a DOM click event object and an array of mentioned users.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### onMentionsHover
 
 The function to execute when @mention is hovered in a `message`, takes a DOM click event object and an array of mentioned users.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### openThread
 
 The function to execute when replies count button is clicked, takes the parent message of the `Thread` to be opened and optionally a DOM click event.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### removeMessage
 
 The function to remove a `message` from `MessageList`, handled by the `Channel` component. Takes a `message` object.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### retrySendMessage
 
 The function to resend a `message`, handled by the `Channel` component.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### sendMessage
 
 The function to send a `message` on `Channel`. Takes a `message` object with the basic message information as the first argument, and custom data as the second argument.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### setQuotedMessage
 
 The function to send a `QuotedMessage` on a `Channel`, take a `message` object.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### updateMessage
 
 The function to update a `message` on `Channel`, takes a `message` object.
 
 | Type     |
-|----------|
+| -------- |
 | function |

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

@@ -57,6 +57,23 @@ If true, chat users will be able to drag and drop file uploads to the entire cha
 | ------- | ------- |
 | boolean | false   |
 
+### debounceURLEnrichmentMs:
+
+Number of milliseconds to debounce firing the URL enrichment queries when typing. The default value is 1500(ms). See the guide [Link Previews in Message Input](../../../guides/customization/link-previews) for more.
+
+| Type   | Default |
+| ------ | ------- |
+| number | 1500    |
+
+### 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 |
+| ------- | ------- |
+| boolean | false   |
+
 ### error
 
 Error object (if any) in loading the `channel`, otherwise null.
@@ -65,6 +82,14 @@ Error object (if any) in loading the `channel`, otherwise null.
 | ------ |
 | object |
 
+### findURLFn
+
+Custom function to identify URLs in a string for later generation of link previews. See the guide [Link Previews in Message Input](../../../guides/customization/link-previews) for more.
+
+| Type                         |
+| ---------------------------- |
+| `(text: string) => string[]` |
+
 ### giphyVersion
 
 The giphy version to use when displaying giphies.
@@ -89,7 +114,6 @@ If the channel has more, older, messages to paginate through.
 | ------- |
 | boolean |
 
-
 ### hasMoreNewer
 
 If the channel has more, newer, messages to paginate through.
@@ -103,7 +127,7 @@ If the channel has more, newer, messages to paginate through.
 Value is used internally for jump-to-message logic. Once the user "jumped" to the message, the message with the given ID is highlighted by manipulating its styles attribute.
 
 | Type   |
-|--------|
+| ------ |
 | string |
 
 ### loading
@@ -127,7 +151,7 @@ Boolean for the `channel` loading more messages.
 Flag signalling whether newer messages are being loaded as the user scrolls down in the message list. Used internally by `VirtualizedMessageList`.
 
 | Type    |
-|---------|
+| ------- |
 | boolean |
 
 ### maxNumberOfFiles
@@ -178,6 +202,14 @@ Temporary notifications added to the `MessageList` on specific user/message acti
 | -------------------------------------------------------- |
 | {id: string, text: string, type: 'success' \| 'error'}[] |
 
+### onLinkPreviewDismissed
+
+Custom function to react to link preview dismissal. See the guide [Link Previews in Message Input](../../../guides/customization/link-previews) for more.
+
+| Type                                 |
+| ------------------------------------ |
+| `(linkPreview: LinkPreview) => void` |
+
 ### pinnedMessages
 
 The messages that are pinned in the `channel`.
@@ -202,14 +234,14 @@ The read state for each `channel` member.
 | ------ |
 | object |
 
-
 ### suppressAutoscroll
 
 Flag signalling whether the scroll to the bottom is prevented. Used internally by `MessageList` and `VirtualizedMessageList` components.
 
 | Type    |
-|---------|
+| ------- |
 | boolean |
+
 ### shouldGenerateVideoThumbnail
 
 You can turn on/off thumbnail generation for video attachments
@@ -255,8 +287,9 @@ Array of messages within a `thread`.
 Flag signalling whether the scroll to the bottom is prevented in thread. Used internally by `MessageList` and `VirtualizedMessageList` components.
 
 | Type    |
-|---------|
+| ------- |
 | boolean |
+
 ### videoAttachmentSizeHandler
 
 A custom function to provide size configuration for video attachments

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

@@ -38,7 +38,7 @@ The currently active channel, which populates the [`Channel`](../core-components
 The function to close mobile navigation.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### customClasses
@@ -55,7 +55,7 @@ for implementation assistance.
 The callback function used to get available client-side app settings, includes image and file upload config.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### latestMessageDatesByChannel
@@ -79,15 +79,15 @@ An array of users that have been muted by the connected user.
 When the screen width is at a mobile breakpoint, whether the mobile navigation menu is open.
 
 | Type    | Default |
-|---------|---------|
+| ------- | ------- |
 | boolean | true    |
 
 ### openMobileNav
 
 The function to open mobile navigation.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### setActiveChannel
@@ -96,7 +96,7 @@ A function to set the currently active channel. This is used in the `ChannelList
 You can override the default behavior by pulling it from context and then utilizing the function.
 
 | Type     |
-|----------|
+| -------- |
 | function |
 
 ### theme
@@ -111,9 +111,9 @@ Deprecated and to be removed in a future major release. Use the `customStyles` p
 
 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           | Default |
+| -------------- | ------- |
+| `'1'` \| `'2'` | `'1'`   |
 
 ### useImageFlagEmojisOnWindow