# Voxweave React

Voxweave is a customizable and interactive voice UI component for React applications. It provides a visually appealing interface for voice interactions, perfect for AI assistants, voice commands, or any audio-based user interface.

## Features

- 🎨 Customizable appearance and animations
- 🌓 Light and dark mode support
- 📱 Responsive design
- 🎵 Real-time audio visualization
- ⚡️ Optimized performance
- 🔒 Type-safe
- 🎮 Multiple positioning options

## Installation

You can install Voxweave using npm, pnpm, or bun:

```bash
# Using npm
npm install @hoosei/voxweave-react

# Using pnpm
pnpm add @hoosei/voxweave-react

# Using bun
bun add @hoosei/voxweave-react
```

## Quick Start

1. First, wrap your application with the VoxweaveProvider:

```tsx
import { VoxweaveProvider } from '@hoosei/voxweave-react'

function App() {
  return (
    <VoxweaveProvider 
      config={{
        licenseKey: process.env.NEXT_PUBLIC_VOXWEAVE_LICENSE_KEY!,
        apiUrl: process.env.NEXT_PUBLIC_VOXWEAVE_API_URL!,
        development: process.env.NODE_ENV === 'development'
      }}
    >
      <YourApp />
    </VoxweaveProvider>
  )
}
```

2. Then use the Voxweave component in your application:

```tsx
import { Voxweave } from '@hoosei/voxweave-react'

function YourComponent() {
  return (
    <Voxweave
      size={64}
      darkMode={false}
      position="bottom-right"
      isVertical={false}
      containerStyle="bottom"
      onStartCall={() => {
        // Handle call start
      }}
      onClose={() => {
        // Handle close
      }}
    />
  )
}
```

## Configuration Options

### VoxweaveProvider Props

| Prop | Type | Description |
|------|------|-------------|
| config.licenseKey | string | Your Voxweave license key |
| config.apiUrl | string | Voxweave API endpoint |
| config.development | boolean | Enable development mode |

### Voxweave Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | number | 64 | Size of the component in pixels |
| darkMode | boolean | false | Enable dark mode |
| position | 'left' \| 'right' \| 'bottom-left' \| 'bottom-right' | 'bottom-right' | Position of the component |
| isVertical | boolean | false | Enable vertical layout |
| containerStyle | 'bottom' \| 'center' | 'bottom' | Container positioning style |
| isVisible | boolean | true | Control component visibility |
| isAnimated | boolean | true | Enable animations |
| backgroundColor | string | - | Custom background color |
| disableBackground | boolean | false | Remove background |
| disableShadow | boolean | false | Remove shadow effect |
| onStartCall | () => void | - | Callback when call starts |
| onClose | () => void | - | Callback when component closes |

## Styling

Voxweave uses Tailwind CSS with a custom prefix to avoid conflicts. You can override styles using the `className` prop:

```tsx
<Voxweave
  className="custom-class"
  // other props...
/>
```

## Development

For local development, the provider automatically uses development credentials:

```tsx
<VoxweaveProvider
  config={{
    development: true, // Uses development credentials
    apiUrl: 'http://localhost:4200/api'
  }}
>
  {/* Your app */}
</VoxweaveProvider>
```

## License

This project is proprietary software owned by Hoosei Limited. See the [LICENSE.md](../../LICENSE.md) file in the root directory for details.

Hoosei® is a registered trademark, No. UK00003747539 of Hoosei Limited, 10 Upper Grosvenor Road, Tunbridge Wells, England, TN1 2EP. Registered England & Wales Company No. 13834192.

For licensing inquiries or permissions, please contact Hoosei Limited.



## Importing

You can import the Voxweave components and functions as follows:

\`\`\`javascript
// Client-side imports
import { Voxweave, useVoxweaveAuth } from ' @hoosei/voxweave-react';

// Server-side imports
import { vox } from ' @hoosei/voxweave-react/server';
\`\`\`

For TypeScript users, you can also import types:

\`\`\`typescript
import type { AuthStatus, VoxweaveAuthOptions } from ' @hoosei/voxweave-react/server';
\`\`\`