diff --git a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx b/docusaurus/docs/Angular/components/AttachmentListComponent.mdx
index a2b47531..7d4ef151 100644
--- a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx
+++ b/docusaurus/docs/Angular/components/AttachmentListComponent.mdx
@@ -122,7 +122,7 @@ The id of the message the attachments belong to
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
---
@@ -134,7 +134,7 @@ The parent id of the message the attachments belong to
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
---
@@ -146,7 +146,7 @@ The attachments to display
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
---
@@ -158,6 +158,6 @@ Emits the state of the image carousel window
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx b/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx
index 4ae22914..be84fef2 100644
--- a/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx
+++ b/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx
@@ -47,7 +47,7 @@ A stream that emits the current file uploads and their states
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
---
@@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
---
@@ -71,6 +71,6 @@ An output to notify the parent component if the user wants to delete a file
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx b/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx
index 8816d5b8..d5159d8d 100644
--- a/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx
+++ b/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx
@@ -51,7 +51,7 @@ TextareaInterface.value
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
---
@@ -67,7 +67,7 @@ TextareaInterface.placeholder
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
---
@@ -83,7 +83,7 @@ TextareaInterface.areMentionsEnabled
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
---
@@ -99,7 +99,7 @@ TextareaInterface.inputMode
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
---
@@ -115,7 +115,7 @@ TextareaInterface.mentionScope
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
---
@@ -131,7 +131,7 @@ TextareaInterface.autoFocus
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
---
@@ -147,7 +147,7 @@ TextareaInterface.valueChange
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
---
@@ -163,7 +163,7 @@ TextareaInterface.send
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
---
@@ -179,6 +179,6 @@ TextareaInterface.userMentions
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AvatarComponent.mdx b/docusaurus/docs/Angular/components/AvatarComponent.mdx
index 35339912..500fab99 100644
--- a/docusaurus/docs/Angular/components/AvatarComponent.mdx
+++ b/docusaurus/docs/Angular/components/AvatarComponent.mdx
@@ -71,7 +71,7 @@ An optional name of the image, used for fallback image or image title (if `image
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L36)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L36)
---
@@ -83,7 +83,7 @@ The URL of the image to be displayed. If the image can't be displayed the first
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L40)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L40)
---
@@ -95,7 +95,7 @@ The location the avatar will be displayed in
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L44)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L44)
---
@@ -107,7 +107,7 @@ The channel the avatar belongs to (if avatar of a channel is displayed)
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L48)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L48)
---
@@ -119,7 +119,7 @@ The user the avatar belongs to (if avatar of a user is displayed)
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L52)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L52)
---
@@ -131,7 +131,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:56](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L56)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:56](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L56)
---
@@ -143,7 +143,7 @@ If a channel avatar is displayed, and if the channel has exactly two members a g
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:60](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L60)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:60](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L60)
---
@@ -155,6 +155,6 @@ If channel/user image isn't provided the initials of the name of the channel/use
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L64)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L64)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx
index a398df32..015840de 100644
--- a/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx
+++ b/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx
@@ -12,7 +12,7 @@ An optional name of the image, used for fallback image or image title (if `image
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23)
---
@@ -24,7 +24,7 @@ The URL of the image to be displayed. If the image can't be displayed the first
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27)
---
@@ -36,7 +36,7 @@ The location the avatar will be displayed in
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31)
---
@@ -48,7 +48,7 @@ The channel the avatar belongs to (if avatar of a channel is displayed)
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35)
---
@@ -60,7 +60,7 @@ The user the avatar belongs to (if avatar of a user is displayed)
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39)
---
@@ -72,7 +72,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43)
---
@@ -84,7 +84,7 @@ If channel/user image isn't provided the initials of the name of the channel/use
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47)
---
@@ -96,6 +96,6 @@ If a channel avatar is displayed, and if the channel has exactly two members a g
#### Defined in
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L53)
+[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L53)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx b/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx
index 1d1f79f6..ba1bca02 100644
--- a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx
+++ b/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx
@@ -37,6 +37,6 @@ The channel to be displayed
#### Defined in
-[projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28)
+[projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/IconComponent.mdx b/docusaurus/docs/Angular/components/IconComponent.mdx
index eef718dc..1ee918a2 100644
--- a/docusaurus/docs/Angular/components/IconComponent.mdx
+++ b/docusaurus/docs/Angular/components/IconComponent.mdx
@@ -33,6 +33,6 @@ The icon to display, the list of [supported icons](https://github.com/GetStream/
#### Defined in
-[projects/stream-chat-angular/src/lib/icon/icon.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L37)
+[projects/stream-chat-angular/src/lib/icon/icon.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L37)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx
index 1ba80468..d938cca5 100644
--- a/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx
+++ b/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx
@@ -12,6 +12,6 @@ The icon to display, the list of [supported icons](https://github.com/GetStream/
#### Defined in
-[projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18)
+[projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx b/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx
index 70558858..ded39d6b 100644
--- a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx
+++ b/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx
@@ -48,7 +48,7 @@ Indicates if the message actions are belonging to a message that was sent by the
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L37)
+[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L37)
---
@@ -60,7 +60,7 @@ The message the actions will be executed on
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:41](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L41)
+[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:41](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L41)
---
@@ -72,7 +72,7 @@ The HTML element which contains the message text, it's used for the "copy messag
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:45](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L45)
+[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:45](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L45)
---
@@ -84,6 +84,6 @@ The list of [channel capabilities](https://getstream.io/chat/docs/javascript/cha
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L49)
+[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L49)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageComponent.mdx b/docusaurus/docs/Angular/components/MessageComponent.mdx
index 57178146..28308e19 100644
--- a/docusaurus/docs/Angular/components/MessageComponent.mdx
+++ b/docusaurus/docs/Angular/components/MessageComponent.mdx
@@ -73,7 +73,7 @@ The message to be displayed
#### Defined in
-[projects/stream-chat-angular/src/lib/message/message.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message/message.component.ts#L64)
+[projects/stream-chat-angular/src/lib/message/message.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L64)
---
@@ -85,7 +85,7 @@ The list of [channel capabilities](https://getstream.io/chat/docs/javascript/cha
#### Defined in
-[projects/stream-chat-angular/src/lib/message/message.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message/message.component.ts#L68)
+[projects/stream-chat-angular/src/lib/message/message.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L68)
---
@@ -97,7 +97,7 @@ If `true`, the message status (sending, sent, who read the message) is displayed
#### Defined in
-[projects/stream-chat-angular/src/lib/message/message.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message/message.component.ts#L72)
+[projects/stream-chat-angular/src/lib/message/message.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L72)
---
@@ -109,7 +109,7 @@ Determines if the message is being dispalyed in a channel or in a [thread](https
#### Defined in
-[projects/stream-chat-angular/src/lib/message/message.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message/message.component.ts#L76)
+[projects/stream-chat-angular/src/lib/message/message.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L76)
---
@@ -121,7 +121,7 @@ Highlighting is used to add visual emphasize to a message when jumping to the me
#### Defined in
-[projects/stream-chat-angular/src/lib/message/message.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message/message.component.ts#L80)
+[projects/stream-chat-angular/src/lib/message/message.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L80)
---
@@ -133,6 +133,6 @@ An Observable that emits when the message list is scrolled, it's used to prevent
#### Defined in
-[projects/stream-chat-angular/src/lib/message/message.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message/message.component.ts#L84)
+[projects/stream-chat-angular/src/lib/message/message.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L84)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageInputComponent.mdx b/docusaurus/docs/Angular/components/MessageInputComponent.mdx
index 72d278de..6f4ec10e 100644
--- a/docusaurus/docs/Angular/components/MessageInputComponent.mdx
+++ b/docusaurus/docs/Angular/components/MessageInputComponent.mdx
@@ -59,7 +59,7 @@ If file upload is enabled, the user can open a file selector from the input. Ple
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L59)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L59)
---
@@ -71,7 +71,7 @@ If true, users can mention other users in messages. You also [need to use the `A
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L63)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L63)
---
@@ -83,7 +83,7 @@ The scope for user mentions, either members of the current channel of members of
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L67)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L67)
---
@@ -95,7 +95,7 @@ Determines if the message is being dispalyed in a channel or in a [thread](https
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L71)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L71)
---
@@ -107,7 +107,7 @@ If true, users can select multiple files to upload. If no value is provided, it
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L75)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L75)
---
@@ -119,7 +119,7 @@ The message to edit
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L79)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L79)
---
@@ -131,7 +131,7 @@ An observable that can be used to trigger message sending from the outside
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L83)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L83)
---
@@ -143,7 +143,7 @@ In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L87)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L87)
---
@@ -155,7 +155,7 @@ Enables or disables auto focus on the textarea element
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:91](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L91)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:91](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L91)
---
@@ -169,7 +169,7 @@ If you don't need that behavior, you can turn this of with this flag. In that ca
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97)
---
@@ -181,7 +181,7 @@ Use this input to control wether a send button is rendered or not. If you don't
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:101](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L101)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:101](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L101)
---
@@ -193,6 +193,6 @@ Emits when a message was successfuly sent or updated
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:105](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L105)
+[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:105](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L105)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageListComponent.mdx b/docusaurus/docs/Angular/components/MessageListComponent.mdx
index 900cb2d4..b340336c 100644
--- a/docusaurus/docs/Angular/components/MessageListComponent.mdx
+++ b/docusaurus/docs/Angular/components/MessageListComponent.mdx
@@ -33,7 +33,7 @@ Determines if the message list should display channel messages or [thread messag
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:62](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L62)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:62](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L62)
---
@@ -45,7 +45,7 @@ The direction of the messages in the list, `bottom-to-top` means newest message
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:66](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L66)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:66](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L66)
---
@@ -57,7 +57,7 @@ You can hide the "jump to latest" button while scrolling. A potential use-case f
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L71)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L71)
---
@@ -69,7 +69,7 @@ If `true` date separators will be displayed
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L75)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L75)
---
@@ -81,7 +81,7 @@ If `true` unread indicator will be displayed
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L79)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L79)
---
@@ -93,7 +93,7 @@ If date separators are displayed, you can set the horizontal position of the dat
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L83)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L83)
---
@@ -105,7 +105,7 @@ If date separators are displayed, you can set the horizontal position of the dat
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L87)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L87)
---
@@ -119,7 +119,7 @@ This is only applicable for `main` mode, as threads doesn't have read infromatio
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:94](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L94)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:94](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L94)
---
@@ -131,6 +131,6 @@ You can turn on and off the loading indicator that signals to users that more me
#### Defined in
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:98](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L98)
+[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:98](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L98)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx
index ec5ebfe0..6846f45a 100644
--- a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx
+++ b/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx
@@ -53,7 +53,7 @@ The id of the message the reactions belong to
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L33)
+[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L33)
---
@@ -65,7 +65,7 @@ The number of reactions grouped by [reaction types](https://github.com/GetStream
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L37)
+[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L37)
---
@@ -77,7 +77,7 @@ List of reactions of a [message](../types/stream-message.mdx), used to display t
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42)
+[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42)
---
@@ -89,6 +89,6 @@ List of the user's own reactions of a [message](../types/stream-message.mdx), us
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:46](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L46)
+[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:46](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L46)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx
index 098b0d9c..3c91ff2b 100644
--- a/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx
+++ b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx
@@ -46,7 +46,7 @@ List of the user's own reactions of a [message](../types/stream-message.mdx), us
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L29)
+[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L29)
---
@@ -58,6 +58,6 @@ The id of the message the reactions belong to
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L33)
+[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L33)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ModalComponent.mdx b/docusaurus/docs/Angular/components/ModalComponent.mdx
index 080a2c8e..764451b9 100644
--- a/docusaurus/docs/Angular/components/ModalComponent.mdx
+++ b/docusaurus/docs/Angular/components/ModalComponent.mdx
@@ -28,7 +28,7 @@ If `true` the modal will be displayed, if `false` the modal will be hidden
#### Defined in
-[projects/stream-chat-angular/src/lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25)
+[projects/stream-chat-angular/src/lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25)
---
@@ -40,7 +40,7 @@ The content of the modal (can also be provided using `ng-content`)
#### Defined in
-[projects/stream-chat-angular/src/lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29)
+[projects/stream-chat-angular/src/lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29)
---
@@ -52,6 +52,6 @@ Emits `true` if the modal becomes visible, and `false` if the modal is closed.
#### Defined in
-[projects/stream-chat-angular/src/lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33)
+[projects/stream-chat-angular/src/lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/NotificationComponent.mdx b/docusaurus/docs/Angular/components/NotificationComponent.mdx
index 5e8f8ddc..a61fae78 100644
--- a/docusaurus/docs/Angular/components/NotificationComponent.mdx
+++ b/docusaurus/docs/Angular/components/NotificationComponent.mdx
@@ -24,7 +24,7 @@ The type of the notification
#### Defined in
-[projects/stream-chat-angular/src/lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16)
+[projects/stream-chat-angular/src/lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16)
---
@@ -36,6 +36,6 @@ The content of the notification (can also be provided using `ng-content`)
#### Defined in
-[projects/stream-chat-angular/src/lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20)
+[projects/stream-chat-angular/src/lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/TextareaComponent.mdx b/docusaurus/docs/Angular/components/TextareaComponent.mdx
index c9fbc1f7..7f8cb803 100644
--- a/docusaurus/docs/Angular/components/TextareaComponent.mdx
+++ b/docusaurus/docs/Angular/components/TextareaComponent.mdx
@@ -48,7 +48,7 @@ TextareaInterface.value
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35)
+[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35)
---
@@ -64,7 +64,7 @@ TextareaInterface.placeholder
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39)
+[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39)
---
@@ -80,7 +80,7 @@ TextareaInterface.inputMode
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43)
+[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43)
---
@@ -96,7 +96,7 @@ TextareaInterface.autoFocus
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47)
+[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47)
---
@@ -112,7 +112,7 @@ TextareaInterface.valueChange
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51)
+[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51)
---
@@ -128,6 +128,6 @@ TextareaInterface.send
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55)
+[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx
index fb95eccb..74b1b26f 100644
--- a/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx
+++ b/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx
@@ -82,6 +82,6 @@ The voice recording attachment
#### Defined in
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L28)
+[projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L28)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx
index c3897469..c5b73616 100644
--- a/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx
+++ b/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx
@@ -34,7 +34,7 @@ The audio element that plays the voice recording
#### Defined in
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L28)
+[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L28)
---
@@ -46,7 +46,7 @@ The waveform data to visualize
#### Defined in
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L32)
+[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L32)
---
@@ -58,6 +58,6 @@ The duration of the voice recording in seconds
#### Defined in
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L36)
+[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L36)
[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx b/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx
index 4c609b95..8f3fca9c 100644
--- a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx
+++ b/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx
@@ -32,7 +32,7 @@ A custom handler can be provided to override the default giphy attachment (GIFs
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37)
---
@@ -60,7 +60,7 @@ A custom handler can be provided to override the default image attachment (image
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22)
---
@@ -86,7 +86,7 @@ A custom handler can be provided to override the default scraped image attachmen
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43)
---
@@ -113,7 +113,7 @@ A custom handler can be provided to override the default video attachment (video
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L30)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L30)
---
@@ -125,7 +125,7 @@ You can turn on/off thumbnail generation for video attachments
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49)
## Methods
@@ -147,7 +147,7 @@ Handles the configuration for giphy attachments, it's possible to provide your o
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180)
---
@@ -171,7 +171,7 @@ Handles the configuration for image attachments, it's possible to provide your o
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57)
---
@@ -193,7 +193,7 @@ Handles the configuration for scraped image attachments, it's possible to provid
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200)
---
@@ -216,4 +216,4 @@ Handles the configuration for video attachments, it's possible to provide your o
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123)
+[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123)
diff --git a/docusaurus/docs/Angular/services/AttachmentService.mdx b/docusaurus/docs/Angular/services/AttachmentService.mdx
index 7f074652..ba0dea51 100644
--- a/docusaurus/docs/Angular/services/AttachmentService.mdx
+++ b/docusaurus/docs/Angular/services/AttachmentService.mdx
@@ -20,7 +20,7 @@ Emits the number of uploads in progress.
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L25)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L25)
---
@@ -32,7 +32,7 @@ Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStr
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:29](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L29)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:29](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L29)
## Methods
@@ -56,7 +56,7 @@ Note: If you just want to use your own CDN for file uploads, you don't necessary
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L120)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L120)
---
@@ -78,7 +78,7 @@ Maps attachments received from the Stream API to uploads. This is useful when ed
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:206](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L206)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:206](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L206)
---
@@ -100,7 +100,7 @@ Deletes an attachment, the attachment can have any state (`error`, `uploading` o
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L145)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L145)
---
@@ -124,7 +124,7 @@ A promise with true or false. If false is returned the upload was canceled becau
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L62)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L62)
---
@@ -142,7 +142,7 @@ the attachments
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:175](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L175)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:175](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L175)
---
@@ -158,7 +158,7 @@ Resets the attachments uploads (for example after the message with the attachmen
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L53)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L53)
---
@@ -182,4 +182,4 @@ A promise with the result
#### Defined in
-[projects/stream-chat-angular/src/lib/attachment.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/attachment.service.ts#L130)
+[projects/stream-chat-angular/src/lib/attachment.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L130)
diff --git a/docusaurus/docs/Angular/services/ChannelService.mdx b/docusaurus/docs/Angular/services/ChannelService.mdx
index 3d583cd5..eef7b498 100644
--- a/docusaurus/docs/Angular/services/ChannelService.mdx
+++ b/docusaurus/docs/Angular/services/ChannelService.mdx
@@ -24,7 +24,7 @@ The active channel will always be marked as read when a new message is received
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:80](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L80)
+[projects/stream-chat-angular/src/lib/channel.service.ts:80](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L80)
---
@@ -38,7 +38,7 @@ This property isn't always updated, please use `channel.read` to display up-to-d
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L132)
+[projects/stream-chat-angular/src/lib/channel.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L132)
---
@@ -50,7 +50,7 @@ Emits the list of currently loaded messages of the active channel.
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L84)
+[projects/stream-chat-angular/src/lib/channel.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L84)
---
@@ -62,7 +62,7 @@ Emits the list of pinned messages of the active channel.
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L88)
+[projects/stream-chat-angular/src/lib/channel.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L88)
---
@@ -76,7 +76,7 @@ This property isn't always updated, please use `channel.read` to display up-to-d
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L138)
+[projects/stream-chat-angular/src/lib/channel.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L138)
---
@@ -88,7 +88,7 @@ Emits the currently selected parent message. If no message is selected, it emits
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:100](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L100)
+[projects/stream-chat-angular/src/lib/channel.service.ts:100](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L100)
---
@@ -100,7 +100,7 @@ Emits the id of the currently selected parent message. If no message is selected
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:92](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L92)
+[projects/stream-chat-angular/src/lib/channel.service.ts:92](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L92)
---
@@ -112,7 +112,7 @@ Emits the list of currently loaded thread replies belonging to the selected pare
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L96)
+[projects/stream-chat-angular/src/lib/channel.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L96)
---
@@ -138,7 +138,7 @@ The provided method will be called before a new message is sent to Stream's API.
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L305)
+[projects/stream-chat-angular/src/lib/channel.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L305)
---
@@ -164,7 +164,7 @@ The provided method will be called before a message is sent to Stream's API for
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L311)
+[projects/stream-chat-angular/src/lib/channel.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L311)
---
@@ -178,7 +178,7 @@ If a message is bounced, it will be emitted via this `Observable`. The built-in
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:126](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L126)
+[projects/stream-chat-angular/src/lib/channel.service.ts:126](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L126)
---
@@ -190,7 +190,7 @@ The result of the latest channel query request.
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:70](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L70)
+[projects/stream-chat-angular/src/lib/channel.service.ts:70](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L70)
---
@@ -206,7 +206,7 @@ If you want to subscribe to channel events, you need to manually reenter Angular
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L66)
+[projects/stream-chat-angular/src/lib/channel.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L66)
---
@@ -235,7 +235,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:156](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L156)
+[projects/stream-chat-angular/src/lib/channel.service.ts:156](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L156)
---
@@ -268,7 +268,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L180)
+[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L180)
---
@@ -301,7 +301,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L228)
+[projects/stream-chat-angular/src/lib/channel.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L228)
---
@@ -334,7 +334,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L212)
+[projects/stream-chat-angular/src/lib/channel.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L212)
---
@@ -367,7 +367,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L196)
+[projects/stream-chat-angular/src/lib/channel.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L196)
---
@@ -400,7 +400,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:244](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L244)
+[projects/stream-chat-angular/src/lib/channel.service.ts:244](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L244)
---
@@ -427,7 +427,7 @@ You can override the default file delete request - override this if you use your
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L288)
+[projects/stream-chat-angular/src/lib/channel.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L288)
---
@@ -454,7 +454,7 @@ You can override the default file upload request - you can use this to upload fi
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:274](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L274)
+[projects/stream-chat-angular/src/lib/channel.service.ts:274](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L274)
---
@@ -481,7 +481,7 @@ You can override the default image delete request - override this if you use you
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:292](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L292)
+[projects/stream-chat-angular/src/lib/channel.service.ts:292](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L292)
---
@@ -508,7 +508,7 @@ You can override the default image upload request - you can use this to upload i
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:281](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L281)
+[projects/stream-chat-angular/src/lib/channel.service.ts:281](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L281)
---
@@ -541,7 +541,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L260)
+[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L260)
---
@@ -570,7 +570,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L144)
+[projects/stream-chat-angular/src/lib/channel.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L144)
---
@@ -599,7 +599,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:168](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L168)
+[projects/stream-chat-angular/src/lib/channel.service.ts:168](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L168)
---
@@ -611,7 +611,7 @@ Emits `false` if there are no more pages of channels that can be loaded.
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:58](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L58)
+[projects/stream-chat-angular/src/lib/channel.service.ts:58](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L58)
---
@@ -623,7 +623,7 @@ Emits the ID of the message the message list should jump to (can be a channel me
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L108)
+[projects/stream-chat-angular/src/lib/channel.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L108)
---
@@ -635,7 +635,7 @@ Emits a map that contains the date of the latest message sent by the current use
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L120)
+[projects/stream-chat-angular/src/lib/channel.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L120)
---
@@ -661,7 +661,7 @@ The provided method will be called before deleting a message. If the returned Pr
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:299](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L299)
+[projects/stream-chat-angular/src/lib/channel.service.ts:299](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L299)
---
@@ -673,7 +673,7 @@ Emits the currently selected message to quote
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L104)
+[projects/stream-chat-angular/src/lib/channel.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L104)
---
@@ -685,7 +685,7 @@ Emits the list of users that are currently typing in the channel (current user i
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L112)
+[projects/stream-chat-angular/src/lib/channel.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L112)
---
@@ -697,7 +697,7 @@ Emits the list of users that are currently typing in the active thread (current
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L116)
+[projects/stream-chat-angular/src/lib/channel.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L116)
---
@@ -707,7 +707,7 @@ Emits the list of users that are currently typing in the active thread (current
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L317)
+[projects/stream-chat-angular/src/lib/channel.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L317)
## Accessors
@@ -723,7 +723,7 @@ The current active channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1619](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1619)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1619](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1619)
---
@@ -739,7 +739,7 @@ The current active channel messages
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1626](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1626)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1626](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1626)
---
@@ -755,7 +755,7 @@ The current thread replies
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1633](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1633)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1633](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1633)
---
@@ -771,7 +771,7 @@ The current list of channels
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1612](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1612)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1612](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1612)
---
@@ -797,7 +797,7 @@ You can return either an offset, or a filter using the [`$lte`/`$gte` operator](
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:547](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L547)
+[projects/stream-chat-angular/src/lib/channel.service.ts:547](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L547)
---
@@ -813,7 +813,7 @@ If set to false, read events won't be sent as new messages are received. If set
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L523)
+[projects/stream-chat-angular/src/lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L523)
• `set` **shouldMarkActiveChannelAsRead**(`shouldMarkActiveChannelAsRead`): `void`
@@ -831,7 +831,7 @@ If set to false, read events won't be sent as new messages are received. If set
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L530)
+[projects/stream-chat-angular/src/lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L530)
## Methods
@@ -854,7 +854,7 @@ The channel will be added to the beginning of the channel list
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1131](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1131)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1131](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1131)
---
@@ -878,7 +878,7 @@ Adds a reaction to a message.
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:806](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L806)
+[projects/stream-chat-angular/src/lib/channel.service.ts:806](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L806)
---
@@ -902,7 +902,7 @@ The list of members matching the search filter
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1056](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1056)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1056](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1056)
---
@@ -918,7 +918,7 @@ Clears the currently selected message to jump
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1291](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1291)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1291](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1291)
---
@@ -940,7 +940,7 @@ Deletes an uploaded file by URL. If you want to know more about [file uploads](h
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1040](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1040)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1040](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1040)
---
@@ -963,7 +963,7 @@ Deletes the message from the active channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:928](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L928)
+[projects/stream-chat-angular/src/lib/channel.service.ts:928](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L928)
---
@@ -979,7 +979,7 @@ Deselects the currently active (if any) channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:596](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L596)
+[projects/stream-chat-angular/src/lib/channel.service.ts:596](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L596)
---
@@ -1003,7 +1003,7 @@ all reactions of a message
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1642](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1642)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1642](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1642)
---
@@ -1030,7 +1030,7 @@ the list of channels found by the query
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:730](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L730)
+[projects/stream-chat-angular/src/lib/channel.service.ts:730](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L730)
---
@@ -1057,7 +1057,7 @@ the channels that were loaded
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:766](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L766)
+[projects/stream-chat-angular/src/lib/channel.service.ts:766](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L766)
---
@@ -1080,7 +1080,7 @@ Jumps to the selected message inside the message list, if the message is not yet
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1263](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1263)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1263](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1263)
---
@@ -1096,7 +1096,7 @@ Loads the next page of channels. The page size can be set in the [query option](
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:796](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L796)
+[projects/stream-chat-angular/src/lib/channel.service.ts:796](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L796)
---
@@ -1118,7 +1118,7 @@ Loads the next page of messages of the active channel. The page size can be set
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:658](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L658)
+[projects/stream-chat-angular/src/lib/channel.service.ts:658](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L658)
---
@@ -1140,7 +1140,7 @@ Loads the next page of messages of the active thread. The page size can be set i
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:697](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L697)
+[projects/stream-chat-angular/src/lib/channel.service.ts:697](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L697)
---
@@ -1164,7 +1164,7 @@ the result of the request
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1675](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1675)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1675](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1675)
---
@@ -1186,7 +1186,7 @@ Pins the given message in the channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1299](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1299)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1299](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1299)
---
@@ -1207,7 +1207,7 @@ Pins the given message in the channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1143](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1143)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1143](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1143)
---
@@ -1230,7 +1230,7 @@ Removes a reaction from a message.
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:822](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L822)
+[projects/stream-chat-angular/src/lib/channel.service.ts:822](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L822)
---
@@ -1252,7 +1252,7 @@ Resends the given message to the active channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:876](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L876)
+[projects/stream-chat-angular/src/lib/channel.service.ts:876](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L876)
---
@@ -1268,7 +1268,7 @@ Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observable
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:780](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L780)
+[projects/stream-chat-angular/src/lib/channel.service.ts:780](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L780)
---
@@ -1290,7 +1290,7 @@ Selects or deselects the current message to quote reply to
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1122](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1122)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1122](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1122)
---
@@ -1314,7 +1314,7 @@ Selects or deselects the current message to quote reply to
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1085](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1085)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1085](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1085)
---
@@ -1341,7 +1341,7 @@ Sends a message to the active channel. The message is immediately added to the m
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:837](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L837)
+[projects/stream-chat-angular/src/lib/channel.service.ts:837](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L837)
---
@@ -1364,7 +1364,7 @@ If the channel wasn't previously part of the channel, it will be added to the be
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:563](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L563)
+[projects/stream-chat-angular/src/lib/channel.service.ts:563](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L563)
---
@@ -1387,7 +1387,7 @@ Sets the given `message` as an active parent message. If `undefined` is provided
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:623](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L623)
+[projects/stream-chat-angular/src/lib/channel.service.ts:623](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L623)
---
@@ -1409,7 +1409,7 @@ Call this method if user started typing in the active channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1595](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1595)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1595](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1595)
---
@@ -1431,7 +1431,7 @@ Call this method if user stopped typing in the active channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1604)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1604)
---
@@ -1453,7 +1453,7 @@ Removes the given message from pinned messages
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:1318](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L1318)
+[projects/stream-chat-angular/src/lib/channel.service.ts:1318](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1318)
---
@@ -1475,7 +1475,7 @@ Updates the message in the active channel
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L893)
+[projects/stream-chat-angular/src/lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L893)
---
@@ -1499,4 +1499,4 @@ the result of file upload requests
#### Defined in
-[projects/stream-chat-angular/src/lib/channel.service.ts:960](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/channel.service.ts#L960)
+[projects/stream-chat-angular/src/lib/channel.service.ts:960](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L960)
diff --git a/docusaurus/docs/Angular/services/ChatClientService.mdx b/docusaurus/docs/Angular/services/ChatClientService.mdx
index 38f03a25..fb415885 100644
--- a/docusaurus/docs/Angular/services/ChatClientService.mdx
+++ b/docusaurus/docs/Angular/services/ChatClientService.mdx
@@ -18,7 +18,7 @@ Emits the current [application settings](https://getstream.io/chat/docs/javascri
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49)
---
@@ -30,7 +30,7 @@ The [StreamChat client](https://github.com/GetStream/stream-chat-js/blob/master/
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38)
---
@@ -42,7 +42,7 @@ Emits the current connection state of the user (`online` or `offline`)
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53)
---
@@ -57,7 +57,7 @@ For performance reasons this Observable operates outside of the Angular change d
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45)
---
@@ -69,7 +69,7 @@ Emits the list of pending invites of the user. It emits every pending invitation
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57)
---
@@ -81,7 +81,7 @@ Emits the current chat user
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61)
## Methods
@@ -105,7 +105,7 @@ The users matching the search
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:224](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L224)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:224](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L224)
---
@@ -121,7 +121,7 @@ Disconnects the current user, and closes the WebSocket connection. Useful when d
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L186)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L186)
---
@@ -143,7 +143,7 @@ Flag the message with the given ID. If you want to know [more about flags](https
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:215](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L215)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:215](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L215)
---
@@ -159,7 +159,7 @@ Loads the current [application settings](https://getstream.io/chat/docs/javascri
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L196)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L196)
---
@@ -184,4 +184,4 @@ Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e
#### Defined in
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98)
+[projects/stream-chat-angular/src/lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98)
diff --git a/docusaurus/docs/Angular/services/CustomTemplatesService.mdx b/docusaurus/docs/Angular/services/CustomTemplatesService.mdx
index 07026ed0..f03df5a6 100644
--- a/docusaurus/docs/Angular/services/CustomTemplatesService.mdx
+++ b/docusaurus/docs/Angular/services/CustomTemplatesService.mdx
@@ -22,7 +22,7 @@ The template that can be used to override how attachment actions are displayed i
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:276](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L276)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:276](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L276)
---
@@ -34,7 +34,7 @@ The template used to display attachments of a [message](../components/MessageCom
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L109)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L109)
---
@@ -46,7 +46,7 @@ The template used to display attachments in the [message input](../components/Me
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L116)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L116)
---
@@ -58,7 +58,7 @@ The template used to display avatars for channels and users (instead of the [def
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L123)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L123)
---
@@ -70,7 +70,7 @@ The template that can be used to override how a card attachment is displayed ins
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:270](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L270)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:270](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L270)
---
@@ -82,7 +82,7 @@ The template for channel actions displayed in the [channel header](../components
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:102](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L102)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:102](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L102)
---
@@ -94,7 +94,7 @@ The template used to display additional information about a channel under the ch
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L227)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L227)
---
@@ -106,7 +106,7 @@ Template used to display the channel information inside the [channel list item](
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329)
---
@@ -118,7 +118,7 @@ Template used to display an item in the [channel list](../components/ChannelList
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:67](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L67)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:67](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L67)
---
@@ -130,7 +130,7 @@ The autocomplete list item template for commands (used in the [`AutocompleteText
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L60)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L60)
---
@@ -142,7 +142,7 @@ The template used for displaying file upload/attachment selector inside the [mes
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:234](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L234)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:234](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L234)
---
@@ -154,7 +154,7 @@ Template to display custom metadata inside [message component](../components/Mes
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:220](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L220)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:220](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L220)
---
@@ -166,7 +166,7 @@ The template used to display the date separator inside the [message list](../com
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L288)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L288)
---
@@ -180,7 +180,7 @@ Displayed for the last message sent by the current user, if the message isn't ye
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:195](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L195)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:195](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L195)
---
@@ -192,7 +192,7 @@ The template for [emoji picker](../code-examples/emoji-picker.mdx)
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:81](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L81)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:81](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L81)
---
@@ -204,7 +204,7 @@ The template to show if the main message list is empty
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L310)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L310)
---
@@ -216,7 +216,7 @@ The template to show if the thread message list is empty
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:316](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L316)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:316](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L316)
---
@@ -228,7 +228,7 @@ The template that can be used to override how a file attachment is displayed ins
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:264](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L264)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:264](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L264)
---
@@ -240,7 +240,7 @@ The template that can be used to override how image gallery is displayed inside
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:258](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L258)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:258](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L258)
---
@@ -252,7 +252,7 @@ Template for displaying icons (instead of the [default icon component](../compon
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L130)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L130)
---
@@ -264,7 +264,7 @@ The template that can be used to override how a single image attachment is displ
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:240](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L240)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:240](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L240)
---
@@ -276,7 +276,7 @@ Template for displaying the loading indicator (instead of the [default loading i
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L137)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L137)
---
@@ -288,7 +288,7 @@ The autocomplete list item template for mentioning users (used in the [`Autocomp
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L54)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L54)
---
@@ -300,7 +300,7 @@ The template used for displaying a [mention inside a message](../code-examples/m
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:74](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L74)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:74](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L74)
---
@@ -312,7 +312,7 @@ The template used for displaying an item in the [message actions box](../compone
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:151](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L151)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:151](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L151)
---
@@ -324,7 +324,7 @@ Template for displaying the message actions box (instead of the [default message
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L144)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L144)
---
@@ -336,7 +336,7 @@ The template used to display the [message bounce prompt](../components/MessageBo
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:322](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L322)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:322](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L322)
---
@@ -348,7 +348,7 @@ The template used to display the reactions of a [message](../components/MessageC
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:165](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L165)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:165](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L165)
---
@@ -360,7 +360,7 @@ The template used to display the reactions of a [message](../components/MessageC
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L158)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L158)
---
@@ -372,7 +372,7 @@ The template used to display a message in the [message list](../components/Messa
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:95](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L95)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:95](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L95)
---
@@ -384,7 +384,7 @@ The template used to display a modal window (instead of the [default modal](../c
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:172](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L172)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:172](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L172)
---
@@ -398,7 +398,7 @@ This UI element is used to separate unread messages from read messages
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:296](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L296)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:296](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L296)
---
@@ -412,7 +412,7 @@ Users can use this notification to jump to the first unread message when it's cl
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L304)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L304)
---
@@ -424,7 +424,7 @@ The template used to override the [default notification component](../components
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L179)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L179)
---
@@ -438,7 +438,7 @@ Displayed for the last message sent by the current user, if the message is read
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:213](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L213)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:213](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L213)
---
@@ -452,7 +452,7 @@ Displayed for the last message sent by the current user, if the message is curre
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:204](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L204)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:204](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L204)
---
@@ -464,7 +464,7 @@ The template used to display [system messages](https://getstream.io/chat/docs/ja
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:282](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L282)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:282](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L282)
---
@@ -476,7 +476,7 @@ The template used for header of a [thread](../components/ThreadComponent.mdx)
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L186)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L186)
---
@@ -488,7 +488,7 @@ The typing indicator template used in the [message list](../components/MessageLi
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L88)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L88)
---
@@ -500,7 +500,7 @@ The template that can be used to override how a video attachment is displayed in
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:252](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L252)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:252](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L252)
---
@@ -512,4 +512,4 @@ The template that can be used to override how a voice recording attachment is di
#### Defined in
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L246)
+[projects/stream-chat-angular/src/lib/custom-templates.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L246)
diff --git a/docusaurus/docs/Angular/services/DateParserService.mdx b/docusaurus/docs/Angular/services/DateParserService.mdx
index c0cab74a..e63795b6 100644
--- a/docusaurus/docs/Angular/services/DateParserService.mdx
+++ b/docusaurus/docs/Angular/services/DateParserService.mdx
@@ -26,7 +26,7 @@ Custom parser to override `parseDate`
#### Defined in
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18)
+[projects/stream-chat-angular/src/lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18)
---
@@ -52,7 +52,7 @@ Custom parser to override `parseDateTime`
#### Defined in
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22)
+[projects/stream-chat-angular/src/lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22)
---
@@ -78,7 +78,7 @@ Custom parser to override `parseTime`
#### Defined in
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14)
+[projects/stream-chat-angular/src/lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14)
## Methods
@@ -102,7 +102,7 @@ The parsed date
#### Defined in
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43)
+[projects/stream-chat-angular/src/lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43)
---
@@ -126,7 +126,7 @@ The parsed date
#### Defined in
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55)
+[projects/stream-chat-angular/src/lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55)
---
@@ -150,4 +150,4 @@ The parsed time
#### Defined in
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31)
+[projects/stream-chat-angular/src/lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31)
diff --git a/docusaurus/docs/Angular/services/EmojiInputService.mdx b/docusaurus/docs/Angular/services/EmojiInputService.mdx
index be08fedc..99a47a88 100644
--- a/docusaurus/docs/Angular/services/EmojiInputService.mdx
+++ b/docusaurus/docs/Angular/services/EmojiInputService.mdx
@@ -12,4 +12,4 @@ If you have an emoji picker in your application, you can propagate the selected
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14)
+[projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14)
diff --git a/docusaurus/docs/Angular/services/MessageActionsService.mdx b/docusaurus/docs/Angular/services/MessageActionsService.mdx
index 3da7bab9..cf03d6be 100644
--- a/docusaurus/docs/Angular/services/MessageActionsService.mdx
+++ b/docusaurus/docs/Angular/services/MessageActionsService.mdx
@@ -32,7 +32,7 @@ By default the [`MessageComponent`](../../components/MessageComponent) will disp
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions.service.ts#L188)
+[projects/stream-chat-angular/src/lib/message-actions.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L188)
---
@@ -44,7 +44,7 @@ You can pass your own custom actions that will be displayed inside the built-in
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:184](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions.service.ts#L184)
+[projects/stream-chat-angular/src/lib/message-actions.service.ts:184](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L184)
---
@@ -56,7 +56,7 @@ Default actions - these are the actions that are handled by the built-in compone
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions.service.ts#L28)
+[projects/stream-chat-angular/src/lib/message-actions.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L28)
---
@@ -68,7 +68,7 @@ The built-in components will handle changes to this observable.
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions.service.ts#L180)
+[projects/stream-chat-angular/src/lib/message-actions.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L180)
## Methods
@@ -93,4 +93,4 @@ the count
#### Defined in
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-actions.service.ts#L227)
+[projects/stream-chat-angular/src/lib/message-actions.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L227)
diff --git a/docusaurus/docs/Angular/services/MessageInputConfigService.mdx b/docusaurus/docs/Angular/services/MessageInputConfigService.mdx
index 9d664109..0bb18963 100644
--- a/docusaurus/docs/Angular/services/MessageInputConfigService.mdx
+++ b/docusaurus/docs/Angular/services/MessageInputConfigService.mdx
@@ -12,7 +12,7 @@ If true, users can mention other users in messages. You also [need to use the `A
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17)
+[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17)
---
@@ -24,7 +24,7 @@ In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L30)
+[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L30)
---
@@ -36,7 +36,7 @@ If file upload is enabled, the user can open a file selector from the input. Ple
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L13)
+[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L13)
---
@@ -48,7 +48,7 @@ If `false`, users can only upload one attachment per message
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L21)
+[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L21)
---
@@ -60,4 +60,4 @@ The scope for user mentions, either members of the current channel of members of
#### Defined in
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L25)
+[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L25)
diff --git a/docusaurus/docs/Angular/services/MessageReactionsService.mdx b/docusaurus/docs/Angular/services/MessageReactionsService.mdx
index b876172c..4c021648 100644
--- a/docusaurus/docs/Angular/services/MessageReactionsService.mdx
+++ b/docusaurus/docs/Angular/services/MessageReactionsService.mdx
@@ -28,7 +28,7 @@ The event handler can retrieve all reactions of a message inside the active chan
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L30)
+[projects/stream-chat-angular/src/lib/message-reactions.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L30)
---
@@ -42,7 +42,7 @@ You can provide any string as a reaction. The emoji can be provided as a string,
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L18)
+[projects/stream-chat-angular/src/lib/message-reactions.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L18)
## Accessors
@@ -58,7 +58,7 @@ Get the currently enabled reactions
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:44](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L44)
+[projects/stream-chat-angular/src/lib/message-reactions.service.ts:44](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L44)
• `set` **reactions**(`reactions`): `void`
@@ -76,4 +76,4 @@ Sets the enabled reactions
#### Defined in
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L37)
+[projects/stream-chat-angular/src/lib/message-reactions.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L37)
diff --git a/docusaurus/docs/Angular/services/MessageService.mdx b/docusaurus/docs/Angular/services/MessageService.mdx
index e2bbc3ac..c14f42ad 100644
--- a/docusaurus/docs/Angular/services/MessageService.mdx
+++ b/docusaurus/docs/Angular/services/MessageService.mdx
@@ -26,7 +26,7 @@ You can provide a custom method to display links
#### Defined in
-[projects/stream-chat-angular/src/lib/message.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message.service.ts#L24)
+[projects/stream-chat-angular/src/lib/message.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message.service.ts#L24)
---
@@ -43,4 +43,4 @@ If you display messages as text the following parts are still be displayed as HT
#### Defined in
-[projects/stream-chat-angular/src/lib/message.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/message.service.ts#L17)
+[projects/stream-chat-angular/src/lib/message.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message.service.ts#L17)
diff --git a/docusaurus/docs/Angular/services/NotificationService.mdx b/docusaurus/docs/Angular/services/NotificationService.mdx
index 7868da88..a3394b80 100644
--- a/docusaurus/docs/Angular/services/NotificationService.mdx
+++ b/docusaurus/docs/Angular/services/NotificationService.mdx
@@ -12,7 +12,7 @@ Emits the currently active [notifications](https://github.com/GetStream/stream-c
#### Defined in
-[projects/stream-chat-angular/src/lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/notification.service.ts#L15)
+[projects/stream-chat-angular/src/lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification.service.ts#L15)
## Methods
@@ -51,7 +51,7 @@ A method to clear the notification.
#### Defined in
-[projects/stream-chat-angular/src/lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/notification.service.ts#L68)
+[projects/stream-chat-angular/src/lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification.service.ts#L68)
---
@@ -91,4 +91,4 @@ A method to clear the notification (before the timeout).
#### Defined in
-[projects/stream-chat-angular/src/lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/notification.service.ts#L31)
+[projects/stream-chat-angular/src/lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification.service.ts#L31)
diff --git a/docusaurus/docs/Angular/services/StreamI18nService.mdx b/docusaurus/docs/Angular/services/StreamI18nService.mdx
index 9803999a..a8755031 100644
--- a/docusaurus/docs/Angular/services/StreamI18nService.mdx
+++ b/docusaurus/docs/Angular/services/StreamI18nService.mdx
@@ -23,4 +23,4 @@ Registers the translation to the [ngx-translate](https://github.com/ngx-translat
#### Defined in
-[projects/stream-chat-angular/src/lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19)
+[projects/stream-chat-angular/src/lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19)
diff --git a/docusaurus/docs/Angular/services/ThemeService.mdx b/docusaurus/docs/Angular/services/ThemeService.mdx
index 40cfc9bd..4d51ea04 100644
--- a/docusaurus/docs/Angular/services/ThemeService.mdx
+++ b/docusaurus/docs/Angular/services/ThemeService.mdx
@@ -12,4 +12,4 @@ A Subject that can be used to get or set the currently active theme. By default
#### Defined in
-[projects/stream-chat-angular/src/lib/theme.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/theme.service.ts#L14)
+[projects/stream-chat-angular/src/lib/theme.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/theme.service.ts#L14)
diff --git a/docusaurus/docs/Angular/services/TransliterationService.mdx b/docusaurus/docs/Angular/services/TransliterationService.mdx
index 15ca2801..106cc3cd 100644
--- a/docusaurus/docs/Angular/services/TransliterationService.mdx
+++ b/docusaurus/docs/Angular/services/TransliterationService.mdx
@@ -22,4 +22,4 @@ the result of the transliteration
#### Defined in
-[projects/stream-chat-angular/src/lib/transliteration.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/transliteration.service.ts#L16)
+[projects/stream-chat-angular/src/lib/transliteration.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/transliteration.service.ts#L16)
diff --git a/docusaurus/docs/Angular/services/VirtualizedListService.mdx b/docusaurus/docs/Angular/services/VirtualizedListService.mdx
index aa5601ff..8547eb83 100644
--- a/docusaurus/docs/Angular/services/VirtualizedListService.mdx
+++ b/docusaurus/docs/Angular/services/VirtualizedListService.mdx
@@ -38,7 +38,7 @@ The result of the last query used to load more items
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46)
---
@@ -50,7 +50,7 @@ The items that should be currently displayed, a subset of all items
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42)
## Accessors
@@ -66,7 +66,7 @@ The current value of virtualized items
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355)
## Methods
@@ -82,4 +82,4 @@ Remove all subscriptions, call this once you're done using an instance of this s
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362)
diff --git a/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx b/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx
index 6ac421e5..5f27ba8b 100644
--- a/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx
+++ b/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx
@@ -22,7 +22,7 @@ The result of the last query used to load more items
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46)
---
@@ -38,7 +38,7 @@ The items that should be currently displayed, a subset of all items
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42)
## Accessors
@@ -58,7 +58,7 @@ VirtualizedListService.virtualizedItems
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355)
## Methods
@@ -78,4 +78,4 @@ Remove all subscriptions, call this once you're done using an instance of this s
#### Defined in
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/02622f4685dff27165fbda34a1d2178c039f22f3/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362)
+[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362)
diff --git a/docusaurus/docs/Angular/theming/component-variables.mdx b/docusaurus/docs/Angular/theming/component-variables.mdx
index e79e85a3..99c1d4a0 100644
--- a/docusaurus/docs/Angular/theming/component-variables.mdx
+++ b/docusaurus/docs/Angular/theming/component-variables.mdx
@@ -23,942 +23,44 @@ CSS variables are the easiest way to customize the theme. The variables are orga
- Global
- Component
-This page contains information about the component variables.
-
-## AttachmentList
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__attachment-list-border-radius` |
| The border radius used for the borders of the component |
-| `--str-chat__attachment-list-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__attachment-list-background-color` | | The background color of the component |
-| `--str-chat__attachment-list-border-block-start` | | Top border of the component |
-| `--str-chat__attachment-list-border-block-end` | | Bottom border of the component |
-| `--str-chat__attachment-list-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__attachment-list-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__attachment-list-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__image-attachment-border-radius` | `.str-chat` |
---|
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )` |
| The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-surface-color)` |
| The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-border-block-start` | | Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-border-block-end` | | Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-border-inline-start` | | Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-border-inline-end` | | Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-box-shadow` | | Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-gallery-attachment-border-radius` | `.str-chat` |
---|
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )` |
| The border radius used for the borders of image gallery attachments |
-| `--str-chat__image-gallery-attachment-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of image gallery attachments |
-| `--str-chat__image-gallery-attachment-background-color` | | The background color of image gallery attachments |
-| `--str-chat__image-gallery-attachment-border-block-start` | | Top border of image gallery attachments |
-| `--str-chat__image-gallery-attachment-border-block-end` | | Bottom border of image gallery attachments |
-| `--str-chat__image-gallery-attachment-border-inline-start` | | Left (right in RTL layout) border of image gallery attachments |
-| `--str-chat__image-gallery-attachment-border-inline-end` | | Right (left in RTL layout) border of image gallery attachments |
-| `--str-chat__image-gallery-attachment-box-shadow` | | Box shadow applied to image gallery attachments |
-| `--str-chat__image-gallery-attachment-overlay` | `.str-chat` |
---|
`var(--str-chat__secondary-overlay-color)` |
| Overlay color applied to image gallery attachments |
-| `--str-chat__image-gallery-attachment-overlay-text-color` | `.str-chat` |
---|
`var( --str-chat__secondary-overlay-text-color )` |
| Text colors used on overlay applied to image gallery attachments |
-| `--str-chat__card-attachment-border-radius` | | The border radius used for the borders of card attachments |
-| `--str-chat__card-attachment-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of card attachments |
-| `--str-chat__card-attachment-link-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color of links inside card attachments |
-| `--str-chat__card-attachment-background-color` | | The background color of card attachments |
-| `--str-chat__card-attachment-border-block-start` | | Top border of card attachments |
-| `--str-chat__card-attachment-border-block-end` | | Bottom border of card attachments |
-| `--str-chat__card-attachment-border-inline-start` | | Left (right in RTL layout) border of card attachments |
-| `--str-chat__card-attachment-border-inline-end` | | Right (left in RTL layout) border of card attachments |
-| `--str-chat__card-attachment-box-shadow` | | Box shadow applied to card attachments |
-| `--str-chat__file-attachment-border-radius` | `.str-chat` |
---|
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )` |
| The border radius used for the borders of file attachments |
-| `--str-chat__file-attachment-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of file attachments |
-| `--str-chat__file-attachment-secondary-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color of file attachments for low emphasis texts (for example file size) |
-| `--str-chat__file-attachment-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of file attachments |
-| `--str-chat__file-attachment-border-block-start` | | Top border of file attachments |
-| `--str-chat__file-attachment-border-block-end` | | Bottom border of file attachments |
-| `--str-chat__file-attachment-border-inline-start` | | Left (right in RTL layout) border of file attachments |
-| `--str-chat__file-attachment-border-inline-end` | | Right (left in RTL layout) border of file attachments |
-| `--str-chat__file-attachment-box-shadow` | | Box shadow applied to file attachments |
-| `--str-chat__audio-attachment-widget-border-radius` | `.str-chat` |
---|
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )` |
| Border radius applied audio widget |
-| `--str-chat__audio-attachment-widget-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| Text color used in audio widget |
-| `--str-chat__audio-attachment-widget-secondary-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| Border radius applied audio widget |
-| `--str-chat__audio-attachment-widget-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The text/icon color for low emphasis texts (for example file size) in audio widget |
-| `--str-chat__audio-attachment-widget-border-block-start` | | Top border of audio widget |
-| `--str-chat__audio-attachment-widget-border-block-end` | | Bottom border of audio widget |
-| `--str-chat__audio-attachment-widget-border-inline-start` | | Left (right in RTL layout) border of audio widget |
-| `--str-chat__audio-attachment-widget-border-inline-end` | | Right (left in RTL layout) border of audio widget |
-| `--str-chat__audio-attachment-widget-box-shadow` | | Box shadow applied to audio widget |
-| `--str-chat__voice-recording-attachment-widget-border-radius` | `.str-chat` |
---|
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )` |
| Border radius applied to audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| Text color used in audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-secondary-color` | `.str-chat` |
---|
`var( --str-chat__text-low-emphasis-color )` |
| Border radius applied to audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-background-color` | `.str-chat` |
---|
`var( --str-chat__secondary-background-color )` |
| The text/icon color for low emphasis texts (for example file size) in audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-border-block-start` | | Top border of audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-border-block-end` | | Bottom border of audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-border-inline-start` | | Left (right in RTL layout) border of audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-border-inline-end` | | Right (left in RTL layout) border of audio recording widget |
-| `--str-chat__voice-recording-attachment-widget-box-shadow` | | Box shadow applied to audio recording widget |
-| `--str-chat__audio-attachment-controls-button-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| Border radius applied to the play / pause button of audio widget |
-| `--str-chat__audio-attachment-controls-button-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| Text color applied to audio widget's play / pause button |
-| `--str-chat__audio-attachment-controls-button-background-color` | `.str-chat` |
---|
`var( --str-chat__secondary-background-color )` |
| Background color applied to audio widget's play / pause button |
-| `--str-chat__audio-attachment-controls-button-pressed-background-color` | `.str-chat` |
---|
`var( --str-chat__surface-color )` |
| Background color applied to audio widget's play / pause button when in pressed (active) state |
-| `--str-chat__audio-attachment-controls-button-border-block-start` | | Top border of audio widget's play / pause button |
-| `--str-chat__audio-attachment-controls-button-border-block-end` | | Bottom border of audio widget's play / pause button |
-| `--str-chat__audio-attachment-controls-button-border-inline-start` | | Left (right in RTL layout) border of audio widget's play / pause button |
-| `--str-chat__audio-attachment-controls-button-border-inline-end` | | Right (left in RTL layout) border of audio widget's play / pause button |
-| `--str-chat__audio-attachment-controls-button-box-shadow` | `.str-chat` |
---|
`var(--str-chat__circle-fab-box-shadow)` |
| Box shadow applied to audio widget's play / pause button |
-| `--str-chat__attachment-actions-border-radius` | | The border radius used for attachment actions |
-| `--str-chat__attachment-actions-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of attachment actions |
-| `--str-chat__attachment-actions-background-color` | | The background color of attachment actions |
-| `--str-chat__attachment-actions-border-block-start` | | Top border of attachment actions |
-| `--str-chat__attachment-actions-border-block-end` | | Bottom border of attachment actions |
-| `--str-chat__attachment-actions-border-inline-start` | | Left (right in RTL layout) border of attachment actions |
-| `--str-chat__attachment-actions-border-inline-end` | | Right (left in RTL layout) border of attachment actions |
-| `--str-chat__attachment-actions-box-shadow` | | Box shadow applied to attachment actions |
-| `--str-chat__attachment-action-border-radius` | | The border radius used for an attachment action |
-| `--str-chat__attachment-action-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color of an attachment action |
-| `--str-chat__attachment-action-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of an attachment action |
-| `--str-chat__attachment-action-border-block-start` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Top border of an attachment action |
-| `--str-chat__attachment-action-border-block-end` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Bottom border of an attachment action |
-| `--str-chat__attachment-action-border-inline-start` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Left (right in RTL layout) border of an attachment action |
-| `--str-chat__attachment-action-border-inline-end` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Right (left in RTL layout) border of an attachment action |
-| `--str-chat__attachment-action-box-shadow` | | Box shadow applied to an attachment action |
-| `--str-chat__attachment-action-active-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text/icon color of an attachment action while in pressed state |
-
-Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__attachment-margin` | `.str-chat` |
---|
`var(--str-chat__spacing-0_5)` |
`.str-chat__quoted-message-preview` |
---|
`0px` |
| The margin applied to every attachment in the attachment list |
-| `--str-chat__gif-height` | `.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 200)` |
| The height of GIFs |
-| `--str-chat__voice-recording-amplitude-bar-width` | | The width of the amplitude bar of the voice recording wave data |
-| `--str-chat__voice-recording-amplitude-bar-gap-width` | `.str-chat` |
---|
`var(--str-chat__spacing-px)` |
| The gap between amplitudes of the wave data of a voice recording |
-| `--str-chat__attachment-max-width` | `.str-chat__attachment-list` |
---|
`calc( var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin)) )` |
| The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). |
-| `--str-chat__video-height` | `.str-chat__attachment-list` |
---|
`var(--str-chat__attachment-max-width)` |
| The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio |
-| `--str-chat__scraped-image-height` | `.str-chat__attachment-list` |
---|
`calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91))` |
| The height of scraped images, the default value is optimized for 1.91:1 aspect ratio |
-| `--str-chat__scraped-video-height` | `.str-chat__attachment-list` |
---|
`calc(var(--str-chat__attachment-max-width) * calc(9 / 16))` |
| The height of scraped videos, the default value is optimized for 16:9 aspect ratio |
-
-Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-layout.scss)
-
-## AttachmentPreviewList
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `--str-chat__attachment-preview-list-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-sm)` |
| The border radius used for the borders of the component |
-| `--str-chat__attachment-preview-list-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__attachment-preview-list-background-color` | | The background color of the component |
-| `--str-chat__attachment-preview-list-border-block-start` | | Top border of the component |
-| `--str-chat__attachment-preview-list-border-block-end` | | Bottom border of the component |
-| `--str-chat__attachment-preview-list-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__attachment-preview-list-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__attachment-preview-list-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__attachment-preview-close-icon-background` | `.str-chat` |
---|
`var(--str-chat__secondary-overlay-color)` |
| Background color of the preview delete icon |
-| `--str-chat__attachment-preview-close-icon-color` | `.str-chat` |
---|
`var(--str-chat__secondary-overlay-text-color)` |
| Foreground color of the preview delete icon |
-| `--str-chat__attachment-preview-retry-icon-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| Color of the upload retry icon |
-| `--str-chat__attachment-preview-download-icon-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| Color of the preview download icon |
-| `--str-chat__attachment-preview-overlay-color` | `.str-chat` |
---|
`var(--str-chat__overlay-color)` |
| Overlay color applied to attachment previews during upload and if an error occured during upload |
-| `--str-chat__attachment-preview-image-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-sm)` |
| The border radius used for the borders of the image preview |
-| `--str-chat__attachment-preview-image-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the image preview |
-| `--str-chat__attachment-preview-image-background-color` | | The background color of the image preview |
-| `--str-chat__attachment-preview-image-border-block-start` | | Top border of the image preview |
-| `--str-chat__attachment-preview-image-border-block-end` | | Bottom border of the image preview |
-| `--str-chat__attachment-preview-image-border-inline-start` | | Left (right in RTL layout) border of the image preview |
-| `--str-chat__attachment-preview-image-border-inline-end` | | Right (left in RTL layout) border of the image preview |
-| `--str-chat__attachment-preview-image-box-shadow` | | Box shadow applied to the image preview |
-| `--str-chat__attachment-preview-file-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-md)` |
| The border radius used for the borders of the file preview |
-| `--str-chat__attachment-preview-file-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the file preview |
-| `--str-chat__attachment-preview-file-background-color` | | The background color of the file preview |
-| `--str-chat__attachment-preview-file-border-block-start` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Top border of the file preview |
-| `--str-chat__attachment-preview-file-border-block-end` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Bottom border of the file preview |
-| `--str-chat__attachment-preview-file-border-inline-start` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Left (right in RTL layout) border of the file preview |
-| `--str-chat__attachment-preview-file-border-inline-end` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Right (left in RTL layout) border of the file preview |
-| `--str-chat__attachment-preview-file-box-shadow` | | Box shadow applied to the file preview |
-
-Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)
-
-## Autocomplete
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `--str-chat__autocomplete-menu-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-xs)` |
| The border radius used for the borders of the component |
-| `--str-chat__autocomplete-menu-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__autocomplete-menu-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__autocomplete-menu-border-block-start` | | Top border of the component |
-| `--str-chat__autocomplete-menu-border-block-end` | | Bottom border of the component |
-| `--str-chat__autocomplete-menu-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__autocomplete-menu-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__autocomplete-menu-box-shadow` | `.str-chat` |
---|
`0 0 8px rgba(0, 0, 0, 0.15)` |
| Box shadow applied to the component |
-| `--str-chat__autocomplete-active-background-color` | `.str-chat` |
---|
`var(--str-chat__surface-color)` |
| The background color of a selected autocomplete item |
-| `--str-chat__suggestion-list-container-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-xs)` |
| The border radius used for the borders of the component (ReactSDK) |
-| `--str-chat__suggestion-list-container-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component (ReactSDK) |
-| `--str-chat__suggestion-list-container-background-color` | `.str-chat` |
---|
`var( --str-chat__secondary-background-color )` |
| The background color of the component (ReactSDK) |
-| `--str-chat__suggestion-list-container-border-block-start` | | Top border of the component (ReactSDK) |
-| `--str-chat__suggestion-list-container-border-block-end` | | Bottom border of the component (ReactSDK) |
-| `--str-chat__suggestion-list-container-border-inline-start` | | Left (right in RTL layout) border of the component (ReactSDK) |
-| `--str-chat__suggestion-list-container-border-inline-end` | | Right (left in RTL layout) border of the component (ReactSDK) |
-| `--str-chat__suggestion-list-container-box-shadow` | `.str-chat` |
---|
`0 0 8px rgba(0, 0, 0, 0.15)` |
| Box shadow applied to the component (ReactSDK) |
-| `--str-chat__suggestion-list-item--selected-background-color` | `.str-chat` |
---|
`var(--str-chat__surface-color)` |
| The background color of a selected autocomplete item (ReactSDK) |
-| `--str-chat__slash-command-border-radius` | | The border radius used for the borders of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-background-color` | | The background color of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-border-block-start` | | Top border of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-border-block-end` | | Bottom border of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-border-inline-start` | | Left (right in RTL layout) border of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-border-inline-end` | | Right (left in RTL layout) border of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-box-shadow` | | Box shadow of the slash command item in the autocomplete list |
-| `--str-chat__slash-command-args-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| Text color of the arguments of a slash command item in the autocomplete list |
-| `--str-chat__mention-list-user-item-border-radius` | | The border radius used for the borders of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-background-color` | | The background color of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-border-block-start` | | Top border of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-border-block-end` | | Bottom border of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-border-inline-start` | | Left (right in RTL layout) border of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-border-inline-end` | | Right (left in RTL layout) border of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-box-shadow` | | Box shadow of the user mention item in the autocomplete list |
-| `--str-chat__mention-list-user-item-at-sign-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color of the at sign inside a user mention itome in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-border-radius` | | The border radius used for the borders of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-background-color` | | The background color of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-border-block-start` | | Top border of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-border-block-end` | | Bottom border of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-border-inline-start` | | Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-border-inline-end` | | Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-box-shadow` | | Box shadow of the emoji suggestion item in the autocomplete list |
-
-Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
-| `--str-chat__mention-list-emoji-item-font-family` | `.str-chat` |
---|
`var(--str-chat__font-family)` |
| The font used in the emoji suggestion item in the autocomplete list |
-
-Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-layout.scss)
-
-## Avatar
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
-| `--str-chat__avatar-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for the borders of the component |
-| `--str-chat__avatar-color` | `.str-chat` |
---|
`var(--str-chat__on-primary-color)` |
| The text/icon color of the component |
-| `--str-chat__avatar-background-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The background color of the component |
-| `--str-chat__avatar-border-block-start` | | Top border of the component |
-| `--str-chat__avatar-border-block-end` | | Bottom border of the component |
-| `--str-chat__avatar-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__avatar-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__avatar-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__avatar-online-indicator-color` | `.str-chat` |
---|
`var(--str-chat__info-color)` |
| The color of the online indicator (only available in Angular SDK) |
-| `--str-chat__avatar-online-indicator-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius of the online indicator (only available in Angular SDK) |
-
-Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Avatar/Avatar-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
-| `--str-chat__avatar-size` | `.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 32)` |
`.str-chat .stream-chat__avatar--autocomplete-item` |
---|
`calc(var(--str-chat__spacing-px) * 30)` |
`.str-chat .stream-chat__avatar--channel-header` |
---|
`calc(var(--str-chat__spacing-px) * 40)` |
`.str-chat .stream-chat__avatar--channel-preview` |
---|
`calc(var(--str-chat__spacing-px) * 49)` |
`.str-chat .stream-chat__avatar--quoted-message-sender` |
---|
`calc(var(--str-chat__spacing-px) * 20)` |
`.str-chat .stream-chat__avatar--reaction` |
---|
`calc(var(--str-chat__spacing-px) * 30)` |
| The size of the avatar, only available in Angular v5+ |
-
-Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Avatar/Avatar-layout.scss)
-
-## Channel
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__channel-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__channel-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__channel-background-color` | `.str-chat` |
---|
`var(--str-chat__background-color)` |
| The background color of the component |
-| `--str-chat__channel-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__channel-border-block-start` | | Top border of the component |
-| `--str-chat__channel-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__channel-empty-indicator-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The icon color used when no channel is selected |
-| `--str-chat__channel-empty-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text color used when no channel is selected |
-| `--str-chat__channel-loading-state-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The color of the loading indicator |
-
-Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Channel/Channel-theme.scss)
-
-## ChannelHeader
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| `--str-chat__channel-header-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__channel-header-color` | | The text/icon color of the component |
-| `--str-chat__channel-header-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__channel-header-border-block-start` | | Top border of the component |
-| `--str-chat__channel-header-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-header-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-header-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__channel-header-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__channel-header-info-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color used to display member information about the channel |
-
-Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss)
-
-## ChannelList
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| `--str-chat__channel-list-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__channel-list-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__channel-list-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__channel-list-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__channel-list-border-block-start` | | Top border of the component |
-| `--str-chat__channel-list-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-list-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-list-border-inline-end` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Right (left in RTL layout) border of the component |
-| `--str-chat__channel-list-load-more-border-radius` | `.str-chat` |
---|
`var(--str-chat__cta-button-border-radius)` |
| The border radius used for the borders of the load more button |
-| `--str-chat__channel-list-load-more-color` | `.str-chat` |
---|
`var(--str-chat__cta-button-color)` |
| The text/icon color of the load more button |
-| `--str-chat__channel-list-load-more-background-color` | `.str-chat` |
---|
`var(--str-chat__cta-button-background-color)` |
| The background color of the load more button |
-| `--str-chat__channel-list-load-more-box-shadow` | `.str-chat` |
---|
`var(--str-chat__cta-button-box-shadow)` |
| Box shadow applied to the load more button |
-| `--str-chat__channel-list-load-more-border-block-start` | `.str-chat` |
---|
`var( --str-chat__cta-button-border-block-start )` |
| Top border of the load more button |
-| `--str-chat__channel-list-load-more-border-block-end` | `.str-chat` |
---|
`var(--str-chat__cta-button-border-block-end)` |
| Bottom border of the load more button |
-| `--str-chat__channel-list-load-more-border-inline-start` | `.str-chat` |
---|
`var( --str-chat__cta-button-border-inline-start )` |
| Left (right in RTL layout) border of the load more button |
-| `--str-chat__channel-list-load-more-border-inline-end` | `.str-chat` |
---|
`var( --str-chat__cta-button-border-inline-end )` |
| Right (left in RTL layout) border of the load more button |
-| `--str-chat__channel-list-load-more-pressed-background-color` | `.str-chat` |
---|
`var( --str-chat__cta-button-pressed-background-color )` |
| The background color of the load more button in pressed state |
-| `--str-chat__channel-list-load-more-disabled-background-color` | `.str-chat` |
---|
`var( --str-chat__cta-button-disabled-background-color )` |
| The background color of the load more button in disabled state |
-| `--str-chat__channel-list-load-more-disabled-color` | `.str-chat` |
---|
`var(--str-chat__cta-button-disabled-color)` |
| The text/icon color of the load more button in disabled state |
-| `--str-chat__channel-list-empty-indicator-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color for the empty list state |
-
-Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelList/ChannelList-theme.scss)
-
-## ChannelPreview
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `--str-chat__channel-preview-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__channel-preview-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__channel-preview-background-color` | | The background color of the component |
-| `--str-chat__channel-preview-border-block-start` | | Top border of the component |
-| `--str-chat__channel-preview-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-preview-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-preview-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__channel-preview-active-background-color` | `.str-chat` |
---|
`var(--str-chat__surface-color)` |
| Background color used for selected channel preview components |
-| `--str-chat__channel-preview-hover-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-surface-color)` |
| Background color used for the hover state |
-| `--str-chat__channel-preview-latest-message-secondary-color` | `.str-chat` |
---|
`var( --str-chat__text-low-emphasis-color )` |
| Text color of the latest message when preview is not hovered or selected |
-| `--str-chat__channel-preview-loading-state-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The color of the loading indicator while initializing the channel list |
-| `--str-chat__channel-preview-unread-badge-background-color` | `.str-chat` |
---|
`var(--str-chat__unread-badge-color)` |
| The background color of the unread badge |
-| `--str-chat__channel-preview-unread-badge-color` | `.str-chat` |
---|
`var(--str-chat__on-unread-badge-color)` |
| The color of the unread badge |
-| `--str-chat__channel-preview-unread-badge-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for the borders of the unread badge |
-| `--str-chat__channel-preview-unread-badge-border-block-start` | | Top border of the unread badge |
-| `--str-chat__channel-preview-unread-badge-border-block-end` | | Bottom border of the unread badge |
-| `--str-chat__channel-preview-unread-badge-border-inline-start` | | Left (right in RTL layout) border of the unread badge |
-| `--str-chat__channel-preview-unread-badge-border-inline-end` | | Right (left in RTL layout) border of the unread badge |
-| `--str-chat__channel-preview-message-status-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The color of the message status indicator icon (only available in Angular) |
-| `--str-chat__channel-preview-message-time-color` | `.str-chat` |
---|
`var(--str-chat__message-secondary-color)` |
| The color of the text that displays the message time (only available in Angular) |
-
-Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)
-
-## ChannelSearch - Only available in React SDK
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| `--str-chat__channel-search-input-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__channel-search-input-placeholder-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color of the component |
-| `--str-chat__channel-search-input-icon-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color of the component |
-| `--str-chat__channel-search-input-border-block-start` | | Top border of the component |
-| `--str-chat__channel-search-input-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-search-input-border-inline-start` | | Left (right in RTL layout) borhe component |
-| `--str-chat__channel-search-input-border-inline-end` | | Right (left in RTL layout) borhe component |
-| `--str-chat__channel-search-input-wrapper-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-lg)` |
| The border radius used for the borders of the component |
-| `--str-chat__channel-search-input-wrapper-background-color` | | The background color of the component |
-| `--str-chat__channel-search-input-wrapper-border-block-start` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Top border of the component |
-| `--str-chat__channel-search-input-wrapper-border-block-end` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Bottom border of the component |
-| `--str-chat__channel-search-input-wrapper-border-inline-start` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Left (right in RTL layout) border of the component |
-| `--str-chat__channel-search-input-wrapper-border-inline-end` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Right (left in RTL layout) border of the component |
-| `--str-chat__channel-search-input-wrapper-active-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-lg)` |
| The border radius used for the borders of the component |
-| `--str-chat__channel-search-input-wrapper-active-background-color` | | The background color of the component |
-| `--str-chat__channel-search-input-wrapper-active-border-block-start` | `.str-chat` |
---|
`var(--str-chat__primary-color) 1px solid` |
| Top border of the component |
-| `--str-chat__channel-search-input-wrapper-active-border-block-end` | `.str-chat` |
---|
`var(--str-chat__primary-color) 1px solid` |
| Bottom border of the component |
-| `--str-chat__channel-search-input-wrapper-active-border-inline-start` | `.str-chat` |
---|
`var( --str-chat__primary-color ) 1px solid` |
| Left (right in RTL layout) border of the component |
-| `--str-chat__channel-search-input-wrapper-active-border-inline-end` | `.str-chat` |
---|
`var(--str-chat__primary-color) 1px solid` |
| Right (left in RTL layout) border of the component |
-| `--str-chat__channel-search-result-background-color` | | The background applied to channel search result |
-| `--str-chat__channel-search-result-border-block-start` | | Top border of the component |
-| `--str-chat__channel-search-result-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-search-result-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-search-result-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__channel-search-result-hover-background-color` | `.str-chat` |
---|
`var( --str-chat__secondary-surface-color )` |
| Background color used for the search result hover / focused state |
-| `--str-chat__channel-search-result-list-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| |
-| `--str-chat__channel-search-result-list-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| |
-| `--str-chat__channel-search-result-list-border-block-start` | | Top border of the component |
-| `--str-chat__channel-search-result-list-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-search-result-list-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-search-result-list-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__channel-search-result-list-popup-box-shadow` | `.str-chat` |
---|
`0 4px 4px var(--str-chat__box-shadow-color)` |
| Box shadow applied to the component |
-| `--str-chat__channel-search-results-header-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The font color used in the search results header |
-| `--str-chat__channel-search-results-header-background-color` | `.str-chat` |
---|
`var(--str-chat__background-color)` |
| The background color used in the search results header |
-| `--str-chat__channel-search-results-header-border-block-start` | | Top border of the component |
-| `--str-chat__channel-search-results-header-border-block-end` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Bottom border of the component |
-| `--str-chat__channel-search-results-header-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-search-results-header-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__channel-search-results-loading-indicator-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The font color used in the search results loading indicator |
-| `--str-chat__channel-search-results-loading-indicator-background-color` | `.str-chat` |
---|
`var(--str-chat__background-color)` |
| The background color used in the search results loading indicator |
-| `--str-chat__channel-search-results-loading-indicator-border-block-start` | | Top border of the component |
-| `--str-chat__channel-search-results-loading-indicator-border-block-end` | `.str-chat` |
---|
`var(--str-chat__surface-color) 1px solid` |
| Bottom border of the component |
-| `--str-chat__channel-search-results-loading-indicator-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-search-results-loading-indicator-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__channel-search-results-empty-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The font color used in the empty search results indicator |
-| `--str-chat__channel-search-results-empty-icon-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The icon color used in the empty search results indicator |
-| `--str-chat__channel-search-results-empty-background-color` | `.str-chat` |
---|
`var(--str-chat__background-color)` |
| The background color used in the empty search results indicator |
-| `--str-chat__channel-search-results-empty-border-block-start` | | Top border of the component |
-| `--str-chat__channel-search-results-empty-border-block-end` | | Bottom border of the component |
-| `--str-chat__channel-search-results-empty-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__channel-search-results-empty-border-inline-end` | | Right (left in RTL layout) border of the component |
-
-Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)
-
-## CircleFAButton
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__circle-fab-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for the borders of the component |
-| `--str-chat__circle-fab-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text/icon color of the component |
-| `--str-chat__circle-fab-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__circle-fab-pressed-background-color` | `.str-chat` |
---|
`var(--str-chat__surface-color)` |
| The background color of the component in pressed state |
-| `--str-chat__circle-fab-box-shadow` | `.str-chat` |
---|
`0 2px 4px rgba(0, 0, 0, 0.25)` |
| Box shadow applied to the component |
-| `--str-chat__circle-fab-border-block-start` | | Top border of the component |
-| `--str-chat__circle-fab-border-block-end` | | Bottom border of the component |
-| `--str-chat__circle-fab-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__circle-fab-border-inline-end` | | Right (left in RTL layout) border of the component |
-
-Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss)
-
-## CTAButton
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__cta-button-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-xs)` |
| The border radius used for the borders of the component |
-| `--str-chat__cta-button-color` | `.str-chat` |
---|
`var(--str-chat__on-primary-color)` |
| The text/icon color of the component |
-| `--str-chat__cta-button-background-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The background color of the component |
-| `--str-chat__cta-button-border-block-start` | | Top border of the component |
-| `--str-chat__cta-button-border-block-end` | | Bottom border of the component |
-| `--str-chat__cta-button-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__cta-button-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__cta-button-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__cta-button-pressed-background-color` | `.str-chat` |
---|
`var(--str-chat__active-primary-color)` |
| The background color of the component in pressed state |
-| `--str-chat__cta-button-disabled-background-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The background color of the component in disabled state |
-| `--str-chat__cta-button-disabled-color` | `.str-chat` |
---|
`var(--str-chat__on-disabled-color)` |
| The text/icon color of the component in disabled state |
-
-Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss)
-
-## EditMessageForm
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--str-chat__edit-message-modal-button-border-radius` | | The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-send-button-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-cancel-button-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-button-background-color` | | The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-button-border-block-start` | | Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-button-border-block-end` | | Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-button-border-inline-start` | | Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-button-border-inline-end` | | Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
-| `--str-chat__edit-message-modal-button-box-shadow` | | Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 |
-
-Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss)
-
-## Icon - Only available in Angular SDK
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
-| `--str-chat-icon-color` | `.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download` |
---|
`var(--str-chat__attachment-preview-download-icon-color)` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete` |
---|
`var(--str-chat__attachment-preview-close-icon-color)` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-error` |
---|
`var(--str-chat__attachment-preview-retry-icon-color)` |
`.str-chat__empty-channel` |
---|
`var(--str-chat__channel-empty-color)` |
`.str-chat__channel-list .str-chat__channel-list-empty` |
---|
`var(--str-chat__channel-list-empty-indicator-color)` |
`.str-chat__channel-preview .str-chat__channel-preview-messenger--status` |
---|
`var(--str-chat__channel-preview-message-status-color)` |
`.str-chat` |
---|
`var(--str-chat__text-color)` |
`.str-chat__icon--error` |
---|
`var(--str-chat__danger-color)` |
`.str-chat__image-carousel .str-chat__image-carousel-stepper` |
---|
`var(--str-chat__image-carousel-stepper-color)` |
`.str-chat__message .str-chat__message-options` |
---|
`var(--str-chat__message-options-color)` |
`.str-chat__message .str-chat__message-status` |
---|
`var(--str-chat__message-status-color)` |
`.str-chat__message .str-chat__message-error-icon` |
---|
`var(--str-chat__message-error-message-color)` |
`.str-chat__unread-messages-notification` |
---|
`var(--str-chat__on-primary-color)` |
`.str-chat__message-input .str-chat__file-input-container` |
---|
`var(--str-chat__message-input-tools-color)` |
`.str-chat__message-input .str-chat__send-button` |
---|
`var(--str-chat__message-send-color)` |
`.str-chat__message-input .str-chat__send-button:disabled` |
---|
`var(--str-chat__message-send-disabled-color)` |
`.str-chat__jump-to-latest-message` |
---|
`var(--str-chat__jump-to-latest-message-unread-count-background-color)` |
`.str-chat__modal .str-chat__modal__close-button` |
---|
`var(--str-chat__modal-close-icon-color)` |
| The color of the icon, only available in Angular v5+ |
-
-Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Icon/Icon-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
-| `--str-chat-icon-height` | `.str-chat__attachment-list .str-chat__message-attachment-download-icon` |
---|
`calc(var(--str-chat__spacing-px) * 16)` |
`.str-chat__attachment-list .str-chat__attachment-type-icon` |
---|
`calc(var(--str-chat__spacing-px) * 37)` |
`.str-chat__message-attachment-audio-widget--play-button` |
---|
`calc(var(--str-chat__spacing-px) * 24)` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon` |
---|
`calc(var(--str-chat__spacing-px) * 37)` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download` |
---|
`calc(var(--str-chat__spacing-px) * 16)` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete` |
---|
`calc(var(--str-chat__spacing-px) * 24)` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-error` |
---|
`calc(var(--str-chat__spacing-px) * 24)` |
`.str-chat__empty-channel` |
---|
`calc(var(--str-chat__spacing-px) * 136)` |
`.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty` |
---|
`calc(var(--str-chat__spacing-px) * 136)` |
`.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status` |
---|
`calc(var(--str-chat__spacing-px) * 15)` |
`.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 24)` |
`.str-chat__image-carousel .str-chat__image-carousel-stepper` |
---|
`calc(var(--str-chat__spacing-px) * 30)` |
`.str-chat__message .str-chat__message-options` |
---|
`calc(var(--str-chat__message-options-button-size) * 0.7)` |
`.str-chat__message .str-chat__message-status,.str-chat__quoted-message-preview .str-chat__message-status` |
---|
`calc(var(--str-chat__spacing-px) * 15)` |
`.str-chat__unread-messages-notification` |
---|
`calc(var(--str-chat__spacing-px) * 16)` |
`.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container` |
---|
`calc(var(--str-chat__spacing-px) * 24)` |
`.str-chat__message-input .str-chat__send-button` |
---|
`calc(var(--str-chat__spacing-px) * 32)` |
`.str-chat__modal--open .str-chat__modal__close-button` |
---|
`calc(var(--str-chat__spacing-px) * 28)` |
| The height of the icon, only available in Angular v5+ |
-| `--str-chat-icon-width` | `.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon` |
---|
`auto` |
`.str-chat` |
---|
`auto` |
| The width of the icon, only available in Angular v5+ |
-
-Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Icon/Icon-layout.scss)
-
-## ImageCarousel - Only available in Angular SDK
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------ |
-| `--str-chat__image-carousel-stepper-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The color of the stepper icon. |
-
-Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss)
-
-## LoadingIndicator
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------- |
-| `--str-chat__loading-indicator-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The color of the loading indicator |
-
-Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| `--str-chat__loading-indicator-size` | `.str-chat__attachment-preview-list` |
---|
`calc(var(--str-chat__spacing-px) * 18)` |
`.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 15)` |
| The size of the loading indicator, only available in Angular v5+ |
-
-Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss)
-
-## Message
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `--str-chat__message-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__message-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__message-error-message-color` | `.str-chat` |
---|
`var(--str-chat__danger-color)` |
| The text/icon color used for displaying error messages |
-| `--str-chat__message-secondary-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color used for displaying items with less emphasis |
-| `--str-chat__message-link-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color used for displaying links |
-| `--str-chat__message-mention-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color used for displaying mentions |
-| `--str-chat__message-status-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text/icon color used for displaying message status |
-| `--str-chat__message-replies-count-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color used for displaying the number of thread replies of a message |
-| `--str-chat__message-background-color` | | The background color of the component |
-| `--str-chat__message-highlighted-background-color` | `.str-chat` |
---|
`var(--str-chat__message-highlight-color)` |
| The background color of a jumped-to message |
-| `--str-chat__message-border-block-start` | | Top border of the component |
-| `--str-chat__message-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__message-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__message-active-bacground-color` | | The background of the message component in active state |
-| `--str-chat__message-options-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The icon color used for displaying message options |
-| `--str-chat__message-options-hover-background-color` | `.str-chat` |
---|
`var(--str-chat__tertiary-surface-color)` |
| The icon color used for displaying message options if a message option is clicked |
-| `--str-chat__message-options-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for displaying message options |
-| `--str-chat__message-options-active-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The background color used if a message option is hovered |
-| `--str-chat__message-bubble-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-md)` |
| The border radius used for the borders of the message bubble |
-| `--str-chat__message-bubble-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon of the message bubble |
-| `--str-chat__message-bubble-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-surface-color)` |
| The background of the message bubble |
-| `--str-chat__own-message-bubble-color` | `.str-chat` |
---|
`var(--str-chat__message-bubble-color)` |
| The text/icon of the message bubble, if the message was sent by the user |
-| `--str-chat__own-message-bubble-background-color` | `.str-chat` |
---|
`var(--str-chat__primary-surface-color)` |
| The background of the message bubble, if the message was sent by the user |
-| `--str-chat__quoted-message-bubble-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background of the message bubble, if it's a quoted message |
-| `--str-chat__message-bubble-border-block-start` | | Top border of the message bubble |
-| `--str-chat__message-bubble-border-block-end` | | Bottom border of the message bubble |
-| `--str-chat__message-bubble-border-inline-start` | | Left (right in RTL layout) border of the message bubble |
-| `--str-chat__message-bubble-border-inline-end` | | Right (left in RTL layout) border of the message bubble |
-| `--str-chat__message-bubble-box-shadow` | | Box shadow applied to the message bubble |
-| `--str-chat__deleted-message-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-md)` |
| The border radius used for the borders of a deleted message |
-| `--str-chat__deleted-message-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon of a deleted message |
-| `--str-chat__deleted-message-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-surface-color)` |
| The background of a deleted message |
-| `--str-chat__deleted-message-border-block-start` | | Top border of a deleted message |
-| `--str-chat__deleted-message-border-block-end` | | Bottom border of a deleted message |
-| `--str-chat__deleted-message-border-inline-start` | | Left (right in RTL layout) border of a deleted message |
-| `--str-chat__deleted-message-border-inline-end` | | Right (left in RTL layout) border of a deleted message |
-| `--str-chat__deleted-message-box-shadow` | | Box shadow applied to a deleted message |
-| `--str-chat__system-message-border-radius` | | The border radius used for the borders of a system message |
-| `--str-chat__system-message-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon of a system message |
-| `--str-chat__system-message-background-color` | | The background of a system message |
-| `--str-chat__system-message-border-block-start` | | Top border of a system message |
-| `--str-chat__system-message-border-block-end` | | Bottom border of a system message |
-| `--str-chat__system-message-border-inline-start` | | Left (right in RTL layout) border of a system message |
-| `--str-chat__system-message-border-inline-end` | | Right (left in RTL layout) border of a system message |
-| `--str-chat__system-message-box-shadow` | | Box shadow applied to a system message |
-| `--str-chat__date-separator-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| Text color in a date separator |
-| `--str-chat__date-separator-line-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The line color applied to date separator |
-| `--str-chat__date-separator-border-radius` | | The border radius used for the borders of a date separator |
-| `--str-chat__date-separator-background-color` | | The background color of a date separator |
-| `--str-chat__date-separator-border-block-start` | | Top border of a date separator |
-| `--str-chat__date-separator-border-block-end` | | Bottom border of a date separator |
-| `--str-chat__date-separator-border-inline-start` | | Left (right in RTL layout) border of a date separator |
-| `--str-chat__date-separator-border-inline-end` | | Right (left in RTL layout) border of a date separator |
-| `--str-chat__date-separator-box-shadow` | | Box shadow applied to a date separator |
-| `--str-chat__translation-notice-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text color of the translation notice that is displayed if a message is translated with auto-translation |
-| `--str-chat__translation-notice-active-background-color` | `.str-chat` |
---|
`var(--str-chat__tertiary-surface-color)` |
| The hover color of the translation notice that is displayed if a message is translated with auto-translation |
-
-Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__message-options-button-size` | `.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 26)` |
| The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 |
-| `--str-chat__message-max-width` | `.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 480)` |
`.str-chat__message.str-chat__message--has-attachment` |
---|
`var(--str-chat__message-with-attachment-max-width)` |
`.str-chat__quoted-message-preview` |
---|
`var(--str-chat__quoted-message-max-width)` |
`.str-chat__message-input .str-chat__quoted-message-preview` |
---|
`var(--str-chat__quoted-message-inside-message-input-max-width)` |
| The maximum allowed width of the message component |
-| `--str-chat__message-with-attachment-max-width` | `.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 300)` |
| The maximum allowed width of the message component, if it has attachments |
-| `--str-chat__quoted-message-max-width` | `.str-chat` |
---|
`calc(var(--str-chat__spacing-px) * 250)` |
| The maximum allowed width of quoted messages inside the message component |
-| `--str-chat__quoted-message-inside-message-input-max-width` | `.str-chat` |
---|
`calc( var(--str-chat__spacing-px) * 200 )` |
| The maximum allowed width of quoted messages inside the message input component |
-| `--str-chat__quoted-message-inside-message-input-max-height` | `.str-chat` |
---|
`calc( var(--str-chat__quoted-message-inside-message-input-max-width) + calc(var(--str-chat__spacing-px) * 50) )` |
| The maximum allowed height of quoted messages inside the message input component |
-| `--str-chat-message-options-size` | `.str-chat__message` |
---|
`calc(3 * var(--str-chat__message-options-button-size))` |
`.str-chat__message.str-chat__message-without-touch-support` |
---|
`calc(1 * var(--str-chat__message-options-button-size))` |
| |
-| `--str-chat__message-edited-timestamp-height` | `.str-chat__message .str-chat__message-metadata .str-chat__message-edited-timestamp,.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-edited-timestamp` |
---|
`1rem` |
| |
-
-Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-layout.scss)
-
-## MessageActionsBox
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `--str-chat__message-actions-box-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-sm)` |
| The border radius used for the borders of the component |
-| `--str-chat__message-actions-box-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__message-actions-box-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__message-actions-box-border-block-start` | | Top border of the component |
-| `--str-chat__message-actions-box-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-actions-box-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-actions-box-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__message-actions-box-box-shadow` | `.str-chat` |
---|
`0 0 8px var(--str-chat__box-shadow-color)` |
| Box shadow applied to the component |
-| `--str-chat__message-actions-box-item-border-radius` | | The border radius used for the borders of an item in the message actions box |
-| `--str-chat__message-actions-box-item-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of an item in the message actions box |
-| `--str-chat__message-actions-box-item-background-color` | | The background color of an item in the message actions box |
-| `--str-chat__message-actions-box-item-hover-background-color` | `.str-chat` |
---|
`var( --str-chat__secondary-surface-color )` |
| The background color of an item in the message actions box when hovered |
-| `--str-chat__message-actions-box-item-border-block-start` | | Top border of an item in the message actions box |
-| `--str-chat__message-actions-box-item-border-block-end` | | Bottom border of an item in the message actions box |
-| `--str-chat__message-actions-box-item-border-inline-start` | | Left (right in RTL layout) border of an item in the message actions box |
-| `--str-chat__message-actions-box-item-border-inline-end` | | Right (left in RTL layout) border of an item in the message actions box |
-| `--str-chat__message-actions-box-item-box-shadow` | | Box shadow applied to an item in the message actions box |
-
-Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)
-
-## MessageBouncePrompt
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------- |
-| `--str-chat__message-bounce-edit-button-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color used for the edit button |
-| `--str-chat__message-bounce-send-button-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color used for the send button |
-| `--str-chat__message-bounce-delete-button-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text color used for the delete button |
-| `--str-chat__message-bounce-button-background-color` | | The background color of the button |
-| `--str-chat__message-bounce-button-border-block-start` | | Top border of the button |
-| `--str-chat__message-bounce-button-border-block-end` | | Bottom border of the button |
-| `--str-chat__message-bounce-button-border-inline-start` | | Left (right in RTL layout) button of the component |
-| `--str-chat__message-bounce-button-border-inline-end` | | Right (left in RTL layout) button of the component |
-| `--str-chat__message-bounce-button-box-shadow` | | Box shadow applied to the button |
-
-Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)
-
-## MessageInput
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `--str-chat__message-input-border-radius` | | The border radius of the component |
-| `--str-chat__message-input-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__message-input-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__message-input-border-block-start` | | Top border of the component |
-| `--str-chat__message-input-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-input-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-input-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__message-input-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__dropzone-container-color` | `.str-chat` |
---|
`var(--str-chat__on-primary-color)` |
| The text/icon color of the dropzone container |
-| `--str-chat__dropzone-container-background-color` | `.str-chat` |
---|
`var(--str-chat__primary-overlay-color)` |
| The background color of the dropzone container |
-| `--str-chat__message-textarea-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-md)` |
| The border radius used for the borders of the textarea |
-| `--str-chat__message-textarea-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the textarea |
-| `--str-chat__message-textarea-background-color` | | The background color of the textarea |
-| `--str-chat__message-textarea-border-block-start` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Top border of the textarea |
-| `--str-chat__message-textarea-border-block-end` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Bottom border of the textarea |
-| `--str-chat__message-textarea-border-inline-start` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Left (right in RTL layout) border of the textarea |
-| `--str-chat__message-textarea-border-inline-end` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Right (left in RTL layout) border of the textarea |
-| `--str-chat__message-textarea-box-shadow` | | Box shadow applied to the textarea |
-| `--str-chat__message-send-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for the borders of the send button |
-| `--str-chat__message-send-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The text/icon color of the send button |
-| `--str-chat__message-send-background-color` | | The background color of the send button |
-| `--str-chat__message-send-border-block-start` | | Top border of the send button |
-| `--str-chat__message-send-border-block-end` | | Bottom border of the send button |
-| `--str-chat__message-send-border-inline-start` | | Left (right in RTL layout) border of the send button |
-| `--str-chat__message-send-border-inline-end` | | Right (left in RTL layout) border of the send button |
-| `--str-chat__message-send-box-shadow` | | Box shadow applied to the send button |
-| `--str-chat__message-send-disabled-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The color of the send button in disabled state |
-| `--str-chat__message-send-disabled-background-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The background color of the send button in disabled state |
-| `--str-chat__start-recording-audio-button-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for the borders of the audio recording button |
-| `--str-chat__start-recording-audio-button-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color of the audio recording button |
-| `--str-chat__start-recording-audio-button-background-color` | | The background color of the audio recording button |
-| `--str-chat__start-recording-audio-button-border-block-start` | | Top border of the audio recording button |
-| `--str-chat__start-recording-audio-button-border-block-end` | | Bottom border of the audio recording button |
-| `--str-chat__start-recording-audio-button-border-inline-start` | | Left (right in RTL layout) border of the audio recording button |
-| `--str-chat__start-recording-audio-button-border-inline-end` | | Right (left in RTL layout) border of the audio recording button |
-| `--str-chat__start-recording-audio-button-box-shadow` | | Box shadow applied to the audio recording button |
-| `--str-chat__start-recording-audio-button-disabled-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The color of the audio recording button in disabled state |
-| `--str-chat__start-recording-audio-button-disabled-background-color` | | The background color of the audio recording button in disabled state |
-| `--str-chat__message-input-tools-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-background-color` | | The background color of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-border-block-start` | | Top border of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-border-block-end` | | Bottom border of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-border-inline-start` | | Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-border-inline-end` | | Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-box-shadow` | | Box shadow applied to the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-not-allowed-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| Thex text color of the message that is displayed when the use can't send messages |
-| `--str-chat__cooldown-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
| The border radius used for the borders of the cooldown timer |
-| `--str-chat__cooldown-color` | `.str-chat` |
---|
`var(--str-chat__on-disabled-color)` |
| The text/icon color of the cooldown timer |
-| `--str-chat__cooldown-background-color` | `.str-chat` |
---|
`var(--str-chat__disabled-color)` |
| The background color of the cooldown timer |
-| `--str-chat__cooldown-border-block-start` | | Top border of the cooldown timer |
-| `--str-chat__cooldown-border-block-end` | | Bottom border of the cooldown timer |
-| `--str-chat__cooldown-border-inline-start` | | Left (right in RTL layout) border of the cooldown timer |
-| `--str-chat__cooldown-border-inline-end` | | Right (left in RTL layout) border of the cooldown timer |
-| `--str-chat__cooldown-box-shadow` | | Box shadow applied to the cooldown timer |
-
-Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------- |
-| `--str-chat__dropzone-container-backdrop-filter` | | The backdrop filter applied to the dropzone container |
-
-Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-layout.scss)
-
-## MessageList
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `--str-chat__message-list-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__message-list-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__message-list-background-color` | `.str-chat` |
---|
`var(--str-chat__background-color)` |
| The background color of the component |
-| `--str-chat__message-list-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__message-list-border-block-start` | | Top border of the component |
-| `--str-chat__message-list-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-list-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-list-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__jump-to-latest-message-border-radius` | `.str-chat` |
---|
`var(--str-chat__circle-fab-border-radius)` |
| The border radius used for the borders of the jump to latest message button |
-| `--str-chat__jump-to-latest-message-color` | `.str-chat` |
---|
`var(--str-chat__circle-fab-color)` |
| The text/icon color of the jump to latest message button |
-| `--str-chat__jump-to-latest-message-background-color` | `.str-chat` |
---|
`var(--str-chat__circle-fab-background-color)` |
| The background color of the jump to latest message button |
-| `--str-chat__jump-to-latest-message-pressed-background-color` | `.str-chat` |
---|
`var( --str-chat__circle-fab-pressed-background-color )` |
| The background color of the jump to latest message button in pressed state |
-| `--str-chat__jump-to-latest-message-box-shadow` | `.str-chat` |
---|
`var(--str-chat__circle-fab-box-shadow)` |
| Box shadow applied to the jump to latest message button |
-| `--str-chat__jump-to-latest-message-border-block-start` | `.str-chat` |
---|
`var( --str-chat__circle-fab-border-block-start )` |
| Top border of the jump to latest message button |
-| `--str-chat__jump-to-latest-message-border-block-end` | `.str-chat` |
---|
`var(--str-chat__circle-fab-border-block-end)` |
| Bottom border of the jump to latest message button |
-| `--str-chat__jump-to-latest-message-border-inline-start` | `.str-chat` |
---|
`var( --str-chat__circle-fab-border-inline-start )` |
| Left (right in RTL layout) border of the jump to latest message button |
-| `--str-chat__jump-to-latest-message-border-inline-end` | `.str-chat` |
---|
`var( --str-chat__circle-fab-border-inline-end )` |
| Right (left in RTL layout) border of the jump to latest message button |
-| `--str-chat__jump-to-latest-message-unread-count-background-color` | `.str-chat` |
---|
`var( --str-chat__jump-to-latest-message-color )` |
| The background color of the unread messages count on the jump to latest message button |
-| `--str-chat__jump-to-latest-message-unread-count-color` | `.str-chat` |
---|
`var( --str-chat__jump-to-latest-message-background-color )` |
| The text/icon color of the unread messages count on the jump to latest message button |
-| `--str-chat__thread-head-start-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The color used for displaying thread replies and thread separator at the start of a thread |
-| `--str-chat__thread-head-start-border-block-end-color` | `.str-chat` |
---|
`var(--str-chat__surface-color)` |
| The color used for the separator below the first message in a thread |
-
-Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageList/MessageList-theme.scss)
-
-## MessageNotification - Only available in React SDK
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__message-notification-background-color` | `.str-chat` |
---|
`var(--str-chat__primary-color)` |
| The background color of the component |
-| `--str-chat__message-notification-border-block-start` | | Top border of the component |
-| `--str-chat__message-notification-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-notification-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-notification-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__message-notification-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__message-notification-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__message-notification-color` | `.str-chat` |
---|
`var(--str-chat__on-primary-color)` |
| The text/icon color of the component |
-
-Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageNotification/MessageNotification-theme.scss)
-
-## MessageReactions
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `--str-chat__message-reactions-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__message-reactions-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__message-reactions-background-color` | | The background color of the component |
-| `--str-chat__message-reactions-border-block-start` | | Top border of the component |
-| `--str-chat__message-reactions-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-reactions-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-reactions-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__message-reactions-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__message-reaction-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-xs)` |
| The border radius used for the borders of a message reaction |
-| `--str-chat__message-reaction-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of a message reaction |
-| `--str-chat__message-reaction-background-color` | `.str-chat` |
---|
`var(--str-chat__tertiary-surface-color)` |
| The background color of a message reaction |
-| `--str-chat__message-reaction-border-block-start` | | Top border of a message reaction |
-| `--str-chat__message-reaction-border-block-end` | | Bottom border of a message reaction |
-| `--str-chat__message-reaction-border-inline-start` | | Left (right in RTL layout) border of a message reaction |
-| `--str-chat__message-reaction-border-inline-end` | | Right (left in RTL layout) border of a message reaction |
-| `--str-chat__message-reaction-box-shadow` | | Box shadow applied to a message reaction |
-| `--str-chat__own-message-reaction-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of a message reaction, if the user reacted with that reaction |
-| `--str-chat__own-message-reaction-background-color` | `.str-chat` |
---|
`var( --str-chat__primary-surface-color-low-emphasis )` |
| The background color of a message reaction, if the user reacted with that reaction |
-| `--str-chat__messsage-reactions-details--selected-color` | `.str-chat` |
---|
`solid var(--str-chat__primary-color)` |
| |
-
-Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss)
-
-### Layout variables
-
-| Name | Value(s) | Description |
-| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `--str-chat__stream-emoji-size` | `.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big` |
---|
`1em` |
| |
-
-Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-layout.scss)
-
-## MessageReactionsSelector
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- |
-| `--str-chat__message-reactions-options-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-circle)` |
`.str-chat .str-chat-angular-v5__reaction-selector` |
---|
`0` |
| The border radius used for the borders of the component |
-| `--str-chat__message-reactions-options-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__message-reactions-options-background-color` | `.str-chat` |
---|
`var( --str-chat__secondary-background-color )` |
| The background color of the component |
-| `--str-chat__message-reactions-options-border-block-start` | | Top border of the component |
-| `--str-chat__message-reactions-options-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-reactions-options-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-reactions-options-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__message-reactions-options-box-shadow` | `.str-chat` |
---|
`0 0 8px var(--str-chat__box-shadow-color)` |
`.str-chat .str-chat-angular-v5__reaction-selector` |
---|
`none` |
| Box shadow applied to the component |
-| `--str-chat__message-reactions-option-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-md)` |
| The border radius used for the borders of the component |
-| `--str-chat__message-reactions-option-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__message-reactions-option-background-color` | `.str-chat` |
---|
`var( --str-chat__secondary-background-color )` |
| The background color of the component |
-| `--str-chat__message-reactions-option-hover-background-color` | `.str-chat` |
---|
`var( --str-chat__primary-surface-color )` |
| The background color of the component when hovered |
-| `--str-chat__message-reactions-option-selected-background-color` | `.str-chat` |
---|
`var( --str-chat__primary-color-low-emphasis )` |
| The background color of the component when selected |
-| `--str-chat__message-reactions-option-border-block-start` | | Top border of the component |
-| `--str-chat__message-reactions-option-border-block-end` | | Bottom border of the component |
-| `--str-chat__message-reactions-option-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__message-reactions-option-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__message-reactions-option-box-shadow` | | Box shadow applied to the component |
-
-Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)
-
-## Modal
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__modal-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-sm)` |
| The border radius used for the borders of the content area of the component of the content area of the component |
-| `--str-chat__modal-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the content area of the component |
-| `--str-chat__modal-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the content area of the component |
-| `--str-chat__modal-overlay-color` | `.str-chat` |
---|
`var(--str-chat__secondary-overlay-color)` |
| The overlay color of the component |
-| `--str-chat__modal-overlay-backdrop-filter` | | The backdrop filter applied to the component |
-| `--str-chat__modal-border-block-start` | | Top border of the content area of the component |
-| `--str-chat__modal-border-block-end` | | Bottom border of the content area of the component |
-| `--str-chat__modal-border-inline-start` | | Left (right in RTL layout) border of the content area of the component |
-| `--str-chat__modal-border-inline-end` | | Right (left in RTL layout) border of the content area of the component |
-| `--str-chat__modal-box-shadow` | | Box shadow applied to the content area of the component |
-| `--str-chat__modal-close-icon-background` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The background color of the close button |
-| `--str-chat__modal-close-icon-color` | `.str-chat` |
---|
`var(--str-chat__on-disabled-color)` |
| The icon color of the close button |
-
-Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss)
-
-## Notification
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__notification-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-sm)` |
| The border radius used for the borders of the component |
-| `--str-chat__notification-color` | `.str-chat` |
---|
`var(--str-chat__opaque-surface-text-color)` |
| The text/icon color of the component |
-| `--str-chat__notification-background-color` | `.str-chat` |
---|
`var(--str-chat__opaque-surface-background-color)` |
| The background color of the component |
-| `--str-chat__notification-border-block-start` | | Top border of the component |
-| `--str-chat__notification-border-block-end` | | Bottom border of the component |
-| `--str-chat__notification-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__notification-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__notification-box-shadow` | `.str-chat` |
---|
`0 0 8px var(--str-chat__box-shadow-color)` |
| Box shadow applied to the component |
-
-Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Notification/Notification-theme.scss)
-
-## NotificationList
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__notification-list-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__notification-list-color` | `.str-chat` |
---|
`var(--str-chat__notification-list-text-color)` |
| The text/icon color of the component |
-| `--str-chat__notification-list-background-color` | | The background color of the component |
-| `--str-chat__notification-list-border-block-start` | | Top border of the component |
-| `--str-chat__notification-list-border-block-end` | | Bottom border of the component |
-| `--str-chat__notification-list-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__notification-list-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__notification-list-box-shadow` | | Box shadow applied to the component |
-
-Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/NotificationList/NotificationList-theme.scss)
-
-## Thread
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `--str-chat__thread-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__thread-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__thread-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__thread-border-block-start` | | Top border of the component |
-| `--str-chat__thread-border-block-end` | | Bottom border of the component |
-| `--str-chat__thread-border-inline-start` | `.str-chat` |
---|
`1px solid var(--str-chat__surface-color)` |
| Left (right in RTL layout) border of the component |
-| `--str-chat__thread-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__thread-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__thread-header-border-radius` | | The border radius used for the borders of the thread header |
-| `--str-chat__thread-header-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the thread header |
-| `--str-chat__thread-header-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the thread header |
-| `--str-chat__thread-header-border-block-start` | | Top border of the thread header |
-| `--str-chat__thread-header-border-block-end` | | Bottom border of the thread header |
-| `--str-chat__thread-header-border-inline-start` | | Left (right in RTL layout) border of the thread header |
-| `--str-chat__thread-header-border-inline-end` | | Right (left in RTL layout) border of the thread header |
-| `--str-chat__thread-header-box-shadow` | | Box shadow applied to the thread header |
-| `--str-chat__thread-header-info-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color used to display less emphasized text in the channel header |
-
-Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Thread/Thread-theme.scss)
-
-## Tooltip
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__tooltip-border-radius` | `.str-chat` |
---|
`var(--str-chat__border-radius-xs)` |
| The border radius used for the borders of the component |
-| `--str-chat__tooltip-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__tooltip-background-color` | `.str-chat` |
---|
`var(--str-chat__secondary-background-color)` |
| The background color of the component |
-| `--str-chat__tooltip-border-block-start` | | Top border of the component |
-| `--str-chat__tooltip-border-block-end` | | Bottom border of the component |
-| `--str-chat__tooltip-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__tooltip-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__tooltip-box-shadow` | `.str-chat` |
---|
`0 0 20px var(--str-chat__box-shadow-color)` |
| Box shadow applied to the component |
-
-Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Tooltip/Tooltip-theme.scss)
-
-## TypingIndicator
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| `--str-chat__typing-indicator-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__typing-indicator-color` | `.str-chat` |
---|
`var(--str-chat__text-low-emphasis-color)` |
| The text/icon color of the component |
-| `--str-chat__typing-indicator-background-color` | `.str-chat` |
---|
`var(--str-chat__overlay-color)` |
| The background color of the component |
-| `--str-chat__typing-indicator-border-block-start` | | Top border of the component |
-| `--str-chat__typing-indicator-border-block-end` | | Bottom border of the component |
-| `--str-chat__typing-indicator-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__typing-indicator-border-inline-end` | | Right (left in RTL layout) border of the component |
-| `--str-chat__typing-indicator-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__typing-indicator-dot-background-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| Background color of the animated dots in the typing indicator |
-
-Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)
-
-## VirtualizedMessageList - Only available in React SDK
-
-### Theme variables
-
-| Name | Value(s) | Description |
-| ---------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__virtual-list-border-radius` | | The border radius used for the borders of the component |
-| `--str-chat__virtual-list-color` | `.str-chat` |
---|
`var(--str-chat__text-color)` |
| The text/icon color of the component |
-| `--str-chat__virtual-list-background-color` | `.str-chat` |
---|
`var(--str-chat__background-color)` |
| The background color of the component |
-| `--str-chat__virtual-list-box-shadow` | | Box shadow applied to the component |
-| `--str-chat__virtual-list-border-block-start` | | Top border of the component |
-| `--str-chat__virtual-list-border-block-end` | | Bottom border of the component |
-| `--str-chat__virtual-list-border-inline-start` | | Left (right in RTL layout) border of the component |
-| `--str-chat__virtual-list-border-inline-end` | | Right (left in RTL layout) border of the component |
-
-Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)
+Global variables change the layout/look-and-feel of the whole chat UI, meanwhile component variables change only a part of it (for example message component).
+
+Component variables can be further grouped in the following ways:
+
+- **Theme variables** for changing text and background colors, borders and shadows
+- **Layout variables** defined for some components (but not all) to change the size of a specific part of a component
+
+You can find the list of components below:
+
+| Component name | Variables |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `AttachmentList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentList/AttachmentList-layout.scss) |
+| `AttachmentPreviewList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss) |
+| `Autocomplete` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss) |
+| `Avatar` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Avatar/Avatar-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Avatar/Avatar-layout.scss) |
+| `Channel` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Channel/Channel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Channel/Channel-layout.scss) |
+| `ChannelHeader` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) |
+| `ChannelList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelList/ChannelList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelList/ChannelList-layout.scss) |
+| `ChannelPreview` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss) |
+| `ChannelSearch` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) |
+| `CircleFAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) |
+| `CTAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/CTAButton/CTAButton-theme.scss) |
+| `EditMessageForm` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) |
+| `Icon` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Icon/Icon-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Icon/Icon-layout.scss) |
+| `ImageCarousel` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss) |
+| `LoadingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) |
+| `Message` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Message/Message-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Message/Message-layout.scss) |
+| `MessageActionsBox` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) |
+| `MessageBouncePrompt` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) |
+| `MessageInput` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageInput/MessageInput-layout.scss) |
+| `MessageList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageList/MessageList-theme.scss) |
+| `MessageNotification` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageNotification/MessageNotification-theme.scss) |
+| `MessageReactions` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageReactions/MessageReactions-layout.scss) |
+| `MessageReactionsSelector` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) |
+| `Modal` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Modal/Modal-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Modal/Modal-layout.scss) |
+| `Notification` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Notification/Notification-theme.scss) |
+| `NotificationList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/NotificationList/NotificationList-theme.scss) |
+| `Thread` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Thread/Thread-theme.scss) |
+| `Tooltip` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Tooltip/Tooltip-theme.scss) |
+| `TypingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
+| `VirtualizedMessageList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) |
diff --git a/docusaurus/docs/Angular/theming/global-variables.mdx b/docusaurus/docs/Angular/theming/global-variables.mdx
index d8bdd591..fd9a9633 100644
--- a/docusaurus/docs/Angular/theming/global-variables.mdx
+++ b/docusaurus/docs/Angular/theming/global-variables.mdx
@@ -23,112 +23,12 @@ CSS variables are the easiest way to customize the theme. The variables are orga
- Global
- Component
-This page contains information about the global variables.
+Global variables change the layout/look-and-feel of the whole chat UI, meanwhile component variables change only a part of it (for example message component).
Global variables can be grouped into the following categories:
-- Theme: colors, typography and border radiuses
-- Layout: spacing (padding and margin) and sizing
+- **Theme**: colors, typography and border radiuses ([list of global theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/_global-theme-variables.scss))
-You can read about each category in detail in the tables below.
-
-## Theme variables
-
-### Colors
-
-| Name | Value(s) | Description | Used in |
-| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__primary-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__blue500)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__blue400)` |
| Used for emphasis, brands can inject their main color using this variable | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageNotification/MessageNotification-theme.scss) |
-| `--str-chat__primary-overlay-color` | `.str-chat,.str-chat__theme-light` |
---|
`rgba(0, 95, 255, 0.6)` |
`.str-chat__theme-dark` |
---|
`rgba(51, 126, 255, 0.6)` |
| Used for emphasised overlays - color of --str-chat\_\_primary-color with alpha channel | [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss) |
-| `--str-chat__primary-color-low-emphasis` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__blue300)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__blue700)` |
| Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color | [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) |
-| `--str-chat__active-primary-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__blue600)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__blue600)` |
| Used to indicate that a UI element with primary color is in an active state | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss) |
-| `--str-chat__on-primary-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey50)` |
| If the primary color is used as a background, text/icons are displayed in this color | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageNotification/MessageNotification-theme.scss) |
-| `--str-chat__background-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey950)` |
| Used as a background color for the main chat UI components | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) |
-| `--str-chat__secondary-background-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey900)` |
| Used as a background color for the main chat UI components | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Tooltip/Tooltip-theme.scss) |
-| `--str-chat__primary-surface-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__blue100)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__blue900)` |
| Used as a background color to give emphasis, but less vibrant than the primary color | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) |
-| `--str-chat__primary-surface-color-low-emphasis` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__blue50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__blue950)` |
| Used as a background color to give emphasis, but less vibrant than the primary surface color | [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss) |
-| `--str-chat__surface-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey300)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey700)` |
| A neutral color used to give emphasis to different surfaces | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Thread/Thread-theme.scss) |
-| `--str-chat__secondary-surface-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey200)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey800)` |
| A neutral color used to give emphasis to different surfaces | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) |
-| `--str-chat__tertiary-surface-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey100)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey900)` |
| A neutral color used to give emphasis to different surfaces | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss) |
-| `--str-chat__text-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey950)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey50)` |
| The main color used for texts/icons | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
-| `--str-chat__text-low-emphasis-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey500)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey500)` |
| Used for texts/icons that need less emphasis | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
-| `--str-chat__disabled-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey400)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey600)` |
| Used for displaying disabled UI elements (typically buttons) | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss) |
-| `--str-chat__on-disabled-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey50)` |
| Used for text/icon colors if disabled color is used as a background color | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss) |
-| `--str-chat__danger-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__red400)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__red600)` |
| Used for error messages, and destructive actions | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss) |
-| `--str-chat__message-highlight-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__yellow100)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__yellow900)` |
| The background color used to highlight a message when jumping to a message. Only available in React SDK. | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss) |
-| `--str-chat__unread-badge-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__red400)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__red400)` |
| Used for displaying the unread badge | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) |
-| `--str-chat__on-unread-badge-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey50)` |
| Used for text/icon colors if unread badge color is used as a background color | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) |
-| `--str-chat__overlay-color` | `.str-chat,.str-chat__theme-light` |
---|
`rgba(252, 252, 252, 0.9)` |
`.str-chat__theme-dark` |
---|
`rgba(0, 0, 0, 0.7)` |
| The background color used for overlays | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
-| `--str-chat__secondary-overlay-color` | `.str-chat,.str-chat__theme-light` |
---|
`rgba(0, 0, 0, 0.2)` |
`.str-chat__theme-dark` |
---|
`rgba(0, 0, 0, 0.4)` |
| The background color used for subtle overlays | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss) |
-| `--str-chat__secondary-overlay-text-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey50)` |
| The text/icon color used on subtle overlays | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss) |
-| `--str-chat__opaque-surface-background-color` | `.str-chat,.str-chat__theme-light` |
---|
`rgba(0, 0, 0, 0.8)` |
`.str-chat__theme-dark` |
---|
`rgba(250, 250, 250, 0.85)` |
| The background color used for opaque surfaces | [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Notification/Notification-theme.scss) |
-| `--str-chat__opaque-surface-text-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__grey50)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__grey900)` |
| The text color used on opaque surfaces | [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Notification/Notification-theme.scss) |
-| `--str-chat__box-shadow-color` | `.str-chat,.str-chat__theme-light` |
---|
`rgba(0, 0, 0, 0.18)` |
`.str-chat__theme-dark` |
---|
`rgba(0, 0, 0, 0.8)` |
| If a component has a box shadow applied to it, this will be the color used for the shadow | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Tooltip/Tooltip-theme.scss) |
-| `--str-chat__info-color` | `.str-chat,.str-chat__theme-light` |
---|
`var(--str-chat__green500)` |
`.str-chat__theme-dark` |
---|
`var(--str-chat__green500)` |
| Used for online indicator and success messages | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Avatar/Avatar-theme.scss) |
-
-### Typography
-
-| Name | Value(s) | Description | Used in |
-| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__font-family` | `.str-chat` |
---|
`-apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Oxygen-Sans , Ubuntu , Cantarell , Helvetica Neue , sans-serif` |
| The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss) |
-| `--str-chat__caption-text` | `.str-chat` |
---|
`0.75 rem/1.3 var(--str-chat__font-family)` |
| The font used for caption texts | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Tooltip/Tooltip-theme.scss) |
-| `--str-chat__caption-medium-text` | `.str-chat` |
---|
`500 0.75 rem/1.3 var(--str-chat__font-family)` |
| The font used for caption texts with emphasize | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss) |
-| `--str-chat__caption-strong-text` | `.str-chat` |
---|
`700 0.75 rem/1.3 var(--str-chat__font-family)` |
| The font used for caption texts with emphasize | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss) |
-| `--str-chat__body-text` | `.str-chat` |
---|
`0.875 rem/1.2 var(--str-chat__font-family)` |
| The font used for body texts | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Thread/Thread-theme.scss) |
-| `--str-chat__body-medium-text` | `.str-chat` |
---|
`500 0.875 rem/1.2 var(--str-chat__font-family)` |
| The font used for body texts with emphasize | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) |
-| `--str-chat__body2-text` | `.str-chat` |
---|
`0.9375 rem/1.2 var(--str-chat__font-family)` |
| The font used for body texts | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss) |
-| `--str-chat__body2-medium-text` | `.str-chat` |
---|
`500 0.9375 rem/1.2 var(--str-chat__font-family)` |
| The font used for body texts with emphasize | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss) |
-| `--str-chat__subtitle-text` | `.str-chat` |
---|
`1 rem/1.1.25 var(--str-chat__font-family)` |
| The font used for subtitle texts | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Notification/Notification-theme.scss) |
-| `--str-chat__subtitle-medium-text` | `.str-chat` |
---|
`500 1 rem/1.25 var(--str-chat__font-family)` |
| The font used for subtitle texts with emphasize | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Thread/Thread-theme.scss) |
-| `--str-chat__subtitle2-text` | `.str-chat` |
---|
`1.25 rem/1.2 var(--str-chat__font-family)` |
| The font used for subtitle texts | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss) |
-| `--str-chat__subtitle2-medium-text` | `.str-chat` |
---|
`500 1.25 rem/1.2 var(--str-chat__font-family)` |
| The font used for subtitle texts with emphasize | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss) |
-| `--str-chat__headline-text` | `.str-chat` |
---|
`1.5 rem/1.2 var(--str-chat__font-family)` |
| The font used for headline texts | [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelList/ChannelList-theme.scss) |
-| `--str-chat__headline2-text` | `.str-chat` |
---|
`1.8 rem/1.2 var(--str-chat__font-family)` |
| The font used for headline texts | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss) |
-
-### Radius
-
-| Name | Value(s) | Description | Used in |
-| ---------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__border-radius-xs` | | Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Tooltip/Tooltip-theme.scss) |
-| `--str-chat__border-radius-sm` | | Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Notification/Notification-theme.scss) |
-| `--str-chat__border-radius-md` | | Border radius used for rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) |
-| `--str-chat__border-radius-lg` | | Border radius used for rounded elements | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) |
-| `--str-chat__border-radius-circle` | | Border radius used for circular elements | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/Modal/Modal-theme.scss) |
-
-All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/_global-theme-variables.scss)
-
-## Layout variables
-
-### Spacing
-
-| Name | Value(s) | Description |
-| ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__spacing-px` | | Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements |
-| `--str-chat__spacing-0_5` | | Used for margins and paddings |
-| `--str-chat__spacing-1` | | Used for margins and paddings |
-| `--str-chat__spacing-1_5` | | Used for margins and paddings |
-| `--str-chat__spacing-2` | | Used for margins and paddings |
-| `--str-chat__spacing-2_5` | | Used for margins and paddings |
-| `--str-chat__spacing-3` | | Used for margins and paddings |
-| `--str-chat__spacing-3_5` | | Used for margins and paddings |
-| `--str-chat__spacing-4` | | Used for margins and paddings |
-| `--str-chat__spacing-5` | | Used for margins and paddings |
-| `--str-chat__spacing-6` | | Used for margins and paddings |
-| `--str-chat__spacing-7` | | Used for margins and paddings |
-| `--str-chat__spacing-8` | | Used for margins and paddings |
-| `--str-chat__spacing-9` | | Used for margins and paddings |
-| `--str-chat__spacing-10` | | Used for margins and paddings |
-| `--str-chat__spacing-11` | | Used for margins and paddings |
-| `--str-chat__spacing-12` | | Used for margins and paddings |
-| `--str-chat__spacing-14` | | Used for margins and paddings |
-| `--str-chat__spacing-16` | | Used for margins and paddings |
-
-### Others
-
-| Name | Value(s) | Description |
-| --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- |
-| `--str-chat__theme-version` | | The theme version being used, 1 or 2. Used internally by SDKs |
-
-All global layout variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.17.4/src/v2/styles/_global-layout-variables.scss)
+- **Layout**: spacing (padding and margin) and sizing ([list of global layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/_global-layout-variables.scss))
If you find that these variables are too high-level and you need more granular control, you also have the option to provide [component layer overrides](./component-variables.mdx).
diff --git a/docusaurus/docs/Angular/theming/palette-variables.mdx b/docusaurus/docs/Angular/theming/palette-variables.mdx
index be727092..c80295f7 100644
--- a/docusaurus/docs/Angular/theming/palette-variables.mdx
+++ b/docusaurus/docs/Angular/theming/palette-variables.mdx
@@ -20,56 +20,4 @@ import V2Warning from "./V2Warning";
A color palette is defined inside the library that used to define default values for the [global theme variables](./global-variables.mdx). If you want to work with the default theme but want to adjust the shades (for example, change `blue500` to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at [global theme variables](./global-variables.mdx).
-| Name | Value(s) |
-| ----------------------- | ----------------------------------------------------------------------- |
-| `--str-chat__blue950` | |
-| `--str-chat__blue900` | |
-| `--str-chat__blue800` | |
-| `--str-chat__blue700` | |
-| `--str-chat__blue600` | |
-| `--str-chat__blue500` | |
-| `--str-chat__blue400` | |
-| `--str-chat__blue300` | |
-| `--str-chat__blue200` | |
-| `--str-chat__blue100` | |
-| `--str-chat__blue50` | |
-| `--str-chat__grey950` | |
-| `--str-chat__grey900` | |
-| `--str-chat__grey800` | |
-| `--str-chat__grey700` | |
-| `--str-chat__grey600` | |
-| `--str-chat__grey500` | |
-| `--str-chat__grey400` | |
-| `--str-chat__grey300` | |
-| `--str-chat__grey200` | |
-| `--str-chat__grey100` | |
-| `--str-chat__grey50` | |
-| `--str-chat__red900` | |
-| `--str-chat__red800` | |
-| `--str-chat__red700` | |
-| `--str-chat__red600` | |
-| `--str-chat__red500` | |
-| `--str-chat__red400` | |
-| `--str-chat__red300` | |
-| `--str-chat__red200` | |
-| `--str-chat__red100` | |
-| `--str-chat__green900` | |
-| `--str-chat__green800` | |
-| `--str-chat__green700` | |
-| `--str-chat__green600` | |
-| `--str-chat__green500` | |
-| `--str-chat__green400` | |
-| `--str-chat__green300` | |
-| `--str-chat__green200` | |
-| `--str-chat__green100` | |
-| `--str-chat__yellow900` | |
-| `--str-chat__yellow800` | |
-| `--str-chat__yellow700` | |
-| `--str-chat__yellow600` | |
-| `--str-chat__yellow500` | |
-| `--str-chat__yellow400` | |
-| `--str-chat__yellow300` | |
-| `--str-chat__yellow200` | |
-| `--str-chat__yellow100` | |
-
-Palette variables are defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/\_palette-variables.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss)
+You can find the [list of palette variables on GitHub](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss).
diff --git a/package-lock.json b/package-lock.json
index 47ed6672..d8099356 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
"@ctrl/ngx-emoji-mart": "^8.2.0",
"@floating-ui/dom": "^1.6.3",
"@ngx-translate/core": "^14.0.0",
- "@stream-io/stream-chat-css": "4.17.5",
+ "@stream-io/stream-chat-css": "4.18.0",
"@stream-io/transliterate": "^1.5.2",
"angular-mentions": "1.4.0",
"dayjs": "^1.11.10",
@@ -4967,9 +4967,9 @@
"dev": true
},
"node_modules/@stream-io/stream-chat-css": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-4.17.5.tgz",
- "integrity": "sha512-X84z21htxwkeBSAnR3e0Y8z8WgQQ0cbT6HLJUu5DIN2mfH80yEilZ8uyX6K2wYyekSm3DVwKlnqKRhnk3ynPog=="
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-4.18.0.tgz",
+ "integrity": "sha512-FDTRBbYhIz/VqkGh7XCgvPd5BW7QoUBHTpp95KHP8S48MtA49a1pr8QmtPWAnj1jLz9GiUs+AAwSTvQ8bLVzDA=="
},
"node_modules/@stream-io/transliterate": {
"version": "1.5.2",
@@ -27112,9 +27112,9 @@
"dev": true
},
"@stream-io/stream-chat-css": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-4.17.5.tgz",
- "integrity": "sha512-X84z21htxwkeBSAnR3e0Y8z8WgQQ0cbT6HLJUu5DIN2mfH80yEilZ8uyX6K2wYyekSm3DVwKlnqKRhnk3ynPog=="
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-4.18.0.tgz",
+ "integrity": "sha512-FDTRBbYhIz/VqkGh7XCgvPd5BW7QoUBHTpp95KHP8S48MtA49a1pr8QmtPWAnj1jLz9GiUs+AAwSTvQ8bLVzDA=="
},
"@stream-io/transliterate": {
"version": "1.5.2",
diff --git a/package.json b/package.json
index 2eca2ee0..30b6c4ae 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
"@ctrl/ngx-emoji-mart": "^8.2.0",
"@floating-ui/dom": "^1.6.3",
"@ngx-translate/core": "^14.0.0",
- "@stream-io/stream-chat-css": "4.17.5",
+ "@stream-io/stream-chat-css": "4.18.0",
"@stream-io/transliterate": "^1.5.2",
"angular-mentions": "1.4.0",
"dayjs": "^1.11.10",