@rohitkvs/ai-assistant-widget/README.md

A React/Next.js library for AI assistant widget with floating button, voice call, and chat functionality

# 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

```bash
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:

```bash
npm install react react-dom framer-motion clsx
```

## Quick Start

### React Usage

```tsx
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

```tsx
// 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

```tsx
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

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

### Individual Components

You can also import and use individual components:

```tsx
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:

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

### Custom Styling

You can override styles using your own CSS:

```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:

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

## Examples

### Multiple Widgets

```tsx
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

```tsx
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:

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

### TypeScript Issues

Make sure you have the required TypeScript types installed:

```bash
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](LICENSE) file for details.

## Development

### Setup

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

### Development Server

```bash
npm run dev
```

### Build Library

```bash
npm run build:lib
```

### Type Checking

```bash
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