# Plusvibe/Pipl.ai Integration Setup Guide

## Overview
Your Auto-Draft extension now supports Plusvibe/Pipl.ai's Unibox! The extension automatically detects when you're on Pipl.ai and provides the same auto-draft functionality as Gmail and Instantly.

## Key Features
- **Automatic Platform Detection**: Extension recognizes when you're on app.pipl.ai
- **Smart DOM Extraction**: Works without API key by extracting messages from the page
- **API Support (Optional)**: Enhanced extraction with Plusvibe API key if available
- **Familiar UI**: Same green/gold interface as Gmail and Instantly

## Installation & Setup

### 1. Basic Setup (No API Key Required)
1. **Reload the Extension**
   - Go to `chrome://extensions/`
   - Find your Auto-Draft extension
   - Click the refresh icon

2. **Navigate to Plusvibe**
   - Go to https://app.pipl.ai/v2/unibox/inbox/
   - Open any conversation

3. **Use the Extension**
   - Click on the reply/compose area
   - The Auto-Draft UI should appear in the bottom-right corner
   - Or click the extension icon to toggle the UI

### 2. Enhanced Setup with API Key (Optional)
If you have a Plusvibe API key:

1. **Open Extension Options**
   - Right-click the extension icon
   - Select "Options"

2. **Configure API Settings**
   - Scroll to "Plusvibe/Pipl.ai API Configuration"
   - Enter your API key
   - Optionally adjust the API base URL
   - Click "Save Settings"

3. **Benefits of API Access**
   - More accurate thread extraction
   - Faster message retrieval
   - Better handling of complex threads

## How It Works

### Message Extraction Methods

#### 1. DOM Extraction (Default)
The extension searches for messages using multiple selectors:
- `.message`, `.email-message`, `.thread-message`
- `.conversation-message`, `[data-message]`
- `.pipl-message`, `.plusvibe-message`, `.unibox-message`

#### 2. API Extraction (With API Key)
If configured, the extension will:
- Use your API key to fetch thread messages
- Fall back to DOM extraction if API fails
- Provide more structured data

### Reply Box Detection
The extension looks for:
- `div[contenteditable="true"]`
- `textarea` elements
- `.reply-box`, `.compose-box`, `.message-input`
- `[role="textbox"]`

## Troubleshooting

### UI Doesn't Appear
1. **Check Console for Errors**
   - Open DevTools (F12)
   - Look for "Plusvibe platform detected" message
   - Check for any red errors

2. **Verify URL**
   - Ensure you're on `app.pipl.ai`
   - The path should include `/unibox` or `/inbox`

3. **Manual Toggle**
   - Click the extension icon to manually show/hide UI

### Messages Not Extracted
1. **Inspect Page Structure**
   - Right-click on a message
   - Select "Inspect"
   - Note the class names and structure
   - Report if different from expected selectors

2. **Check API Configuration**
   - If using API key, verify it's correct
   - Check network tab for API errors

### Draft Not Inserting
1. **Find Reply Box**
   - Console should show "Found Plusvibe reply box"
   - If not, the reply box selector may need updating

2. **Check for Errors**
   - Look for "Failed to insert draft" errors
   - May need to trigger additional events for some frameworks

## API Configuration

### Setting Up API Access
```javascript
// In plusvibe_extractor.js
apiConfig: {
  apiKey: null, // Set from storage
  baseUrl: 'https://app.pipl.ai/api/v2',
  endpoints: {
    threads: '/threads',
    messages: '/messages',
    conversations: '/conversations'
  }
}
```

### API Response Format
The extension expects API responses in this format:
```json
{
  "messages": [
    {
      "from": "sender@email.com",
      "sender_name": "Sender Name",
      "timestamp": "2024-01-01T12:00:00Z",
      "content": "Message content",
      "subject": "Email subject"
    }
  ]
}
```

## Development & Debugging

### Enable Verbose Logging
Open console and run:
```javascript
window.PLUSVIBE_DEBUG = true;
```

### Test Extraction
```javascript
// Test thread extraction
PlusvibeExtractor.extractThreadMessages().then(console.log);

// Test reply box detection
console.log(PlusvibeExtractor.findReplyBox());
```

### Report Issues
If the extension doesn't work properly:
1. Note the exact URL
2. Take a screenshot of the page structure
3. Copy any console errors
4. Check which selectors failed

## Privacy & Security
- API keys are stored locally in Chrome storage
- No data is sent to external servers (except OpenAI for drafts)
- DOM extraction happens entirely in your browser

## Next Steps
- Test the extension on Plusvibe
- Configure API key if available
- Report any selector mismatches for updates