npm package: @lineai/developer
Description: The experience library for LineAI developer projects
Latest version: 0.0.4

# @lineai/developer

The experience library for Line AI developer projects. This package provides tools for building developer-client interfaces, enabling seamless feedback collection and communication.

## Features

- 🎯 **Developer Chat Widget** - Floating chat button for feedback and bug reports
- 📸 **Screenshot Capture** - Built-in screenshot functionality with html2canvas-pro
- 🖼️ **Image Attachments** - Support for multiple image uploads
- 🔐 **Auth-Agnostic** - Works with Clerk, Firebase, or any auth system
- 🎨 **Customizable** - Configurable position, colors, and behavior
- 📦 **TypeScript** - Full type safety

## Installation

```bash
pnpm add @lineai/developer
```

### Peer Dependencies

```bash
pnpm add react react-dom @radix-ui/react-popover lucide-react
```

## Usage

### With Clerk Authentication

```tsx
import { DeveloperChat } from '@lineai/developer';
import { useAuth } from '@clerk/nextjs';

export function App() {
  const { getToken } = useAuth();

  return (
    <>
      {/* Your app content */}

      <DeveloperChat
        getAuthToken={() => getToken()}
        projectId="my-project"
        orgSlug="my-org"
      />
    </>
  );
}
```

### With Firebase Authentication

```tsx
import { DeveloperChat } from '@lineai/developer';
import { useAuth } from '@/lib/auth'; // Your Firebase auth hook

export function App() {
  const { user } = useAuth();

  return (
    <>
      {/* Your app content */}

      <DeveloperChat
        getAuthToken={async () => {
          if (!user) return null;
          return await user.getIdToken(true);
        }}
        projectId="my-project"
        orgSlug="my-org"
      />
    </>
  );
}
```

### With Optional Project Context

When `projectId` and `orgSlug` are not provided, the API will use your organization's default repository:

```tsx
<DeveloperChat
  getAuthToken={() => getToken()}
  // projectId and orgSlug are optional
  // API will use organization's default repo
/>
```

## API Reference

### DeveloperChat Props

```typescript
type DeveloperChatProps = {
  // Required: Function to retrieve auth token
  getAuthToken: () => Promise<string | null>;

  // Optional: Project identifier
  projectId?: string;

  // Optional: Organization slug
  orgSlug?: string;

  // Optional: Full developer chat API endpoint URL
  // Defaults to process.env.NEXT_PUBLIC_LINE_AI_DEVELOPER_CHAT_URL
  apiUrl?: string;

  // Optional: Image upload endpoint URL
  // Defaults to process.env.NEXT_PUBLIC_LINE_AI_UPLOAD_URL or 'https://upload.getline.ai'
  uploadUrl?: string;

  // Optional: GitHub repository URL for feedback issues
  // Defaults to process.env.NEXT_PUBLIC_GITHUB_FEEDBACK_REPO_URL
  // Format: https://github.com/owner/repo
  repoUrl?: string;

  // Optional: Button position (default: 'bottom-right')
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';

  // Optional: Accent color for UI elements (default: '#3b82f6')
  accentColor?: string;

  // Optional: Open popover by default (default: false)
  defaultOpen?: boolean;

  // Optional: Callback when feedback is sent
  onSend?: (result: DeveloperChatResult) => void;

  // Optional: Callback when an error occurs
  onError?: (error: Error) => void;
};
```

### DeveloperChatResult

```typescript
type DeveloperChatResult = {
  success: boolean;
  issueUrl?: string;
  issueNumber?: number;
  error?: string;
  category?: string;
  labels?: string[];
};
```

## Features

### Screenshot Capture

Users can capture screenshots of the current page with a single click. Screenshots are automatically attached to the feedback.

### Image Attachments

Users can drag-and-drop or select multiple images to attach to their feedback.

### Draft Persistence

Feedback drafts are automatically saved to localStorage and restored when the user returns.

## Environment Variables

```bash
# Optional: Custom developer chat API endpoint
NEXT_PUBLIC_LINE_AI_DEVELOPER_CHAT_URL=""

# Optional: Custom image upload endpoint
NEXT_PUBLIC_LINE_AI_UPLOAD_URL=

# Optional: GitHub repository URL for feedback issues
NEXT_PUBLIC_GITHUB_FEEDBACK_REPO_URL=https://github.com/owner/repo
```

## Examples

### Custom Styling

```tsx
<DeveloperChat
  getAuthToken={() => getToken()}
  projectId="my-project"
  orgSlug="my-org"
  position="bottom-left"
  accentColor="#10b981"
/>
```

### Custom API Endpoint

```tsx
<DeveloperChat
  getAuthToken={() => getToken()}
  projectId="my-project"
  orgSlug="my-org"
  apiUrl="https://custom-api.example.com/developer-chat"
/>
```

### With Callbacks

```tsx
<DeveloperChat
  getAuthToken={() => getToken()}
  projectId="my-project"
  orgSlug="my-org"
  onSend={(result) => {
    console.log('Feedback sent:', result);
    // Show success toast
  }}
  onError={(error) => {
    console.error('Error:', error);
    // Show error toast
  }}
/>
```

### Dynamic Project Context

```tsx
export function ProjectPage({ projectId }: { projectId: string }) {
  const { getToken } = useAuth();

  return (
    <>
      {/* Your project content */}

      <DeveloperChat
        getAuthToken={() => getToken()}
        projectId={projectId} // Dynamic based on current project
        orgSlug="my-org"
      />
    </>
  );
}
```

## License

MIT

## Support

For issues or questions, contact platform@lineai.com