quikchat

v1.1.17

Published

6 months ago

quikchat is a simple vanilla (no dependancies) JavaScript chat control for browsers

0High
0Medium
0Low

deftio

chat chatcontrol vanillajs llm-chat chatbox chatboxcontrol

QuikChat

Zero-dependency JavaScript chat widget for modern web applications

QuikChat is a lightweight, highly customizable chat interface that integrates seamlessly with any web project. Built with vanilla JavaScript, it provides powerful features for LLM applications, real-time chat, and interactive messaging experiences.

🚀 Live Demo | 📚 API Reference | 🛠 Developer Guide

✨ Key Features

🚫 Zero Dependencies - Pure vanilla JavaScript, no frameworks required
🎨 Fully Customizable - Complete CSS theming system with multi-instance support
🤖 LLM Ready - Built-in support for OpenAI, Anthropic, Ollama, and streaming responses
📱 Responsive Design - Adapts to any screen size and container dimensions
⚡ High Performance - Virtual scrolling for large message volumes
👁 Advanced Visibility - Individual and group-based message control (v1.1.13+)
🏷 Tagged Messages - Powerful tagging system for message organization (v1.1.14+)
💾 Full History Control - Save, load, and restore complete chat sessions
🔧 Developer Friendly - TypeScript-ready with comprehensive API

🚀 Quick Start

Get a working chat interface in under 60 seconds:

Via CDN

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
</head>
<body>
    <div id="chat" style="width: 100%; height: 400px;"></div>
    
    <script src="https://unpkg.com/quikchat"></script>
    <script>
        const chat = new quikchat('#chat', (instance, message) => {
            // Echo user message
            instance.messageAddNew(message, 'You', 'right');
            
            // Add bot response
            setTimeout(() => {
                instance.messageAddNew('Thanks for your message!', 'Bot', 'left');
            }, 1000);
        });
        
        // Add welcome message
        chat.messageAddNew('Hello! How can I help you today?', 'Bot', 'left');
    </script>
</body>
</html>

Via NPM

npm install quikchat

import quikchat from 'quikchat';
import 'quikchat/dist/quikchat.css';

const chat = new quikchat('#chat-container', (instance, message) => {
    // Your message handling logic
    console.log('User said:', message);
});

📦 Installation Options

NPM Package

npm install quikchat

CDN (Latest Version)

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">

<!-- JavaScript -->
<script src="https://unpkg.com/quikchat"></script>

Direct Download

Download the latest release from GitHub Releases

📖 View Full Release Notes

🔔 Enhanced Message Callbacks

Track message modifications for streaming and real-time updates:

// Track streaming content as it arrives
chat.setCallbackonMessageAppend((instance, msgId, content) => {
  console.log(`Streaming: ${content} added to message ${msgId}`);
});

// Monitor message edits
chat.setCallbackonMessageReplace((instance, msgId, newContent) => {
  console.log(`Message ${msgId} updated`);
});

// Track deletions
chat.setCallbackonMessageDelete((instance, msgId) => {
  console.log(`Message ${msgId} deleted`);
});

📚 Powerful History Management

Efficiently handle large chat histories with pagination and search:

// Paginated history retrieval
const page = chat.historyGetPage(1, 20, 'desc'); // Get newest 20 messages
console.log(page.messages);
console.log(page.pagination.hasNext); // Check if more pages exist

// Search through history
const results = chat.historySearch({ 
  text: 'error',
  userString: 'Support',
  limit: 50 
});

// Get history metadata
const info = chat.historyGetInfo();
console.log(`Total messages: ${info.totalMessages}`);
console.log(`Memory used: ${info.memoryUsage.estimatedSize} bytes`);

🎨 Theming & Customization

QuikChat includes beautiful built-in themes and supports complete customization:

// Use built-in themes
const chat = new quikchat('#chat', handler, {
    theme: 'quikchat-theme-dark' // or 'quikchat-theme-light'
});

// Switch themes dynamically
chat.changeTheme('quikchat-theme-light');

Custom Themes

Create your own themes with CSS:

.my-custom-theme {
    border: 2px solid #3b82f6;
    border-radius: 12px;
    font-family: 'SF Pro Display', sans-serif;
}

.my-custom-theme .quikchat-message-content {
    border-radius: 18px;
    padding: 12px 16px;
}

/* Apply to chat */
const chat = new quikchat('#chat', handler, {
    theme: 'my-custom-theme'
});

📖 Complete Theming Guide

🤖 LLM Integration Examples

OpenAI Integration

async function handleMessage(chat, message) {
    chat.messageAddNew(message, 'You', 'right');
    
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${API_KEY}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            model: 'gpt-4',
            messages: formatChatHistory(chat.historyGetAllCopy(), message)
        })
    });
    
    const data = await response.json();
    chat.messageAddNew(data.choices[0].message.content, 'Assistant', 'left');
}

Streaming Responses

// Create message for streaming
const botMsgId = chat.messageAddNew('', 'Bot', 'left');

// Append content as it arrives
streamingAPI.onChunk(chunk => {
    chat.messageAppendContent(botMsgId, chunk);
});

🛠 Complete LLM Integration Guide

🏗 Framework Integration

React

function ChatComponent() {
    const chatRef = useRef(null);
    const instanceRef = useRef(null);
    
    useEffect(() => {
        instanceRef.current = new quikchat(chatRef.current, handleMessage);
    }, []);
    
    return <div ref={chatRef} style={{ height: '400px' }} />;
}

Vue

<template>
    <div ref="chatContainer" class="chat-container"></div>
</template>

<script>
import quikchat from 'quikchat';

export default {
    mounted() {
        this.chat = new quikchat(this.$refs.chatContainer, this.handleMessage);
    }
}
</script>

⚛️ Framework Integration Examples

📖 Documentation

🌟 Examples & Demos

Basic Chat - Simple chat interface
LLM Integration - OpenAI GPT integration
Multi-Instance - Multiple chats on one page
Visibility Controls - Message visibility features
Theme Showcase - Light and dark themes
React Integration - React component example
Backend Examples - FastAPI and Node.js backends

📂 Browse All Examples

🚀 Performance

QuikChat is built for production use:

Lightweight: ~25KB minified + gzipped
Fast: Sub-millisecond message rendering
Scalable: Tested with 10,000 messages rendering in 38ms with virtual scrolling
Memory Efficient: Only renders visible messages in viewport

📊 Virtual Scrolling Technical Details | Performance Guide

🛠 Building from Source

# Clone repository
git clone https://github.com/deftio/quikchat.git
cd quikchat

# Install dependencies
npm install

# Build for production
npm run build

# Run tests
npm test

# Start development server
npm run dev

Requirements: Node.js 14+ and npm 6+

🤝 Contributing

We welcome contributions! Here's how you can help:

🐛 Report Issues - Found a bug? Open an issue
💡 Feature Requests - Have an idea? We'd love to hear it
🔧 Code Contributions - Submit pull requests for bug fixes or new features
📖 Documentation - Help improve our guides and examples
🌟 Share Examples - Show us what you've built with QuikChat

Development Setup

git clone https://github.com/deftio/quikchat.git
cd quikchat
npm install
npm run dev

📋 Contributing Guidelines

📄 License

QuikChat is licensed under the BSD-2-Clause License.

🔗 Links

📦 NPM Package
🐙 GitHub Repository
🚀 Live Examples
📖 Medium Article
💬 Issues & Support