@sourceloop/ai-assistant-client v0.1.0
ai-assistant
The ai-assistant library is a versatile and intelligent solution designed to seamlessly integrate AI-powered question-answering capabilities into Angular applications. This modular component allows developers to connect with configured AI models, enabling users to submit queries and receive AI-generated responses effortlessly.
Deprecation Notice
The AiAssistantt now supports Angular v14. We will continue to provide support for the older version based on Angular v13 until 30th June 2024.
Structure
The Structure of the ai-assistant-lib is as follows
|────ai-assistant-lib
│ ├── src
│ ├── assets
| ├── icons
| ├── images
| ├── styles
│ ├── lib
│ |── components
| |── constants
| |── enums
| |── interfaces
| |── models
| |── pipes
| |── services
| |── types
| |──(...other files)
Installation
To install the ai-assistant module, use npm:
npm install @sourceloop/ai-assistant-client
Components
co-pilot-message-actions
- The co-pilot-message-actions component enables users to provide feedback on AI-generated responses by voting up or down. This feature helps improve the AI assistant’s performance by gathering user preferences and enhancing response quality over time. The component is designed for seamless integration and can be customized to align with specific user experience requirements
co-pilot-image
The co-pilot-image component allows the display of images within AI-generated responses. This component enhances user interaction by providing visual context alongside text-based outputs.
It also offers interactive features such as image zooming, allowing users to closely examine details within the images
co-pilot-video
The co-pilot-video component enables the integration of video content within AI-generated responses. This feature enhances user engagement by providing dynamic visual information alongside textual interactions.
It also offers essential playback controls, such as play and pause functionalities, allowing users to manage video content effectively.
co-pilot-related-topics
- The co-pilot-related-topics component enhances user engagement by suggesting additional subjects pertinent to the current conversation. This feature encourages deeper exploration and understanding by presenting users with a curated list of related topics, fostering a more comprehensive and interactive experience.
Usage
To integrate the AI Assistant into your Angular application, follow these steps:
Create a New Angular Application: If you haven't already, utilize the Angular CLI to generate a new Angular project.
Incorporate the AiAssistantModule into your application by importing it into your root module. Open the app.module.ts file and add the module to the imports array:
Here's an example of how your module might look after importing and configuring the AI Assistant:
ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { XComponent } from './x/x.component';
import { ReactiveFormsModule } from '@angular/forms';
import { AiAssistantModule } from 'ai-assistant-lib';
@NgModule({
declarations: [AppComponent, XComponent],
imports: [
BrowserModule,
AiAssistantModule, // Import AiAssistantModule
HttpClientModule,
ReactiveFormsModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
Implementing new component in ai-assistant
To integrate a new component (e.g., a widget or related topics) into the AI Assistant, follow these steps:
Create the Component
Navigate to src/lib/components/ and create a new component.
Ensure the component includes the necessary .scss, .ts, and .html files.
Set the encapsulation mode to ViewEncapsulation.ShadowDom to maintain style isolation.
Define the Component Selector
After that add this component selector as a constant in src/lib/constants/custom-element-selector.constant.ts
Add the component selector as a constant in src/lib/constants/custom-element-selector.constant.ts:
ts
export const CoPilotDemo = 'ai-co-pilot-demo';
Register the Component in the Module
- Update src/lib/ai-assistant.module.ts to register the new component as a custom element:
ts
const demoElement = createCustomElement( CoPilotDemoComponent, { injector: this.injector, }, ); customElements.get(CoPilotDemoComponent) || customElements.define(CoPilotDemoComponent,demoElement);
- Update src/lib/ai-assistant.module.ts to register the new component as a custom element:
ts
- Integrate the Component into the AI Assistant Modal
- Modify co-pilot.component.ts to include the component dynamically: ts
By following these steps, you can efficiently add new components to the AI Assistant while maintaining consistency and modularity.``` signals.onResponse({ html: `<${CoPilotDemo} input='${data}'></${CoPilotDemo}>`, role: CoPilotRoles.AI, }); ``` The input attribute represents the data passed to the Angular component.
Configuration
To use the ai-assistant component, you will need to provide certain configuration parameters, such as the SSE URL. This configuration should be set in your environment settings. Example configuration in your environment.ts: ts
export const environment = {
sseUrl: 'https://your-api-url.com/ai', // URL for the AI service
};
Request Payload
The default payload sent to the SSE (Server-Sent Events) URL is structured as follows: { "prompt": "user's current request prompt", "previousQuestion": "previous question asked", "previousResponse": "previous response from AI service" }
Structure of SSE API
It is expected your structure of SSE API to be
{
"chunk": "{{anytype here}}",
"type": "{{ChunkTypes}}"
}
Event Handling
Upon successful configuration, the AI Assistant component will commence receiving events via Server-Sent Events (SSE). These events are transmitted in discrete segments, each potentially encompassing various data types, including but not limited to:
- Image: An image provided by the AI service.
- Video: A video provided by the AI service.
- Related Topics: Suggestions for topics pertinent to the user's current context.
- Feature: Notifications regarding unsupported features or limitations specific to certain tenants. Each event type is associated with a specific component responsible for rendering the appropriate content:
- Image Events: Activate the ImageComponent to display the received image.
- Video Events: Activate the VideoComponent to display the received video.
This event-driven architecture ensures that each event is processed according to its type, thereby delivering accurate information or media to the user in a timely manner.
Once your configuration is in place, the component will begin receiving events in chunks. These events may contain various types of data, including but not limited to:
You can get more info on ChunkTypes from
/ai-assistant/projects/ai-assistant-lib/src/lib/components
4 months ago