@tcshang/askpanda-chatbot NPM

AskPanda Chatbot

A modern chatbot component library built with Lit and packaged with Vite.

Features

🚀 Modern Web Component architecture using Lit
📦 Lightweight and dependency-free (only depends on Lit)
🎨 Easily customizable with CSS variables
🔌 Simple API integration for AI services
📱 Responsive design that works on mobile and desktop
🌐 Works with any framework or vanilla JavaScript

Installation

npm install askpanda-chatbot

Basic Usage

HTML & JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AskPanda Chatbot Example</title>
  <script type="module">
    import { ChatContainer, createChatHandler } from 'askpanda-chatbot';
    
    // Wait for custom elements to be defined
    window.addEventListener('DOMContentLoaded', () => {
      const chatContainer = document.querySelector('chat-container');
      
      // Create a chat handler
      const chatHandler = createChatHandler({
        responseCallback: (response) => {
          chatContainer.addBotMessage(response);
        }
      });
      
      // Listen for user messages
      chatContainer.addEventListener('message-received', (e) => {
        const message = e.detail.message;
        chatHandler.sendMessage(message);
      });
    });
  </script>
</head>
<body>
  <chat-container bot-name="AskPanda"></chat-container>
</body>
</html>

React

import React, { useEffect, useRef } from 'react';
import 'askpanda-chatbot';
import { createChatHandler } from 'askpanda-chatbot';

function ChatbotApp() {
  const chatContainerRef = useRef(null);
  
  useEffect(() => {
    if (!chatContainerRef.current) return;
    
    const chatHandler = createChatHandler({
      responseCallback: (response) => {
        chatContainerRef.current.addBotMessage(response);
      }
    });
    
    const handleMessage = (e) => {
      chatHandler.sendMessage(e.detail.message);
    };
    
    chatContainerRef.current.addEventListener('message-received', handleMessage);
    
    return () => {
      chatContainerRef.current?.removeEventListener('message-received', handleMessage);
    };
  }, []);
  
  return (
    <chat-container 
      ref={chatContainerRef} 
      bot-name="AskPanda"
    ></chat-container>
  );
}

export default ChatbotApp;

API Reference

Components

`<chat-container>`

The main chat container component.

Properties:

messages (Array): Array of chat messages
isOpen (Boolean): Whether the chat window is open
botName (String): Name of the chatbot
placeholder (String): Placeholder text for the input field
welcomeMessage (String): Initial message from the bot
avatarSrc (String): URL to the bot's avatar image
userAvatarSrc (String): URL to the user's avatar image

Methods:

addBotMessage(text): Add a bot message to the chat

Events:

message-received: Fired when a user sends a message
chat-toggle: Fired when the chat is opened or closed
chat-ready: Fired when the chat component is connected to the DOM

Utilities

`createChatHandler(options)`

Creates a handler for processing chat messages.

Options:

apiKey (String): API key for AI service
apiEndpoint (String): API endpoint URL
processingCallback (Function): Called with processing status
responseCallback (Function): Called with AI responses

Returns:

sendMessage(message): Process a user message
clearChat(): Clear chat history
getHistory(): Get current chat history

Customization

You can customize the appearance of the chatbot using CSS variables:

chat-container {
  --primary-color: #4a5bf7;
  --secondary-color: #f5f5f5;
  --text-color: #333;
  --bot-message-bg: #4a5bf7;
  --user-message-bg: #e9e9eb;
  --bot-message-color: white;
  --user-message-color: #333;
  --chat-border-radius: 15px;
  --animation-duration: 0.3s;
}

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

chatbot lit web-components typescript ui

lit

0.1.0

4 months ago