# simplest-chat-widget

> A simple and easy to use chat widget

Latest version **1.2.1** (published 2023-03-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install simplest-chat-widget
pnpm add simplest-chat-widget
yarn add simplest-chat-widget
bun add simplest-chat-widget
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2023-03-30 |
| First published | 2023-03-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 111.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mohamed Snoussi |
| Maintainers | sooniic |
| Keywords | chat, widget, simple, easy to use chat widget, chat widget, javascript chat widget, typescript chat widget |

## Links

- npm: https://www.npmjs.com/package/simplest-chat-widget
- Repository: https://github.com/Moh-Snoussi/simple-chat-widget
- Homepage: https://github.com/Moh-Snoussi/simple-chat-widget#readme
- Issues: https://github.com/Moh-Snoussi/simple-chat-widget/issues
- npm.io page: https://npm.io/package/simplest-chat-widget

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2023-03-30
- 1.2.0 — 2023-03-27
- 1.0.9 — 2023-03-27
- 1.0.8 — 2023-03-27
- 1.0.7 — 2023-03-27
- 1.0.6 — 2023-03-20
- 1.0.5 — 2023-03-20
- 1.0.4 — 2023-03-20
- 1.0.3 — 2023-03-20
- 1.0.2 — 2023-03-20
- 1.0.1 — 2023-03-20
- 1.0.0 — 2023-03-20

## README

# Simplest Chat Widget

[![npm version](https://badge.fury.io/js/simplest-chat-widget.svg)](https://badge.fury.io/js/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](https://moh-snoussi.github.io/simple-chat-widget/)

## Installation

### CDN

```html

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

	ChatWidget.create();
</script>
```

### NPM

```bash
npm install simplest-chat-widget
```

```javascript
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

```typescript
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              |

---
_Source: https://npm.io/package/simplest-chat-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._