\n {/* Header */}\n \n
\n Rate this response\n
\n {onClose && (\n \n ✕\n \n )}\n \n\n {/* Content Preview */}\n {showPreview && content && (\n \n )}\n\n {/* Rating Selection */}\n \n {\n setRating('positive');\n setSelectedCategories(new Set());\n }}\n className={`\n flex-1 py-2 px-4 rounded-lg border-2 transition-all\n ${\n rating === 'positive'\n ? 'border-green-500 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400'\n : 'border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-700'\n }\n `}\n >\n \n +\n \n Helpful\n \n {\n setRating('negative');\n setSelectedCategories(new Set());\n }}\n className={`\n flex-1 py-2 px-4 rounded-lg border-2 transition-all\n ${\n rating === 'negative'\n ? 'border-red-500 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400'\n : 'border-gray-200 dark:border-gray-700 hover:border-red-300 dark:hover:border-red-700'\n }\n `}\n >\n \n -\n \n Not Helpful\n \n
\n\n {/* Category Selection */}\n {rating && (\n <>\n \n
\n
\n {categories.map(({ id, label }) => (\n toggleCategory(id)}\n className={`\n px-3 py-1 text-sm rounded-full border transition-all\n ${\n selectedCategories.has(id)\n ? rating === 'positive'\n ? 'border-green-500 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'\n : 'border-red-500 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'\n : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500'\n }\n `}\n >\n {label}\n \n ))}\n
\n
\n \n setComment(e.target.value)}\n placeholder=\"Tell us more...\"\n aria-label=\"Additional feedback comments\"\n className=\"w-full p-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n rows={2}\n />\n
\n\n {/* Submit */}\n \n {isSubmitting ? 'Submitting...' : 'Submit Feedback'}\n \n \n )}\n \n );\n}\n","/**\n * ModelStatus - Display model download and inference status\n *\n * Shows download progress, model readiness, and inference stats.\n */\n\nimport React from 'react';\n\nexport interface ModelStatusProps {\n /** Model identifier */\n modelId: string;\n /** Download progress (0-100) */\n downloadProgress?: number;\n /** Whether the model is ready for inference */\n isReady: boolean;\n /** Whether currently generating */\n isGenerating?: boolean;\n /** Current inference speed (tokens/sec) */\n tokensPerSecond?: number;\n /** Storage used by the model (bytes) */\n storageUsed?: number;\n /** Inference backend being used */\n backend?: 'webgpu' | 'wasm' | 'cpu';\n /** Whether SIMD is enabled */\n simdEnabled?: boolean;\n /** Error message if any */\n error?: string;\n /** Compact display mode */\n compact?: boolean;\n /** Custom class names */\n className?: string;\n}\n\n/**\n * Format bytes to human-readable string\n */\nfunction formatBytes(bytes: number): string {\n if (bytes === 0) return '0 B';\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\n}\n\n/**\n * Model status indicator component\n */\nexport function ModelStatus({\n modelId,\n downloadProgress,\n isReady,\n isGenerating = false,\n tokensPerSecond,\n storageUsed,\n backend,\n simdEnabled,\n error,\n compact = false,\n className = '',\n}: ModelStatusProps): React.ReactElement {\n // Determine status\n const isDownloading =\n downloadProgress !== undefined && downloadProgress < 100;\n\n if (compact) {\n return (\n \n {/* Status indicator */}\n \n\n {/* Model name */}\n \n {modelId}\n \n\n {/* Status text */}\n \n {error\n ? 'Error'\n : isGenerating\n ? `${tokensPerSecond?.toFixed(1) ?? '?'} tok/s`\n : isReady\n ? 'Ready'\n : isDownloading\n ? `${downloadProgress}%`\n : 'Not loaded'}\n \n
\n );\n }\n\n return (\n \n {/* Header */}\n \n
\n \n
\n {modelId}\n
\n \n\n {/* Backend badge */}\n {backend && (\n
\n {backend.toUpperCase()}\n {simdEnabled && ' + SIMD'}\n \n )}\n
\n {error}\n
\n )}\n\n {/* Download progress */}\n {isDownloading && (\n \n
\n Downloading...\n {downloadProgress}%\n
\n
\n
\n {/* Inference speed */}\n
\n
\n Speed\n
\n
\n {isGenerating\n ? `${tokensPerSecond?.toFixed(1) ?? '—'} tok/s`\n : 'Idle'}\n
\n
\n\n {/* Storage */}\n {storageUsed !== undefined && (\n
\n
\n Storage\n
\n
\n {formatBytes(storageUsed)}\n
\n
\n )}\n
\n Model not loaded. Call{' '}\n \n init()\n {' '}\n to start.\n
\n )}\n \n );\n}\n","/**\n * EdgeworkContext - React context for Edgework SDK\n *\n * Provides SDK instance and state management for React applications.\n */\n\nimport React, {\n createContext,\n useContext,\n useEffect,\n useState,\n useCallback,\n useMemo,\n} from 'react';\nimport type { Edgework } from '../index';\nimport type { GenerateResult, ChatMessage, DownloadProgress } from '../types';\n\nexport interface EdgeworkContextValue {\n /** SDK instance (null until initialized) */\n sdk: Edgework | null;\n /** Whether the SDK is initialized */\n isInitialized: boolean;\n /** Whether the model is ready for inference */\n isReady: boolean;\n /** Whether currently generating */\n isGenerating: boolean;\n /** Download progress during model loading */\n downloadProgress: DownloadProgress | null;\n /** Current error if any */\n error: Error | null;\n /** Initialize the SDK */\n initialize: () => Promise;\n /** Generate text */\n generate: (prompt: string) => Promise;\n /** Chat with messages */\n chat: (messages: ChatMessage[]) => Promise;\n /** Submit feedback for RLHF */\n submitFeedback: (\n messageHash: string,\n rating: 'positive' | 'negative'\n ) => Promise;\n}\n\nconst EdgeworkContext = createContext(null);\n\nexport interface EdgeworkProviderProps {\n /** Model to use */\n model: string;\n /** Children components */\n children: React.ReactNode;\n /** Auto-initialize on mount */\n autoInit?: boolean;\n /** Storage backend preference */\n storageBackend?: 'opfs' | 'indexeddb' | 'memory';\n /** Enable RLHF */\n enableRLHF?: boolean;\n /** User ID for personalization */\n userId?: string;\n}\n\n/**\n * Provider component for Edgework SDK\n */\nexport function EdgeworkProvider({\n model,\n children,\n autoInit = false,\n storageBackend = 'opfs',\n enableRLHF = true,\n userId,\n}: EdgeworkProviderProps): React.ReactElement {\n const [sdk, setSdk] = useState(null);\n const [isInitialized, setIsInitialized] = useState(false);\n const [isReady, setIsReady] = useState(false);\n const [isGenerating, setIsGenerating] = useState(false);\n const [downloadProgress, setDownloadProgress] =\n useState(null);\n const [error, setError] = useState(null);\n\n // Initialize SDK\n const initialize = useCallback(async () => {\n if (isInitialized || sdk) return;\n\n try {\n setError(null);\n\n // Dynamic import to avoid SSR issues\n const { Edgework } = await import('../index');\n\n const instance = await Edgework.init({\n model,\n storageBackend,\n enableRLHF,\n userId,\n onProgress: (progress) => {\n setDownloadProgress(progress);\n },\n });\n\n setSdk(instance);\n setIsInitialized(true);\n setIsReady(true);\n } catch (err) {\n const error = err instanceof Error ? err : new Error(String(err));\n setError(error);\n console.error('[EdgeworkContext] Initialization failed:', error);\n }\n }, [model, storageBackend, enableRLHF, userId, isInitialized, sdk]);\n\n // Auto-initialize\n useEffect(() => {\n if (autoInit && !isInitialized && !sdk) {\n initialize();\n }\n }, [autoInit, isInitialized, sdk, initialize]);\n\n // Generate text\n const generate = useCallback(\n async (prompt: string): Promise => {\n if (!sdk || !isReady) {\n console.warn('[EdgeworkContext] SDK not ready');\n return null;\n }\n\n try {\n setIsGenerating(true);\n setError(null);\n const result = await sdk.generate(prompt);\n return result;\n } catch (err) {\n const error = err instanceof Error ? err : new Error(String(err));\n setError(error);\n console.error('[EdgeworkContext] Generate failed:', error);\n return null;\n } finally {\n setIsGenerating(false);\n }\n },\n [sdk, isReady]\n );\n\n // Chat with messages\n const chat = useCallback(\n async (messages: ChatMessage[]): Promise => {\n if (!sdk || !isReady) {\n console.warn('[EdgeworkContext] SDK not ready');\n return null;\n }\n\n try {\n setIsGenerating(true);\n setError(null);\n const result = await sdk.chat(messages);\n return result;\n } catch (err) {\n const error = err instanceof Error ? err : new Error(String(err));\n setError(error);\n console.error('[EdgeworkContext] Chat failed:', error);\n return null;\n } finally {\n setIsGenerating(false);\n }\n },\n [sdk, isReady]\n );\n\n // Submit feedback\n const submitFeedback = useCallback(\n async (\n messageHash: string,\n rating: 'positive' | 'negative'\n ): Promise => {\n if (!sdk) {\n console.warn('[EdgeworkContext] SDK not initialized');\n return;\n }\n\n try {\n await sdk.feedback(messageHash, rating);\n } catch (err) {\n console.error('[EdgeworkContext] Feedback failed:', err);\n }\n },\n [sdk]\n );\n\n // Memoized context value\n const value = useMemo(\n () => ({\n sdk,\n isInitialized,\n isReady,\n isGenerating,\n downloadProgress,\n error,\n initialize,\n generate,\n chat,\n submitFeedback,\n }),\n [\n sdk,\n isInitialized,\n isReady,\n isGenerating,\n downloadProgress,\n error,\n initialize,\n generate,\n chat,\n submitFeedback,\n ]\n );\n\n return (\n \n {children}\n \n );\n}\n\n/**\n * Hook to use Edgework SDK in components\n */\nexport function useEdgework(): EdgeworkContextValue {\n const context = useContext(EdgeworkContext);\n if (!context) {\n throw new Error('useEdgework must be used within an EdgeworkProvider');\n }\n return context;\n}\n"]}