npm package: @iamdamnsam/aether-support
Description: JavaScript SDK for Aether Support - AI-powered customer support platform
Author: Aether Support
Latest version: 1.2.1

# Aether Support JavaScript SDK

The official JavaScript/TypeScript SDK for integrating Aether Support into your applications.

## Installation

```bash
npm install @aether-support/sdk
# or
yarn add @aether-support/sdk
# or
pnpm add @aether-support/sdk
```

## Quick Start

### Vanilla JavaScript

```javascript
import { createAetherSupport } from '@aether-support/sdk';

const support = createAetherSupport({
  appId: 'your-app-id',
  user: {
    email: 'user@example.com',
    name: 'John Doe',
    plan: 'pro',
  },
});

// Initialize the widget
support.init();

// Open the support widget
support.open();

// Close the widget
support.close();

// Update user information
support.identify({
  email: 'updated@example.com',
  metadata: { company: 'Acme Inc' },
});
```

### React

```jsx
import { AetherProvider, useAetherSupport, SupportButton, useTickets } from '@aether-support/sdk/react';

function App() {
  return (
    <AetherProvider
      config={{
        appId: 'your-app-id',
        position: 'bottom-right',
        theme: 'auto',
      }}
    >
      <YourApp />
    </AetherProvider>
  );
}

function SupportSection() {
  const { open, identify } = useAetherSupport();
  const { tickets, loading, createTicket } = useTickets(authToken);

  // Identify user on login
  useEffect(() => {
    identify({
      email: user.email,
      name: user.name,
      plan: user.subscription,
    });
  }, [user]);

  return (
    <div>
      <SupportButton>Need Help?</SupportButton>

      {/* Or programmatically */}
      <button onClick={open}>Open Support</button>

      {/* Display tickets */}
      {loading ? (
        <p>Loading tickets...</p>
      ) : (
        <ul>
          {tickets.map((ticket) => (
            <li key={ticket.ticket_id}>{ticket.subject}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

### Script Tag (CDN)

```html
<script src="https://cdn.aether-support.com/sdk/v1/aether-support.min.js"></script>
<script>
  const support = new AetherSupport({
    appId: 'your-app-id',
  });
  support.init();
</script>
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `appId` | `string` | Required | Your Aether Support App ID |
| `apiUrl` | `string` | Production URL | Custom API endpoint |
| `user` | `object` | `undefined` | Pre-fill user information |
| `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Widget position |
| `primaryColor` | `string` | App default | Custom primary color |
| `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Theme mode |
| `onOpen` | `() => void` | `undefined` | Callback when widget opens |
| `onClose` | `() => void` | `undefined` | Callback when widget closes |
| `onMessageSent` | `(message: string) => void` | `undefined` | Callback when message is sent |
| `onTicketCreated` | `(ticketId: string) => void` | `undefined` | Callback when ticket is created |

## API Methods

### Widget Control

```javascript
// Open the widget
support.open();

// Close the widget
support.close();

// Toggle the widget
support.toggle();
```

### User Identification

```javascript
// Identify user
support.identify({
  id: 'user-123',
  email: 'user@example.com',
  name: 'John Doe',
  plan: 'enterprise',
  metadata: {
    company: 'Acme Inc',
    role: 'Admin',
  },
});

// Clear user data (logout)
support.logout();
```

### Ticket Management

```javascript
// Get user's tickets
const tickets = await support.getTickets(authToken);

// Get specific ticket
const ticket = await support.getTicket(authToken, 'ticket-id');

// Create new ticket
const newTicket = await support.createTicket(authToken, {
  subject: 'Help needed',
  description: 'I need assistance with...',
  category: 'technical',
});

// Reply to ticket
const updatedTicket = await support.replyToTicket(authToken, 'ticket-id', {
  content: 'Thanks for the response!',
});
```

### Cleanup

```javascript
// Remove widget and cleanup
support.destroy();
```

## React Hooks

### `useAetherSupport()`

Access the SDK instance and widget controls.

```jsx
const { sdk, isLoaded, open, close, toggle, identify, logout } = useAetherSupport();
```

### `useTickets(token)`

Manage user tickets with built-in loading states.

```jsx
const {
  tickets,      // Ticket[]
  loading,      // boolean
  error,        // Error | null
  refetch,      // () => Promise<void>
  createTicket, // (request) => Promise<Ticket>
  replyToTicket // (ticketId, request) => Promise<Ticket>
} = useTickets(authToken);
```

## TypeScript Support

The SDK is written in TypeScript and provides full type definitions:

```typescript
import type {
  AetherConfig,
  Ticket,
  TicketMessage,
  CreateTicketRequest,
  ReplyRequest,
} from '@aether-support/sdk';
```

## License

MIT