Add Angular and Blazor UI documentation to AI Management module

Co-authored-by: EngincanV <43685404+EngincanV@users.noreply.github.com>

docs/en/modules/ai-management/index.md

@@ -457,7 +457,7 @@ Your application acts as a proxy, forwarding these requests to the AI Management
 
 
 
-## Client Usage (MVC UI)
+## Client Usage
 
 AI Management uses different packages depending on the usage scenario:
 
@@ -465,6 +465,8 @@ AI Management uses different packages depending on the usage scenario:
 
 - **`Volo.AIManagement.Client.*` packages**: These are designed for applications that need to consume AI services from a remote application. They provide both server and client side of remote access to the AI services.
 
+### MVC / Razor Pages UI
+
 **List of packages:**
 - `Volo.AIManagement.Client.Application`
 - `Volo.AIManagement.Client.Application.Contracts`
@@ -472,10 +474,10 @@ AI Management uses different packages depending on the usage scenario:
 - `Volo.AIManagement.Client.HttpApi.Client`
 - `Volo.AIManagement.Client.Web`
 
-### The Chat Widget
+#### The Chat Widget
 The `Volo.AIManagement.Client.Web` package provides a chat widget to allow you to easily integrate a chat interface into your application that uses a specific AI workspace named `ChatClientChatViewComponent`.
 
-#### Basic Usage
+##### Basic Usage
 You can invoke the `ChatClientChatViewComponent` Widget in your razor page with the following code:
 
 ```csharp
@@ -487,7 +489,7 @@ You can invoke the `ChatClientChatViewComponent` Widget in your razor page with
 
 ![ai-management-workspaces](../../images/ai-management-widget.png)
 
-#### Properties
+##### Properties
 You can customize the chat widget with the following properties:
 - `WorkspaceName`: The name of the workspace to use.
 - `ComponentId`: Unique identifier for accessing the component via JavaScript API (stored in abp.chatComponents).
@@ -508,7 +510,7 @@ You can customize the chat widget with the following properties:
 })
 ```
 
-#### Using the Conversation Id
+##### Using the Conversation Id
 You can use the `ConversationId` property to specify the id of the conversation to use. When the Conversation Id is provided, the chat will be stored at the client side and will be retrieved when the user revisits the page that contains the chat widget. If it's not provided or provided as **null**, the chat will be temporary and will not be saved, it'll be lost when the component lifetime ends. 
 
 ```csharp
@@ -519,7 +521,7 @@ You can use the `ConversationId` property to specify the id of the conversation
 })
 ```
 
-#### JavaScript API
+##### JavaScript API
 The chat components are initialized automatically when the ViewComponent is rendered in the page. All the initialized components in the page are stored in the `abp.chatComponents` object. You can retrieve a specific component by its `ComponentId` which is defined while invoking the ViewComponent.
 
 ```csharp
@@ -600,6 +602,104 @@ chatComponent.off('messageSent', callbackFunction);
 });
 ```
 
+### Angular UI
+
+**List of packages:**
+- `@volo/abp.ng.ai-management`
+
+#### Installation
+
+In order to configure the application to use the AI Management module, you first need to import `provideAIManagementConfig` from `@volo/abp.ng.ai-management/config` to root application configuration. Then, you will need to append it to the `appConfig` array.
+
+```js
+// app.config.ts
+import { provideAIManagementConfig } from '@volo/abp.ng.ai-management/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideAIManagementConfig(),
+  ],
+};
+```
+
+The AI Management module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. It is available for import from `@volo/abp.ng.ai-management`.
+
+```js
+// app.routes.ts
+const APP_ROUTES: Routes = [
+  // ...
+  {
+    path: 'ai-management',
+    loadChildren: () =>
+      import('@volo/abp.ng.ai-management').then(m => m.createRoutes(/* options here */)),
+  },
+];
+```
+
+#### Services / Models
+
+AI Management module services and models are generated via `generate-proxy` command of the [ABP CLI](../../cli). If you need the module's proxies, you can run the following command in the Angular project directory:
+
+```bash
+abp generate-proxy --module aiManagement
+```
+
+#### Remote Endpoint URL
+
+The AI Management module remote endpoint URLs can be configured in the environment files.
+
+```js
+export const environment = {
+  // other configurations
+  apis: {
+    default: {
+      url: 'default url here',
+    },
+    AIManagement: {
+      url: 'AI Management remote url here',
+    },
+    // other api configurations
+  },
+};
+```
+
+The AI Management module remote URL configuration shown above is optional.
+
+> If you don't set the `AIManagement` property, the `default.url` will be used as fallback.
+
+### Blazor UI
+
+**List of packages:**
+- `Volo.AIManagement.Client.Blazor`
+- `Volo.AIManagement.Client.Blazor.WebAssembly`
+
+#### Remote Endpoint URL
+
+The AI Management module remote endpoint URLs can be configured via the `AIManagementClientBlazorOptions`.
+
+```csharp
+Configure<AIManagementClientBlazorOptions>(options =>
+{
+    options.RemoteServiceUrl = builder.Configuration["RemoteServices:AIManagement:BaseUrl"];
+});
+```
+
+Configure the remote service URL in your `appsettings.json`:
+
+```json
+"RemoteServices": {
+  "Default": {
+    "BaseUrl": "Default url here"
+  },
+  "AIManagement": {
+    "BaseUrl": "AI Management remote url here"
+  }
+}
+```
+
+> If you don't set the `BaseUrl` for AIManagement, the `Default.BaseUrl` will be used as fallback.
+
 ## Using Dynamic Workspace Configurations for custom requirements
 
 The AI Management module allows you to access only configuration of a workspace without resolving pre-constructed chat client. This is useful when you want to use a workspace for your own purposes and you don't need to use the chat client.