diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml index 98814d89..20a7abd5 100644 --- a/.github/workflows/workflow.yml +++ b/.github/workflows/workflow.yml @@ -59,9 +59,9 @@ jobs: STREAM_USER_ID: STREAM_CHANNELS_FILTER: '{"type": "messaging"}' run: > - yarn vercel pull --yes --environment=${{ github.ref == 'refs/heads/v5' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }} && - yarn vercel build ${{ github.ref == 'refs/heads/v5' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }} && - yarn vercel deploy ${{ github.ref == 'refs/heads/v5' && '--prod' || '' }} --prebuilt --token=${{ secrets.VERCEL_TOKEN }} + yarn vercel pull --yes --environment=${{ github.ref == 'refs/heads/master' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }} && + yarn vercel build ${{ github.ref == 'refs/heads/master' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }} && + yarn vercel deploy ${{ github.ref == 'refs/heads/master' && '--prod' || '' }} --prebuilt --token=${{ secrets.VERCEL_TOKEN }} - name: Copy docs from stream-chat-css run: npm run ${{ (github.ref == 'refs/heads/v5' || contains(github.head_ref, 'v5')) && 'copy-css-docs:v5' || 'copy-css-docs' }} - name: Generate docs diff --git a/README.md b/README.md index 9c5f5ebd..6071f570 100644 --- a/README.md +++ b/README.md @@ -57,26 +57,25 @@ Supported Angular versions: **Angular 15-18** Run this command if you are using **Angular 18**: ```shell -// --force is only required until this issue is solved: https://github.com/tonysamperi/ngx-float-ui/issues/26 -npm install stream-chat-angular@beta ngx-float-ui@18 --force +npm install stream-chat-angular ngx-float-ui@beta ``` Run this command if you are using **Angular 17**: ```shell -npm install stream-chat-angular@beta ngx-float-ui@17 +npm install stream-chat-angular ngx-float-ui@17 ``` Run this command if you are using **Angular 16**: ```shell -npm install stream-chat-angular@beta ngx-float-ui@16 +npm install stream-chat-angular ngx-float-ui@16 ``` Run this command if you are using **Angular 15**: ```shell -npm install stream-chat-angular@beta @ngx-translate/core@14 ngx-float-ui@15 +npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15 ``` Supported node verisons: 18+ diff --git a/docusaurus/angular-docusaurus-dontent-docs.plugin.js b/docusaurus/angular-docusaurus-dontent-docs.plugin.js index 046240b0..f2fb15d4 100644 --- a/docusaurus/angular-docusaurus-dontent-docs.plugin.js +++ b/docusaurus/angular-docusaurus-dontent-docs.plugin.js @@ -5,13 +5,13 @@ module.exports = { { lastVersion: "current", versions: { - 5: { - label: "v5 (beta)", - banner: "unreleased", - path: "5", - }, current: { + label: "v5", + }, + 4: { label: "v4", + banner: "unmaintained", + path: "4", }, }, }, diff --git a/docusaurus/angular_versioned_docs/version-5/assets/angular-logo.png b/docusaurus/angular_versioned_docs/version-4/assets/angular-logo.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/angular-logo.png rename to docusaurus/angular_versioned_docs/version-4/assets/angular-logo.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/attachment-preview-list-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/attachment-preview-list-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/attachment-preview-list-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/attachment-preview-list-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/attachment-size-warning.png b/docusaurus/angular_versioned_docs/version-4/assets/attachment-size-warning.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/attachment-size-warning.png rename to docusaurus/angular_versioned_docs/version-4/assets/attachment-size-warning.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/attachments-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/attachments-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/attachments-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/attachments-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/channel-header-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-header-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/channel-header-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/channel-header-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/channel-header-with-menu-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-header-with-menu-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/channel-header-with-menu-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/channel-header-with-menu-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/channel-invites-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-invites-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/channel-invites-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/channel-invites-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-4/assets/channel-preview-info.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-preview-info.png new file mode 100644 index 00000000..21aba239 Binary files /dev/null and b/docusaurus/angular_versioned_docs/version-4/assets/channel-preview-info.png differ diff --git a/docusaurus/angular_versioned_docs/version-4/assets/channel-preview.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-preview.png new file mode 100644 index 00000000..0e695c6b Binary files /dev/null and b/docusaurus/angular_versioned_docs/version-4/assets/channel-preview.png differ diff --git a/docusaurus/angular_versioned_docs/version-5/assets/chat-ui-layout-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/chat-ui-layout-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/chat-ui-layout-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/chat-ui-layout-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/custom-dark-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-dark-theme-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/custom-dark-theme-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/custom-dark-theme-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/custom-light-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-light-theme-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/custom-light-theme-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/custom-light-theme-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/custom-textarea-after.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-after.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/custom-textarea-after.png rename to docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-after.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/custom-textarea-before.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-before.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/custom-textarea-before.png rename to docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-before.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/dark-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/dark-theme-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/dark-theme-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/dark-theme-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/emoji-picker-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/emoji-picker-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/emoji-picker-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/emoji-picker-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/firebase-console-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/firebase-console-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/firebase-console-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/firebase-console-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/image-sizing-screenshot-1.png b/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-1.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/image-sizing-screenshot-1.png rename to docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-1.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/image-sizing-screenshot-2.png b/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-2.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/image-sizing-screenshot-2.png rename to docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-2.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/image-sizing-screenshot-3.png b/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-3.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/image-sizing-screenshot-3.png rename to docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-3.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/invite-button-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/invite-button-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/invite-button-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/invite-button-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/invite-modal1-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/invite-modal1-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/invite-modal1-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/invite-modal1-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/invite-modal2-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/invite-modal2-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/invite-modal2-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/invite-modal2-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/ionic-screenshot1.png b/docusaurus/angular_versioned_docs/version-4/assets/ionic-screenshot1.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/ionic-screenshot1.png rename to docusaurus/angular_versioned_docs/version-4/assets/ionic-screenshot1.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/light-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/light-theme-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/light-theme-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/light-theme-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/mention-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/mention-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/mention-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/mention-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png new file mode 100644 index 00000000..f688bda8 Binary files /dev/null and b/docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png differ diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-bounce-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-bounce-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-bounce-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/message-bounce-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-reactions-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-reactions-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/message-reactions-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png new file mode 100644 index 00000000..82c2a427 Binary files /dev/null and b/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png differ diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/message-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/messages-with-grouping-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/messages-with-grouping-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/messages-with-grouping-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/messages-with-grouping-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/messages-without-groups-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/messages-without-groups-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/messages-without-groups-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/messages-without-groups-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/pin-action-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/pin-action-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/pin-action-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/pin-action-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/pinned-message-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/pinned-message-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/pinned-message-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/pinned-message-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/reaction-details.png b/docusaurus/angular_versioned_docs/version-4/assets/reaction-details.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/reaction-details.png rename to docusaurus/angular_versioned_docs/version-4/assets/reaction-details.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-chat-ui-layout-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-layout-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-chat-ui-layout-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-layout-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-chat-ui-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-chat-ui-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-custom-avatar-color-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-avatar-color-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-custom-avatar-color-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-avatar-color-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-custom-dark-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-dark-theme-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-custom-dark-theme-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-dark-theme-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-dark-ui-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-dark-ui-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-dark-ui-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-dark-ui-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-message-color-customization-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-message-color-customization-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-message-color-customization2-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization2-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-message-color-customization2-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization2-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-message-color-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-message-color-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-rtl-layout-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-rtl-layout-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-rtl-layout-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-rtl-layout-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-square-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-square-theme-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-chat-css-square-theme-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-square-theme-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/stream-logo.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-logo.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/stream-logo.png rename to docusaurus/angular_versioned_docs/version-4/assets/stream-logo.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/voice-recording-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/voice-recording-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/voice-recording-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/voice-recording-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/wavebar-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/wavebar-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/wavebar-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/wavebar-screenshot.png diff --git a/docusaurus/angular_versioned_docs/version-5/basics/_category_.json b/docusaurus/angular_versioned_docs/version-4/basics/_category_.json similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/basics/_category_.json rename to docusaurus/angular_versioned_docs/version-4/basics/_category_.json diff --git a/docusaurus/angular_versioned_docs/version-5/basics/angular-version-support.mdx b/docusaurus/angular_versioned_docs/version-4/basics/angular-version-support.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/basics/angular-version-support.mdx rename to docusaurus/angular_versioned_docs/version-4/basics/angular-version-support.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/basics/overview.mdx b/docusaurus/angular_versioned_docs/version-4/basics/overview.mdx similarity index 72% rename from docusaurus/angular_versioned_docs/version-5/basics/overview.mdx rename to docusaurus/angular_versioned_docs/version-4/basics/overview.mdx index 7d5ee883..4ec2aac9 100644 --- a/docusaurus/angular_versioned_docs/version-5/basics/overview.mdx +++ b/docusaurus/angular_versioned_docs/version-4/basics/overview.mdx @@ -30,33 +30,30 @@ We recommend using the component library through a package manager. Stream Chat ### Install with NPM -Run this command if you are using **Angular 18**: +Run the following command if you are using **Angular 16** or **Angular 15**: ```shell -// --force is only required until this issue is solved: https://github.com/tonysamperi/ngx-float-ui/issues/26 -npm install stream-chat-angular@beta ngx-float-ui@18 --force +npm install stream-chat-angular stream-chat @ngx-translate/core ``` -Run this command if you are using **Angular 17**: +Run the following command if you are using **Angular 14**: ```shell -npm install stream-chat-angular@beta ngx-float-ui@17 +npm install stream-chat-angular stream-chat @ngx-translate/core ngx-popperjs@14 ``` -Run this command if you are using **Angular 16**: +Run the following command if you are using **Angular 13**: ```shell -npm install stream-chat-angular@beta ngx-float-ui@16 +npm install stream-chat-angular stream-chat @ngx-translate/core angular-mentions@1.4.0 ngx-popperjs@13 --legacy-peer-deps ``` -Run this command if you are using **Angular 15**: +Run this command if you are using **Angular 12**: ```shell -npm install stream-chat-angular@beta @ngx-translate/core@14 ngx-float-ui@15 +npm install stream-chat-angular stream-chat @ngx-translate/core angular-mentions@1.4.0 ngx-popperjs@12 --legacy-peer-deps ``` -Supported node verisons: 18+ - ## Tutorial Follow our [tutorial](https://getstream.io/chat/angular/tutorial/) and build your first Stream Angular chat application. diff --git a/docusaurus/angular_versioned_docs/version-5/basics/upgrade-v2.mdx b/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v2.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/basics/upgrade-v2.mdx rename to docusaurus/angular_versioned_docs/version-4/basics/upgrade-v2.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/basics/upgrade-v3.mdx b/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v3.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/basics/upgrade-v3.mdx rename to docusaurus/angular_versioned_docs/version-4/basics/upgrade-v3.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/_category_.json b/docusaurus/angular_versioned_docs/version-4/code-examples/_category_.json similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/code-examples/_category_.json rename to docusaurus/angular_versioned_docs/version-4/code-examples/_category_.json diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/channel-invites.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx similarity index 95% rename from docusaurus/angular_versioned_docs/version-5/code-examples/channel-invites.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx index 137cf5b5..d77d5ce7 100644 --- a/docusaurus/angular_versioned_docs/version-5/code-examples/channel-invites.mdx +++ b/docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx @@ -459,26 +459,19 @@ It's important to note that the filtering set above is not applied to [events](h To override the default behavior create a custom event handler in `app.component.ts` that checks if the user was invited to the channel or added directly and only adds the channel to the list if the user was added directly: ```typescript -private async customAddedToChannelNotificationHandler( - clientEvent: ClientEvent, - channelListSetter: (channels: Channel[]) => void -) { - if (clientEvent.event.member?.invited) { - return; - } - const channelResponse = clientEvent!.event!.channel!; - const newChanel = this.chatService.chatClient.channel( - channelResponse.type, - channelResponse.id - ); - try { - await newChanel.watch(); - const existingChannels = this.channelService.channels; - channelListSetter([newChanel, ...existingChannels]); - } catch (error) { - console.error('Failed to watch channel', error); +private customAddedToChannelNotificationHandler( + clientEvent: ClientEvent, + channelListSetter: (channels: (Channel | ChannelResponse)[]) => void + ): void { + let channels!: Channel[]; + this.channelService.channels$ + .pipe(take(1)) + .subscribe((c) => (channels = c || [])); + if (clientEvent.event.member?.invited) { + return; + } + channelListSetter([clientEvent!.event!.channel!, ...channels]); } -} ``` Now register the handler to the [channel service](../services/ChannelService.mdx) in the constructor of `app.component.ts`: @@ -504,5 +497,3 @@ this.chatService.events$ }); }); ``` - -If you're doing this in a component other than `AppComponent`, don't forget to unsubscribe from the `events$` Observable. diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/custom-textarea.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/custom-textarea.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/code-examples/custom-textarea.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/custom-textarea.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/emoji-picker.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/emoji-picker.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/code-examples/emoji-picker.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/emoji-picker.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/ionic-guide.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/ionic-guide.mdx similarity index 98% rename from docusaurus/angular_versioned_docs/version-5/code-examples/ionic-guide.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/ionic-guide.mdx index f3a997d4..9f6799ce 100644 --- a/docusaurus/angular_versioned_docs/version-5/code-examples/ionic-guide.mdx +++ b/docusaurus/angular_versioned_docs/version-4/code-examples/ionic-guide.mdx @@ -52,7 +52,7 @@ Add this to your `tsconfig.json` file to the `compilerOptions` part: Import CSS in your `global.scss` file: ``` -@import "~stream-chat-angular/src/assets/styles/scss/index.scss"; +@import "~stream-chat-angular/src/assets/styles/v2/scss/index.scss"; ``` Add the module imports required by `stream-chat-angular` to the `app.module.ts` file: diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/mention-actions.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/mention-actions.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/code-examples/mention-actions.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/mention-actions.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/pin-messages.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/pin-messages.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/code-examples/pin-messages.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/pin-messages.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/push-guide.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/push-guide.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/code-examples/push-guide.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/push-guide.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/responsive-layout.mdx similarity index 96% rename from docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx rename to docusaurus/angular_versioned_docs/version-4/code-examples/responsive-layout.mdx index 3d282df7..ae6ae435 100644 --- a/docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx +++ b/docusaurus/angular_versioned_docs/version-4/code-examples/responsive-layout.mdx @@ -6,6 +6,10 @@ title: Responsive layout import ChatUILayoutScreenshot from "../assets/chat-ui-layout-screenshot.png"; import ChannelHeaderWithMenu from "../assets/channel-header-with-menu-screenshot.png"; +:::caution +This example is only applicable if you're using [theme-v2](../theming/introduction.mdx). +::: + Our SDK gives you maximum control over the layout of your chat application. This tutorial shows you a simple example of creating a layout. ## Channel list, channel, and thread layout @@ -75,7 +79,7 @@ Let's start with the thread component: width: 100%; height: 100%; position: fixed; - z-index: 3; + z-index: 2; } @media screen and (min-width: 768px) { @@ -176,7 +180,7 @@ Provide the layout based on the menu state and hide the menu on bigger screens: width: 100%; height: 100%; position: fixed; - z-index: 3; + z-index: 2; } @media screen and (min-width: 768px) { diff --git a/docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx similarity index 78% rename from docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx index b5f18a6f..a6b82eda 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx @@ -66,7 +66,7 @@ The following section details how the width and height of images and videos uplo #### Maximum size -You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable. The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel). +You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel). If you set an invalid value to the variable, you'll see a warning on the browser's console: @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39) +[lib/attachment-list/attachment-list.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40) --- @@ -134,30 +134,30 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43) +[lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44) --- ### attachments -• **attachments**: `Attachment`\<`DefaultStreamChatGenerics`\>[] = `[]` +• **attachments**: `Attachment`<`DefaultStreamChatGenerics`\>[] = `[]` 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47) +[lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48) --- ### imageModalStateChange -• `Readonly` **imageModalStateChange**: `EventEmitter`\<`"closed"` \| `"opened"`\> +• `Readonly` **imageModalStateChange**: `EventEmitter`<`"opened"` \| `"closed"`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51) +[lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx similarity index 60% rename from docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx index 47aeeaac..8f91f3b4 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx @@ -41,36 +41,36 @@ You can provide your own attachment preview list component by the [`CustomTempla ### attachmentUploads$ -• **attachmentUploads$**: `undefined` \| `Observable`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> +• **attachmentUploads$**: `undefined` \| `Observable`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17) +[lib/attachment-preview-list/attachment-preview-list.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L18) --- ### retryAttachmentUpload -• `Readonly` **retryAttachmentUpload**: `EventEmitter`\<`File`\> +• `Readonly` **retryAttachmentUpload**: `EventEmitter`<`File`\> An output to notify the parent component if the user tries to retry a failed upload #### 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21) +[lib/attachment-preview-list/attachment-preview-list.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L22) --- ### deleteAttachment -• `Readonly` **deleteAttachment**: `EventEmitter`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>\> +• `Readonly` **deleteAttachment**: `EventEmitter`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25) +[lib/attachment-preview-list/attachment-preview-list.component.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L26) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AutocompleteTextareaComponent.mdx similarity index 51% rename from docusaurus/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AutocompleteTextareaComponent.mdx index f342bee1..18f47273 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53) --- @@ -83,13 +83,13 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57) --- ### inputMode -• **inputMode**: `"mobile"` \| `"desktop"` +• **inputMode**: `"desktop"` \| `"mobile"` See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65) --- @@ -131,13 +131,13 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69) --- ### valueChange -• `Readonly` **valueChange**: `EventEmitter`\<`string`\> +• `Readonly` **valueChange**: `EventEmitter`<`string`\> Emits the current value of the input element when a user types. @@ -147,13 +147,13 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73) --- ### send -• `Readonly` **send**: `EventEmitter`\<`void`\> +• `Readonly` **send**: `EventEmitter`<`void`\> Emits when a user triggers a message send event (this happens when they hit the `Enter` key). @@ -163,13 +163,13 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77) --- ### userMentions -• `Readonly` **userMentions**: `EventEmitter`\<`UserResponse`\<`DefaultGenerics`\>[]\> +• `Readonly` **userMentions**: `EventEmitter`<`UserResponse`<`DefaultGenerics`\>[]\> Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention. @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81) +[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AvatarComponent.mdx similarity index 62% rename from docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AvatarComponent.mdx index e8396bdd..7284b013 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/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:35](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35) +[lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35) --- @@ -83,7 +83,19 @@ 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:39](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39) +[lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39) + +--- + +### size + +• **size**: `number` = `32` + +The size in pixels of the avatar image. + +#### Defined in + +[lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43) --- @@ -95,31 +107,31 @@ The location the avatar will be displayed in #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43) +[lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47) --- ### channel -• `Optional` **channel**: `Channel`\<`DefaultStreamChatGenerics`\> +• `Optional` **channel**: `Channel`<`DefaultStreamChatGenerics`\> 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:47](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47) +[lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51) --- ### user -• `Optional` **user**: `User`\<`DefaultStreamChatGenerics`\> +• `Optional` **user**: `User`<`DefaultStreamChatGenerics`\> 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:51](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51) +[lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55) --- @@ -131,7 +143,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:55](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55) +[lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59) --- @@ -143,7 +155,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:59](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59) +[lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63) --- @@ -155,6 +167,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:63](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63) +[lib/avatar/avatar.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L67) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx new file mode 100644 index 00000000..45bf3f1f --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx @@ -0,0 +1,113 @@ +The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. + +[//]: # "Start of generated content" + +## Inputs and outputs + +### name + +• **name**: `undefined` \| `string` + +An optional name of the image, used for fallback image or image title (if `imageUrl` is provided) + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23) + +--- + +### imageUrl + +• **imageUrl**: `undefined` \| `string` + +The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed. + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27) + +--- + +### size + +• **size**: `number` = `32` + +The size in pixels of the avatar image. + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31) + +--- + +### location + +• **location**: `undefined` \| `AvatarLocation` + +The location the avatar will be displayed in + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35) + +--- + +### channel + +• `Optional` **channel**: `Channel`<`DefaultStreamChatGenerics`\> + +The channel the avatar belongs to (if avatar of a channel is displayed) + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39) + +--- + +### user + +• `Optional` **user**: `User`<`DefaultStreamChatGenerics`\> + +The user the avatar belongs to (if avatar of a user is displayed) + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43) + +--- + +### type + +• **type**: `undefined` \| `AvatarType` + +The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47) + +--- + +### initialsType + +• **initialsType**: `"first-letter-of-first-word"` \| `"first-letter-of-each-word"` = `'first-letter-of-first-word'` + +If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L51) + +--- + +### showOnlineIndicator + +• **showOnlineIndicator**: `boolean` = `true` + +If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior. + +#### Defined in + +[lib/avatar-placeholder/avatar-placeholder.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L57) + +[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/ChannelComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelComponent.mdx similarity index 77% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelComponent.mdx index b9367aa2..2ae29307 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/ChannelComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/ChannelComponent.mdx @@ -1,4 +1,4 @@ -The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`MessageBouncePrompt`](./MessageBouncePromptComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript). +The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`EditMessageForm`](./EditMessageFormComponent.mdx), [`MessageBouncePrompt`](./MessageBouncePromptComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript). ## Usage diff --git a/docusaurus/angular_versioned_docs/version-5/components/ChannelHeaderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx similarity index 55% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelHeaderComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx index e20dbd02..3e8211f4 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/ChannelHeaderComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx @@ -6,25 +6,44 @@ The `ChannelHeader` component displays the avatar and name of the currently acti -## Basic usage - -```html - - - -``` - ## Customization -### Channel information +If you create your own channel header, you can use the [`ChannelService`](../services/ChannelService.mdx) to access the currently active channel. Please note that, the default channel header also contains the menu button to [toggle the channel list](../services/ChannelListToggleService.mdx). Here is a simple implementation of a custom channel header to guide you: + +```typescript +@Component({ + selector: "custom-channel-header", + template: ` + + {{ activeChannel?.data?.name }} + `, + styles: [], +}) +export class ChannelHeaderComponent { + activeChannel: Channel | undefined; + + constructor( + private channelService: ChannelService, + private channelListToggleService: ChannelListToggleService + ) { + this.channelService.activeChannel$.subscribe( + (c) => (this.activeChannel = c) + ); + } + + toggleMenu() { + this.channelListToggleService.toggle(); + } +} +``` -You can provide your own template for displaying channel information using the [`CustomTemplatesService`](../services/CustomTemplatesService/#channelheaderinfotemplate) +If you want to create your own channel component check out our [customization guide](../concepts/customization.mdx) for more information. -### Channel actions +## Channel actions By default no channel action is displayed, but it's possible to [add action buttons to the channel header](../services/CustomTemplatesService.mdx/#channelactionstemplate) component. You can follow our [code example](../code-examples/channel-invites.mdx) that implements the invite action (you can implement other kind of actions as well, for example edit). -### Menu button +## Menu button You can provide a menu button template to the channel header, the [responsive layout guide](../code-examples/responsive-layout.mdx) shows how you can use this to toggle the channel list on mobile screens. diff --git a/docusaurus/angular_versioned_docs/version-5/components/ChannelListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx similarity index 62% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx index 13e71fef..50a424fa 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/ChannelListComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx @@ -1,21 +1,33 @@ -import ChannelList from "../assets/channel-list.png"; - The `ChannelList` component renders the list of channels. The `ChannelList` displays channels using pagination, new channels are loaded if the user clicks the "Load more" button. The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the [`ChannelHeader`](./ChannelHeaderComponent.mdx) component. - - ## Customization -### UI customization - **Example 1** - Using a custom channel list component See our [customization guide](../concepts/customization.mdx) on how to provide your own channel list component. +:::note +If you want to create your own channel list, you can use the [`ChannelService`](../services/ChannelService.mdx) to receive the channels and interact with the Stream API. + +Other building blocks, that you might find useful: + +### Toggle + +The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the `ChannelHeader` component. The open/close mechanism is implemented by the [`ChannelListToggleService`](../services/ChannelListToggleService.mdx). + +### Loading indicator + +The `ChannelList` component uses the [`LoadingIndicator`](./LoadingIndicatorComponent.mdx) component to display a spinner while more channels are being fetched. + +### Icons + +The `ChannelList` component uses the [`Icon`](./IconComponent.mdx) component to display icons. +::: + **Example 2** - Using a custom channel preview component If you only want to customize the channel preview items (not the whole list), see the [channel preview customization](./ChannelPreviewComponent.mdx/#customization) guide. @@ -33,9 +45,5 @@ It's possible to inject your own content to the top or to the bottom of the chan Use the `channel-list-top` attribute to inject content at the top of the channel list, and the `channel-list-bottom` to display content at the bottom of the channel list. -### Behavior customization - -Please refer to the [channel list guide](../../concepts/channel-list/) - [//]: # "Start of generated content" [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/ChannelPreviewComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx similarity index 83% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelPreviewComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx index 65b7d13e..aa9b2a73 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/ChannelPreviewComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx @@ -31,12 +31,12 @@ The `ChannelPreview` component is displayed inside the built-in [channel list co ### channel -• **channel**: `undefined` \| `Channel`\<`DefaultStreamChatGenerics`\> +• **channel**: `undefined` \| `Channel`<`DefaultStreamChatGenerics`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28) +[lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/EditMessageFormComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/EditMessageFormComponent.mdx similarity index 100% rename from docusaurus/docs/Angular/components/EditMessageFormComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/EditMessageFormComponent.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/components/IconComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx similarity index 61% rename from docusaurus/angular_versioned_docs/version-5/components/IconComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx index 8dfee627..dad666b5 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/IconComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx @@ -19,7 +19,7 @@ export class CustomMessageComponent { ## Customization -Please refer to the [theming docs](../../theming/themingv2/#custom-icons) +You can provide your own icon component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx) [//]: # "Start of generated content" @@ -33,6 +33,18 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L37) +[lib/icon/icon.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L43) + +--- + +### size + +• **size**: `undefined` \| `number` + +The size of the icon (in pixels) + +#### Defined in + +[lib/icon/icon.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L47) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/IconPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx similarity index 53% rename from docusaurus/angular_versioned_docs/version-5/components/IconPlaceholderComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx index 88ea72eb..56698fa8 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/IconPlaceholderComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx @@ -12,6 +12,18 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18) +[lib/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18) + +--- + +### size + +• **size**: `undefined` \| `number` + +The size of the icon (in pixels) + +#### Defined in + +[lib/icon-placeholder/icon-placeholder.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L22) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx similarity index 56% rename from docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx index b5045a7d..87271456 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx @@ -25,4 +25,29 @@ export class CustomMessageComponent { You can provide your own loading indicator component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx) [//]: # "Start of generated content" + +## Inputs and outputs + +### size + +• **size**: `number` = `15` + +The size of the indicator (in pixels) + +#### Defined in + +[lib/loading-indicator/loading-indicator.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L16) + +--- + +### color + +• **color**: `string` + +The color of the indicator + +#### Defined in + +[lib/loading-indicator/loading-indicator.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L21) + [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx new file mode 100644 index 00000000..f68fc87c --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx @@ -0,0 +1,29 @@ +The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. + +[//]: # "Start of generated content" + +## Inputs and outputs + +### size + +• **size**: `number` = `15` + +The size of the indicator (in pixels) + +#### Defined in + +[lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L17) + +--- + +### color + +• **color**: `string` + +The color of the indicator + +#### Defined in + +[lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L22) + +[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx new file mode 100644 index 00000000..8851eac7 --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx @@ -0,0 +1,137 @@ +import MessageActionsScreenshot from "../assets/message-actions-screenshot.png"; + +The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide. + +**Example 1** - example message actions with the message component: + + + +## Basic usage + +A typical use case for the `MessageActionsBox` component would be to use in your custom components that will completely override the message component. + +```typescript +@Component({ + selector: "app-custom-message", + template: ` + + + `, +}) +export class CustomMessageComponent { + @Input() message: StreamMessage; + isActionBoxOpen: boolean; + isMessageSentByCurrentUser: boolean; +} +``` + +## Customization + +- You can provide your own message actions box component (or just a template for the items) by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx). +- You can extend the built-in actions with custom actions, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactions) +- You can also provide a custom event handler method to be called when the message actions button is clicked, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactionclickhandler) + +[//]: # "Start of generated content" + +## Inputs and outputs + +### isOpen + +• **isOpen**: `boolean` = `false` + +Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility. + +**`deprecated`** No need for this since [theme-v2](../theming/introduction.mdx) + +#### Defined in + +[lib/message-actions-box/message-actions-box.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L39) + +--- + +### isMine + +• **isMine**: `boolean` = `false` + +Indicates if the message actions are belonging to a message that was sent by the current user or not. + +#### Defined in + +[lib/message-actions-box/message-actions-box.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L43) + +--- + +### message + +• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> + +The message the actions will be executed on + +#### Defined in + +[lib/message-actions-box/message-actions-box.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L47) + +--- + +### enabledActions + +• **enabledActions**: `string`[] = `[]` + +The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. + +#### Defined in + +[lib/message-actions-box/message-actions-box.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L51) + +--- + +### customActions + +• **customActions**: `CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[] = `[]` + +A list of custom message actions to be displayed in the action box + +In the next major release this will be released with `messageReactionsService.customActions$` + +More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService + +#### Defined in + +[lib/message-actions-box/message-actions-box.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L59) + +--- + +### displayedActionsCount + +• `Readonly` **displayedActionsCount**: `EventEmitter`<`number`\> + +The number of authorized actions (it can be less or equal than the number of enabled actions) + +**`deprecated`** components should use `messageReactionsService.getAuthorizedMessageActionsCount` method + +More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService + +#### Defined in + +[lib/message-actions-box/message-actions-box.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L67) + +--- + +### isEditing + +• `Readonly` **isEditing**: `EventEmitter`<`boolean`\> + +An event which emits `true` if the edit message modal is open, and `false` when it is closed. + +**`deprecated`** components should use `messageReactionsService.messageToEdit$` Observable + +More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService + +#### Defined in + +[lib/message-actions-box/message-actions-box.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L75) + +[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/MessageBouncePromptComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageBouncePromptComponent.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/components/MessageBouncePromptComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageBouncePromptComponent.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/components/MessageComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx similarity index 70% rename from docusaurus/angular_versioned_docs/version-5/components/MessageComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx index 786c5983..4592bb3a 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx @@ -67,13 +67,13 @@ You can add interactions to mentions inside a message, follow our [mention actio ### message -• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> +• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message/message.component.ts#L64) +[lib/message/message.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L67) --- @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message/message.component.ts#L68) +[lib/message/message.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L71) --- @@ -97,19 +97,19 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message/message.component.ts#L72) +[lib/message/message.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L75) --- ### mode -• **mode**: `"main"` \| `"thread"` = `'main'` +• **mode**: `"thread"` \| `"main"` = `'main'` Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript). #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message/message.component.ts#L76) +[lib/message/message.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L79) --- @@ -121,18 +121,20 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message/message.component.ts#L80) +[lib/message/message.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L83) --- -### scroll$ +### customActions -• `Optional` **scroll$**: `Observable`\<`void`\> +• **customActions**: `CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[] = `[]` -An Observable that emits when the message list is scrolled, it's used to prevent opening the message menu while scroll is in progress +A list of custom message actions to be displayed in the action box + +**`deprecated`** please use the [`MessageActionsService`](https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService) to set this property. #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message/message.component.ts#L84) +[lib/message/message.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L89) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/MessageInputComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx similarity index 52% rename from docusaurus/angular_versioned_docs/version-5/components/MessageInputComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx index 7f655439..4146b236 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageInputComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx @@ -14,6 +14,7 @@ If you want to provide your own message input component you'll have to provide i - Replace the default message input inside the [channel](./ChannelComponent.mdx) - Replace the default message input inside the [thread](./ThreadComponent.mdx) +- Provide your own [messageInputTemplate$](../services/CustomTemplatesService.mdx/#messageinputtemplate) to the `CustomTemplatesService` You can replace the textarea inside the message input following our [Custom textarea guide](../../code-examples/custom-textarea) @@ -59,7 +60,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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L59) +[lib/message-input/message-input.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L61) --- @@ -71,7 +72,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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L63) +[lib/message-input/message-input.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L65) --- @@ -83,19 +84,19 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L67) +[lib/message-input/message-input.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L69) --- ### mode -• **mode**: `"main"` \| `"thread"` = `'main'` +• **mode**: `"thread"` \| `"main"` = `'main'` Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript). #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L71) +[lib/message-input/message-input.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L73) --- @@ -107,43 +108,43 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L75) +[lib/message-input/message-input.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L77) --- ### message -• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> +• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L79) +[lib/message-input/message-input.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L81) --- ### sendMessage$ -• **sendMessage$**: `undefined` \| `Observable`\<`void`\> +• **sendMessage$**: `undefined` \| `Observable`<`void`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L83) +[lib/message-input/message-input.component.ts:85](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L85) --- ### inputMode -• **inputMode**: `"mobile"` \| `"desktop"` +• **inputMode**: `"desktop"` \| `"mobile"` In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx). #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L87) +[lib/message-input/message-input.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L89) --- @@ -155,44 +156,18 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L91) - ---- - -### watchForMessageToEdit - -• **watchForMessageToEdit**: `boolean` = `true` - -By default the input will react to changes in `messageToEdit$` from [`MessageActionsService`](../services/MessageActionsService.mdx) and display the message to be edited (taking into account the current `mode`). - -If you don't need that behavior, you can turn this of with this flag. In that case you should create your own edit message UI. - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97) - ---- - -### displaySendButton - -• **displaySendButton**: `boolean` = `true` - -Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input. - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:101](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L101) +[lib/message-input/message-input.component.ts:93](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L93) --- ### messageUpdate -• `Readonly` **messageUpdate**: `EventEmitter`\<\{ `message`: `StreamMessage`\<`DefaultStreamChatGenerics`\> }\> +• `Readonly` **messageUpdate**: `EventEmitter`<{}\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L105) +[lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/MessageListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx similarity index 55% rename from docusaurus/angular_versioned_docs/version-5/components/MessageListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx index e650ea7b..6c3098d9 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageListComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx @@ -27,13 +27,13 @@ The message list contains a lot of low-level logic related to scrolling, we don' ### mode -• **mode**: `"main"` \| `"thread"` = `'main'` +• **mode**: `"thread"` \| `"main"` = `'main'` Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript). #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L53) +[lib/message-list/message-list.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L55) --- @@ -45,7 +45,19 @@ 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:57](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L57) +[lib/message-list/message-list.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L59) + +--- + +### messageOptionsTrigger + +• **messageOptionsTrigger**: `"message-row"` \| `"message-bubble"` = `'message-row'` + +Determines what triggers the appearance of the message options: by default you can hover (click on mobile) anywhere in the row of the message (`message-row` option), or you can set `message-bubble`, in that case only a hover (click on mobile) in the message bubble will trigger the options to appear. + +#### Defined in + +[lib/message-list/message-list.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L63) --- @@ -57,7 +69,21 @@ 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:62](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L62) +[lib/message-list/message-list.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L69) + +--- + +### customMessageActions + +• **customMessageActions**: `CustomMessageActionItem`<`any`\>[] = `[]` + +A list of custom message actions to be displayed in the message action box + +**`deprecated`** please use the [`MessageActionsService`](https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService) to set this property. + +#### Defined in + +[lib/message-list/message-list.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L75) --- @@ -69,7 +95,7 @@ If `true` date separators will be displayed #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:66](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L66) +[lib/message-list/message-list.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L79) --- @@ -81,19 +107,19 @@ If `true` unread indicator will be displayed #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:70](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L70) +[lib/message-list/message-list.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L83) --- ### dateSeparatorTextPos -• **dateSeparatorTextPos**: `"center"` \| `"left"` \| `"right"` = `'center'` +• **dateSeparatorTextPos**: `"center"` \| `"right"` \| `"left"` = `'center'` If date separators are displayed, you can set the horizontal position of the date text. #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:74](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L74) +[lib/message-list/message-list.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L87) --- @@ -105,7 +131,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:78](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L78) +[lib/message-list/message-list.component.ts:91](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L91) --- @@ -119,7 +145,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:85](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L85) +[lib/message-list/message-list.component.ts:98](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L98) --- @@ -131,16 +157,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:89](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L89) - ---- - -### limitNumberOfMessagesInList - -• **limitNumberOfMessagesInList**: `boolean` = `true` - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:93](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L93) +[lib/message-list/message-list.component.ts:102](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L102) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx new file mode 100644 index 00000000..a2378fa4 --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx @@ -0,0 +1,125 @@ +import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png"; +import MessageReactionsDetailsScreenshot from "../assets/reaction-details.png"; +import MessageReactionsSelectorScreenshot from "../assets/message-reactions-selector-screenshot.png"; + +The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation. + +**Example 1** - displaying reactions of a message: + + + +**Example 2** - displaying the reacting users - only visible if a message has at maximum 1200 reactions: + + + +**Example 3** - adding/removing a reaction: + + + +## Basic usage + +A typical use case for the `MessageReactions` component would be to use in your custom components that will completely override the message component. + +```typescript +@Component({ + selector: "app-custom-message", + template: ` + + + `, +}) +export class CustomMessageComponent { + @Input() message: StreamMessage; + isReactionSelectorOpen: boolean; +} +``` + +## Customization + +You can override the default reactions using the [`MessageReactionsService`](../services/MessageReactionsService.mdx). + +You can provide your own UI for the reaction details using the [`MessageReactionsService`](../services/MessageReactionsService.mdx). + +You can provide your own message reactions component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx). + +[//]: # "Start of generated content" + +## Inputs and outputs + +### messageId + +• **messageId**: `undefined` \| `string` + +The id of the message the reactions belong to + +#### Defined in + +[lib/message-reactions/message-reactions.component.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L38) + +--- + +### messageReactionCounts + +• **messageReactionCounts**: `Object` = `{}` + +The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts) + +#### Defined in + +[lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42) + +--- + +### isSelectorOpen + +• **isSelectorOpen**: `boolean` = `false` + +Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility. + +#### Defined in + +[lib/message-reactions/message-reactions.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L47) + +--- + +### latestReactions + +• **latestReactions**: `ReactionResponse`<`DefaultStreamChatGenerics`\>[] = `[]` + +List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type. + +#### Defined in + +[lib/message-reactions/message-reactions.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L51) + +--- + +### ownReactions + +• **ownReactions**: `ReactionResponse`<`DefaultStreamChatGenerics`\>[] = `[]` + +List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type. + +#### Defined in + +[lib/message-reactions/message-reactions.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L55) + +--- + +### isSelectorOpenChange + +• `Readonly` **isSelectorOpenChange**: `EventEmitter`<`boolean`\> + +Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility. + +#### Defined in + +[lib/message-reactions/message-reactions.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L59) + +[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/ModalComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx similarity index 56% rename from docusaurus/angular_versioned_docs/version-5/components/ModalComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx index ab04d8b9..d5b55c89 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/ModalComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx @@ -28,30 +28,30 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25) +[lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25) --- ### content -• **content**: `undefined` \| `TemplateRef`\<`void`\> +• **content**: `undefined` \| `TemplateRef`<`void`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29) +[lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29) --- ### isOpenChange -• `Readonly` **isOpenChange**: `EventEmitter`\<`boolean`\> +• `Readonly` **isOpenChange**: `EventEmitter`<`boolean`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33) +[lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/NotificationComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx similarity index 54% rename from docusaurus/angular_versioned_docs/version-5/components/NotificationComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx index 07321006..c13b6cd7 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/NotificationComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx @@ -24,18 +24,18 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16) +[lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16) --- ### content -• **content**: `undefined` \| `TemplateRef`\<`void`\> +• **content**: `undefined` \| `TemplateRef`<`void`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20) +[lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/NotificationListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/NotificationListComponent.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/components/NotificationListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/NotificationListComponent.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/components/TextareaComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/TextareaComponent.mdx similarity index 55% rename from docusaurus/angular_versioned_docs/version-5/components/TextareaComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/TextareaComponent.mdx index e9c6edfa..a53cf29e 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/TextareaComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35) +[lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35) --- @@ -64,13 +64,13 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39) +[lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39) --- ### inputMode -• **inputMode**: `"mobile"` \| `"desktop"` +• **inputMode**: `"desktop"` \| `"mobile"` See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43) +[lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43) --- @@ -96,13 +96,13 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47) +[lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47) --- ### valueChange -• `Readonly` **valueChange**: `EventEmitter`\<`string`\> +• `Readonly` **valueChange**: `EventEmitter`<`string`\> Emits the current value of the input element when a user types. @@ -112,13 +112,13 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51) +[lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51) --- ### send -• `Readonly` **send**: `EventEmitter`\<`void`\> +• `Readonly` **send**: `EventEmitter`<`void`\> Emits when a user triggers a message send event (this happens when they hit the `Enter` key). @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55) +[lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/ThreadComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ThreadComponent.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/components/ThreadComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ThreadComponent.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx similarity index 90% rename from docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx index 0ff0cfa5..54e6d9c2 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx @@ -76,12 +76,12 @@ An example voice recording attachment: ### attachment -• `Optional` **attachment**: `Attachment`\<`DefaultStreamChatGenerics`\> +• `Optional` **attachment**: `Attachment`<`DefaultStreamChatGenerics`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L28) +[lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L28) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingWavebarComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingWavebarComponent.mdx similarity index 57% rename from docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingWavebarComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingWavebarComponent.mdx index bcfb07d0..0a3679db 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingWavebarComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L28) +[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L32) +[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L36) +[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/angular_versioned_docs/version-5/components/_category_.json b/docusaurus/angular_versioned_docs/version-4/components/_category_.json similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/components/_category_.json rename to docusaurus/angular_versioned_docs/version-4/components/_category_.json diff --git a/docusaurus/angular_versioned_docs/version-5/concepts/_category_.json b/docusaurus/angular_versioned_docs/version-4/concepts/_category_.json similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/_category_.json rename to docusaurus/angular_versioned_docs/version-4/concepts/_category_.json diff --git a/docusaurus/angular_versioned_docs/version-5/concepts/change-detection.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/change-detection.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/change-detection.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/change-detection.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/concepts/customization.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/customization.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/customization.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/customization.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/concepts/generics.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/generics.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/generics.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/generics.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/concepts/message-interactions.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/message-interactions.mdx similarity index 80% rename from docusaurus/angular_versioned_docs/version-5/concepts/message-interactions.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/message-interactions.mdx index 812c9aac..825599dd 100644 --- a/docusaurus/angular_versioned_docs/version-5/concepts/message-interactions.mdx +++ b/docusaurus/angular_versioned_docs/version-4/concepts/message-interactions.mdx @@ -6,15 +6,15 @@ title: Message interactions Users can interact with the messages in the message list. The following table provides a list of possible interactions together with the [necessary capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) and the corresponding components: -| Description | Necessary channel capability | Component | -| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------- | -| [Flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) the given message | flag-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Edits a message that belongs to the user | update-own-message or update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Edits any message | update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Deletes a message that belongs to the user | delete-own-message or delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Deletes any message | delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Send reaction to a message | send-reaction | [`MessageReactionsSelector`](../components/MessageReactionsSelectorComponent.mdx) | -| Receive read events | read-events | [`Message`](../components/MessageComponent.mdx) | -| Reply to a message in a thread | send-reply | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Quote reply to a message | quote-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Mark a message as unread | read-events | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Description | Necessary channel capability | Component | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------- | +| [Flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) the given message | flag-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Edits a message that belongs to the user | update-own-message or update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Edits any message | update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Deletes a message that belongs to the user | delete-own-message or delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Deletes any message | delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Send reaction to a message | send-reaction | [`MessageReactions`](../components/MessageReactionsComponent.mdx) | +| Receive read events | read-events | [`Message`](../components/MessageComponent.mdx) | +| Reply to a message in a thread | send-reply | [`Message`](../components/MessageComponent.mdx) | +| Quote reply to a message | quote-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Mark a message as unread | read-events | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | diff --git a/docusaurus/angular_versioned_docs/version-5/concepts/opt-in-architecture.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/opt-in-architecture.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/opt-in-architecture.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/opt-in-architecture.mdx diff --git a/docusaurus/docs/Angular/concepts/theming-and-css.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/theming-and-css.mdx similarity index 100% rename from docusaurus/docs/Angular/concepts/theming-and-css.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/theming-and-css.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/concepts/translation.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/translation.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/translation.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/translation.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/services/AttachmentConfigurationService.mdx b/docusaurus/angular_versioned_docs/version-4/services/AttachmentConfigurationService.mdx similarity index 60% rename from docusaurus/angular_versioned_docs/version-5/services/AttachmentConfigurationService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/AttachmentConfigurationService.mdx index fd80524b..f6056c43 100644 --- a/docusaurus/angular_versioned_docs/version-5/services/AttachmentConfigurationService.mdx +++ b/docusaurus/angular_versioned_docs/version-4/services/AttachmentConfigurationService.mdx @@ -12,19 +12,19 @@ The `AttachmentConfigurationService` provides customization for certain attribut ### customGiphyAttachmentConfigurationHandler -• `Optional` **customGiphyAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>) => `AttachmentConfigration` - -A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. +• `Optional` **customGiphyAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>) => `AttachmentConfigration` #### Type declaration ▸ (`a`): `AttachmentConfigration` +A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. + ##### Parameters -| Name | Type | -| :--- | :------------------ | -| `a` | `Attachment`\<`T`\> | +| Name | Type | +| :--- | :----------------- | +| `a` | `Attachment`<`T`\> | ##### Returns @@ -32,25 +32,25 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37) +[lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37) --- ### customImageAttachmentConfigurationHandler -• `Optional` **customImageAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>, `type`: `"gallery"` \| `"single"` \| `"carousel"`, `containerElement`: `HTMLElement`) => `ImageAttachmentConfiguration` - -A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break. +• `Optional` **customImageAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>, `type`: `"gallery"` \| `"single"` \| `"carousel"`, `containerElement`: `HTMLElement`) => `ImageAttachmentConfiguration` #### Type declaration ▸ (`a`, `type`, `containerElement`): `ImageAttachmentConfiguration` +A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break. + ##### Parameters | Name | Type | | :----------------- | :---------------------------------------- | -| `a` | `Attachment`\<`T`\> | +| `a` | `Attachment`<`T`\> | | `type` | `"gallery"` \| `"single"` \| `"carousel"` | | `containerElement` | `HTMLElement` | @@ -60,25 +60,25 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22) +[lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22) --- ### customScrapedImageAttachmentConfigurationHandler -• `Optional` **customScrapedImageAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>) => `AttachmentConfigration` - -A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. +• `Optional` **customScrapedImageAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>) => `AttachmentConfigration` #### Type declaration ▸ (`a`): `AttachmentConfigration` +A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. + ##### Parameters -| Name | Type | -| :--- | :------------------ | -| `a` | `Attachment`\<`T`\> | +| Name | Type | +| :--- | :----------------- | +| `a` | `Attachment`<`T`\> | ##### Returns @@ -86,26 +86,26 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43) +[lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43) --- ### customVideoAttachmentConfigurationHandler -• `Optional` **customVideoAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>, `containerElement`: `HTMLElement`) => `VideoAttachmentConfiguration` - -A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. +• `Optional` **customVideoAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>, `containerElement`: `HTMLElement`) => `VideoAttachmentConfiguration` #### Type declaration ▸ (`a`, `containerElement`): `VideoAttachmentConfiguration` +A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. + ##### Parameters -| Name | Type | -| :----------------- | :------------------ | -| `a` | `Attachment`\<`T`\> | -| `containerElement` | `HTMLElement` | +| Name | Type | +| :----------------- | :----------------- | +| `a` | `Attachment`<`T`\> | +| `containerElement` | `HTMLElement` | ##### Returns @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L30) +[lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49) +[lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49) ## Methods @@ -137,9 +137,9 @@ Handles the configuration for giphy attachments, it's possible to provide your o #### Parameters -| Name | Type | Description | -| :----------- | :------------------ | :-------------------------- | -| `attachment` | `Attachment`\<`T`\> | The attachment to configure | +| Name | Type | Description | +| :----------- | :----------------- | :-------------------------- | +| `attachment` | `Attachment`<`T`\> | The attachment to configure | #### Returns @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180) +[lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180) --- @@ -161,7 +161,7 @@ Handles the configuration for image attachments, it's possible to provide your o | Name | Type | Description | | :----------- | :---------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `attachment` | `Attachment`\<`T`\> | The attachment to configure | +| `attachment` | `Attachment`<`T`\> | The attachment to configure | | `location` | `"gallery"` \| `"single"` \| `"carousel"` | Specifies where the image is being displayed | | `element` | `HTMLElement` | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. | @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57) +[lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57) --- @@ -183,9 +183,9 @@ Handles the configuration for scraped image attachments, it's possible to provid #### Parameters -| Name | Type | Description | -| :----------- | :------------------ | :-------------------------- | -| `attachment` | `Attachment`\<`T`\> | The attachment to configure | +| Name | Type | Description | +| :----------- | :----------------- | :-------------------------- | +| `attachment` | `Attachment`<`T`\> | The attachment to configure | #### Returns @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200) +[lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200) --- @@ -205,10 +205,10 @@ Handles the configuration for video attachments, it's possible to provide your o #### Parameters -| Name | Type | Description | -| :----------- | :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `attachment` | `Attachment`\<`T`\> | The attachment to configure | -| `element` | `HTMLElement` | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. | +| Name | Type | Description | +| :----------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `attachment` | `Attachment`<`T`\> | The attachment to configure | +| `element` | `HTMLElement` | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. | #### Returns @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123) +[lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123) diff --git a/docusaurus/angular_versioned_docs/version-4/services/AttachmentService.mdx b/docusaurus/angular_versioned_docs/version-4/services/AttachmentService.mdx new file mode 100644 index 00000000..7fdb8c97 --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/AttachmentService.mdx @@ -0,0 +1,183 @@ +# AttachmentService + +The `AttachmentService` manages the uploads of a message input. + +## Type parameters + +| Name | Type | +| :--- | :---------------------------------------------------------------- | +| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | + +## Properties + +### attachmentUploadInProgressCounter$ + +• **attachmentUploadInProgressCounter$**: `Observable`<`number`\> + +Emits the number of uploads in progress. + +#### Defined in + +[lib/attachment.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L22) + +--- + +### attachmentUploads$ + +• **attachmentUploads$**: `Observable`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> + +Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/AttachmentPreviewListComponent.mdx) to display the attachment previews. + +#### Defined in + +[lib/attachment.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L26) + +## Methods + +### addAttachment + +▸ **addAttachment**(`attachment`): `void` + +You can add custom `image`, `video` and `file` attachments using this method. + +Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](./ChannelService.mdx) + +#### Parameters + +| Name | Type | +| :----------- | :----------------- | +| `attachment` | `Attachment`<`T`\> | + +#### Returns + +`void` + +#### Defined in + +[lib/attachment.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L103) + +--- + +### createFromAttachments + +▸ **createFromAttachments**(`attachments`): `void` + +Maps attachments received from the Stream API to uploads. This is useful when editing a message. + +#### Parameters + +| Name | Type | Description | +| :------------ | :------------------- | :------------------------------------ | +| `attachments` | `Attachment`<`T`\>[] | Attachemnts received with the message | + +#### Returns + +`void` + +#### Defined in + +[lib/attachment.service.ts:189](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L189) + +--- + +### deleteAttachment + +▸ **deleteAttachment**(`upload`): `Promise`<`void`\> + +Deletes an attachment, the attachment can have any state (`error`, `uploading` or `success`). + +#### Parameters + +| Name | Type | +| :------- | :----------------------------------------------- | +| `upload` | `AttachmentUpload`<`DefaultStreamChatGenerics`\> | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/attachment.service.ts:128](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L128) + +--- + +### filesSelected + +▸ **filesSelected**(`fileList`): `Promise`<`void`\> + +Uploads the selected files, and creates preview for image files. The result is propagated throught the `attachmentUploads$` stream. + +#### Parameters + +| Name | Type | Description | +| :--------- | :------------------- | :----------------------------- | +| `fileList` | `null` \| `FileList` | The files selected by the user | + +#### Returns + +`Promise`<`void`\> + +A promise with the result + +#### Defined in + +[lib/attachment.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L54) + +--- + +### mapToAttachments + +▸ **mapToAttachments**(): `Attachment`<`DefaultGenerics`\>[] + +Maps the current uploads to a format that can be sent along with the message to the Stream API. + +#### Returns + +`Attachment`<`DefaultGenerics`\>[] + +the attachments + +#### Defined in + +[lib/attachment.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L158) + +--- + +### resetAttachmentUploads + +▸ **resetAttachmentUploads**(): `void` + +Resets the attachments uploads (for example after the message with the attachments sent successfully) + +#### Returns + +`void` + +#### Defined in + +[lib/attachment.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L45) + +--- + +### retryAttachmentUpload + +▸ **retryAttachmentUpload**(`file`): `Promise`<`void`\> + +Retries to upload an attachment. + +#### Parameters + +| Name | Type | +| :----- | :----- | +| `file` | `File` | + +#### Returns + +`Promise`<`void`\> + +A promise with the result + +#### Defined in + +[lib/attachment.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L113) diff --git a/docusaurus/docs/Angular/services/ChannelListToggleService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ChannelListToggleService.mdx similarity index 100% rename from docusaurus/docs/Angular/services/ChannelListToggleService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/ChannelListToggleService.mdx diff --git a/docusaurus/angular_versioned_docs/version-4/services/ChannelService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ChannelService.mdx new file mode 100644 index 00000000..07f49e33 --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/ChannelService.mdx @@ -0,0 +1,1450 @@ +# ChannelService + +The `ChannelService` provides data and interaction for the channel list and message list. + +## Type parameters + +| Name | Type | +| :--- | :---------------------------------------------------------------- | +| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | + +## Properties + +### activeChannel$ + +• **activeChannel$**: `Observable`<`undefined` \| `Channel`<`T`\>\> + +Emits the currently active channel. + +:::important +If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail. +::: + +The active channel will always be marked as read when a new message is received + +#### Defined in + +[lib/channel.service.ts:97](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L97) + +--- + +### activeChannelLastReadMessageId + +• `Optional` **activeChannelLastReadMessageId**: `string` + +The last read message id of the active channel, it's used by the message list component to display unread UI, and jump to latest read message + +This property isn't always updated, please use `channel.read` to display up-to-date read information + +#### Defined in + +[lib/channel.service.ts:149](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L149) + +--- + +### activeChannelMessages$ + +• **activeChannelMessages$**: `Observable`<`StreamMessage`<`T`\>[]\> + +Emits the list of currently loaded messages of the active channel. + +#### Defined in + +[lib/channel.service.ts:101](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L101) + +--- + +### activeChannelPinnedMessages$ + +• **activeChannelPinnedMessages$**: `Observable`<`StreamMessage`<`T`\>[]\> + +Emits the list of pinned messages of the active channel. + +#### Defined in + +[lib/channel.service.ts:105](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L105) + +--- + +### activeChannelUnreadCount + +• `Optional` **activeChannelUnreadCount**: `number` + +The unread count of the active channel, it's used by the message list component to display unread UI + +This property isn't always updated, please use `channel.read` to display up-to-date read information + +#### Defined in + +[lib/channel.service.ts:155](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L155) + +--- + +### activeParentMessage$ + +• **activeParentMessage$**: `Observable`<`undefined` \| `StreamMessage`<`T`\>\> + +Emits the currently selected parent message. If no message is selected, it emits undefined. + +#### Defined in + +[lib/channel.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L117) + +--- + +### activeParentMessageId$ + +• **activeParentMessageId$**: `Observable`<`undefined` \| `string`\> + +Emits the id of the currently selected parent message. If no message is selected, it emits undefined. + +#### Defined in + +[lib/channel.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L109) + +--- + +### activeThreadMessages$ + +• **activeThreadMessages$**: `Observable`<`StreamMessage`<`T`\>[]\> + +Emits the list of currently loaded thread replies belonging to the selected parent message. If there is no currently active thread it emits an empty array. + +#### Defined in + +[lib/channel.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L113) + +--- + +### beforeSendMessage + +• `Optional` **beforeSendMessage**: (`input`: `MessageInput`<`T`\>) => `MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\> + +#### Type declaration + +▸ (`input`): `MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\> + +The provided method will be called before a new message is sent to Stream's API. You can use this hook to tranfrom or enrich the message being sent. + +##### Parameters + +| Name | Type | +| :------ | :------------------- | +| `input` | `MessageInput`<`T`\> | + +##### Returns + +`MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\> + +#### Defined in + +[lib/channel.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L304) + +--- + +### beforeUpdateMessage + +• `Optional` **beforeUpdateMessage**: (`message`: `StreamMessage`<`T`\>) => `StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\> + +#### Type declaration + +▸ (`message`): `StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\> + +The provided method will be called before a message is sent to Stream's API for update. You can use this hook to tranfrom or enrich the message being updated. + +##### Parameters + +| Name | Type | +| :-------- | :-------------------- | +| `message` | `StreamMessage`<`T`\> | + +##### Returns + +`StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\> + +#### Defined in + +[lib/channel.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L310) + +--- + +### bouncedMessage$ + +• **bouncedMessage$**: `BehaviorSubject`<`undefined` \| `StreamMessage`<`T`\>\> + +If you're using [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters) you can set up rules for bouncing messages. + +If a message is bounced, it will be emitted via this `Observable`. The built-in [`MessageBouncePrompt` component](../../components/MessageBouncePromptComponent) will display the bounce option to the user if a bounced message is clicked. + +#### Defined in + +[lib/channel.service.ts:143](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L143) + +--- + +### channelQueryState$ + +• **channelQueryState$**: `Observable`<`undefined` \| `ChannelQueryState`\> + +The result of the latest channel query request. + +#### Defined in + +[lib/channel.service.ts:87](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L87) + +--- + +### channels$ + +• **channels$**: `Observable`<`undefined` \| `Channel`<`T`\>[]\> + +Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel list. + +:::important +If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail. +::: + +Apart from pagination, the channel list is also updated on the following events: + +| Event type | Default behavior | Custom handler to override | +| ----------------------------------- | ------------------------------------------------------------------ | --------------------------------------------- | +| `channel.deleted` | Remove channel from the list | `customChannelDeletedHandler` | +| `channel.hidden` | Remove channel from the list | `customChannelHiddenHandler` | +| `channel.truncated` | Updates the channel | `customChannelTruncatedHandler` | +| `channel.updated` | Updates the channel | `customChannelUpdatedHandler` | +| `channel.visible` | Adds the channel to the list | `customChannelVisibleHandler` | +| `message.new` | Moves the channel to top of the list | `customNewMessageHandler` | +| `notification.added_to_channel` | Adds the new channel to the top of the list and starts watching it | `customAddedToChannelNotificationHandler` | +| `notification.message_new` | Adds the new channel to the top of the list and starts watching it | `customNewMessageNotificationHandler` | +| `notification.removed_from_channel` | Removes the channel from the list | `customRemovedFromChannelNotificationHandler` | + +It's important to note that filters don't apply to updates to the list from events. + +Our platform documentation covers the topic of [channel events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript#events) in depth. + +By default if an error occurs during channel load, the Observable will emit an error, which will close the stream. Users will have to reload the page to be able to reinitialize the `ChannelService`. If you don't want the streams to be closed, you can pass `options.keepAliveChannels$OnError = true` to the `init` method. In that case the `channelQueryState$` stream will emit the status of the latest channel load request. + +#### Defined in + +[lib/channel.service.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L83) + +--- + +### customAddedToChannelNotificationHandler + +• `Optional` **customAddedToChannelNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` + +#### Type declaration + +▸ (`clientEvent`, `channelListSetter`): `void` + +Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :------------------ | :---------------------------------------------------------------------------------------------------------------------- | +| `clientEvent` | `ClientEvent`<`DefaultStreamChatGenerics`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:169](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L169) + +--- + +### customChannelDeletedHandler + +• `Optional` **customChannelDeletedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` + +#### Type declaration + +▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` + +Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | +| `event` | `Event`<`DefaultGenerics`\> | +| `channel` | `Channel`<`T`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:189](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L189) + +--- + +### customChannelHiddenHandler + +• `Optional` **customChannelHiddenHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` + +#### Type declaration + +▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` + +Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | +| `event` | `Event`<`DefaultGenerics`\> | +| `channel` | `Channel`<`T`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:231](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L231) + +--- + +### customChannelTruncatedHandler + +• `Optional` **customChannelTruncatedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` + +#### Type declaration + +▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` + +Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | +| `event` | `Event`<`DefaultGenerics`\> | +| `channel` | `Channel`<`T`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:217](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L217) + +--- + +### customChannelUpdatedHandler + +• `Optional` **customChannelUpdatedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>) => `void`) => `void` + +#### Type declaration + +▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` + +Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | +| `event` | `Event`<`DefaultGenerics`\> | +| `channel` | `Channel`<`T`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:203](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L203) + +--- + +### customChannelVisibleHandler + +• `Optional` **customChannelVisibleHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` + +#### Type declaration + +▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` + +Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | +| `event` | `Event`<`DefaultGenerics`\> | +| `channel` | `Channel`<`T`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:245](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L245) + +--- + +### customFileDeleteRequest + +• `Optional` **customFileDeleteRequest**: (`url`: `string`, `channel`: `Channel`<`T`\>) => `Promise`<`void`\> + +#### Type declaration + +▸ (`url`, `channel`): `Promise`<`void`\> + +You can override the default file delete request - override this if you use your own CDN + +##### Parameters + +| Name | Type | +| :-------- | :-------------- | +| `url` | `string` | +| `channel` | `Channel`<`T`\> | + +##### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:287](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L287) + +--- + +### customFileUploadRequest + +• `Optional` **customFileUploadRequest**: (`file`: `File`, `channel`: `Channel`<`T`\>) => `Promise`<{}\> + +#### Type declaration + +▸ (`file`, `channel`): `Promise`<{}\> + +You can override the default file upload request - you can use this to upload files to your own CDN + +##### Parameters + +| Name | Type | +| :-------- | :-------------- | +| `file` | `File` | +| `channel` | `Channel`<`T`\> | + +##### Returns + +`Promise`<{}\> + +#### Defined in + +[lib/channel.service.ts:273](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L273) + +--- + +### customImageDeleteRequest + +• `Optional` **customImageDeleteRequest**: (`url`: `string`, `channel`: `Channel`<`T`\>) => `Promise`<`void`\> + +#### Type declaration + +▸ (`url`, `channel`): `Promise`<`void`\> + +You can override the default image delete request - override this if you use your own CDN + +##### Parameters + +| Name | Type | +| :-------- | :-------------- | +| `url` | `string` | +| `channel` | `Channel`<`T`\> | + +##### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:291](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L291) + +--- + +### customImageUploadRequest + +• `Optional` **customImageUploadRequest**: (`file`: `File`, `channel`: `Channel`<`T`\>) => `Promise`<{}\> + +#### Type declaration + +▸ (`file`, `channel`): `Promise`<{}\> + +You can override the default image upload request - you can use this to upload images to your own CDN + +##### Parameters + +| Name | Type | +| :-------- | :-------------- | +| `file` | `File` | +| `channel` | `Channel`<`T`\> | + +##### Returns + +`Promise`<{}\> + +#### Defined in + +[lib/channel.service.ts:280](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L280) + +--- + +### customNewMessageHandler + +• `Optional` **customNewMessageHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` + +#### Type declaration + +▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` + +Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | +| `event` | `Event`<`DefaultGenerics`\> | +| `channel` | `Channel`<`T`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:259](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L259) + +--- + +### customNewMessageNotificationHandler + +• `Optional` **customNewMessageNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` + +#### Type declaration + +▸ (`clientEvent`, `channelListSetter`): `void` + +Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :------------------ | :---------------------------------------------------------------------------------------------------------------------- | +| `clientEvent` | `ClientEvent`<`DefaultStreamChatGenerics`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:159](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L159) + +--- + +### customPaginator + +• `Optional` **customPaginator**: (`channelQueryResult`: `Channel`<`T`\>[]) => `NextPageConfiguration` + +#### Type declaration + +▸ (`channelQueryResult`): `NextPageConfiguration` + +By default the SDK uses an offset based pagination, you can change/extend this by providing your own custom paginator method. + +The method will be called with the result of the latest channel query. + +You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method. + +##### Parameters + +| Name | Type | +| :------------------- | :---------------- | +| `channelQueryResult` | `Channel`<`T`\>[] | + +##### Returns + +`NextPageConfiguration` + +#### Defined in + +[lib/channel.service.ts:320](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L320) + +--- + +### customRemovedFromChannelNotificationHandler + +• `Optional` **customRemovedFromChannelNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` + +#### Type declaration + +▸ (`clientEvent`, `channelListSetter`): `void` + +Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) + +##### Parameters + +| Name | Type | +| :------------------ | :---------------------------------------------------------------------------------------------------------------------- | +| `clientEvent` | `ClientEvent`<`DefaultStreamChatGenerics`\> | +| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | + +##### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L179) + +--- + +### hasMoreChannels$ + +• **hasMoreChannels$**: `Observable`<`boolean`\> + +Emits `false` if there are no more pages of channels that can be loaded. + +#### Defined in + +[lib/channel.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L55) + +--- + +### jumpToMessage$ + +• **jumpToMessage$**: `Observable`<{}\> + +Emits the ID of the message the message list should jump to (can be a channel message or thread message) + +#### Defined in + +[lib/channel.service.ts:125](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L125) + +--- + +### latestMessageDateByUserByChannels$ + +• **latestMessageDateByUserByChannels$**: `Observable`<{ [key: string]: `Date`; }\> + +Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started) + +#### Defined in + +[lib/channel.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L137) + +--- + +### messageDeleteConfirmationHandler + +• `Optional` **messageDeleteConfirmationHandler**: (`message`: `StreamMessage`<`T`\>) => `Promise`<`boolean`\> + +#### Type declaration + +▸ (`message`): `Promise`<`boolean`\> + +The provided method will be called before deleting a message. If the returned Promise resolves to `true` to deletion will go ahead. If `false` is returned, the message won't be deleted. + +##### Parameters + +| Name | Type | +| :-------- | :-------------------- | +| `message` | `StreamMessage`<`T`\> | + +##### Returns + +`Promise`<`boolean`\> + +#### Defined in + +[lib/channel.service.ts:298](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L298) + +--- + +### messageToQuote$ + +• **messageToQuote$**: `Observable`<`undefined` \| `StreamMessage`<`T`\>\> + +Emits the currently selected message to quote + +#### Defined in + +[lib/channel.service.ts:121](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L121) + +--- + +### usersTypingInChannel$ + +• **usersTypingInChannel$**: `Observable`<`UserResponse`<`T`\>[]\> + +Emits the list of users that are currently typing in the channel (current user is not included) + +#### Defined in + +[lib/channel.service.ts:129](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L129) + +--- + +### usersTypingInThread$ + +• **usersTypingInThread$**: `Observable`<`UserResponse`<`T`\>[]\> + +Emits the list of users that are currently typing in the active thread (current user is not included) + +#### Defined in + +[lib/channel.service.ts:133](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L133) + +## Accessors + +### activeChannel + +• `get` **activeChannel**(): `undefined` \| `Channel`<`T`\> + +The current active channel + +#### Returns + +`undefined` \| `Channel`<`T`\> + +#### Defined in + +[lib/channel.service.ts:1555](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1555) + +--- + +### activeChannelMessages + +• `get` **activeChannelMessages**(): (`StreamMessage`<`T`\> \| `MessageResponse`<`T`\> \| `FormatMessageResponse`<`T`\>)[] + +The current active channel messages + +#### Returns + +(`StreamMessage`<`T`\> \| `MessageResponse`<`T`\> \| `FormatMessageResponse`<`T`\>)[] + +#### Defined in + +[lib/channel.service.ts:1562](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1562) + +--- + +### channels + +• `get` **channels**(): `Channel`<`T`\>[] + +The current list of channels + +#### Returns + +`Channel`<`T`\>[] + +#### Defined in + +[lib/channel.service.ts:1548](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1548) + +--- + +### shouldMarkActiveChannelAsRead + +• `get` **shouldMarkActiveChannelAsRead**(): `boolean` + +If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read. + +#### Returns + +`boolean` + +#### Defined in + +[lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L523) + +• `set` **shouldMarkActiveChannelAsRead**(`shouldMarkActiveChannelAsRead`): `void` + +If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read. + +#### Parameters + +| Name | Type | +| :------------------------------ | :-------- | +| `shouldMarkActiveChannelAsRead` | `boolean` | + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L530) + +## Methods + +### addChannel + +▸ **addChannel**(`channel`): `void` + +Add a new channel to the channel list +The channel will be added to the beginning of the channel list + +#### Parameters + +| Name | Type | +| :-------- | :-------------- | +| `channel` | `Channel`<`T`\> | + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:1080](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1080) + +--- + +### addReaction + +▸ **addReaction**(`messageId`, `reactionType`, `customData?`): `Promise`<`void`\> + +Adds a reaction to a message. + +#### Parameters + +| Name | Type | Description | +| :------------- | :---------------------- | :------------------------------------------- | +| `messageId` | `string` | The id of the message to add the reaction to | +| `reactionType` | `string` | The type of the reaction | +| `customData?` | `T`[``"reactionType"``] | | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:771](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L771) + +--- + +### autocompleteMembers + +▸ **autocompleteMembers**(`searchTerm`): `Promise`<`ChannelMemberResponse`<`T`\>[]\> + +Returns the autocomplete options for current channel members. If the channel has less than 100 members, it returns the channel members, otherwise sends a [search request](https://getstream.io/chat/docs/javascript/query_members/?language=javascript#pagination-and-ordering) with the given search term. + +#### Parameters + +| Name | Type | Description | +| :----------- | :------- | :----------------------------------------- | +| `searchTerm` | `string` | Text to search for in the names of members | + +#### Returns + +`Promise`<`ChannelMemberResponse`<`T`\>[]\> + +The list of members matching the search filter + +#### Defined in + +[lib/channel.service.ts:1007](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1007) + +--- + +### clearMessageJump + +▸ **clearMessageJump**(): `void` + +Clears the currently selected message to jump + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:1203](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1203) + +--- + +### deleteAttachment + +▸ **deleteAttachment**(`attachmentUpload`): `Promise`<`void`\> + +Deletes an uploaded file by URL. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation + +#### Parameters + +| Name | Type | Description | +| :----------------- | :----------------------------------------------- | :-------------------------------------------------------------------------------------- | +| `attachmentUpload` | `AttachmentUpload`<`DefaultStreamChatGenerics`\> | Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx)) | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:991](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L991) + +--- + +### deleteMessage + +▸ **deleteMessage**(`message`, `isLocalDelete?`): `Promise`<`void`\> + +Deletes the message from the active channel + +#### Parameters + +| Name | Type | Default value | Description | +| :-------------- | :-------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------- | +| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | `undefined` | Message to be deleted | +| `isLocalDelete` | `boolean` | `false` | set this `true` if you want to delete a message that's only part of the local state, not yet saved on the backend | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L893) + +--- + +### deselectActiveChannel + +▸ **deselectActiveChannel**(): `void` + +Deselects the currently active (if any) channel + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:578](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L578) + +--- + +### getMessageReactions + +▸ **getMessageReactions**(`messageId`): `Promise`<`ReactionResponse`<`T`\>[]\> + +Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions). + +#### Parameters + +| Name | Type | +| :---------- | :------- | +| `messageId` | `string` | + +#### Returns + +`Promise`<`ReactionResponse`<`T`\>[]\> + +all reactions of a message + +#### Defined in + +[lib/channel.service.ts:1571](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1571) + +--- + +### init + +▸ **init**(`filters`, `sort?`, `options?`, `shouldSetActiveChannel?`): `Promise`<`Channel`<`T`\>[]\> + +Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read. + +#### Parameters + +| Name | Type | Default value | Description | +| :----------------------- | :--------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- | +| `filters` | `ChannelFilters`<`T`\> | `undefined` | | +| `sort?` | `ChannelSort`<`T`\> | `undefined` | | +| `options?` | `ChannelOptions` & {} | `undefined` | | +| `shouldSetActiveChannel` | `boolean` | `true` | Decides if the first channel in the result should be made as an active channel, or no channel should be marked as active | + +#### Returns + +`Promise`<`Channel`<`T`\>[]\> + +the list of channels found by the query + +#### Defined in + +[lib/channel.service.ts:708](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L708) + +--- + +### jumpToMessage + +▸ **jumpToMessage**(`messageId`, `parentMessageId?`): `Promise`<`void`\> + +Jumps to the selected message inside the message list, if the message is not yet loaded, it'll load the message (and it's surroundings) from the API. + +#### Parameters + +| Name | Type | Description | +| :----------------- | :------- | :----------------------------------------------------------------------------- | +| `messageId` | `string` | The ID of the message to be loaded, 'latest' means jump to the latest messages | +| `parentMessageId?` | `string` | The ID of the parent message if we want to load a thread message | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:1175](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1175) + +--- + +### loadMoreChannels + +▸ **loadMoreChannels**(): `Promise`<`void`\> + +Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:761](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L761) + +--- + +### loadMoreMessages + +▸ **loadMoreMessages**(`direction?`): `undefined` \| `false` \| `Promise`<`QueryChannelAPIResponse`<`T`\>\> + +Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. + +#### Parameters + +| Name | Type | Default value | +| :---------- | :--------------------- | :------------ | +| `direction` | `"older"` \| `"newer"` | `'older'` | + +#### Returns + +`undefined` \| `false` \| `Promise`<`QueryChannelAPIResponse`<`T`\>\> + +#### Defined in + +[lib/channel.service.ts:639](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L639) + +--- + +### loadMoreThreadReplies + +▸ **loadMoreThreadReplies**(`direction?`): `Promise`<`void`\> + +Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. + +#### Parameters + +| Name | Type | Default value | +| :---------- | :--------------------- | :------------ | +| `direction` | `"older"` \| `"newer"` | `'older'` | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:678](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L678) + +--- + +### markMessageUnread + +▸ **markMessageUnread**(`messageId`): `Promise`<`undefined` \| `null` \| `APIResponse`\> + +Marks the channel from the given message as unread + +#### Parameters + +| Name | Type | +| :---------- | :------- | +| `messageId` | `string` | + +#### Returns + +`Promise`<`undefined` \| `null` \| `APIResponse`\> + +the result of the request + +#### Defined in + +[lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1604) + +--- + +### pinMessage + +▸ **pinMessage**(`message`): `Promise`<`void`\> + +Pins the given message in the channel + +#### Parameters + +| Name | Type | +| :-------- | :-------------------------------------------- | +| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:1211](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1211) + +--- + +### removeOldMessageFromMessageList + +▸ **removeOldMessageFromMessageList**(): `void` + +internal + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:501](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L501) + +--- + +### removeReaction + +▸ **removeReaction**(`messageId`, `reactionType`): `Promise`<`void`\> + +Removes a reaction from a message. + +#### Parameters + +| Name | Type | Description | +| :------------- | :------- | :------------------------------------------------ | +| `messageId` | `string` | The id of the message to remove the reaction from | +| `reactionType` | `string` | Thr type of reaction to remove | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:787](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L787) + +--- + +### resendMessage + +▸ **resendMessage**(`message`): `Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> + +Resends the given message to the active channel + +#### Parameters + +| Name | Type | Description | +| :-------- | :-------------------------------------------- | :-------------------- | +| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | The message to resend | + +#### Returns + +`Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> + +#### Defined in + +[lib/channel.service.ts:841](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L841) + +--- + +### reset + +▸ **reset**(): `void` + +Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser). + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:744](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L744) + +--- + +### selectMessageToQuote + +▸ **selectMessageToQuote**(`message`): `void` + +Selects or deselects the current message to quote reply to + +#### Parameters + +| Name | Type | Description | +| :-------- | :----------------------------------------------------------- | :-------------------------------------------------------------------------- | +| `message` | `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> | The message to select, if called with `undefined`, it deselects the message | + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:1071](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1071) + +--- + +### sendAction + +▸ **sendAction**(`messageId`, `formData`, `parentMessageId?`): `Promise`<`void`\> + +[Runs a message action](https://getstream.io/chat/docs/rest/#messages-runmessageaction) in the current channel. Updates the message list based on the action result (if no message is returned, the message will be removed from the message list). + +#### Parameters + +| Name | Type | +| :----------------- | :---------------------------- | +| `messageId` | `string` | +| `formData` | `Record`<`string`, `string`\> | +| `parentMessageId?` | `string` | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:1034](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1034) + +--- + +### sendMessage + +▸ **sendMessage**(`text`, `attachments?`, `mentionedUsers?`, `parentId?`, `quotedMessageId?`, `customData?`): `Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> + +Sends a message to the active channel. The message is immediately added to the message list, if an error occurs and the message can't be sent, the error is indicated in `state` of the message. + +#### Parameters + +| Name | Type | Default value | Description | +| :---------------- | :------------------------------------------------ | :------------ | :---------------------------------------------------- | +| `text` | `string` | `undefined` | The text of the message | +| `attachments` | `Attachment`<`T`\>[] | `[]` | The attachments | +| `mentionedUsers` | `UserResponse`<`T`\>[] | `[]` | Mentioned users | +| `parentId` | `undefined` \| `string` | `undefined` | Id of the parent message (if sending a thread reply) | +| `quotedMessageId` | `undefined` \| `string` | `undefined` | Id of the message to quote (if sending a quote reply) | +| `customData` | `undefined` \| `Partial`<`T`[``"messageType"``]\> | `undefined` | | + +#### Returns + +`Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> + +#### Defined in + +[lib/channel.service.ts:802](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L802) + +--- + +### setAsActiveChannel + +▸ **setAsActiveChannel**(`channel`): `void` + +Sets the given `channel` as active and marks it as read. +If the channel wasn't previously part of the channel, it will be added to the beginning of the list. + +#### Parameters + +| Name | Type | +| :-------- | :-------------- | +| `channel` | `Channel`<`T`\> | + +#### Returns + +`void` + +#### Defined in + +[lib/channel.service.ts:546](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L546) + +--- + +### setAsActiveParentMessage + +▸ **setAsActiveParentMessage**(`message`, `loadMessagesForm?`): `Promise`<`void`\> + +Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message. + +#### Parameters + +| Name | Type | Default value | +| :----------------- | :----------------------------------- | :------------ | +| `message` | `undefined` \| `StreamMessage`<`T`\> | `undefined` | +| `loadMessagesForm` | `"request"` \| `"state"` | `'request'` | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:604](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L604) + +--- + +### typingStarted + +▸ **typingStarted**(`parentId?`): `Promise`<`void`\> + +Call this method if user started typing in the active channel + +#### Parameters + +| Name | Type | Description | +| :---------- | :------- | :---------------------------------------------------------- | +| `parentId?` | `string` | The id of the parent message, if user is typing in a thread | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:1531](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1531) + +--- + +### typingStopped + +▸ **typingStopped**(`parentId?`): `Promise`<`void`\> + +Call this method if user stopped typing in the active channel + +#### Parameters + +| Name | Type | Description | +| :---------- | :------- | :------------------------------------------------------------ | +| `parentId?` | `string` | The id of the parent message, if user were typing in a thread | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:1540](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1540) + +--- + +### unpinMessage + +▸ **unpinMessage**(`message`): `Promise`<`void`\> + +Removes the given message from pinned messages + +#### Parameters + +| Name | Type | +| :-------- | :-------------------------------------------- | +| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | + +#### Returns + +`Promise`<`void`\> + +#### Defined in + +[lib/channel.service.ts:1230](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1230) + +--- + +### updateMessage + +▸ **updateMessage**(`message`): `Promise`<`StreamMessage`<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`<`MessageResponse`<{}\>, `"created_at"` \| `"updated_at"` \| `"status"` \| `"pinned_at"`\> & `UR` & {}\> + +Updates the message in the active channel + +#### Parameters + +| Name | Type | Description | +| :-------- | :-------------------- | :------------------- | +| `message` | `StreamMessage`<`T`\> | Mesage to be updated | + +#### Returns + +`Promise`<`StreamMessage`<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`<`MessageResponse`<{}\>, `"created_at"` \| `"updated_at"` \| `"status"` \| `"pinned_at"`\> & `UR` & {}\> + +#### Defined in + +[lib/channel.service.ts:858](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L858) + +--- + +### uploadAttachments + +▸ **uploadAttachments**(`uploads`): `Promise`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> + +Uploads files to the channel. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation. + +#### Parameters + +| Name | Type | Description | +| :-------- | :------------------------------------------------- | :--------------------------------------------------------------------------------------- | +| `uploads` | `AttachmentUpload`<`DefaultStreamChatGenerics`\>[] | the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx)) | + +#### Returns + +`Promise`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> + +the result of file upload requests + +#### Defined in + +[lib/channel.service.ts:925](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L925) diff --git a/docusaurus/angular_versioned_docs/version-5/services/ChatClientService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ChatClientService.mdx similarity index 56% rename from docusaurus/angular_versioned_docs/version-5/services/ChatClientService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/ChatClientService.mdx index 1623f6a5..cdf1e5e5 100644 --- a/docusaurus/angular_versioned_docs/version-5/services/ChatClientService.mdx +++ b/docusaurus/angular_versioned_docs/version-4/services/ChatClientService.mdx @@ -12,43 +12,43 @@ The `ChatClient` service connects the user to the Stream chat. ### appSettings$ -• **appSettings$**: `Observable`\<`undefined` \| `AppSettings`\> +• **appSettings$**: `Observable`<`undefined` \| `AppSettings`\> Emits the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript). Since getting the application settings is an expensive API call and we don't always need the result, this is not initialized by default, you need to call `getApplicationSettings` to load them. #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49) +[lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49) --- ### chatClient -• **chatClient**: `StreamChat`\<`T`\> +• **chatClient**: `StreamChat`<`T`\> The [StreamChat client](https://github.com/GetStream/stream-chat-js/blob/master/src/client.ts) instance. In general you shouldn't need to access the client, but it's there if you want to use it. #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38) +[lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38) --- ### connectionState$ -• **connectionState$**: `Observable`\<`"offline"` \| `"online"`\> +• **connectionState$**: `Observable`<`"offline"` \| `"online"`\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53) +[lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53) --- ### events$ -• **events$**: `Observable`\<`ClientEvent`\<`T`\>\> +• **events$**: `Observable`<`ClientEvent`<`T`\>\> Emits [`ClientEvent`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events. The platform documentation covers [the list of client, user presence and notification events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript). :::important @@ -57,37 +57,37 @@ 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45) +[lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45) --- ### pendingInvites$ -• **pendingInvites$**: `Observable`\<`Channel`\<`T`\>[]\> +• **pendingInvites$**: `Observable`<(`ChannelResponse`<`T`\> \| `Channel`<`T`\>)[]\> Emits the list of pending invites of the user. It emits every pending invitation during initialization and then extends the list when a new invite is received. More information can be found in the [channel invitations](../code-examples/channel-invites.mdx) guide. #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57) +[lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57) --- ### user$ -• **user$**: `Observable`\<`undefined` \| `OwnUserResponse`\<`T`\> \| `UserResponse`\<`T`\>\> +• **user$**: `Observable`<`undefined` \| `OwnUserResponse`<`T`\> \| `UserResponse`<`T`\>\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61) +[lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61) ## Methods ### autocompleteUsers -▸ **autocompleteUsers**(`searchTerm`): `Promise`\<`UserResponse`\<`T`\>[]\> +▸ **autocompleteUsers**(`searchTerm`): `Promise`<`UserResponse`<`T`\>[]\> Searches for users in the application that have ID or name matching the provided search term @@ -99,35 +99,35 @@ Searches for users in the application that have ID or name matching the provided #### Returns -`Promise`\<`UserResponse`\<`T`\>[]\> +`Promise`<`UserResponse`<`T`\>[]\> 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L224) +[lib/chat-client.service.ts:209](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L209) --- ### disconnectUser -▸ **disconnectUser**(): `Promise`\<`void`\> +▸ **disconnectUser**(): `Promise`<`void`\> Disconnects the current user, and closes the WebSocket connection. Useful when disconnecting a chat user, use in combination with [`reset`](./ChannelService.mdx/#reset). #### Returns -`Promise`\<`void`\> +`Promise`<`void`\> #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L186) +[lib/chat-client.service.ts:178](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L178) --- ### flagMessage -▸ **flagMessage**(`messageId`): `Promise`\<`void`\> +▸ **flagMessage**(`messageId`): `Promise`<`void`\> Flag the message with the given ID. If you want to know [more about flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) check out the platform documentation. @@ -139,49 +139,49 @@ Flag the message with the given ID. If you want to know [more about flags](https #### Returns -`Promise`\<`void`\> +`Promise`<`void`\> #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:215](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L215) +[lib/chat-client.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L200) --- ### getAppSettings -▸ **getAppSettings**(): `Promise`\<`void`\> +▸ **getAppSettings**(): `Promise`<`void`\> Loads the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript), if the application settings have already been loaded, it does nothing. #### Returns -`Promise`\<`void`\> +`Promise`<`void`\> #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L196) +[lib/chat-client.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L188) --- ### init -▸ **init**(`apiKey`, `userOrId`, `userTokenOrProvider`, `clientOptions?`): `ConnectAPIResponse`\<`T`\> +▸ **init**(`apiKey`, `userOrId`, `userTokenOrProvider`, `clientOptions?`): `ConnectAPIResponse`<`T`\> Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation. #### Parameters -| Name | Type | Description | -| :-------------------- | :--------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `apiKey` | `string` | | -| `userOrId` | `undefined` \| `string` \| `OwnUserResponse`\<`T`\> \| `UserResponse`\<`T`\> | you can emit this for anonymous logins | -| `userTokenOrProvider` | `TokenOrProvider` | You can provide: | -| `clientOptions?` | `AxiosRequestConfig`\<`any`\> & {} & \{ `trackPendingChannelInvites?`: `boolean` } | Setting to provide to the Stream client instance | +| Name | Type | Description | +| :-------------------- | :------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `apiKey` | `string` | | +| `userOrId` | `undefined` \| `string` \| `OwnUserResponse`<`T`\> \| `UserResponse`<`T`\> | you can emit this for anonymous logins | +| `userTokenOrProvider` | `TokenOrProvider` | You can provide: | +| `clientOptions?` | `StreamChatOptions` | Setting to provide to the Stream client instance | #### Returns -`ConnectAPIResponse`\<`T`\> +`ConnectAPIResponse`<`T`\> #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98) +[lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98) diff --git a/docusaurus/angular_versioned_docs/version-4/services/CustomTemplatesService.mdx b/docusaurus/angular_versioned_docs/version-4/services/CustomTemplatesService.mdx new file mode 100644 index 00000000..1a5a795b --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/CustomTemplatesService.mdx @@ -0,0 +1,527 @@ +# CustomTemplatesService + +A central location for registering your custom templates to override parts of the chat application. + +For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application). + +You can find the type definitions of the context that is provided for each template [on GitHub](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angu) + +## Type parameters + +| Name | Type | +| :--- | :---------------------------------------------------------------- | +| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | + +## Properties + +### attachmentActionsTemplate$ + +• **attachmentActionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> + +The template that can be used to override how attachment actions are displayed inside the [attachment list](../components/AttachmentListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:277](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L277) + +--- + +### attachmentListTemplate$ + +• **attachmentListTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentListContext`\>\> + +The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L117) + +--- + +### attachmentPreviewListTemplate$ + +• **attachmentPreviewListTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentPreviewListContext`\>\> + +The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:124](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L124) + +--- + +### avatarTemplate$ + +• **avatarTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AvatarContext`\>\> + +The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:131](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L131) + +--- + +### cardAttachmentTemplate$ + +• **cardAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> + +The template that can be used to override how a card attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:271](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L271) + +--- + +### channelActionsTemplate$ + +• **channelActionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelActionsContext`<`DefaultStreamChatGenerics`\>\>\> + +The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed) + +#### Defined in + +[lib/custom-templates.service.ts:110](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L110) + +--- + +### channelHeaderInfoTemplate$ + +• **channelHeaderInfoTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelHeaderInfoContext`<`DefaultStreamChatGenerics`\>\>\> + +The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L228) + +--- + +### channelPreviewInfoTemplate$ + +• **channelPreviewInfoTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelPreviewInfoContext`<`DefaultStreamChatGenerics`\>\>\> + +Template used to display the channel information inside the [channel list item](../components/ChannelPreviewComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:336](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L336) + +--- + +### channelPreviewTemplate$ + +• **channelPreviewTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelPreviewContext`<`DefaultStreamChatGenerics`\>\>\> + +Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L68) + +--- + +### commandAutocompleteItemTemplate$ + +• **commandAutocompleteItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CommandAutocompleteListItemContext`\>\> + +The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L61) + +--- + +### customAttachmentUploadTemplate$ + +• **customAttachmentUploadTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CustomAttachmentUploadContext`\>\> + +The template used for displaying file upload/attachment selector inside the [message input](../components/MessageInputComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:235](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L235) + +--- + +### customMessageMetadataTemplate$ + +• **customMessageMetadataTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CustomMetadataContext`<`T`\>\>\> + +Template to display custom metadata inside [message component](../components/MessageComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:221](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L221) + +--- + +### dateSeparatorTemplate$ + +• **dateSeparatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`DateSeparatorContext`\>\> + +The template used to display the date separator inside the [message list](../components/MessageListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:289](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L289) + +--- + +### deliveredStatusTemplate$ + +• **deliveredStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`DeliveredStatusContext`\>\> + +The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx) + +Displayed for the last message sent by the current user, if the message isn't yet read by anyone + +#### Defined in + +[lib/custom-templates.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L196) + +--- + +### editMessageFormTemplate$ + +• **editMessageFormTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> + +The template used to display the [edit message form](../components/EditMessageFormComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:323](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L323) + +--- + +### emojiPickerTemplate$ + +• **emojiPickerTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`EmojiPickerContext`\>\> + +The template for [emoji picker](../code-examples/emoji-picker.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L89) + +--- + +### emptyMainMessageListPlaceholder$ + +• **emptyMainMessageListPlaceholder$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> + +The template to show if the main message list is empty + +#### Defined in + +[lib/custom-templates.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L311) + +--- + +### emptyThreadMessageListPlaceholder$ + +• **emptyThreadMessageListPlaceholder$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> + +The template to show if the thread message list is empty + +#### Defined in + +[lib/custom-templates.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L317) + +--- + +### fileAttachmentTemplate$ + +• **fileAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> + +The template that can be used to override how a file attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:265](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L265) + +--- + +### galleryAttachmentTemplate$ + +• **galleryAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> + +The template that can be used to override how image gallery is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:259](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L259) + +--- + +### iconTemplate$ + +• **iconTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`IconContext`\>\> + +Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L138) + +--- + +### imageAttachmentTemplate$ + +• **imageAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> + +The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:241](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L241) + +--- + +### loadingIndicatorTemplate$ + +• **loadingIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`LoadingIndicatorContext`\>\> + +Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L145) + +--- + +### mentionAutocompleteItemTemplate$ + +• **mentionAutocompleteItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MentionAutcompleteListItemContext`\>\> + +The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L55) + +--- + +### mentionTemplate$ + +• **mentionTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MentionTemplateContext`\>\> + +The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:82](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L82) + +--- + +### messageActionsBoxItemTemplate$ + +• **messageActionsBoxItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageActionBoxItemContext`<`DefaultStreamChatGenerics`\>\>\> + +The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:159](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L159) + +--- + +### messageActionsBoxTemplate$ + +• **messageActionsBoxTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageActionsBoxContext`\>\> + +Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:152](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L152) + +--- + +### messageBouncePromptTemplate$ + +• **messageBouncePromptTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> + +The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329) + +--- + +### messageInputTemplate$ + +• **messageInputTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageInputContext`\>\> + +The message input template used when editing a message (instead of the [default message input](../components/MessageInputComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L75) + +--- + +### messageReactionsTemplate$ + +• **messageReactionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageReactionsContext`\>\> + +The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:166](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L166) + +--- + +### messageTemplate$ + +• **messageTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageContext`\>\> + +The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L103) + +--- + +### modalTemplate$ + +• **modalTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ModalContext`\>\> + +The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx)) + +#### Defined in + +[lib/custom-templates.service.ts:173](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L173) + +--- + +### newMessagesIndicatorTemplate$ + +• **newMessagesIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`UnreadMessagesIndicatorContext`\>\> + +The template used to display unread messages indicator inside the [message list](../components/MessageListComponent.mdx) when the channel is opened + +This UI element is used to separate unread messages from read messages + +#### Defined in + +[lib/custom-templates.service.ts:297](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L297) + +--- + +### newMessagesNotificationTemplate$ + +• **newMessagesNotificationTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`UnreadMessagesNotificationContext`\>\> + +The template used to display unread messages notification inside the [message list](../components/MessageListComponent.mdx) when the channel is opened + +Users can use this notification to jump to the first unread message when it's clicked + +#### Defined in + +[lib/custom-templates.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L305) + +--- + +### notificationTemplate$ + +• **notificationTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`NotificationContext`\>\> + +The template used to override the [default notification component](../components/NotificationComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L180) + +--- + +### readStatusTemplate$ + +• **readStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ReadStatusContext`\>\> + +The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx) + +Displayed for the last message sent by the current user, if the message is read at least by one user + +#### Defined in + +[lib/custom-templates.service.ts:214](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L214) + +--- + +### sendingStatusTemplate$ + +• **sendingStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`SendingStatusContext`\>\> + +The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx) + +Displayed for the last message sent by the current user, if the message is currently being sent + +#### Defined in + +[lib/custom-templates.service.ts:205](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L205) + +--- + +### systemMessageTemplate$ + +• **systemMessageTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`SystemMessageContext`\>\> + +The template used to display [system messages](https://getstream.io/chat/docs/javascript/silent_messages/?language=javascript&q=system) indise the [message component](../components/MessageComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:283](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L283) + +--- + +### threadHeaderTemplate$ + +• **threadHeaderTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ThreadHeaderContext`\>\> + +The template used for header of a [thread](../components/ThreadComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:187](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L187) + +--- + +### typingIndicatorTemplate$ + +• **typingIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`TypingIndicatorContext`\>\> + +The typing indicator template used in the [message list](../components/MessageListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L96) + +--- + +### videoAttachmentTemplate$ + +• **videoAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> + +The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) + +#### Defined in + +[lib/custom-templates.service.ts:253](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L253) + +--- + +### voiceRecordingAttachmentTemplate$ + +• **voiceRecordingAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> + +The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx), by default the [voice recording component](../components/VoiceRecordingComponent.mdx) is used + +#### Defined in + +[lib/custom-templates.service.ts:247](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L247) diff --git a/docusaurus/angular_versioned_docs/version-5/services/DateParserService.mdx b/docusaurus/angular_versioned_docs/version-4/services/DateParserService.mdx similarity index 57% rename from docusaurus/angular_versioned_docs/version-5/services/DateParserService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/DateParserService.mdx index be8a3719..56ef4f69 100644 --- a/docusaurus/angular_versioned_docs/version-5/services/DateParserService.mdx +++ b/docusaurus/angular_versioned_docs/version-4/services/DateParserService.mdx @@ -8,12 +8,12 @@ The `DateParserService` parses dates into user-friendly string representations. • `Optional` **customDateParser**: (`date`: `Date`) => `string` -Custom parser to override `parseDate` - #### Type declaration ▸ (`date`): `string` +Custom parser to override `parseDate` + ##### Parameters | Name | Type | @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18) +[lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18) --- @@ -34,12 +34,12 @@ Custom parser to override `parseDate` • `Optional` **customDateTimeParser**: (`date`: `Date`) => `string` -Custom parser to override `parseDateTime` - #### Type declaration ▸ (`date`): `string` +Custom parser to override `parseDateTime` + ##### Parameters | Name | Type | @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22) +[lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22) --- @@ -60,12 +60,12 @@ Custom parser to override `parseDateTime` • `Optional` **customTimeParser**: (`date`: `Date`) => `string` -Custom parser to override `parseTime` - #### Type declaration ▸ (`date`): `string` +Custom parser to override `parseTime` + ##### Parameters | Name | Type | @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14) +[lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43) +[lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55) +[lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31) +[lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31) diff --git a/docusaurus/angular_versioned_docs/version-5/services/EmojiInputService.mdx b/docusaurus/angular_versioned_docs/version-4/services/EmojiInputService.mdx similarity index 67% rename from docusaurus/angular_versioned_docs/version-5/services/EmojiInputService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/EmojiInputService.mdx index 9167d8b4..5427198f 100644 --- a/docusaurus/angular_versioned_docs/version-5/services/EmojiInputService.mdx +++ b/docusaurus/angular_versioned_docs/version-4/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14) +[lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14) diff --git a/docusaurus/docs/Angular/services/ImageLoadService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ImageLoadService.mdx similarity index 100% rename from docusaurus/docs/Angular/services/ImageLoadService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/ImageLoadService.mdx diff --git a/docusaurus/angular_versioned_docs/version-4/services/MessageActionsService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageActionsService.mdx new file mode 100644 index 00000000..b8eef751 --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/MessageActionsService.mdx @@ -0,0 +1,96 @@ +# MessageActionsService + +The message actions service provides customization options for the [message actions](../../components/MessageActionsBoxComponent) + +## Type parameters + +| Name | Type | +| :--- | :---------------------------------------------------------------- | +| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | + +## Properties + +### customActionClickHandler + +• `Optional` **customActionClickHandler**: (`details`: `MessageActionsClickDetails`<`T`\>) => `void` + +#### Type declaration + +▸ (`details`): `void` + +By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler. + +##### Parameters + +| Name | Type | +| :-------- | :--------------------------------- | +| `details` | `MessageActionsClickDetails`<`T`\> | + +##### Returns + +`void` + +#### Defined in + +[lib/message-actions.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L117) + +--- + +### customActions$ + +• **customActions$**: `BehaviorSubject`<`CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[]\> + +You can pass your own custom actions that will be displayed inside the built-in message actions component + +#### Defined in + +[lib/message-actions.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L113) + +--- + +### defaultActions + +• `Readonly` **defaultActions**: `MessageActionItem`<`T`\>[] + +Default actions - these are the actions that are handled by the built-in component + +#### Defined in + +[lib/message-actions.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L26) + +--- + +### messageToEdit$ + +• **messageToEdit$**: `BehaviorSubject`<`undefined` \| `StreamMessage`<`T`\>\> + +The built-in components will handle changes to this observable. + +#### Defined in + +[lib/message-actions.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L109) + +## Methods + +### getAuthorizedMessageActionsCount + +▸ **getAuthorizedMessageActionsCount**(`message`, `enabledActions`): `number` + +This method returns how many authorized actions are available to the given message + +#### Parameters + +| Name | Type | +| :--------------- | :-------------------- | +| `message` | `StreamMessage`<`T`\> | +| `enabledActions` | `string`[] | + +#### Returns + +`number` + +the count + +#### Defined in + +[lib/message-actions.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L132) diff --git a/docusaurus/angular_versioned_docs/version-4/services/MessageInputConfigService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageInputConfigService.mdx new file mode 100644 index 00000000..54a8e917 --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/MessageInputConfigService.mdx @@ -0,0 +1,63 @@ +# MessageInputConfigService + +The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component. + +## Properties + +### areMentionsEnabled + +• **areMentionsEnabled**: `undefined` \| `boolean` = `true` + +If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. + +#### Defined in + +[lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17) + +--- + +### inputMode + +• **inputMode**: `"desktop"` \| `"mobile"` = `'desktop'` + +In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. + +#### Defined in + +[lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L30) + +--- + +### isFileUploadEnabled + +• **isFileUploadEnabled**: `undefined` \| `boolean` = `true` + +If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). + +#### Defined in + +[lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L13) + +--- + +### isMultipleFileUploadEnabled + +• **isMultipleFileUploadEnabled**: `undefined` \| `boolean` = `true` + +If `false`, users can only upload one attachment per message + +#### Defined in + +[lib/message-input/message-input-config.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L21) + +--- + +### mentionScope + +• **mentionScope**: `undefined` \| `"channel"` \| `"application"` = `'channel'` + +The scope for user mentions, either members of the current channel of members of the application + +#### Defined in + +[lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L25) diff --git a/docusaurus/angular_versioned_docs/version-5/services/MessageReactionsService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageReactionsService.mdx similarity index 65% rename from docusaurus/angular_versioned_docs/version-5/services/MessageReactionsService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/MessageReactionsService.mdx index 345123d8..75ae1297 100644 --- a/docusaurus/angular_versioned_docs/version-5/services/MessageReactionsService.mdx +++ b/docusaurus/angular_versioned_docs/version-4/services/MessageReactionsService.mdx @@ -8,14 +8,14 @@ The `MessageReactionsService` provides customization options to message [reactio • `Optional` **customReactionClickHandler**: (`details`: `MessageReactionClickDetails`) => `void` -By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler. - -The event handler can retrieve all reactions of a message inside the active channel using the [`channelService.getMessageReactions` method](../../services/ChannelService/#getmessagereactions) - #### Type declaration ▸ (`details`): `void` +By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler. + +The event handler can retrieve all reactions of a message inside the active channel using the [`channelService.getMessageReactions` method](../../services/ChannelService/#getmessagereactions) + ##### Parameters | Name | Type | @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L30) +[lib/message-reactions.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L31) --- @@ -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L18) +[lib/message-reactions.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L44) +[lib/message-reactions.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L45) • `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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L37) +[lib/message-reactions.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L38) diff --git a/docusaurus/angular_versioned_docs/version-5/services/MessageService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageService.mdx similarity index 68% rename from docusaurus/angular_versioned_docs/version-5/services/MessageService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/MessageService.mdx index 38104061..2e29a188 100644 --- a/docusaurus/angular_versioned_docs/version-5/services/MessageService.mdx +++ b/docusaurus/angular_versioned_docs/version-4/services/MessageService.mdx @@ -8,12 +8,12 @@ The message service contains configuration options related to displaying the mes • `Optional` **customLinkRenderer**: (`url`: `string`) => `string` -You can provide a custom method to display links - #### Type declaration ▸ (`url`): `string` +You can provide a custom method to display links + ##### Parameters | Name | Type | Description | @@ -24,15 +24,17 @@ You can provide a custom method to display links `string` +the HTML markup as a string for the link + #### Defined in -[projects/stream-chat-angular/src/lib/message.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message.service.ts#L24) +[lib/message.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message.service.ts#L25) --- ### displayAs -• **displayAs**: `"html"` | `"text"` = `'text'` +• **displayAs**: `"html"` \| `"text"` = `'text'` Decides if the message content should be formatted as text or HTML @@ -43,4 +45,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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message.service.ts#L17) +[lib/message.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message.service.ts#L17) diff --git a/docusaurus/angular_versioned_docs/version-4/services/NotificationService.mdx b/docusaurus/angular_versioned_docs/version-4/services/NotificationService.mdx new file mode 100644 index 00000000..9a9872e6 --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/NotificationService.mdx @@ -0,0 +1,94 @@ +# NotificationService + +The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications. + +## Properties + +### notifications$ + +• **notifications$**: `Observable`<`NotificationPayload`<{}\>[]\> + +Emits the currently active [notifications](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/notification.service.ts). + +#### Defined in + +[lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification.service.ts#L15) + +## Methods + +### addPermanentNotification + +▸ **addPermanentNotification**<`T`\>(`content`, `type?`, `translateParams?`, `templateContext?`): () => `void` + +Displays a notification, that will be visible until it's removed. + +#### Type parameters + +| Name | Type | +| :--- | :------------------------ | +| `T` | { [key: string]: `any`; } | + +#### Parameters + +| Name | Type | Default value | Description | +| :----------------- | :------------------------------ | :------------ | :--------------------------------------------------------------------- | +| `content` | `string` \| `TemplateRef`<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | +| `type` | `NotificationType` | `'error'` | The type of the notification | +| `translateParams?` | `Object` | `undefined` | Translation parameters for the `content` (for text notifications) | +| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | + +#### Returns + +`fn` + +A method to clear the notification. + +▸ (): `void` + +##### Returns + +`void` + +#### Defined in + +[lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification.service.ts#L68) + +--- + +### addTemporaryNotification + +▸ **addTemporaryNotification**<`T`\>(`content`, `type?`, `timeout?`, `translateParams?`, `templateContext?`): () => `void` + +Displays a notification for the given amount of time. + +#### Type parameters + +| Name | +| :--- | +| `T` | + +#### Parameters + +| Name | Type | Default value | Description | +| :----------------- | :------------------------------ | :------------ | :--------------------------------------------------------------------- | +| `content` | `string` \| `TemplateRef`<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | +| `type` | `NotificationType` | `'error'` | The type of the notification | +| `timeout` | `number` | `5000` | The number of milliseconds while the notification should be visible | +| `translateParams?` | `Object` | `undefined` | Translation parameters for the `content` (for text notifications) | +| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | + +#### Returns + +`fn` + +A method to clear the notification (before the timeout). + +▸ (): `void` + +##### Returns + +`void` + +#### Defined in + +[lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification.service.ts#L31) diff --git a/docusaurus/angular_versioned_docs/version-5/services/StreamI18nService.mdx b/docusaurus/angular_versioned_docs/version-4/services/StreamI18nService.mdx similarity index 80% rename from docusaurus/angular_versioned_docs/version-5/services/StreamI18nService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/StreamI18nService.mdx index a7cbefe6..a0b4065e 100644 --- a/docusaurus/angular_versioned_docs/version-5/services/StreamI18nService.mdx +++ b/docusaurus/angular_versioned_docs/version-4/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19) +[lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19) diff --git a/docusaurus/angular_versioned_docs/version-4/services/ThemeService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ThemeService.mdx new file mode 100644 index 00000000..21793e6f --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/ThemeService.mdx @@ -0,0 +1,111 @@ +# ThemeService + +The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](../theming/introduction.mdx) gives a complete overview about the topic. + +## Properties + +### theme$ + +• **theme$**: `BehaviorSubject`<`string`\> + +A Subject that can be used to get or set the currently active theme. + +#### Defined in + +[lib/theme.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L16) + +--- + +### themeVersion + +• **themeVersion**: `"1"` \| `"2"` + +Stream chat theme version - this is used internally by some UI components of the SDK, integrators shouldn't need to use this variable + +#### Defined in + +[lib/theme.service.ts:20](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L20) + +## Accessors + +### customDarkThemeVariables + +• `get` **customDarkThemeVariables**(): `undefined` \| { [key: string]: `string`; } + +A getter that returns the currently set custom dark theme variables. + +**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) + +#### Returns + +`undefined` \| { [key: string]: `string`; } + +An object where the keys are theme variables, and the values are the currently set CSS values. + +#### Defined in + +[lib/theme.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L103) + +• `set` **customDarkThemeVariables**(`variables`): `void` + +A setter that can be used to overwrite the values of the CSS theme variables of the dark theme. + +**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) + +#### Parameters + +| Name | Type | Description | +| :---------- | :------------------------------------------ | :--------------------------------------------------------------------------- | +| `variables` | `undefined` \| { [key: string]: `string`; } | An object where the keys are theme variables, and the values are CSS values. | + +#### Returns + +`void` + +An object where the keys are theme variables, and the values are the currently set CSS values. + +#### Defined in + +[lib/theme.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L112) + +--- + +### customLightThemeVariables + +• `get` **customLightThemeVariables**(): `undefined` \| { [key: string]: `string`; } + +A getter that returns the currently set custom light theme variables. + +**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) + +#### Returns + +`undefined` \| { [key: string]: `string`; } + +An object where the keys are theme variables, and the values are the currently set CSS values. + +#### Defined in + +[lib/theme.service.ts:76](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L76) + +• `set` **customLightThemeVariables**(`variables`): `void` + +A setter that can be used to overwrite the values of the CSS theme variables of the light theme. + +**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) + +#### Parameters + +| Name | Type | Description | +| :---------- | :------------------------------------------ | :--------------------------------------------------------------------------- | +| `variables` | `undefined` \| { [key: string]: `string`; } | An object where the keys are theme variables, and the values are CSS values. | + +#### Returns + +`void` + +An object where the keys are theme variables, and the values are the currently set CSS values. + +#### Defined in + +[lib/theme.service.ts:85](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L85) diff --git a/docusaurus/angular_versioned_docs/version-4/services/TransliterationService.mdx b/docusaurus/angular_versioned_docs/version-4/services/TransliterationService.mdx new file mode 100644 index 00000000..5f70e91d --- /dev/null +++ b/docusaurus/angular_versioned_docs/version-4/services/TransliterationService.mdx @@ -0,0 +1,3 @@ +# TransliterationService + +The `TransliterationService` wraps the [@sindresorhus/transliterate](https://www.npmjs.com/package/@sindresorhus/transliterate) library diff --git a/docusaurus/angular_versioned_docs/version-5/services/_category_.json b/docusaurus/angular_versioned_docs/version-4/services/_category_.json similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/services/_category_.json rename to docusaurus/angular_versioned_docs/version-4/services/_category_.json diff --git a/docusaurus/angular_versioned_docs/version-5/theming/SDKSpecific.jsx b/docusaurus/angular_versioned_docs/version-4/theming/SDKSpecific.jsx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/theming/SDKSpecific.jsx rename to docusaurus/angular_versioned_docs/version-4/theming/SDKSpecific.jsx diff --git a/docusaurus/angular_versioned_docs/version-5/theming/V2Warning.jsx b/docusaurus/angular_versioned_docs/version-4/theming/V2Warning.jsx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/theming/V2Warning.jsx rename to docusaurus/angular_versioned_docs/version-4/theming/V2Warning.jsx diff --git a/docusaurus/angular_versioned_docs/version-5/theming/_category_.json b/docusaurus/angular_versioned_docs/version-4/theming/_category_.json similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/theming/_category_.json rename to docusaurus/angular_versioned_docs/version-4/theming/_category_.json diff --git a/docusaurus/angular_versioned_docs/version-5/theming/component-variables.mdx b/docusaurus/angular_versioned_docs/version-4/theming/component-variables.mdx similarity index 95% rename from docusaurus/angular_versioned_docs/version-5/theming/component-variables.mdx rename to docusaurus/angular_versioned_docs/version-4/theming/component-variables.mdx index 01fe6afb..519ec4df 100644 --- a/docusaurus/angular_versioned_docs/version-5/theming/component-variables.mdx +++ b/docusaurus/angular_versioned_docs/version-4/theming/component-variables.mdx @@ -120,7 +120,7 @@ This page contains information about the component variables. | `--str-chat__attachment-action-box-shadow` |
`.str-chat`
`none`
| 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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss) +Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss) ### Layout variables @@ -135,7 +135,7 @@ Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v | `--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.3/src/v2/styles/AttachmentList/AttachmentList-layout.scss) +Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-layout.scss) ## AttachmentPreviewList @@ -173,7 +173,7 @@ Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v | `--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` |
`.str-chat`
`none`
| Box shadow applied to the file preview | -Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss) +Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss) ## Autocomplete @@ -226,7 +226,7 @@ Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css | `--str-chat__mention-list-emoji-item-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list | | `--str-chat__mention-list-emoji-item-box-shadow` |
`.str-chat`
`none`
| Box shadow of the emoji suggestion item in the autocomplete list | -Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss) +Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss) ### Layout variables @@ -234,7 +234,7 @@ Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4. | ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | `--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.3/src/v2/styles/Autocomplete/Autocomplete-layout.scss) +Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-layout.scss) ## Avatar @@ -253,7 +253,7 @@ Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4. | `--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.3/src/v2/styles/Avatar/Avatar-theme.scss) +Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss) ### Layout variables @@ -261,7 +261,7 @@ Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/s | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | `--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.3/src/v2/styles/Avatar/Avatar-layout.scss) +Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-layout.scss) ## Channel @@ -281,7 +281,7 @@ Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/s | `--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.3/src/v2/styles/Channel/Channel-theme.scss) +Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss) ## ChannelHeader @@ -299,7 +299,7 @@ Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/ | `--str-chat__channel-header-box-shadow` |
`.str-chat`
`none`
| 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.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) +Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) ## ChannelList @@ -328,7 +328,7 @@ Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4 | `--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.3/src/v2/styles/ChannelList/ChannelList-theme.scss) +Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss) ## ChannelPreview @@ -357,7 +357,7 @@ Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.1 | `--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.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) +Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) ## ChannelSearch - Only available in React SDK @@ -417,7 +417,7 @@ Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v | `--str-chat__channel-search-results-empty-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | | `--str-chat__channel-search-results-empty-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) +Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) ## CircleFAButton @@ -435,7 +435,7 @@ Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4 | `--str-chat__circle-fab-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | | `--str-chat__circle-fab-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) +Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) ## CTAButton @@ -455,25 +455,25 @@ Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v | `--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.3/src/v2/styles/CTAButton/CTAButton-theme.scss) +Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss) ## EditMessageForm ### Theme variables -| Name | Value(s) | Description | -| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| `--str-chat__edit-message-modal-button-border-radius` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`transparent`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 | +| Name | Value(s) | Description | +| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | +| `--str-chat__edit-message-modal-button-border-radius` |
`.str-chat`
`none`
| The border radius used for the borders of the component | +| `--str-chat__edit-message-modal-send-button-color` |
`.str-chat`
`var(--str-chat__primary-color)`
| The text color used for the send button | +| `--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 | +| `--str-chat__edit-message-modal-button-background-color` |
`.str-chat`
`transparent`
| The background color of the component | +| `--str-chat__edit-message-modal-button-border-block-start` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__edit-message-modal-button-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--str-chat__edit-message-modal-button-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | +| `--str-chat__edit-message-modal-button-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | +| `--str-chat__edit-message-modal-button-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | -Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) +Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) ## Icon - Only available in Angular SDK @@ -483,7 +483,7 @@ Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/ | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | `--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.3/src/v2/styles/Icon/Icon-theme.scss) +Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss) ### Layout variables @@ -492,7 +492,7 @@ Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src | `--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.3/src/v2/styles/Icon/Icon-layout.scss) +Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-layout.scss) ## ImageCarousel - Only available in Angular SDK @@ -502,7 +502,7 @@ Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src | ------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------ | | `--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.3/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss) +Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss) ## LoadingIndicator @@ -512,7 +512,7 @@ Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4 | ------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------- | | `--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.3/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss) +Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss) ### Layout variables @@ -520,7 +520,7 @@ Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | `--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.3/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) +Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) ## Message @@ -587,22 +587,21 @@ Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree | `--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.3/src/v2/styles/Message/Message-theme.scss) +Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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`
| | +| 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 buttons | +| `--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-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.3/src/v2/styles/Message/Message-layout.scss) +Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-layout.scss) ## MessageActionsBox @@ -628,7 +627,7 @@ Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/ | `--str-chat__message-actions-box-item-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of an item in the message actions box | | `--str-chat__message-actions-box-item-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to an item in the message actions box | -Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) +Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) ## MessageBouncePrompt @@ -646,7 +645,7 @@ Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tre | `--str-chat__message-bounce-button-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) button of the component | | `--str-chat__message-bounce-button-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the button | -Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) +Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) ## MessageInput @@ -710,7 +709,7 @@ Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/t | `--str-chat__cooldown-border-inline-end` |
`.str-chat`
`0`
| Right (left in RTL layout) border of the cooldown timer | | `--str-chat__cooldown-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the cooldown timer | -Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss) +Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss) ### Layout variables @@ -718,7 +717,7 @@ Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4. | ------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------- | | `--str-chat__dropzone-container-backdrop-filter` |
`.str-chat`
`blur(3px)`
| The backdrop filter applied to the dropzone container | -Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-layout.scss) +Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-layout.scss) ## MessageList @@ -748,7 +747,7 @@ Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4. | `--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.3/src/v2/styles/MessageList/MessageList-theme.scss) +Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss) ## MessageNotification - Only available in React SDK @@ -765,7 +764,7 @@ Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.1 | `--str-chat__message-notification-box-shadow` |
`.str-chat`
`none`
| 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.3/src/v2/styles/MessageNotification/MessageNotification-theme.scss) +Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) ## MessageReactions @@ -793,7 +792,7 @@ Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/t | `--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.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss) +Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss) ### Layout variables @@ -801,34 +800,34 @@ Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- | | `--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.3/src/v2/styles/MessageReactions/MessageReactions-layout.scss) +Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__message-reactions-options-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--str-chat__message-reactions-options-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | -| `--str-chat__message-reactions-options-border-inline-end` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__message-reactions-option-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--str-chat__message-reactions-option-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | -| `--str-chat__message-reactions-option-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -| `--str-chat__message-reactions-option-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | - -Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) +| Name | Value(s) | Description | +| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | +| `--str-chat__message-reactions-options-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| 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` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__message-reactions-options-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--str-chat__message-reactions-options-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | +| `--str-chat__message-reactions-options-border-inline-end` |
`.str-chat`
`none`
| 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)`
| 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` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__message-reactions-option-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--str-chat__message-reactions-option-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | +| `--str-chat__message-reactions-option-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | +| `--str-chat__message-reactions-option-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | + +Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) ## Modal @@ -849,7 +848,7 @@ Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat- | `--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.3/src/v2/styles/Modal/Modal-theme.scss) +Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss) ## Notification @@ -866,7 +865,7 @@ Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/sr | `--str-chat__notification-border-inline-end` |
`.str-chat`
`none`
| 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.3/src/v2/styles/Notification/Notification-theme.scss) +Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss) ## NotificationList @@ -883,7 +882,7 @@ Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v4. | `--str-chat__notification-list-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | | `--str-chat__notification-list-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | -Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/NotificationList/NotificationList-theme.scss) +Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/NotificationList/NotificationList-theme.scss) ## Thread @@ -909,7 +908,7 @@ Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree | `--str-chat__thread-header-box-shadow` |
`.str-chat`
`none`
| 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.3/src/v2/styles/Thread/Thread-theme.scss) +Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss) ## Tooltip @@ -926,7 +925,7 @@ Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/s | `--str-chat__tooltip-border-inline-end` |
`.str-chat`
`none`
| 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.3/src/v2/styles/Tooltip/Tooltip-theme.scss) +Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss) ## TypingIndicator @@ -944,7 +943,7 @@ Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/ | `--str-chat__typing-indicator-box-shadow` |
`.str-chat`
`none`
| 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.3/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) +Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) ## VirtualizedMessageList - Only available in React SDK @@ -961,4 +960,4 @@ Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/ | `--str-chat__virtual-list-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | | `--str-chat__virtual-list-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) +Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) diff --git a/docusaurus/angular_versioned_docs/version-5/theming/global-variables.mdx b/docusaurus/angular_versioned_docs/version-4/theming/global-variables.mdx similarity index 89% rename from docusaurus/angular_versioned_docs/version-5/theming/global-variables.mdx rename to docusaurus/angular_versioned_docs/version-4/theming/global-variables.mdx index 7df8fde3..a822b05d 100644 --- a/docusaurus/angular_versioned_docs/version-5/theming/global-variables.mdx +++ b/docusaurus/angular_versioned_docs/version-4/theming/global-variables.mdx @@ -38,64 +38,64 @@ You can read about each category in detail in the tables below. | 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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/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.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/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.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/Avatar/Avatar-theme.scss) | +| `--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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.3/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.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss) | +| `--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.16.1/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.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss) | ### Radius | Name | Value(s) | Description | Used in | | ---------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--str-chat__border-radius-xs` |
`.str-chat`
`8px`
| Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Tooltip/Tooltip-theme.scss) | -| `--str-chat__border-radius-sm` |
`.str-chat`
`14px`
| Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Notification/Notification-theme.scss) | -| `--str-chat__border-radius-md` |
`.str-chat`
`18px`
| Border radius used for rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | -| `--str-chat__border-radius-lg` |
`.str-chat`
`20px`
| Border radius used for rounded elements | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | -| `--str-chat__border-radius-circle` |
`.str-chat`
`999px`
| Border radius used for circular elements | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss) | +| `--str-chat__border-radius-xs` |
`.str-chat`
`8px`
| Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | +| `--str-chat__border-radius-sm` |
`.str-chat`
`14px`
| Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss) | +| `--str-chat__border-radius-md` |
`.str-chat`
`18px`
| Border radius used for rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | +| `--str-chat__border-radius-lg` |
`.str-chat`
`20px`
| Border radius used for rounded elements | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | +| `--str-chat__border-radius-circle` |
`.str-chat`
`999px`
| Border radius used for circular elements | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss) | -All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/_global-theme-variables.scss) +All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/_global-theme-variables.scss) ## Layout variables @@ -129,6 +129,6 @@ All global theme variables are defined in: [https://github.com/GetStream/stream- | --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- | | `--str-chat__theme-version` |
`:root`
`2`
| 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.3/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/_global-layout-variables.scss) +All global layout variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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/angular_versioned_docs/version-5/theming/introduction.mdx b/docusaurus/angular_versioned_docs/version-4/theming/introduction.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/theming/introduction.mdx rename to docusaurus/angular_versioned_docs/version-4/theming/introduction.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/theming/palette-variables.mdx b/docusaurus/angular_versioned_docs/version-4/theming/palette-variables.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/theming/palette-variables.mdx rename to docusaurus/angular_versioned_docs/version-4/theming/palette-variables.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/types/_category_.json b/docusaurus/angular_versioned_docs/version-4/types/_category_.json similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/types/_category_.json rename to docusaurus/angular_versioned_docs/version-4/types/_category_.json diff --git a/docusaurus/angular_versioned_docs/version-5/types/stream-message.mdx b/docusaurus/angular_versioned_docs/version-4/types/stream-message.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/types/stream-message.mdx rename to docusaurus/angular_versioned_docs/version-4/types/stream-message.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/assets/channel-preview-info.png b/docusaurus/angular_versioned_docs/version-5/assets/channel-preview-info.png deleted file mode 100644 index 2bea77f8..00000000 Binary files a/docusaurus/angular_versioned_docs/version-5/assets/channel-preview-info.png and /dev/null differ diff --git a/docusaurus/angular_versioned_docs/version-5/assets/channel-preview.png b/docusaurus/angular_versioned_docs/version-5/assets/channel-preview.png deleted file mode 100644 index 87bb2a39..00000000 Binary files a/docusaurus/angular_versioned_docs/version-5/assets/channel-preview.png and /dev/null differ diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-actions-screenshot.png b/docusaurus/angular_versioned_docs/version-5/assets/message-actions-screenshot.png deleted file mode 100644 index e37b35fd..00000000 Binary files a/docusaurus/angular_versioned_docs/version-5/assets/message-actions-screenshot.png and /dev/null differ diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-reactions-selector-screenshot.png b/docusaurus/angular_versioned_docs/version-5/assets/message-reactions-selector-screenshot.png deleted file mode 100644 index 0596a3ec..00000000 Binary files a/docusaurus/angular_versioned_docs/version-5/assets/message-reactions-selector-screenshot.png and /dev/null differ diff --git a/docusaurus/angular_versioned_docs/version-5/components/AvatarPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-5/components/AvatarPlaceholderComponent.mdx deleted file mode 100644 index 105d3831..00000000 --- a/docusaurus/angular_versioned_docs/version-5/components/AvatarPlaceholderComponent.mdx +++ /dev/null @@ -1,101 +0,0 @@ -The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. - -[//]: # "Start of generated content" - -## Inputs and outputs - -### name - -• **name**: `undefined` \| `string` - -An optional name of the image, used for fallback image or image title (if `imageUrl` is provided) - -#### Defined in - -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23) - ---- - -### imageUrl - -• **imageUrl**: `undefined` \| `string` - -The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed. - -#### Defined in - -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27) - ---- - -### location - -• **location**: `undefined` \| `AvatarLocation` - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31) - ---- - -### channel - -• `Optional` **channel**: `Channel`\<`DefaultStreamChatGenerics`\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35) - ---- - -### user - -• `Optional` **user**: `User`\<`DefaultStreamChatGenerics`\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39) - ---- - -### type - -• **type**: `undefined` \| `AvatarType` - -The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed - -#### Defined in - -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43) - ---- - -### initialsType - -• **initialsType**: `"first-letter-of-first-word"` \| `"first-letter-of-each-word"` = `'first-letter-of-first-word'` - -If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed - -#### Defined in - -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47) - ---- - -### showOnlineIndicator - -• **showOnlineIndicator**: `boolean` = `true` - -If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior. - -#### Defined in - -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L53) - -[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorPlaceholderComponent.mdx deleted file mode 100644 index 404bd82b..00000000 --- a/docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorPlaceholderComponent.mdx +++ /dev/null @@ -1,4 +0,0 @@ -The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. - -[//]: # "Start of generated content" -[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/MessageActionsBoxComponent.mdx b/docusaurus/angular_versioned_docs/version-5/components/MessageActionsBoxComponent.mdx deleted file mode 100644 index 177f5af8..00000000 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageActionsBoxComponent.mdx +++ /dev/null @@ -1,89 +0,0 @@ -import MessageActionsScreenshot from "../assets/message-actions-screenshot.png"; - -The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide. - -**Example 1** - example message actions with the message component: - - - -## Basic usage - -A typical use case for the `MessageActionsBox` component would be to use in your custom components that will completely override the message component. - -```typescript -@Component({ - selector: "app-custom-message", - template: ` - - -
{{ message.text }}
- `, -}) -export class CustomMessageComponent { - @Input() message: StreamMessage; - @Input() enabledActions: string[]; -} -``` - -## Customization - -- You can provide your own message actions box component (or just a template for the items) by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx). -- You can extend the built-in actions with custom actions, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactions) -- You can also provide a custom event handler method to be called when the message actions button is clicked, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactionclickhandler) - -[//]: # "Start of generated content" - -## Inputs and outputs - -### isMine - -• **isMine**: `boolean` = `false` - -Indicates if the message actions are belonging to a message that was sent by the current user or not. - -#### 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L37) - ---- - -### message - -• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L41) - ---- - -### messageTextHtmlElement - -• **messageTextHtmlElement**: `undefined` \| `HTMLElement` - -The HTML element which contains the message text, it's used for the "copy message text" action - -#### 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L45) - ---- - -### enabledActions - -• **enabledActions**: `string`[] = `[]` - -The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. - -#### 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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L49) - -[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/MessageReactionsComponent.mdx b/docusaurus/angular_versioned_docs/version-5/components/MessageReactionsComponent.mdx deleted file mode 100644 index 3e56af64..00000000 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageReactionsComponent.mdx +++ /dev/null @@ -1,94 +0,0 @@ -import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png"; -import MessageReactionsDetailsScreenshot from "../assets/reaction-details.png"; - -The `MessageReactions` component displays the reactions of a message. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation. - -**Example 1** - displaying reactions of a message: - - - -**Example 2** - displaying the reacting users - only visible if a message has at maximum 1200 reactions: - - - -## Basic usage - -A typical use case for the `MessageReactions` component would be to use in your custom components that will completely override the message component. - -```typescript -@Component({ - selector: "app-custom-message", - template: ` - - - `, -}) -export class CustomMessageComponent { - @Input() message: StreamMessage; -} -``` - -## Customization - -You can override the default reaction options using the [`MessageReactionsService`](../services/MessageReactionsService.mdx). - -You can provide your own UI for the reaction details using the [`MessageReactionsService`](../services/MessageReactionsService.mdx). - -You can provide your own message reactions component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx). - -[//]: # "Start of generated content" - -## Inputs and outputs - -### messageId - -• **messageId**: `undefined` \| `string` - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L33) - ---- - -### messageReactionCounts - -• **messageReactionCounts**: `Object` = `{}` - -The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts) - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L37) - ---- - -### latestReactions - -• **latestReactions**: `ReactionResponse`\<`DefaultStreamChatGenerics`\>[] = `[]` - -List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type. - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42) - ---- - -### ownReactions - -• **ownReactions**: `ReactionResponse`\<`DefaultStreamChatGenerics`\>[] = `[]` - -List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type. - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:46](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L46) - -[//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/services/AttachmentService.mdx b/docusaurus/angular_versioned_docs/version-5/services/AttachmentService.mdx deleted file mode 100644 index 648b252d..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/AttachmentService.mdx +++ /dev/null @@ -1,185 +0,0 @@ -# AttachmentService - -The `AttachmentService` manages the uploads of a message input. - -You can read more about [uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript&q=size) in the Stream API documentation. You can use Stream's API or the dashboard to customize the [file](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#file-uploads) and [image upload](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#image-uploads) configuration. - -## Type parameters - -| Name | Type | -| :--- | :---------------------------------------------------------------- | -| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | - -## Properties - -### attachmentUploadInProgressCounter$ - -• **attachmentUploadInProgressCounter$**: `Observable`\<`number`\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L25) - ---- - -### attachmentUploads$ - -• **attachmentUploads$**: `Observable`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> - -Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/AttachmentPreviewListComponent.mdx) to display the attachment previews. - -#### Defined in - -[projects/stream-chat-angular/src/lib/attachment.service.ts:29](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L29) - -## Methods - -### addAttachment - -▸ **addAttachment**(`attachment`): `void` - -You can add custom `image`, `video` and `file` attachments using this method. - -Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](./ChannelService.mdx) - -#### Parameters - -| Name | Type | -| :----------- | :------------------ | -| `attachment` | `Attachment`\<`T`\> | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/attachment.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L120) - ---- - -### createFromAttachments - -▸ **createFromAttachments**(`attachments`): `void` - -Maps attachments received from the Stream API to uploads. This is useful when editing a message. - -#### Parameters - -| Name | Type | Description | -| :------------ | :-------------------- | :------------------------------------ | -| `attachments` | `Attachment`\<`T`\>[] | Attachemnts received with the message | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/attachment.service.ts:206](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L206) - ---- - -### deleteAttachment - -▸ **deleteAttachment**(`upload`): `Promise`\<`void`\> - -Deletes an attachment, the attachment can have any state (`error`, `uploading` or `success`). - -#### Parameters - -| Name | Type | -| :------- | :------------------------------------------------ | -| `upload` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\> | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/attachment.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L145) - ---- - -### filesSelected - -▸ **filesSelected**(`fileList`): `Promise`\<`undefined` \| `boolean`\> - -Uploads the selected files, and creates preview for image files. The result is propagated throught the `attachmentUploads$` stream. - -#### Parameters - -| Name | Type | Description | -| :--------- | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `fileList` | `null` \| `File`[] \| `FileList` | The files selected by the user, if you have Blobs instead of Files, you can convert them with this method: https://developer.mozilla.org/en-US/docs/Web/API/File/File | - -#### Returns - -`Promise`\<`undefined` \| `boolean`\> - -A promise with true or false. If false is returned the upload was canceled because of a client side error. The error is emitted via the `NotificationService`. - -#### Defined in - -[projects/stream-chat-angular/src/lib/attachment.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L62) - ---- - -### mapToAttachments - -▸ **mapToAttachments**(): `Attachment`\<`DefaultGenerics`\>[] - -Maps the current uploads to a format that can be sent along with the message to the Stream API. - -#### Returns - -`Attachment`\<`DefaultGenerics`\>[] - -the attachments - -#### Defined in - -[projects/stream-chat-angular/src/lib/attachment.service.ts:175](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L175) - ---- - -### resetAttachmentUploads - -▸ **resetAttachmentUploads**(): `void` - -Resets the attachments uploads (for example after the message with the attachments sent successfully) - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/attachment.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L53) - ---- - -### retryAttachmentUpload - -▸ **retryAttachmentUpload**(`file`): `Promise`\<`void`\> - -Retries to upload an attachment. - -#### Parameters - -| Name | Type | -| :----- | :----- | -| `file` | `File` | - -#### Returns - -`Promise`\<`void`\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment.service.ts#L130) diff --git a/docusaurus/angular_versioned_docs/version-5/services/ChannelService.mdx b/docusaurus/angular_versioned_docs/version-5/services/ChannelService.mdx deleted file mode 100644 index 1c8220c4..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/ChannelService.mdx +++ /dev/null @@ -1,1512 +0,0 @@ -# ChannelService - -The `ChannelService` provides data and interaction for the channel list and message list. - -## Type parameters - -| Name | Type | -| :--- | :---------------------------------------------------------------- | -| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | - -## Properties - -### activeChannel$ - -• **activeChannel$**: `Observable`\<`undefined` \| `Channel`\<`T`\>\> - -Emits the currently active channel. - -:::important -If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail. -::: - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L80) - ---- - -### activeChannelLastReadMessageId - -• `Optional` **activeChannelLastReadMessageId**: `string` - -The last read message id of the active channel, it's used by the message list component to display unread UI, and jump to latest read message - -This property isn't always updated, please use `channel.read` to display up-to-date read information - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L132) - ---- - -### activeChannelMessages$ - -• **activeChannelMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L84) - ---- - -### activeChannelPinnedMessages$ - -• **activeChannelPinnedMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L88) - ---- - -### activeChannelUnreadCount - -• `Optional` **activeChannelUnreadCount**: `number` - -The unread count of the active channel, it's used by the message list component to display unread UI - -This property isn't always updated, please use `channel.read` to display up-to-date read information - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L138) - ---- - -### activeParentMessage$ - -• **activeParentMessage$**: `Observable`\<`undefined` \| `StreamMessage`\<`T`\>\> - -Emits the currently selected parent message. If no message is selected, it emits undefined. - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:100](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L100) - ---- - -### activeParentMessageId$ - -• **activeParentMessageId$**: `Observable`\<`undefined` \| `string`\> - -Emits the id of the currently selected parent message. If no message is selected, it emits undefined. - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:92](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L92) - ---- - -### activeThreadMessages$ - -• **activeThreadMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\> - -Emits the list of currently loaded thread replies belonging to the selected parent message. If there is no currently active thread it emits an empty array. - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L96) - ---- - -### beforeSendMessage - -• `Optional` **beforeSendMessage**: (`input`: `MessageInput`\<`T`\>) => `MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\> - -The provided method will be called before a new message is sent to Stream's API. You can use this hook to tranfrom or enrich the message being sent. - -#### Type declaration - -▸ (`input`): `MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\> - -##### Parameters - -| Name | Type | -| :------ | :-------------------- | -| `input` | `MessageInput`\<`T`\> | - -##### Returns - -`MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L305) - ---- - -### beforeUpdateMessage - -• `Optional` **beforeUpdateMessage**: (`message`: `StreamMessage`\<`T`\>) => `StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\> - -The provided method will be called before a message is sent to Stream's API for update. You can use this hook to tranfrom or enrich the message being updated. - -#### Type declaration - -▸ (`message`): `StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\> - -##### Parameters - -| Name | Type | -| :-------- | :--------------------- | -| `message` | `StreamMessage`\<`T`\> | - -##### Returns - -`StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L311) - ---- - -### bouncedMessage$ - -• **bouncedMessage$**: `BehaviorSubject`\<`undefined` \| `StreamMessage`\<`T`\>\> - -If you're using [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters) you can set up rules for bouncing messages. - -If a message is bounced, it will be emitted via this `Observable`. The built-in [`MessageBouncePrompt` component](../../components/MessageBouncePromptComponent) will display the bounce option to the user if a bounced message is clicked. - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:126](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L126) - ---- - -### channelQueryState$ - -• **channelQueryState$**: `Observable`\<`undefined` \| `ChannelQueryState`\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L70) - ---- - -### channels$ - -• **channels$**: `Observable`\<`undefined` \| `Channel`\<`T`\>[]\> - -Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel list. - -:::important -If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail. -::: - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L66) - ---- - -### customAddedToChannelNotificationHandler - -• `Optional` **customAddedToChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` - -Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`clientEvent`, `channelListSetter`): `void` - -##### Parameters - -| Name | Type | -| :------------------ | :------------------------------------------------------------------------------------------ | -| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:156](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L156) - ---- - -### customChannelDeletedHandler - -• `Optional` **customChannelDeletedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` - -Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### Parameters - -| Name | Type | -| :-------------------- | :------------------------------------------------------------------------------------------ | -| `event` | `Event`\<`DefaultGenerics`\> | -| `channel` | `Channel`\<`T`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L180) - ---- - -### customChannelHiddenHandler - -• `Optional` **customChannelHiddenHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` - -Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### Parameters - -| Name | Type | -| :-------------------- | :------------------------------------------------------------------------------------------ | -| `event` | `Event`\<`DefaultGenerics`\> | -| `channel` | `Channel`\<`T`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L228) - ---- - -### customChannelTruncatedHandler - -• `Optional` **customChannelTruncatedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` - -Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### Parameters - -| Name | Type | -| :-------------------- | :------------------------------------------------------------------------------------------ | -| `event` | `Event`\<`DefaultGenerics`\> | -| `channel` | `Channel`\<`T`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L212) - ---- - -### customChannelUpdatedHandler - -• `Optional` **customChannelUpdatedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>) => `void`) => `void` - -Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### Parameters - -| Name | Type | -| :-------------------- | :------------------------------------------------------------------------------------------ | -| `event` | `Event`\<`DefaultGenerics`\> | -| `channel` | `Channel`\<`T`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L196) - ---- - -### customChannelVisibleHandler - -• `Optional` **customChannelVisibleHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` - -Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### Parameters - -| Name | Type | -| :-------------------- | :------------------------------------------------------------------------------------------ | -| `event` | `Event`\<`DefaultGenerics`\> | -| `channel` | `Channel`\<`T`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:244](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L244) - ---- - -### customFileDeleteRequest - -• `Optional` **customFileDeleteRequest**: (`url`: `string`, `channel`: `Channel`\<`T`\>) => `Promise`\<`void`\> - -You can override the default file delete request - override this if you use your own CDN - -#### Type declaration - -▸ (`url`, `channel`): `Promise`\<`void`\> - -##### Parameters - -| Name | Type | -| :-------- | :--------------- | -| `url` | `string` | -| `channel` | `Channel`\<`T`\> | - -##### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L288) - ---- - -### customFileUploadRequest - -• `Optional` **customFileUploadRequest**: (`file`: `File`, `channel`: `Channel`\<`T`\>) => `Promise`\<\{ `file`: `string` }\> - -You can override the default file upload request - you can use this to upload files to your own CDN - -#### Type declaration - -▸ (`file`, `channel`): `Promise`\<\{ `file`: `string` }\> - -##### Parameters - -| Name | Type | -| :-------- | :--------------- | -| `file` | `File` | -| `channel` | `Channel`\<`T`\> | - -##### Returns - -`Promise`\<\{ `file`: `string` }\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:274](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L274) - ---- - -### customImageDeleteRequest - -• `Optional` **customImageDeleteRequest**: (`url`: `string`, `channel`: `Channel`\<`T`\>) => `Promise`\<`void`\> - -You can override the default image delete request - override this if you use your own CDN - -#### Type declaration - -▸ (`url`, `channel`): `Promise`\<`void`\> - -##### Parameters - -| Name | Type | -| :-------- | :--------------- | -| `url` | `string` | -| `channel` | `Channel`\<`T`\> | - -##### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:292](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L292) - ---- - -### customImageUploadRequest - -• `Optional` **customImageUploadRequest**: (`file`: `File`, `channel`: `Channel`\<`T`\>) => `Promise`\<\{ `file`: `string` }\> - -You can override the default image upload request - you can use this to upload images to your own CDN - -#### Type declaration - -▸ (`file`, `channel`): `Promise`\<\{ `file`: `string` }\> - -##### Parameters - -| Name | Type | -| :-------- | :--------------- | -| `file` | `File` | -| `channel` | `Channel`\<`T`\> | - -##### Returns - -`Promise`\<\{ `file`: `string` }\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:281](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L281) - ---- - -### customNewMessageHandler - -• `Optional` **customNewMessageHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` - -Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### Parameters - -| Name | Type | -| :-------------------- | :------------------------------------------------------------------------------------------ | -| `event` | `Event`\<`DefaultGenerics`\> | -| `channel` | `Channel`\<`T`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L260) - ---- - -### customNewMessageNotificationHandler - -• `Optional` **customNewMessageNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` - -Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`clientEvent`, `channelListSetter`): `void` - -##### Parameters - -| Name | Type | -| :------------------ | :------------------------------------------------------------------------------------------ | -| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L144) - ---- - -### customRemovedFromChannelNotificationHandler - -• `Optional` **customRemovedFromChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` - -Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). - -If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. - -#### Type declaration - -▸ (`clientEvent`, `channelListSetter`): `void` - -##### Parameters - -| Name | Type | -| :------------------ | :------------------------------------------------------------------------------------------ | -| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:168](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L168) - ---- - -### hasMoreChannels$ - -• **hasMoreChannels$**: `Observable`\<`boolean`\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L58) - ---- - -### jumpToMessage$ - -• **jumpToMessage$**: `Observable`\<\{ `id?`: `string` ; `parentId?`: `string` }\> - -Emits the ID of the message the message list should jump to (can be a channel message or thread message) - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L108) - ---- - -### latestMessageDateByUserByChannels$ - -• **latestMessageDateByUserByChannels$**: `Observable`\<\{ `[key: string]`: `Date`; }\> - -Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started) - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L120) - ---- - -### messageDeleteConfirmationHandler - -• `Optional` **messageDeleteConfirmationHandler**: (`message`: `StreamMessage`\<`T`\>) => `Promise`\<`boolean`\> - -The provided method will be called before deleting a message. If the returned Promise resolves to `true` to deletion will go ahead. If `false` is returned, the message won't be deleted. - -#### Type declaration - -▸ (`message`): `Promise`\<`boolean`\> - -##### Parameters - -| Name | Type | -| :-------- | :--------------------- | -| `message` | `StreamMessage`\<`T`\> | - -##### Returns - -`Promise`\<`boolean`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:299](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L299) - ---- - -### messageToQuote$ - -• **messageToQuote$**: `Observable`\<`undefined` \| `StreamMessage`\<`T`\>\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L104) - ---- - -### usersTypingInChannel$ - -• **usersTypingInChannel$**: `Observable`\<`UserResponse`\<`T`\>[]\> - -Emits the list of users that are currently typing in the channel (current user is not included) - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L112) - ---- - -### usersTypingInThread$ - -• **usersTypingInThread$**: `Observable`\<`UserResponse`\<`T`\>[]\> - -Emits the list of users that are currently typing in the active thread (current user is not included) - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L116) - ---- - -### MAX_MESSAGE_COUNT_IN_MESSAGE_LIST - -▪ `Static` `Readonly` **MAX_MESSAGE_COUNT_IN_MESSAGE_LIST**: `250` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L317) - ---- - -### MAX_MESSAGE_REACTIONS_TO_FETCH - -▪ `Static` `Readonly` **MAX_MESSAGE_REACTIONS_TO_FETCH**: `1200` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:321](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L321) - -## Accessors - -### activeChannel - -• `get` **activeChannel**(): `undefined` \| `Channel`\<`T`\> - -The current active channel - -#### Returns - -`undefined` \| `Channel`\<`T`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1638](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1638) - ---- - -### activeChannelMessages - -• `get` **activeChannelMessages**(): (`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[] - -The current active channel messages - -#### Returns - -(`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[] - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1645](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1645) - ---- - -### channels - -• `get` **channels**(): `Channel`\<`T`\>[] - -The current list of channels - -#### Returns - -`Channel`\<`T`\>[] - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1631](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1631) - ---- - -### customPaginator - -• `set` **customPaginator**(`paginator`): `void` - -By default the SDK uses an offset based pagination, you can change/extend this by providing your own custom paginator method. - -The method will be called with the result of the latest channel query. - -You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method. - -#### Parameters - -| Name | Type | -| :---------- | :----------------------------------------------------------------------------------- | -| `paginator` | `undefined` \| (`channelQueryResult`: `Channel`\<`T`\>[]) => `NextPageConfiguration` | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:570](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L570) - ---- - -### shouldMarkActiveChannelAsRead - -• `get` **shouldMarkActiveChannelAsRead**(): `boolean` - -If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read. - -#### Returns - -`boolean` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:546](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L546) - -• `set` **shouldMarkActiveChannelAsRead**(`shouldMarkActiveChannelAsRead`): `void` - -If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read. - -#### Parameters - -| Name | Type | -| :------------------------------ | :-------- | -| `shouldMarkActiveChannelAsRead` | `boolean` | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:553](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L553) - -## Methods - -### addChannel - -▸ **addChannel**(`channel`): `void` - -Add a new channel to the channel list -The channel will be added to the beginning of the channel list - -#### Parameters - -| Name | Type | -| :-------- | :--------------- | -| `channel` | `Channel`\<`T`\> | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1150](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1150) - ---- - -### addReaction - -▸ **addReaction**(`messageId`, `reactionType`, `customData?`): `Promise`\<`void`\> - -Adds a reaction to a message. - -#### Parameters - -| Name | Type | Description | -| :------------- | :---------------------- | :------------------------------------------- | -| `messageId` | `string` | The id of the message to add the reaction to | -| `reactionType` | `string` | The type of the reaction | -| `customData?` | `T`[``"reactionType"``] | | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:827](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L827) - ---- - -### autocompleteMembers - -▸ **autocompleteMembers**(`searchTerm`): `Promise`\<`ChannelMemberResponse`\<`T`\>[]\> - -Returns the autocomplete options for current channel members. If the channel has less than 100 members, it returns the channel members, otherwise sends a [search request](https://getstream.io/chat/docs/javascript/query_members/?language=javascript#pagination-and-ordering) with the given search term. - -#### Parameters - -| Name | Type | Description | -| :----------- | :------- | :----------------------------------------- | -| `searchTerm` | `string` | Text to search for in the names of members | - -#### Returns - -`Promise`\<`ChannelMemberResponse`\<`T`\>[]\> - -The list of members matching the search filter - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1077](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1077) - ---- - -### clearMessageJump - -▸ **clearMessageJump**(): `void` - -Clears the currently selected message to jump - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1310](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1310) - ---- - -### deleteAttachment - -▸ **deleteAttachment**(`attachmentUpload`): `Promise`\<`void`\> - -Deletes an uploaded file by URL. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation - -#### Parameters - -| Name | Type | Description | -| :----------------- | :------------------------------------------------ | :-------------------------------------------------------------------------------------- | -| `attachmentUpload` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\> | Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx)) | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1061](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1061) - ---- - -### deleteMessage - -▸ **deleteMessage**(`message`, `isLocalDelete?`): `Promise`\<`void`\> - -Deletes the message from the active channel - -#### Parameters - -| Name | Type | Default value | Description | -| :-------------- | :--------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------- | -| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | `undefined` | Message to be deleted | -| `isLocalDelete` | `boolean` | `false` | set this `true` if you want to delete a message that's only part of the local state, not yet saved on the backend | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:949](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L949) - ---- - -### deselectActiveChannel - -▸ **deselectActiveChannel**(): `void` - -Deselects the currently active (if any) channel - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:618](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L618) - ---- - -### getMessageReactions - -▸ **getMessageReactions**(`messageId`): `Promise`\<`ReactionResponse`\<`T`\>[]\> - -Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions). - -#### Parameters - -| Name | Type | -| :---------- | :------- | -| `messageId` | `string` | - -#### Returns - -`Promise`\<`ReactionResponse`\<`T`\>[]\> - -all reactions of a message - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1654](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1654) - ---- - -### init - -▸ **init**(`filters`, `sort?`, `options?`, `shouldSetActiveChannel?`): `Promise`\<`Channel`\<`T`\>[]\> - -Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read. - -#### Parameters - -| Name | Type | Default value | Description | -| :----------------------- | :---------------------- | :------------ | :------------------------------------------------------------------------------------- | -| `filters` | `ChannelFilters`\<`T`\> | `undefined` | | -| `sort?` | `ChannelSort`\<`T`\> | `undefined` | | -| `options?` | `ChannelOptions` | `undefined` | | -| `shouldSetActiveChannel` | `boolean` | `true` | Decides if the first channel in the result should be made as an active channel or not. | - -#### Returns - -`Promise`\<`Channel`\<`T`\>[]\> - -the list of channels found by the query - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:751](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L751) - ---- - -### initWithCustomQuery - -▸ **initWithCustomQuery**(`query`, `options?`): `Promise`\<`Channel`\<`T`\>[]\> - -Queries the channels with the given query function. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. - -#### Parameters - -| Name | Type | Description | -| :------------------------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | -| `query` | (`queryType`: `ChannelQueryType`) => `Promise`\<`ChannelQueryResult`\<`T`\>\> | | -| `options` | `Object` | | -| `options.messagePageSize` | `number` | How many messages should we load? The default is 25 | -| `options.shouldSetActiveChannel` | `boolean` | The `shouldSetActiveChannel` specifies if the first channel in the result should be selected as the active channel or not. Default is `true`. | - -#### Returns - -`Promise`\<`Channel`\<`T`\>[]\> - -the channels that were loaded - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:787](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L787) - ---- - -### jumpToMessage - -▸ **jumpToMessage**(`messageId`, `parentMessageId?`): `Promise`\<`void`\> - -Jumps to the selected message inside the message list, if the message is not yet loaded, it'll load the message (and it's surroundings) from the API. - -#### Parameters - -| Name | Type | Description | -| :----------------- | :------- | :----------------------------------------------------------------------------- | -| `messageId` | `string` | The ID of the message to be loaded, 'latest' means jump to the latest messages | -| `parentMessageId?` | `string` | The ID of the parent message if we want to load a thread message | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1282](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1282) - ---- - -### loadMoreChannels - -▸ **loadMoreChannels**(): `Promise`\<`void`\> - -Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:817](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L817) - ---- - -### loadMoreMessages - -▸ **loadMoreMessages**(`direction?`): `undefined` \| `false` \| `Promise`\<`QueryChannelAPIResponse`\<`T`\>\> - -Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. - -#### Parameters - -| Name | Type | Default value | -| :---------- | :--------------------- | :------------ | -| `direction` | `"older"` \| `"newer"` | `'older'` | - -#### Returns - -`undefined` \| `false` \| `Promise`\<`QueryChannelAPIResponse`\<`T`\>\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:679](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L679) - ---- - -### loadMoreThreadReplies - -▸ **loadMoreThreadReplies**(`direction?`): `false` \| `Promise`\<`void`\> - -Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. - -#### Parameters - -| Name | Type | Default value | -| :---------- | :--------------------- | :------------ | -| `direction` | `"older"` \| `"newer"` | `'older'` | - -#### Returns - -`false` \| `Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:718](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L718) - ---- - -### markMessageUnread - -▸ **markMessageUnread**(`messageId`): `Promise`\<`undefined` \| `null` \| `APIResponse`\> - -Marks the channel from the given message as unread - -#### Parameters - -| Name | Type | -| :---------- | :------- | -| `messageId` | `string` | - -#### Returns - -`Promise`\<`undefined` \| `null` \| `APIResponse`\> - -the result of the request - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1687](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1687) - ---- - -### pinMessage - -▸ **pinMessage**(`message`): `Promise`\<`void`\> - -Pins the given message in the channel - -#### Parameters - -| Name | Type | -| :-------- | :--------------------------------------------- | -| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1318](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1318) - ---- - -### removeChannel - -▸ **removeChannel**(`cid`, `shouldStopWatching?`): `void` - -#### Parameters - -| Name | Type | Default value | -| :------------------- | :-------- | :------------ | -| `cid` | `string` | `undefined` | -| `shouldStopWatching` | `boolean` | `true` | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1162](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1162) - ---- - -### removeOldMessageFromMessageList - -▸ **removeOldMessageFromMessageList**(): `void` - -internal - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:524](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L524) - ---- - -### removeReaction - -▸ **removeReaction**(`messageId`, `reactionType`): `Promise`\<`void`\> - -Removes a reaction from a message. - -#### Parameters - -| Name | Type | Description | -| :------------- | :------- | :------------------------------------------------ | -| `messageId` | `string` | The id of the message to remove the reaction from | -| `reactionType` | `string` | Thr type of reaction to remove | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:843](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L843) - ---- - -### resendMessage - -▸ **resendMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\>\> - -Resends the given message to the active channel - -#### Parameters - -| Name | Type | Description | -| :-------- | :--------------------------------------------- | :-------------------- | -| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | The message to resend | - -#### Returns - -`Promise`\<`StreamMessage`\<`T`\>\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:897](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L897) - ---- - -### reset - -▸ **reset**(): `void` - -Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser). - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:801](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L801) - ---- - -### selectMessageToQuote - -▸ **selectMessageToQuote**(`message`): `void` - -Selects or deselects the current message to quote reply to - -#### Parameters - -| Name | Type | Description | -| :-------- | :------------------------------------------------------------ | :-------------------------------------------------------------------------- | -| `message` | `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> | The message to select, if called with `undefined`, it deselects the message | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1141](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1141) - ---- - -### sendAction - -▸ **sendAction**(`messageId`, `formData`, `parentMessageId?`): `Promise`\<`void`\> - -[Runs a message action](https://getstream.io/chat/docs/rest/#messages-runmessageaction) in the current channel. Updates the message list based on the action result (if no message is returned, the message will be removed from the message list). - -#### Parameters - -| Name | Type | -| :----------------- | :----------------------------- | -| `messageId` | `string` | -| `formData` | `Record`\<`string`, `string`\> | -| `parentMessageId?` | `string` | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1104](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1104) - ---- - -### sendMessage - -▸ **sendMessage**(`text`, `attachments?`, `mentionedUsers?`, `parentId?`, `quotedMessageId?`, `customData?`): `Promise`\<`StreamMessage`\<`T`\>\> - -Sends a message to the active channel. The message is immediately added to the message list, if an error occurs and the message can't be sent, the error is indicated in `state` of the message. - -#### Parameters - -| Name | Type | Default value | Description | -| :---------------- | :------------------------------------------------- | :------------ | :---------------------------------------------------- | -| `text` | `string` | `undefined` | The text of the message | -| `attachments` | `Attachment`\<`T`\>[] | `[]` | The attachments | -| `mentionedUsers` | `UserResponse`\<`T`\>[] | `[]` | Mentioned users | -| `parentId` | `undefined` \| `string` | `undefined` | Id of the parent message (if sending a thread reply) | -| `quotedMessageId` | `undefined` \| `string` | `undefined` | Id of the message to quote (if sending a quote reply) | -| `customData` | `undefined` \| `Partial`\<`T`[``"messageType"``]\> | `undefined` | | - -#### Returns - -`Promise`\<`StreamMessage`\<`T`\>\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:858](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L858) - ---- - -### setAsActiveChannel - -▸ **setAsActiveChannel**(`channel`): `void` - -Sets the given `channel` as active and marks it as read. -If the channel wasn't previously part of the channel, it will be added to the beginning of the list. - -#### Parameters - -| Name | Type | -| :-------- | :--------------- | -| `channel` | `Channel`\<`T`\> | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:586](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L586) - ---- - -### setAsActiveParentMessage - -▸ **setAsActiveParentMessage**(`message`, `loadMessagesForm?`): `Promise`\<`void`\> - -Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message. - -#### Parameters - -| Name | Type | Default value | -| :----------------- | :------------------------------------ | :------------ | -| `message` | `undefined` \| `StreamMessage`\<`T`\> | `undefined` | -| `loadMessagesForm` | `"state"` \| `"request"` | `'request'` | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:644](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L644) - ---- - -### typingStarted - -▸ **typingStarted**(`parentId?`): `Promise`\<`void`\> - -Call this method if user started typing in the active channel - -#### Parameters - -| Name | Type | Description | -| :---------- | :------- | :---------------------------------------------------------- | -| `parentId?` | `string` | The id of the parent message, if user is typing in a thread | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1614](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1614) - ---- - -### typingStopped - -▸ **typingStopped**(`parentId?`): `Promise`\<`void`\> - -Call this method if user stopped typing in the active channel - -#### Parameters - -| Name | Type | Description | -| :---------- | :------- | :------------------------------------------------------------ | -| `parentId?` | `string` | The id of the parent message, if user were typing in a thread | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1623](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1623) - ---- - -### unpinMessage - -▸ **unpinMessage**(`message`): `Promise`\<`void`\> - -Removes the given message from pinned messages - -#### Parameters - -| Name | Type | -| :-------- | :--------------------------------------------- | -| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1337](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L1337) - ---- - -### updateMessage - -▸ **updateMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"`\> & `UR` & {}\> - -Updates the message in the active channel - -#### Parameters - -| Name | Type | Description | -| :-------- | :--------------------- | :------------------- | -| `message` | `StreamMessage`\<`T`\> | Mesage to be updated | - -#### Returns - -`Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"`\> & `UR` & {}\> - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:914](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L914) - ---- - -### uploadAttachments - -▸ **uploadAttachments**(`uploads`): `Promise`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> - -Uploads files to the channel. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation. - -#### Parameters - -| Name | Type | Description | -| :-------- | :-------------------------------------------------- | :--------------------------------------------------------------------------------------- | -| `uploads` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\>[] | the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx)) | - -#### Returns - -`Promise`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> - -the result of file upload requests - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:981](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/channel.service.ts#L981) diff --git a/docusaurus/angular_versioned_docs/version-5/services/CustomTemplatesService.mdx b/docusaurus/angular_versioned_docs/version-5/services/CustomTemplatesService.mdx deleted file mode 100644 index 6ca6acd5..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/CustomTemplatesService.mdx +++ /dev/null @@ -1,515 +0,0 @@ -# CustomTemplatesService - -A central location for registering your custom templates to override parts of the chat application. - -For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application). - -You can find the type definitions of the context that is provided for each template [on GitHub](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angu) - -## Type parameters - -| Name | Type | -| :--- | :---------------------------------------------------------------- | -| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | - -## Properties - -### attachmentActionsTemplate$ - -• **attachmentActionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> - -The template that can be used to override how attachment actions are displayed inside the [attachment list](../components/AttachmentListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:276](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L276) - ---- - -### attachmentListTemplate$ - -• **attachmentListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentListContext`\>\> - -The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L109) - ---- - -### attachmentPreviewListTemplate$ - -• **attachmentPreviewListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentPreviewListContext`\>\> - -The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L116) - ---- - -### avatarTemplate$ - -• **avatarTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AvatarContext`\>\> - -The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L123) - ---- - -### cardAttachmentTemplate$ - -• **cardAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> - -The template that can be used to override how a card attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:270](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L270) - ---- - -### channelActionsTemplate$ - -• **channelActionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelActionsContext`\<`DefaultStreamChatGenerics`\>\>\> - -The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:102](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L102) - ---- - -### channelHeaderInfoTemplate$ - -• **channelHeaderInfoTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelHeaderInfoContext`\<`DefaultStreamChatGenerics`\>\>\> - -The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L227) - ---- - -### channelPreviewInfoTemplate$ - -• **channelPreviewInfoTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelPreviewInfoContext`\<`DefaultStreamChatGenerics`\>\>\> - -Template used to display the channel information inside the [channel list item](../components/ChannelPreviewComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329) - ---- - -### channelPreviewTemplate$ - -• **channelPreviewTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelPreviewContext`\<`DefaultStreamChatGenerics`\>\>\> - -Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:67](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L67) - ---- - -### commandAutocompleteItemTemplate$ - -• **commandAutocompleteItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CommandAutocompleteListItemContext`\>\> - -The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L60) - ---- - -### customAttachmentUploadTemplate$ - -• **customAttachmentUploadTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomAttachmentUploadContext`\>\> - -The template used for displaying file upload/attachment selector inside the [message input](../components/MessageInputComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:234](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L234) - ---- - -### customMessageMetadataTemplate$ - -• **customMessageMetadataTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomMetadataContext`\<`T`\>\>\> - -Template to display custom metadata inside [message component](../components/MessageComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:220](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L220) - ---- - -### dateSeparatorTemplate$ - -• **dateSeparatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`DateSeparatorContext`\>\> - -The template used to display the date separator inside the [message list](../components/MessageListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L288) - ---- - -### deliveredStatusTemplate$ - -• **deliveredStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`DeliveredStatusContext`\>\> - -The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx) - -Displayed for the last message sent by the current user, if the message isn't yet read by anyone - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:195](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L195) - ---- - -### emojiPickerTemplate$ - -• **emojiPickerTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`EmojiPickerContext`\>\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L81) - ---- - -### emptyMainMessageListPlaceholder$ - -• **emptyMainMessageListPlaceholder$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L310) - ---- - -### emptyThreadMessageListPlaceholder$ - -• **emptyThreadMessageListPlaceholder$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L316) - ---- - -### fileAttachmentTemplate$ - -• **fileAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> - -The template that can be used to override how a file attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:264](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L264) - ---- - -### galleryAttachmentTemplate$ - -• **galleryAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> - -The template that can be used to override how image gallery is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:258](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L258) - ---- - -### iconTemplate$ - -• **iconTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`IconContext`\>\> - -Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L130) - ---- - -### imageAttachmentTemplate$ - -• **imageAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> - -The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:240](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L240) - ---- - -### loadingIndicatorTemplate$ - -• **loadingIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> - -Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L137) - ---- - -### mentionAutocompleteItemTemplate$ - -• **mentionAutocompleteItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MentionAutcompleteListItemContext`\>\> - -The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L54) - ---- - -### mentionTemplate$ - -• **mentionTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MentionTemplateContext`\>\> - -The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:74](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L74) - ---- - -### messageActionsBoxItemTemplate$ - -• **messageActionsBoxItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageActionBoxItemContext`\<`DefaultStreamChatGenerics`\>\>\> - -The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:151](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L151) - ---- - -### messageActionsBoxTemplate$ - -• **messageActionsBoxTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageActionsBoxContext`\<`DefaultStreamChatGenerics`\>\>\> - -Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L144) - ---- - -### messageBouncePromptTemplate$ - -• **messageBouncePromptTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> - -The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:322](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L322) - ---- - -### messageReactionsSelectorTemplate$ - -• **messageReactionsSelectorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageReactionsSelectorContext`\>\> - -The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:165](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L165) - ---- - -### messageReactionsTemplate$ - -• **messageReactionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageReactionsContext`\>\> - -The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L158) - ---- - -### messageTemplate$ - -• **messageTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageContext`\>\> - -The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:95](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L95) - ---- - -### modalTemplate$ - -• **modalTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ModalContext`\>\> - -The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx)) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:172](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L172) - ---- - -### newMessagesIndicatorTemplate$ - -• **newMessagesIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`UnreadMessagesIndicatorContext`\>\> - -The template used to display unread messages indicator inside the [message list](../components/MessageListComponent.mdx) when the channel is opened - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L296) - ---- - -### newMessagesNotificationTemplate$ - -• **newMessagesNotificationTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`UnreadMessagesNotificationContext`\>\> - -The template used to display unread messages notification inside the [message list](../components/MessageListComponent.mdx) when the channel is opened - -Users can use this notification to jump to the first unread message when it's clicked - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L304) - ---- - -### notificationTemplate$ - -• **notificationTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`NotificationContext`\>\> - -The template used to override the [default notification component](../components/NotificationComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L179) - ---- - -### readStatusTemplate$ - -• **readStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ReadStatusContext`\>\> - -The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx) - -Displayed for the last message sent by the current user, if the message is read at least by one user - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:213](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L213) - ---- - -### sendingStatusTemplate$ - -• **sendingStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`SendingStatusContext`\>\> - -The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx) - -Displayed for the last message sent by the current user, if the message is currently being sent - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:204](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L204) - ---- - -### systemMessageTemplate$ - -• **systemMessageTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`SystemMessageContext`\>\> - -The template used to display [system messages](https://getstream.io/chat/docs/javascript/silent_messages/?language=javascript&q=system) indise the [message component](../components/MessageComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:282](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L282) - ---- - -### threadHeaderTemplate$ - -• **threadHeaderTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ThreadHeaderContext`\>\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L186) - ---- - -### typingIndicatorTemplate$ - -• **typingIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`TypingIndicatorContext`\>\> - -The typing indicator template used in the [message list](../components/MessageListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L88) - ---- - -### videoAttachmentTemplate$ - -• **videoAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> - -The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:252](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L252) - ---- - -### voiceRecordingAttachmentTemplate$ - -• **voiceRecordingAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> - -The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx), by default the [voice recording component](../components/VoiceRecordingComponent.mdx) is used - -#### Defined in - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L246) diff --git a/docusaurus/angular_versioned_docs/version-5/services/MessageActionsService.mdx b/docusaurus/angular_versioned_docs/version-5/services/MessageActionsService.mdx deleted file mode 100644 index 44fa0c69..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/MessageActionsService.mdx +++ /dev/null @@ -1,96 +0,0 @@ -# MessageActionsService - -The message actions service provides customization options for the [message actions](../../components/MessageActionsBoxComponent) - -## Type parameters - -| Name | Type | -| :--- | :---------------------------------------------------------------- | -| `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | - -## Properties - -### customActionClickHandler - -• `Optional` **customActionClickHandler**: (`details`: `MessageActionsClickDetails`\<`T`\>) => `void` - -By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler. - -#### Type declaration - -▸ (`details`): `void` - -##### Parameters - -| Name | Type | -| :-------- | :---------------------------------- | -| `details` | `MessageActionsClickDetails`\<`T`\> | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-actions.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L188) - ---- - -### customActions$ - -• **customActions$**: `BehaviorSubject`\<`CustomMessageActionItem`\<`DefaultStreamChatGenerics`\>[]\> - -You can pass your own custom actions that will be displayed inside the built-in message actions component - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-actions.service.ts:184](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L184) - ---- - -### defaultActions - -• `Readonly` **defaultActions**: (`MessageActionItem`\<`T`\> \| `MessageReactionActionItem`\<`T`\>)[] - -Default actions - these are the actions that are handled by the built-in component - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-actions.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L28) - ---- - -### messageToEdit$ - -• **messageToEdit$**: `BehaviorSubject`\<`undefined` \| `StreamMessage`\<`T`\>\> - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L180) - -## Methods - -### getAuthorizedMessageActionsCount - -▸ **getAuthorizedMessageActionsCount**(`message`, `enabledActions`): `number` - -This method returns how many authorized actions are available to the given message - -#### Parameters - -| Name | Type | -| :--------------- | :--------------------- | -| `message` | `StreamMessage`\<`T`\> | -| `enabledActions` | `string`[] | - -#### Returns - -`number` - -the count - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-actions.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L227) diff --git a/docusaurus/angular_versioned_docs/version-5/services/MessageInputConfigService.mdx b/docusaurus/angular_versioned_docs/version-5/services/MessageInputConfigService.mdx deleted file mode 100644 index 68891d7f..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/MessageInputConfigService.mdx +++ /dev/null @@ -1,63 +0,0 @@ -# MessageInputConfigService - -The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component. - -## Properties - -### areMentionsEnabled - -• **areMentionsEnabled**: `undefined` | `boolean` = `true` - -If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17) - ---- - -### inputMode - -• **inputMode**: `"mobile"` \| `"desktop"` = `'desktop'` - -In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L30) - ---- - -### isFileUploadEnabled - -• **isFileUploadEnabled**: `undefined` \| `boolean` = `true` - -If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L13) - ---- - -### isMultipleFileUploadEnabled - -• **isMultipleFileUploadEnabled**: `undefined` \| `boolean` = `true` - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L21) - ---- - -### mentionScope - -• **mentionScope**: `undefined` \| `"channel"` \| `"application"` = `'channel'` - -The scope for user mentions, either members of the current channel of members of the application - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L25) diff --git a/docusaurus/angular_versioned_docs/version-5/services/NotificationService.mdx b/docusaurus/angular_versioned_docs/version-5/services/NotificationService.mdx deleted file mode 100644 index 95750f9e..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/NotificationService.mdx +++ /dev/null @@ -1,94 +0,0 @@ -# NotificationService - -The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications. - -## Properties - -### notifications$ - -• **notifications$**: `Observable`<`NotificationPayload`\<`object`\>[]\> - -Emits the currently active [notifications](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/notification.service.ts). - -#### Defined in - -[projects/stream-chat-angular/src/lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/notification.service.ts#L15) - -## Methods - -### addPermanentNotification - -▸ **addPermanentNotification**\<`T`\>(`content`, `type?`, `translateParams?`, `templateContext?`): () => `void` - -Displays a notification, that will be visible until it's removed. - -#### Type parameters - -| Name | Type | -| :--- | :------- | -| `T` | `object` | - -#### Parameters - -| Name | Type | Default value | Description | -| :----------------- | :------------------------------- | :------------ | :--------------------------------------------------------------------- | -| `content` | `string` \| `TemplateRef`\<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | -| `type` | `NotificationType` | `'error'` | The type of the notification | -| `translateParams?` | `object` | `undefined` | Translation parameters for the `content` (for text notifications) | -| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | - -#### Returns - -`fn` - -A method to clear the notification. - -▸ (): `void` - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/notification.service.ts#L68) - ---- - -### addTemporaryNotification - -▸ **addTemporaryNotification**\<`T`\>(`content`, `type?`, `timeout?`, `translateParams?`, `templateContext?`): () => `void` - -Displays a notification for the given amount of time. - -#### Type parameters - -| Name | -| :--- | -| `T` | - -#### Parameters - -| Name | Type | Default value | Description | -| :----------------- | :------------------------------- | :------------ | :--------------------------------------------------------------------- | -| `content` | `string` \| `TemplateRef`\<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | -| `type` | `NotificationType` | `'error'` | The type of the notification | -| `timeout` | `number` | `5000` | The number of milliseconds while the notification should be visible | -| `translateParams?` | `object` | `undefined` | Translation parameters for the `content` (for text notifications) | -| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | - -#### Returns - -`fn` - -A method to clear the notification (before the timeout). - -▸ (): `void` - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/notification.service.ts#L31) diff --git a/docusaurus/angular_versioned_docs/version-5/services/ThemeService.mdx b/docusaurus/angular_versioned_docs/version-5/services/ThemeService.mdx deleted file mode 100644 index 7299bde4..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/ThemeService.mdx +++ /dev/null @@ -1,15 +0,0 @@ -# ThemeService - -The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](../theming/introduction.mdx) gives a complete overview about the topic. - -## Properties - -### theme$ - -• **theme$**: `BehaviorSubject`<`string`\> - -A Subject that can be used to get or set the currently active theme. By default light and dark themes are supported. - -#### Defined in - -[projects/stream-chat-angular/src/lib/theme.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/theme.service.ts#L14) diff --git a/docusaurus/angular_versioned_docs/version-5/services/TransliterationService.mdx b/docusaurus/angular_versioned_docs/version-5/services/TransliterationService.mdx deleted file mode 100644 index 9624f27f..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/TransliterationService.mdx +++ /dev/null @@ -1,25 +0,0 @@ -# TransliterationService - -The `TransliterationService` wraps the [@sindresorhus/transliterate](https://www.npmjs.com/package/@sindresorhus/transliterate) library - -## Methods - -### transliterate - -▸ **transliterate**(`s`): `string` - -#### Parameters - -| Name | Type | Description | -| :--- | :------- | :------------------------------ | -| `s` | `string` | the string to be transliterated | - -#### Returns - -`string` - -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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/transliteration.service.ts#L16) diff --git a/docusaurus/angular_versions.json b/docusaurus/angular_versions.json index 74d068d6..13443156 100644 --- a/docusaurus/angular_versions.json +++ b/docusaurus/angular_versions.json @@ -1 +1 @@ -["5"] +["4"] diff --git a/docusaurus/angular_versioned_docs/version-5/assets/channel-list.png b/docusaurus/docs/Angular/assets/channel-list.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/channel-list.png rename to docusaurus/docs/Angular/assets/channel-list.png diff --git a/docusaurus/docs/Angular/assets/channel-preview-info.png b/docusaurus/docs/Angular/assets/channel-preview-info.png index 21aba239..2bea77f8 100644 Binary files a/docusaurus/docs/Angular/assets/channel-preview-info.png and b/docusaurus/docs/Angular/assets/channel-preview-info.png differ diff --git a/docusaurus/docs/Angular/assets/channel-preview.png b/docusaurus/docs/Angular/assets/channel-preview.png index 0e695c6b..87bb2a39 100644 Binary files a/docusaurus/docs/Angular/assets/channel-preview.png and b/docusaurus/docs/Angular/assets/channel-preview.png differ diff --git a/docusaurus/docs/Angular/assets/message-actions-screenshot.png b/docusaurus/docs/Angular/assets/message-actions-screenshot.png index f688bda8..e37b35fd 100644 Binary files a/docusaurus/docs/Angular/assets/message-actions-screenshot.png and b/docusaurus/docs/Angular/assets/message-actions-screenshot.png differ diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-edit-after.png b/docusaurus/docs/Angular/assets/message-edit-after.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-edit-after.png rename to docusaurus/docs/Angular/assets/message-edit-after.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-edit-before.png b/docusaurus/docs/Angular/assets/message-edit-before.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-edit-before.png rename to docusaurus/docs/Angular/assets/message-edit-before.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-desktop.png b/docusaurus/docs/Angular/assets/message-menu-after-desktop.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-desktop.png rename to docusaurus/docs/Angular/assets/message-menu-after-desktop.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-mobile.png b/docusaurus/docs/Angular/assets/message-menu-after-mobile.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-mobile.png rename to docusaurus/docs/Angular/assets/message-menu-after-mobile.png diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-menu-before.png b/docusaurus/docs/Angular/assets/message-menu-before.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-menu-before.png rename to docusaurus/docs/Angular/assets/message-menu-before.png diff --git a/docusaurus/docs/Angular/assets/message-reactions-selector-screenshot.png b/docusaurus/docs/Angular/assets/message-reactions-selector-screenshot.png index 82c2a427..0596a3ec 100644 Binary files a/docusaurus/docs/Angular/assets/message-reactions-selector-screenshot.png and b/docusaurus/docs/Angular/assets/message-reactions-selector-screenshot.png differ diff --git a/docusaurus/docs/Angular/basics/overview.mdx b/docusaurus/docs/Angular/basics/overview.mdx index 4ec2aac9..3a34535a 100644 --- a/docusaurus/docs/Angular/basics/overview.mdx +++ b/docusaurus/docs/Angular/basics/overview.mdx @@ -30,30 +30,32 @@ We recommend using the component library through a package manager. Stream Chat ### Install with NPM -Run the following command if you are using **Angular 16** or **Angular 15**: +Run this command if you are using **Angular 18**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core +npm install stream-chat-angular ngx-float-ui@beta ``` -Run the following command if you are using **Angular 14**: +Run this command if you are using **Angular 17**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core ngx-popperjs@14 +npm install stream-chat-angular ngx-float-ui@17 ``` -Run the following command if you are using **Angular 13**: +Run this command if you are using **Angular 16**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core angular-mentions@1.4.0 ngx-popperjs@13 --legacy-peer-deps +npm install stream-chat-angular ngx-float-ui@16 ``` -Run this command if you are using **Angular 12**: +Run this command if you are using **Angular 15**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core angular-mentions@1.4.0 ngx-popperjs@12 --legacy-peer-deps +npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15 ``` +Supported node verisons: 18+ + ## Tutorial Follow our [tutorial](https://getstream.io/chat/angular/tutorial/) and build your first Stream Angular chat application. diff --git a/docusaurus/angular_versioned_docs/version-5/basics/upgrade-v4.mdx b/docusaurus/docs/Angular/basics/upgrade-v4.mdx similarity index 97% rename from docusaurus/angular_versioned_docs/version-5/basics/upgrade-v4.mdx rename to docusaurus/docs/Angular/basics/upgrade-v4.mdx index 9693803b..997e6ff3 100644 --- a/docusaurus/angular_versioned_docs/version-5/basics/upgrade-v4.mdx +++ b/docusaurus/docs/Angular/basics/upgrade-v4.mdx @@ -60,29 +60,28 @@ Want to see it all in action? Check out [the demo application](https://angular-c ```bash -# --force is only required until this issue is solved: https://github.com/tonysamperi/ngx-float-ui/issues/26 -npm install stream-chat-angular@beta ngx-float-ui@18 --force +npm install stream-chat-angular ngx-float-ui@beta ``` ```bash -npm install stream-chat-angular@beta ngx-float-ui@17 +npm install stream-chat-angular ngx-float-ui@17 ``` ```bash -npm install stream-chat-angular@beta ngx-float-ui@16 +npm install stream-chat-angular ngx-float-ui@16 ``` ```bash -npm install stream-chat-angular@beta @ngx-translate/core@14 ngx-float-ui@15 +npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15 ``` diff --git a/docusaurus/docs/Angular/code-examples/channel-invites.mdx b/docusaurus/docs/Angular/code-examples/channel-invites.mdx index d77d5ce7..137cf5b5 100644 --- a/docusaurus/docs/Angular/code-examples/channel-invites.mdx +++ b/docusaurus/docs/Angular/code-examples/channel-invites.mdx @@ -459,19 +459,26 @@ It's important to note that the filtering set above is not applied to [events](h To override the default behavior create a custom event handler in `app.component.ts` that checks if the user was invited to the channel or added directly and only adds the channel to the list if the user was added directly: ```typescript -private customAddedToChannelNotificationHandler( - clientEvent: ClientEvent, - channelListSetter: (channels: (Channel | ChannelResponse)[]) => void - ): void { - let channels!: Channel[]; - this.channelService.channels$ - .pipe(take(1)) - .subscribe((c) => (channels = c || [])); - if (clientEvent.event.member?.invited) { - return; - } - channelListSetter([clientEvent!.event!.channel!, ...channels]); +private async customAddedToChannelNotificationHandler( + clientEvent: ClientEvent, + channelListSetter: (channels: Channel[]) => void +) { + if (clientEvent.event.member?.invited) { + return; + } + const channelResponse = clientEvent!.event!.channel!; + const newChanel = this.chatService.chatClient.channel( + channelResponse.type, + channelResponse.id + ); + try { + await newChanel.watch(); + const existingChannels = this.channelService.channels; + channelListSetter([newChanel, ...existingChannels]); + } catch (error) { + console.error('Failed to watch channel', error); } +} ``` Now register the handler to the [channel service](../services/ChannelService.mdx) in the constructor of `app.component.ts`: @@ -497,3 +504,5 @@ this.chatService.events$ }); }); ``` + +If you're doing this in a component other than `AppComponent`, don't forget to unsubscribe from the `events$` Observable. diff --git a/docusaurus/docs/Angular/code-examples/ionic-guide.mdx b/docusaurus/docs/Angular/code-examples/ionic-guide.mdx index 9f6799ce..f3a997d4 100644 --- a/docusaurus/docs/Angular/code-examples/ionic-guide.mdx +++ b/docusaurus/docs/Angular/code-examples/ionic-guide.mdx @@ -52,7 +52,7 @@ Add this to your `tsconfig.json` file to the `compilerOptions` part: Import CSS in your `global.scss` file: ``` -@import "~stream-chat-angular/src/assets/styles/v2/scss/index.scss"; +@import "~stream-chat-angular/src/assets/styles/scss/index.scss"; ``` Add the module imports required by `stream-chat-angular` to the `app.module.ts` file: diff --git a/docusaurus/docs/Angular/code-examples/responsive-layout.mdx b/docusaurus/docs/Angular/code-examples/responsive-layout.mdx index ae6ae435..3d282df7 100644 --- a/docusaurus/docs/Angular/code-examples/responsive-layout.mdx +++ b/docusaurus/docs/Angular/code-examples/responsive-layout.mdx @@ -6,10 +6,6 @@ title: Responsive layout import ChatUILayoutScreenshot from "../assets/chat-ui-layout-screenshot.png"; import ChannelHeaderWithMenu from "../assets/channel-header-with-menu-screenshot.png"; -:::caution -This example is only applicable if you're using [theme-v2](../theming/introduction.mdx). -::: - Our SDK gives you maximum control over the layout of your chat application. This tutorial shows you a simple example of creating a layout. ## Channel list, channel, and thread layout @@ -79,7 +75,7 @@ Let's start with the thread component: width: 100%; height: 100%; position: fixed; - z-index: 2; + z-index: 3; } @media screen and (min-width: 768px) { @@ -180,7 +176,7 @@ Provide the layout based on the menu state and hide the menu on bigger screens: width: 100%; height: 100%; position: fixed; - z-index: 2; + z-index: 3; } @media screen and (min-width: 768px) { diff --git a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx b/docusaurus/docs/Angular/components/AttachmentListComponent.mdx index a6b82eda..baa103a9 100644 --- a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx +++ b/docusaurus/docs/Angular/components/AttachmentListComponent.mdx @@ -66,7 +66,7 @@ The following section details how the width and height of images and videos uplo #### Maximum size -You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel). +You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable. The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel). If you set an invalid value to the variable, you'll see a warning on the browser's console: @@ -122,7 +122,7 @@ The id of the message the attachments belong to #### Defined in -[lib/attachment-list/attachment-list.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39) --- @@ -134,30 +134,30 @@ The parent id of the message the attachments belong to #### Defined in -[lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43) --- ### attachments -• **attachments**: `Attachment`<`DefaultStreamChatGenerics`\>[] = `[]` +• **attachments**: `Attachment`\<`DefaultStreamChatGenerics`\>[] = `[]` The attachments to display #### Defined in -[lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47) --- ### imageModalStateChange -• `Readonly` **imageModalStateChange**: `EventEmitter`<`"opened"` \| `"closed"`\> +• `Readonly` **imageModalStateChange**: `EventEmitter`\<`"closed"` \| `"opened"`\> Emits the state of the image carousel window #### Defined in -[lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 8f91f3b4..49035119 100644 --- a/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx +++ b/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx @@ -41,36 +41,36 @@ You can provide your own attachment preview list component by the [`CustomTempla ### attachmentUploads$ -• **attachmentUploads$**: `undefined` \| `Observable`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> +• **attachmentUploads$**: `undefined` \| `Observable`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> A stream that emits the current file uploads and their states #### Defined in -[lib/attachment-preview-list/attachment-preview-list.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L18) +[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17) --- ### retryAttachmentUpload -• `Readonly` **retryAttachmentUpload**: `EventEmitter`<`File`\> +• `Readonly` **retryAttachmentUpload**: `EventEmitter`\<`File`\> An output to notify the parent component if the user tries to retry a failed upload #### Defined in -[lib/attachment-preview-list/attachment-preview-list.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L22) +[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21) --- ### deleteAttachment -• `Readonly` **deleteAttachment**: `EventEmitter`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>\> +• `Readonly` **deleteAttachment**: `EventEmitter`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>\> An output to notify the parent component if the user wants to delete a file #### Defined in -[lib/attachment-preview-list/attachment-preview-list.component.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L26) +[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 18f47273..d1e17c38 100644 --- a/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx +++ b/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx @@ -51,7 +51,7 @@ TextareaInterface.value #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49) --- @@ -67,7 +67,7 @@ TextareaInterface.placeholder #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53) --- @@ -83,13 +83,13 @@ TextareaInterface.areMentionsEnabled #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57) --- ### inputMode -• **inputMode**: `"desktop"` \| `"mobile"` +• **inputMode**: `"mobile"` \| `"desktop"` See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information @@ -99,7 +99,7 @@ TextareaInterface.inputMode #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61) --- @@ -115,7 +115,7 @@ TextareaInterface.mentionScope #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65) --- @@ -131,13 +131,13 @@ TextareaInterface.autoFocus #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69) --- ### valueChange -• `Readonly` **valueChange**: `EventEmitter`<`string`\> +• `Readonly` **valueChange**: `EventEmitter`\<`string`\> Emits the current value of the input element when a user types. @@ -147,13 +147,13 @@ TextareaInterface.valueChange #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73) --- ### send -• `Readonly` **send**: `EventEmitter`<`void`\> +• `Readonly` **send**: `EventEmitter`\<`void`\> Emits when a user triggers a message send event (this happens when they hit the `Enter` key). @@ -163,13 +163,13 @@ TextareaInterface.send #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77) --- ### userMentions -• `Readonly` **userMentions**: `EventEmitter`<`UserResponse`<`DefaultGenerics`\>[]\> +• `Readonly` **userMentions**: `EventEmitter`\<`UserResponse`\<`DefaultGenerics`\>[]\> Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention. @@ -179,6 +179,6 @@ TextareaInterface.userMentions #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 7284b013..abccd16a 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 -[lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35) --- @@ -83,19 +83,7 @@ The URL of the image to be displayed. If the image can't be displayed the first #### Defined in -[lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39) - ---- - -### size - -• **size**: `number` = `32` - -The size in pixels of the avatar image. - -#### Defined in - -[lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39) --- @@ -107,31 +95,31 @@ The location the avatar will be displayed in #### Defined in -[lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43) --- ### channel -• `Optional` **channel**: `Channel`<`DefaultStreamChatGenerics`\> +• `Optional` **channel**: `Channel`\<`DefaultStreamChatGenerics`\> The channel the avatar belongs to (if avatar of a channel is displayed) #### Defined in -[lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47) --- ### user -• `Optional` **user**: `User`<`DefaultStreamChatGenerics`\> +• `Optional` **user**: `User`\<`DefaultStreamChatGenerics`\> The user the avatar belongs to (if avatar of a user is displayed) #### Defined in -[lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51) --- @@ -143,7 +131,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava #### Defined in -[lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55) --- @@ -155,7 +143,7 @@ If a channel avatar is displayed, and if the channel has exactly two members a g #### Defined in -[lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59) --- @@ -167,6 +155,6 @@ If channel/user image isn't provided the initials of the name of the channel/use #### Defined in -[lib/avatar/avatar.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L67) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx index 45bf3f1f..fdaacb5d 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 -[lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23) --- @@ -24,19 +24,7 @@ The URL of the image to be displayed. If the image can't be displayed the first #### Defined in -[lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27) - ---- - -### size - -• **size**: `number` = `32` - -The size in pixels of the avatar image. - -#### Defined in - -[lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:27](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27) --- @@ -48,31 +36,31 @@ The location the avatar will be displayed in #### Defined in -[lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:31](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31) --- ### channel -• `Optional` **channel**: `Channel`<`DefaultStreamChatGenerics`\> +• `Optional` **channel**: `Channel`\<`DefaultStreamChatGenerics`\> The channel the avatar belongs to (if avatar of a channel is displayed) #### Defined in -[lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:35](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35) --- ### user -• `Optional` **user**: `User`<`DefaultStreamChatGenerics`\> +• `Optional` **user**: `User`\<`DefaultStreamChatGenerics`\> The user the avatar belongs to (if avatar of a user is displayed) #### Defined in -[lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:39](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39) --- @@ -84,7 +72,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava #### Defined in -[lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:43](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43) --- @@ -96,7 +84,7 @@ If channel/user image isn't provided the initials of the name of the channel/use #### Defined in -[lib/avatar-placeholder/avatar-placeholder.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L51) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47) --- @@ -108,6 +96,6 @@ If a channel avatar is displayed, and if the channel has exactly two members a g #### Defined in -[lib/avatar-placeholder/avatar-placeholder.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L57) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L53) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/ChannelComponent.mdx b/docusaurus/docs/Angular/components/ChannelComponent.mdx index 2ae29307..b9367aa2 100644 --- a/docusaurus/docs/Angular/components/ChannelComponent.mdx +++ b/docusaurus/docs/Angular/components/ChannelComponent.mdx @@ -1,4 +1,4 @@ -The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`EditMessageForm`](./EditMessageFormComponent.mdx), [`MessageBouncePrompt`](./MessageBouncePromptComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript). +The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`MessageBouncePrompt`](./MessageBouncePromptComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript). ## Usage diff --git a/docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx b/docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx index 3e8211f4..e20dbd02 100644 --- a/docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx +++ b/docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx @@ -6,44 +6,25 @@ The `ChannelHeader` component displays the avatar and name of the currently acti -## Customization +## Basic usage -If you create your own channel header, you can use the [`ChannelService`](../services/ChannelService.mdx) to access the currently active channel. Please note that, the default channel header also contains the menu button to [toggle the channel list](../services/ChannelListToggleService.mdx). Here is a simple implementation of a custom channel header to guide you: - -```typescript -@Component({ - selector: "custom-channel-header", - template: ` - - {{ activeChannel?.data?.name }} - `, - styles: [], -}) -export class ChannelHeaderComponent { - activeChannel: Channel | undefined; - - constructor( - private channelService: ChannelService, - private channelListToggleService: ChannelListToggleService - ) { - this.channelService.activeChannel$.subscribe( - (c) => (this.activeChannel = c) - ); - } - - toggleMenu() { - this.channelListToggleService.toggle(); - } -} +```html + + + ``` -If you want to create your own channel component check out our [customization guide](../concepts/customization.mdx) for more information. +## Customization + +### Channel information + +You can provide your own template for displaying channel information using the [`CustomTemplatesService`](../services/CustomTemplatesService/#channelheaderinfotemplate) -## Channel actions +### Channel actions By default no channel action is displayed, but it's possible to [add action buttons to the channel header](../services/CustomTemplatesService.mdx/#channelactionstemplate) component. You can follow our [code example](../code-examples/channel-invites.mdx) that implements the invite action (you can implement other kind of actions as well, for example edit). -## Menu button +### Menu button You can provide a menu button template to the channel header, the [responsive layout guide](../code-examples/responsive-layout.mdx) shows how you can use this to toggle the channel list on mobile screens. diff --git a/docusaurus/docs/Angular/components/ChannelListComponent.mdx b/docusaurus/docs/Angular/components/ChannelListComponent.mdx index 50a424fa..13e71fef 100644 --- a/docusaurus/docs/Angular/components/ChannelListComponent.mdx +++ b/docusaurus/docs/Angular/components/ChannelListComponent.mdx @@ -1,33 +1,21 @@ +import ChannelList from "../assets/channel-list.png"; + The `ChannelList` component renders the list of channels. The `ChannelList` displays channels using pagination, new channels are loaded if the user clicks the "Load more" button. The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the [`ChannelHeader`](./ChannelHeaderComponent.mdx) component. + + ## Customization +### UI customization + **Example 1** - Using a custom channel list component See our [customization guide](../concepts/customization.mdx) on how to provide your own channel list component. -:::note -If you want to create your own channel list, you can use the [`ChannelService`](../services/ChannelService.mdx) to receive the channels and interact with the Stream API. - -Other building blocks, that you might find useful: - -### Toggle - -The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the `ChannelHeader` component. The open/close mechanism is implemented by the [`ChannelListToggleService`](../services/ChannelListToggleService.mdx). - -### Loading indicator - -The `ChannelList` component uses the [`LoadingIndicator`](./LoadingIndicatorComponent.mdx) component to display a spinner while more channels are being fetched. - -### Icons - -The `ChannelList` component uses the [`Icon`](./IconComponent.mdx) component to display icons. -::: - **Example 2** - Using a custom channel preview component If you only want to customize the channel preview items (not the whole list), see the [channel preview customization](./ChannelPreviewComponent.mdx/#customization) guide. @@ -45,5 +33,9 @@ It's possible to inject your own content to the top or to the bottom of the chan Use the `channel-list-top` attribute to inject content at the top of the channel list, and the `channel-list-bottom` to display content at the bottom of the channel list. +### Behavior customization + +Please refer to the [channel list guide](../../concepts/channel-list/) + [//]: # "Start of generated content" [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx b/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx index aa9b2a73..9454e05d 100644 --- a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx +++ b/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx @@ -31,12 +31,12 @@ The `ChannelPreview` component is displayed inside the built-in [channel list co ### channel -• **channel**: `undefined` \| `Channel`<`DefaultStreamChatGenerics`\> +• **channel**: `undefined` \| `Channel`\<`DefaultStreamChatGenerics`\> The channel to be displayed #### Defined in -[lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 dad666b5..7444ebc7 100644 --- a/docusaurus/docs/Angular/components/IconComponent.mdx +++ b/docusaurus/docs/Angular/components/IconComponent.mdx @@ -19,7 +19,7 @@ export class CustomMessageComponent { ## Customization -You can provide your own icon component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx) +Please refer to the [theming docs](../../theming/themingv2/#custom-icons) [//]: # "Start of generated content" @@ -33,18 +33,6 @@ The icon to display, the list of [supported icons](https://github.com/GetStream/ #### Defined in -[lib/icon/icon.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L43) - ---- - -### size - -• **size**: `undefined` \| `number` - -The size of the icon (in pixels) - -#### Defined in - -[lib/icon/icon.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L47) +[projects/stream-chat-angular/src/lib/icon/icon.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 56698fa8..f1054111 100644 --- a/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx +++ b/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx @@ -12,18 +12,6 @@ The icon to display, the list of [supported icons](https://github.com/GetStream/ #### Defined in -[lib/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18) - ---- - -### size - -• **size**: `undefined` \| `number` - -The size of the icon (in pixels) - -#### Defined in - -[lib/icon-placeholder/icon-placeholder.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L22) +[projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx b/docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx index 87271456..b5045a7d 100644 --- a/docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx +++ b/docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx @@ -25,29 +25,4 @@ export class CustomMessageComponent { You can provide your own loading indicator component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx) [//]: # "Start of generated content" - -## Inputs and outputs - -### size - -• **size**: `number` = `15` - -The size of the indicator (in pixels) - -#### Defined in - -[lib/loading-indicator/loading-indicator.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L16) - ---- - -### color - -• **color**: `string` - -The color of the indicator - -#### Defined in - -[lib/loading-indicator/loading-indicator.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L21) - [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/LoadingIndicatorPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/LoadingIndicatorPlaceholderComponent.mdx index f68fc87c..404bd82b 100644 --- a/docusaurus/docs/Angular/components/LoadingIndicatorPlaceholderComponent.mdx +++ b/docusaurus/docs/Angular/components/LoadingIndicatorPlaceholderComponent.mdx @@ -1,29 +1,4 @@ The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. [//]: # "Start of generated content" - -## Inputs and outputs - -### size - -• **size**: `number` = `15` - -The size of the indicator (in pixels) - -#### Defined in - -[lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L17) - ---- - -### color - -• **color**: `string` - -The color of the indicator - -#### Defined in - -[lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L22) - [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx b/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx index 8851eac7..9355f488 100644 --- a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx @@ -15,16 +15,18 @@ A typical use case for the `MessageActionsBox` component would be to use in your selector: "app-custom-message", template: ` +
{{ message.text }}
`, }) export class CustomMessageComponent { @Input() message: StreamMessage; - isActionBoxOpen: boolean; - isMessageSentByCurrentUser: boolean; + @Input() enabledActions: string[]; } ``` @@ -38,20 +40,6 @@ export class CustomMessageComponent { ## Inputs and outputs -### isOpen - -• **isOpen**: `boolean` = `false` - -Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility. - -**`deprecated`** No need for this since [theme-v2](../theming/introduction.mdx) - -#### Defined in - -[lib/message-actions-box/message-actions-box.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L39) - ---- - ### isMine • **isMine**: `boolean` = `false` @@ -60,78 +48,42 @@ Indicates if the message actions are belonging to a message that was sent by the #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L43) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L37) --- ### message -• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> +• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> The message the actions will be executed on #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L47) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:41](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L41) --- -### enabledActions +### messageTextHtmlElement -• **enabledActions**: `string`[] = `[]` +• **messageTextHtmlElement**: `undefined` \| `HTMLElement` -The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. +The HTML element which contains the message text, it's used for the "copy message text" action #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L51) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:45](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L45) --- -### customActions - -• **customActions**: `CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[] = `[]` - -A list of custom message actions to be displayed in the action box - -In the next major release this will be released with `messageReactionsService.customActions$` - -More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService - -#### Defined in - -[lib/message-actions-box/message-actions-box.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L59) - ---- - -### displayedActionsCount - -• `Readonly` **displayedActionsCount**: `EventEmitter`<`number`\> - -The number of authorized actions (it can be less or equal than the number of enabled actions) - -**`deprecated`** components should use `messageReactionsService.getAuthorizedMessageActionsCount` method - -More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService - -#### Defined in - -[lib/message-actions-box/message-actions-box.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L67) - ---- - -### isEditing - -• `Readonly` **isEditing**: `EventEmitter`<`boolean`\> - -An event which emits `true` if the edit message modal is open, and `false` when it is closed. +### enabledActions -**`deprecated`** components should use `messageReactionsService.messageToEdit$` Observable +• **enabledActions**: `string`[] = `[]` -More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService +The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L75) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 4592bb3a..29b15405 100644 --- a/docusaurus/docs/Angular/components/MessageComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageComponent.mdx @@ -67,13 +67,13 @@ You can add interactions to mentions inside a message, follow our [mention actio ### message -• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> +• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> The message to be displayed #### Defined in -[lib/message/message.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L67) +[projects/stream-chat-angular/src/lib/message/message.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/message/message.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L71) +[projects/stream-chat-angular/src/lib/message/message.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message/message.component.ts#L68) --- @@ -97,19 +97,19 @@ If `true`, the message status (sending, sent, who read the message) is displayed #### Defined in -[lib/message/message.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L75) +[projects/stream-chat-angular/src/lib/message/message.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message/message.component.ts#L72) --- ### mode -• **mode**: `"thread"` \| `"main"` = `'main'` +• **mode**: `"main"` \| `"thread"` = `'main'` Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript). #### Defined in -[lib/message/message.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L79) +[projects/stream-chat-angular/src/lib/message/message.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message/message.component.ts#L76) --- @@ -121,20 +121,18 @@ Highlighting is used to add visual emphasize to a message when jumping to the me #### Defined in -[lib/message/message.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L83) +[projects/stream-chat-angular/src/lib/message/message.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message/message.component.ts#L80) --- -### customActions +### scroll$ -• **customActions**: `CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[] = `[]` +• `Optional` **scroll$**: `Observable`\<`void`\> -A list of custom message actions to be displayed in the action box - -**`deprecated`** please use the [`MessageActionsService`](https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService) to set this property. +An Observable that emits when the message list is scrolled, it's used to prevent opening the message menu while scroll is in progress #### Defined in -[lib/message/message.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L89) +[projects/stream-chat-angular/src/lib/message/message.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 4146b236..d703a40f 100644 --- a/docusaurus/docs/Angular/components/MessageInputComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageInputComponent.mdx @@ -14,7 +14,6 @@ If you want to provide your own message input component you'll have to provide i - Replace the default message input inside the [channel](./ChannelComponent.mdx) - Replace the default message input inside the [thread](./ThreadComponent.mdx) -- Provide your own [messageInputTemplate$](../services/CustomTemplatesService.mdx/#messageinputtemplate) to the `CustomTemplatesService` You can replace the textarea inside the message input following our [Custom textarea guide](../../code-examples/custom-textarea) @@ -60,7 +59,7 @@ If file upload is enabled, the user can open a file selector from the input. Ple #### Defined in -[lib/message-input/message-input.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L61) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L59) --- @@ -72,7 +71,7 @@ If true, users can mention other users in messages. You also [need to use the `A #### Defined in -[lib/message-input/message-input.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L65) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L63) --- @@ -84,19 +83,19 @@ The scope for user mentions, either members of the current channel of members of #### Defined in -[lib/message-input/message-input.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L69) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L67) --- ### mode -• **mode**: `"thread"` \| `"main"` = `'main'` +• **mode**: `"main"` \| `"thread"` = `'main'` Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript). #### Defined in -[lib/message-input/message-input.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L73) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L71) --- @@ -108,43 +107,43 @@ If true, users can select multiple files to upload. If no value is provided, it #### Defined in -[lib/message-input/message-input.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L77) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L75) --- ### message -• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> +• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> The message to edit #### Defined in -[lib/message-input/message-input.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L81) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L79) --- ### sendMessage$ -• **sendMessage$**: `undefined` \| `Observable`<`void`\> +• **sendMessage$**: `undefined` \| `Observable`\<`void`\> An observable that can be used to trigger message sending from the outside #### Defined in -[lib/message-input/message-input.component.ts:85](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L85) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L83) --- ### inputMode -• **inputMode**: `"desktop"` \| `"mobile"` +• **inputMode**: `"mobile"` \| `"desktop"` In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx). #### Defined in -[lib/message-input/message-input.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L89) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L87) --- @@ -156,18 +155,44 @@ Enables or disables auto focus on the textarea element #### Defined in -[lib/message-input/message-input.component.ts:93](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L93) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:91](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L91) + +--- + +### watchForMessageToEdit + +• **watchForMessageToEdit**: `boolean` = `true` + +By default the input will react to changes in `messageToEdit$` from [`MessageActionsService`](../services/MessageActionsService.mdx) and display the message to be edited (taking into account the current `mode`). + +If you don't need that behavior, you can turn this of with this flag. In that case you should create your own edit message UI. + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97) + +--- + +### displaySendButton + +• **displaySendButton**: `boolean` = `true` + +Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input. + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:101](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L101) --- ### messageUpdate -• `Readonly` **messageUpdate**: `EventEmitter`<{}\> +• `Readonly` **messageUpdate**: `EventEmitter`\<\{ `message`: `StreamMessage`\<`DefaultStreamChatGenerics`\> }\> Emits when a message was successfuly sent or updated #### Defined in -[lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:105](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 6c3098d9..21b14db8 100644 --- a/docusaurus/docs/Angular/components/MessageListComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageListComponent.mdx @@ -27,13 +27,13 @@ The message list contains a lot of low-level logic related to scrolling, we don' ### mode -• **mode**: `"thread"` \| `"main"` = `'main'` +• **mode**: `"main"` \| `"thread"` = `'main'` Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript). #### Defined in -[lib/message-list/message-list.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L55) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L53) --- @@ -45,19 +45,7 @@ The direction of the messages in the list, `bottom-to-top` means newest message #### Defined in -[lib/message-list/message-list.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L59) - ---- - -### messageOptionsTrigger - -• **messageOptionsTrigger**: `"message-row"` \| `"message-bubble"` = `'message-row'` - -Determines what triggers the appearance of the message options: by default you can hover (click on mobile) anywhere in the row of the message (`message-row` option), or you can set `message-bubble`, in that case only a hover (click on mobile) in the message bubble will trigger the options to appear. - -#### Defined in - -[lib/message-list/message-list.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L63) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L57) --- @@ -69,21 +57,7 @@ You can hide the "jump to latest" button while scrolling. A potential use-case f #### Defined in -[lib/message-list/message-list.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L69) - ---- - -### customMessageActions - -• **customMessageActions**: `CustomMessageActionItem`<`any`\>[] = `[]` - -A list of custom message actions to be displayed in the message action box - -**`deprecated`** please use the [`MessageActionsService`](https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService) to set this property. - -#### Defined in - -[lib/message-list/message-list.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:62](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L62) --- @@ -95,7 +69,7 @@ If `true` date separators will be displayed #### Defined in -[lib/message-list/message-list.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:66](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L66) --- @@ -107,19 +81,19 @@ If `true` unread indicator will be displayed #### Defined in -[lib/message-list/message-list.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:70](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L70) --- ### dateSeparatorTextPos -• **dateSeparatorTextPos**: `"center"` \| `"right"` \| `"left"` = `'center'` +• **dateSeparatorTextPos**: `"center"` \| `"left"` \| `"right"` = `'center'` If date separators are displayed, you can set the horizontal position of the date text. #### Defined in -[lib/message-list/message-list.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:74](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L74) --- @@ -131,7 +105,7 @@ If date separators are displayed, you can set the horizontal position of the dat #### Defined in -[lib/message-list/message-list.component.ts:91](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L91) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:78](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L78) --- @@ -145,7 +119,7 @@ This is only applicable for `main` mode, as threads doesn't have read infromatio #### Defined in -[lib/message-list/message-list.component.ts:98](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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:85](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L85) --- @@ -157,6 +131,16 @@ You can turn on and off the loading indicator that signals to users that more me #### Defined in -[lib/message-list/message-list.component.ts:102](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L102) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L89) + +--- + +### limitNumberOfMessagesInList + +• **limitNumberOfMessagesInList**: `boolean` = `true` + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:93](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L93) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx index a2378fa4..7e9c7b58 100644 --- a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx @@ -1,8 +1,7 @@ import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png"; import MessageReactionsDetailsScreenshot from "../assets/reaction-details.png"; -import MessageReactionsSelectorScreenshot from "../assets/message-reactions-selector-screenshot.png"; -The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation. +The `MessageReactions` component displays the reactions of a message. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation. **Example 1** - displaying reactions of a message: @@ -12,10 +11,6 @@ The `MessageReactions` component displays the reactions of a message, the curren -**Example 3** - adding/removing a reaction: - - - ## Basic usage A typical use case for the `MessageReactions` component would be to use in your custom components that will completely override the message component. @@ -25,7 +20,6 @@ A typical use case for the `MessageReactions` component would be to use in your selector: "app-custom-message", template: ` [] = `[]` +• **latestReactions**: `ReactionResponse`\<`DefaultStreamChatGenerics`\>[] = `[]` List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type. #### Defined in -[lib/message-reactions/message-reactions.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L51) +[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42) --- ### ownReactions -• **ownReactions**: `ReactionResponse`<`DefaultStreamChatGenerics`\>[] = `[]` +• **ownReactions**: `ReactionResponse`\<`DefaultStreamChatGenerics`\>[] = `[]` List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type. #### Defined in -[lib/message-reactions/message-reactions.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L55) - ---- - -### isSelectorOpenChange - -• `Readonly` **isSelectorOpenChange**: `EventEmitter`<`boolean`\> - -Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility. - -#### Defined in - -[lib/message-reactions/message-reactions.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L59) +[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:46](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L46) [//]: # "End of generated content" diff --git a/docusaurus/angular_versioned_docs/version-5/components/MessageReactionsSelectorComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx similarity index 90% rename from docusaurus/angular_versioned_docs/version-5/components/MessageReactionsSelectorComponent.mdx rename to docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx index f620a7e3..9b8e7144 100644 --- a/docusaurus/angular_versioned_docs/version-5/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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/8e11a978ee2d9f884aa26b1d22441235f92d8da8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 d5b55c89..7c751d2c 100644 --- a/docusaurus/docs/Angular/components/ModalComponent.mdx +++ b/docusaurus/docs/Angular/components/ModalComponent.mdx @@ -28,30 +28,30 @@ If `true` the modal will be displayed, if `false` the modal will be hidden #### Defined in -[lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25) --- ### content -• **content**: `undefined` \| `TemplateRef`<`void`\> +• **content**: `undefined` \| `TemplateRef`\<`void`\> The content of the modal (can also be provided using `ng-content`) #### Defined in -[lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29) --- ### isOpenChange -• `Readonly` **isOpenChange**: `EventEmitter`<`boolean`\> +• `Readonly` **isOpenChange**: `EventEmitter`\<`boolean`\> Emits `true` if the modal becomes visible, and `false` if the modal is closed. #### Defined in -[lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 c13b6cd7..fecc39bb 100644 --- a/docusaurus/docs/Angular/components/NotificationComponent.mdx +++ b/docusaurus/docs/Angular/components/NotificationComponent.mdx @@ -24,18 +24,18 @@ The type of the notification #### Defined in -[lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16) --- ### content -• **content**: `undefined` \| `TemplateRef`<`void`\> +• **content**: `undefined` \| `TemplateRef`\<`void`\> The content of the notification (can also be provided using `ng-content`) #### Defined in -[lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 a53cf29e..6400a0cf 100644 --- a/docusaurus/docs/Angular/components/TextareaComponent.mdx +++ b/docusaurus/docs/Angular/components/TextareaComponent.mdx @@ -48,7 +48,7 @@ TextareaInterface.value #### Defined in -[lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35) --- @@ -64,13 +64,13 @@ TextareaInterface.placeholder #### Defined in -[lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39) --- ### inputMode -• **inputMode**: `"desktop"` \| `"mobile"` +• **inputMode**: `"mobile"` \| `"desktop"` See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information @@ -80,7 +80,7 @@ TextareaInterface.inputMode #### Defined in -[lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43) --- @@ -96,13 +96,13 @@ TextareaInterface.autoFocus #### Defined in -[lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47) --- ### valueChange -• `Readonly` **valueChange**: `EventEmitter`<`string`\> +• `Readonly` **valueChange**: `EventEmitter`\<`string`\> Emits the current value of the input element when a user types. @@ -112,13 +112,13 @@ TextareaInterface.valueChange #### Defined in -[lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51) --- ### send -• `Readonly` **send**: `EventEmitter`<`void`\> +• `Readonly` **send**: `EventEmitter`\<`void`\> Emits when a user triggers a message send event (this happens when they hit the `Enter` key). @@ -128,6 +128,6 @@ TextareaInterface.send #### Defined in -[lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 54e6d9c2..8e8d9db5 100644 --- a/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx +++ b/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx @@ -76,12 +76,12 @@ An example voice recording attachment: ### attachment -• `Optional` **attachment**: `Attachment`<`DefaultStreamChatGenerics`\> +• `Optional` **attachment**: `Attachment`\<`DefaultStreamChatGenerics`\> The voice recording attachment #### Defined in -[lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 0a3679db..6c615c68 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 -[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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/angular_versioned_docs/version-5/concepts/channel-list.mdx b/docusaurus/docs/Angular/concepts/channel-list.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/channel-list.mdx rename to docusaurus/docs/Angular/concepts/channel-list.mdx diff --git a/docusaurus/docs/Angular/concepts/message-interactions.mdx b/docusaurus/docs/Angular/concepts/message-interactions.mdx index 825599dd..812c9aac 100644 --- a/docusaurus/docs/Angular/concepts/message-interactions.mdx +++ b/docusaurus/docs/Angular/concepts/message-interactions.mdx @@ -6,15 +6,15 @@ title: Message interactions Users can interact with the messages in the message list. The following table provides a list of possible interactions together with the [necessary capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) and the corresponding components: -| Description | Necessary channel capability | Component | -| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------- | -| [Flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) the given message | flag-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Edits a message that belongs to the user | update-own-message or update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Edits any message | update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Deletes a message that belongs to the user | delete-own-message or delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Deletes any message | delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Send reaction to a message | send-reaction | [`MessageReactions`](../components/MessageReactionsComponent.mdx) | -| Receive read events | read-events | [`Message`](../components/MessageComponent.mdx) | -| Reply to a message in a thread | send-reply | [`Message`](../components/MessageComponent.mdx) | -| Quote reply to a message | quote-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | -| Mark a message as unread | read-events | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Description | Necessary channel capability | Component | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------- | +| [Flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) the given message | flag-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Edits a message that belongs to the user | update-own-message or update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Edits any message | update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Deletes a message that belongs to the user | delete-own-message or delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Deletes any message | delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Send reaction to a message | send-reaction | [`MessageReactionsSelector`](../components/MessageReactionsSelectorComponent.mdx) | +| Receive read events | read-events | [`Message`](../components/MessageComponent.mdx) | +| Reply to a message in a thread | send-reply | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Quote reply to a message | quote-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | +| Mark a message as unread | read-events | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) | diff --git a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx b/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx index f6056c43..f2f3a9d9 100644 --- a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx +++ b/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx @@ -12,19 +12,19 @@ The `AttachmentConfigurationService` provides customization for certain attribut ### customGiphyAttachmentConfigurationHandler -• `Optional` **customGiphyAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>) => `AttachmentConfigration` +• `Optional` **customGiphyAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>) => `AttachmentConfigration` + +A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. #### Type declaration ▸ (`a`): `AttachmentConfigration` -A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. - ##### Parameters -| Name | Type | -| :--- | :----------------- | -| `a` | `Attachment`<`T`\> | +| Name | Type | +| :--- | :------------------ | +| `a` | `Attachment`\<`T`\> | ##### Returns @@ -32,25 +32,25 @@ A custom handler can be provided to override the default giphy attachment (GIFs #### Defined in -[lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37) --- ### customImageAttachmentConfigurationHandler -• `Optional` **customImageAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>, `type`: `"gallery"` \| `"single"` \| `"carousel"`, `containerElement`: `HTMLElement`) => `ImageAttachmentConfiguration` +• `Optional` **customImageAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>, `type`: `"gallery"` \| `"single"` \| `"carousel"`, `containerElement`: `HTMLElement`) => `ImageAttachmentConfiguration` + +A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break. #### Type declaration ▸ (`a`, `type`, `containerElement`): `ImageAttachmentConfiguration` -A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break. - ##### Parameters | Name | Type | | :----------------- | :---------------------------------------- | -| `a` | `Attachment`<`T`\> | +| `a` | `Attachment`\<`T`\> | | `type` | `"gallery"` \| `"single"` \| `"carousel"` | | `containerElement` | `HTMLElement` | @@ -60,25 +60,25 @@ A custom handler can be provided to override the default image attachment (image #### Defined in -[lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22) --- ### customScrapedImageAttachmentConfigurationHandler -• `Optional` **customScrapedImageAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>) => `AttachmentConfigration` +• `Optional` **customScrapedImageAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>) => `AttachmentConfigration` + +A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. #### Type declaration ▸ (`a`): `AttachmentConfigration` -A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. - ##### Parameters -| Name | Type | -| :--- | :----------------- | -| `a` | `Attachment`<`T`\> | +| Name | Type | +| :--- | :------------------ | +| `a` | `Attachment`\<`T`\> | ##### Returns @@ -86,26 +86,26 @@ A custom handler can be provided to override the default scraped image attachmen #### Defined in -[lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43) --- ### customVideoAttachmentConfigurationHandler -• `Optional` **customVideoAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>, `containerElement`: `HTMLElement`) => `VideoAttachmentConfiguration` +• `Optional` **customVideoAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>, `containerElement`: `HTMLElement`) => `VideoAttachmentConfiguration` + +A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. #### Type declaration ▸ (`a`, `containerElement`): `VideoAttachmentConfiguration` -A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break. - ##### Parameters -| Name | Type | -| :----------------- | :----------------- | -| `a` | `Attachment`<`T`\> | -| `containerElement` | `HTMLElement` | +| Name | Type | +| :----------------- | :------------------ | +| `a` | `Attachment`\<`T`\> | +| `containerElement` | `HTMLElement` | ##### Returns @@ -113,7 +113,7 @@ A custom handler can be provided to override the default video attachment (video #### Defined in -[lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49) ## Methods @@ -137,9 +137,9 @@ Handles the configuration for giphy attachments, it's possible to provide your o #### Parameters -| Name | Type | Description | -| :----------- | :----------------- | :-------------------------- | -| `attachment` | `Attachment`<`T`\> | The attachment to configure | +| Name | Type | Description | +| :----------- | :------------------ | :-------------------------- | +| `attachment` | `Attachment`\<`T`\> | The attachment to configure | #### Returns @@ -147,7 +147,7 @@ Handles the configuration for giphy attachments, it's possible to provide your o #### Defined in -[lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180) --- @@ -161,7 +161,7 @@ Handles the configuration for image attachments, it's possible to provide your o | Name | Type | Description | | :----------- | :---------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `attachment` | `Attachment`<`T`\> | The attachment to configure | +| `attachment` | `Attachment`\<`T`\> | The attachment to configure | | `location` | `"gallery"` \| `"single"` \| `"carousel"` | Specifies where the image is being displayed | | `element` | `HTMLElement` | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. | @@ -171,7 +171,7 @@ Handles the configuration for image attachments, it's possible to provide your o #### Defined in -[lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57) --- @@ -183,9 +183,9 @@ Handles the configuration for scraped image attachments, it's possible to provid #### Parameters -| Name | Type | Description | -| :----------- | :----------------- | :-------------------------- | -| `attachment` | `Attachment`<`T`\> | The attachment to configure | +| Name | Type | Description | +| :----------- | :------------------ | :-------------------------- | +| `attachment` | `Attachment`\<`T`\> | The attachment to configure | #### Returns @@ -193,7 +193,7 @@ Handles the configuration for scraped image attachments, it's possible to provid #### Defined in -[lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200) --- @@ -205,10 +205,10 @@ Handles the configuration for video attachments, it's possible to provide your o #### Parameters -| Name | Type | Description | -| :----------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `attachment` | `Attachment`<`T`\> | The attachment to configure | -| `element` | `HTMLElement` | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. | +| Name | Type | Description | +| :----------- | :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `attachment` | `Attachment`\<`T`\> | The attachment to configure | +| `element` | `HTMLElement` | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. | #### Returns @@ -216,4 +216,4 @@ Handles the configuration for video attachments, it's possible to provide your o #### Defined in -[lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 7fdb8c97..676e2202 100644 --- a/docusaurus/docs/Angular/services/AttachmentService.mdx +++ b/docusaurus/docs/Angular/services/AttachmentService.mdx @@ -2,6 +2,8 @@ The `AttachmentService` manages the uploads of a message input. +You can read more about [uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript&q=size) in the Stream API documentation. You can use Stream's API or the dashboard to customize the [file](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#file-uploads) and [image upload](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#image-uploads) configuration. + ## Type parameters | Name | Type | @@ -12,25 +14,25 @@ The `AttachmentService` manages the uploads of a message input. ### attachmentUploadInProgressCounter$ -• **attachmentUploadInProgressCounter$**: `Observable`<`number`\> +• **attachmentUploadInProgressCounter$**: `Observable`\<`number`\> Emits the number of uploads in progress. #### Defined in -[lib/attachment.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L22) +[projects/stream-chat-angular/src/lib/attachment.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L25) --- ### attachmentUploads$ -• **attachmentUploads$**: `Observable`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> +• **attachmentUploads$**: `Observable`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/AttachmentPreviewListComponent.mdx) to display the attachment previews. #### Defined in -[lib/attachment.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L26) +[projects/stream-chat-angular/src/lib/attachment.service.ts:29](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L29) ## Methods @@ -44,9 +46,9 @@ Note: If you just want to use your own CDN for file uploads, you don't necessary #### Parameters -| Name | Type | -| :----------- | :----------------- | -| `attachment` | `Attachment`<`T`\> | +| Name | Type | +| :----------- | :------------------ | +| `attachment` | `Attachment`\<`T`\> | #### Returns @@ -54,7 +56,7 @@ Note: If you just want to use your own CDN for file uploads, you don't necessary #### Defined in -[lib/attachment.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L103) +[projects/stream-chat-angular/src/lib/attachment.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L120) --- @@ -66,9 +68,9 @@ Maps attachments received from the Stream API to uploads. This is useful when ed #### Parameters -| Name | Type | Description | -| :------------ | :------------------- | :------------------------------------ | -| `attachments` | `Attachment`<`T`\>[] | Attachemnts received with the message | +| Name | Type | Description | +| :------------ | :-------------------- | :------------------------------------ | +| `attachments` | `Attachment`\<`T`\>[] | Attachemnts received with the message | #### Returns @@ -76,71 +78,71 @@ Maps attachments received from the Stream API to uploads. This is useful when ed #### Defined in -[lib/attachment.service.ts:189](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L189) +[projects/stream-chat-angular/src/lib/attachment.service.ts:206](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L206) --- ### deleteAttachment -▸ **deleteAttachment**(`upload`): `Promise`<`void`\> +▸ **deleteAttachment**(`upload`): `Promise`\<`void`\> Deletes an attachment, the attachment can have any state (`error`, `uploading` or `success`). #### Parameters -| Name | Type | -| :------- | :----------------------------------------------- | -| `upload` | `AttachmentUpload`<`DefaultStreamChatGenerics`\> | +| Name | Type | +| :------- | :------------------------------------------------ | +| `upload` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\> | #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/attachment.service.ts:128](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L128) +[projects/stream-chat-angular/src/lib/attachment.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L145) --- ### filesSelected -▸ **filesSelected**(`fileList`): `Promise`<`void`\> +▸ **filesSelected**(`fileList`): `Promise`\<`undefined` \| `boolean`\> Uploads the selected files, and creates preview for image files. The result is propagated throught the `attachmentUploads$` stream. #### Parameters -| Name | Type | Description | -| :--------- | :------------------- | :----------------------------- | -| `fileList` | `null` \| `FileList` | The files selected by the user | +| Name | Type | Description | +| :--------- | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `fileList` | `null` \| `File`[] \| `FileList` | The files selected by the user, if you have Blobs instead of Files, you can convert them with this method: https://developer.mozilla.org/en-US/docs/Web/API/File/File | #### Returns -`Promise`<`void`\> +`Promise`\<`undefined` \| `boolean`\> -A promise with the result +A promise with true or false. If false is returned the upload was canceled because of a client side error. The error is emitted via the `NotificationService`. #### Defined in -[lib/attachment.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L54) +[projects/stream-chat-angular/src/lib/attachment.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L62) --- ### mapToAttachments -▸ **mapToAttachments**(): `Attachment`<`DefaultGenerics`\>[] +▸ **mapToAttachments**(): `Attachment`\<`DefaultGenerics`\>[] Maps the current uploads to a format that can be sent along with the message to the Stream API. #### Returns -`Attachment`<`DefaultGenerics`\>[] +`Attachment`\<`DefaultGenerics`\>[] the attachments #### Defined in -[lib/attachment.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L158) +[projects/stream-chat-angular/src/lib/attachment.service.ts:175](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L175) --- @@ -156,13 +158,13 @@ Resets the attachments uploads (for example after the message with the attachmen #### Defined in -[lib/attachment.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L45) +[projects/stream-chat-angular/src/lib/attachment.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/attachment.service.ts#L53) --- ### retryAttachmentUpload -▸ **retryAttachmentUpload**(`file`): `Promise`<`void`\> +▸ **retryAttachmentUpload**(`file`): `Promise`\<`void`\> Retries to upload an attachment. @@ -174,10 +176,10 @@ Retries to upload an attachment. #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> A promise with the result #### Defined in -[lib/attachment.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L113) +[projects/stream-chat-angular/src/lib/attachment.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 07f49e33..ad5c33de 100644 --- a/docusaurus/docs/Angular/services/ChannelService.mdx +++ b/docusaurus/docs/Angular/services/ChannelService.mdx @@ -12,7 +12,7 @@ The `ChannelService` provides data and interaction for the channel list and mess ### activeChannel$ -• **activeChannel$**: `Observable`<`undefined` \| `Channel`<`T`\>\> +• **activeChannel$**: `Observable`\<`undefined` \| `Channel`\<`T`\>\> Emits the currently active channel. @@ -24,7 +24,7 @@ The active channel will always be marked as read when a new message is received #### Defined in -[lib/channel.service.ts:97](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L97) +[projects/stream-chat-angular/src/lib/channel.service.ts:80](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L80) --- @@ -38,31 +38,31 @@ This property isn't always updated, please use `channel.read` to display up-to-d #### Defined in -[lib/channel.service.ts:149](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L149) +[projects/stream-chat-angular/src/lib/channel.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L132) --- ### activeChannelMessages$ -• **activeChannelMessages$**: `Observable`<`StreamMessage`<`T`\>[]\> +• **activeChannelMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\> Emits the list of currently loaded messages of the active channel. #### Defined in -[lib/channel.service.ts:101](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L101) +[projects/stream-chat-angular/src/lib/channel.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L84) --- ### activeChannelPinnedMessages$ -• **activeChannelPinnedMessages$**: `Observable`<`StreamMessage`<`T`\>[]\> +• **activeChannelPinnedMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\> Emits the list of pinned messages of the active channel. #### Defined in -[lib/channel.service.ts:105](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L105) +[projects/stream-chat-angular/src/lib/channel.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L88) --- @@ -76,101 +76,101 @@ This property isn't always updated, please use `channel.read` to display up-to-d #### Defined in -[lib/channel.service.ts:155](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L155) +[projects/stream-chat-angular/src/lib/channel.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L138) --- ### activeParentMessage$ -• **activeParentMessage$**: `Observable`<`undefined` \| `StreamMessage`<`T`\>\> +• **activeParentMessage$**: `Observable`\<`undefined` \| `StreamMessage`\<`T`\>\> Emits the currently selected parent message. If no message is selected, it emits undefined. #### Defined in -[lib/channel.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L117) +[projects/stream-chat-angular/src/lib/channel.service.ts:100](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L100) --- ### activeParentMessageId$ -• **activeParentMessageId$**: `Observable`<`undefined` \| `string`\> +• **activeParentMessageId$**: `Observable`\<`undefined` \| `string`\> Emits the id of the currently selected parent message. If no message is selected, it emits undefined. #### Defined in -[lib/channel.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L109) +[projects/stream-chat-angular/src/lib/channel.service.ts:92](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L92) --- ### activeThreadMessages$ -• **activeThreadMessages$**: `Observable`<`StreamMessage`<`T`\>[]\> +• **activeThreadMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\> Emits the list of currently loaded thread replies belonging to the selected parent message. If there is no currently active thread it emits an empty array. #### Defined in -[lib/channel.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L113) +[projects/stream-chat-angular/src/lib/channel.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L96) --- ### beforeSendMessage -• `Optional` **beforeSendMessage**: (`input`: `MessageInput`<`T`\>) => `MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\> +• `Optional` **beforeSendMessage**: (`input`: `MessageInput`\<`T`\>) => `MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\> + +The provided method will be called before a new message is sent to Stream's API. You can use this hook to tranfrom or enrich the message being sent. #### Type declaration -▸ (`input`): `MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\> - -The provided method will be called before a new message is sent to Stream's API. You can use this hook to tranfrom or enrich the message being sent. +▸ (`input`): `MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\> ##### Parameters -| Name | Type | -| :------ | :------------------- | -| `input` | `MessageInput`<`T`\> | +| Name | Type | +| :------ | :-------------------- | +| `input` | `MessageInput`\<`T`\> | ##### Returns -`MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\> +`MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\> #### Defined in -[lib/channel.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L304) +[projects/stream-chat-angular/src/lib/channel.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L305) --- ### beforeUpdateMessage -• `Optional` **beforeUpdateMessage**: (`message`: `StreamMessage`<`T`\>) => `StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\> +• `Optional` **beforeUpdateMessage**: (`message`: `StreamMessage`\<`T`\>) => `StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\> -#### Type declaration +The provided method will be called before a message is sent to Stream's API for update. You can use this hook to tranfrom or enrich the message being updated. -▸ (`message`): `StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\> +#### Type declaration -The provided method will be called before a message is sent to Stream's API for update. You can use this hook to tranfrom or enrich the message being updated. +▸ (`message`): `StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\> ##### Parameters -| Name | Type | -| :-------- | :-------------------- | -| `message` | `StreamMessage`<`T`\> | +| Name | Type | +| :-------- | :--------------------- | +| `message` | `StreamMessage`\<`T`\> | ##### Returns -`StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\> +`StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\> #### Defined in -[lib/channel.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L310) +[projects/stream-chat-angular/src/lib/channel.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L311) --- ### bouncedMessage$ -• **bouncedMessage$**: `BehaviorSubject`<`undefined` \| `StreamMessage`<`T`\>\> +• **bouncedMessage$**: `BehaviorSubject`\<`undefined` \| `StreamMessage`\<`T`\>\> If you're using [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters) you can set up rules for bouncing messages. @@ -178,25 +178,25 @@ If a message is bounced, it will be emitted via this `Observable`. The built-in #### Defined in -[lib/channel.service.ts:143](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L143) +[projects/stream-chat-angular/src/lib/channel.service.ts:126](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L126) --- ### channelQueryState$ -• **channelQueryState$**: `Observable`<`undefined` \| `ChannelQueryState`\> +• **channelQueryState$**: `Observable`\<`undefined` \| `ChannelQueryState`\> The result of the latest channel query request. #### Defined in -[lib/channel.service.ts:87](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L87) +[projects/stream-chat-angular/src/lib/channel.service.ts:70](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L70) --- ### channels$ -• **channels$**: `Observable`<`undefined` \| `Channel`<`T`\>[]\> +• **channels$**: `Observable`\<`undefined` \| `Channel`\<`T`\>[]\> Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel list. @@ -204,48 +204,30 @@ Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascri If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail. ::: -Apart from pagination, the channel list is also updated on the following events: - -| Event type | Default behavior | Custom handler to override | -| ----------------------------------- | ------------------------------------------------------------------ | --------------------------------------------- | -| `channel.deleted` | Remove channel from the list | `customChannelDeletedHandler` | -| `channel.hidden` | Remove channel from the list | `customChannelHiddenHandler` | -| `channel.truncated` | Updates the channel | `customChannelTruncatedHandler` | -| `channel.updated` | Updates the channel | `customChannelUpdatedHandler` | -| `channel.visible` | Adds the channel to the list | `customChannelVisibleHandler` | -| `message.new` | Moves the channel to top of the list | `customNewMessageHandler` | -| `notification.added_to_channel` | Adds the new channel to the top of the list and starts watching it | `customAddedToChannelNotificationHandler` | -| `notification.message_new` | Adds the new channel to the top of the list and starts watching it | `customNewMessageNotificationHandler` | -| `notification.removed_from_channel` | Removes the channel from the list | `customRemovedFromChannelNotificationHandler` | - -It's important to note that filters don't apply to updates to the list from events. - -Our platform documentation covers the topic of [channel events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript#events) in depth. - -By default if an error occurs during channel load, the Observable will emit an error, which will close the stream. Users will have to reload the page to be able to reinitialize the `ChannelService`. If you don't want the streams to be closed, you can pass `options.keepAliveChannels$OnError = true` to the `init` method. In that case the `channelQueryState$` stream will emit the status of the latest channel load request. - #### Defined in -[lib/channel.service.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L83) +[projects/stream-chat-angular/src/lib/channel.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L66) --- ### customAddedToChannelNotificationHandler -• `Optional` **customAddedToChannelNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` +• `Optional` **customAddedToChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` + +Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`clientEvent`, `channelListSetter`): `void` -Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :------------------ | :---------------------------------------------------------------------------------------------------------------------- | -| `clientEvent` | `ClientEvent`<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| Name | Type | +| :------------------ | :------------------------------------------------------------------------------------------ | +| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | ##### Returns @@ -253,30 +235,32 @@ Custom event handler to call when the user is added to a channel, provide an eve #### Defined in -[lib/channel.service.ts:169](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L169) +[projects/stream-chat-angular/src/lib/channel.service.ts:156](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L156) --- ### customChannelDeletedHandler -• `Optional` **customChannelDeletedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` +• `Optional` **customChannelDeletedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` + +Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` -Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | -| `event` | `Event`<`DefaultGenerics`\> | -| `channel` | `Channel`<`T`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | +| Name | Type | +| :-------------------- | :------------------------------------------------------------------------------------------ | +| `event` | `Event`\<`DefaultGenerics`\> | +| `channel` | `Channel`\<`T`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | ##### Returns @@ -284,30 +268,32 @@ Custom event handler to call when a channel is deleted, provide an event handler #### Defined in -[lib/channel.service.ts:189](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L189) +[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L180) --- ### customChannelHiddenHandler -• `Optional` **customChannelHiddenHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` +• `Optional` **customChannelHiddenHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` + +Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` -Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | -| `event` | `Event`<`DefaultGenerics`\> | -| `channel` | `Channel`<`T`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | +| Name | Type | +| :-------------------- | :------------------------------------------------------------------------------------------ | +| `event` | `Event`\<`DefaultGenerics`\> | +| `channel` | `Channel`\<`T`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | ##### Returns @@ -315,30 +301,32 @@ Custom event handler to call when a channel becomes hidden, provide an event han #### Defined in -[lib/channel.service.ts:231](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L231) +[projects/stream-chat-angular/src/lib/channel.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L228) --- ### customChannelTruncatedHandler -• `Optional` **customChannelTruncatedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` +• `Optional` **customChannelTruncatedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` + +Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` -Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | -| `event` | `Event`<`DefaultGenerics`\> | -| `channel` | `Channel`<`T`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | +| Name | Type | +| :-------------------- | :------------------------------------------------------------------------------------------ | +| `event` | `Event`\<`DefaultGenerics`\> | +| `channel` | `Channel`\<`T`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | ##### Returns @@ -346,30 +334,32 @@ Custom event handler to call when a channel is truncated, provide an event handl #### Defined in -[lib/channel.service.ts:217](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L217) +[projects/stream-chat-angular/src/lib/channel.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L212) --- ### customChannelUpdatedHandler -• `Optional` **customChannelUpdatedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>) => `void`) => `void` +• `Optional` **customChannelUpdatedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>) => `void`) => `void` + +Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` -Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | -| `event` | `Event`<`DefaultGenerics`\> | -| `channel` | `Channel`<`T`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>) => `void` | +| Name | Type | +| :-------------------- | :------------------------------------------------------------------------------------------ | +| `event` | `Event`\<`DefaultGenerics`\> | +| `channel` | `Channel`\<`T`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>) => `void` | ##### Returns @@ -377,30 +367,32 @@ Custom event handler to call when a channel is updated, provide an event handler #### Defined in -[lib/channel.service.ts:203](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L203) +[projects/stream-chat-angular/src/lib/channel.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L196) --- ### customChannelVisibleHandler -• `Optional` **customChannelVisibleHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` +• `Optional` **customChannelVisibleHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` + +Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` -Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | -| `event` | `Event`<`DefaultGenerics`\> | -| `channel` | `Channel`<`T`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | +| Name | Type | +| :-------------------- | :------------------------------------------------------------------------------------------ | +| `event` | `Event`\<`DefaultGenerics`\> | +| `channel` | `Channel`\<`T`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | ##### Returns @@ -408,138 +400,140 @@ Custom event handler to call when a channel becomes visible, provide an event ha #### Defined in -[lib/channel.service.ts:245](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L245) +[projects/stream-chat-angular/src/lib/channel.service.ts:244](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L244) --- ### customFileDeleteRequest -• `Optional` **customFileDeleteRequest**: (`url`: `string`, `channel`: `Channel`<`T`\>) => `Promise`<`void`\> +• `Optional` **customFileDeleteRequest**: (`url`: `string`, `channel`: `Channel`\<`T`\>) => `Promise`\<`void`\> -#### Type declaration +You can override the default file delete request - override this if you use your own CDN -▸ (`url`, `channel`): `Promise`<`void`\> +#### Type declaration -You can override the default file delete request - override this if you use your own CDN +▸ (`url`, `channel`): `Promise`\<`void`\> ##### Parameters -| Name | Type | -| :-------- | :-------------- | -| `url` | `string` | -| `channel` | `Channel`<`T`\> | +| Name | Type | +| :-------- | :--------------- | +| `url` | `string` | +| `channel` | `Channel`\<`T`\> | ##### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:287](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L287) +[projects/stream-chat-angular/src/lib/channel.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L288) --- ### customFileUploadRequest -• `Optional` **customFileUploadRequest**: (`file`: `File`, `channel`: `Channel`<`T`\>) => `Promise`<{}\> +• `Optional` **customFileUploadRequest**: (`file`: `File`, `channel`: `Channel`\<`T`\>) => `Promise`\<\{ `file`: `string` }\> -#### Type declaration +You can override the default file upload request - you can use this to upload files to your own CDN -▸ (`file`, `channel`): `Promise`<{}\> +#### Type declaration -You can override the default file upload request - you can use this to upload files to your own CDN +▸ (`file`, `channel`): `Promise`\<\{ `file`: `string` }\> ##### Parameters -| Name | Type | -| :-------- | :-------------- | -| `file` | `File` | -| `channel` | `Channel`<`T`\> | +| Name | Type | +| :-------- | :--------------- | +| `file` | `File` | +| `channel` | `Channel`\<`T`\> | ##### Returns -`Promise`<{}\> +`Promise`\<\{ `file`: `string` }\> #### Defined in -[lib/channel.service.ts:273](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L273) +[projects/stream-chat-angular/src/lib/channel.service.ts:274](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L274) --- ### customImageDeleteRequest -• `Optional` **customImageDeleteRequest**: (`url`: `string`, `channel`: `Channel`<`T`\>) => `Promise`<`void`\> +• `Optional` **customImageDeleteRequest**: (`url`: `string`, `channel`: `Channel`\<`T`\>) => `Promise`\<`void`\> -#### Type declaration +You can override the default image delete request - override this if you use your own CDN -▸ (`url`, `channel`): `Promise`<`void`\> +#### Type declaration -You can override the default image delete request - override this if you use your own CDN +▸ (`url`, `channel`): `Promise`\<`void`\> ##### Parameters -| Name | Type | -| :-------- | :-------------- | -| `url` | `string` | -| `channel` | `Channel`<`T`\> | +| Name | Type | +| :-------- | :--------------- | +| `url` | `string` | +| `channel` | `Channel`\<`T`\> | ##### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:291](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L291) +[projects/stream-chat-angular/src/lib/channel.service.ts:292](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L292) --- ### customImageUploadRequest -• `Optional` **customImageUploadRequest**: (`file`: `File`, `channel`: `Channel`<`T`\>) => `Promise`<{}\> +• `Optional` **customImageUploadRequest**: (`file`: `File`, `channel`: `Channel`\<`T`\>) => `Promise`\<\{ `file`: `string` }\> -#### Type declaration +You can override the default image upload request - you can use this to upload images to your own CDN -▸ (`file`, `channel`): `Promise`<{}\> +#### Type declaration -You can override the default image upload request - you can use this to upload images to your own CDN +▸ (`file`, `channel`): `Promise`\<\{ `file`: `string` }\> ##### Parameters -| Name | Type | -| :-------- | :-------------- | -| `file` | `File` | -| `channel` | `Channel`<`T`\> | +| Name | Type | +| :-------- | :--------------- | +| `file` | `File` | +| `channel` | `Channel`\<`T`\> | ##### Returns -`Promise`<{}\> +`Promise`\<\{ `file`: `string` }\> #### Defined in -[lib/channel.service.ts:280](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L280) +[projects/stream-chat-angular/src/lib/channel.service.ts:281](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L281) --- ### customNewMessageHandler -• `Optional` **customNewMessageHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void` +• `Optional` **customNewMessageHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void` + +Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` -Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | -| `event` | `Event`<`DefaultGenerics`\> | -| `channel` | `Channel`<`T`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | -| `messageListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `threadListSetter` | (`messages`: `StreamMessage`<`T`\>[]) => `void` | -| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void` | +| Name | Type | +| :-------------------- | :------------------------------------------------------------------------------------------ | +| `event` | `Event`\<`DefaultGenerics`\> | +| `channel` | `Channel`\<`T`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| `messageListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `threadListSetter` | (`messages`: `StreamMessage`\<`T`\>[]) => `void` | +| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void` | ##### Returns @@ -547,83 +541,57 @@ Custom event handler to call if a new message received from a channel that is be #### Defined in -[lib/channel.service.ts:259](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L259) +[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L260) --- ### customNewMessageNotificationHandler -• `Optional` **customNewMessageNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` - -#### Type declaration - -▸ (`clientEvent`, `channelListSetter`): `void` +• `Optional` **customNewMessageNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) -##### Parameters - -| Name | Type | -| :------------------ | :---------------------------------------------------------------------------------------------------------------------- | -| `clientEvent` | `ClientEvent`<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | - -##### Returns - -`void` - -#### Defined in - -[lib/channel.service.ts:159](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L159) - ---- - -### customPaginator - -• `Optional` **customPaginator**: (`channelQueryResult`: `Channel`<`T`\>[]) => `NextPageConfiguration` +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration -▸ (`channelQueryResult`): `NextPageConfiguration` - -By default the SDK uses an offset based pagination, you can change/extend this by providing your own custom paginator method. - -The method will be called with the result of the latest channel query. - -You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method. +▸ (`clientEvent`, `channelListSetter`): `void` ##### Parameters -| Name | Type | -| :------------------- | :---------------- | -| `channelQueryResult` | `Channel`<`T`\>[] | +| Name | Type | +| :------------------ | :------------------------------------------------------------------------------------------ | +| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | ##### Returns -`NextPageConfiguration` +`void` #### Defined in -[lib/channel.service.ts:320](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L320) +[projects/stream-chat-angular/src/lib/channel.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L144) --- ### customRemovedFromChannelNotificationHandler -• `Optional` **customRemovedFromChannelNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` +• `Optional` **customRemovedFromChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void` + +Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels). + +If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. #### Type declaration ▸ (`clientEvent`, `channelListSetter`): `void` -Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels) - ##### Parameters -| Name | Type | -| :------------------ | :---------------------------------------------------------------------------------------------------------------------- | -| `clientEvent` | `ClientEvent`<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | +| Name | Type | +| :------------------ | :------------------------------------------------------------------------------------------ | +| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | +| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | ##### Returns @@ -631,153 +599,199 @@ Custom event handler to call when the user is removed from a channel, provide an #### Defined in -[lib/channel.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L179) +[projects/stream-chat-angular/src/lib/channel.service.ts:168](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L168) --- ### hasMoreChannels$ -• **hasMoreChannels$**: `Observable`<`boolean`\> +• **hasMoreChannels$**: `Observable`\<`boolean`\> Emits `false` if there are no more pages of channels that can be loaded. #### Defined in -[lib/channel.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L55) +[projects/stream-chat-angular/src/lib/channel.service.ts:58](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L58) --- ### jumpToMessage$ -• **jumpToMessage$**: `Observable`<{}\> +• **jumpToMessage$**: `Observable`\<\{ `id?`: `string` ; `parentId?`: `string` }\> Emits the ID of the message the message list should jump to (can be a channel message or thread message) #### Defined in -[lib/channel.service.ts:125](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L125) +[projects/stream-chat-angular/src/lib/channel.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L108) --- ### latestMessageDateByUserByChannels$ -• **latestMessageDateByUserByChannels$**: `Observable`<{ [key: string]: `Date`; }\> +• **latestMessageDateByUserByChannels$**: `Observable`\<\{ `[key: string]`: `Date`; }\> Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started) #### Defined in -[lib/channel.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L137) +[projects/stream-chat-angular/src/lib/channel.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L120) --- ### messageDeleteConfirmationHandler -• `Optional` **messageDeleteConfirmationHandler**: (`message`: `StreamMessage`<`T`\>) => `Promise`<`boolean`\> +• `Optional` **messageDeleteConfirmationHandler**: (`message`: `StreamMessage`\<`T`\>) => `Promise`\<`boolean`\> + +The provided method will be called before deleting a message. If the returned Promise resolves to `true` to deletion will go ahead. If `false` is returned, the message won't be deleted. #### Type declaration -▸ (`message`): `Promise`<`boolean`\> - -The provided method will be called before deleting a message. If the returned Promise resolves to `true` to deletion will go ahead. If `false` is returned, the message won't be deleted. +▸ (`message`): `Promise`\<`boolean`\> ##### Parameters -| Name | Type | -| :-------- | :-------------------- | -| `message` | `StreamMessage`<`T`\> | +| Name | Type | +| :-------- | :--------------------- | +| `message` | `StreamMessage`\<`T`\> | ##### Returns -`Promise`<`boolean`\> +`Promise`\<`boolean`\> #### Defined in -[lib/channel.service.ts:298](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L298) +[projects/stream-chat-angular/src/lib/channel.service.ts:299](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L299) --- ### messageToQuote$ -• **messageToQuote$**: `Observable`<`undefined` \| `StreamMessage`<`T`\>\> +• **messageToQuote$**: `Observable`\<`undefined` \| `StreamMessage`\<`T`\>\> Emits the currently selected message to quote #### Defined in -[lib/channel.service.ts:121](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L121) +[projects/stream-chat-angular/src/lib/channel.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L104) --- ### usersTypingInChannel$ -• **usersTypingInChannel$**: `Observable`<`UserResponse`<`T`\>[]\> +• **usersTypingInChannel$**: `Observable`\<`UserResponse`\<`T`\>[]\> Emits the list of users that are currently typing in the channel (current user is not included) #### Defined in -[lib/channel.service.ts:129](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L129) +[projects/stream-chat-angular/src/lib/channel.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L112) --- ### usersTypingInThread$ -• **usersTypingInThread$**: `Observable`<`UserResponse`<`T`\>[]\> +• **usersTypingInThread$**: `Observable`\<`UserResponse`\<`T`\>[]\> Emits the list of users that are currently typing in the active thread (current user is not included) #### Defined in -[lib/channel.service.ts:133](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L133) +[projects/stream-chat-angular/src/lib/channel.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L116) + +--- + +### MAX_MESSAGE_COUNT_IN_MESSAGE_LIST + +▪ `Static` `Readonly` **MAX_MESSAGE_COUNT_IN_MESSAGE_LIST**: `250` + +#### Defined in + +[projects/stream-chat-angular/src/lib/channel.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L317) + +--- + +### MAX_MESSAGE_REACTIONS_TO_FETCH + +▪ `Static` `Readonly` **MAX_MESSAGE_REACTIONS_TO_FETCH**: `1200` + +#### Defined in + +[projects/stream-chat-angular/src/lib/channel.service.ts:321](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L321) ## Accessors ### activeChannel -• `get` **activeChannel**(): `undefined` \| `Channel`<`T`\> +• `get` **activeChannel**(): `undefined` \| `Channel`\<`T`\> The current active channel #### Returns -`undefined` \| `Channel`<`T`\> +`undefined` \| `Channel`\<`T`\> #### Defined in -[lib/channel.service.ts:1555](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1555) +[projects/stream-chat-angular/src/lib/channel.service.ts:1638](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1638) --- ### activeChannelMessages -• `get` **activeChannelMessages**(): (`StreamMessage`<`T`\> \| `MessageResponse`<`T`\> \| `FormatMessageResponse`<`T`\>)[] +• `get` **activeChannelMessages**(): (`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[] The current active channel messages #### Returns -(`StreamMessage`<`T`\> \| `MessageResponse`<`T`\> \| `FormatMessageResponse`<`T`\>)[] +(`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[] #### Defined in -[lib/channel.service.ts:1562](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1562) +[projects/stream-chat-angular/src/lib/channel.service.ts:1645](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1645) --- ### channels -• `get` **channels**(): `Channel`<`T`\>[] +• `get` **channels**(): `Channel`\<`T`\>[] The current list of channels #### Returns -`Channel`<`T`\>[] +`Channel`\<`T`\>[] #### Defined in -[lib/channel.service.ts:1548](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1548) +[projects/stream-chat-angular/src/lib/channel.service.ts:1631](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1631) + +--- + +### customPaginator + +• `set` **customPaginator**(`paginator`): `void` + +By default the SDK uses an offset based pagination, you can change/extend this by providing your own custom paginator method. + +The method will be called with the result of the latest channel query. + +You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method. + +#### Parameters + +| Name | Type | +| :---------- | :----------------------------------------------------------------------------------- | +| `paginator` | `undefined` \| (`channelQueryResult`: `Channel`\<`T`\>[]) => `NextPageConfiguration` | + +#### Returns + +`void` + +#### Defined in + +[projects/stream-chat-angular/src/lib/channel.service.ts:570](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L570) --- @@ -793,7 +807,7 @@ If set to false, read events won't be sent as new messages are received. If set #### Defined in -[lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L523) +[projects/stream-chat-angular/src/lib/channel.service.ts:546](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L546) • `set` **shouldMarkActiveChannelAsRead**(`shouldMarkActiveChannelAsRead`): `void` @@ -811,7 +825,7 @@ If set to false, read events won't be sent as new messages are received. If set #### Defined in -[lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L530) +[projects/stream-chat-angular/src/lib/channel.service.ts:553](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L553) ## Methods @@ -824,9 +838,9 @@ The channel will be added to the beginning of the channel list #### Parameters -| Name | Type | -| :-------- | :-------------- | -| `channel` | `Channel`<`T`\> | +| Name | Type | +| :-------- | :--------------- | +| `channel` | `Channel`\<`T`\> | #### Returns @@ -834,13 +848,13 @@ The channel will be added to the beginning of the channel list #### Defined in -[lib/channel.service.ts:1080](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1080) +[projects/stream-chat-angular/src/lib/channel.service.ts:1150](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1150) --- ### addReaction -▸ **addReaction**(`messageId`, `reactionType`, `customData?`): `Promise`<`void`\> +▸ **addReaction**(`messageId`, `reactionType`, `customData?`): `Promise`\<`void`\> Adds a reaction to a message. @@ -854,17 +868,17 @@ Adds a reaction to a message. #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:771](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L771) +[projects/stream-chat-angular/src/lib/channel.service.ts:827](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L827) --- ### autocompleteMembers -▸ **autocompleteMembers**(`searchTerm`): `Promise`<`ChannelMemberResponse`<`T`\>[]\> +▸ **autocompleteMembers**(`searchTerm`): `Promise`\<`ChannelMemberResponse`\<`T`\>[]\> Returns the autocomplete options for current channel members. If the channel has less than 100 members, it returns the channel members, otherwise sends a [search request](https://getstream.io/chat/docs/javascript/query_members/?language=javascript#pagination-and-ordering) with the given search term. @@ -876,13 +890,13 @@ Returns the autocomplete options for current channel members. If the channel has #### Returns -`Promise`<`ChannelMemberResponse`<`T`\>[]\> +`Promise`\<`ChannelMemberResponse`\<`T`\>[]\> The list of members matching the search filter #### Defined in -[lib/channel.service.ts:1007](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1007) +[projects/stream-chat-angular/src/lib/channel.service.ts:1077](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1077) --- @@ -898,52 +912,52 @@ Clears the currently selected message to jump #### Defined in -[lib/channel.service.ts:1203](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1203) +[projects/stream-chat-angular/src/lib/channel.service.ts:1310](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1310) --- ### deleteAttachment -▸ **deleteAttachment**(`attachmentUpload`): `Promise`<`void`\> +▸ **deleteAttachment**(`attachmentUpload`): `Promise`\<`void`\> Deletes an uploaded file by URL. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation #### Parameters -| Name | Type | Description | -| :----------------- | :----------------------------------------------- | :-------------------------------------------------------------------------------------- | -| `attachmentUpload` | `AttachmentUpload`<`DefaultStreamChatGenerics`\> | Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx)) | +| Name | Type | Description | +| :----------------- | :------------------------------------------------ | :-------------------------------------------------------------------------------------- | +| `attachmentUpload` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\> | Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx)) | #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:991](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L991) +[projects/stream-chat-angular/src/lib/channel.service.ts:1061](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1061) --- ### deleteMessage -▸ **deleteMessage**(`message`, `isLocalDelete?`): `Promise`<`void`\> +▸ **deleteMessage**(`message`, `isLocalDelete?`): `Promise`\<`void`\> Deletes the message from the active channel #### Parameters -| Name | Type | Default value | Description | -| :-------------- | :-------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------- | -| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | `undefined` | Message to be deleted | -| `isLocalDelete` | `boolean` | `false` | set this `true` if you want to delete a message that's only part of the local state, not yet saved on the backend | +| Name | Type | Default value | Description | +| :-------------- | :--------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------- | +| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | `undefined` | Message to be deleted | +| `isLocalDelete` | `boolean` | `false` | set this `true` if you want to delete a message that's only part of the local state, not yet saved on the backend | #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L893) +[projects/stream-chat-angular/src/lib/channel.service.ts:949](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L949) --- @@ -959,13 +973,13 @@ Deselects the currently active (if any) channel #### Defined in -[lib/channel.service.ts:578](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L578) +[projects/stream-chat-angular/src/lib/channel.service.ts:618](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L618) --- ### getMessageReactions -▸ **getMessageReactions**(`messageId`): `Promise`<`ReactionResponse`<`T`\>[]\> +▸ **getMessageReactions**(`messageId`): `Promise`\<`ReactionResponse`\<`T`\>[]\> Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions). @@ -977,46 +991,73 @@ Get the last 1200 reactions of a message in the current active channel. If you n #### Returns -`Promise`<`ReactionResponse`<`T`\>[]\> +`Promise`\<`ReactionResponse`\<`T`\>[]\> all reactions of a message #### Defined in -[lib/channel.service.ts:1571](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1571) +[projects/stream-chat-angular/src/lib/channel.service.ts:1654](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1654) --- ### init -▸ **init**(`filters`, `sort?`, `options?`, `shouldSetActiveChannel?`): `Promise`<`Channel`<`T`\>[]\> +▸ **init**(`filters`, `sort?`, `options?`, `shouldSetActiveChannel?`): `Promise`\<`Channel`\<`T`\>[]\> Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read. #### Parameters -| Name | Type | Default value | Description | -| :----------------------- | :--------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- | -| `filters` | `ChannelFilters`<`T`\> | `undefined` | | -| `sort?` | `ChannelSort`<`T`\> | `undefined` | | -| `options?` | `ChannelOptions` & {} | `undefined` | | -| `shouldSetActiveChannel` | `boolean` | `true` | Decides if the first channel in the result should be made as an active channel, or no channel should be marked as active | +| Name | Type | Default value | Description | +| :----------------------- | :---------------------- | :------------ | :------------------------------------------------------------------------------------- | +| `filters` | `ChannelFilters`\<`T`\> | `undefined` | | +| `sort?` | `ChannelSort`\<`T`\> | `undefined` | | +| `options?` | `ChannelOptions` | `undefined` | | +| `shouldSetActiveChannel` | `boolean` | `true` | Decides if the first channel in the result should be made as an active channel or not. | #### Returns -`Promise`<`Channel`<`T`\>[]\> +`Promise`\<`Channel`\<`T`\>[]\> the list of channels found by the query #### Defined in -[lib/channel.service.ts:708](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L708) +[projects/stream-chat-angular/src/lib/channel.service.ts:751](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L751) + +--- + +### initWithCustomQuery + +▸ **initWithCustomQuery**(`query`, `options?`): `Promise`\<`Channel`\<`T`\>[]\> + +Queries the channels with the given query function. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. + +#### Parameters + +| Name | Type | Description | +| :------------------------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | +| `query` | (`queryType`: `ChannelQueryType`) => `Promise`\<`ChannelQueryResult`\<`T`\>\> | | +| `options` | `Object` | | +| `options.messagePageSize` | `number` | How many messages should we load? The default is 25 | +| `options.shouldSetActiveChannel` | `boolean` | The `shouldSetActiveChannel` specifies if the first channel in the result should be selected as the active channel or not. Default is `true`. | + +#### Returns + +`Promise`\<`Channel`\<`T`\>[]\> + +the channels that were loaded + +#### Defined in + +[projects/stream-chat-angular/src/lib/channel.service.ts:787](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L787) --- ### jumpToMessage -▸ **jumpToMessage**(`messageId`, `parentMessageId?`): `Promise`<`void`\> +▸ **jumpToMessage**(`messageId`, `parentMessageId?`): `Promise`\<`void`\> Jumps to the selected message inside the message list, if the message is not yet loaded, it'll load the message (and it's surroundings) from the API. @@ -1029,33 +1070,33 @@ Jumps to the selected message inside the message list, if the message is not yet #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:1175](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1175) +[projects/stream-chat-angular/src/lib/channel.service.ts:1282](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1282) --- ### loadMoreChannels -▸ **loadMoreChannels**(): `Promise`<`void`\> +▸ **loadMoreChannels**(): `Promise`\<`void`\> Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:761](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L761) +[projects/stream-chat-angular/src/lib/channel.service.ts:817](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L817) --- ### loadMoreMessages -▸ **loadMoreMessages**(`direction?`): `undefined` \| `false` \| `Promise`<`QueryChannelAPIResponse`<`T`\>\> +▸ **loadMoreMessages**(`direction?`): `undefined` \| `false` \| `Promise`\<`QueryChannelAPIResponse`\<`T`\>\> Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. @@ -1067,17 +1108,17 @@ Loads the next page of messages of the active channel. The page size can be set #### Returns -`undefined` \| `false` \| `Promise`<`QueryChannelAPIResponse`<`T`\>\> +`undefined` \| `false` \| `Promise`\<`QueryChannelAPIResponse`\<`T`\>\> #### Defined in -[lib/channel.service.ts:639](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L639) +[projects/stream-chat-angular/src/lib/channel.service.ts:679](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L679) --- ### loadMoreThreadReplies -▸ **loadMoreThreadReplies**(`direction?`): `Promise`<`void`\> +▸ **loadMoreThreadReplies**(`direction?`): `false` \| `Promise`\<`void`\> Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object. @@ -1089,17 +1130,17 @@ Loads the next page of messages of the active thread. The page size can be set i #### Returns -`Promise`<`void`\> +`false` \| `Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:678](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L678) +[projects/stream-chat-angular/src/lib/channel.service.ts:718](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L718) --- ### markMessageUnread -▸ **markMessageUnread**(`messageId`): `Promise`<`undefined` \| `null` \| `APIResponse`\> +▸ **markMessageUnread**(`messageId`): `Promise`\<`undefined` \| `null` \| `APIResponse`\> Marks the channel from the given message as unread @@ -1111,35 +1152,56 @@ Marks the channel from the given message as unread #### Returns -`Promise`<`undefined` \| `null` \| `APIResponse`\> +`Promise`\<`undefined` \| `null` \| `APIResponse`\> the result of the request #### Defined in -[lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1604) +[projects/stream-chat-angular/src/lib/channel.service.ts:1687](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1687) --- ### pinMessage -▸ **pinMessage**(`message`): `Promise`<`void`\> +▸ **pinMessage**(`message`): `Promise`\<`void`\> Pins the given message in the channel #### Parameters -| Name | Type | -| :-------- | :-------------------------------------------- | -| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | +| Name | Type | +| :-------- | :--------------------------------------------- | +| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[projects/stream-chat-angular/src/lib/channel.service.ts:1318](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1318) + +--- + +### removeChannel + +▸ **removeChannel**(`cid`, `shouldStopWatching?`): `void` + +#### Parameters + +| Name | Type | Default value | +| :------------------- | :-------- | :------------ | +| `cid` | `string` | `undefined` | +| `shouldStopWatching` | `boolean` | `true` | #### Returns -`Promise`<`void`\> +`void` #### Defined in -[lib/channel.service.ts:1211](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1211) +[projects/stream-chat-angular/src/lib/channel.service.ts:1162](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1162) --- @@ -1155,13 +1217,13 @@ internal #### Defined in -[lib/channel.service.ts:501](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L501) +[projects/stream-chat-angular/src/lib/channel.service.ts:524](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L524) --- ### removeReaction -▸ **removeReaction**(`messageId`, `reactionType`): `Promise`<`void`\> +▸ **removeReaction**(`messageId`, `reactionType`): `Promise`\<`void`\> Removes a reaction from a message. @@ -1174,33 +1236,33 @@ Removes a reaction from a message. #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:787](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L787) +[projects/stream-chat-angular/src/lib/channel.service.ts:843](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L843) --- ### resendMessage -▸ **resendMessage**(`message`): `Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> +▸ **resendMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\>\> Resends the given message to the active channel #### Parameters -| Name | Type | Description | -| :-------- | :-------------------------------------------- | :-------------------- | -| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | The message to resend | +| Name | Type | Description | +| :-------- | :--------------------------------------------- | :-------------------- | +| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | The message to resend | #### Returns -`Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> +`Promise`\<`StreamMessage`\<`T`\>\> #### Defined in -[lib/channel.service.ts:841](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L841) +[projects/stream-chat-angular/src/lib/channel.service.ts:897](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L897) --- @@ -1216,7 +1278,7 @@ Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observable #### Defined in -[lib/channel.service.ts:744](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L744) +[projects/stream-chat-angular/src/lib/channel.service.ts:801](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L801) --- @@ -1228,9 +1290,9 @@ Selects or deselects the current message to quote reply to #### Parameters -| Name | Type | Description | -| :-------- | :----------------------------------------------------------- | :-------------------------------------------------------------------------- | -| `message` | `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> | The message to select, if called with `undefined`, it deselects the message | +| Name | Type | Description | +| :-------- | :------------------------------------------------------------ | :-------------------------------------------------------------------------- | +| `message` | `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> | The message to select, if called with `undefined`, it deselects the message | #### Returns @@ -1238,58 +1300,58 @@ Selects or deselects the current message to quote reply to #### Defined in -[lib/channel.service.ts:1071](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1071) +[projects/stream-chat-angular/src/lib/channel.service.ts:1141](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1141) --- ### sendAction -▸ **sendAction**(`messageId`, `formData`, `parentMessageId?`): `Promise`<`void`\> +▸ **sendAction**(`messageId`, `formData`, `parentMessageId?`): `Promise`\<`void`\> [Runs a message action](https://getstream.io/chat/docs/rest/#messages-runmessageaction) in the current channel. Updates the message list based on the action result (if no message is returned, the message will be removed from the message list). #### Parameters -| Name | Type | -| :----------------- | :---------------------------- | -| `messageId` | `string` | -| `formData` | `Record`<`string`, `string`\> | -| `parentMessageId?` | `string` | +| Name | Type | +| :----------------- | :----------------------------- | +| `messageId` | `string` | +| `formData` | `Record`\<`string`, `string`\> | +| `parentMessageId?` | `string` | #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:1034](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1034) +[projects/stream-chat-angular/src/lib/channel.service.ts:1104](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1104) --- ### sendMessage -▸ **sendMessage**(`text`, `attachments?`, `mentionedUsers?`, `parentId?`, `quotedMessageId?`, `customData?`): `Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> +▸ **sendMessage**(`text`, `attachments?`, `mentionedUsers?`, `parentId?`, `quotedMessageId?`, `customData?`): `Promise`\<`StreamMessage`\<`T`\>\> Sends a message to the active channel. The message is immediately added to the message list, if an error occurs and the message can't be sent, the error is indicated in `state` of the message. #### Parameters -| Name | Type | Default value | Description | -| :---------------- | :------------------------------------------------ | :------------ | :---------------------------------------------------- | -| `text` | `string` | `undefined` | The text of the message | -| `attachments` | `Attachment`<`T`\>[] | `[]` | The attachments | -| `mentionedUsers` | `UserResponse`<`T`\>[] | `[]` | Mentioned users | -| `parentId` | `undefined` \| `string` | `undefined` | Id of the parent message (if sending a thread reply) | -| `quotedMessageId` | `undefined` \| `string` | `undefined` | Id of the message to quote (if sending a quote reply) | -| `customData` | `undefined` \| `Partial`<`T`[``"messageType"``]\> | `undefined` | | +| Name | Type | Default value | Description | +| :---------------- | :------------------------------------------------- | :------------ | :---------------------------------------------------- | +| `text` | `string` | `undefined` | The text of the message | +| `attachments` | `Attachment`\<`T`\>[] | `[]` | The attachments | +| `mentionedUsers` | `UserResponse`\<`T`\>[] | `[]` | Mentioned users | +| `parentId` | `undefined` \| `string` | `undefined` | Id of the parent message (if sending a thread reply) | +| `quotedMessageId` | `undefined` \| `string` | `undefined` | Id of the message to quote (if sending a quote reply) | +| `customData` | `undefined` \| `Partial`\<`T`[``"messageType"``]\> | `undefined` | | #### Returns -`Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\> +`Promise`\<`StreamMessage`\<`T`\>\> #### Defined in -[lib/channel.service.ts:802](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L802) +[projects/stream-chat-angular/src/lib/channel.service.ts:858](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L858) --- @@ -1302,9 +1364,9 @@ If the channel wasn't previously part of the channel, it will be added to the be #### Parameters -| Name | Type | -| :-------- | :-------------- | -| `channel` | `Channel`<`T`\> | +| Name | Type | +| :-------- | :--------------- | +| `channel` | `Channel`\<`T`\> | #### Returns @@ -1312,36 +1374,36 @@ If the channel wasn't previously part of the channel, it will be added to the be #### Defined in -[lib/channel.service.ts:546](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L546) +[projects/stream-chat-angular/src/lib/channel.service.ts:586](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L586) --- ### setAsActiveParentMessage -▸ **setAsActiveParentMessage**(`message`, `loadMessagesForm?`): `Promise`<`void`\> +▸ **setAsActiveParentMessage**(`message`, `loadMessagesForm?`): `Promise`\<`void`\> Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message. #### Parameters -| Name | Type | Default value | -| :----------------- | :----------------------------------- | :------------ | -| `message` | `undefined` \| `StreamMessage`<`T`\> | `undefined` | -| `loadMessagesForm` | `"request"` \| `"state"` | `'request'` | +| Name | Type | Default value | +| :----------------- | :------------------------------------ | :------------ | +| `message` | `undefined` \| `StreamMessage`\<`T`\> | `undefined` | +| `loadMessagesForm` | `"state"` \| `"request"` | `'request'` | #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:604](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L604) +[projects/stream-chat-angular/src/lib/channel.service.ts:644](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L644) --- ### typingStarted -▸ **typingStarted**(`parentId?`): `Promise`<`void`\> +▸ **typingStarted**(`parentId?`): `Promise`\<`void`\> Call this method if user started typing in the active channel @@ -1353,17 +1415,17 @@ Call this method if user started typing in the active channel #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:1531](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1531) +[projects/stream-chat-angular/src/lib/channel.service.ts:1614](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1614) --- ### typingStopped -▸ **typingStopped**(`parentId?`): `Promise`<`void`\> +▸ **typingStopped**(`parentId?`): `Promise`\<`void`\> Call this method if user stopped typing in the active channel @@ -1375,76 +1437,76 @@ Call this method if user stopped typing in the active channel #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:1540](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1540) +[projects/stream-chat-angular/src/lib/channel.service.ts:1623](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1623) --- ### unpinMessage -▸ **unpinMessage**(`message`): `Promise`<`void`\> +▸ **unpinMessage**(`message`): `Promise`\<`void`\> Removes the given message from pinned messages #### Parameters -| Name | Type | -| :-------- | :-------------------------------------------- | -| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | +| Name | Type | +| :-------- | :--------------------------------------------- | +| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/channel.service.ts:1230](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1230) +[projects/stream-chat-angular/src/lib/channel.service.ts:1337](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L1337) --- ### updateMessage -▸ **updateMessage**(`message`): `Promise`<`StreamMessage`<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`<`MessageResponse`<{}\>, `"created_at"` \| `"updated_at"` \| `"status"` \| `"pinned_at"`\> & `UR` & {}\> +▸ **updateMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"`\> & `UR` & {}\> Updates the message in the active channel #### Parameters -| Name | Type | Description | -| :-------- | :-------------------- | :------------------- | -| `message` | `StreamMessage`<`T`\> | Mesage to be updated | +| Name | Type | Description | +| :-------- | :--------------------- | :------------------- | +| `message` | `StreamMessage`\<`T`\> | Mesage to be updated | #### Returns -`Promise`<`StreamMessage`<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`<`MessageResponse`<{}\>, `"created_at"` \| `"updated_at"` \| `"status"` \| `"pinned_at"`\> & `UR` & {}\> +`Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"`\> & `UR` & {}\> #### Defined in -[lib/channel.service.ts:858](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L858) +[projects/stream-chat-angular/src/lib/channel.service.ts:914](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L914) --- ### uploadAttachments -▸ **uploadAttachments**(`uploads`): `Promise`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> +▸ **uploadAttachments**(`uploads`): `Promise`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> Uploads files to the channel. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation. #### Parameters -| Name | Type | Description | -| :-------- | :------------------------------------------------- | :--------------------------------------------------------------------------------------- | -| `uploads` | `AttachmentUpload`<`DefaultStreamChatGenerics`\>[] | the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx)) | +| Name | Type | Description | +| :-------- | :-------------------------------------------------- | :--------------------------------------------------------------------------------------- | +| `uploads` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\>[] | the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx)) | #### Returns -`Promise`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\> +`Promise`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\> the result of file upload requests #### Defined in -[lib/channel.service.ts:925](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L925) +[projects/stream-chat-angular/src/lib/channel.service.ts:981](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/channel.service.ts#L981) diff --git a/docusaurus/docs/Angular/services/ChatClientService.mdx b/docusaurus/docs/Angular/services/ChatClientService.mdx index cdf1e5e5..86b0df6e 100644 --- a/docusaurus/docs/Angular/services/ChatClientService.mdx +++ b/docusaurus/docs/Angular/services/ChatClientService.mdx @@ -12,43 +12,43 @@ The `ChatClient` service connects the user to the Stream chat. ### appSettings$ -• **appSettings$**: `Observable`<`undefined` \| `AppSettings`\> +• **appSettings$**: `Observable`\<`undefined` \| `AppSettings`\> Emits the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript). Since getting the application settings is an expensive API call and we don't always need the result, this is not initialized by default, you need to call `getApplicationSettings` to load them. #### Defined in -[lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49) --- ### chatClient -• **chatClient**: `StreamChat`<`T`\> +• **chatClient**: `StreamChat`\<`T`\> The [StreamChat client](https://github.com/GetStream/stream-chat-js/blob/master/src/client.ts) instance. In general you shouldn't need to access the client, but it's there if you want to use it. #### Defined in -[lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38) --- ### connectionState$ -• **connectionState$**: `Observable`<`"offline"` \| `"online"`\> +• **connectionState$**: `Observable`\<`"offline"` \| `"online"`\> Emits the current connection state of the user (`online` or `offline`) #### Defined in -[lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53) --- ### events$ -• **events$**: `Observable`<`ClientEvent`<`T`\>\> +• **events$**: `Observable`\<`ClientEvent`\<`T`\>\> Emits [`ClientEvent`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events. The platform documentation covers [the list of client, user presence and notification events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript). :::important @@ -57,37 +57,37 @@ For performance reasons this Observable operates outside of the Angular change d #### Defined in -[lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45) --- ### pendingInvites$ -• **pendingInvites$**: `Observable`<(`ChannelResponse`<`T`\> \| `Channel`<`T`\>)[]\> +• **pendingInvites$**: `Observable`\<`Channel`\<`T`\>[]\> Emits the list of pending invites of the user. It emits every pending invitation during initialization and then extends the list when a new invite is received. More information can be found in the [channel invitations](../code-examples/channel-invites.mdx) guide. #### Defined in -[lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57) --- ### user$ -• **user$**: `Observable`<`undefined` \| `OwnUserResponse`<`T`\> \| `UserResponse`<`T`\>\> +• **user$**: `Observable`\<`undefined` \| `OwnUserResponse`\<`T`\> \| `UserResponse`\<`T`\>\> Emits the current chat user #### Defined in -[lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61) ## Methods ### autocompleteUsers -▸ **autocompleteUsers**(`searchTerm`): `Promise`<`UserResponse`<`T`\>[]\> +▸ **autocompleteUsers**(`searchTerm`): `Promise`\<`UserResponse`\<`T`\>[]\> Searches for users in the application that have ID or name matching the provided search term @@ -99,35 +99,35 @@ Searches for users in the application that have ID or name matching the provided #### Returns -`Promise`<`UserResponse`<`T`\>[]\> +`Promise`\<`UserResponse`\<`T`\>[]\> The users matching the search #### Defined in -[lib/chat-client.service.ts:209](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L209) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:224](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L224) --- ### disconnectUser -▸ **disconnectUser**(): `Promise`<`void`\> +▸ **disconnectUser**(): `Promise`\<`void`\> Disconnects the current user, and closes the WebSocket connection. Useful when disconnecting a chat user, use in combination with [`reset`](./ChannelService.mdx/#reset). #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/chat-client.service.ts:178](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L178) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L186) --- ### flagMessage -▸ **flagMessage**(`messageId`): `Promise`<`void`\> +▸ **flagMessage**(`messageId`): `Promise`\<`void`\> Flag the message with the given ID. If you want to know [more about flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) check out the platform documentation. @@ -139,49 +139,49 @@ Flag the message with the given ID. If you want to know [more about flags](https #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/chat-client.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L200) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:215](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L215) --- ### getAppSettings -▸ **getAppSettings**(): `Promise`<`void`\> +▸ **getAppSettings**(): `Promise`\<`void`\> Loads the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript), if the application settings have already been loaded, it does nothing. #### Returns -`Promise`<`void`\> +`Promise`\<`void`\> #### Defined in -[lib/chat-client.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L188) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/chat-client.service.ts#L196) --- ### init -▸ **init**(`apiKey`, `userOrId`, `userTokenOrProvider`, `clientOptions?`): `ConnectAPIResponse`<`T`\> +▸ **init**(`apiKey`, `userOrId`, `userTokenOrProvider`, `clientOptions?`): `ConnectAPIResponse`\<`T`\> Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation. #### Parameters -| Name | Type | Description | -| :-------------------- | :------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `apiKey` | `string` | | -| `userOrId` | `undefined` \| `string` \| `OwnUserResponse`<`T`\> \| `UserResponse`<`T`\> | you can emit this for anonymous logins | -| `userTokenOrProvider` | `TokenOrProvider` | You can provide:
  • a token,
  • a token provider, a method that returns `Promise`, which can be called when the previous token expires (recommended setup for production applications)
  • the keyword 'guest' to connect as [guest user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#guest-users)
  • the keyword 'anonymous' to connect as [anonymous user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#anonymous-users)
| -| `clientOptions?` | `StreamChatOptions` | Setting to provide to the Stream client instance | +| Name | Type | Description | +| :-------------------- | :--------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `apiKey` | `string` | | +| `userOrId` | `undefined` \| `string` \| `OwnUserResponse`\<`T`\> \| `UserResponse`\<`T`\> | you can emit this for anonymous logins | +| `userTokenOrProvider` | `TokenOrProvider` | You can provide:
  • a token,
  • a token provider, a method that returns `Promise`, which can be called when the previous token expires (recommended setup for production applications)
  • the keyword 'guest' to connect as [guest user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#guest-users)
  • the keyword 'anonymous' to connect as [anonymous user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#anonymous-users)
| +| `clientOptions?` | `AxiosRequestConfig`\<`any`\> & {} & \{ `trackPendingChannelInvites?`: `boolean` } | Setting to provide to the Stream client instance | #### Returns -`ConnectAPIResponse`<`T`\> +`ConnectAPIResponse`\<`T`\> #### Defined in -[lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 1a5a795b..82bf3d4b 100644 --- a/docusaurus/docs/Angular/services/CustomTemplatesService.mdx +++ b/docusaurus/docs/Angular/services/CustomTemplatesService.mdx @@ -16,163 +16,163 @@ You can find the type definitions of the context that is provided for each templ ### attachmentActionsTemplate$ -• **attachmentActionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> +• **attachmentActionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> The template that can be used to override how attachment actions are displayed inside the [attachment list](../components/AttachmentListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:277](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L277) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:276](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L276) --- ### attachmentListTemplate$ -• **attachmentListTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentListContext`\>\> +• **attachmentListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentListContext`\>\> The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L117) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L109) --- ### attachmentPreviewListTemplate$ -• **attachmentPreviewListTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentPreviewListContext`\>\> +• **attachmentPreviewListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentPreviewListContext`\>\> The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:124](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L124) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L116) --- ### avatarTemplate$ -• **avatarTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AvatarContext`\>\> +• **avatarTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AvatarContext`\>\> The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:131](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L131) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L123) --- ### cardAttachmentTemplate$ -• **cardAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> +• **cardAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> The template that can be used to override how a card attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:271](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L271) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:270](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L270) --- ### channelActionsTemplate$ -• **channelActionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelActionsContext`<`DefaultStreamChatGenerics`\>\>\> +• **channelActionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelActionsContext`\<`DefaultStreamChatGenerics`\>\>\> The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed) #### Defined in -[lib/custom-templates.service.ts:110](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L110) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:102](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L102) --- ### channelHeaderInfoTemplate$ -• **channelHeaderInfoTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelHeaderInfoContext`<`DefaultStreamChatGenerics`\>\>\> +• **channelHeaderInfoTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelHeaderInfoContext`\<`DefaultStreamChatGenerics`\>\>\> The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L228) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L227) --- ### channelPreviewInfoTemplate$ -• **channelPreviewInfoTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelPreviewInfoContext`<`DefaultStreamChatGenerics`\>\>\> +• **channelPreviewInfoTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelPreviewInfoContext`\<`DefaultStreamChatGenerics`\>\>\> Template used to display the channel information inside the [channel list item](../components/ChannelPreviewComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:336](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L336) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329) --- ### channelPreviewTemplate$ -• **channelPreviewTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelPreviewContext`<`DefaultStreamChatGenerics`\>\>\> +• **channelPreviewTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelPreviewContext`\<`DefaultStreamChatGenerics`\>\>\> Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L68) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:67](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L67) --- ### commandAutocompleteItemTemplate$ -• **commandAutocompleteItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CommandAutocompleteListItemContext`\>\> +• **commandAutocompleteItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CommandAutocompleteListItemContext`\>\> The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L61) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L60) --- ### customAttachmentUploadTemplate$ -• **customAttachmentUploadTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CustomAttachmentUploadContext`\>\> +• **customAttachmentUploadTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomAttachmentUploadContext`\>\> The template used for displaying file upload/attachment selector inside the [message input](../components/MessageInputComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:235](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L235) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:234](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L234) --- ### customMessageMetadataTemplate$ -• **customMessageMetadataTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CustomMetadataContext`<`T`\>\>\> +• **customMessageMetadataTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomMetadataContext`\<`T`\>\>\> Template to display custom metadata inside [message component](../components/MessageComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:221](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L221) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:220](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L220) --- ### dateSeparatorTemplate$ -• **dateSeparatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`DateSeparatorContext`\>\> +• **dateSeparatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`DateSeparatorContext`\>\> The template used to display the date separator inside the [message list](../components/MessageListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:289](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L289) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L288) --- ### deliveredStatusTemplate$ -• **deliveredStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`DeliveredStatusContext`\>\> +• **deliveredStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`DeliveredStatusContext`\>\> The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx) @@ -180,229 +180,217 @@ Displayed for the last message sent by the current user, if the message isn't ye #### Defined in -[lib/custom-templates.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L196) - ---- - -### editMessageFormTemplate$ - -• **editMessageFormTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> - -The template used to display the [edit message form](../components/EditMessageFormComponent.mdx) - -#### Defined in - -[lib/custom-templates.service.ts:323](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L323) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:195](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L195) --- ### emojiPickerTemplate$ -• **emojiPickerTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`EmojiPickerContext`\>\> +• **emojiPickerTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`EmojiPickerContext`\>\> The template for [emoji picker](../code-examples/emoji-picker.mdx) #### Defined in -[lib/custom-templates.service.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L89) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:81](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L81) --- ### emptyMainMessageListPlaceholder$ -• **emptyMainMessageListPlaceholder$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> +• **emptyMainMessageListPlaceholder$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> The template to show if the main message list is empty #### Defined in -[lib/custom-templates.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L311) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L310) --- ### emptyThreadMessageListPlaceholder$ -• **emptyThreadMessageListPlaceholder$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> +• **emptyThreadMessageListPlaceholder$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> The template to show if the thread message list is empty #### Defined in -[lib/custom-templates.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L317) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:316](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L316) --- ### fileAttachmentTemplate$ -• **fileAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> +• **fileAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> The template that can be used to override how a file attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:265](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L265) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:264](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L264) --- ### galleryAttachmentTemplate$ -• **galleryAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> +• **galleryAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> The template that can be used to override how image gallery is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:259](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L259) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:258](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L258) --- ### iconTemplate$ -• **iconTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`IconContext`\>\> +• **iconTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`IconContext`\>\> Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L138) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L130) --- ### imageAttachmentTemplate$ -• **imageAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> +• **imageAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:241](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L241) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:240](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L240) --- ### loadingIndicatorTemplate$ -• **loadingIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`LoadingIndicatorContext`\>\> +• **loadingIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L145) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L137) --- ### mentionAutocompleteItemTemplate$ -• **mentionAutocompleteItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MentionAutcompleteListItemContext`\>\> +• **mentionAutocompleteItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MentionAutcompleteListItemContext`\>\> The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L55) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L54) --- ### mentionTemplate$ -• **mentionTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MentionTemplateContext`\>\> +• **mentionTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MentionTemplateContext`\>\> The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx) #### Defined in -[lib/custom-templates.service.ts:82](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L82) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:74](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L74) --- ### messageActionsBoxItemTemplate$ -• **messageActionsBoxItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageActionBoxItemContext`<`DefaultStreamChatGenerics`\>\>\> +• **messageActionsBoxItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageActionBoxItemContext`\<`DefaultStreamChatGenerics`\>\>\> The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:159](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L159) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:151](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L151) --- ### messageActionsBoxTemplate$ -• **messageActionsBoxTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageActionsBoxContext`\>\> +• **messageActionsBoxTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageActionsBoxContext`\<`DefaultStreamChatGenerics`\>\>\> Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:152](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L152) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L144) --- ### messageBouncePromptTemplate$ -• **messageBouncePromptTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\> +• **messageBouncePromptTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\> The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:322](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L322) --- -### messageInputTemplate$ +### messageReactionsSelectorTemplate$ -• **messageInputTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageInputContext`\>\> +• **messageReactionsSelectorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageReactionsSelectorContext`\>\> -The message input template used when editing a message (instead of the [default message input](../components/MessageInputComponent.mdx)) +The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L75) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:165](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L165) --- ### messageReactionsTemplate$ -• **messageReactionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageReactionsContext`\>\> +• **messageReactionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageReactionsContext`\>\> The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:166](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L166) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L158) --- ### messageTemplate$ -• **messageTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageContext`\>\> +• **messageTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageContext`\>\> The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L103) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:95](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L95) --- ### modalTemplate$ -• **modalTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ModalContext`\>\> +• **modalTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ModalContext`\>\> The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx)) #### Defined in -[lib/custom-templates.service.ts:173](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L173) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:172](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L172) --- ### newMessagesIndicatorTemplate$ -• **newMessagesIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`UnreadMessagesIndicatorContext`\>\> +• **newMessagesIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`UnreadMessagesIndicatorContext`\>\> The template used to display unread messages indicator inside the [message list](../components/MessageListComponent.mdx) when the channel is opened @@ -410,13 +398,13 @@ This UI element is used to separate unread messages from read messages #### Defined in -[lib/custom-templates.service.ts:297](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L297) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:296](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L296) --- ### newMessagesNotificationTemplate$ -• **newMessagesNotificationTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`UnreadMessagesNotificationContext`\>\> +• **newMessagesNotificationTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`UnreadMessagesNotificationContext`\>\> The template used to display unread messages notification inside the [message list](../components/MessageListComponent.mdx) when the channel is opened @@ -424,25 +412,25 @@ Users can use this notification to jump to the first unread message when it's cl #### Defined in -[lib/custom-templates.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L305) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L304) --- ### notificationTemplate$ -• **notificationTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`NotificationContext`\>\> +• **notificationTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`NotificationContext`\>\> The template used to override the [default notification component](../components/NotificationComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L180) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L179) --- ### readStatusTemplate$ -• **readStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ReadStatusContext`\>\> +• **readStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ReadStatusContext`\>\> The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx) @@ -450,13 +438,13 @@ Displayed for the last message sent by the current user, if the message is read #### Defined in -[lib/custom-templates.service.ts:214](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L214) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:213](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L213) --- ### sendingStatusTemplate$ -• **sendingStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`SendingStatusContext`\>\> +• **sendingStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`SendingStatusContext`\>\> The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx) @@ -464,64 +452,64 @@ Displayed for the last message sent by the current user, if the message is curre #### Defined in -[lib/custom-templates.service.ts:205](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L205) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:204](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L204) --- ### systemMessageTemplate$ -• **systemMessageTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`SystemMessageContext`\>\> +• **systemMessageTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`SystemMessageContext`\>\> The template used to display [system messages](https://getstream.io/chat/docs/javascript/silent_messages/?language=javascript&q=system) indise the [message component](../components/MessageComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:283](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L283) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:282](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L282) --- ### threadHeaderTemplate$ -• **threadHeaderTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ThreadHeaderContext`\>\> +• **threadHeaderTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ThreadHeaderContext`\>\> The template used for header of a [thread](../components/ThreadComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:187](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L187) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L186) --- ### typingIndicatorTemplate$ -• **typingIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`TypingIndicatorContext`\>\> +• **typingIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`TypingIndicatorContext`\>\> The typing indicator template used in the [message list](../components/MessageListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L96) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L88) --- ### videoAttachmentTemplate$ -• **videoAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> +• **videoAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx) #### Defined in -[lib/custom-templates.service.ts:253](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L253) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:252](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L252) --- ### voiceRecordingAttachmentTemplate$ -• **voiceRecordingAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\> +• **voiceRecordingAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\> The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx), by default the [voice recording component](../components/VoiceRecordingComponent.mdx) is used #### Defined in -[lib/custom-templates.service.ts:247](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L247) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 56ef4f69..ce1489de 100644 --- a/docusaurus/docs/Angular/services/DateParserService.mdx +++ b/docusaurus/docs/Angular/services/DateParserService.mdx @@ -8,12 +8,12 @@ The `DateParserService` parses dates into user-friendly string representations. • `Optional` **customDateParser**: (`date`: `Date`) => `string` +Custom parser to override `parseDate` + #### Type declaration ▸ (`date`): `string` -Custom parser to override `parseDate` - ##### Parameters | Name | Type | @@ -26,7 +26,7 @@ Custom parser to override `parseDate` #### Defined in -[lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18) --- @@ -34,12 +34,12 @@ Custom parser to override `parseDate` • `Optional` **customDateTimeParser**: (`date`: `Date`) => `string` +Custom parser to override `parseDateTime` + #### Type declaration ▸ (`date`): `string` -Custom parser to override `parseDateTime` - ##### Parameters | Name | Type | @@ -52,7 +52,7 @@ Custom parser to override `parseDateTime` #### Defined in -[lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22) --- @@ -60,12 +60,12 @@ Custom parser to override `parseDateTime` • `Optional` **customTimeParser**: (`date`: `Date`) => `string` +Custom parser to override `parseTime` + #### Type declaration ▸ (`date`): `string` -Custom parser to override `parseTime` - ##### Parameters | Name | Type | @@ -78,7 +78,7 @@ Custom parser to override `parseTime` #### Defined in -[lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14) ## Methods @@ -102,7 +102,7 @@ The parsed date #### Defined in -[lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43) --- @@ -126,7 +126,7 @@ The parsed date #### Defined in -[lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55) --- @@ -150,4 +150,4 @@ The parsed time #### Defined in -[lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 5427198f..e249753f 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 -[lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 b8eef751..5b22d14a 100644 --- a/docusaurus/docs/Angular/services/MessageActionsService.mdx +++ b/docusaurus/docs/Angular/services/MessageActionsService.mdx @@ -12,19 +12,19 @@ The message actions service provides customization options for the [message acti ### customActionClickHandler -• `Optional` **customActionClickHandler**: (`details`: `MessageActionsClickDetails`<`T`\>) => `void` +• `Optional` **customActionClickHandler**: (`details`: `MessageActionsClickDetails`\<`T`\>) => `void` + +By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler. #### Type declaration ▸ (`details`): `void` -By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler. - ##### Parameters -| Name | Type | -| :-------- | :--------------------------------- | -| `details` | `MessageActionsClickDetails`<`T`\> | +| Name | Type | +| :-------- | :---------------------------------- | +| `details` | `MessageActionsClickDetails`\<`T`\> | ##### Returns @@ -32,43 +32,43 @@ By default the [`MessageComponent`](../../components/MessageComponent) will disp #### Defined in -[lib/message-actions.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L117) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-actions.service.ts#L188) --- ### customActions$ -• **customActions$**: `BehaviorSubject`<`CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[]\> +• **customActions$**: `BehaviorSubject`\<`CustomMessageActionItem`\<`DefaultStreamChatGenerics`\>[]\> You can pass your own custom actions that will be displayed inside the built-in message actions component #### Defined in -[lib/message-actions.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L113) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:184](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-actions.service.ts#L184) --- ### defaultActions -• `Readonly` **defaultActions**: `MessageActionItem`<`T`\>[] +• `Readonly` **defaultActions**: (`MessageActionItem`\<`T`\> \| `MessageReactionActionItem`\<`T`\>)[] Default actions - these are the actions that are handled by the built-in component #### Defined in -[lib/message-actions.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L26) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-actions.service.ts#L28) --- ### messageToEdit$ -• **messageToEdit$**: `BehaviorSubject`<`undefined` \| `StreamMessage`<`T`\>\> +• **messageToEdit$**: `BehaviorSubject`\<`undefined` \| `StreamMessage`\<`T`\>\> The built-in components will handle changes to this observable. #### Defined in -[lib/message-actions.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L109) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-actions.service.ts#L180) ## Methods @@ -80,10 +80,10 @@ This method returns how many authorized actions are available to the given messa #### Parameters -| Name | Type | -| :--------------- | :-------------------- | -| `message` | `StreamMessage`<`T`\> | -| `enabledActions` | `string`[] | +| Name | Type | +| :--------------- | :--------------------- | +| `message` | `StreamMessage`\<`T`\> | +| `enabledActions` | `string`[] | #### Returns @@ -93,4 +93,4 @@ the count #### Defined in -[lib/message-actions.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L132) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 54a8e917..1a868d55 100644 --- a/docusaurus/docs/Angular/services/MessageInputConfigService.mdx +++ b/docusaurus/docs/Angular/services/MessageInputConfigService.mdx @@ -6,25 +6,25 @@ The `MessageInputConfigService` is used to keep a consistent configuration among ### areMentionsEnabled -• **areMentionsEnabled**: `undefined` \| `boolean` = `true` +• **areMentionsEnabled**: `undefined` | `boolean` = `true` If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. #### Defined in -[lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17) --- ### inputMode -• **inputMode**: `"desktop"` \| `"mobile"` = `'desktop'` +• **inputMode**: `"mobile"` \| `"desktop"` = `'desktop'` In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. #### Defined in -[lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/message-input/message-input-config.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 75ae1297..f6cdf5a9 100644 --- a/docusaurus/docs/Angular/services/MessageReactionsService.mdx +++ b/docusaurus/docs/Angular/services/MessageReactionsService.mdx @@ -8,14 +8,14 @@ The `MessageReactionsService` provides customization options to message [reactio • `Optional` **customReactionClickHandler**: (`details`: `MessageReactionClickDetails`) => `void` -#### Type declaration - -▸ (`details`): `void` - By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler. The event handler can retrieve all reactions of a message inside the active channel using the [`channelService.getMessageReactions` method](../../services/ChannelService/#getmessagereactions) +#### Type declaration + +▸ (`details`): `void` + ##### Parameters | Name | Type | @@ -28,7 +28,7 @@ The event handler can retrieve all reactions of a message inside the active chan #### Defined in -[lib/message-reactions.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L31) +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/message-reactions.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L18) ## Accessors @@ -58,7 +58,7 @@ Get the currently enabled reactions #### Defined in -[lib/message-reactions.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L45) +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:44](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 -[lib/message-reactions.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L38) +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 2e29a188..ae9d590d 100644 --- a/docusaurus/docs/Angular/services/MessageService.mdx +++ b/docusaurus/docs/Angular/services/MessageService.mdx @@ -8,12 +8,12 @@ The message service contains configuration options related to displaying the mes • `Optional` **customLinkRenderer**: (`url`: `string`) => `string` +You can provide a custom method to display links + #### Type declaration ▸ (`url`): `string` -You can provide a custom method to display links - ##### Parameters | Name | Type | Description | @@ -24,17 +24,15 @@ You can provide a custom method to display links `string` -the HTML markup as a string for the link - #### Defined in -[lib/message.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message.service.ts#L25) +[projects/stream-chat-angular/src/lib/message.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/message.service.ts#L24) --- ### displayAs -• **displayAs**: `"html"` \| `"text"` = `'text'` +• **displayAs**: `"html"` | `"text"` = `'text'` Decides if the message content should be formatted as text or HTML @@ -45,4 +43,4 @@ If you display messages as text the following parts are still be displayed as HT #### Defined in -[lib/message.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 9a9872e6..c671f388 100644 --- a/docusaurus/docs/Angular/services/NotificationService.mdx +++ b/docusaurus/docs/Angular/services/NotificationService.mdx @@ -6,36 +6,36 @@ The `NotificationService` can be used to add or remove notifications. By default ### notifications$ -• **notifications$**: `Observable`<`NotificationPayload`<{}\>[]\> +• **notifications$**: `Observable`<`NotificationPayload`\<`object`\>[]\> Emits the currently active [notifications](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/notification.service.ts). #### Defined in -[lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/notification.service.ts#L15) ## Methods ### addPermanentNotification -▸ **addPermanentNotification**<`T`\>(`content`, `type?`, `translateParams?`, `templateContext?`): () => `void` +▸ **addPermanentNotification**\<`T`\>(`content`, `type?`, `translateParams?`, `templateContext?`): () => `void` Displays a notification, that will be visible until it's removed. #### Type parameters -| Name | Type | -| :--- | :------------------------ | -| `T` | { [key: string]: `any`; } | +| Name | Type | +| :--- | :------- | +| `T` | `object` | #### Parameters -| Name | Type | Default value | Description | -| :----------------- | :------------------------------ | :------------ | :--------------------------------------------------------------------- | -| `content` | `string` \| `TemplateRef`<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | -| `type` | `NotificationType` | `'error'` | The type of the notification | -| `translateParams?` | `Object` | `undefined` | Translation parameters for the `content` (for text notifications) | -| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | +| Name | Type | Default value | Description | +| :----------------- | :------------------------------- | :------------ | :--------------------------------------------------------------------- | +| `content` | `string` \| `TemplateRef`\<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | +| `type` | `NotificationType` | `'error'` | The type of the notification | +| `translateParams?` | `object` | `undefined` | Translation parameters for the `content` (for text notifications) | +| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | #### Returns @@ -51,13 +51,13 @@ A method to clear the notification. #### Defined in -[lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/notification.service.ts#L68) --- ### addTemporaryNotification -▸ **addTemporaryNotification**<`T`\>(`content`, `type?`, `timeout?`, `translateParams?`, `templateContext?`): () => `void` +▸ **addTemporaryNotification**\<`T`\>(`content`, `type?`, `timeout?`, `translateParams?`, `templateContext?`): () => `void` Displays a notification for the given amount of time. @@ -69,13 +69,13 @@ Displays a notification for the given amount of time. #### Parameters -| Name | Type | Default value | Description | -| :----------------- | :------------------------------ | :------------ | :--------------------------------------------------------------------- | -| `content` | `string` \| `TemplateRef`<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | -| `type` | `NotificationType` | `'error'` | The type of the notification | -| `timeout` | `number` | `5000` | The number of milliseconds while the notification should be visible | -| `translateParams?` | `Object` | `undefined` | Translation parameters for the `content` (for text notifications) | -| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | +| Name | Type | Default value | Description | +| :----------------- | :------------------------------- | :------------ | :--------------------------------------------------------------------- | +| `content` | `string` \| `TemplateRef`\<`T`\> | `undefined` | The text of the notification or the HTML template for the notification | +| `type` | `NotificationType` | `'error'` | The type of the notification | +| `timeout` | `number` | `5000` | The number of milliseconds while the notification should be visible | +| `translateParams?` | `object` | `undefined` | Translation parameters for the `content` (for text notifications) | +| `templateContext?` | `T` | `undefined` | The input of the notification template (for HTML notifications) | #### Returns @@ -91,4 +91,4 @@ A method to clear the notification (before the timeout). #### Defined in -[lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 a0b4065e..6818e10c 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 -[lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 21793e6f..bac2a7b2 100644 --- a/docusaurus/docs/Angular/services/ThemeService.mdx +++ b/docusaurus/docs/Angular/services/ThemeService.mdx @@ -8,104 +8,8 @@ The `ThemeService` can be used to change the theme of the chat UI and to customi • **theme$**: `BehaviorSubject`<`string`\> -A Subject that can be used to get or set the currently active theme. +A Subject that can be used to get or set the currently active theme. By default light and dark themes are supported. #### Defined in -[lib/theme.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L16) - ---- - -### themeVersion - -• **themeVersion**: `"1"` \| `"2"` - -Stream chat theme version - this is used internally by some UI components of the SDK, integrators shouldn't need to use this variable - -#### Defined in - -[lib/theme.service.ts:20](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L20) - -## Accessors - -### customDarkThemeVariables - -• `get` **customDarkThemeVariables**(): `undefined` \| { [key: string]: `string`; } - -A getter that returns the currently set custom dark theme variables. - -**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) - -#### Returns - -`undefined` \| { [key: string]: `string`; } - -An object where the keys are theme variables, and the values are the currently set CSS values. - -#### Defined in - -[lib/theme.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L103) - -• `set` **customDarkThemeVariables**(`variables`): `void` - -A setter that can be used to overwrite the values of the CSS theme variables of the dark theme. - -**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) - -#### Parameters - -| Name | Type | Description | -| :---------- | :------------------------------------------ | :--------------------------------------------------------------------------- | -| `variables` | `undefined` \| { [key: string]: `string`; } | An object where the keys are theme variables, and the values are CSS values. | - -#### Returns - -`void` - -An object where the keys are theme variables, and the values are the currently set CSS values. - -#### Defined in - -[lib/theme.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L112) - ---- - -### customLightThemeVariables - -• `get` **customLightThemeVariables**(): `undefined` \| { [key: string]: `string`; } - -A getter that returns the currently set custom light theme variables. - -**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) - -#### Returns - -`undefined` \| { [key: string]: `string`; } - -An object where the keys are theme variables, and the values are the currently set CSS values. - -#### Defined in - -[lib/theme.service.ts:76](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L76) - -• `set` **customLightThemeVariables**(`variables`): `void` - -A setter that can be used to overwrite the values of the CSS theme variables of the light theme. - -**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx) - -#### Parameters - -| Name | Type | Description | -| :---------- | :------------------------------------------ | :--------------------------------------------------------------------------- | -| `variables` | `undefined` \| { [key: string]: `string`; } | An object where the keys are theme variables, and the values are CSS values. | - -#### Returns - -`void` - -An object where the keys are theme variables, and the values are the currently set CSS values. - -#### Defined in - -[lib/theme.service.ts:85](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L85) +[projects/stream-chat-angular/src/lib/theme.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/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 5f70e91d..b0cab325 100644 --- a/docusaurus/docs/Angular/services/TransliterationService.mdx +++ b/docusaurus/docs/Angular/services/TransliterationService.mdx @@ -1,3 +1,25 @@ # TransliterationService The `TransliterationService` wraps the [@sindresorhus/transliterate](https://www.npmjs.com/package/@sindresorhus/transliterate) library + +## Methods + +### transliterate + +▸ **transliterate**(`s`): `string` + +#### Parameters + +| Name | Type | Description | +| :--- | :------- | :------------------------------ | +| `s` | `string` | the string to be transliterated | + +#### Returns + +`string` + +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/11eff40f981f3028e1dd8041e8d3a01b1cfa2de9/projects/stream-chat-angular/src/lib/transliteration.service.ts#L16) diff --git a/docusaurus/docs/Angular/theming/component-variables.mdx b/docusaurus/docs/Angular/theming/component-variables.mdx index 519ec4df..01fe6afb 100644 --- a/docusaurus/docs/Angular/theming/component-variables.mdx +++ b/docusaurus/docs/Angular/theming/component-variables.mdx @@ -120,7 +120,7 @@ This page contains information about the component variables. | `--str-chat__attachment-action-box-shadow` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss) +Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss) ### Layout variables @@ -135,7 +135,7 @@ Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v | `--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.16.1/src/v2/styles/AttachmentList/AttachmentList-layout.scss) +Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentList/AttachmentList-layout.scss) ## AttachmentPreviewList @@ -173,7 +173,7 @@ Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v | `--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` |
`.str-chat`
`none`
| Box shadow applied to the file preview | -Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss) +Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss) ## Autocomplete @@ -226,7 +226,7 @@ Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css | `--str-chat__mention-list-emoji-item-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list | | `--str-chat__mention-list-emoji-item-box-shadow` |
`.str-chat`
`none`
| Box shadow of the emoji suggestion item in the autocomplete list | -Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss) +Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss) ### Layout variables @@ -234,7 +234,7 @@ Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4. | ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | `--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.16.1/src/v2/styles/Autocomplete/Autocomplete-layout.scss) +Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-layout.scss) ## Avatar @@ -253,7 +253,7 @@ Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4. | `--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.16.1/src/v2/styles/Avatar/Avatar-theme.scss) +Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-theme.scss) ### Layout variables @@ -261,7 +261,7 @@ Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/s | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | `--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.16.1/src/v2/styles/Avatar/Avatar-layout.scss) +Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-layout.scss) ## Channel @@ -281,7 +281,7 @@ Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/s | `--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.16.1/src/v2/styles/Channel/Channel-theme.scss) +Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss) ## ChannelHeader @@ -299,7 +299,7 @@ Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/ | `--str-chat__channel-header-box-shadow` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) +Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) ## ChannelList @@ -328,7 +328,7 @@ Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4 | `--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.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss) +Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss) ## ChannelPreview @@ -357,7 +357,7 @@ Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.1 | `--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.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) +Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) ## ChannelSearch - Only available in React SDK @@ -417,7 +417,7 @@ Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v | `--str-chat__channel-search-results-empty-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | | `--str-chat__channel-search-results-empty-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) +Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) ## CircleFAButton @@ -435,7 +435,7 @@ Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4 | `--str-chat__circle-fab-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | | `--str-chat__circle-fab-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) +Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) ## CTAButton @@ -455,25 +455,25 @@ Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v | `--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.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss) +Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss) ## EditMessageForm ### Theme variables -| Name | Value(s) | Description | -| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -| `--str-chat__edit-message-modal-button-border-radius` |
`.str-chat`
`none`
| The border radius used for the borders of the component | -| `--str-chat__edit-message-modal-send-button-color` |
`.str-chat`
`var(--str-chat__primary-color)`
| The text color used for the send button | -| `--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 | -| `--str-chat__edit-message-modal-button-background-color` |
`.str-chat`
`transparent`
| The background color of the component | -| `--str-chat__edit-message-modal-button-border-block-start` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__edit-message-modal-button-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--str-chat__edit-message-modal-button-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | -| `--str-chat__edit-message-modal-button-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -| `--str-chat__edit-message-modal-button-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | +| Name | Value(s) | Description | +| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `--str-chat__edit-message-modal-button-border-radius` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`transparent`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) +Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) ## Icon - Only available in Angular SDK @@ -483,7 +483,7 @@ Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/ | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | `--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.16.1/src/v2/styles/Icon/Icon-theme.scss) +Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Icon/Icon-theme.scss) ### Layout variables @@ -492,7 +492,7 @@ Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src | `--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.16.1/src/v2/styles/Icon/Icon-layout.scss) +Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Icon/Icon-layout.scss) ## ImageCarousel - Only available in Angular SDK @@ -502,7 +502,7 @@ Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src | ------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------ | | `--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.16.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss) +Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss) ## LoadingIndicator @@ -512,7 +512,7 @@ Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4 | ------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------- | | `--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.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss) +Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss) ### Layout variables @@ -520,7 +520,7 @@ Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | `--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.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) +Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) ## Message @@ -587,21 +587,22 @@ Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree | `--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.16.1/src/v2/styles/Message/Message-theme.scss) +Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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 buttons | -| `--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-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`
| | +| 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.16.1/src/v2/styles/Message/Message-layout.scss) +Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-layout.scss) ## MessageActionsBox @@ -627,7 +628,7 @@ Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/ | `--str-chat__message-actions-box-item-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of an item in the message actions box | | `--str-chat__message-actions-box-item-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to an item in the message actions box | -Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) +Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) ## MessageBouncePrompt @@ -645,7 +646,7 @@ Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tre | `--str-chat__message-bounce-button-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) button of the component | | `--str-chat__message-bounce-button-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the button | -Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) +Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) ## MessageInput @@ -709,7 +710,7 @@ Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/t | `--str-chat__cooldown-border-inline-end` |
`.str-chat`
`0`
| Right (left in RTL layout) border of the cooldown timer | | `--str-chat__cooldown-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the cooldown timer | -Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss) +Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss) ### Layout variables @@ -717,7 +718,7 @@ Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4. | ------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------- | | `--str-chat__dropzone-container-backdrop-filter` |
`.str-chat`
`blur(3px)`
| The backdrop filter applied to the dropzone container | -Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-layout.scss) +Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-layout.scss) ## MessageList @@ -747,7 +748,7 @@ Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4. | `--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.16.1/src/v2/styles/MessageList/MessageList-theme.scss) +Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss) ## MessageNotification - Only available in React SDK @@ -764,7 +765,7 @@ Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.1 | `--str-chat__message-notification-box-shadow` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) +Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageNotification/MessageNotification-theme.scss) ## MessageReactions @@ -792,7 +793,7 @@ Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/t | `--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.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss) +Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss) ### Layout variables @@ -800,34 +801,34 @@ Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- | | `--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.16.1/src/v2/styles/MessageReactions/MessageReactions-layout.scss) +Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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)`
| 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` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__message-reactions-options-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--str-chat__message-reactions-options-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | -| `--str-chat__message-reactions-options-border-inline-end` |
`.str-chat`
`none`
| 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)`
| 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` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__message-reactions-option-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--str-chat__message-reactions-option-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | -| `--str-chat__message-reactions-option-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -| `--str-chat__message-reactions-option-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | - -Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) +| 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` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__message-reactions-options-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--str-chat__message-reactions-options-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | +| `--str-chat__message-reactions-options-border-inline-end` |
`.str-chat`
`none`
| 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` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__message-reactions-option-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--str-chat__message-reactions-option-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | +| `--str-chat__message-reactions-option-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | +| `--str-chat__message-reactions-option-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | + +Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) ## Modal @@ -848,7 +849,7 @@ Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat- | `--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.16.1/src/v2/styles/Modal/Modal-theme.scss) +Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss) ## Notification @@ -865,7 +866,7 @@ Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/sr | `--str-chat__notification-border-inline-end` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/Notification/Notification-theme.scss) +Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Notification/Notification-theme.scss) ## NotificationList @@ -882,7 +883,7 @@ Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v4. | `--str-chat__notification-list-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | | `--str-chat__notification-list-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | -Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/NotificationList/NotificationList-theme.scss) +Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/NotificationList/NotificationList-theme.scss) ## Thread @@ -908,7 +909,7 @@ Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree | `--str-chat__thread-header-box-shadow` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/Thread/Thread-theme.scss) +Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Thread/Thread-theme.scss) ## Tooltip @@ -925,7 +926,7 @@ Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/s | `--str-chat__tooltip-border-inline-end` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss) +Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Tooltip/Tooltip-theme.scss) ## TypingIndicator @@ -943,7 +944,7 @@ Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/ | `--str-chat__typing-indicator-box-shadow` |
`.str-chat`
`none`
| 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.16.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) +Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) ## VirtualizedMessageList - Only available in React SDK @@ -960,4 +961,4 @@ Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/ | `--str-chat__virtual-list-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | | `--str-chat__virtual-list-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) +Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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 a822b05d..7df8fde3 100644 --- a/docusaurus/docs/Angular/theming/global-variables.mdx +++ b/docusaurus/docs/Angular/theming/global-variables.mdx @@ -38,64 +38,64 @@ You can read about each category in detail in the tables below. | 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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/Avatar/Avatar-theme.scss) | +| `--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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/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.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/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.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.16.1/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.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/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.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/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.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/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.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss) | +| `--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.3/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.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/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.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/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.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss) | ### Radius | Name | Value(s) | Description | Used in | | ---------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--str-chat__border-radius-xs` |
`.str-chat`
`8px`
| Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | -| `--str-chat__border-radius-sm` |
`.str-chat`
`14px`
| Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss) | -| `--str-chat__border-radius-md` |
`.str-chat`
`18px`
| Border radius used for rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | -| `--str-chat__border-radius-lg` |
`.str-chat`
`20px`
| Border radius used for rounded elements | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | -| `--str-chat__border-radius-circle` |
`.str-chat`
`999px`
| Border radius used for circular elements | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss) | +| `--str-chat__border-radius-xs` |
`.str-chat`
`8px`
| Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Tooltip/Tooltip-theme.scss) | +| `--str-chat__border-radius-sm` |
`.str-chat`
`14px`
| Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Notification/Notification-theme.scss) | +| `--str-chat__border-radius-md` |
`.str-chat`
`18px`
| Border radius used for rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | +| `--str-chat__border-radius-lg` |
`.str-chat`
`20px`
| Border radius used for rounded elements | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | +| `--str-chat__border-radius-circle` |
`.str-chat`
`999px`
| Border radius used for circular elements | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/Modal/Modal-theme.scss) | -All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/_global-theme-variables.scss) +All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/_global-theme-variables.scss) ## Layout variables @@ -129,6 +129,6 @@ All global theme variables are defined in: [https://github.com/GetStream/stream- | --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- | | `--str-chat__theme-version` |
`:root`
`2`
| 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.16.1/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/_global-layout-variables.scss) +All global layout variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.17.3/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.17.3/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/package.json b/package.json index 2fc96e65..6f613205 100644 --- a/package.json +++ b/package.json @@ -27,15 +27,16 @@ "build:sample-app": "npm run config:prod && ng build --stats-json --project sample-app", "preanalyze:sample-app": "npm run build:sample-app", "analyze:sample-app": "webpack-bundle-analyzer dist/sample-app/stats.json", - "generate-docs": "npm run typedoc:services && npm run typedoc:components && npm run copy-docs && npm run copy-css-docs", + "generate-docs:v4": "typedoc:services && npm run typedoc:components && npm run copy-docs && npm run copy-css-docs", + "generate-docs": "npm run generate-docs:v5", "generate-docs:v5": "npm run typedoc:services && npm run typedoc:components && npm run copy-docs:v5 && npm run copy-css-docs:v5", "typedoc:services": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-reference-excluder --cleanOutputDir true --excludeConstructors true --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --out temp-service-docs --exclude '!**/*service.ts' --excludeNotDocumented --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts", "typedoc:components": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-reference-excluder --cleanOutputDir true --excludeConstructors true --sort source-order --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --excludeNotDocumented --out temp-component-docs --exclude '!**/*component.ts' --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts", - "copy-docs": "ts-node copy-generated-service-docs.ts docusaurus/docs/Angular/services & (ts-node remove-generated-component-docs-content docusaurus/docs/Angular/components && ts-node copy-generated-component-docs.ts docusaurus/docs/Angular/components)", - "copy-docs:v5": "ts-node copy-generated-service-docs.ts docusaurus/angular_versioned_docs/version-5/services & (ts-node remove-generated-component-docs-content docusaurus/angular_versioned_docs/version-5/components && ts-node copy-generated-component-docs.ts docusaurus/angular_versioned_docs/version-5/components)", + "copy-docs": "ts-node copy-generated-service-docs.ts docusaurus/angular_versioned_docs/version-4/services & (ts-node remove-generated-component-docs-content docusaurus/angular_versioned_docs/version-4/components && ts-node copy-generated-component-docs.ts docusaurus/angular_versioned_docs/version-4/components)", + "copy-docs:v5": "ts-node copy-generated-service-docs.ts docusaurus/docs/Angular/services & (ts-node remove-generated-component-docs-content docusaurus/docs/Angular/components && ts-node copy-generated-component-docs.ts docusaurus/docs/Angular/components)", "copy-css": "rm -rf projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/v2/**/*\" projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/assets/**/*\" projects/stream-chat-angular/src/assets/assets", - "copy-css-docs": "./copy-css-docs.sh node_modules/@stream-io/stream-chat-css/docs docusaurus/docs/Angular", - "copy-css-docs:v5": "./copy-css-docs.sh node_modules/@stream-io/stream-chat-css/docs docusaurus/angular_versioned_docs/version-5" + "copy-css-docs": "./copy-css-docs.sh node_modules/@stream-io/stream-chat-css/docs docusaurus/angular_versioned_docs/version-4", + "copy-css-docs:v5": "./copy-css-docs.sh node_modules/@stream-io/stream-chat-css/docs docusaurus/docs/Angular" }, "lint-staged": { "**/*": [