diff --git a/docusaurus/docs/React/customization/css-and-theming.mdx b/docusaurus/docs/React/customization/css-and-theming.mdx
index cb6c7e8503..b3b12289b1 100644
--- a/docusaurus/docs/React/customization/css-and-theming.mdx
+++ b/docusaurus/docs/React/customization/css-and-theming.mdx
@@ -1,13 +1,18 @@
---
id: css_and_theming
sidebar_position: 4
-title: CSS and Theming
+title: CSS and Theming (deprecated)
+keywords: [v1, theme-v1, theming-v1, theming, css]
---
import Theming1 from '../assets/Theming1.png';
import Theming2 from '../assets/Theming2.png';
import Theming3 from '../assets/Theming3.png';
+:::caution
+This page contains information about the old theming system (v1) of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](../theming/introduction.mdx).
+:::
+
While the components in the React Chat library come with basic styling, the look and feel can easily be adjusted to fit
your specifications. For small and precise changes, individual CSS classes can be overridden.
@@ -21,7 +26,12 @@ default container CSS.
To override pre-defined library styles, follow this simple process:
- Import our bundled CSS into the file where you instantiate your chat application. We maintain a separate repository, `@stream-io/stream-chat-css`,
- which houses all of the SCSS files for the components.
+ which houses all the SCSS files for the components. This CSS is bundled with the `stream-chat-react` SDK.
+
+```jsx
+import 'stream-chat-react/dist/css/index.css';
+import './App.css';
+```
- Use the browser inspector or view the library code and locate default styles you wish to override
@@ -29,13 +39,6 @@ To override pre-defined library styles, follow this simple process:
- Import your local CSS file after Stream's bundled CSS
-For example:
-
-```jsx
-import '@stream-io/@stream-io/stream-chat-css/dist/css/index.css';
-import './App.css';
-```
-
## Importing scss Files
As an alternative to importing our entire style sheet (perhaps, due to it's size), there's also the option to easily assemble only
diff --git a/docusaurus/docs/React/customization/input-ui.mdx b/docusaurus/docs/React/customization/input-ui.mdx
index 2fb2307730..97c44fd067 100644
--- a/docusaurus/docs/React/customization/input-ui.mdx
+++ b/docusaurus/docs/React/customization/input-ui.mdx
@@ -8,15 +8,13 @@ title: Message Input UI
The React Chat component library provides a highly customizable `MessageInput` component. We'll outline the various ways in which you
can customize the look and behavior of this component, ranging from simple style changes, all the way to creating a completely
-new input which custom logic.
+new input with custom logic.
### Styling
The default [Input UI](../message-input-components/input-ui.mdx) component comes with predefined styles and CSS classes. The easiest way
to customize styling is to write your own CSS and override the default values. To get a sense of all the classes and styles
-applied to the `MessageInput` and its child components, you can either inspect the DOM inside your browser or take a
-look at the [MessageInput.scss](https://github.com/GetStream/stream-chat-react/blob/master/src/styles/MessageInput.scss) and
-[MessageInputFlat.scss](https://github.com/GetStream/stream-chat-react/blob/master/src/styles/MessageInputFlat.scss) source files.
+applied to the `MessageInput` and its child components, you can either inspect the DOM inside your browser.
For example, here's how you can override the styles for the underlying `textarea` and make its background light blue:
@@ -37,20 +35,18 @@ function that handles the uploading of image attachments).
:::note
For a complete overview of props, take a look at the [MessageInput props](../message-input-components/message-input.mdx#props) section.
:::
-​
### Override UI Components
-Component props let you override the UI components rendered inside the `MessageInput`. These props are available
-on `Channel`, which injects these components into the `ComponentContext`, and in turn are consumed by the
+You can override the UI components rendered inside the `MessageInput` via `Channel` props. These are then injected into the `ComponentContext`, and in turn are consumed by the
`MessageInput`.
-Here's an example of overriding the default `EmojiIcon` component:​
+Here's an example of overriding the default `EmojiIcon` component:
```jsx
const CustomEmojiIcon = () => {
const { t } = useTranslationContext();
-​
+
return (
@@ -137,7 +133,7 @@ The `CustomTriggerProvider` component is then added as a prop onto `Channel` to
### Building the Input UI
-The `MessageInput` component wraps and provides all of the stateful logic needed to build your own Input UI component.
+The `MessageInput` component wraps and provides all the stateful logic needed to build your own Input UI component.
Both `Channel` and `MessageInput` accept an `Input` prop, which lets you pass in your own UI component that consumes the
`MessageInputContext` and handles the input's display.
@@ -145,7 +141,7 @@ Both `Channel` and `MessageInput` accept an `Input` prop, which lets you pass in
If an `Input` prop is not provided, `MessageInput` renders [`MessageInputFlat`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx)
by default.
:::
-​
+
We provide a `useMessageInputContext` custom hook, which lets you access all the stateful data and functionality needed
to create your own custom Input UI component.
@@ -155,7 +151,6 @@ Use `MessageInputFlat` as a guide to help you build your own custom Input UI com
The below example shows how to build a simple Input UI component, which calls the `useMessageInputContext` hook
and use its return values to build functionality:
-​
```jsx
import {
@@ -167,10 +162,10 @@ import {
useMessageInputContext,
useTranslationContext,
} from 'stream-chat-react';
-​
+
export const CustomMessageInput = () => {
const { t } = useTranslationContext();
-​
+
const {
closeEmojiPicker,
emojiPickerIsOpen,
@@ -178,7 +173,7 @@ export const CustomMessageInput = () => {
handleSubmit,
openEmojiPicker,
} = useMessageInputContext();
-​
+
return (
diff --git a/docusaurus/docs/React/customization/message-ui.mdx b/docusaurus/docs/React/customization/message-ui.mdx
index 9be7772852..ec0caf9ba7 100644
--- a/docusaurus/docs/React/customization/message-ui.mdx
+++ b/docusaurus/docs/React/customization/message-ui.mdx
@@ -12,8 +12,8 @@ Using pre-built UI components from the library, the following guide walks you th
[Message UI](../message-components/message-ui.mdx) component that looks great and comes packed with functionality. This
component must be added to either the `Channel` or `MessageList` component via the `Message` prop.
-All of the message UI components in this example have access to the `MessageContext`, and therefore can call the `useMessageContext`
-custom hook. The return value from this hook contains all of the values and functions needed to build a Message UI component.
+All the message UI components in this example have access to the `MessageContext`, and therefore can call the `useMessageContext`
+custom hook. The return value from this hook contains all the values and functions needed to build a Message UI component.
### UI Component Overview
@@ -53,8 +53,8 @@ The custom Message UI component built below imports and uses the following UI co
### How it Fits Together
The sample code below assembles the above UI building blocks into a fully featured Message UI component. The UI components allow you to
-pick the features you wish to employ in your message and orient them in a manner that meets your design specifications. All of the
-components consume the `MessageContext` and from pull the necessary data by using the `useMessageContext` hook.
+pick the features you wish to employ in your message and orient them in a manner that meets your design specifications. All the
+components consume the `MessageContext` by pulling the necessary through `useMessageContext` hook.
:::tip
In advanced use cases, the pre-built, UI components may not provide enough design customization potential. In these situations, we
@@ -92,12 +92,13 @@ export const CustomMessage = () => {
const messageWrapperRef = useRef(null);
const hasReactions = messageHasReactions(message);
+ const hasAttachments = message.attachments && message.attachments.length > 0;
return (
-
+
{message.user?.name}
@@ -109,7 +110,7 @@ export const CustomMessage = () => {
)}
- {message.attachments &&
}
+ {hasAttachments &&
}
{hasReactions && !showDetailedReactions && isReactionEnabled &&
}
@@ -120,9 +121,9 @@ export const CustomMessage = () => {
CustomMessage.scss:
-```css
+```scss
.str-chat__li {
- margin: 0px;
+ margin: 0;
padding: 15px;
position: relative;
@@ -216,7 +217,7 @@ CustomMessage.scss:
font-size: 15px;
color: black;
border-radius: 0;
- border: 0px;
+ border: 0;
margin-left: 0;
p {
@@ -246,7 +247,7 @@ CustomMessage.scss:
right: 20px;
border-radius: 20px;
background: white;
- box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
border: 1px solid #bed5e4;
}
diff --git a/docusaurus/docs/React/customization/typescript.mdx b/docusaurus/docs/React/customization/typescript.mdx
index 4891595a53..a7d93088d2 100644
--- a/docusaurus/docs/React/customization/typescript.mdx
+++ b/docusaurus/docs/React/customization/typescript.mdx
@@ -10,7 +10,7 @@ the use of [generics](https://www.typescriptlang.org/docs/handbook/2/generics.ht
In many cases, TypeScript uses [inference](https://www.typescriptlang.org/docs/handbook/type-inference.html) from provided props to establish a component or
value's type. It is therefore important that the proper generics be applied to the `stream-chat` client instance during construction. The
-[documentation on `stream-chat` TypeScript](https://github.com/GetStream/stream-chat-js#typescript-v2xx) has detailed examples of how this can be accomplished.
+[documentation on `stream-chat` TypeScript](https://github.com/GetStream/stream-chat-js/blob/master/docs/typescript.md) has detailed examples of how this can be accomplished.
The Stream Chat client takes a type with seven customizable fields that currently exist in `stream-chat`.
```tsx
@@ -104,81 +104,27 @@ Through this client instantiation, we have added type support for the following
- `channel.image`
- `message.isAdminMessage`
+- `user.image`
- `user.nickName`
:::note
`DefaultCommandType` extends `string & {}` to maintain intellisense for the included commands. This allows you to extend a string union.
:::
-The below snippet shows the current default types in the `stream-chat-react` component library. Any additional custom types
-will extend these defaults. Core to understanding this pattern is how generics can be
-[applied to JSX elements](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements).
-
-```tsx
-export type DefaultAttachmentType = UnknownType & {
- asset_url?: string;
- file_size?: number;
- id?: string;
- images?: Array<{
- image_url?: string;
- thumb_url?: string;
- }>;
-};
-
-export type DefaultChannelType = UnknownType & {
- frozen?: boolean;
- image?: string;
- member_count?: number;
- subtitle?: string;
-};
-
-type DefaultCommandType = string & {};
-
-type DefaultEventType = Record
;
-
-export type CustomMessageType = 'channel.intro' | 'message.date';
-
-export type DefaultMessageType<
- StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = UnknownType & {
- customType?: CustomMessageType;
- date?: string | Date;
- errorStatusCode?: number;
- event?: Event;
- unread?: boolean;
-};
-
-type DefaultReactionType = Record;
-
-export type DefaultUserTypeInternal = {
- image?: string;
- status?: string;
-};
-
-export type DefaultUserType<
- StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = UnknownType &
- DefaultUserTypeInternal & {
- mutes?: Array>;
- };
-```
-
The exported custom context hooks also require generics be applied to correctly type custom returns. For example, the
`useChannelStateContext` hook needs all generics to get a correctly typed return for `channel`.
```tsx
-const { channel } = useChannelStateContext<
- DefaultAttachmentType,
- { image?: string },
- DefaultCommandType,
- DefaultEventType,
- { isAdminMessage?: boolean },
- DefaultReactionType,
- { nickName?: string }
->();
+const { channel } = useChannelStateContext();
```
:::tip
To see an example of extending the default `Attachment` type, see the [Geolocation Attachment](../custom-code-examples/geolocation-attachment.mdx#custom-map-attachment)
custom code example.
:::
+
+The current default types can be seen in the [`stream-chat-react` component library](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts). Any additional custom types
+will extend these defaults. Core to understanding this pattern is how generics can be
+[applied to JSX elements](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements).
+
+
diff --git a/docusaurus/docs/React/message-components/attachment.mdx b/docusaurus/docs/React/message-components/attachment.mdx
index 86ae53d60e..caa1c033b3 100644
--- a/docusaurus/docs/React/message-components/attachment.mdx
+++ b/docusaurus/docs/React/message-components/attachment.mdx
@@ -4,10 +4,14 @@ sidebar_position: 3
title: Attachments
---
+import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import ReviewNote from '../_docusaurus-components/ReviewNote';
+
+
The `Attachment` component takes a list of message attachments and conditionally renders the UI of each individual attachment based
upon its type. The following table shows the attachment UI components that will be rendered for various attachment types:
-| Attachment Type | UI Component | File type(s) (non-exhaustive) |
+| Attachment Type | UI Component | File type(s) (non-exhaustive) |
| --------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| `audio` | [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) | MP3, WAV, M4A, FLAC, AAC |
| `file` | [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) | DOC, DOCX, PDF, PPT, PPTX, TXT, XLS, XLSX |
@@ -15,8 +19,7 @@ upon its type. The following table shows the attachment UI components that will
| `image` | [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) | HEIC, GIF, JPEG, JPG, PNG, TIFF, BMP |
| `video` | [ReactPlayer](https://github.com/cookpete/react-player/blob/master/src/ReactPlayer.js) | MP4, OGG, WEBM, Quicktime(QTFF, QT, or MOV) |
-Message attachments that do not conform to one of the above types are rendered with the
-[Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) component.
+Message attachment objects that do not conform to one of the above types are considered to contain scraped content and should contain at least `og_scrape_url` or `title_link` to be rendered with the
- {message.attachments &&
}
+ { hasAttachments &&
}
// render remaining custom Message UI
- {message.attachments &&
}
- // render remaining custom Message UI
+ {hasAttachments &&
}
+ {/* render remaining custom Message UI */}
my custom voice-memo component
;
+ return
+
+
+ ;
+```
+
## Props
### Required
attachments
@@ -94,53 +122,62 @@ The handler function to call when an action is performed on an attachment, examp
| ----------------------------------------------------------------------------------------------------- |
| (dataOrName?: string \| FormData, value?: string, event?: React.BaseSyntheticEvent) => Promise |
+
+
+
+ What are attachment actions, what is their use case / recipes? Missing concept explanation. It would be nice to have a link to a doc explaining these.
+
+
### AttachmentActions
Custom UI component for displaying attachment actions.
-| Type | Default |
-| --------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| component | [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) |
+| Type | Default |
+|-----------|--------------------------------------------------------------------------------------|
+| component |
@@ -70,23 +95,49 @@ For example, if we strip `MessageSimple` down to its core pieces, the component
-
-
+
+
+
+
+
+
+ // highlight-next-line
+
+
+// highlight-start
-
-
-
-
+
+
+// highlight-end
|
### readBy
@@ -383,7 +447,7 @@ Ref to be placed on the reaction selector component (overrides the ref stored in
An array of users that have read the current message (overrides the value stored in `MessageContext`).
| Type |
-| ----- |
+|-------|
| array |
### renderText
@@ -391,7 +455,7 @@ An array of users that have read the current message (overrides the value stored
Custom function to render message text content (overrides the function stored in `MessageContext`).
| Type | Default |
-| -------- | -------------------------------------------------------------------------------------- |
+|----------|----------------------------------------------------------------------------------------|
| function | [renderText](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) |
### setEditingState
@@ -407,7 +471,7 @@ Function to toggle the editing state on a message (overrides the function stored
When true, show the reactions list component (overrides the value stored in `MessageContext`).
| Type |
-| ------- |
+|---------|
| boolean |
### threadList
@@ -415,7 +479,7 @@ When true, show the reactions list component (overrides the value stored in `Mes
If true, indicates that the current `MessageList` component is part of a `Thread` (overrides the value stored in `MessageContext`).
| Type | Default |
-| ------- | ------- |
+|---------|---------|
| boolean | false |
### unsafeHTML
@@ -423,5 +487,5 @@ If true, indicates that the current `MessageList` component is part of a `Thread
If true, renders HTML instead of markdown. Posting HTML is only supported server-side (overrides the value stored in `MessageContext`).
| Type | Default |
-| ------- | ------- |
+|---------|---------|
| boolean | false |
diff --git a/docusaurus/docs/React/message-components/message.mdx b/docusaurus/docs/React/message-components/message.mdx
index 0ac8ee9c70..9629b666bf 100644
--- a/docusaurus/docs/React/message-components/message.mdx
+++ b/docusaurus/docs/React/message-components/message.mdx
@@ -4,9 +4,13 @@ sidebar_position: 1
title: Message
---
-The `Message` component is a React Context provider that wraps all of the logic, functionality, and UI for the individual messages
-displayed in a message list. It provides the [`MessageContext`](../contexts/message-context.mdx) to its children. All of
-the message UI components consume the `MessageContext` and rely on the stored data for their display and interaction.
+import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import ReviewNote from '../_docusaurus-components/ReviewNote';
+
+import MessageActionsBoxWithCustomAction from '../assets/message-actions-box-custom-actions.png';
+
+The `Message` component is a React Context provider that wraps all the logic, functionality, and UI for the individual messages
+displayed in a message list. It provides the [`MessageContext`](../contexts/message-context.mdx) to its children. All the message UI components consume the `MessageContext` and rely on the stored data for their display and interaction.
:::note
The majority of Stream Chat use cases will not need to use the `Message` component directly. We've documented it here for reference,
@@ -32,23 +36,23 @@ component. The Message UI component is passed as the `Message` prop into either
The `StreamChat` message object, which provides necessary data to the underlying UI components.
| Type |
-| ------ |
+|--------|
| object |
### additionalMessageInputProps
-Additional props to be passed to the underlying `MessageInput` component, [available props](../message-input-components/message-input.mdx/#props).
+Additional props to be passed to the underlying `MessageInput` component, [available props](../message-input-components/message-input.mdx/#props). It is rendered when editing a message.
| Type |
-| ------ |
+|--------|
| object |
### autoscrollToBottom
-Call this function to keep message list scrolled to the bottom when the message list container scroll height increases (only available in the `VirtualizedMessageList`). An example use case is that upon user's interaction with the application, a new element appears below the last message. In order to keep the newly rendered content visible, the `autoscrollToBottom` function can be called. The container, however, is not scrolled to the bottom, if already scrolled up more than 4px from the bottom.
+Call this function to keep message list scrolled to the bottom when the message list container scroll height increases (only available in the `VirtualizedMessageList`). An example use case is that upon user's interaction with the application, a new element appears below the last message. In order to keep the newly rendered content visible, the `autoscrollToBottom` function can be called. The container, however, is not scrolled to the bottom, if already scrolled up more than 4px from the bottom. The function is provided by the SDK and is not inteded for customization.
| Type |
-| ---------- |
+|------------|
| () => void |
### closeReactionSelectorOnClick
@@ -56,23 +60,42 @@ Call this function to keep message list scrolled to the bottom when the message
If true, picking a reaction from the `ReactionSelector` component will close the selector.
| Type | Default |
-| ------- | ------- |
+|---------|---------|
| boolean | false |
### customMessageActions
-An object containing custom message actions (key) and function handlers (value).
+An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](../../message-components/message_ui/#message-actions-box) is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
+
+```jsx
+const customActions = {
+ 'Copy text': (message) => {
+ navigator.clipboard.writeText(message.text || '')
+ },
+};
+
+
+ The text rendering in the SDK may need a bit more user friendly documentation with examples, recommendations.
+
+
### renderText
Custom function to render message text content.
| Type | Default |
-| -------- | -------------------------------------------------------------------------------------- |
+|----------|----------------------------------------------------------------------------------------|
| function | [renderText](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) |
### retrySendMessage
@@ -295,7 +331,7 @@ Custom function to render message text content.
Custom action handler to retry sending a message after a failed request.
| Type | Default |
-| -------- | -------------------------------------------------------------------------------------------------------- |
+|----------|----------------------------------------------------------------------------------------------------------|
| function | [ChannelActionContextValue['retrySendMessage']](../contexts/channel-action-context.mdx#retrysendmessage) |
### threadList
@@ -303,7 +339,7 @@ Custom action handler to retry sending a message after a failed request.
If true, indicates that the current `MessageList` component is part of a `Thread`.
| Type | Default |
-| ------- | ------- |
+|---------|---------|
| boolean | false |
### unsafeHTML
@@ -311,5 +347,5 @@ If true, indicates that the current `MessageList` component is part of a `Thread
If true, renders HTML instead of markdown. Posting HTML is only supported server-side.
| Type | Default |
-| ------- | ------- |
+|---------|---------|
| boolean | false |
diff --git a/docusaurus/docs/React/message-components/reactions.mdx b/docusaurus/docs/React/message-components/reactions.mdx
index 1ffbbac95b..74ebb91108 100644
--- a/docusaurus/docs/React/message-components/reactions.mdx
+++ b/docusaurus/docs/React/message-components/reactions.mdx
@@ -4,6 +4,8 @@ sidebar_position: 4
title: Reactions
---
+import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+
The Stream Chat API provides built-in support for adding reactions to messages. The component library provides three default
components to enable reaction selection and display:
@@ -134,23 +136,23 @@ const CustomReactionsList = (props) => {
Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
| Type |
-| ------ |
+|--------|
| object |
### Avatar
Custom UI component to display a user's avatar.
-| Type | Default |
-| --------- | ----------------------------------------------------------------------------------------------------- |
-| component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |
+| Type | Default |
+|-----------|------------------------------------------------------------|
+| component | | [MessageContextValue['handleReaction']](../contexts/message-context.mdx#handlereaction) |
### latest_reactions
@@ -166,7 +168,15 @@ Function that adds/removes a reaction on a message (overrides the function store
An array of the reaction objects to display in the list (overrides `message.latest_reactions` from `MessageContext`).
| Type |
-| ----- |
+|-------|
+| array |
+
+### own_reactions
+
+An array of own reaction objects to display in the list (overrides `message.own_reactions` from `MessageContext`).
+
+| Type |
+|-------|
| array |
### reaction_counts
@@ -174,23 +184,23 @@ An array of the reaction objects to display in the list (overrides `message.late
An object that keeps track of the count of each type of reaction on a message (overrides `message.reaction_counts` from `MessageContext`).
| Type |
-| ------------------------------- |
+|---------------------------------|
| { [key: reactionType]: number } |
### reactionOptions
A list of the currently supported reactions on a message.
-| Type | Default |
-| ----- | ---------------------------------------------------------------------------------------------------------------------- |
-| array | [defaultMinimalEmojis](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/emojiData.ts) |
+| Type | Default |
+|-------|-----------------------------------------------------------------------------|
+| array |
+ Add visualisation of the UI parts for better understanding.
+
+
The following UI components are available for use:
-- [`MessageActions`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActions.tsx) - displays
- the available actions on a message (ex: edit, flag, pin)
+- [`MessageActions`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActions.tsx) - displays the available actions on a message (ex: edit, flag, pin)
- [`MessageDeleted`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) - renders when
`message.type` is `deleted`
@@ -37,14 +46,32 @@ The following UI components are available for use:
- [`QuotedMessage`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) - shows a quoted
message UI wrapper when the sent message quotes a previous message
+Besides the above there are also components that render reaction list and reaction selector. You can find more about them in [dedicated chapter](./reactions.mdx).
+
## MessageActions Props
+### ActionsIcon
+
+Custom component rendering the icon used in message actions button. This button invokes the message actions menu.
+
+| Type | Default |
+|-----------------------|-----------------------------------------------------------------|
+| `React.ComponentType` | \| void |
-### message
-
-The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`).
-
-| Type |
-| ------ |
-| object |
-
-### customWrapperClass
-
-Custom CSS class to be added to the `div` wrapping the component.
-
-| Type |
-| ------ |
-| string |
-
### inline
If true, renders the wrapper component as a `span`, not a `div`.
| Type | Default |
-| ------ | ------- |
+|--------|---------|
| string | false |
+### message
+
+The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`).
+
+| Type |
+|--------|
+| object |
+
### messageWrapperRef
React mutable ref placed on the message root `div`. It is forwarded by `MessageOptions` down to `MessageActions` ([see the example](../customization/message-ui.mdx)).
| Type |
-| -------------------------------- |
+|----------------------------------|
| React.RefObject |
### mine
-Function that returns whether or not the message was sent by the connected user.
+Function that returns whether the message was sent by the connected user.
| Type |
-| ------------- |
+|---------------|
| () => boolean |
## MessageDeleted Props
@@ -126,25 +145,25 @@ Function that returns whether or not the message was sent by the connected user.
The `StreamChat` message object, which provides necessary data to the underlying UI components.
| Type |
-| ------ |
+|--------|
| object |
## MessageOptions Props
-### displayLeft
+### ActionsIcon
-If true, sets the `MessageOptions` component to the left of the connected user's messages.
+Custom component rendering the icon used in message actions button. This button invokes the message actions menu.
-| Type | Default |
-| ------- | ------- |
-| boolean | true |
+| Type | Default |
+|-----------------------|-----------------------------------------------------------------|
+| `React.ComponentType` | \| void |
### messageWrapperRef
@@ -160,9 +179,17 @@ Function that opens a [`Thread`](../core-components/thread.mdx) on a message (ov
React mutable ref that can be placed on the message root `div`. `MessageOptions` component forwards this prop to [`MessageActions`](#messageactions-props) component ([see the example](../customization/message-ui.mdx)).
| Type |
-| -------------------------------- |
+|----------------------------------|
| React.RefObject |
+### ReactionIcon
+
+Custom component rendering the icon used in a message options button invoking reactions selector for a given message.
+
+| Type | Default |
+|-----------------------|------------------------------------------------------------------|
+| `React.ComponentType` | \| void |
+| Type |
+|-------------------------|
+| React.MouseEventHandler |
### reply_count
The amount of replies (i.e., threaded messages) on a message.
| Type |
-| ------ |
+|--------|
| number |
## MessageStatus Props
@@ -223,9 +258,16 @@ The amount of replies (i.e., threaded messages) on a message.
Custom UI component to display a user's avatar (overrides the value from `ComponentContext`).
-| Type | Default |
-| --------- | ----------------------------------------------------------------------------------------------------- |
-| component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |
+| Type | Default |
+|-----------|------------------------------------------------------------|
+| component |
+ The same prop is called theme for MessageText and MessageOptions components
+
### messageType
@@ -236,12 +278,12 @@ Message type string to be added to CSS class names.
```
| Type | Default |
-| ------ | -------- |
+|--------|----------|
| string | 'simple' |
### tooltipUserNameMapper
-Allows you to customize the username(s) that appear on the message status tooltip.
+Allows to customize the username(s) that appear on the message status tooltip.
| Type | Default |
| ------------------------------ | ------------------------------- |
@@ -281,7 +323,7 @@ const WrappedConnectedUser = ({ token, userId }: Omit boolean |
### maxRows
@@ -197,6 +189,39 @@ If true, triggers typing events on text input keystroke.
| ------- | ------- |
| boolean | true |
+### shouldSubmit
+
+Currently, `Enter` is the default submission key and `Shift`+`Enter` is the default combination for the new line.
+If specified, this function overrides the default behavior specified previously.
+
+| Type |
+| --------------------------------- |
+| (event: KeyboardEvent) => boolean |
+
+:::note
+
+### Migration from versions older than `9.0.0`
+
+Property **keycodeSubmitKeys** has been replaced by **shouldSubmit** and thus is no longer supported.
+If you had custom key codes specified like so:
+
+```ts
+keyCodeSubmitKeys={[[16,13], [57], [48]]} // submission keys are Shift+Enter, 9, and 0
+```
+
+then that would newly translate to:
+
+```ts
+const shouldSubmit = (event) =>
+ (event.key === 'Enter' && event.shiftKey) || event.key === '9' || event.key === '0';
+
+...
+
+shouldSubmit={shouldSubmit}
+```
+
+:::
+
### useMentionsTransliteration
If true, will use an optional dependency to support transliteration in the input for mentions. See: https://github.com/sindresorhus/transliterate
diff --git a/docusaurus/docs/React/message-input-components/ui-components.mdx b/docusaurus/docs/React/message-input-components/ui-components.mdx
index f9fc7091cf..b1c5fff7d2 100644
--- a/docusaurus/docs/React/message-input-components/ui-components.mdx
+++ b/docusaurus/docs/React/message-input-components/ui-components.mdx
@@ -5,7 +5,7 @@ title: UI Components
---
As described in the [Input UI](./input-ui.mdx) section, our default [`MessageInputFlat`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx)
-component is a combination of various UI sub-components. We export all of the building blocks of `MessageInputFlat`, so a custom Input UI
+component is a combination of various UI subcomponents. We export all the building blocks of `MessageInputFlat`, so a custom Input UI
component can be built in a similar way. Check out the [Input UI Customization](../customization/input-ui.mdx) section for an example.
The following UI components are available for use:
@@ -35,7 +35,7 @@ The following UI components are available for use:
Function to override the default submit handler on the underlying `textarea` component.
| Type | Default |
-| ----------------------------------------- | ---------------------------------------------------------------------------------------------- |
+|-------------------------------------------|------------------------------------------------------------------------------------------------|
| (event: React.BaseSyntheticEvent) => void | [MessageInputContextValue['handleSubmit']](../contexts/message-input-context.mdx#handlesubmit) |
### onBlur
@@ -43,7 +43,7 @@ Function to override the default submit handler on the underlying `textarea` com
Function to run on blur of the underlying `textarea` component.
| Type |
-| --------------------------------------------- |
+|-----------------------------------------------|
| React.FocusEventHandler |
### onChange
@@ -51,7 +51,7 @@ Function to run on blur of the underlying `textarea` component.
Function to override the default onChange behavior on the underlying `textarea` component.
| Type | Default |
-| ---------------------------------------------- | -------------------------------------------------------------------------------------- |
+|------------------------------------------------|----------------------------------------------------------------------------------------|
| React.ChangeEventHandler | [MessageInputContextValue['onChange']](../contexts/message-input-context.mdx#onchange) |
### onFocus
@@ -59,7 +59,7 @@ Function to override the default onChange behavior on the underlying `textarea`
Function to run on focus of the underlying `textarea` component.
| Type |
-| --------------------------------------------- |
+|-----------------------------------------------|
| React.FocusEventHandler |
### onPaste
@@ -67,15 +67,15 @@ Function to run on focus of the underlying `textarea` component.
Function to override the default onPaste behavior on the underlying `textarea` component.
| Type | Default |
-| ----------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+|-------------------------------------------------------------|--------------------------------------------------------------------------------------|
| (event: React.ClipboardEvent) => void | [MessageInputContextValue['onPaste']](../contexts/message-input-context.mdx#onpaste) |
### placeholder
-Placeholder for the the underlying `textarea` component.
+Placeholder for the underlying `textarea` component.
| Type | Default |
-| ------ | ------------------- |
+|--------|---------------------|
| string | 'Type your message' |
### rows
@@ -83,7 +83,7 @@ Placeholder for the the underlying `textarea` component.
The initial number of rows for the underlying `textarea` component.
| Type | Default |
-| ------ | ------- |
+|--------|---------|
| number | 1 |
### value
@@ -91,9 +91,17 @@ The initial number of rows for the underlying `textarea` component.
The text value of the underlying `textarea` component.
| Type | Default |
-| ------ | ------------------------------------------------------------------------------ |
+|--------|--------------------------------------------------------------------------------|
| string | [MessageInputContextValue['text']](../contexts/message-input-context.mdx#text) |
+### wordReplace
+
+Function to override the default emojiReplace behavior on the `wordReplace` prop of the `textarea` component.
+
+| Type |
+|----------------------------------------------------------|
+| (word: string, emojiIndex?: NimbleEmojiIndex) =\> string |
+
## DefaultTriggerProvider
:::note
@@ -113,17 +121,17 @@ provider component to the `Channel` component via the `TriggerProvider` prop. An
If true, updates the CSS class name of the `div` container and renders a smaller version of the picker.
| Type | Default |
-| ------- | ------- |
+|---------|---------|
| boolean | false |
## QuotedMessagePreview Props
-### Required
message
+### Required
quotedMessage
The existing message to be quoted by the next sent message.
| Type |
-| ------ |
+|--------|
| object |
## SendButton Props
@@ -133,7 +141,7 @@ The existing message to be quoted by the next sent message.
Function to send a message to the currently active channel.
| Type |
-| ----------------------------------------- |
+|-------------------------------------------|
| (event: React.BaseSyntheticEvent) => void |
## UploadsPreview
diff --git a/docusaurus/docs/React/migration-guides/_category_.json b/docusaurus/docs/React/migration-guides/_category_.json
new file mode 100644
index 0000000000..d6ec491ac5
--- /dev/null
+++ b/docusaurus/docs/React/migration-guides/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Message Input Components",
+ "position": 13
+}
diff --git a/docusaurus/docs/React/migration-guides/upgrade-to-v10.mdx b/docusaurus/docs/React/migration-guides/upgrade-to-v10.mdx
new file mode 100644
index 0000000000..da6c397d96
--- /dev/null
+++ b/docusaurus/docs/React/migration-guides/upgrade-to-v10.mdx
@@ -0,0 +1,40 @@
+---
+id: upgrade-to-v10
+sidebar_position: 1
+title: Upgrade to v10
+---
+
+Staying with v1 - breaking changes
+
+Upgrading to v2 - news
+
+### Message
+
+- Removed deprecated message components
+
+### ChannelSearch
+
+- renamed prop `DropdownContainer` to `SearchResultsList` to better reflect the purpose of the component. The search results are not always shown in a drop-down container.
+
+- introduction of a new `SearchBar` component available with theme version 2 only.
+
+- removed redundant setResultsOpen setStateAction function from `ChannelSearchFunctionParams`. this has impact on `onSelectResult` and `searchFunction` props
+
+### VirtualizeMessageList
+
+- default message in VML Thread is MessageSimple and not FixedHeightMessage
+- added new prop `groupStyles` with the same purpose as in non-virtualized `MessageList`
+
+### MessageList
+- has been wrapped in a new div with class `str-chat__main-panel-inner` if using theme version 2
+- The loading indicator is now wrapped by a div with class `str-chat__list__loading` so that you can style its positioning
+
+### MessageNotifications
+
+New props `isMessageListScrolledToBottom` and `threadList`
+
+### Thread
+
+It is possible to customize the `ThreadHead`. That is the combination of `ThreadStart` and the thread parent message.
+Thread separator now displays the number of replies in the thread.
+The parent message is now part of the scrollable message list also if using `virtualized` message list under the hood is
diff --git a/docusaurus/docs/React/theming/_category_.json b/docusaurus/docs/React/theming/_category_.json
new file mode 100644
index 0000000000..95e3a3cdfe
--- /dev/null
+++ b/docusaurus/docs/React/theming/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Theming and CSS",
+ "position": 6
+}
diff --git a/docusaurus/docs/React/utility-components/channel-preview.mdx b/docusaurus/docs/React/utility-components/channel-preview.mdx
index 5be9968e8a..a0f2d76d74 100644
--- a/docusaurus/docs/React/utility-components/channel-preview.mdx
+++ b/docusaurus/docs/React/utility-components/channel-preview.mdx
@@ -12,17 +12,21 @@ You will not need to use the `ChannelPreview` component directly. If creating a
This prop from the parent component ultimately sets the `Preview` prop in `ChannelPreview`. If this optional prop is not provided the default UI component is
[`ChannelPreviewMessenger`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx).
-**Example 1**
+**Example**
```tsx
-const YourCustomChannelPreview = (props) => {
- // render custom preview info here
+const YourCustomChannelPreview = ({ latestMessage, lastMessage }) => {
+ // "lastMessage" property is for for the last
+ // message that has been interacted with (pinned/edited/deleted)
+
+ // to display last message of the channel use "latestMessage"
+ return {latestMessage}
};
Inactive search bar with an app menu, alt: 'Image of an inactive search bar state with an app menu' },
+ { image: ImageInactiveSearchBarWithAppMenu, caption: Inactive search bar without an app menu , alt: 'Image of an inactive search bar state without an app menu' },
+ ]}
+/>
+
+##### 2. Active state:
+
+Once the input is focused, a return-arrow button occurs with [`ExitSearchIcon`](./#exitsearchicon) to exit the active state. Note the app menu icon is actually replaced by the return arrow button. After typing the search query a clear-input button with [`ClearInputIcon`](./#clearinputicon) appears inside the search input.
+
+Active search bar with empty input, alt: 'Image of an active search bar state with empty input' },
+ { image: ImageActiveSearchBarWithText, caption: Active search bar with search query , alt: 'Image of an active search bar with search query' },
+ ]}
+/>
+
+By clicking the return-arrow button, the user returns to the inactive search state. By clicking the clear-input button the input is cleared but kept focused with return-arrow still displayed (with possibility to exit the search altogether).
+
+The active search UI state can be exited by pressing the `Escape` key as well.
+
+### SearchResults component
+
+The following states are reflected in the `SearchResults`:
+
+1. The search query being in progress (can be customized with [`SearchLoading`](./#searchloading) )
+2. The empty search result (can be customized with [`SearchEmpty`](./#searchempty))
+3. The listing of found channels (if [`searchForChannels`](./#searchforchannels) is set to `true`) and users
+
+The look of the latter can be customized by providing [`SearchResultsHeader`](./#searchresultsheader), [`SearchResultItem`](./#searchresultitem), [`SearchResultsList`](./#searchresultslist)) (renders the list of `SearchResultItem`).
+
+The default styling of the first two states are as follows:
+
+Search results list content when loading (theme v1), alt: 'Image of search results list content when loading' },
+ { image: ImageSearchResultsEmptyThemeV1, caption: Empty search results (theme v1) , alt: 'Image of empty search results' },
+ { image: ImageSearchResultsLoadingThemeV2, caption: Search results list content when loading (theme v2) , alt: 'Image of search results list content when loading' },
+ { image: ImageSearchResultsEmptyThemeV2, caption: Empty search results (theme v2) , alt: 'Image of empty search results' },
+ ]}
+/>
+
+#### Search results in popup
+
+The search results can be rendered in place of the channel list or above the channel list in a floating container. This behavior is toggled by [`popupResults`](./#popupResults) prop.
+
+Search results displayed inline (theme v1), alt: 'Image of search results displayed inline (theme v1)' },
+ { image: ImageSearchResultsPopupThemeV1, caption: Search results displayed floating above the channel list (theme v1) , alt: 'Image of search results displayed floating above the channel list (theme v1)' },
+ { image: ImageSearchResultsInlineThemeV2, caption: Search results displayed inline (theme v2) , alt: 'Image of search results displayed inline (theme v2)' },
+ { image: ImageSearchResultsPopupThemeV2, caption: Search results displayed floating above the channel list (theme v2) , alt: 'Image of search results displayed floating above the channel list (theme v2)' },
+ ]}
+/>
+
+#### Keep the search results open on channel select
+
+The `ChannelSearch` offers possibility to keep the search results open meanwhile the user clicks between the search results. This behavior is controlled by [`clearSearchOnClickOutside`](./#clearsearchonclickoutside) flag. The selected channel is added to the channel list if it was not present there before the search.
+
+
## Props
+### AppMenu
+
+Application menu / drop-down to be displayed when clicked on [`MenuIcon`](./#menuicon). Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is rendered with `themeVersion` `'2'` only. No default component provided by the SDK. The library does not provide any CSS for `AppMenu`.
+
+| Type | Default |
+| ------------------- | ------------ |
+| `React.ComponentType` | `undefined` |
+
### channelType
The type of `channel` to create on user result selection.
@@ -36,98 +172,172 @@ The type of `channel` to create on user result selection.
| --------------------------------------------------------------- | ----------- |
| `livestream` \| `messaging` \| `team` \| `gaming` \| `commerce` | `messaging` |
-### DropdownContainer
-Custom UI component to display all of the search results.
+### ClearInputIcon
+
+Custom icon component used as a content of the button used to clear the search input. Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is rendered with `themeVersion` `'2'` only.
+
+| Type | Default |
+|-----------------------|-----------------------------------------------------------------|
+| `React.ComponentType` | ` |
+
+### onSearchExit
+
+Callback invoked when the search UI is deactivated. The `ChannelList` component uses it to set a flag that the search has been terminated and search results are not expected to be displayed in place of the list of loaded channels. And so the `ChannelList` renders the list of loaded channels. This logic is executed despite passing custom implementation of `onSearchExit` function to `ChanneList` props.
+
+| Type |
+|--------------|
+| `() => void` |
### onSelectResult
-Custom handler function to run on search result item selection.
+Custom handler function to run on search result item selection. If not provided then the default selection handler takes care of:
+
+1. loading the active channel
+2. adding the selected channel to the channel list
+3. clearing the search results, if [`clearSearchOnClickOutside` flag](./#clearsearchonclickoutside) is set to true (default)
| Type |
| ----------------------------------------------- |
-| (user: UserResponse) => Promise\ \| void |
+| (,` ` \| void |
### placeholder
Custom placeholder text to be displayed in the search input. Can be passed down from `ChannelList` via its `additionalChannelSearchProps`. If using custom i18n translations, it is preferable to change the placeholder value in your translations files under the key `'Search'`.
-| Type | Default |
-| ------ | -------- |
-| string | 'Search' |
+| Type | Default |
+|----------|------------|
+| `string` | `'Search'` |
### popupResults
Display search results as an absolutely positioned popup, defaults to false and shows inline.
-| Type | Default |
-| ------- | ------- |
-| boolean | false |
+| Type | Default |
+|-----------|---------|
+| `boolean` | `false` |
+
+### SearchBar
+
+Custom component to be rendered instead of the default ` | ` functions that allow to control the search state:
-| Type |
-| ------------------------------------------------------------------------------------------- |
-| (ChannelSearchFunctionParams, event: React.BaseSyntheticEvent ) =\> Promise\ \| void |
+- `setQuery` - sets the search input value, the default value is an empty string
+- `setResults` - sets the array of search results, the default value is an empty array
+- `setSearching` - signals that the HTTP search request is in progress
+
+| Type |
+|-----------------------------------------------------------------------------------------------------|
+| (`params: ChannelSearchFunctionParams, event: React.BaseSyntheticEvent` ) => Promise \| void |
### SearchInput
Custom UI component to display the search text input.
-| Type | Default |
-| --------- | -------------------- |
-| component | HTML `input` element |
+| Type | Default |
+|-----------------------------------------|-----------------------------------------------------------------------------|
+| `React.ComponentType` | ` |
+
+### SearchResultsHeader
+
+Custom UI component to display the search results header.
+
+| Type | Default |
+| --------- | --------- |
+| `React.ComponentType` |>` | >` | ['MessageSystem'];
/** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */
MessageTimestamp?: ComponentContextValue['MessageTimestamp'];
- /** Custom UI component for image viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
+ /** Custom UI component for viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
ModalGallery?: ComponentContextValue['ModalGallery'];
/** Whether to allow multiple attachment uploads */
multipleUploads?: boolean;
diff --git a/src/components/Chat/hooks/useCustomStyles.ts b/src/components/Chat/hooks/useCustomStyles.ts
index f83984b622..bb603bdc69 100644
--- a/src/components/Chat/hooks/useCustomStyles.ts
+++ b/src/components/Chat/hooks/useCustomStyles.ts
@@ -117,6 +117,13 @@ export const darkModeTheme: CustomStyles = {
export type CustomStyles = Partial>;
+/**
+ * @deprecated This hook has been deprecated in favor of the new
+ * theming (V2) setup which sets its variables through CSS files.
+ * Refer to the [documentation](https://getstream.io/chat/docs/sdk/react/theming/themingv2/) of the new theming for the upgrade.
+ *
+ * **Will be removed with the complete transition to the theming V2.**
+ */
export const useCustomStyles = (customStyles?: CustomStyles) => {
if (!customStyles) return;
diff --git a/src/components/ChatAutoComplete/ChatAutoComplete.tsx b/src/components/ChatAutoComplete/ChatAutoComplete.tsx
index ba4e8978a2..912e02966c 100644
--- a/src/components/ChatAutoComplete/ChatAutoComplete.tsx
+++ b/src/components/ChatAutoComplete/ChatAutoComplete.tsx
@@ -97,7 +97,7 @@ export type ChatAutoCompleteProps = {
onFocus?: React.FocusEventHandler;
/** Function to override the default onPaste behavior on the underlying `textarea` component */
onPaste?: (event: React.ClipboardEvent) => void;
- /** Placeholder for the the underlying `textarea` component */
+ /** Placeholder for the underlying `textarea` component */
placeholder?: string;
/** The initial number of rows for the underlying `textarea` component */
rows?: number;
diff --git a/src/components/Message/MessageOptions.tsx b/src/components/Message/MessageOptions.tsx
index d720114841..f6cb65657c 100644
--- a/src/components/Message/MessageOptions.tsx
+++ b/src/components/Message/MessageOptions.tsx
@@ -11,19 +11,23 @@ import { MessageActions } from '../MessageActions';
import { MessageContextValue, useMessageContext } from '../../context/MessageContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
export type MessageOptionsProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = Partial, 'handleOpenThread'>> & {
- ActionsIcon?: React.FunctionComponent;
- /** @deprecated: use CSS to style the order of the contents */
- displayLeft?: boolean;
+ /* Custom component rendering the icon used in message actions button. This button invokes the message actions menu. */
+ ActionsIcon?: React.ComponentType;
+ /* If true, show the `ThreadIcon` and enable navigation into a `Thread` component. */
displayReplies?: boolean;
+ /* React mutable ref that can be placed on the message root `div` of MessageActions component */
messageWrapperRef?: React.RefObject;
- ReactionIcon?: React.FunctionComponent;
+ /* Custom component rendering the icon used in a button invoking reactions selector for a given message. */
+ ReactionIcon?: React.ComponentType;
+ /* Theme string to be added to CSS class names. */
theme?: string;
- ThreadIcon?: React.FunctionComponent;
+ /* Custom component rendering the icon used in a message options button opening thread */
+ ThreadIcon?: React.ComponentType;
};
const UnMemoizedMessageOptions = <
diff --git a/src/components/Message/MessageRepliesCountButton.tsx b/src/components/Message/MessageRepliesCountButton.tsx
index 5c3dc46734..5ce927a3b0 100644
--- a/src/components/Message/MessageRepliesCountButton.tsx
+++ b/src/components/Message/MessageRepliesCountButton.tsx
@@ -6,9 +6,13 @@ import { useChatContext } from '../../context/ChatContext';
import { useTranslationContext } from '../../context/TranslationContext';
export type MessageRepliesCountButtonProps = {
+ /* If supplied, adds custom text to the end of a multiple replies message */
labelPlural?: string;
+ /* If supplied, adds custom text to the end of a single reply message */
labelSingle?: string;
+ /* Function to navigate into an existing thread on a message */
onClick?: MouseEventHandler;
+ /* The amount of replies (i.e., threaded messages) on a message */
reply_count?: number;
};
diff --git a/src/components/Message/MessageStatus.tsx b/src/components/Message/MessageStatus.tsx
index 287cec0cd8..9807e727c8 100644
--- a/src/components/Message/MessageStatus.tsx
+++ b/src/components/Message/MessageStatus.tsx
@@ -17,8 +17,11 @@ import { useTranslationContext } from '../../context/TranslationContext';
import type { DefaultStreamChatGenerics } from '../../types/types';
export type MessageStatusProps = {
+ /* Custom UI component to display a user's avatar (overrides the value from `ComponentContext`) */
Avatar?: React.ComponentType;
+ /* Message type string to be added to CSS class names. */
messageType?: string;
+ /* Allows to customize the username(s) that appear on the message status tooltip */
tooltipUserNameMapper?: TooltipUsernameMapper;
};
diff --git a/src/components/Message/MessageText.tsx b/src/components/Message/MessageText.tsx
index 74b6480709..4f5849f57d 100644
--- a/src/components/Message/MessageText.tsx
+++ b/src/components/Message/MessageText.tsx
@@ -13,9 +13,13 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
export type MessageTextProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = {
+ /* Replaces the CSS class name placed on the component's inner `div` container */
customInnerClass?: string;
+ /* Adds a CSS class name to the component's outer `div` container */
customWrapperClass?: string;
+ /* The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value stored in `MessageContext`) */
message?: StreamMessage;
+ /* Theme string to be added to CSS class names */
theme?: string;
};
diff --git a/src/components/Message/MessageTimestamp.tsx b/src/components/Message/MessageTimestamp.tsx
index 2b5b402afc..ccc9787143 100644
--- a/src/components/Message/MessageTimestamp.tsx
+++ b/src/components/Message/MessageTimestamp.tsx
@@ -13,9 +13,13 @@ export const defaultTimestampFormat = 'h:mmA';
export type MessageTimestampProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = {
+ /* If true, call the `Day.js` calendar function to get the date string to display. */
calendar?: boolean;
+ /* Adds a CSS class name to the component's outer `time` container. */
customClass?: string;
+ /* Overrides the default timestamp format */
format?: string;
+ /* The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`) */
message?: StreamMessage;
};
diff --git a/src/components/Message/types.ts b/src/components/Message/types.ts
index 9f0b6fac34..7cc9f495f2 100644
--- a/src/components/Message/types.ts
+++ b/src/components/Message/types.ts
@@ -53,7 +53,7 @@ export type MessageProps<
getPinMessageErrorNotification?: (message: StreamMessage) => string;
/** If true, group messages sent by each user (only used in the `VirtualizedMessageList`) */
groupedByUser?: boolean;
- /** A list of styles to apply to this message, ie. top, bottom, single */
+ /** A list of styles to apply to this message, i.e. top, bottom, single */
groupStyles?: GroupStyle[];
/** Whether to highlight and focus the message on load */
highlighted?: boolean;
@@ -91,7 +91,7 @@ export type MessageProps<
) => JSX.Element | null;
/** Custom retry send message handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
retrySendMessage?: ChannelActionContextValue['retrySendMessage'];
- /** Whether or not the Message is in a Thread */
+ /** Whether the Message is in a Thread */
threadList?: boolean;
/** render HTML instead of markdown. Posting HTML is only allowed server-side */
unsafeHTML?: boolean;
diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
index 7cc9762677..2dbd2332c3 100644
--- a/src/components/MessageActions/MessageActions.tsx
+++ b/src/components/MessageActions/MessageActions.tsx
@@ -8,7 +8,7 @@ import { isUserMuted } from '../Message/utils';
import { useChatContext } from '../../context/ChatContext';
import { MessageContextValue, useMessageContext } from '../../context/MessageContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
type MessageContextPropsToPick =
| 'getMessageActions'
@@ -21,10 +21,15 @@ type MessageContextPropsToPick =
export type MessageActionsProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = Partial, MessageContextPropsToPick>> & {
- ActionsIcon?: React.FunctionComponent;
+ /* Custom component rendering the icon used in message actions button. This button invokes the message actions menu. */
+ ActionsIcon?: React.ComponentType;
+ /* Custom CSS class to be added to the `div` wrapping the component */
customWrapperClass?: string;
+ /* If true, renders the wrapper component as a `span`, not a `div` */
inline?: boolean;
+ /* React mutable ref that can be placed on the message root `div` of MessageActions component */
messageWrapperRef?: React.RefObject;
+ /* Function that returns whether the message was sent by the connected user */
mine?: () => boolean;
};
diff --git a/src/components/MessageList/MessageList.tsx b/src/components/MessageList/MessageList.tsx
index aca6b485d5..20ea40b48e 100644
--- a/src/components/MessageList/MessageList.tsx
+++ b/src/components/MessageList/MessageList.tsx
@@ -266,7 +266,7 @@ export type MessageListProps<
nextMessage: StreamMessage,
noGroupByUser: boolean,
) => GroupStyle;
- /** Whether or not the list has more items to load */
+ /** Whether the list has more items to load */
hasMore?: boolean;
/** Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components */
head?: React.ReactElement;
diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx
index 9f40230515..f1bfcaf033 100644
--- a/src/components/MessageList/VirtualizedMessageList.tsx
+++ b/src/components/MessageList/VirtualizedMessageList.tsx
@@ -531,7 +531,7 @@ export type VirtualizedMessageListProps<
loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise);
/** Function called when new messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
loadMoreNewer?: ChannelActionContextValue['loadMore'] | (() => Promise);
- /** Custom UI component to display a message, defaults to and accepts same props as [FixedHeightMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/FixedHeightMessage.tsx) */
+ /** Custom UI component to display a message, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
Message?: React.ComponentType>;
/** The limit to use when paginating messages */
messageLimit?: number;