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:

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

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:

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:

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

Development

For local development, the provider automatically uses development credentials:

<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 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'; ```