docs: update guides to support Angular 17

Author: szuperaz

README.md

@@ -51,6 +51,12 @@ 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**
+
+```shell
+npm install stream-chat-angular stream-chat @ngx-translate/core
+```
+
 Run the following command if you are using **Angular 16**:
 
 ```shell
@@ -60,7 +66,7 @@ npm install stream-chat-angular stream-chat @ngx-translate/core
 Run the following command if you are using **Angular 15**:
 
 ```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@14
+npm install stream-chat-angular stream-chat @ngx-translate/core@14 ngx-popperjs@15
 ```
 
 Run the following command if you are using **Angular 14**:
@@ -72,13 +78,13 @@ npm install stream-chat-angular stream-chat @ngx-translate/core@14 ngx-popperjs@
 Run the following command if you are using **Angular 13**:
 
 ```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@13 [email protected] ngx-popperjs@13 --legacy-peer-deps
+npm install stream-chat-angular stream-chat @ngx-translate/core@14 [email protected] ngx-popperjs@13 --legacy-peer-deps
 ```
 
 Run this command if you are using **Angular 12**:
 
 ```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@13 [email protected] ngx-popperjs@12 --legacy-peer-deps
+npm install stream-chat-angular stream-chat @ngx-translate/core@14 [email protected] ngx-popperjs@12 --legacy-peer-deps
 ```
 
 ## Sample App

docusaurus/docs/Angular/concepts/opt-in-architecture.mdx

@@ -34,6 +34,30 @@ import {
 export class AppModule {}
 ```
 
+Or if you're using standalone components:
+
+```typescript showLineNumbers={true} highlightedLines=8
+import { Component } from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+  StreamAutocompleteTextareaModule,
+  StreamChatModule,
+} from "stream-chat-angular";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [
+    TranslateModule,
+    StreamAutocompleteTextareaModule,
+    StreamChatModule,
+  ],
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+})
+export class AppComponent {}
+```
+
 The chosen module decides what kind of `textarea` should be used in the message composer, you can choose between the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx) with mentions or the [`TextareaComponent`](../components/TextareaComponent.mdx) that doesn't support mentions, but has a smaller bundle size. Your final application bundle will only include either the `TextareaComponent` or the `AutocompleteTextareaComponent`.
 
 ## Opt-in features

docusaurus/docs/Angular/concepts/translation.mdx

@@ -24,10 +24,45 @@ imports: [TranslateModule.forRoot(), StreamChatModule];
 export class AppModule {}
 ```
 
+Or if you're using standalone components:
+
+```typescript
+import { ApplicationConfig, importProvidersFrom } from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom(TranslateModule.forRoot())],
+};
+```
+
 :::important
 You should import the `TranslateModule.forRoot()` in a non-lazy loaded module (for example `AppModule`) even if the chat application is displayed from a lazy loaded module. If the translation isn't initialized properly the UI labels will be displayed as `"streamChat..."`.
 :::
 
+If you're using standalone components, make sure to also import the `TranslateModule` to the component that displays the chat UI:
+
+```typescript
+import { Component } from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+  StreamAutocompleteTextareaModule,
+  StreamChatModule,
+} from "stream-chat-angular";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [
+    TranslateModule,
+    StreamAutocompleteTextareaModule,
+    StreamChatModule,
+  ],
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+})
+export class AppComponent {}
+```
+
 ### Set up the translations
 
 Initialize the translation in the **constructor** of the component which displays the chat UI (for example `AppComponent`)
@@ -48,14 +83,7 @@ It's important to call the `setTranslation` in the constructor of the component
 
 ### Module import
 
-If you are already using ngx-translate in your project, we suppose you already have it installed and the `TranslateModule` is configured and imported. You just have to import the `StreamChatModule`:
-
-```typescript
-import { StreamChatModule } from "stream-chat-angular";
-
-imports: [StreamChatModule];
-export class AppModule {}
-```
+If you are already using ngx-translate in your project, you already have the `TranslateModule` imported and configured in your project, so you **don't** need to import `TranslateModule.forRoot()`. However you still need to import `TranslateModule` (**without** the `forRoot`) to the module/standalone component that displays the chat UI to access the `translate` pipe.
 
 ### Register the translations
 

projects/stream-chat-angular/src/lib/chat-client.service.ts

@@ -89,6 +89,7 @@ export class ChatClientService<
    * @param userOrId you can emit this for anonymous logins
    * @param userTokenOrProvider You can provide:<ul>
    *  <li> a token, </li>
+   *  <li> a token provider, a method that returns `Promise<string>`, which can be called when the previous token expires (recommended setup for production applications)</li>
    *  <li> the keyword 'guest' to connect as [guest user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#guest-users) </li>
    *  <li> the keyword 'anonymous' to connect as [anonymous user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#anonymous-users) </li>
    *  </ul>