@potentialdeveloper/forms/README.md

AI Chatbot and Voice Agent form components for Potential.com

# @potentialdeveloper/forms

React form components for creating AI Chatbot and Voice Agent forms with TypeScript and Tailwind CSS support.

## Features

- 🚀 **AI Chatbot Form** - Create AI chatbots with website scraping support
- 🎙️ **AI Voice Agent Form** - Create AI voice agents with custom configuration
- 🎨 **Beautiful UI** - Modern design with Tailwind CSS and Radix UI
- 📱 **Responsive** - Works on all device sizes
- 🔧 **TypeScript** - Full type safety
- 🎯 **Configurable** - Customizable API endpoints and callbacks
- 📊 **Analytics** - Optional GTM tracking support

## Installation

```bash
npm install @potentialdeveloper/forms
```

### Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install react react-dom
```

### CSS Import

Import the CSS file in your application:

```tsx
import "@potentialdeveloper/forms/styles/globals.css";
```

## Usage

### AIChatbotForm

```tsx
import { AIChatbotForm } from "@potentialdeveloper/forms";

function App() {
  return (
    <AIChatbotForm
      apiBaseUrl="https://your-api.com"
      onSuccess={(data) => {
        console.log("Chatbot created:", data);
      }}
      onError={(error) => {
        console.error("Error:", error);
      }}
      enableGTMTracking={true}
    />
  );
}
```

### AIVoiceAgentForm

```tsx
import { AIVoiceAgentForm } from "@potentialdeveloper/forms";

function App() {
  return (
    <AIVoiceAgentForm
      apiBaseUrl="https://your-api.com"
      onSuccess={(data) => {
        console.log("Voice agent created:", data);
      }}
      onError={(error) => {
        console.error("Error:", error);
      }}
      enableGTMTracking={true}
    />
  );
}
```

### Custom Trigger

You can provide a custom trigger button:

```tsx
import { AIChatbotForm, Button } from "@potentialdeveloper/forms";

function App() {
  return (
    <AIChatbotForm
      apiBaseUrl="https://your-api.com"
      trigger={<Button variant="outline">Create My Custom Chatbot</Button>}
    />
  );
}
```

## Props

### AIChatbotFormProps

| Prop                | Type                        | Required | Description                        |
| ------------------- | --------------------------- | -------- | ---------------------------------- |
| `apiBaseUrl`        | `string`                    | ✅       | Base URL for your API              |
| `trigger`           | `React.ReactNode`           | ❌       | Custom trigger component           |
| `className`         | `string`                    | ❌       | Additional CSS classes             |
| `onSuccess`         | `(data: AgentData) => void` | ❌       | Success callback                   |
| `onError`           | `(error: string) => void`   | ❌       | Error callback                     |
| `enableGTMTracking` | `boolean`                   | ❌       | Enable Google Tag Manager tracking |

### AIVoiceAgentFormProps

Same props as `AIChatbotFormProps`.

## API Requirements

Your API should handle the following endpoints:

### Chatbot Creation: `POST /api/bot/createsimplechatbot`

Expected FormData fields:

- `username` - User's first name
- `email` - User's email
- `name` - Proposed chatbot name
- `url` - Website URL or placeholder
- `medium` - UTM medium (optional)
- `source` - Current page URL

### Voice Agent Creation: `POST /api/vapi/simpleassistant`

Expected FormData fields:

- `username` - User's first name
- `email` - User's email
- `name` - Proposed agent name
- `url` - Website URL or placeholder
- `image` - Default image filename
- `medium` - UTM medium (optional)
- `source` - Current page URL

## Styling

This package uses Tailwind CSS. Make sure your project has Tailwind CSS configured. The package includes all necessary CSS custom properties for theming.

### Dark Mode

The components support dark mode out of the box when your application has the `dark` class on the root element.

## TypeScript

The package is built with TypeScript and includes full type definitions. All components, props, and utilities are fully typed.

## Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

## License

MIT License - see LICENSE file for details.

## Support

For support, please open an issue on the GitHub repository or contact the maintainers.