@neurodevworks/angular-chatbot


Advanced AI chatbot components for Angular applications with beautiful UI and real-time streaming.

🚀 Features

- Ready-to-Use Components: Drop-in chatbot components for Angular
- Beautiful UI: Material Design with customizable themes
- Real-time Streaming: Live typing indicators and streaming responses
- Multi-AI Support: Works with OpenAI, Claude, Gemini, and more
- TypeScript First: Full type safety and IntelliSense support
- Responsive Design: Mobile-first responsive layout
- Customizable: Extensive theming and configuration options

📦 Installation

``bash
npm install @neurodevworks/angular-chatbot @neurodevworks/chatbot-core
`

🛠️ Quick Start

$3

`typescript
import { Component } from '@angular/core';
import { ChatbotComponent } from '@neurodevworks/angular-chatbot';

@Component({
selector: 'app-chat',
template:
[config]="chatConfig"
[options]="chatOptions">

,
imports: [ChatbotComponent]
})
export class ChatComponent {
chatConfig = {
apiKey: 'your-openai-api-key',
provider: 'openai',
model: 'gpt-3.5-turbo'
};

chatOptions = {
title: 'AI Assistant',
placeholder: 'Ask me anything...',
streaming: true,
showAvatars: true
};
}
`

$3

`scss
// In your global styles or component styles
@import '@neurodevworks/angular-chatbot/themes/default';

// Or customize the theme
.ai-chatbot {
--chatbot-primary-color: #004879;
--chatbot-secondary-color: #F7931E;
--chatbot-background-color: #ffffff;
--chatbot-text-color: #2C2E2F;
}
`

🎯 Components

$3

The main chatbot component with full chat interface.

`typescript
[config]="chatConfig"
[options]="chatOptions"
(messageReceived)="onMessageReceived($event)"
(messageSent)="onMessageSent($event)">

`

#### Inputs

- config: ChatConfig - AI service configuration
- options: ChatOptions - UI and behavior options

#### Outputs

- messageReceived: EventEmitter - Emitted when AI responds
- messageSent: EventEmitter - Emitted when user sends message

$3

Individual message component for custom layouts.

`typescript
[message]="message"
[showAvatar]="true"
[theme]="'light'">

`

$3

Chat input component for custom interfaces.

`typescript
[placeholder]="'Type your message...'"
[disabled]="isLoading"
(messageSent)="onMessageSent($event)">

`

⚙️ Configuration

$3

`typescript
interface ChatConfig {
apiKey: string;
provider: 'openai' | 'claude' | 'gemini';
model: string;
baseUrl?: string;
}
`

$3

`typescript
interface ChatOptions {
title?: string;
placeholder?: string;
theme?: 'light' | 'dark' | 'auto';
showAvatars?: boolean;
streaming?: boolean;
fullHeight?: boolean;
autoScroll?: boolean;
markdown?: boolean;
systemPrompt?: string;
}
`

🎨 Theming

$3

`typescript
// Light theme (default)
chatOptions = { theme: 'light' };

// Dark theme
chatOptions = { theme: 'dark' };

// Auto theme (follows system preference)
chatOptions = { theme: 'auto' };
`

$3

`scss
.ai-chatbot.custom-theme {
--chatbot-primary-color: #your-primary-color;
--chatbot-secondary-color: #your-secondary-color;
--chatbot-background-color: #your-background-color;
--chatbot-text-color: #your-text-color;
--chatbot-border-color: #your-border-color;
--chatbot-shadow-color: rgba(0, 0, 0, 0.1);
}
`

🔧 Advanced Usage

$3

`typescript
export class ChatComponent {
onMessageReceived(message: Message) {
console.log('AI responded:', message);
// Custom logic for AI responses
}

onMessageSent(message: Message) {
console.log('User sent:', message);
// Custom logic for user messages
}
}
`

$3

`typescript
chatOptions = {
streaming: true,
showTypingIndicator: true,
streamingDelay: 50 // milliseconds between tokens
};
`

$3

`typescript
chatOptions = {
enableFileUpload: true,
acceptedFileTypes: ['.pdf', '.txt', '.doc'],
maxFileSize: 10 1024 1024 // 10MB
};
``

📱 Responsive Design

The chatbot components are fully responsive and work great on:

- Desktop: Full-featured interface with all options
- Tablet: Optimized layout for touch interaction
- Mobile: Compact interface with essential features

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Related Packages

- @neurodevworks/chatbot-core - Core AI services
- Angular Chatbot AI - Complete monorepo

👨‍💻 Author

Manoj Kumar
- Email: manojkumar.smgr@gmail.com
- GitHub: @neurodevworks
- NPM: @neurodevworks

---

Made with ❤️ by NeuroDevWorks