AI Chat Widget for Angular

A beautiful AI chat widget for Angular applications with fixed bottom-right positioning.

Installation

1. Install Dependencies

npm install x-decision-ai-library-angular ngx-markdown marked

2. Import the Module

In your Angular module or standalone component:

import { AIChatWidgetModule } from 'x-decision-ai-library-angular';
import 'x-decision-ai-library-angular/styles';

@NgModule({
  imports: [
    AIChatWidgetModule
  ]
})
export class AppModule { }

Or for standalone components:

import { AIChatWidgetComponent } from 'x-decision-ai-library-angular';
import 'x-decision-ai-library-angular/styles';

@Component({
  standalone: true,
  imports: [AIChatWidgetComponent],
  // ...
})

3. Use in Template

<ai-chat-widget
  [apiEndpoint]="chatApiUrl"
  [apiKey]="chatApiKey"
  title="AI Assistant"
  [suggestions]="[
    'I want your best products',
    'What is your return policy?',
    'How do I track my order?'
  ]"
></ai-chat-widget>

Environment Setup

Create environment variables for your API:

export const environment = {
  chatApiKey: 'your_api_key_here',
  chatApiUrl: 'http://localhost:8000'
};

Props (Inputs)

| Input | Type | Default | Description | |------|------|---------|-------------| | apiEndpoint | string | required | API endpoint for chat messages | | apiKey | string | - | API key for authentication | | title | string | "AI X-Decision" | Chat widget title | | placeholder | string | "Type a message..." | Input placeholder text | | theme | "light" \| "dark" | "light" | Widget theme | | primaryColor | string | "#6366f1" | Primary color for styling | | suggestions | string[] | [] | Quick action prompts shown in welcome view | | className | string | - | Custom class name | | logo | string | - | Logo image URL for header | | zIndex | number | 9999 | Z-index for the widget |

Features

• Multiple Sessions: Create and manage multiple chat sessions
• History View: Access recent chats via the document icon
• Welcome View: Shows greeting with customizable suggestions
• Persistence: Sessions are saved locally
• Product Cards: Supports rendering product recommendations
• Markdown Support: Assistant messages support markdown formatting

Available Exports

| Export | Description | | ---------------- | ------------------------------- | | AIChatWidgetModule | Angular module with all components | | AIChatWidgetComponent | Main chat widget component (standalone) | | ChatStateService | Service for chat state management | | ChatSessionService | Service for session management |

Types

import {
  AIChatWidgetConfig,
  Message,
  ChatConfig,
  Session,
  ProductItem
} from 'x-decision-ai-library-angular';

Peer Dependencies

| Package | Version | | ----------- | ------- | | @angular/core | ^17.0.0 || ^18.0.0 | | @angular/common | ^17.0.0 || ^18.0.0 | | rxjs | ^7.8.0 |

Development

Build

npm run build

Watch Mode

npm run watch

License

ISC