@ -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
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.
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
<abp-chat-interface
[workspaceName]="'mylama'"
[conversationId]="'my-conversation-id'"
/>
```
- `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`:
> 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:**
> 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<FirstMessageEventArgs>` 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.
EngincanV
2 months ago