NUI Chatbot Package

A customizable, meaningful, and easy-to-integrate Chatbot component for React applications with support for custom components, theming, and streaming responses.

Installation

npm install nui-chatbot-pkg

Requirements

• React 18+
• React DOM 18+
• Tailwind CSS 3+

Quick Start

Basic Setup

"use client";

import { ChatBot } from "nui-chatbot-pkg";
import "nui-chatbot-pkg/style.css"; // Required for styles

export default function ChatPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <ChatBot
        strapiUrl="http://localhost:1337"
        cardRegistry={[]}
        theme={{
          primaryColor: "#30b3ebff",
          secondaryColor: "#2281f4ff",
          accentColor: "#38c7daff",
        }}
        title="My Chatbot"
      />
    </div>
  );
}

Component Registry

The component registry allows you to define custom card components for different data types. Each component in the registry will be rendered based on the id matching the response type.

Setup Example

import DealCard from "./components/DealCard";
import EmployeeCard from "./components/EmployeeCard";
import TourCard from "./components/TourCard";
import GenericCard from "./components/GenericCard";

const registryData = [
  { id: "card1", component: DealCard },
  { id: "card2", component: EmployeeCard },
  { id: "card3", component: TourCard },
  { id: "default", component: GenericCard }, 
];

Custom Card Component Example

interface CardProps {
  data: any;
}

export default function DealCard({ data }: CardProps) {
  return (
    <div className="bg-white rounded-lg p-4 shadow-md">
      <h3 className="font-bold text-lg">{data.title}</h3>
      <p className="text-gray-600">{data.description}</p>
      <p className="text-blue-600 font-semibold mt-2">{data.price}</p>
    </div>
  );
}

Theme Configuration

Customize the chatbot's appearance with the theme object:

const customTheme = {
  primaryColor: "#30b3ebff", // Main color for buttons and accents
  secondaryColor: "#2281f4ff", // Secondary accent color
  accentColor: "#38c7daff", // Additional accent color
  container: "rounded-2xl border-blue-500", // Tailwind classes for container
  header: "text-white", // Tailwind classes for header
  input: "border-blue-400 rounded-xl", // Tailwind classes for input
  showGradient: false, // Enable/disable gradient backgrounds
  welcomeMessage: "Welcome!", // Greeting message
  welcomeDescription: "How can I help?", // Subtitle message
};

<ChatBot
  theme={customTheme}
  // ... other props
/>;

Props Reference

| Prop | Type | Required | Description | | -------------- | ------------------------------------------------------- | -------- | -------------------------------------------------------- | | strapiUrl | string | ✓ | URL of your Strapi backend API | | cardRegistry | Array<{ id: string; component: React.ComponentType }> | ✓ | Registry of custom card components | | theme | object | ✓ | Theme configuration object | | title | string | ✓ | Title displayed in the chat window header | | streamSpeed | number | - | Speed of message streaming in milliseconds (default: 10) |

Complete Example

"use client";

import { useEffect, useState } from "react";
import { ChatBot } from "nui-chatbot-pkg";
import "nui-chatbot-pkg/style.css"; 
import DealCard from "../../components/Cards/DealCard/DealCard";
import EmployeeCard from "../../components/Cards/EmployeeCard/EmployeeCard";
import TourCard from "../../components/Cards/TourCard/TourCard";
import GenericCard from "../../components/Cards/GenericCard/GenericCard";

const registryData = [
  { id: "card1", component: DealCard },
  { id: "card2", component: EmployeeCard },
  { id: "card3", component: TourCard },
  { id: "default", component: GenericCard },
];

const customTheme = {
  primaryColor: "#30b3ebff",
  secondaryColor: "#2281f4ff",
  accentColor: "#38c7daff",
  container: "rounded-2xl border-blue-500",
  header: "text-white",
  input: "border-blue-400 rounded-xl",
  showGradient: false,
  welcomeMessage: "Welcome to Numentica-UI",
  welcomeDescription: "How can I help you today?",
};

export default function ChatPage() {
  return (
    <div className="bg-[#000000] min-h-screen flex items-center justify-center p-4">
      <ChatBot
        strapiUrl="http://localhost:1337"
        cardRegistry={registryData}
        theme={customTheme}
        title="Numentica-UI"
        streamSpeed={10}
      />
    </div>
  );
}

Features

• 🎨 Easy theming with customizable colors
• 🧩 Component registry for custom card rendering
• 💬 Real-time message streaming
• 📱 Responsive design with Tailwind CSS
• ⚙️ Flexible configuration
• 🚀 Optimized for Next.js with "use client" directive

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT