Simplest Chat Widget

Simplest Chat Widget is a lightweight and customizable chat widget library that allows you to easily add a chat feature to your web application. It's designed to be simple and easy to use, with minimal setup required.

Demo

Demo

Installation

CDN

<script type="module">
	import ChatWidget from "https://unpkg.com/simplest-chat-widget";

	ChatWidget.create();
</script>

NPM

npm install simplest-chat-widget

import ChatWidget from "simplest-chat-widget";

ChatWidget.create();

Methods

| Method | Description | |------------|------------------------------------------------------------| | create | Creates the chat widget, that will be appended to the body | | destroy | Removes the chat widget from the DOM | | show | Shows the chat widget | | hide | Hides the chat widget | | sendToUser | Sends a message to the user |

Types

export interface MessageType {
    // The message sent by the user
    message: string;
    // the Element that will contain the response
    answerEl: HTMLElement;
    // the history of the chat in a format that is suported by chatgpt-3.5-turbo messages
    history: Array<historyItem>;
    // Sets the loading state of the chat
    setLoading: ( isLoading: boolean ) => void
}

export interface historyItem {
    content: string;
    role: string;
}

Options

| Option | default | Type | Description | |----------------|-------------------------------------------------------|-----------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | answer | | ( message: MessageType ) => Promise<string> | This function is called when the user submits a message, it should return a promise that resolves with the answer | | validate | 3 < message < 512 | (message) => Array<string> | This function is called when the user submits a message, if it returns an array of errors, the errors will be displayed to the user, | | onInput | sqlInjection dummy | (message) => Array<string> | This function is called when the user presses a key in the textarea field if it returns an array of warnings, the warnings will be displayed to the user | | agentName | assistant | string | This will be displayed on the chat header | | agentAvatarUrl | https://code-for-me.com/build/images/logo-code-md.svg | string | This will be displayed as the avatar of the agent on the chat header | | styles | | ChatWidgetOptions | The styles of the chat widget. all other styles can be changed by redefining the css classes |

Styling

| option | default | Description | |----------------------------|----------------------------------------------|------------------------------------------| | styles.openerBgColor | #202123 | The background color of the chat opener | | styles.openerFillColor | #413e50 | The fill color of the chat opener | | styles.chatBgColor | #343541 | The background color of the chat | | styles.chatTextColor | #fff | The text color of the chat | | styles.chatTextareaBgColor | #514f60 | The background color of the textarea | | styles.chatHeaderBgColor | #202123 | The background color of the chat header | | styles.chatButtonsBgColor | #473f56 | The background color of the chat buttons | | styles.chatTextareaColor | #fff | The text color of the textarea | | styles.loaderColor | #9880ff | The color of the loader | | styles.fontFamily | system-ui, -apple-system, BlinkMacSystemFont | The font family of the chat |