From 6d99ce20fcc26284e910e999606ac13561b0eb04 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 9 Feb 2026 11:23:37 +0000 Subject: [PATCH 2/5] 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 | 112 +++++++++++++++++++++++-- 1 file changed, 106 insertions(+), 6 deletions(-) diff --git a/docs/en/modules/ai-management/index.md b/docs/en/modules/ai-management/index.md index 16e777186b..ac3a150885 100644 --- a/docs/en/modules/ai-management/index.md +++ b/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(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. From 5cf6d0c20cd76495385da7cfd14a80ac536ff435 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 9 Feb 2026 11:26:49 +0000 Subject: [PATCH 3/5] Fix documentation formatting to match ABP standards Co-authored-by: EngincanV <43685404+EngincanV@users.noreply.github.com> --- docs/en/modules/ai-management/index.md | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/docs/en/modules/ai-management/index.md b/docs/en/modules/ai-management/index.md index ac3a150885..93dbbde26f 100644 --- a/docs/en/modules/ai-management/index.md +++ b/docs/en/modules/ai-management/index.md @@ -604,9 +604,6 @@ 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. @@ -664,18 +661,15 @@ export const environment = { }; ``` -The AI Management module remote URL configuration shown above is optional. +The AI Management module remote URL configurations shown above are 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` +### Blazor WebAssembly UI #### Remote Endpoint URL + The AI Management module remote endpoint URLs can be configured via the `AIManagementClientBlazorOptions`. ```csharp @@ -685,8 +679,6 @@ Configure(options => }); ``` -Configure the remote service URL in your `appsettings.json`: - ```json "RemoteServices": { "Default": { From 88b04c96ae751794a4d282df4807ca777aa0d7e5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 9 Feb 2026 11:31:41 +0000 Subject: [PATCH 4/5] Split Blazor section and clarify supported UI frameworks Co-authored-by: EngincanV <43685404+EngincanV@users.noreply.github.com> --- docs/en/modules/ai-management/index.md | 29 ++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/docs/en/modules/ai-management/index.md b/docs/en/modules/ai-management/index.md index 93dbbde26f..3908931710 100644 --- a/docs/en/modules/ai-management/index.md +++ b/docs/en/modules/ai-management/index.md @@ -35,6 +35,12 @@ AI Management module packages are designed for various usage scenarios. Packages ## User Interface +This module provides UI integration for all three officially supported UI frameworks by ABP: + +* **MVC / Razor Pages** UI +* **Angular** UI +* **Blazor** UI (Server & WebAssembly) + ### Menu Items The **AI Management Module** adds the following items to the "Main" menu: @@ -665,15 +671,34 @@ The AI Management module remote URL configurations shown above are optional. > If you don't set the `AIManagement` property, the `default.url` will be used as fallback. +### Blazor Server UI + +#### Remote Endpoint URL + +The AI Management module remote endpoint URLs can be configured in your Blazor Server project's `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. + ### Blazor WebAssembly UI #### Remote Endpoint URL -The AI Management module remote endpoint URLs can be configured via the `AIManagementClientBlazorOptions`. +The AI Management module remote endpoint URLs can be configured via the `AIManagementClientBlazorWebAssemblyOptions`. ```csharp -Configure(options => +Configure(options => { options.RemoteServiceUrl = builder.Configuration["RemoteServices:AIManagement:BaseUrl"]; }); From be9ea51e9738454f5f7cdfd1ac29eff7f65a2ec6 Mon Sep 17 00:00:00 2001 From: EngincanV Date: Mon, 9 Feb 2026 16:35:33 +0300 Subject: [PATCH 5/5] Update index.md --- docs/en/modules/ai-management/index.md | 75 ++++++++++++++++++-------- 1 file changed, 53 insertions(+), 22 deletions(-) diff --git a/docs/en/modules/ai-management/index.md b/docs/en/modules/ai-management/index.md index 3908931710..c8cbcb6e15 100644 --- a/docs/en/modules/ai-management/index.md +++ b/docs/en/modules/ai-management/index.md @@ -462,7 +462,6 @@ Your application acts as a proxy, forwarding these requests to the AI Management | **4. Client Proxy** | No | Remote Service | Remote Service | Yes | API Gateway pattern, proxy services | - ## Client Usage AI Management uses different packages depending on the usage scenario: @@ -481,9 +480,11 @@ AI Management uses different packages depending on the usage scenario: - `Volo.AIManagement.Client.Web` #### 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 + You can invoke the `ChatClientChatViewComponent` Widget in your razor page with the following code: ```csharp @@ -496,7 +497,9 @@ You can invoke the `ChatClientChatViewComponent` Widget in your razor page with ![ai-management-workspaces](../../images/ai-management-widget.png) ##### 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). - `ConversationId`: The unique identifier for persisting and retrieving chat history from client-side storage. @@ -517,6 +520,7 @@ You can customize the chat widget with the following properties: ``` ##### 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 @@ -528,6 +532,7 @@ You can use the `ConversationId` property to specify the id of the conversation ``` ##### 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 @@ -612,7 +617,7 @@ chatComponent.off('messageSent', callbackFunction); #### 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. +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 @@ -671,11 +676,28 @@ The AI Management module remote URL configurations shown above are optional. > If you don't set the `AIManagement` property, the `default.url` will be used as fallback. -### Blazor Server UI +#### The Chat Widget + +The `@volo/abp.ng.ai-management` package provides a `ChatInterfaceComponent` (`abp-chat-interface`) that you can use to embed a chat interface into your Angular application that communicates with a specific AI workspace. + +**Example: You can use the `abp-chat-interface` component in your template**: + +```html + +``` + +- `workspaceName` (required): The name of the workspace to use. +- `conversationId`: The unique identifier for persisting and retrieving chat history from client-side storage. When provided, the chat history is stored in the browser and restored when the user revisits the page. If `null`, the chat is ephemeral and will be lost when the component is destroyed. +- `providerName`: The name of the AI provider. Used for displaying contextual error messages. + +### Blazor UI #### Remote Endpoint URL -The AI Management module remote endpoint URLs can be configured in your Blazor Server project's `appsettings.json`: +The AI Management module remote endpoint URLs can be configured in your `appsettings.json`: ```json "RemoteServices": { @@ -688,14 +710,7 @@ The AI Management module remote endpoint URLs can be configured in your Blazor S } ``` -> If you don't set the `BaseUrl` for AIManagement, the `Default.BaseUrl` will be used as fallback. - -### Blazor WebAssembly UI - -#### Remote Endpoint URL - - -The AI Management module remote endpoint URLs can be configured via the `AIManagementClientBlazorWebAssemblyOptions`. +For **Blazor WebAssembly**, you can also configure the remote endpoint URL via `AIManagementClientBlazorWebAssemblyOptions`: ```csharp Configure(options => @@ -704,18 +719,34 @@ Configure(options => }); ``` -```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. + +#### The Chat Widget + +The `Volo.AIManagement.Client.Blazor` package provides a `ChatClientChat` Blazor component that you can use to embed a chat interface into your Blazor application that communicates with a specific AI workspace. + +**Example: You can use the `ChatClientChat` component in your Blazor page:** + +```xml + ``` -> If you don't set the `BaseUrl` for AIManagement, the `Default.BaseUrl` will be used as fallback. +- `WorkspaceName` (required): The name of the workspace to use. +- `ConversationId`: The unique identifier for persisting and retrieving chat history from client-side storage. When provided, the chat history is stored in the browser's local storage and restored when the user revisits the page. If not provided or `null`, the chat is ephemeral and will be lost when the component is disposed. +- `Title`: The title displayed in the chat widget header. +- `ShowStreamCheckbox`: Whether to show a checkbox that allows the user to toggle streaming on and off. Default is `false`. +- `OnFirstMessage`: An `EventCallback` that is triggered when the first message is sent in a conversation. It can be used to determine the chat title after the first prompt like applied in the chat playground. The event args contain `ConversationId` and `Message` properties. + +```xml + +``` ## Using Dynamic Workspace Configurations for custom requirements