Quikchat is a vanilla (no dependancies) JavaScript chat control that can be easily integrated into web applications. It provides a customizable chat interface with support for hiding and showing a title area and the input area.
Full Examples are in the repo examples folder (relative link): Example Code and Demo.
Examples include using ESM, UMD modules, theming, running multiple chats on the same page, and integration with LLM providers such as Ollama, LMStudio, OpenAI compatible providers.
To use quikchat in your project, follow these steps:
Include the quikchat.js JavaScript file in your project. Link the quikchat.css stylesheet to style the chat interface. html
<script src="./path/to/quikchat.umd.min.js"></script>
<link rel="stylesheet" href="./path/to/quikchat.css">
<script src="https://unpkg.com/quikchat"></script>
<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css" />
Or import as a module:
import quikchat from '../dist/quikchat.esm.min.js';
document.addEventListener('DOMContentLoaded', () => {
const parentDiv = document.querySelector('#chatContainerInstance');
window.chatBox = new quikchat(parentDiv,
(chat, msg) => {
chat.messageAddNew(msg, 'me', 'right'); // echo the message to the chat area
// example of a bot response using the built-in lorem ipsum generator
const botResponse = quikchat.loremIpsum();
chat.messageAddNew(botResponse, 'bot', 'left');
},
{ // options
theme: 'quikchat-theme-light',
titleArea: { title: 'QuikChatJS', align: 'left', show: true },
});
chatBox.messageAddNew('Hello, how are you?', 'bot', 'left');
chatBox.messageAddNew('I am fine, thank you.', 'user', 'right');
chatBox.messageAddNew('How can I help you today?', 'bot', 'left');
chatBox.changeTheme("quikchat-theme-light");
console.log("quikchat version: "+quikchat.version().version);
});
Create a container element in your HTML where you want the chat interface to appear. The quikchat widget will take 100% of the paretn container height and width. If the parent container width or height is not specified the quikchat widget may grow as content is added. If the parent container is resized, quikchat will resize with the parent container.
<style>
#chat-container {width: 100%; height: 50vh;} /* use any width / height as appropriate for your app */
</style>
<div id="chat-container"></div>
Initialize quikchat in your JavaScript code by providing the container element and a callback function for message events:
See /examples for full working code.
chat = new quikchat(
"#chat-container",//a css selector such as "#chat-container" or DOM element
(chat, msg) => { // this callback triggered when user hits the Send
// messages are not automatically echoed.
// this allows filtering of the message before posting.
chat.messageAddNew(msg, 'me', 'right'); // echo msg to chat area
// now call an LLM or do other actions with msg
// ... callLLM(msg) ... do other logic if needed.
// or callLLM(chat.historyGet()); // pass full history (can also filter)
},
{
theme: 'quikchat-theme-light', // set theme, see quikchat.css
titleArea: { title: 'My Chat', align: 'left', show: true }, // internal title area if desired
});
// Add a message at any point not just from callback
chat.messageAddNew('Hello!', 'You', 'left'); // should appear left justified
chat.messageAddNew('Hello!', 'Me', 'right'); // should appear right justified
//... other logic
let messageHistory = chat.historyGet(); // get all the messages (see docs for filters)
console.log(messageHistory); // do something with messages
// show / hide the title area
chat.titleAreaHide(); // hides the title area for a bare chat
// hide the input area
chat.inputAreaHide(); // hides the input area so chat is now just a message stream.
// change themes at any time
chat.changeTheme("quikchat-theme-dark"); // change theme on the fly (see quikchat.css for examples)
QuikChat allows theming using CSS of all the messages, and user area, and overal widget.
Below is the prebuilt 'light' theme. To change the theme, make a new set of classes with different values but the same css selector naming (e.g. change "quikchat-theme-light" to "my-theme") and save as a style. Then pass the "my-theme" to the constructor or to the changeTheme() function.
Themes can be changed at anytime by calling myChatWidget.changeTheme(newTheme) where myChatWidget is the instance of your widget.
If several widgets are on the same page, each can have a separate theme.
/* quikchat theme light */
.quikchat-theme-light {
border: 1px solid #cccccc;
border-radius: 10px;
background-color: #f9f9f9;
}
.quikchat-theme-light .quikchat-title-area {
padding: 8px;
color: #333;
}
.quikchat-theme-light .quikchat-messages-area {
background-color: #ffffffe2;
color: #333;
}
/* support for alternating row styles */
.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
background-color: #fffffff0;
color: #005662;
}
.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
background-color: #eeeeeee9;
color: #353535;
}
/* input area / text entry / send button */
.quikchat-theme-light .quikchat-input-area {
background-color: #f9f9f9;
border-bottom-left-radius : 10px;
border-bottom-right-radius : 10px;
}
.quikchat-theme-light .quikchat-input-textbox {
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
color: #333;
}
.quikchat-theme-light .quikchat-input-send-btn {
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
}
quikchat is built with rollup.js.
Make sure to run npm install. Then run npm run build.
Note that at run time quikchat has no dependancies, but at build time several tools are used for packing and minifying code.
quikchat is tested with the jest framwork. To run unit tests and see coverage run:
npm run test
quikchat is licensed under the BSD-2 License.