LocalChatBot

A lightweight, customizable, and beautiful chatbot UI component for React. Perfect for customer support, AI assistants, or product demos.

✨ Features

• ✅ Fully customizable theme (colors, styling)
• ✅ Multiple bot positions (bottom-right, bottom-left, etc.)
• ✅ Auto-growing textarea
• ✅ Chat persistence with sessionStorage
• ✅ Click outside to close
• ✅ Built with React + Vite + Lucide Icons
• ✅ Tree-shakable & lightweight
• ✅ No external backend required (you control the logic)

📦 Installation

npm install local-chatbot

🚀 Quick Start

import { ChatBot, ThemeProvider } from "local-chatbot";
import "local-chatbot/style.css";

 const App=()=> {
  const store = {
    name: "Store Hub",
    address: "Main Market ********",
    openingHours: "10AM - 10PM",
    phone: "+923234567891",
    about: "We sell *****************",
    links: [
      {
        link: "/customer-services", // where user go at click
        keyWords: [                 // which keywords show this route
          "customer service",
          "support",
          "help",
          "help center",
          "contact support",
          "issue",
          "problem",
          "complaint",
          "refund",
          "return",
          "order help",
        ],
      },
    ],
  };

  const theme = {
    "--backGround": "#ffffffff", // For ChatBot BackGround.
    "--botBg": "#f1f1f1", // For Bot Reply BackGround.
    "--botTc": "#000000", // For Bot Reply Text Color.
    "--userBg": "#007bff", // For User Reply BackGround.
    "--userTc": "#ffffff", // For User Reply Text Color.
    "--btnBg": "#007bff", // For Button BackGround.
    "--btnTc": "#ffffff", // For Button Color.
    "--headBg": "#3daefc", // For Header BackGround.
    "--headTc": "#ffffff", // For Header BackGround.
  };

  return (
    <ThemeProvider>
      <ChatBot
        store={store}
        theme={theme}
        botPosition="bottomRight"
      />
    </ThemeProvider>
  );
}

export default App;

📋 Props

| Prop | Type | Default | Description | |----------------|----------|------------------|-----------------------------------| | store | object | required | Business/store information object | | theme | object | undefined | Custom CSS variables for theming | | botPosition | string | "bottomRight" | Position of the chatbot on screen |

Bot Position Options

• bottomRight (default)
• bottomLeft
• topRight
• topLeft

License

• MIT License © Mujtaba Malik

🏷️ Keywords

react, chatbot, ai-chatbot, react-component, chat-ui, customer-support, messaging, conversational-ui, local-chatbot