@asheshgoplani/chatbot-widget

Native Angular chatbot widget for OpenJanela ERP with direct API integration.

Installation

npm install @asheshgoplani/chatbot-widget

Quick Start

1. Import the module

// app.module.ts
import { ChatbotWidgetModule } from '@asheshgoplani/chatbot-widget';

@NgModule({
  imports: [
    ChatbotWidgetModule.forRoot({
      apiUrl: 'https://your-api.com:4001'
    })
  ]
})
export class AppModule {}

2. Add the component

<!-- app.component.html -->
<openjanela-chatbot-widget></openjanela-chatbot-widget>

3. Provide authentication

Option A: Inject your auth service (recommended)

// Your auth service must implement ChatbotAuthService
import { ChatbotAuthService, ChatbotUser } from '@asheshgoplani/chatbot-widget';

@Injectable({ providedIn: 'root' })
export class MyAuthService implements ChatbotAuthService {
  getToken(): string | null {
    return localStorage.getItem('token');
  }

  getCurrentUser(): ChatbotUser | null {
    const user = localStorage.getItem('user');
    return user ? JSON.parse(user) : null;
  }

  onSessionExpired(): void {
    // Handle session expiration
    this.router.navigate(['/login']);
  }
}

// In your module
ChatbotWidgetModule.forRoot(
  { apiUrl: 'https://your-api.com:4001' },
  MyAuthService  // Pass your service class
)

Option B: Pass token manually

<openjanela-chatbot-widget
  [token]="authToken"
  [user]="currentUser">
</openjanela-chatbot-widget>

// In your component
authToken = 'your-jwt-token';
currentUser = {
  id: '123',
  username: 'John Doe',
  role: 'user'
};

Configuration Options

interface ChatbotConfig {
  apiUrl: string;           // Required: Backend API URL
  enabled?: boolean;        // Default: true
  autoOpen?: boolean;       // Default: false
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  timeout?: number;         // Default: 300000 (5 min)
}

Features

• Native Angular UI (no iframe)
• Direct API communication
• Auto-detect auth service
• Markdown rendering
• Table visualization
• Conversation history
• Draggable & resizable
• Dark mode ready
• TypeScript support

Angular Compatibility

• Angular 18+
• RxJS 7+
• TypeScript 5+

License

MIT