Chatbot Component

Installation

• Install the library: npm install @rizal_ncc/lib-testing
• Ensure Tailwind CSS and the shadcn/ui design tokens are configured in your project.
• Import the component styles: @import "@rizal_ncc/lib-testing/chatbot/styles.css";

Code

<link rel="stylesheet" href="/path/to/tailwind.css" />
<div id="chatbot-root" class="h-screen"></div>
<script type="module">
  import { Chatbot } from "@rizal_ncc/lib-testing";

  const chatbot = new Chatbot({
    container: "#chatbot-root",
    placeholder: "Ask me anything…",
    theme: "light",
    avatar: {
      user: { fallback: "You" },
      bot: { src: "/bot.png", alt: "Bot assistant" },
    },
    onSendMessage: async (message) => {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message }),
      });
      const data = await response.json();
      return data.reply;
    },
  });

  // Optional: preload history
  chatbot.loadMessages([
    { sender: "bot", content: "Hi there! How can I help you today?" },
  ]);
</script>

Usage

• Provide a container element or selector.
• Optionally preload messages with loadMessages.
• Call setTheme("dark") or setTheme("light") to switch themes dynamically.
• Use destroy() to remove the component and clean up listeners.

Customization

• placeholder: Input placeholder text.
• theme: "light" or "dark".
• avatar: Supply user/bot avatars via URL or { src, alt, fallback }.
• showTimestamps: Set to false to hide timestamps.
• timestampFormatter: Custom function for formatting timestamps.
• locale: Override the locale used for default timestamp formatting.
• emptyMessageWarning: Change the accessibility warning for empty submissions.

Event Handlers

• onSendMessage(message, context): Required async handler that returns a string or object with a message field. Receives the latest message and a context object containing messages (conversation history) and the submission timestamp.