npm package: @kaliz/interactive-avatar
Description: Componente Avatar interactivo con chat, tareas y funcionalidades avanzadas
Author: Tu Nombre
Latest version: 0.0.6

# Interactive Avatar Component

An advanced interactive Avatar component for React with chat functionalities, pending tasks, audio recording, and more.

## 🚀 Features

- **Draggable Avatar**: Move the avatar freely across the screen
- **Smart Chat**: Chat system with history organized by dates
- **Audio Support**: Send and play audio messages
- **Task Management**: Complete pending task system with approvals
- **Smart Commands**: Automatically create tasks from chat
- **Responsive**: Optimized for desktop and mobile
- **TypeScript**: Fully typed

## 📦 Installation

```bash
npm install @kaliz/interactive-avatar
# This package expects React 18+ from your app
npm install react@^18 react-dom@^18
```

## 🎨 Styles

You can use the library styles in TWO different ways. Pick ONE of them:

- Option A (recommended): import the precompiled CSS once in your app entry
```ts
import '@kaliz/interactive-avatar/dist/styles.css';
```

- Option B: let your Tailwind compile the classes used by the library (no CSS import)
Update your Tailwind config `content` so purge does not remove our classes:
```js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@kaliz/interactive-avatar/dist/**/*.{js,ts,jsx,tsx}',
    './node_modules/@kaliz/interactive-avatar/dist/**/*.js',
  ],
  theme: { extend: {} },
  plugins: [],
};
```

## 🛠️ Basic Usage

```tsx
import React from 'react';
import { Avatar, TopMenu } from '@kaliz/interactive-avatar';
// If you chose Option A for styles:
import '@kaliz/interactive-avatar/dist/styles.css';

function App() {
  const user = {
    name: 'John Doe',
    email: 'john@example.com'
  };

  return (
    <div>
      <TopMenu onTaskCreated={(task) => console.log('New task:', task)} />
      <Avatar 
        user={user}
        onTaskComplete={(taskId) => console.log('Task completed:', taskId)}
        onTaskApprove={(taskId, approved) => console.log('Task approved:', taskId, approved)}
        onSendMessage={(content) => console.log('Message sent:', content)}
      />
    </div>
  );
}

export default App;
```

## 🎯 Avatar Props

| Prop | Type | Description |
|------|------|-------------|
| `user` | `User` | User information |
| `onTaskComplete?` | `(taskId: string) => void` | Callback when a task is completed |
| `onTaskApprove?` | `(taskId: string, approved: boolean) => void` | Callback to approve/reject tasks |
| `onSendMessage?` | `(content: string, isAudio: boolean, audioBlob?: Blob) => void` | Callback for chat messages |

### User Type

```ts
interface User {
  name: string;
  email: string;
  avatar?: string;
}
```

## 🔧 Chat Commands

You can use natural commands in the chat to automatically create tasks:

- "create a task to send an email to a client"
- "new task to call the supplier"
- "create task to review documents"

## 📄 License

MIT

## 🤝 Contributing

Contributions are welcome. Please open an issue first to discuss the changes you would like to make.

## 📞 Support

If you have issues or questions, please open an issue in the GitHub repository.