GitHub Integration

# GitHub Personal Access Token
# Create at: https://github.com/settings/tokens
# Required scopes: repo (or public_repo for public repos)
GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxx

# Repository information
GITHUB_REPO=your-username/your-repository-name

'use client';

import { FeedbackProvider } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-';

const adapter = createHttpAdapter({
  endpoint: '/api/feedback',
});

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <FeedbackProvider 
      adapter={adapter}
      // Enable screenshot capture for GitHub
      screenshotConfig={{
        enabled: true,
        quality: 0.9,
        format: 'png',
      }}
    >
      {children}
    </FeedbackProvider>
  );
}

import { createGitHubAdapter } from '@ewjdev/anyclick-github/server';
import type { FeedbackPayload } from '@ewjdev/anyclick-core';

const repoName = process.env.GITHUB_REPO!;
const [owner, repo] = repoName.split("/");

// Create the GitHub adapter with configuration
const github = createGitHubAdapter({
  owner,
  repo,
  token: process.env.GITHUB_TOKEN!,
  
  // Dynamic labels based on feedback type
  getLabels: (payload) => {
    const labels = ['feedback', 'from-app'];
    
    switch (payload.type) {
      case 'issue':
      case 'bug':
        labels.push('bug');
        break;
      case 'feature':
        labels.push('enhancement');
        break;
      case 'like':
      case 'love':
        labels.push('positive-feedback');
        break;
    }
    
    return labels;
  },
  
  // Custom issue title
  getTitle: (payload) => {
    const emoji = {
      issue: '🐛',
      bug: '🐛',
      feature: '✨',
      like: '❤️',
      love: '❤️',
    }[payload.type] || '📝';
    
    // Use comment as title if available, otherwise use selector
    const title = payload.comment 
      ? payload.comment.slice(0, 80) 
      : `Feedback on ${payload.element.tagName}`;
    
    return `${emoji} ${title}`;
  },
  
  // Optional: assign to specific users
  getAssignees: (payload) => {
    // Assign bugs to the bug-triage team
    if (payload.type === 'issue' || payload.type === 'bug') {
      return ['bug-triage-user'];
    }
    return [];
  },
});

export async function POST(request: Request) {
  try {
    const payload: FeedbackPayload = await request.json();
    const result = await github.submit(payload);
    
    return Response.json(result);
  } catch (error) {
    console.error('Failed to create GitHub issue:', error);
    return Response.json(
      { success: false, error: 'Failed to create issue' },
      { status: 500 }
    );
  }
}

import { createGitHubAdapter, formatFeedbackAsMarkdown } from '@ewjdev/anyclick-github/server';

const repoName = process.env.GITHUB_REPO!;
const [owner, repo] = repoName.split("/");

const github = createGitHubAdapter({
  owner,
  repo,
  token: process.env.GITHUB_TOKEN!,
  
  // Custom body formatting
  getBody: (payload) => {
    // Use built-in formatter as base
    const defaultBody = formatFeedbackAsMarkdown(payload);
    
    // Add custom sections
    return `
${defaultBody}

---

## �� Additional Info

- **Environment**: ${payload.metadata?.environment || 'production'}
- **User ID**: ${payload.metadata?.userId || 'anonymous'}
- **Session**: ${payload.metadata?.sessionId || 'unknown'}

<details>
<summary>Raw HTML</summary>

\`\`\`html
${payload.element.outerHTML}
\`\`\`

</details>
    `;
  },
});

// Screenshots are included in the payload
const payload: FeedbackPayload = {
  // ... other fields
  screenshots: {
    target: {
      dataUrl: 'data:image/png;base64,...',
      width: 200,
      height: 100,
    },
    container: {
      dataUrl: 'data:image/png;base64,...',
      width: 800,
      height: 600,
    },
    fullPage: {
      dataUrl: 'data:image/png;base64,...',
      width: 1920,
      height: 1080,
    },
  },
};

// The adapter uploads and embeds them automatically
// ![Target Screenshot](https://github.com/.../assets/123)
// ![Container Screenshot](https://github.com/.../assets/456)
// ![Full Page Screenshot](https://github.com/.../assets/789)

export async function POST(request: Request) {
  try {
    const payload: FeedbackPayload = await request.json();
    
    // Validate required fields
    if (!payload.type || !payload.element) {
      return Response.json(
        { success: false, error: 'Invalid payload' },
        { status: 400 }
      );
    }
    
    const result = await github.submit(payload);
    
    if (!result.success) {
      console.error('GitHub API error:', result.error);
      return Response.json(result, { status: 500 });
    }
    
    return Response.json(result);
  } catch (error) {
    console.error('Feedback submission error:', error);
    
    // Return user-friendly error
    return Response.json(
      { 
        success: false, 
        error: 'Unable to submit feedback. Please try again.',
      },
      { status: 500 }
    );
  }
}