wc-chatbot
Advanced tools
Readme
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.
You can install wc-chatbot with npm, or just get started quickly with CDN.
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);
}
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>
<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>
String type. The title string of the chatbot, which will be displayed on the header of chat dialogue.
| 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"
}
}
]
*/
}
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.
str - A string containing the message to be sent.options - An optional object of type Message containing additional options for the message.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.
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
);
});
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. |
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.
FAQs
A simple WebComponent for chatting with real people or bots, such as OpenAI ChatGPT or Google Bard AI.
The npm package wc-chatbot receives a total of 214 weekly downloads. As such, wc-chatbot popularity was classified as not popular.
We found that wc-chatbot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.