2.1.0 • Published 1 year ago

@peyushx/chatbot-ai v2.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

@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:

InputTypeDescriptionDefault Value
suggestionApiUrlstringThe API URL to fetch chatbot suggestions.""
chatApiUrlstringThe API URL to send user queries and receive responses.""
userNamestringThe name of the user interacting with the chatbot."Guest"
primaryColorstringPrimary color of the chatbot UI.'#d9232d'
secondaryColorstringSecondary color of the chatbot UI.'#ffeaea'
chatBotTitlestringThe 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.