autorabit-chat
v1.0.0
Published
A framework-agnostic chat component for AutoRABIT built with Svelte
Maintainers
rostyslavkrukovskyiReadme
autorabit-chat
A framework-agnostic chat component for AutoRABIT built with Svelte that can be used in any framework (React, Angular, Vue, or vanilla HTML).
Features
- 🚀 Framework Agnostic - Works in React, Angular, Vue, and vanilla HTML
- 📦 Small Bundle Size - Only ~12KB gzipped
- 💬 Complete Chat Interface - Full-featured chat UI with expand/collapse
- 🎨 Modern Design - Clean, responsive AutoRABIT-styled interface
- 💪 TypeScript Support - Includes type definitions
- ⚡ Fast - Built with Svelte for optimal performance
- 🤖 AI Assistant - RABIT Assist chat interface
Installation
npm install autorabit-chatUsage
Vanilla HTML/JavaScript
<!DOCTYPE html>
<html>
<head>
<script type="module">
import 'autorabit-chat';
</script>
</head>
<body>
<autorabit-chat></autorabit-chat>
</body>
</html>React
import { useEffect } from 'react';
import 'autorabit-chat';
function App() {
return (
<div>
<h1>My React App</h1>
<autorabit-chat></autorabit-chat>
</div>
);
}
export default App;Angular
First, import the component in your main module or component:
// main.ts or app.component.ts
import 'autorabit-chat';Then use it in your template:
<!-- app.component.html -->
<h1>My Angular App</h1>
<autorabit-chat></autorabit-chat>For TypeScript support, add to your app.component.ts:
// Tell Angular about the custom element
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
// ...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})Vue.js
<template>
<div>
<h1>My Vue App</h1>
<autorabit-chat></autorabit-chat>
</div>
</template>
<script>
import 'autorabit-chat';
export default {
name: 'App'
};
</script>Next.js
import { useEffect } from 'react';
export default function Home() {
useEffect(() => {
// Dynamic import to avoid SSR issues
import('autorabit-chat');
}, []);
return (
<div>
<h1>My Next.js App</h1>
<autorabit-chat></autorabit-chat>
</div>
);
}Features
- Chat Interface: Complete chat UI with floating button
- Expand/Collapse: Full-screen and compact modes
- RABIT Assist: AutoRABIT AI assistant branding and styling
- Message History: Maintains conversation history
- Typing Indicator: Shows when AI is responding
- Responsive: Works on desktop and mobile
- Customizable: Easy to extend and modify
TypeScript Support
The package includes TypeScript definitions. For React projects, the component will be properly typed:
// This will work with full TypeScript support
<autorabit-chat className="my-class" style={{position: 'fixed'}} />Browser Support
- Chrome/Edge 54+
- Firefox 63+
- Safari 10.1+
Development
# Install dependencies
npm install
# Start development server
npm run dev
# Build the library
npm run build:lib
# Build the demo app
npm run buildSize
- ES Module: ~12KB (~4KB gzipped)
- UMD Bundle: ~8KB (~3KB gzipped)
License
MIT
Contributing
Issues and pull requests are welcome!