AI Assistant Widget

A beautiful, customizable AI assistant widget for React and Next.js applications. Features a floating button with voice call and chat functionality, smooth animations, and flexible positioning.

Features

• 🎯 Floating Button: Clean, circular floating button with customizable positioning
• 💬 Chat Interface: Real-time chat with message bubbles and input field
• 📞 Voice Call Interface: Voice call modal with mute/unmute and end call controls
• 🎨 Smooth Animations: Beautiful animations powered by Framer Motion
• 📱 Responsive Design: Works perfectly on desktop and mobile devices
• ⚙️ Highly Customizable: Flexible positioning and styling options
• 🔧 TypeScript Support: Full TypeScript support with comprehensive type definitions
• ⚡ Framework Agnostic: Works with both React and Next.js
• 🎨 No Dependencies Required: Includes bundled CSS - no Tailwind CSS needed

Installation

npm install @rohitkvs/ai-assistant-widget
# or
yarn add @rohitkvs/ai-assistant-widget
# or
pnpm add @rohitkvs/ai-assistant-widget

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom framer-motion clsx

Quick Start

React Usage

import React from 'react';
import { AIWidget } from '@rohitkvs/ai-assistant-widget';
import '@rohitkvs/ai-assistant-widget/dist/ai-assistant-widget.css';

function App() {
  return (
    <div>
      {/* Your app content */}
      <h1>My Application</h1>
      
      {/* AI Widget with default positioning (bottom-right) */}
      <AIWidget />
    </div>
  );
}

export default App;

Next.js Usage

// pages/_app.tsx or app/layout.tsx
import { AIWidget } from '@rohitkvs/ai-assistant-widget';
import '@rohitkvs/ai-assistant-widget/dist/ai-assistant-widget.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <AIWidget />
    </>
  );
}

Custom Positioning

import { AIWidget } from '@rohitkvs/ai-assistant-widget';
import '@rohitkvs/ai-assistant-widget/dist/ai-assistant-widget.css';

// Bottom-left positioning
<AIWidget position={{ bottom: '24px', left: '24px' }} />

// Top-right positioning
<AIWidget position={{ top: '24px', right: '24px' }} />

// Custom positioning with CSS units
<AIWidget position={{ bottom: '2rem', right: '2rem' }} />

API Reference

AIWidget Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | position | PositionConfig | { bottom: '24px', right: '24px' } | Positioning configuration for the floating button | | className | string | undefined | Additional CSS classes for the floating button |

PositionConfig

interface PositionConfig {
  bottom?: string;
  right?: string;
  left?: string;
  top?: string;
}

Individual Components

You can also import and use individual components:

import { 
  FloatingButton, 
  AIAssistantModal, 
  VoiceCallModal, 
  ChatModal 
} from '@rohitkvs/ai-assistant-widget';
import '@rohitkvs/ai-assistant-widget/dist/ai-assistant-widget.css';

Styling

CSS Import (Required)

Important: You must import the CSS file for the widget to display correctly:

import '@rohitkvs/ai-assistant-widget/dist/ai-assistant-widget.css';

Custom Styling

You can override styles using your own CSS:

/* Custom floating button styling */
.ai-widget-floating-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
}

/* Custom modal styling */
.ai-widget-modal {
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

CSS Variables

The widget supports CSS custom properties for easy theming:

:root {
  --ai-widget-primary-color: #3b82f6;
  --ai-widget-background-color: #111827;
  --ai-widget-text-color: #ffffff;
}

Examples

Multiple Widgets

function App() {
  return (
    <div>
      {/* Support widget in bottom-right */}
      <AIWidget />
      
      {/* Sales widget in bottom-left */}
      <AIWidget 
        position={{ bottom: '24px', left: '24px' }}
        className="sales-widget"
      />
    </div>
  );
}

Conditional Rendering

function App() {
  const [showWidget, setShowWidget] = useState(true);
  
  return (
    <div>
      {/* Your app content */}
      
      {showWidget && <AIWidget />}
      
      <button onClick={() => setShowWidget(!showWidget)}>
        Toggle Widget
      </button>
    </div>
  );
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Troubleshooting

Widget Not Showing Correctly

If the widget doesn't display properly, make sure you've imported the CSS file:

import '@rohitkvs/ai-assistant-widget/dist/ai-assistant-widget.css';

TypeScript Issues

Make sure you have the required TypeScript types installed:

npm install --save-dev @types/react @types/react-dom

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details.

Development

Setup

git clone https://github.com/rohitkvs/ai-assistant-widget.git
cd ai-assistant-widget
npm install

Development Server

npm run dev

Build Library

npm run build:lib

Type Checking

npm run type-check

Changelog

v1.1.0

• Fixed CSS bundling issue
• Added standalone CSS file
• Improved documentation
• Better TypeScript support

v1.0.0

• Initial release
• Floating button component
• AI Assistant modal
• Voice call interface
• Chat interface
• TypeScript support
• React and Next.js compatibility