turbowrap-issue-widget 0.1.0

package/README.md

@@ -0,0 +1,116 @@
+# @turbowrap/issue-widget
+
+Embeddable chatbot widget for collecting issues via TurboWrap.
+
+## Installation
+
+### Script Tag (CDN)
+
+```html
+<script>
+  window.IssueWidgetConfig = {
+    apiUrl: 'https://your-api.turbowrap.io',
+    apiKey: 'your_api_key',
+    teamId: 'your-linear-team-uuid'
+  };
+</script>
+<script src="https://cdn.jsdelivr.net/npm/@turbowrap/issue-widget@latest/dist/issue-widget.min.js" async></script>
+```
+
+### npm
+
+```bash
+npm install @turbowrap/issue-widget
+```
+
+```javascript
+import { IssueWidget } from '@turbowrap/issue-widget';
+
+const widget = new IssueWidget({
+  apiUrl: 'https://your-api.turbowrap.io',
+  apiKey: 'your_api_key',
+  teamId: 'your-linear-team-uuid'
+});
+```
+
+## Configuration
+
+| Option | Type | Required | Default | Description |
+|--------|------|----------|---------|-------------|
+| `apiUrl` | string | Yes | - | TurboWrap API URL |
+| `apiKey` | string | Yes | - | Widget API key |
+| `teamId` | string | Yes | - | Linear team UUID |
+| `position` | string | No | `'bottom-right'` | Button position: `'bottom-right'` or `'bottom-left'` |
+| `theme` | string | No | `'auto'` | Theme: `'light'`, `'dark'`, or `'auto'` |
+| `buttonText` | string | No | `'Report Issue'` | Floating button text |
+| `accentColor` | string | No | `'#6366f1'` | Primary accent color (hex) |
+| `autoScreenshot` | boolean | No | `false` | Auto-capture on widget open |
+| `screenshotMethod` | string | No | `'auto'` | `'display-media'`, `'html2canvas'`, or `'auto'` |
+
+## Callbacks
+
+```javascript
+window.IssueWidgetConfig = {
+  // ... required options ...
+
+  onOpen: () => {
+    console.log('Widget opened');
+  },
+
+  onClose: () => {
+    console.log('Widget closed');
+  },
+
+  onIssueCreated: (issue) => {
+    console.log('Issue created:', issue);
+    // issue: { id, identifier, url }
+  },
+
+  onError: (error) => {
+    console.error('Widget error:', error);
+  }
+};
+```
+
+## Features
+
+- **Screen Capture**: Uses `getDisplayMedia` API with `html2canvas` fallback
+- **AI Analysis**: Gemini Vision analyzes screenshots, Claude generates clarifying questions
+- **Linear Integration**: Creates issues directly in your Linear workspace
+- **Shadow DOM**: Styles are isolated, no conflicts with host site CSS
+- **Responsive**: Works on mobile and desktop
+- **Dark Mode**: Automatic theme detection
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Type check
+npm run typecheck
+```
+
+## Backend Configuration
+
+The widget requires CORS enabled on your TurboWrap backend. Set the environment variable:
+
+```bash
+TURBOWRAP_SERVER_CORS_ORIGINS=["https://your-customer-site.com"]
+```
+
+Or for development (allow all):
+
+```bash
+TURBOWRAP_SERVER_CORS_ORIGINS=["*"]
+```
+
+## License
+
+MIT

package/dist/api/client.d.ts

@@ -0,0 +1,10 @@
+import { WidgetConfig, AnalyzeRequest, AnalyzeResult, FinalizeRequest, IssueCreatedResult } from './types';
+export declare class IssueAPIClient {
+    private baseUrl;
+    private apiKey;
+    private teamId;
+    constructor(config: WidgetConfig);
+    analyzeIssue(data: AnalyzeRequest, onProgress: (msg: string) => void, onComplete: (result: AnalyzeResult) => void, onError: (error: string) => void): Promise<void>;
+    finalizeIssue(data: FinalizeRequest, onProgress: (msg: string) => void, onComplete: (result: IssueCreatedResult) => void, onError: (error: string) => void): Promise<void>;
+    private parseSSEStream;
+}

package/dist/api/types.d.ts

@@ -0,0 +1,51 @@
+export interface WidgetConfig {
+    apiUrl: string;
+    apiKey: string;
+    teamId: string;
+    position?: 'bottom-right' | 'bottom-left';
+    theme?: 'light' | 'dark' | 'auto';
+    buttonText?: string;
+    accentColor?: string;
+    autoScreenshot?: boolean;
+    screenshotMethod?: 'display-media' | 'html2canvas' | 'auto';
+    onOpen?: () => void;
+    onClose?: () => void;
+    onIssueCreated?: (issue: IssueCreatedResult) => void;
+    onError?: (error: Error) => void;
+}
+export interface AnalyzeRequest {
+    title: string;
+    description: string;
+    screenshots: Blob[];
+    figmaLink?: string;
+    websiteLink?: string;
+}
+export interface Question {
+    id: number;
+    question: string;
+    why: string;
+}
+export interface AnalyzeResult {
+    questions: Question[];
+    geminiInsights: string;
+    tempSessionId: string;
+}
+export interface FinalizeRequest {
+    title: string;
+    description: string;
+    userAnswers: Record<number, string>;
+    geminiInsights: string;
+    teamId: string;
+    figmaLink?: string;
+    websiteLink?: string;
+}
+export interface IssueCreatedResult {
+    id: string;
+    identifier: string;
+    url: string;
+}
+export type SSEEventType = 'progress' | 'log' | 'complete' | 'error';
+export interface SSEEvent {
+    event: SSEEventType;
+    data: unknown;
+}

package/dist/capture/screen-capture.d.ts

@@ -0,0 +1,5 @@
+export type CaptureMethod = 'display-media' | 'html2canvas' | 'auto';
+export declare function captureScreen(method?: CaptureMethod): Promise<Blob>;
+export declare function supportsDisplayMedia(): boolean;
+export declare function compressImage(blob: Blob, maxWidth?: number): Promise<Blob>;
+export declare function blobToDataUrl(blob: Blob): Promise<string>;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { IssueWidget } from './widget';
+import { WidgetConfig } from './api/types';
+export { IssueWidget };
+export type { WidgetConfig };
+export type { AnalyzeRequest, AnalyzeResult, FinalizeRequest, IssueCreatedResult, Question, } from './api/types';
+declare global {
+    interface Window {
+        IssueWidgetConfig?: WidgetConfig;
+        IssueWidget?: IssueWidget;
+    }
+}