westlake-emanate-ai-chat-lib

v0.1.0

Published

9 days ago

A reusable Angular library for integrating AI chat functionality with resizable UI and file upload capabilities

0High
0Medium
0Low

jomeldicen

angular ai chat chatbot component library westlake

Emanate AI Chat Library

A powerful, reusable Angular library for integrating AI chat functionality with resizable UI, file/image upload, and comprehensive customization options.

🎉 What's New in v0.1.0

🔄 Resizable Chat Container - Drag-to-resize with preset size controls
📎 File & Image Upload - Support for documents and images with validation
📱 Fully Responsive - Optimized for mobile, tablet, and desktop
♿ Accessibility - WCAG AA compliant with keyboard navigation
🎨 Enhanced Themes - All 10 themes updated with modern styling
📚 Comprehensive Documentation - Detailed guides and examples

View Full Changelog

✨ Features

✅ Real-time AI chat messaging
✅ Resizable chat interface (drag handles + presets)
✅ File upload (PDF, DOC, DOCX, TXT, CSV)
✅ Image upload (PNG, JPEG, GIF, WEBP)
✅ Fullscreen mode support
✅ Historical message loading
✅ 10 customizable themes
✅ Session state persistence
✅ Mobile-responsive design
✅ Accessibility compliant
✅ TypeScript support

📦 Installation

Install via npm:

npm install westlake-emanate-ai-chat-lib

Or via yarn:

yarn add westlake-emanate-ai-chat-lib

🚀 Quick Start

1. Import the Module

import { NgModule } from '@angular/core';
import { EmanateAiChatLibModule } from 'westlake-emanate-ai-chat-lib';

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

2. Use the Component

<emanate-ai-chat 
  [title]="'Chat with Maestro'"
  [apiUrl]="'https://your-api-url.com/api'"
  [appKey]="'your-app-key'"
  [userId]="currentUser.id"
  [userName]="currentUser.name"
  [firstName]="currentUser.firstName"
  [templateDesign]="'default'"
  (fileUploaded)="onFileUploaded($event)"
  (sizeChanged)="onSizeChanged($event)">
</emanate-ai-chat>

📖 Component API

Input Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | title | string | 'Chat with Maestro' | Chat window title | | placeholder | string | 'Type your inquiry...' | Input placeholder text | | showDebugInfo | boolean | false | Show debug information | | apiUrl | string | undefined | AI service API URL | | appKey | string | undefined | Application key for API | | appSource | string | undefined | Application source identifier | | userId | string | undefined | Current user ID | | firstName | string | undefined | User's first name | | userName | string | undefined | User's full name | | templateDesign | string | 'default' | Theme name (see Themes) | | welcomeMessage | string | Auto-generated | Custom welcome message | | historicalMessages | any[] | [] | Previous conversation messages | | conversationId | string | undefined | Current conversation identifier |

Output Events

| Event | Payload | Description | |-------|---------|-------------| | messageReceived | ChatMessage | Emitted when AI responds | | messageSent | ChatMessage | Emitted when user sends message | | fileUploaded | FileAttachment | Emitted when file is uploaded | | sizeChanged | {size, width, height} | Emitted when chat is resized |

Interfaces

export interface ChatMessage {
  messageId?: string;
  conversationId?: string;
  isUser: boolean;
  content: string;
  sender?: string;
  intent?: string;
  authorName?: string;
  confidenceScore?: number;
  timestamp: Date;
  isLoading?: boolean;
  attachments?: FileAttachment[];
}

export interface FileAttachment {
  id: string;
  name: string;
  type: string;
  size: number;
  url?: string;
  data?: string | ArrayBuffer;
}

export type ChatSize = 'compact' | 'default' | 'expanded' | 'fullscreen';

🎨 Available Themes

Choose from 10 professionally designed themes:

default - Purple gradient theme
dark - Dark mode theme
blue - Blue professional theme
green - Green nature theme
purple - Purple vibrant theme
minimal - Clean minimal theme
corporate - Corporate gray theme
red - Red alert theme
yellow - Yellow sunshine theme
orange - Orange warm theme

📐 Resizing Features

Size Presets

📱 Compact: 400x500px - Minimal footprint
💻 Default: 800x600px - Standard view
🖥️ Expanded: 1200x800px - Maximum workspace
⛶ Fullscreen: 100vw x 100vh - Full coverage

Manual Resize

Drag the right edge to resize width
Drag the bottom-right corner to resize both dimensions
Size preferences saved automatically to session storage

📎 File Upload

Supported File Types

Images: 🖼️

PNG, JPEG, JPG, GIF, WEBP

Documents: 📄

PDF, DOC, DOCX, TXT, CSV

File Validation

Maximum size: 10MB per file
Type checking enforced
Visual preview with icons and sizes
Remove attachments before sending

📱 Responsive Design

Desktop (>768px): Full features with resize handles
Tablet (768px-480px): Optimized layout, hidden handles
Mobile (<480px): Full-screen, touch-optimized

💡 Usage Examples

Basic Implementation

import { Component } from '@angular/core';

@Component({
  selector: 'app-chat',
  template: `
    <emanate-ai-chat 
      [apiUrl]="apiUrl"
      [appKey]="appKey"
      [userId]="userId"
      [userName]="userName">
    </emanate-ai-chat>
  `
})
export class ChatComponent {
  apiUrl = 'https://your-backend.com/api';
  appKey = 'your-app-key';
  userId = 'user123';
  userName = 'John Doe';
}

With File Upload Handling

import { Component } from '@angular/core';
import { FileAttachment } from 'westlake-emanate-ai-chat-lib';

@Component({
  selector: 'app-chat',
  template: `
    <emanate-ai-chat 
      [apiUrl]="apiUrl"
      [appKey]="appKey"
      (fileUploaded)="onFileUploaded($event)"
      (sizeChanged)="onSizeChanged($event)">
    </emanate-ai-chat>
  `
})
export class ChatComponent {
  apiUrl = 'https://your-backend.com/api';
  appKey = 'your-app-key';
  
  onFileUploaded(file: FileAttachment): void {
    console.log('File uploaded:', file.name, file.size);
    // Process file upload to your backend
    this.uploadToServer(file);
  }
  
  onSizeChanged(sizeData: any): void {
    console.log('Chat resized:', sizeData.size, sizeData.width, sizeData.height);
    // Save user preference or adjust layout
  }
  
  private async uploadToServer(file: FileAttachment): Promise<void> {
    // Your upload logic here
  }
}

With Historical Messages

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chat',
  template: `
    <emanate-ai-chat 
      [apiUrl]="apiUrl"
      [conversationId]="conversationId"
      [historicalMessages]="messages">
    </emanate-ai-chat>
  `
})
export class ChatComponent implements OnInit {
  apiUrl = 'https://your-backend.com/api';
  conversationId = 'conv-123';
  messages: any[] = [];
  
  ngOnInit(): void {
    // Load previous conversation
    this.loadHistory();
  }
  
  private loadHistory(): void {
    // Fetch from backend
    this.http.get(`/api/conversations/${this.conversationId}`)
      .subscribe((data: any) => {
        this.messages = data.messages;
      });
  }
}

📚 Documentation

For detailed documentation, see:

RESIZABLE_UI_GUIDE.md - Complete feature guide and API reference
VISUAL_REFERENCE.md - Visual layouts, diagrams, and design specs
INTEGRATION_EXAMPLES.md - Real-world integration examples
HISTORICAL_MESSAGES_USAGE.md - Message history guide
CHANGELOG.md - Version history and changes

🛠️ Development

To develop or contribute to this library:

Building the Library

# Navigate to project root
cd Westlake.Underwriting.AIAgent.Angular

# Build the library
ng build emanate-ai-chat-lib

# Build with watch mode
ng build emanate-ai-chat-lib --watch

Testing Locally

# Build the library
ng build emanate-ai-chat-lib

# Link locally
cd dist/emanate-ai-chat-lib
npm link

# In your test project
npm link westlake-emanate-ai-chat-lib

Running Tests

ng test emanate-ai-chat-lib

📋 Requirements

Angular: 12.1.3+
RxJS: 6.6.0+
TypeScript: 4.3.5+
Modern Browsers: Chrome 80+, Firefox 75+, Safari 13+

🤝 Contributing

Contributions are welcome! Please:

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📝 License

MIT License - see LICENSE file for details

🐛 Issues & Support

Report issues at: GitHub Issues

👨‍💻 Author

Jomel Dicen - [email protected]

🔗 Links

Version: 0.1.0
Last Updated: December 31, 2025