docs: add Yarn install statement example

Author: szuperaz

README.md

@@ -57,25 +57,37 @@ Supported Angular versions: **Angular 15-18**
 Run this command if you are using **Angular 18**:
 
 ```shell
-npm install stream-chat-angular ngx-float-ui@beta
+npm install stream-chat-angular ngx-float-ui@18
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@18 @floating-ui/dom
 ```
 
 Run this command if you are using **Angular 17**:
 
 ```shell
 npm install stream-chat-angular ngx-float-ui@17
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@17 @floating-ui/dom
 ```
 
 Run this command if you are using **Angular 16**:
 
 ```shell
 npm install stream-chat-angular ngx-float-ui@16
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@16 @floating-ui/dom
 ```
 
 Run this command if you are using **Angular 15**:
 
 ```shell
 npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core@14 angular-mentions ngx-float-ui@15 @floating-ui/dom
 ```
 
 Supported node verisons: 18+

docusaurus/docs/Angular/assets/multi-channel-list.png

@@ -33,28 +33,40 @@ We recommend using the component library through a package manager. Stream Chat
 Run this command if you are using **Angular 18**:
 
 ```shell
-npm install stream-chat-angular ngx-float-ui@beta
+npm install stream-chat-angular ngx-float-ui@18
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@18 @floating-ui/dom
 ```
 
 Run this command if you are using **Angular 17**:
 
 ```shell
 npm install stream-chat-angular ngx-float-ui@17
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@17 @floating-ui/dom
 ```
 
 Run this command if you are using **Angular 16**:
 
 ```shell
 npm install stream-chat-angular ngx-float-ui@16
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@16 @floating-ui/dom
 ```
 
 Run this command if you are using **Angular 15**:
 
 ```shell
 npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core@14 angular-mentions ngx-float-ui@15 @floating-ui/dom
 ```
 
-Supported node verisons: 18+
+Supported Node versions: 18+
 
 ## Tutorial
 

docusaurus/docs/Angular/basics/overview.mdx

@@ -59,29 +59,41 @@ Want to see it all in action? Check out [the demo application](https://angular-c
 <Tabs groupId="examples">
 <TabItem value="Angular18" label="Angular 18">
 
-```bash
-npm install stream-chat-angular ngx-float-ui@beta
+```shell
+npm install stream-chat-angular ngx-float-ui@18
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@18 @floating-ui/dom
 ```
 
 </TabItem>
 <TabItem value="Angular17" label="Angular 17">
 
-```bash
+```shell
 npm install stream-chat-angular ngx-float-ui@17
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@17 @floating-ui/dom
 ```
 
 </TabItem>
 <TabItem value="Angular16" label="Angular 16">
 
-```bash
+```shell
 npm install stream-chat-angular ngx-float-ui@16
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@16 @floating-ui/dom
 ```
 
 </TabItem>
 <TabItem value="Angular15" label="Angular 15">
 
-```bash
+```shell
 npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15
+
+# or
+yarn add stream-chat-angular stream-chat @ngx-translate/core@14 angular-mentions ngx-float-ui@15 @floating-ui/dom
 ```
 
 </TabItem>

docusaurus/docs/Angular/basics/upgrade-v4.mdx

@@ -5,6 +5,7 @@ title: Channel list state
 ---
 
 import ChannelList from "../assets/channel-list.png";
+import MultiChannelList from "../assets/multi-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/).
 
@@ -282,20 +283,7 @@ It's important to note that you should make sure that the channel you add is wat
 
 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.
 
-<iframe
-  loading="lazy"
-  src="https://zptmyv-4200.csb.app/"
-  style={{
-    width: "100%",
-    height: "500px",
-    border: "0",
-    borderRadius: "4px",
-    overflow: "hidden",
-  }}
-  title="Stream Chat Angular Multi-channel list Example"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-/>
+<img src={MultiChannelList} />
 
 Here are the necessary steps to achieve this: