@peyushx/chatbot-ai

A customizable AI-driven chatbot module for Angular applications that facilitates easy integration of a chatbot with personalized features and a customizable UI.

Features

• Real-time fetching and displaying of chatbot responses via backend APIs.
• Fully customizable chatbot interface including titles and color schemes.
• Input configuration for API URLs for fetching chat suggestions and sending chat responses.

Installation

To install the package in your Angular project, execute the following command in your terminal:

npm install @peyushx/chatbot-ai

Usage

Integrate the chatbot module into your Angular project with these steps:

1. Import Required Modules in AppModule

Import ChatbotModule along with other required modules such as HttpClientModule, MarkdownModule, and BrowserAnimationsModule into your Angular app’s main module (app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MarkdownModule } from 'ngx-markdown';
import { AppComponent } from './app.component';
import { ChatbotModule } from '@peyushx/chatbot-ai';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    MarkdownModule.forRoot(),
    BrowserAnimationsModule,
    ChatbotModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Add the Chatbot Component to Your HTML Template

Insert the app-chatbot component in your HTML template where you want the chatbot to appear. Configure the component with appropriate properties like API URLs, user name, and color theme:

<app-chatbot
  [primaryColor]="'blue'"
  [secondaryColor]="'#d3dfff'"
  [chatApiUrl]="'http://localhost:8080/api/chatbot/conversation'"
  [suggestionApiUrl]="'http://localhost:8080/api/chatbot/suggestions'"
  [userName]="'Piyush'"
  [chatBotTitle]="'Evolix Chatbot'"
></app-chatbot>

Customization Options

Configure and customize the chatbot with the following properties:

| Input | Type | Description | Default Value | |--------------------|------------|-----------------------------------------------------------------|-----------------------------------------------| | suggestionApiUrl | string | The API URL to fetch chatbot suggestions. | "" | | chatApiUrl | string | The API URL to send user queries and receive responses. | "" | | userName | string | The name of the user interacting with the chatbot. | "Guest" | | primaryColor | string | Primary color of the chatbot UI. | '#d9232d' | | secondaryColor | string | Secondary color of the chatbot UI. | '#ffeaea' | | chatBotTitle | string | The title displayed in the chatbot UI. | "Chatbot" |

Development

Interested in contributing to this module? Here’s how you can set up a development environment:

git clone https://github.com/yourusername/chatbot-ai
cd chatbot-ai
npm install

Build and Test

• Building the Library: Run ng build chatbot-ai to compile the module.
• Running Tests: Execute ng test chatbot-ai to run unit tests.

License

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