diff --git a/.eslintrc.json b/.eslintrc.json index 5c27afd1..3a1462c7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,10 +1,7 @@ { "root": true, "ignorePatterns": ["projects/**/*"], - "plugins": ["unused-imports", "cypress", "jasmine"], - "env": { - "jasmine": true - }, + "plugins": ["unused-imports"], "overrides": [ { "files": ["*.ts"], @@ -16,8 +13,6 @@ "eslint:recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:@angular-eslint/all", - "plugin:cypress/recommended", - "plugin:jasmine/recommended", "plugin:prettier/recommended" // This should always be the last in the extends array ], "rules": { @@ -25,10 +20,31 @@ "@angular-eslint/prefer-on-push-component-change-detection": "off", "unused-imports/no-unused-imports": "error", "no-console": ["error", { "allow": ["warn", "error"] }], - "jasmine/no-spec-dupes": [1, "branch"], "@typescript-eslint/unbound-method": "off" } }, + { + "files": ["*.spec.ts", "**/mocks/*.ts"], + "parserOptions": { + "project": ["tsconfig.json"], + "createDefaultProgram": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:@angular-eslint/all", + "plugin:prettier/recommended" // This should always be the last in the extends array + ], + "rules": { + "@angular-eslint/sort-ngmodule-metadata-arrays": "off", + "@angular-eslint/prefer-on-push-component-change-detection": "off", + "unused-imports/no-unused-imports": "error", + "no-console": ["error", { "allow": ["warn", "error"] }], + "@typescript-eslint/unbound-method": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/ban-types": "off" + } + }, { "files": ["*.html"], "extends": [ @@ -39,7 +55,12 @@ "@angular-eslint/template/i18n": "off", "@angular-eslint/template/cyclomatic-complexity": "off", "@angular-eslint/template/no-call-expression": "off", - "@angular-eslint/template/no-autofocus": "off" + "@angular-eslint/template/no-autofocus": "off", + "@angular-eslint/template/no-interpolation-in-attributes": "off", + "@angular-eslint/template/button-has-type": "off", + "@angular-eslint/template/no-inline-styles": "off", + "@angular-eslint/template/accessibility-interactive-supports-focus": "off", + "@angular-eslint/template/attributes-order": "off" } } ] diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml index 98814d89..9d80e487 100644 --- a/.github/workflows/workflow.yml +++ b/.github/workflows/workflow.yml @@ -15,7 +15,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [16.x] + node-version: [18.x] steps: - uses: actions/checkout@v2 diff --git a/.gitignore b/.gitignore index 7ab418fe..95deb301 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ chrome-profiler-events*.json .history/* # misc +/.angular/cache /.sass-cache /connect.lock /coverage @@ -56,3 +57,4 @@ Thumbs.db # Encapsulated stream-chat-css projects/stream-chat-angular/src/assets/styles +projects/stream-chat-angular/src/assets/assets diff --git a/README.md b/README.md index 30a9da10..6071f570 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,10 @@ - [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat - [Angular Chat Tutorial](https://getstream.io/chat/angular/tutorial/) -- [Demo Apps](https://getstream.io/chat/demos/) - [Docs](https://getstream.io/chat/docs/sdk/angular/) - [Chat UI Kit](https://getstream.io/chat/ui-kit/) - [Demo application](https://angular-chat-demo-getstreamio.vercel.app/) +- [Codesandbox](https://codesandbox.io/p/devbox/stream-chat-angular-sample-app-gkczc5?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A11%2C32) With our component library, you can build a variety of chat use cases, including: @@ -52,41 +52,33 @@ Check out our current openings and apply via [Stream's website](https://getstrea ### Install with NPM -Run the following command if you are using **Angular 17** +Supported Angular versions: **Angular 15-18** -```shell -npm install stream-chat-angular stream-chat @ngx-translate/core -``` - -Run the following command if you are using **Angular 16**: +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 15**: +Run this command if you are using **Angular 17**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core@14 ngx-popperjs@15 +npm install stream-chat-angular ngx-float-ui@17 ``` -Run the following command if you are using **Angular 14**: +Run this command if you are using **Angular 16**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core@14 ngx-popperjs@14 +npm install stream-chat-angular ngx-float-ui@16 ``` -Run the following command if you are using **Angular 13**: +Run this command if you are using **Angular 15**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core@14 angular-mentions@1.4.0 ngx-popperjs@13 --legacy-peer-deps +npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15 ``` -Run this command if you are using **Angular 12**: - -```shell -npm install stream-chat-angular stream-chat @ngx-translate/core@14 angular-mentions@1.4.0 ngx-popperjs@12 --legacy-peer-deps -``` +Supported node verisons: 18+ ## Sample App @@ -108,8 +100,6 @@ Run `npm install` to install dependencies. Run `npm start` and navigate to `http://localhost:4200/`. -Preferred Node version: v16. - ## Customization examples This repository includes a sample app that showcases how you can provide your own template for different components within the SDK: @@ -128,8 +118,6 @@ Run `npm install` to install dependencies. Run `npm run start:customizations-example` and navigate to `http://localhost:4200/`. -Preferred Node version: v16. - ## Local development This repository includes a sample app to test our library. @@ -151,5 +139,3 @@ A note about the documentation: - Documentations for Angular services are generated from doc comments in the source files (not under source control) - Documentations for inputs and outputs of Angular components are generated from doc comments in the source files (not under source control) - Everything else in the documentation is written in `mdx` files located in the `docusaurus` folder - -Preferred Node version: v16. diff --git a/angular.json b/angular.json index ccd9e1f8..bf5f0608 100644 --- a/angular.json +++ b/angular.json @@ -1,7 +1,8 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "cli": { - "defaultCollection": "@angular-eslint/schematics" + "schematicCollections": ["@angular-eslint/schematics"], + "analytics": false }, "version": 1, "newProjectRoot": "projects", @@ -323,5 +324,12 @@ } } }, - "defaultProject": "stream-chat-angular" + "schematics": { + "@angular-eslint/schematics:application": { + "setParserOptionsProject": true + }, + "@angular-eslint/schematics:library": { + "setParserOptionsProject": true + } + } } diff --git a/copy-generated-service-docs.ts b/copy-generated-service-docs.ts index cdd9fb04..f3a14a94 100644 --- a/copy-generated-service-docs.ts +++ b/copy-generated-service-docs.ts @@ -31,7 +31,10 @@ fs.readdir(sourcePath, (err: any, files: string[]) => { } // Remove the thre prefix from the title - const result = data.replace(/# Class:/g, '#').replace('', ''); + const result = data + .replace(/# Class:/g, '#') + .replace('', '') + .replace('\\', ''); fs.writeFile(`${sourcePath}/${file}`, result, 'utf8', (err: any) => { if (err) { 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-5/assets/message-actions-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-actions-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png 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-5/assets/message-reactions-selector-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/assets/message-reactions-selector-screenshot.png rename to docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png 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 100% rename from docusaurus/angular_versioned_docs/version-5/basics/overview.mdx rename to docusaurus/angular_versioned_docs/version-4/basics/overview.mdx 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 98% 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 8aff0396..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 @@ -401,6 +401,14 @@ Add a reference to the template in your `app.component.ts`: #### Displaying the invitations +The [`ChatClientService`](../services/ChatClientService.mdx) can keep track of pending invites, to enable this you have to initialize the service with the following flag: + +```typescript +this.chatService.init("", "", "", { + trackPendingChannelInvites: true, +}); +``` + The `pendingInvites$` Observable on the [`ChatClientService`](../services/ChatClientService.mdx) can notify us about the pending invitations of the current user. Let's subscribe to this Observable and [display the invites](../services/NotificationService.mdx) in the `ngOnInit` method of the `app.component.ts` ```typescript 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 100% 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 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 100% 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 diff --git a/docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx similarity index 96% rename from docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx index 195cd62d..a6b82eda 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx @@ -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/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40) +[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,7 +134,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44) +[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) --- @@ -146,7 +146,7 @@ The attachments to display #### Defined in -[lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48) +[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) --- @@ -158,6 +158,6 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52) +[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 86% rename from docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx index 2d5f0d82..8f91f3b4 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx @@ -47,7 +47,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L18) +[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) --- @@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl #### Defined in -[lib/attachment-preview-list/attachment-preview-list.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L22) +[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) --- @@ -71,6 +71,6 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L26) +[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 90% rename from docusaurus/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AutocompleteTextareaComponent.mdx index 2242b1d4..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 -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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 -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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,7 +83,7 @@ TextareaInterface.areMentionsEnabled #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -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/f9a1611/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 -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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,7 +131,7 @@ TextareaInterface.autoFocus #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -147,7 +147,7 @@ TextareaInterface.valueChange #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -163,7 +163,7 @@ TextareaInterface.send #### Defined in -[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -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/f9a1611/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 88% rename from docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AvatarComponent.mdx index 0517c928..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 -[lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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,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/f9a1611/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) --- @@ -95,7 +95,7 @@ The size in pixels of the avatar image. #### Defined in -[lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43) +[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) --- @@ -107,7 +107,7 @@ The location the avatar will be displayed in #### Defined in -[lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47) +[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) --- @@ -119,7 +119,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51) +[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) --- @@ -131,7 +131,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55) +[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) --- @@ -143,7 +143,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/f9a1611/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59) +[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) --- @@ -155,7 +155,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/f9a1611/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63) +[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) --- @@ -167,6 +167,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/f9a1611/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L67) +[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-5/components/AvatarPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx similarity index 85% rename from docusaurus/angular_versioned_docs/version-5/components/AvatarPlaceholderComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx index 08581f8a..45bf3f1f 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/AvatarPlaceholderComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23) +[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) --- @@ -24,7 +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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27) +[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) --- @@ -36,7 +36,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31) +[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) --- @@ -48,7 +48,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35) +[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) --- @@ -60,7 +60,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39) +[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) --- @@ -72,7 +72,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43) +[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) --- @@ -84,7 +84,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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47) +[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) --- @@ -96,7 +96,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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L51) +[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) --- @@ -108,6 +108,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/f9a1611/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L57) +[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 100% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelComponent.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/components/ChannelHeaderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelHeaderComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/components/ChannelListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx diff --git a/docusaurus/angular_versioned_docs/version-5/components/ChannelPreviewComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx similarity index 92% rename from docusaurus/angular_versioned_docs/version-5/components/ChannelPreviewComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx index de5b8311..aa9b2a73 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/ChannelPreviewComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx @@ -37,6 +37,6 @@ The channel to be displayed #### Defined in -[lib/channel-preview/channel-preview.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L25) +[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/angular_versioned_docs/version-5/components/EditMessageFormComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/EditMessageFormComponent.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/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 77% rename from docusaurus/angular_versioned_docs/version-5/components/IconComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx index 543dbe1f..dad666b5 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/IconComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx @@ -33,7 +33,7 @@ The icon to display, the list of [supported icons](https://github.com/GetStream/ #### Defined in -[lib/icon/icon.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L42) +[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) --- @@ -45,6 +45,6 @@ The size of the icon (in pixels) #### Defined in -[lib/icon/icon.component.ts:46](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L46) +[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 88% rename from docusaurus/angular_versioned_docs/version-5/components/IconPlaceholderComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx index 94620e76..56698fa8 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/IconPlaceholderComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx @@ -12,7 +12,7 @@ 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/f9a1611/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) --- @@ -24,6 +24,6 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L22) +[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 91% rename from docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx index dda4043b..87271456 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx @@ -36,7 +36,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L16) +[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) --- @@ -48,6 +48,6 @@ The color of the indicator #### Defined in -[lib/loading-indicator/loading-indicator.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L21) +[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-5/components/LoadingIndicatorPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx similarity index 88% rename from docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorPlaceholderComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx index 61f8e496..f68fc87c 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/LoadingIndicatorPlaceholderComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx @@ -12,7 +12,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L17) +[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) --- @@ -24,6 +24,6 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L22) +[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-5/components/MessageActionsBoxComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx similarity index 91% rename from docusaurus/angular_versioned_docs/version-5/components/MessageActionsBoxComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx index 25ea6df0..8851eac7 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageActionsBoxComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx @@ -48,7 +48,7 @@ Indicates if the list should be opened or closed. Adding a UI element to open an #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L39) +[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) --- @@ -60,7 +60,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L43) +[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) --- @@ -72,7 +72,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L47) +[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) --- @@ -84,7 +84,7 @@ The list of [channel capabilities](https://getstream.io/chat/docs/javascript/cha #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L51) +[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) --- @@ -100,7 +100,7 @@ More information: https://getstream.io/chat/docs/sdk/angular/services/MessageAct #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L59) +[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) --- @@ -116,7 +116,7 @@ More information: https://getstream.io/chat/docs/sdk/angular/services/MessageAct #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L67) +[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) --- @@ -132,6 +132,6 @@ More information: https://getstream.io/chat/docs/sdk/angular/services/MessageAct #### Defined in -[lib/message-actions-box/message-actions-box.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L75) +[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 93% rename from docusaurus/angular_versioned_docs/version-5/components/MessageComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx index 266319c3..4592bb3a 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx @@ -73,7 +73,7 @@ The message to be displayed #### Defined in -[lib/message/message.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message/message.component.ts#L67) +[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 -[lib/message/message.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message/message.component.ts#L71) +[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,7 +97,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message/message.component.ts#L75) +[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) --- @@ -109,7 +109,7 @@ Determines if the message is being dispalyed in a channel or in a [thread](https #### Defined in -[lib/message/message.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message/message.component.ts#L79) +[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,7 +121,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message/message.component.ts#L83) +[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) --- @@ -135,6 +135,6 @@ A list of custom message actions to be displayed in the action box #### Defined in -[lib/message/message.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message/message.component.ts#L89) +[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 90% rename from docusaurus/angular_versioned_docs/version-5/components/MessageInputComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx index f86a201f..4146b236 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageInputComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx @@ -60,7 +60,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/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L61) +[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) --- @@ -72,7 +72,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/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L65) +[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) --- @@ -84,7 +84,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L69) +[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) --- @@ -96,7 +96,7 @@ Determines if the message is being dispalyed in a channel or in a [thread](https #### Defined in -[lib/message-input/message-input.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L73) +[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) --- @@ -108,7 +108,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L77) +[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) --- @@ -120,7 +120,7 @@ The message to edit #### Defined in -[lib/message-input/message-input.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L81) +[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) --- @@ -132,7 +132,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L85) +[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) --- @@ -144,7 +144,7 @@ In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode #### Defined in -[lib/message-input/message-input.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L89) +[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) --- @@ -156,7 +156,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L93) +[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) --- @@ -168,6 +168,6 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97) +[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 68% rename from docusaurus/angular_versioned_docs/version-5/components/MessageListComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx index 4149967d..6c3098d9 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageListComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx @@ -33,7 +33,7 @@ Determines if the message list should display channel messages or [thread messag #### Defined in -[lib/message-list/message-list.component.ts:54](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L54) +[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,7 @@ The direction of the messages in the list, `bottom-to-top` means newest message #### Defined in -[lib/message-list/message-list.component.ts:58](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L58) +[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) --- @@ -57,7 +57,7 @@ Determines what triggers the appearance of the message options: by default you c #### Defined in -[lib/message-list/message-list.component.ts:62](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L62) +[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) --- @@ -69,7 +69,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:68](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L68) +[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) --- @@ -83,7 +83,7 @@ A list of custom message actions to be displayed in the message action box #### Defined in -[lib/message-list/message-list.component.ts:74](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L74) +[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) --- @@ -95,7 +95,7 @@ If `true` date separators will be displayed #### Defined in -[lib/message-list/message-list.component.ts:78](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L78) +[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) --- @@ -107,7 +107,7 @@ If `true` unread indicator will be displayed #### Defined in -[lib/message-list/message-list.component.ts:82](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L82) +[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) --- @@ -119,7 +119,7 @@ If date separators are displayed, you can set the horizontal position of the dat #### Defined in -[lib/message-list/message-list.component.ts:86](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L86) +[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) --- @@ -131,7 +131,7 @@ If date separators are displayed, you can set the horizontal position of the dat #### Defined in -[lib/message-list/message-list.component.ts:90](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L90) +[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) --- @@ -145,7 +145,7 @@ This is only applicable for `main` mode, as threads doesn't have read infromatio #### Defined in -[lib/message-list/message-list.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L97) +[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) --- @@ -157,6 +157,6 @@ 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:101](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L101) +[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-5/components/MessageReactionsComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx similarity index 92% rename from docusaurus/angular_versioned_docs/version-5/components/MessageReactionsComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx index 27084377..a2378fa4 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/MessageReactionsComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx @@ -60,7 +60,7 @@ 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/f9a1611/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L38) +[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) --- @@ -72,7 +72,7 @@ The number of reactions grouped by [reaction types](https://github.com/GetStream #### Defined in -[lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42) +[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) --- @@ -84,7 +84,7 @@ Indicates if the selector should be opened or closed. Adding a UI element to ope #### Defined in -[lib/message-reactions/message-reactions.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L47) +[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) --- @@ -96,7 +96,7 @@ List of reactions of a [message](../types/stream-message.mdx), used to display t #### Defined in -[lib/message-reactions/message-reactions.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L51) +[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) --- @@ -108,7 +108,7 @@ List of the user's own reactions of a [message](../types/stream-message.mdx), us #### Defined in -[lib/message-reactions/message-reactions.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L55) +[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) --- @@ -120,6 +120,6 @@ Indicates if the selector should be opened or closed. Adding a UI element to ope #### Defined in -[lib/message-reactions/message-reactions.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L59) +[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 88% rename from docusaurus/angular_versioned_docs/version-5/components/ModalComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx index 4efd366d..d5b55c89 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/ModalComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx @@ -28,7 +28,7 @@ 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/f9a1611/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) --- @@ -40,7 +40,7 @@ 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/f9a1611/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) --- @@ -52,6 +52,6 @@ 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/f9a1611/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 88% rename from docusaurus/angular_versioned_docs/version-5/components/NotificationComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx index 190e81da..c13b6cd7 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/NotificationComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx @@ -24,7 +24,7 @@ The type of the notification #### Defined in -[lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -36,6 +36,6 @@ 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/f9a1611/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 89% rename from docusaurus/angular_versioned_docs/version-5/components/TextareaComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/TextareaComponent.mdx index 57cfa954..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 -[lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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,7 +64,7 @@ TextareaInterface.placeholder #### Defined in -[lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -80,7 +80,7 @@ TextareaInterface.inputMode #### Defined in -[lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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,7 +96,7 @@ TextareaInterface.autoFocus #### Defined in -[lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -112,7 +112,7 @@ TextareaInterface.valueChange #### Defined in -[lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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) --- @@ -128,6 +128,6 @@ TextareaInterface.send #### Defined in -[lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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 98% rename from docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx index c07ab34e..54e6d9c2 100644 --- a/docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingComponent.mdx +++ b/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx @@ -82,6 +82,6 @@ The voice recording attachment #### Defined in -[lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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 91% rename from docusaurus/angular_versioned_docs/version-5/components/VoiceRecordingWavebarComponent.mdx rename to docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingWavebarComponent.mdx index 1c63c780..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 -[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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 -[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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 -[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/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 100% rename from docusaurus/angular_versioned_docs/version-5/concepts/message-interactions.mdx rename to docusaurus/angular_versioned_docs/version-4/concepts/message-interactions.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/angular_versioned_docs/version-5/concepts/theming-and-css.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/theming-and-css.mdx similarity index 100% rename from docusaurus/angular_versioned_docs/version-5/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 151d0a8a..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 57% rename from docusaurus/angular_versioned_docs/version-5/services/ChatClientService.mdx rename to docusaurus/angular_versioned_docs/version-4/services/ChatClientService.mdx index 306d316b..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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`\<(`ChannelResponse`\<`T`\> \| `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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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:209](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/chat-client.service.ts#L209) +[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:178](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/chat-client.service.ts#L178) +[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:200](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/chat-client.service.ts#L200) +[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:188](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/chat-client.service.ts#L188) +[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:
  • 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?` | `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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 80280141..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 6f9bdde1..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 fe9ec43e..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:31](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L31) +[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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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:45](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L45) +[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:38](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L38) +[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 ebfb5545..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 34e7b729..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 79% 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 640c3665..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.11.0/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.11.0/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.11.0/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.11.0/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.11.0/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,15 @@ 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.11.0/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 + +| Name | Value(s) | Description | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | +| `--str-chat__avatar-size` |
`.str-chat`
`calc(var(--str-chat__spacing-px) * 32)`
`.str-chat .stream-chat__avatar--autocomplete-item`
`calc(var(--str-chat__spacing-px) * 30)`
`.str-chat .stream-chat__avatar--channel-header`
`calc(var(--str-chat__spacing-px) * 40)`
`.str-chat .stream-chat__avatar--channel-preview`
`calc(var(--str-chat__spacing-px) * 49)`
`.str-chat .stream-chat__avatar--quoted-message-sender`
`calc(var(--str-chat__spacing-px) * 20)`
`.str-chat .stream-chat__avatar--reaction`
`calc(var(--str-chat__spacing-px) * 30)`
| The size of the avatar, only available in Angular v5+ | + +Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-layout.scss) ## Channel @@ -273,7 +281,7 @@ Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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 @@ -291,7 +299,7 @@ Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/ | `--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.11.0/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 @@ -318,9 +326,9 @@ Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4 | `--str-chat__channel-list-load-more-pressed-background-color` |
`.str-chat`
`var( --str-chat__cta-button-pressed-background-color )`
| The background color of the load more button in pressed state | | `--str-chat__channel-list-load-more-disabled-background-color` |
`.str-chat`
`var( --str-chat__cta-button-disabled-background-color )`
| The background color of the load more button in disabled state | | `--str-chat__channel-list-load-more-disabled-color` |
`.str-chat`
`var(--str-chat__cta-button-disabled-color)`
| The text/icon color of the load more button in disabled state | -| `--str-chat__channel-list-empty-indicator-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| The icon color for the empty list 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.11.0/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 @@ -349,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.11.0/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 @@ -409,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.11.0/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 @@ -427,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.11.0/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 @@ -447,7 +455,7 @@ 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.11.0/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 @@ -465,7 +473,26 @@ Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11. | `--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.11.0/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 + +### Theme variables + +| Name | Value(s) | Description | +| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | +| `--str-chat-icon-color` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download`
`var(--str-chat__attachment-preview-download-icon-color)`
`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete`
`var(--str-chat__attachment-preview-close-icon-color)`
`.str-chat__attachment-preview-list .str-chat__attachment-preview-error`
`var(--str-chat__attachment-preview-retry-icon-color)`
`.str-chat__empty-channel`
`var(--str-chat__channel-empty-color)`
`.str-chat__channel-list .str-chat__channel-list-empty`
`var(--str-chat__channel-list-empty-indicator-color)`
`.str-chat__channel-preview .str-chat__channel-preview-messenger--status`
`var(--str-chat__channel-preview-message-status-color)`
`.str-chat`
`var(--str-chat__text-color)`
`.str-chat__icon--error`
`var(--str-chat__danger-color)`
`.str-chat__image-carousel .str-chat__image-carousel-stepper`
`var(--str-chat__image-carousel-stepper-color)`
`.str-chat__message .str-chat__message-options`
`var(--str-chat__message-options-color)`
`.str-chat__message .str-chat__message-status`
`var(--str-chat__message-status-color)`
`.str-chat__message .str-chat__message-error-icon`
`var(--str-chat__message-error-message-color)`
`.str-chat__unread-messages-notification`
`var(--str-chat__on-primary-color)`
`.str-chat__message-input .str-chat__file-input-container`
`var(--str-chat__message-input-tools-color)`
`.str-chat__message-input .str-chat__send-button`
`var(--str-chat__message-send-color)`
`.str-chat__message-input .str-chat__send-button:disabled`
`var(--str-chat__message-send-disabled-color)`
`.str-chat__jump-to-latest-message`
`var(--str-chat__jump-to-latest-message-unread-count-background-color)`
`.str-chat__modal .str-chat__modal__close-button`
`var(--str-chat__modal-close-icon-color)`
| The color of the icon, only available in Angular v5+ | + +Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss) + +### Layout variables + +| Name | Value(s) | Description | +| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | +| `--str-chat-icon-height` |
`.str-chat__attachment-list .str-chat__message-attachment-download-icon`
`calc(var(--str-chat__spacing-px) * 16)`
`.str-chat__attachment-list .str-chat__attachment-type-icon`
`calc(var(--str-chat__spacing-px) * 37)`
`.str-chat__message-attachment-audio-widget--play-button`
`calc(var(--str-chat__spacing-px) * 24)`
`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon`
`calc(var(--str-chat__spacing-px) * 37)`
`.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download`
`calc(var(--str-chat__spacing-px) * 16)`
`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete`
`calc(var(--str-chat__spacing-px) * 24)`
`.str-chat__attachment-preview-list .str-chat__attachment-preview-error`
`calc(var(--str-chat__spacing-px) * 24)`
`.str-chat__empty-channel`
`calc(var(--str-chat__spacing-px) * 136)`
`.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty`
`calc(var(--str-chat__spacing-px) * 136)`
`.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status`
`calc(var(--str-chat__spacing-px) * 15)`
`.str-chat`
`calc(var(--str-chat__spacing-px) * 24)`
`.str-chat__image-carousel .str-chat__image-carousel-stepper`
`calc(var(--str-chat__spacing-px) * 30)`
`.str-chat__message .str-chat__message-options`
`calc(var(--str-chat__message-options-button-size) * 0.7)`
`.str-chat__message .str-chat__message-status,.str-chat__quoted-message-preview .str-chat__message-status`
`calc(var(--str-chat__spacing-px) * 15)`
`.str-chat__unread-messages-notification`
`calc(var(--str-chat__spacing-px) * 16)`
`.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container`
`calc(var(--str-chat__spacing-px) * 24)`
`.str-chat__message-input .str-chat__send-button`
`calc(var(--str-chat__spacing-px) * 32)`
`.str-chat__modal--open .str-chat__modal__close-button`
`calc(var(--str-chat__spacing-px) * 28)`
| The height of the icon, only available in Angular v5+ | +| `--str-chat-icon-width` |
`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon`
`auto`
`.str-chat`
`auto`
| The width of the icon, only available in Angular v5+ | + +Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-layout.scss) ## ImageCarousel - Only available in Angular SDK @@ -475,7 +502,25 @@ Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/ | ------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------ | | `--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.11.0/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 + +### Theme variables + +| Name | Value(s) | Description | +| ------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------- | +| `--str-chat__loading-indicator-color` |
`.str-chat`
`var(--str-chat__primary-color)`
| The color of the loading indicator | + +Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss) + +### Layout variables + +| Name | Value(s) | Description | +| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| `--str-chat__loading-indicator-size` |
`.str-chat__attachment-preview-list`
`calc(var(--str-chat__spacing-px) * 18)`
`.str-chat`
`calc(var(--str-chat__spacing-px) * 15)`
| The size of the loading indicator, only available in Angular v5+ | + +Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) ## Message @@ -542,7 +587,7 @@ Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4 | `--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.11.0/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 @@ -556,7 +601,7 @@ Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/ | `--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.11.0/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 @@ -582,7 +627,7 @@ Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/ | `--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.11.0/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 @@ -600,61 +645,71 @@ 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.11.0/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 ### Theme variables -| Name | Value(s) | Description | -| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| `--str-chat__message-input-border-radius` |
`.str-chat`
`0`
| The border radius of the component | -| `--str-chat__message-input-color` |
`.str-chat`
`var(--str-chat__text-color)`
| The text/icon color of the component | -| `--str-chat__message-input-background-color` |
`.str-chat`
`var(--str-chat__secondary-background-color)`
| The background color of the component | -| `--str-chat__message-input-border-block-start` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__message-input-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--str-chat__message-input-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | -| `--str-chat__message-input-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -| `--str-chat__message-input-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | -| `--str-chat__dropzone-container-color` |
`.str-chat`
`var(--str-chat__on-primary-color)`
| The text/icon color of the dropzone container | -| `--str-chat__dropzone-container-background-color` |
`.str-chat`
`var(--str-chat__primary-overlay-color)`
| The background color of the dropzone container | -| `--str-chat__message-textarea-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-md)`
| The border radius used for the borders of the textarea | -| `--str-chat__message-textarea-color` |
`.str-chat`
`var(--str-chat__text-color)`
| The text/icon color of the textarea | -| `--str-chat__message-textarea-background-color` |
`.str-chat`
`transparent`
| The background color of the textarea | -| `--str-chat__message-textarea-border-block-start` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Top border of the textarea | -| `--str-chat__message-textarea-border-block-end` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Bottom border of the textarea | -| `--str-chat__message-textarea-border-inline-start` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Left (right in RTL layout) border of the textarea | -| `--str-chat__message-textarea-border-inline-end` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Right (left in RTL layout) border of the textarea | -| `--str-chat__message-textarea-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the textarea | -| `--str-chat__message-send-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| The border radius used for the borders of the send button | -| `--str-chat__message-send-color` |
`.str-chat`
`var(--str-chat__primary-color)`
| The text/icon color of the send button | -| `--str-chat__message-send-background-color` |
`.str-chat`
`transparent`
| The background color of the send button | -| `--str-chat__message-send-border-block-start` |
`.str-chat`
`0`
| Top border of the send button | -| `--str-chat__message-send-border-block-end` |
`.str-chat`
`0`
| Bottom border of the send button | -| `--str-chat__message-send-border-inline-start` |
`.str-chat`
`0`
| Left (right in RTL layout) border of the send button | -| `--str-chat__message-send-border-inline-end` |
`.str-chat`
`0`
| Right (left in RTL layout) border of the send button | -| `--str-chat__message-send-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the send button | -| `--str-chat__message-send-disabled-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| The color of the send button in disabled state | -| `--str-chat__message-send-disabled-background-color` |
`.str-chat`
`transparent`
| The background color of the send button in disabled state | -| `--str-chat__message-input-tools-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-tools-color` |
`.str-chat`
`var(--str-chat__text-low-emphasis-color)`
| The text/icon color of the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-tools-background-color` |
`.str-chat`
`transparent`
| The background color of the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-tools-border-block-start` |
`.str-chat`
`0`
| Top border of the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-tools-border-block-end` |
`.str-chat`
`0`
| Bottom border of the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-tools-border-inline-start` |
`.str-chat`
`0`
| Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-tools-border-inline-end` |
`.str-chat`
`0`
| Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-tools-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the tool buttons of the message input (such as attachment upload button) | -| `--str-chat__message-input-not-allowed-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| Thex text color of the message that is displayed when the use can't send messages | -| `--str-chat__cooldown-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| The border radius used for the borders of the cooldown timer | -| `--str-chat__cooldown-color` |
`.str-chat`
`var(--str-chat__on-disabled-color)`
| The text/icon color of the cooldown timer | -| `--str-chat__cooldown-background-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| The background color of the cooldown timer | -| `--str-chat__cooldown-border-block-start` |
`.str-chat`
`0`
| Top border of the cooldown timer | -| `--str-chat__cooldown-border-block-end` |
`.str-chat`
`0`
| Bottom border of the cooldown timer | -| `--str-chat__cooldown-border-inline-start` |
`.str-chat`
`0`
| Left (right in RTL layout) border of the cooldown timer | -| `--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.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss) +| Name | Value(s) | Description | +| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | +| `--str-chat__message-input-border-radius` |
`.str-chat`
`0`
| The border radius of the component | +| `--str-chat__message-input-color` |
`.str-chat`
`var(--str-chat__text-color)`
| The text/icon color of the component | +| `--str-chat__message-input-background-color` |
`.str-chat`
`var(--str-chat__secondary-background-color)`
| The background color of the component | +| `--str-chat__message-input-border-block-start` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__message-input-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--str-chat__message-input-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | +| `--str-chat__message-input-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | +| `--str-chat__message-input-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | +| `--str-chat__dropzone-container-color` |
`.str-chat`
`var(--str-chat__on-primary-color)`
| The text/icon color of the dropzone container | +| `--str-chat__dropzone-container-background-color` |
`.str-chat`
`var(--str-chat__primary-overlay-color)`
| The background color of the dropzone container | +| `--str-chat__message-textarea-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-md)`
| The border radius used for the borders of the textarea | +| `--str-chat__message-textarea-color` |
`.str-chat`
`var(--str-chat__text-color)`
| The text/icon color of the textarea | +| `--str-chat__message-textarea-background-color` |
`.str-chat`
`transparent`
| The background color of the textarea | +| `--str-chat__message-textarea-border-block-start` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Top border of the textarea | +| `--str-chat__message-textarea-border-block-end` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Bottom border of the textarea | +| `--str-chat__message-textarea-border-inline-start` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Left (right in RTL layout) border of the textarea | +| `--str-chat__message-textarea-border-inline-end` |
`.str-chat`
`1px solid var(--str-chat__surface-color)`
| Right (left in RTL layout) border of the textarea | +| `--str-chat__message-textarea-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the textarea | +| `--str-chat__message-send-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| The border radius used for the borders of the send button | +| `--str-chat__message-send-color` |
`.str-chat`
`var(--str-chat__primary-color)`
| The text/icon color of the send button | +| `--str-chat__message-send-background-color` |
`.str-chat`
`transparent`
| The background color of the send button | +| `--str-chat__message-send-border-block-start` |
`.str-chat`
`0`
| Top border of the send button | +| `--str-chat__message-send-border-block-end` |
`.str-chat`
`0`
| Bottom border of the send button | +| `--str-chat__message-send-border-inline-start` |
`.str-chat`
`0`
| Left (right in RTL layout) border of the send button | +| `--str-chat__message-send-border-inline-end` |
`.str-chat`
`0`
| Right (left in RTL layout) border of the send button | +| `--str-chat__message-send-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the send button | +| `--str-chat__message-send-disabled-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| The color of the send button in disabled state | +| `--str-chat__message-send-disabled-background-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| The background color of the send button in disabled state | +| `--str-chat__start-recording-audio-button-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| The border radius used for the borders of the audio recording button | +| `--str-chat__start-recording-audio-button-color` |
`.str-chat`
`var(--str-chat__text-low-emphasis-color)`
| The text/icon color of the audio recording button | +| `--str-chat__start-recording-audio-button-background-color` |
`.str-chat`
`transparent`
| The background color of the audio recording button | +| `--str-chat__start-recording-audio-button-border-block-start` |
`.str-chat`
`0`
| Top border of the audio recording button | +| `--str-chat__start-recording-audio-button-border-block-end` |
`.str-chat`
`0`
| Bottom border of the audio recording button | +| `--str-chat__start-recording-audio-button-border-inline-start` |
`.str-chat`
`0`
| Left (right in RTL layout) border of the audio recording button | +| `--str-chat__start-recording-audio-button-border-inline-end` |
`.str-chat`
`0`
| Right (left in RTL layout) border of the audio recording button | +| `--str-chat__start-recording-audio-button-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the audio recording button | +| `--str-chat__start-recording-audio-button-disabled-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| The color of the audio recording button in disabled state | +| `--str-chat__start-recording-audio-button-disabled-background-color` |
`.str-chat`
`transparent`
| The background color of the audio recording button in disabled state | +| `--str-chat__message-input-tools-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-color` |
`.str-chat`
`var(--str-chat__text-low-emphasis-color)`
| The text/icon color of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-background-color` |
`.str-chat`
`transparent`
| The background color of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-block-start` |
`.str-chat`
`0`
| Top border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-block-end` |
`.str-chat`
`0`
| Bottom border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-inline-start` |
`.str-chat`
`0`
| Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-inline-end` |
`.str-chat`
`0`
| Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-not-allowed-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| Thex text color of the message that is displayed when the use can't send messages | +| `--str-chat__cooldown-border-radius` |
`.str-chat`
`var(--str-chat__border-radius-circle)`
| The border radius used for the borders of the cooldown timer | +| `--str-chat__cooldown-color` |
`.str-chat`
`var(--str-chat__on-disabled-color)`
| The text/icon color of the cooldown timer | +| `--str-chat__cooldown-background-color` |
`.str-chat`
`var(--str-chat__disabled-color)`
| The background color of the cooldown timer | +| `--str-chat__cooldown-border-block-start` |
`.str-chat`
`0`
| Top border of the cooldown timer | +| `--str-chat__cooldown-border-block-end` |
`.str-chat`
`0`
| Bottom border of the cooldown timer | +| `--str-chat__cooldown-border-inline-start` |
`.str-chat`
`0`
| Left (right in RTL layout) border of the cooldown timer | +| `--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) ### Layout variables @@ -662,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.11.0/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 @@ -692,24 +747,24 @@ 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.11.0/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) -## VirtualizedMessageList - Only available in React SDK +## MessageNotification - Only available in React SDK ### Theme variables -| Name | Value(s) | Description | -| ---------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -| `--str-chat__virtual-list-border-radius` |
`.str-chat`
`0`
| The border radius used for the borders of the component | -| `--str-chat__virtual-list-color` |
`.str-chat`
`var(--str-chat__text-color)`
| The text/icon color of the component | -| `--str-chat__virtual-list-background-color` |
`.str-chat`
`var(--str-chat__background-color)`
| The background color of the component | -| `--str-chat__virtual-list-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | -| `--str-chat__virtual-list-border-block-start` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__virtual-list-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--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 | +| Name | Value(s) | Description | +| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | +| `--str-chat__message-notification-background-color` |
`.str-chat`
`var(--str-chat__primary-color)`
| The background color of the component | +| `--str-chat__message-notification-border-block-start` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__message-notification-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--str-chat__message-notification-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | +| `--str-chat__message-notification-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | +| `--str-chat__message-notification-border-radius` |
`.str-chat`
`50px`
| The border radius used for the borders of the component | +| `--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: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) +Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) ## MessageReactions @@ -737,7 +792,7 @@ Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-cs | `--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.11.0/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 @@ -745,7 +800,7 @@ 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.11.0/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 @@ -772,7 +827,7 @@ Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree | `--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.11.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) +Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) ## Modal @@ -793,24 +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.11.0/src/v2/styles/Modal/Modal-theme.scss) - -## MessageNotification - Only available in React SDK - -### Theme variables - -| Name | Value(s) | Description | -| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -| `--str-chat__message-notification-background-color` |
`.str-chat`
`var(--str-chat__primary-color)`
| The background color of the component | -| `--str-chat__message-notification-border-block-start` |
`.str-chat`
`none`
| Top border of the component | -| `--str-chat__message-notification-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | -| `--str-chat__message-notification-border-inline-start` |
`.str-chat`
`none`
| Left (right in RTL layout) border of the component | -| `--str-chat__message-notification-border-inline-end` |
`.str-chat`
`none`
| Right (left in RTL layout) border of the component | -| `--str-chat__message-notification-border-radius` |
`.str-chat`
`50px`
| The border radius used for the borders of the component | -| `--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.11.0/src/v2/styles/MessageNotification/MessageNotification-theme.scss) +Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss) ## Notification @@ -827,7 +865,7 @@ Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/t | `--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.11.0/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 @@ -844,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.11.0/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 @@ -870,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.11.0/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 @@ -887,7 +925,7 @@ Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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 @@ -905,4 +943,21 @@ Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/ | `--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.11.0/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 + +### Theme variables + +| Name | Value(s) | Description | +| ---------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | +| `--str-chat__virtual-list-border-radius` |
`.str-chat`
`0`
| The border radius used for the borders of the component | +| `--str-chat__virtual-list-color` |
`.str-chat`
`var(--str-chat__text-color)`
| The text/icon color of the component | +| `--str-chat__virtual-list-background-color` |
`.str-chat`
`var(--str-chat__background-color)`
| The background color of the component | +| `--str-chat__virtual-list-box-shadow` |
`.str-chat`
`none`
| Box shadow applied to the component | +| `--str-chat__virtual-list-border-block-start` |
`.str-chat`
`none`
| Top border of the component | +| `--str-chat__virtual-list-border-block-end` |
`.str-chat`
`none`
| Bottom border of the component | +| `--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) 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 82% 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 16bb589a..a822b05d 100644 --- a/docusaurus/angular_versioned_docs/version-5/theming/global-variables.mdx +++ b/docusaurus/angular_versioned_docs/version-4/theming/global-variables.mdx @@ -36,66 +36,66 @@ You can read about each category in detail in the tables below. ### Colors -| Name | Value(s) | Description | Used in | -| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--str-chat__primary-color` |
`.str-chat,.str-chat__theme-light`
`var(--str-chat__blue500)`
`.str-chat__theme-dark`
`var(--str-chat__blue400)`
| Used for emphasis, brands can inject their main color using this variable | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/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.11.0/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 | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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 | [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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 | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/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.11.0/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.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/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.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/Avatar/Avatar-theme.scss) | +| 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) | ### 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.11.0/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.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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 | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/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.11.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/src/v2/styles/ChannelSearch/ChannelSearch-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.11.0/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/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.11.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/Modal/Modal-theme.scss) | +| 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) | -All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.11.0/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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.11.0/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.11.0/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 79% rename from docusaurus/angular_versioned_docs/version-5/theming/introduction.mdx rename to docusaurus/angular_versioned_docs/version-4/theming/introduction.mdx index 35db2497..58fc8906 100644 --- a/docusaurus/angular_versioned_docs/version-5/theming/introduction.mdx +++ b/docusaurus/angular_versioned_docs/version-4/theming/introduction.mdx @@ -46,10 +46,10 @@ If you're using SCSS: ```scss // stream-chat-angular@5 -@import "~stream-chat-angular/src/assets/styles/scss/index.scss"; +@import "stream-chat-angular/src/assets/styles/scss/index.scss"; // stream-chat-angular@4 -@import "~stream-chat-angular/src/assets/styles/v2/scss/index.scss"; +@import "stream-chat-angular/src/assets/styles/v2/scss/index.scss"; ``` @@ -68,10 +68,10 @@ If you're using CSS: ```css // stream-chat-angular@5 -@import "~stream-chat-angular/src/assets/styles/css/index.css"; +@import "stream-chat-angular/src/assets/styles/css/index.css"; // stream-chat-angular@4 -@import "~stream-chat-angular/src/assets/styles/v2/css/index.css"; +@import "stream-chat-angular/src/assets/styles/v2/css/index.css"; ``` @@ -215,6 +215,79 @@ To solve this we also have to set the text color for the link attachment compone +### Custom icons + + + +#### From CSS + +Starting from stream-chat-angular@5 it's possible to customize icons from CSS. + +Here is an example using the [Google Material Icon library](https://fonts.google.com/icons) to override the send icon: + +```scss +// Import the icon library you want to use +@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); + +// Override the send icon +.str-chat__icon--send::before { + font-family: "Material Symbols Outlined"; + content: "\e163"; +} +``` + +It's also possible to use image files for icons: + +```scss +.str-chat__icon--send { + &::before { + display: none; + } + // Link to your image file, or encode the image inline + content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xMjAtMTYwdi02NDBsNzYwIDMyMC03NjAgMzIwWm04MC0xMjAgNDc0LTIwMC00NzQtMjAwdjE0MGwyNDAgNjAtMjQwIDYwdjE0MFptMCAwdi00MDAgNDAwWiIvPjwvc3ZnPg=="); +} +``` + +The full list of icons used by the SDK can be found [here](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Icon/Icon-layout.scss). + +You can also change the size and color of the icons: + +```scss +.str-chat__icon--attach { + --str-chat-icon-color: green; // Only works for font icons + --str-chat-icon-height: 60px; +} +``` + +#### From HTML template + +If you're using stream-chat-angular@4 or an older version, or CSS customizations are not enough, you can completely replace the built-in icon component with your own using the [`CustomTemplatesService`](../../services/CustomTemplatesService/#icontemplate). + +You can find a working example in the [customization sample app](https://github.com/GetStream/stream-chat-angular/blob/master/projects/customizations-example/src/app/icon/icon.component.ts). + +If the default rules set by the stream-chat-angular stylesheets not enough to set the size and color of your custom icons, you can rely on the `--str-chat-icon-color`, `--str-chat-icon-height` and `--str-chat-icon-width` variables: + +``` +.my-custom-send-icon { + svg { + height: var(--str-chat-icon-height); + width: var(--str-chat-icon-width); + + path { + fill: var(--str-chat-icon-color); + } + } +} +``` + + + + + +TODO + + + ### CSS overrides If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS: @@ -243,17 +316,17 @@ If you're using SCSS it's also possible to import component stylesheets separate ```scss // stream-chat-angular@5 // Use default theme for channel list and channel preview components -@import "~stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-layout.scss"; -@import "~stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-theme.scss"; -@import "~stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-layout.scss"; -@import "~stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-theme.scss"; +@import "stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-layout.scss"; +@import "stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-theme.scss"; +@import "stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-layout.scss"; +@import "stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-theme.scss"; // stream-chat-angular@4 // Use default theme for channel list and channel preview components -@import "~stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-layout.scss"; -@import "~stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-theme.scss"; -@import "~stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-layout.scss"; -@import "~stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss"; +@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-layout.scss"; +@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-theme.scss"; +@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-layout.scss"; +@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss"; ``` @@ -286,10 +359,10 @@ Here is how you can import the layout stylesheet: ```scss // stream-chat-angular@5 -@import "~stream-chat-angular/src/assets/styles/scss/index.layout.scss"; +@import "stream-chat-angular/src/assets/styles/scss/index.layout.scss"; // stream-chat-angular@4 -@import "~stream-chat-angular/src/assets/styles/v2/scss/index.layout.scss"; +@import "stream-chat-angular/src/assets/styles/v2/scss/index.layout.scss"; ``` @@ -308,10 +381,10 @@ or if you're using CSS: ```css // stream-chat-angular@5 -@import "~stream-chat-angular/src/assets/styles/css/index.layout.css"; +@import "stream-chat-angular/src/assets/styles/css/index.layout.css"; // stream-chat-angular@4 -@import "~stream-chat-angular/src/assets/styles/v2/css/index.layout.css"; +@import "stream-chat-angular/src/assets/styles/v2/css/index.layout.css"; ``` 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/services/AttachmentService.mdx b/docusaurus/angular_versioned_docs/version-5/services/AttachmentService.mdx deleted file mode 100644 index f73bf05c..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/AttachmentService.mdx +++ /dev/null @@ -1,183 +0,0 @@ -# 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 - -[projects/stream-chat-angular/src/lib/attachment.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/attachment.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/attachment.service.ts:102](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/attachment.service.ts#L102) - ---- - -### 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:188](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/attachment.service.ts#L188) - ---- - -### 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:127](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/attachment.service.ts#L127) - ---- - -### 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 - -[projects/stream-chat-angular/src/lib/attachment.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/attachment.service.ts:157](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/attachment.service.ts#L157) - ---- - -### 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:45](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/attachment.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/attachment.service.ts#L112) diff --git a/docusaurus/angular_versioned_docs/version-5/services/ChannelListToggleService.mdx b/docusaurus/angular_versioned_docs/version-5/services/ChannelListToggleService.mdx deleted file mode 100644 index 4e447e01..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/ChannelListToggleService.mdx +++ /dev/null @@ -1,105 +0,0 @@ -# ChannelListToggleService - -The `ChannelListToggleService` can be used to toggle the channel list. - -**`Deprecated`** - -This service can only be used with [theming-v1](../concepts/theming-and-css.mdx), if you are using [thmeing-v2](../theming/introduction.mdx) please refer to our [responsive layout guide](../code-examples/responsive-layout.mdx) - -## Properties - -### isOpen$ - -• **isOpen$**: `Observable`<`boolean`\> - -Emits `true` if the channel list is in open state, otherwise it emits `false` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L14) - -## Methods - -### channelSelected - -▸ **channelSelected**(): `void` - -This method should be called if a channel was selected, if on mobile, the channel list will be closed. - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts:59](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L59) - ---- - -### close - -▸ **close**(): `void` - -Closes the channel list. - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L37) - ---- - -### open - -▸ **open**(): `void` - -Opens the channel list. - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L30) - ---- - -### setMenuElement - -▸ **setMenuElement**(`element`): `void` - -Sets the channel list element, on mobile screen size if the user opens the channel list, and clicks outside, the service automatically closes the channel list if a reference to the HTML element is provided. - -#### Parameters - -| Name | Type | -| :-------- | :--------------------------- | -| `element` | `undefined` \| `HTMLElement` | - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts:52](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L52) - ---- - -### toggle - -▸ **toggle**(): `void` - -Opens the channel list if it was closed, and closes if it was opened. - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts:44](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L44) 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 37979f0e..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/ChannelService.mdx +++ /dev/null @@ -1,1430 +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:98](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L98) - ---- - -### 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:150](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L150) - ---- - -### 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:102](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L102) - ---- - -### 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:106](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L106) - ---- - -### 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:156](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L156) - ---- - -### 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:118](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L118) - ---- - -### 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:110](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L110) - ---- - -### 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:114](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L114) - ---- - -### 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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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:144](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L144) - ---- - -### channelQueryState$ - -• **channelQueryState$**: `Observable`\<`undefined` \| `ChannelQueryState`\> - -The result of the latest channel query request. - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L88) - ---- - -### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L84) - ---- - -### customAddedToChannelNotificationHandler - -• `Optional` **customAddedToChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`\<`T`\> \| `ChannelResponse`\<`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) - -#### Type declaration - -▸ (`clientEvent`, `channelListSetter`): `void` - -##### Parameters - -| Name | Type | -| :------------------ | :------------------------------------------------------------------------------------------------------------------------ | -| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: (`Channel`\<`T`\> \| `ChannelResponse`\<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:170](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L170) - ---- - -### 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` - -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) - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:190](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L190) - ---- - -### 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` - -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) - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:232](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L232) - ---- - -### 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` - -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) - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:218](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L218) - ---- - -### 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` - -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) - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:204](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L204) - ---- - -### 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` - -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) - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L246) - ---- - -### 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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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` - -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) - -#### Type declaration - -▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void` - -##### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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` - -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) - -#### Type declaration - -▸ (`clientEvent`, `channelListSetter`): `void` - -##### Parameters - -| Name | Type | -| :------------------ | :------------------------------------------------------------------------------------------------------------------------ | -| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: (`Channel`\<`T`\> \| `ChannelResponse`\<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:160](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L160) - ---- - -### customPaginator - -• `Optional` **customPaginator**: (`channelQueryResult`: `Channel`\<`T`\>[]) => `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. - -#### Type declaration - -▸ (`channelQueryResult`): `NextPageConfiguration` - -##### Parameters - -| Name | Type | -| :------------------- | :----------------- | -| `channelQueryResult` | `Channel`\<`T`\>[] | - -##### Returns - -`NextPageConfiguration` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:321](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L321) - ---- - -### customRemovedFromChannelNotificationHandler - -• `Optional` **customRemovedFromChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`\<`T`\> \| `ChannelResponse`\<`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) - -#### Type declaration - -▸ (`clientEvent`, `channelListSetter`): `void` - -##### Parameters - -| Name | Type | -| :------------------ | :------------------------------------------------------------------------------------------------------------------------ | -| `clientEvent` | `ClientEvent`\<`DefaultStreamChatGenerics`\> | -| `channelListSetter` | (`channels`: (`Channel`\<`T`\> \| `ChannelResponse`\<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` | - -##### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L180) - ---- - -### 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:56](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L56) - ---- - -### 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:126](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L126) - ---- - -### 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:138](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L138) - ---- - -### 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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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:122](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L122) - ---- - -### 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:130](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L130) - ---- - -### 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:134](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L134) - ---- - -### MAX_MESSAGE_REACTIONS_TO_FETCH - -▪ `Static` `Readonly` **MAX_MESSAGE_REACTIONS_TO_FETCH**: `1200` - -internal - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:325](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L325) - -## 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:1523](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1523) - ---- - -### 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:1530](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1530) - ---- - -### channels - -• `get` **channels**(): `Channel`\<`T`\>[] - -The current list of channels - -#### Returns - -`Channel`\<`T`\>[] - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:1516](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1516) - ---- - -### 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:498](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L498) - -• `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:505](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L505) - -## 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:1054](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1054) - ---- - -### 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:745](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L745) - ---- - -### 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:981](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L981) - ---- - -### 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:965](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L965) - ---- - -### 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:867](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L867) - ---- - -### deselectActiveChannel - -▸ **deselectActiveChannel**(): `void` - -Deselects the currently active (if any) channel - -#### Returns - -`void` - -#### Defined in - -[projects/stream-chat-angular/src/lib/channel.service.ts:552](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L552) - ---- - -### 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:1539](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1539) - ---- - -### 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` & \{ `keepAliveChannels$OnError?`: `boolean` } | `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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:682](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L682) - ---- - -### 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:1150](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1150) - ---- - -### 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:735](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L735) - ---- - -### 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:613](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L613) - ---- - -### 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 - -[projects/stream-chat-angular/src/lib/channel.service.ts:652](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L652) - ---- - -### 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:1572](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1572) - ---- - -### 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:1179](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1179) - ---- - -### 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:761](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L761) - ---- - -### 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:815](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L815) - ---- - -### 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:718](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L718) - ---- - -### 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:1045](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1045) - ---- - -### 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:1008](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1008) - ---- - -### 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:776](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L776) - ---- - -### 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:520](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L520) - ---- - -### 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:578](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L578) - ---- - -### 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:1499](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1499) - ---- - -### 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:1508](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1508) - ---- - -### 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:1198](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L1198) - ---- - -### 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:832](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L832) - ---- - -### 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:899](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/channel.service.ts#L899) 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 da3ba6bf..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/CustomTemplatesService.mdx +++ /dev/null @@ -1,527 +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:277](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:124](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:131](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:271](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:110](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:336](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:235](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:221](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:289](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:323](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:89](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:265](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:259](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:241](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:82](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:159](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:152](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:75](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:166](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:173](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:297](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:214](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:205](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:283](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:187](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:253](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:247](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L247) diff --git a/docusaurus/angular_versioned_docs/version-5/services/ImageLoadService.mdx b/docusaurus/angular_versioned_docs/version-5/services/ImageLoadService.mdx deleted file mode 100644 index 7d79b5bd..00000000 --- a/docusaurus/angular_versioned_docs/version-5/services/ImageLoadService.mdx +++ /dev/null @@ -1,19 +0,0 @@ -# ImageLoadService - -The `ImageLoadService` is used to position the scrollbar in the message list - -**`Deprecated`** - -- This class is no longer used by SDK components as image sizes are fixed - -## Properties - -### imageLoad$ - -• **imageLoad$**: `Subject`<`void`\> - -A subject that can be used to notify the message list if an image attachment finished loading - -#### Defined in - -[projects/stream-chat-angular/src/lib/message-list/image-load.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-list/image-load.service.ts#L15) 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 7c2715f3..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:122](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-actions.service.ts#L122) - ---- - -### 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:118](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-actions.service.ts#L118) - ---- - -### defaultActions - -• `Readonly` **defaultActions**: `MessageActionItem`\<`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:26](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 - -[projects/stream-chat-angular/src/lib/message-actions.service.ts:114](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-actions.service.ts#L114) - -## 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:136](https://github.com/GetStream/stream-chat-angular/blob/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/projects/stream-chat-angular/src/lib/message-actions.service.ts#L136) 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 2bfd4d0e..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 8ba74864..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 9c386599..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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 6854b2bb..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/540ce0e4b9c0cd9fe86b510c531fb30f34f5bf84/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/docs/Angular/assets/channel-list.png b/docusaurus/docs/Angular/assets/channel-list.png new file mode 100644 index 00000000..901d93b9 Binary files /dev/null and b/docusaurus/docs/Angular/assets/channel-list.png differ 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/docs/Angular/assets/message-edit-after.png b/docusaurus/docs/Angular/assets/message-edit-after.png new file mode 100644 index 00000000..1d21598a Binary files /dev/null and b/docusaurus/docs/Angular/assets/message-edit-after.png differ diff --git a/docusaurus/docs/Angular/assets/message-edit-before.png b/docusaurus/docs/Angular/assets/message-edit-before.png new file mode 100644 index 00000000..8b9e942f Binary files /dev/null and b/docusaurus/docs/Angular/assets/message-edit-before.png differ diff --git a/docusaurus/docs/Angular/assets/message-menu-after-desktop.png b/docusaurus/docs/Angular/assets/message-menu-after-desktop.png new file mode 100644 index 00000000..829f5613 Binary files /dev/null and b/docusaurus/docs/Angular/assets/message-menu-after-desktop.png differ diff --git a/docusaurus/docs/Angular/assets/message-menu-after-mobile.png b/docusaurus/docs/Angular/assets/message-menu-after-mobile.png new file mode 100644 index 00000000..3c23613e Binary files /dev/null and b/docusaurus/docs/Angular/assets/message-menu-after-mobile.png differ diff --git a/docusaurus/docs/Angular/assets/message-menu-before.png b/docusaurus/docs/Angular/assets/message-menu-before.png new file mode 100644 index 00000000..76ee46cd Binary files /dev/null and b/docusaurus/docs/Angular/assets/message-menu-before.png differ 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/docs/Angular/basics/upgrade-v4.mdx b/docusaurus/docs/Angular/basics/upgrade-v4.mdx new file mode 100644 index 00000000..997e6ff3 --- /dev/null +++ b/docusaurus/docs/Angular/basics/upgrade-v4.mdx @@ -0,0 +1,377 @@ +--- +id: upgrade-v4 +title: Upgrade from v4 +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import MessageMenuBefore from "../assets/message-menu-before.png"; +import MessageMenuAfterDesktop from "../assets/message-menu-after-desktop.png"; +import MessageMenuAfterMobile from "../assets/message-menu-after-mobile.png"; +import ImageShowcase from "@site/src/components/ImageShowcase"; +import MessageEditBefore from "../assets/message-edit-before.png"; +import MessageEditAfter from "../assets/message-edit-after.png"; + +## Highlights + +- New message menu and message edit UIs to improve usability +- Provide more CSS customization options for the avatar and icon components (to avoid providing a custom component for even basic customization) +- Drop support for [Angular 12-14](https://getstream.io/chat/docs/sdk/angular/basics/angular-version-support/) and [theme-v1](https://getstream.io/chat/docs/sdk/angular/concepts/themeing/) + +Want to see it all in action? Check out [the demo application](https://angular-chat-demo-getstreamio.vercel.app/) or try it out in your own application using the instructions below. + + + + + +## Get started + + + + +```bash +npm install stream-chat-angular ngx-float-ui@beta +``` + + + + +```bash +npm install stream-chat-angular ngx-float-ui@17 +``` + + + + +```bash +npm install stream-chat-angular ngx-float-ui@16 +``` + + + + +```bash +npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15 +``` + + + + +## Breaking changes + +### Angular version support + +Angular versions 12-14 are no longer supported. You can use the [Angular update guide](https://update.angular.io/) to update your application. + +### Theme v1 is removed + +Theme-v1 was deprecated in version 4. Most customers already use theme-v2 which used to be imported from this path: + +```scss +@import "stream-chat-angular/src/assets/styles/v2/scss/index.scss"; +``` + +From version 5 this path should be used: + +```scss +@import "stream-chat-angular/src/assets/styles/scss/index.scss"; + +// or if you're using CSS +@import "stream-chat-angular/src/assets/styles/css/index.css"; +``` + +In case you run into an SCSS issue related to icons, you should extend the stylesheet import like this: + +```scss +@use "stream-chat-angular/src/assets/styles/scss/variables" with + ($assetsPath: "../node_modules/stream-chat-angular/src/assets/assets"); +@import "stream-chat-angular/src/assets/styles/scss/index.scss"; +``` + +No futher action is required for customers who were already using theme-v2. + +Customers who used to use theme-v1 now need to use theme-v2. Updating from theme-v1 to theme-v2 will require to rewrite your custom CSS code as the new theme has a new variable system, and all the components were restructured. To help you get started please refer our [theming guide](../theming/introduction.mdx). + +### New message menu UI + +The old message menu UI caused usability issues on mobile devices. The new UI address these issues, and adds some other improvements as well. + + + + + +With the new UI these component-level changes are introduced: + +- The [`MessageListComponent`](../../components/MessageListComponent) no longer supports the `messageOptionsTrigger` parameter as this was a workaround for mobile UX problems. On desktop devices the message menu will be triggered by hovering anywhere in the message area. On mobile devices the message menu will be triggered by a longpress insde the message bubble area. +- The [`MessageReactionsComponent`](../../components/MessageReactionsComponent) was split into two components. The `MessageReactionsComponent` is only responsible for displaying the existing reactions, and with that the `isSelectorOpen` input and `isSelectorOpenChange` output was removed. The [`MessageReactionsSelector`](../../components/MessageReactionsSelectorComponent) is a new component, that's responsible for adding/removing message reactions. + +### New message edit UI + +The modal-based edit message UI is replaced with a more modern approach: the message will be edited inside the main/thread [message input](../../components/MessageInputComponent). + + + +These are the component-level changes related to this feature: + +- The `EditMessageForm` component has been removed +- The `editMessageFormTemplate$` and `messageInputTemplate$` have been removed from the [`CustomTemplatesService`](../../services/CustomTemplatesService) + +If you don't want to have this UI, you can set the [`watchForMessageToEdit`](../../components/MessageInputComponent/#watchformessagetoedit) input to `false` on the `MessageInputComponent`: + +```html + +``` + +The `stream-message-input` still has all inputs/outputs you need to create a custom message edit UI: + +```html + +``` + +### Signature change for custom channel list event handlers + +The `channelListSetter`'s signature changed for the following custom event handlers of the `ChannelService`: + +- `customNewMessageNotificationHandler` +- `customAddedToChannelNotificationHandler` +- `customRemovedFromChannelNotificationHandler` +- `customChannelDeletedHandler` +- `customChannelUpdatedHandler` +- `customChannelTruncatedHandler` +- `customChannelHiddenHandler` +- `customChannelVisibleHandler` +- `customNewMessageHandler` + +If you're adding a new channel to the list from these handlers, you need to make sure to provide a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel. + +Example code: + +```typescript +private async customEventHandler( + clientEvent: ClientEvent, + channelListSetter: (channels: Channel[]) => void +) { + const channelResponse = clientEvent!.event!.channel!; + // Change 1: create a channel from `ChannelResponse` + const newChanel = this.chatService.chatClient.channel( + channelResponse.type, + channelResponse.id + ); + try { + // Change 2: call .watch() before adding it to the channel list + await newChanel.watch(); + const existingChannels = this.channelService.channels; + channelListSetter([newChanel, ...existingChannels]); + } catch (error) { + console.error('Failed to watch channel', error); + } +} +``` + +If you need more information, we have a [channel list guide](../../concepts/channel-list/) you can check out. + +### Removed deprecated features + +#### `MessageListComponent` + +- No longer accepts the `customMessageActions` input. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions. + +[Go to documentation](../../components/MessageListComponent) + +#### `MessageComponent` + +- No longer accepts the `customActions` input. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions. + +[Go to documentation](../../components/MessageComponent) + +#### `MessageActionsBoxComponent` + +- No longer accepts the `isOpen` input. The `Message` component will take care of hiding/showing the action box component. +- The `customActions` input has been removed. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions. +- The `displayedActionsCount` output has been removed. Moving forward the [`MessageActionsService`](../../services/MessageActionsService/#customactions) will be able to provide this information. +- The `isEditing` output has been removed. Moving forward the [`MessageActionsService`](../../services/MessageActionsService/#customactions) will be able to provide this information. + +[Go to documentation](../../components/MessageActionsBoxComponent) + +#### `messageActionsBoxTemplate$` + +- No longer accepts the `isOpen` input. The `Message` component will take care of hiding/showing the action box component. +- The `customActions` input has been removed. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions. +- The `displayedActionsCountChangeHandler` input has been removed. Moving forward the [`MessageActionsService`](../../services/MessageActionsService/#customactions) will be able to provide this information. + +[Go to documentation](../../services/CustomTemplatesService/#messageactionsboxtemplate) + +#### `ImageLoadService` + +The `ImageLoadService` is now removed. It's no longer required since the SDK uses a more [advanced image sizing method](../../components/AttachmentListComponent/#image-and-video-sizing). + +#### `ChannelListToggleService` + +The `ChannelListToggleService` is now removed as it was only used in theme-v1. For theme-v2 please refer to the [responsive layout guide](../code-examples/responsive-layout.mdx). + +### Channel query error handling + +In previous versions if an error occured during channel load, the `channelService.channels$` Observable emitted an error, which would close the stream. Users would have to reload the page to be able to reinitialize the `ChannelService`. This isn't a sensible default behavior. From version 5 the `channels$` Observable will never emit an error, the channel query result can be observed using the [`channelService.channelQueryState$`](../../services/ChannelService/#channelquerystate). With this change the `options.keepAliveChannels$OnError` is no longer necessary, and has been removed. + +### Type changes + +- Event handlers with `Function` type are changed to `() => void` +- Event handlers with `any` return types are changed to `void` return type +- The action handler signature of (custom) message actions was changed from `(message: StreamMessage, isMine: boolean) => void` to `(message: StreamMessage, extraParams: MessageActionHandlerExtraParams) => void`. The `isMine` flag is part of the `MessageActionHandlerExtraParams` object. +- The `MessageActionBoxItemContext` is changed, `isMine` is removed, and `params: MessageActionHandlerExtraParams` is added. The `isMine` flag is part of the `MessageActionHandlerExtraParams` object. + +### Default reactions + +To better align with other SDKs, the default reaction set has been changed: the `angry` reaction is removed. You can provide your own reaction set using the [`MessageReactionsService`](../../services/MessageReactionsService/#reactions) + +### Component customization + +#### Avatar + +To allow better customization for avatar, the `size` input has been removed, and was replaced with the [`--str-chat__avatar-size` CSS variable](../../theming/component-variables/#avatar). + +With this change the `size` input is no longer supported on the [`AvatarPlaceholderComponent`](../../components/AvatarPlaceholderComponent), [`AvatarComponent`](../../components/AvatarComponent), and the [`avatarTemplate$`](../../services/CustomTemplatesService/#avatartemplate). + +#### Icon + +In previous versions it was hard to customize icon size and color from CSS, and using custom icons required overriding the built-in icon component. To solve these issues stream-chat-angular@5 introduces a better customization system for icons. + +Please refer to the [theming guide](../../theming/themingv2/#custom-icons) that explains how to customize icons. + +With this change the `size` input is no longer necessary and has been removed from the the [`IconPlaceholderComponent`](../../components/IconPlaceHolderComponent), [`IconComponent`](../../components/IconComponent), and the [`iconTemplate$`](../../services/CustomTemplatesService/#icontemplate). + +The icon names have also been consolidated, so if you're using a custom icon component, you need to update it accordingly: + +| Previous name | Change | +| ---------------------- | ------------------------------------- | +| `action-icon` | Renamed to `action` | +| `delivered-icon` | Renamed to `delivered` | +| `read-icon` | Renamed to `read` | +| `reaction-icon` | Renamed to `reaction` | +| `connection-error` | Removed, it was only used in theme-v1 | +| `send` | Unchanged | +| `file-upload` | Removed, it was only used in theme-v1 | +| `retry` | Unchanged | +| `close` | Unchanged | +| `file` | Removed, it was only used in theme-v1 | +| `audio-file` | Unchanged | +| `reply` | Removed, it was only used in theme-v1 | +| `close-no-outline` | Removed, use `close` instead | +| `reply-in-thread` | Unchanged | +| `arrow-left` | Unchanged | +| `arrow-right` | Unchanged | +| `menu` | Removed, it was only used in theme-v1 | +| `arrow-up` | Unchanged | +| `arrow-down` | Unchanged | +| `chat-bubble` | Unchanged | +| `attach` | Unchanged | +| `unspecified-filetype` | Unchanged | +| `download` | Unchanged | +| `error` | Unchanged | +| `play` | Unchanged | +| `pause` | Unchanged | + +#### Loading indicator + +To allow better customization for loading indicator, the `size` input has been removed, and was replaced with the [`--str-chat__loading-indicator-size` CSS variable](../../theming/component-variables/#loadingindicator). + +With this change the `size` input is no longer supported on the [`LoadingIndicatorPlaceholderComponent`](../../components/LoadingIndicatorPlaceholderComponent), [`LoadingIndicatorComponent`](../../components/LoadingIndicatorComponent), and the [`loadingIndicatorTemplate$`](../../services/CustomTemplatesService/#loadingindicatortemplate). The `loadingIndicatorTemplate$` now accepts `TemplateRef` instead of `TemplateRef` + +### Channel invites + +Keeping track of pending channel invites is no longer automatic. If you're using channel invites and want to enable this behavior you need to initialize the [`ChatClientService`](../services/ChatClientService.mdx) with the following flag: + +```typescript +this.chatService.init("", "", "", { + trackPendingChannelInvites: true, +}); +``` + +## Other changes + +### Unused packages + +The `ngx-popperjs` package is no longer used, so you can remove the related packages from your `package.json` file: + +- `@popperjs/core` +- `ngx-popperjs` 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/EditMessageFormComponent.mdx b/docusaurus/docs/Angular/components/EditMessageFormComponent.mdx deleted file mode 100644 index 4af82aba..00000000 --- a/docusaurus/docs/Angular/components/EditMessageFormComponent.mdx +++ /dev/null @@ -1,25 +0,0 @@ -The edit message form displays a modal that's opened when a user edits a message. The component uses the [`MessageActionsService`](../../services/MessageActionsService) to know which message is being edited. - -By default this is displayed within the [`stream-channel` component](../../components/ChannelComponent). - -## Usage - -```typescript -constructor(private messageActionsService: MessageActionsService) { - // Open the modal - this.messageActionsService.messageToEdit$.next(); - // Close the modal - this.messageActionsService.messageToEdit$.next(undefined); -} -``` - -```html - -``` - -## Customization - -You can provide your own custom component using the [`customTemplatesService.editMessageFormTemplate$` property](../../services/CustomTemplatesService/#editmessageformtemplate) - -[//]: # "Start of generated content" -[//]: # "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/docs/Angular/components/MessageReactionsSelectorComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx new file mode 100644 index 00000000..9b8e7144 --- /dev/null +++ b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx @@ -0,0 +1,63 @@ +import MessageReactionsSelectorScreenshot from "../assets/message-reactions-selector-screenshot.png"; + +The `MessageReactionsSelectorComponent` makes it possible for users to react to a message, the reaction options can be set using the [`MessageReactionsService`](../../services/MessageReactionsService). You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation. + +**Example** - reacting to a message + + + +The `MessageReactionsSelectorComponent` is displayed inside the built-in [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). + +## Basic usage + +A typical use case for the `MessageReactionsSelectorComponent` 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 message reaction selector component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx). + +[//]: # "Start of generated content" + +## Inputs and outputs + +### 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-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) + +--- + +### messageId + +• **messageId**: `undefined` \| `string` + +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/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/docs/Angular/concepts/channel-list.mdx b/docusaurus/docs/Angular/concepts/channel-list.mdx new file mode 100644 index 00000000..616be83a --- /dev/null +++ b/docusaurus/docs/Angular/concepts/channel-list.mdx @@ -0,0 +1,343 @@ +--- +id: channel-list +sidebar_position: 4 +title: Channel list state +--- + +import ChannelList from "../assets/channel-list.png"; + +This guide describes the behaviour of the channel list, and shows how you can customize it. The channel list is controlled by the [`ChannelService`](../../services/ChannelService/). + + + +On the screenshot you can see the [built-in channel list component](../../components/ChannelListComponent) that integrates with the `ChannelService`. + +## Querying channels + +The `ChannelService` will initialize the channel list when you call either of the following methods: + +```ts +channelService.init(/* see details below */); +channelService.initWithCustomQuery(/* see details below */); +``` + +To load more pages: + +```ts +channelService.loadMoreChannels(); +``` + +To clear the list: + +```ts +channelService.reset(); +``` + +The current state of the channel list and the latest query can be accessed via theese variables: + +```ts +// Reactive value of the current channel list, you'll be notified when it changes +channelService.channels$.subscribe((channels) => console.log(channels)); + +// The current value of the channel list +console.log(channelService.channels); + +// Reactive value of the latest channel query request, it could be: 'in-progress' | 'success' | 'error' +channelService.channelQueryState$.subscribe((state) => console.log(state)); + +// Reactive value that tells if there are more pages to load +channelService.hasMoreChannels$.subscribe((hasMoreChannels) => + console.log(hasMoreChannels) +); +``` + +### Built-in queries + +The easiest way to initialize the channel list is to use a built-in query, a typical configuration could look like this: + +```ts +channelService.init({ type: "messaging", members: { $in: [""] } }); + +// If you want, you can add sort configuration and other options +channelService.init( + { type: "messaging", members: { $in: [""] } }, + { name: 1 }, + { limit: 20 } +); +``` + +For the full list of capabilities please refer the [query channel API documentation](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript). + +### Custom queries + +If built-in quieries aren't enough for you use-case, you can provide a custom query function that has this signature: `(queryType: ChannelQueryType) => Promise`. `ChannelQueryType` can be `'first-page' | 'next-page' | 'recover-state'`, the result is expected to be this format: + +```ts +{ + channels: Channel[]; // Ordered list of all channels that are displayed + hasMorePage: boolean; // Are there any more pages to load? +}; +``` + +Let's say you're using the [channel invites](../../code-examples/channel-invites/) to add members to a channel. In that case you might want to do a channel list where you display the channels the user is invited to, but not yet joined, at the top. And then all other chanenls, the user already joined. To do this you need to combine two query channel requests. Here is how you can do that: + +```ts +notJoinedChannelsQuery = new ChannelQuery( + this.chatService, + this.channelService, + { + type: 'messaging', + members: { $in: [""] }, + joined: false, + } +); +joinedChannelsQuery = new ChannelQuery( + this.chatService, + this.channelService, + { + type: 'messaging', + members: { $in: [""] }, + joined: true, + } +); +areAllNotJoinedChannelsQueried = false; + +async myCustomChannelQuery(queryType: ChannelQueryType) { + if (queryType === 'first-page' || queryType === 'recover-state') { + this.areAllNotJoinedChannelsQueried = false; + } + + if (!this.areAllNotJoinedChannelsQueried) { + const notJoinedQueryResult = await this.notJoinedChannelsQuery.query( + queryType + ); + if (notJoinedQueryResult.hasMorePage) { + return { + channels: notJoinedQueryResult.channels, + hasMorePage: notJoinedQueryResult.hasMorePage, + }; + } else { + this.areAllNotJoinedChannelsQueried = true; + const joinedQueryResult = await this.joinedChannelsQuery.query( + 'first-page' + ); + return { + channels: [ + ...notJoinedQueryResult.channels, + ...joinedQueryResult.channels, + ], + hasMorePage: joinedQueryResult.hasMorePage, + }; + } + } else { + return this.joinedChannelsQuery.query(queryType); + } +} +``` + +And then provide your query to the `ChannelService`: + +```ts +this.channelService.initWithCustomQuery((queryType) => + this.myCustomChannelQuery(queryType) +); +``` + +The above example used the `ChannelQuery` class that's exported by the SDK, but you can use any implementation you like, as long as your custom query follows this method signature: `(queryType: ChannelQueryType) => Promise`. You can reference the [`ChannelQuery` implementation](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/channel-query.ts) for the details. + +### Pagination + +By default the SDK will use an offset based pagination, where the offset will start from 0, and will be incremented with the number of channels returned from each query request. + +However, it's possible to provide your own pagination logic. Let's see the below example which sorts the channels alphabetically by their names, and then paginates using the following filter: `{name: $gt: }` + +```ts +this.channelService.customPaginator = ( + channelQueryResult: Channel[] +) => { + const lastChannel = channelQueryResult[channelQueryResult.length - 1]; + if (!lastChannel) { + return undefined; + } else { + return { + type: "filter", + paginationFilter: { + name: { $gt: lastChannel.data?.name || "" }, + }, + }; + } +}; +this.channelService.init( + { + type: "messaging", + members: { $in: [""] }, + }, + { name: 1 } +); +``` + +## Active channel + +The currently selected channel is called the active channel. + +```ts +// Reactive value of the current active channel, you'll be notified when it changes +channelService.activeChannel$.subscribe((channel) => console.log(channel)); + +// The current value of the active channel +console.log(channelService.activeChannel); +``` + +Here is how you can select/deselect the active channel: + +```ts +channelService.setAsActiveChannel(); +channelService.deselectActiveChannel(); +``` + +Selecting a channel as active will immediately mark the channel as read. + +By default the SDK will set the first channel as active when initializing the channel list. If you wish to turn off that behvior, set the `shouldSetActiveChannel` flag to `false`: + +```ts +channelService.init(, , , false); +channelService.initWithCustomQuery(, {shouldSetActiveChannel: false}); +``` + +## WebSocket events + +Apart from channel queries, the channel list is also updated on the following WebSocket 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` | + +Our platform documentation covers the topic of [channel events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript#events) in depth. + +It's important to note that filters don't apply to updates to the list from events. So if you initialize the channel list with this filter: + +```ts +{ + type: 'messaging', + members: { $in: [''] }, +} +``` + +And the user receives a message from a `team` channel, that channel will be added to the channel list by the default `notification.message_new` handler. If you don't want that behavior, you will need to provide your custom event handler to all relevant events. Here is an example event handler: + +```ts +customNewMessageNotificationHandler = async ( + clientEvent: ClientEvent, + channelListSetter: (channels: Channel[]) => void +) => { + const channelResponse = clientEvent!.event!.channel!; + if (channelResponse.type !== "messaging") { + return; + } + const newChanel = this.chatService.chatClient.channel( + channelResponse.type, + channelResponse.id + ); + try { + // We can only add watched channels to the channel list, so make sure to call `watch` + await newChanel.watch(); + const existingChannels = this.channelService.channels; + channelListSetter([newChanel, ...existingChannels]); + } catch (error) { + console.error("Failed to watch channel", error); + } +}; + +this.channelService.customNewMessageNotificationHandler = + this.customNewMessageNotificationHandler; +this.channelService.init(/* ... */); +``` + +## Adding and removing channels + +While the SDK doesn't come with built-in components to [create](https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript) or [delete](https://getstream.io/chat/docs/javascript/channel_delete/?language=javascript) channels it's easy to create these components should you need them. The SDK even provides a few component hooks to inject you custom UI ([channel list](../../components/ChannelListComponent/#ui-customization), [channel preview](../../components/ChannelPreviewComponent/#customization), [channel header](../../components/ChannelHeaderComponent/#channel-actions)). But of course you can also create a completely custom UI. + +The channel list will be automatically updated on the `notification.added_to_channel` and `channel.deleted` events, however it's also possible to add and remove channels manually from the list: + +```ts +// Make sure to watch the channel before adding it +channelService.addChannel(); + +channelService.removeChannel(''); +// This will automatically unwatch the chennel, unless you provide the following flag: +channelService.removeChannel('', false); +``` + +It's important to note that you should make sure that the channel you add is watched, more information about [watching channels](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) can be found in our API documentation. + +## Multiple channel lists + +Sometimes we need to show multiple separate channel lists. For example: we want to show 1:1 conversations and team chats in two separate tabs. + +