ai-assistant-chat-sneha105
v0.2.10
Published
A universal chat widget with markdown support that works in any frontend framework
Downloads
1,211
Maintainers
sneha_deviReadme
AI Assistant Chat Widget
A universal chat widget with markdown support that works seamlessly across React, Vue, Angular, and vanilla JavaScript applications.
Features
- 🚀 Framework Agnostic - Works with React, Vue, Angular, and vanilla JS
- 📝 Markdown Support - Rich text, tables, code blocks, math equations
- 🎨 Customizable - Position, theme, title, and API endpoint
- 📱 Responsive - Adapts to different screen sizes
- ⚡ Lightweight - Minimal dependencies
- 🔧 Easy Integration - Multiple integration methods
Installation
Basic Installation
npm install ai-assistant-chatFor React with Full Markdown Support
npm install ai-assistant-chat react-markdown remark-gfm rehype-highlight rehype-raw remark-math rehype-katex katex highlight.jsFor Vanilla JS
npm install ai-assistant-chat marked highlight.jsUsage
React
import ChatWidget from 'ai-assistant-chat';
function App() {
return (
<div>
<h1>My App</h1>
<ChatWidget />
</div>
);
}Vue
<template>
<div>
<h1>My Vue App</h1>
</div>
</template>
<script>
import { createChatWidget } from 'ai-assistant-chat/vanilla';
export default {
mounted() {
this.chatWidget = createChatWidget({
position: 'bottom-right',
title: 'Vue Assistant'
});
},
beforeUnmount() {
if (this.chatWidget) {
this.chatWidget.destroy();
}
}
}
</script>Angular
import { Component, OnInit, OnDestroy } from '@angular/core';
import { createChatWidget } from 'ai-assistant-chat/vanilla';
@Component({
selector: 'app-root',
template: '<h1>My Angular App</h1>'
})
export class AppComponent implements OnInit, OnDestroy {
private chatWidget: any;
ngOnInit() {
this.chatWidget = createChatWidget({
position: 'bottom-left',
title: 'Angular Assistant'
});
}
ngOnDestroy() {
if (this.chatWidget) {
this.chatWidget.destroy();
}
}
}Vanilla JavaScript
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>My Vanilla JS App</h1>
<script src="https://unpkg.com/ai-assistant-chat/dist/chat-widget-vanilla.umd.js"></script>
<script>
const chatWidget = new ChatWidgetVanilla({
position: 'top-right',
title: 'Vanilla Assistant'
});
</script>
</body>
</html>Web Component
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>My App</h1>
<chat-widget
api-url="https://your-api.com"
position="bottom-right"
title="Web Component Assistant"
subtitle="Always Online">
</chat-widget>
<script src="https://unpkg.com/ai-assistant-chat/dist/chat-widget-vanilla.umd.js"></script>
</body>
</html>Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| apiUrl | string | 'http://0.0.0.0:8000' | Base API URL for chat requests (widget appends /chat/ or /history/) |
| position | string | 'bottom-right' | Widget position (bottom-right, bottom-left, top-right, top-left) |
| theme | string | 'light' | Theme (light, dark) |
| title | string | 'AI Assistant' | Widget header title |
| subtitle | string | 'Online' | Widget header subtitle |
API Methods
Vanilla JavaScript / Vue / Angular
const chatWidget = createChatWidget();
// Show the widget
chatWidget.show();
// Hide the widget
chatWidget.hide();
// Add a message programmatically
chatWidget.addMessage('Hello from code!', false);
// Clear all messages
chatWidget.clearMessages();
// Destroy the widget (clean up)
chatWidget.destroy();React
The React component automatically handles lifecycle management.
Framework-Specific Notes
React
- Uses React hooks and JSX
- Automatically manages component lifecycle
- Requires React 18+ and React DOM
Vue
- Use
createChatWidget()inmounted()lifecycle - Clean up with
destroy()inbeforeUnmount() - No React dependencies required
Angular
- Use
createChatWidget()inngOnInit() - Clean up with
destroy()inngOnDestroy() - No React dependencies required
Vanilla JavaScript
- Use
new ChatWidgetVanilla()orcreateChatWidget() - Manually manage lifecycle
- No framework dependencies
Building
# Build React version
npm run build:vite
# Build vanilla JavaScript version
npm run build:vanilla
# Build both versions
npm run build:allDevelopment
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build:allLicense
MIT