wc-chatbot
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

wc-chatbot

published coverage npm npm jsDelivr GitHub issues license

NPM

A user-friendly chatbot UI WebComponent that streamlines the integration of backend services for chatting with both human agents and AI bots. This component allows easy integration with popular AI services such as OpenAI ChatGPT, Google Bard AI, and others, into your website or application.

Demo image

Installation

You can install wc-chatbot with npm, or just get started quickly with CDN.

Install from npm

To install from npm, open terminal in your project folder and run:

npm install wc-chatbot

After the package is installed, then you can import the chatbot WebComponent into you code:

import Chatbot from 'wc-chatbot';

window.onload = function() {
  let chatBotElement = document.createElement('chat-bot');
  document.body.appendChild(chatBotElement);
}

Install from CDN

There is jsDelivr CDN available for quickly integrated with your web page.

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/wc-chatbot"></script>

<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/wc-chatbot@1.0.0"></script>

Basic Usages:

<html>
  <head>

    <!-- Load Chatbot WebComponent library -->
    <script src="https://cdn.jsdelivr.net/npm/wc-chatbot"></script>
    <!-- End Load -->

  </head>

  <body>

    <!-- Using "chat-bot" html tag to render the chabot ui component -->
    <chat-bot></chat-bot>

  </body>
</html>

Demo page

Live Demo

Attributes

title

String type. The title string of the chatbot, which will be displayed on the header of chat dialogue.

Element Properties

Property Type Description
messages Array The array of all messages in the chat dialogue.

For example:

const chatBot = document.getElementsByTagName("chat-bot")[0];

if (chatBot !== undefined) {
  console.log(chatBot.messages);
  /* The output example: */
  /*
    [
      {
        "message": "<p>Welcome back! What would you like to chat about?</p>",
        "continued": false,
        "right": false,
        "delay": 0,
        "loading": false,
        "sender": {
            "name": "bot",
            "id": "00000000-0000-0000-0000-000000000001",
            "avatar": "https://ui-avatars.com/api/?name=Bot"
        }
      },
      {
        "message": "<p>hello</p>",
        "continued": false,
        "right": true,
        "delay": 0,
        "loading": false,
        "sender": {
          "name": "Anonymous",
          "id": "00000000-0000-0000-0000-000000000002"
        }
      }
    ]
   */
}

Method

sendMessage(str, options)

This method sends a message to the chatbot UI. The str parameter is a string containing the message to be sent. The options parameter is an optional object of type Message, containing additional options for the message.

Parameters

  • str - A string containing the message to be sent.
  • options - An optional object of type Message containing additional options for the message.

Message Options

The Message object can contain the following properties:

  • message - A string containing the message to be sent.
  • continued - A boolean indicating whether the message should be displayed in a continued message bubble. Default value is false.
  • right - A boolean indicating whether the message should be displayed on the right side of the chat UI. Default value is false.
  • delay - A number representing the delay in milliseconds before the message is displayed in the chat UI. Default value is 0.
  • loading - A boolean indicating whether the message is a loading message. Default value is false.
  • sender - An object of type Sender containing information about the message sender. The sender object can contain the following properties:
    • name - A string containing the name of the message sender.
    • id - A string containing the ID of the message sender.
    • avatar - An optional string containing the URL of the message sender's avatar.

Examples:

const chatBot = document.querySelector('chat-bot');

// Send Bot message
chatbot.sendMessage('Hello, how can I help you?', {
  right: false,
  sender: {
    name: 'bot',
    id: '001',
    avatar: 'https://ui-avatars.com/api/?name=Bot'
  }
});

// Send User message
chatbot.sendMessage('Hi', {
  right: true,
  sender: { name: 'Alice', id: '007' }
});

// Send HTML message
chatbot.sendMessage(null, {
  message: '<p>Link: <a href="https://github.com/">Github</a></p>',
  right: false,
  sender: {
    name: 'bot',
    id: '001',
    avatar: 'https://ui-avatars.com/api/?name=Bot'
  }
});

Warning:
It is better to send a HTML message only with the trusted data source, or doing HTML sanitization before sending.

Event

sent event

When a message is sent by calling, a sent event will be dispatched and with the message in the detail.

For example:

const chatBot = document.querySelector('chat-bot');
chatBot.addEventListener("sent", function(e) {
  console.log(
    "A message is sent:",
    e.detail.message
  );
});

Customized styles

By specifying CSS variables, you can customize the chat chatbot styles aboiut the color and avatar.

For example:

<style>
  chat-bot {
    --chatbot-avatar-bg-color: #F9A825;
    --chatbot-avatar-img: url('https://ui-avatars.com/api/?name=Bot');
    --chatbot-avatar-margin: 10%;
    --chatbot-header-bg-color: #F9A825;
    --chatbot-header-title-color: #FFFFFF;
    --chatbot-body-bg-color: #9dbfde;
    --chatbot-send-button-color: #F9A825;
  }
</style>
CSS Variable Name Description
--chatbot-avatar-bg-color This variable sets the background color of the avatar used for the chatbot.
--chatbot-avatar-img This variable sets the image used for the avatar. It's a url path of the image in this case,
and you can also specify a base64 encoded image as the value.
--chatbot-avatar-margin This variable sets the margin for the avatar.
--chatbot-header-bg-color This variable sets the background color of the chatbot header.
--chatbot-header-title-color This variable sets the color of the title in the chatbot header.
--chatbot-body-bg-color This variable sets the background color of the chatbot message box.
--chatbot-send-button-color This variable sets the color of the send button.

Bubble element style

And you can also customize the chat-bubble, too. For example:

<style>
  chat-bot::part(chat-bubble) {
    --chat-bubble-avatar-color: #0D8ABC;
  }
</style>

To see the styles can be customized, please look the document of wc-bubble.

Package Sidebar

Install

npm i wc-chatbot

Weekly Downloads

201

Version

0.1.3

License

GPL-3.0

Unpacked Size

124 kB

Total Files

6

Last publish

Collaborators

  • yishiashia