@geenius/ai 0.1.0 → 0.3.1

package/packages/react/package.json

@@ -1,60 +0,0 @@
-{
-  "name": "@geenius-ai/react",
-  "version": "0.1.0",
-  "private": false,
-  "type": "module",
-  "description": "React hooks, components, and pages for geenius-ai",
-  "author": "Antigravity HQ",
-  "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/hooks/index.js"
-    },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
-    },
-    "./pages": {
-      "types": "./dist/pages/index.d.ts",
-      "import": "./dist/pages/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "clean": "rm -rf dist",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "pnpm clean && pnpm build"
-  },
-  "dependencies": {
-    "@geenius-ai/shared": "workspace:*"
-  },
-  "peerDependencies": {
-    "convex": ">=1.0.0",
-    "react": ">=18.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "convex": "^1.34.0",
-    "react": "^19.2.4",
-    "tsup": "^8.5.1",
-    "typescript": "~6.0.2"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/packages/react/src/components/AILogTable.tsx

@@ -1,90 +0,0 @@
-// @geenius-ai/react — src/components/AILogTable.tsx
-
-/**
- * AI log table — paginated, filterable.
- */
-
-import type { AILogEntry, AILogTableProps as BaseProps } from '@geenius-ai/shared'
-
-export interface AILogTableComponentProps extends BaseProps {
-    logs: AILogEntry[]
-    isLoading: boolean
-    onRowClick?: (log: AILogEntry) => void
-}
-
-function formatDuration(ms: number): string {
-    if (ms < 1000) return `${ms}ms`
-    return `${(ms / 1000).toFixed(1)}s`
-}
-
-function formatCost(usd?: number): string {
-    if (!usd) return '—'
-    if (usd < 0.01) return `$${usd.toFixed(4)}`
-    return `$${usd.toFixed(2)}`
-}
-
-function StatusBadge({ status }: { status: string }) {
-    return (
-        <span data-ai-status={status}>
-            {status === 'success' ? '✓' : '✗'} {status}
-        </span>
-    )
-}
-
-export function AILogTable(props: AILogTableComponentProps) {
-    if (props.isLoading) {
-        return <div data-ai-component="log-table" data-ai-loading>Loading logs…</div>
-    }
-
-    if (props.logs.length === 0) {
-        return <div data-ai-component="log-table" data-ai-empty>No AI logs yet</div>
-    }
-
-    return (
-        <div className={props.className} data-ai-component="log-table">
-            <table data-ai-table>
-                <thead>
-                    <tr>
-                        <th>Time</th>
-                        <th>Model</th>
-                        <th>Provider</th>
-                        <th>Caller</th>
-                        <th>Status</th>
-                        <th>Duration</th>
-                        <th>Tokens</th>
-                        <th>Cost</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {props.logs.map((log) => (
-                        <tr
-                            key={log.requestId}
-                            onClick={() => props.onRowClick?.(log)}
-                            data-ai-log-row
-                            data-ai-status={log.status}
-                        >
-                            <td data-ai-cell="time">
-                                {new Date(log.timestamp).toLocaleTimeString()}
-                            </td>
-                            <td data-ai-cell="model">{log.model}</td>
-                            <td data-ai-cell="provider">{log.provider}</td>
-                            <td data-ai-cell="caller">{log.caller}</td>
-                            <td data-ai-cell="status">
-                                <StatusBadge status={log.status} />
-                            </td>
-                            <td data-ai-cell="duration">
-                                {formatDuration(log.durationMs)}
-                            </td>
-                            <td data-ai-cell="tokens">
-                                {log.totalTokens ?? '—'}
-                            </td>
-                            <td data-ai-cell="cost">
-                                {formatCost(log.totalCostUsd)}
-                            </td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </div>
-    )
-}

package/packages/react/src/components/ChatWindow.tsx

@@ -1,118 +0,0 @@
-// @geenius-ai/react — src/components/ChatWindow.tsx
-
-/**
- * Headless chat window: message list + input.
- * Unstyled with data-* attributes for easy CSS targeting.
- */
-
-import { useState, useRef, useEffect, type FormEvent } from 'react'
-import type { AIChatMessage, ChatWindowProps } from '@geenius-ai/shared'
-import { useChat, type UseChatOptions } from '../hooks/useChat'
-
-export interface ChatWindowComponentProps extends ChatWindowProps, UseChatOptions {
-    renderMessage?: (message: AIChatMessage) => React.ReactNode
-    renderInput?: (props: { value: string; onChange: (v: string) => void; onSubmit: () => void; isSending: boolean }) => React.ReactNode
-}
-
-export function ChatWindow(props: ChatWindowComponentProps) {
-    const [input, setInput] = useState('')
-    const messagesEndRef = useRef<HTMLDivElement>(null)
-    const chat = useChat(props)
-
-    // Auto-scroll to bottom
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-    }, [chat.messages.length])
-
-    const handleSubmit = async (e?: FormEvent) => {
-        e?.preventDefault()
-        if (!input.trim() || chat.isSending) return
-        const content = input.trim()
-        setInput('')
-        await chat.sendMessage(content)
-    }
-
-    return (
-        <div className={props.className} data-ai-component="chat-window">
-            {/* Messages */}
-            <div data-ai-messages>
-                {chat.messages.length === 0 && (
-                    <div data-ai-empty>
-                        <p>Start a conversation</p>
-                    </div>
-                )}
-
-                {chat.messages.map((msg: AIChatMessage) =>
-                    props.renderMessage ? (
-                        props.renderMessage(msg)
-                    ) : (
-                        <div
-                            key={msg.id}
-                            data-ai-message
-                            data-ai-role={msg.role}
-                        >
-                            <div data-ai-message-role>{msg.role}</div>
-                            <div data-ai-message-content>{msg.content}</div>
-                            {msg.tokens && (
-                                <span data-ai-message-tokens>
-                                    {msg.tokens} tokens
-                                </span>
-                            )}
-                        </div>
-                    )
-                )}
-
-                {chat.isSending && (
-                    <div data-ai-message data-ai-role="assistant" data-ai-loading>
-                        <div data-ai-typing-indicator>
-                            <span /><span /><span />
-                        </div>
-                    </div>
-                )}
-
-                <div ref={messagesEndRef} />
-            </div>
-
-            {/* Error */}
-            {chat.error && (
-                <div data-ai-error role="alert">
-                    <span>{chat.error}</span>
-                    <button onClick={chat.clearError} data-ai-dismiss>×</button>
-                </div>
-            )}
-
-            {/* Input */}
-            {props.renderInput ? (
-                props.renderInput({
-                    value: input,
-                    onChange: setInput,
-                    onSubmit: handleSubmit,
-                    isSending: chat.isSending,
-                })
-            ) : (
-                <form onSubmit={handleSubmit} data-ai-input-form>
-                    <textarea
-                        value={input}
-                        onChange={(e) => setInput(e.target.value)}
-                        placeholder="Type a message…"
-                        disabled={chat.isSending}
-                        data-ai-input
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' && !e.shiftKey) {
-                                e.preventDefault()
-                                handleSubmit()
-                            }
-                        }}
-                    />
-                    <button
-                        type="submit"
-                        disabled={chat.isSending || !input.trim()}
-                        data-ai-send
-                    >
-                        {chat.isSending ? 'Sending…' : 'Send'}
-                    </button>
-                </form>
-            )}
-        </div>
-    )
-}

package/packages/react/src/components/GenerationCard.tsx

@@ -1,73 +0,0 @@
-// @geenius-ai/react — src/components/GenerationCard.tsx
-
-/**
- * Card displaying a generation result (text, image, audio, video).
- */
-
-import type { AIGenerationType } from '@geenius-ai/shared'
-
-export interface GenerationCardProps {
-    type: AIGenerationType
-    content: string
-    model?: string
-    durationMs?: number
-    tokens?: number
-    cost?: number
-    error?: string
-    className?: string
-}
-
-export function GenerationCard(props: GenerationCardProps) {
-    return (
-        <div className={props.className} data-ai-component="generation-card" data-ai-type={props.type}>
-            {/* Header */}
-            <div data-ai-card-header>
-                <span data-ai-card-type>{props.type}</span>
-                {props.model && <span data-ai-card-model>{props.model}</span>}
-                {props.durationMs != null && (
-                    <span data-ai-card-duration>{props.durationMs}ms</span>
-                )}
-            </div>
-
-            {/* Content */}
-            {props.error ? (
-                <div data-ai-card-error role="alert">{props.error}</div>
-            ) : (
-                <div data-ai-card-content>
-                    {props.type === 'image' ? (
-                        <img
-                            src={props.content.startsWith('http') ? props.content : `data:image/png;base64,${props.content}`}
-                            alt="AI Generated"
-                            data-ai-card-image
-                        />
-                    ) : props.type === 'audio' || props.type === 'speech' ? (
-                        <audio controls data-ai-card-audio>
-                            <source
-                                src={props.content.startsWith('http') ? props.content : `data:audio/mp3;base64,${props.content}`}
-                                type="audio/mp3"
-                            />
-                        </audio>
-                    ) : props.type === 'video' ? (
-                        <video controls data-ai-card-video>
-                            <source src={props.content} type="video/mp4" />
-                        </video>
-                    ) : (
-                        <pre data-ai-card-text>{props.content}</pre>
-                    )}
-                </div>
-            )}
-
-            {/* Footer */}
-            {(props.tokens || props.cost != null) && (
-                <div data-ai-card-footer>
-                    {props.tokens && <span data-ai-card-tokens>{props.tokens} tokens</span>}
-                    {props.cost != null && (
-                        <span data-ai-card-cost>
-                            ${props.cost < 0.01 ? props.cost.toFixed(4) : props.cost.toFixed(2)}
-                        </span>
-                    )}
-                </div>
-            )}
-        </div>
-    )
-}

package/packages/react/src/components/ImageGenerator.tsx

@@ -1,103 +0,0 @@
-// @geenius-ai/react — src/components/ImageGenerator.tsx
-
-/**
- * Image generation UI — prompt, model selector, gallery.
- */
-
-import { useState, type FormEvent } from 'react'
-import type { AIGenerationType } from '@geenius-ai/shared'
-import { useImageGeneration, type UseImageGenerationOptions } from '../hooks/useImageGeneration'
-
-export interface ImageGeneratorComponentProps extends UseImageGenerationOptions {
-    className?: string
-    availableModels?: string[]
-}
-
-export function ImageGenerator(props: ImageGeneratorComponentProps) {
-    const [prompt, setPrompt] = useState('')
-    const [selectedModel, setSelectedModel] = useState(props.defaultModel ?? '')
-    const [size, setSize] = useState('1024x1024')
-    const [quality, setQuality] = useState<'standard' | 'hd'>('standard')
-
-    const { generate, images, isGenerating, error, clearImages, clearError } = useImageGeneration(props)
-
-    const handleSubmit = async (e: FormEvent) => {
-        e.preventDefault()
-        if (!prompt.trim() || isGenerating) return
-        await generate(prompt.trim(), { model: selectedModel || undefined, size, quality })
-    }
-
-    return (
-        <div className={props.className} data-ai-component="image-generator">
-            <form onSubmit={handleSubmit} data-ai-image-form>
-                <div data-ai-field="prompt">
-                    <textarea
-                        value={prompt}
-                        onChange={(e) => setPrompt(e.target.value)}
-                        placeholder="Describe the image you want to create…"
-                        disabled={isGenerating}
-                        data-ai-input
-                    />
-                </div>
-
-                <div data-ai-image-options>
-                    {props.availableModels && (
-                        <select
-                            value={selectedModel}
-                            onChange={(e) => setSelectedModel(e.target.value)}
-                            disabled={isGenerating}
-                            data-ai-select
-                        >
-                            <option value="">Default model</option>
-                            {props.availableModels.map(m => (
-                                <option key={m} value={m}>{m}</option>
-                            ))}
-                        </select>
-                    )}
-
-                    <select value={size} onChange={(e) => setSize(e.target.value)} disabled={isGenerating} data-ai-select>
-                        <option value="1024x1024">1024×1024</option>
-                        <option value="1792x1024">1792×1024</option>
-                        <option value="1024x1792">1024×1792</option>
-                        <option value="512x512">512×512</option>
-                    </select>
-
-                    <select value={quality} onChange={(e) => setQuality(e.target.value as 'standard' | 'hd')} disabled={isGenerating} data-ai-select>
-                        <option value="standard">Standard</option>
-                        <option value="hd">HD</option>
-                    </select>
-                </div>
-
-                <div data-ai-actions>
-                    <button type="submit" disabled={isGenerating || !prompt.trim()} data-ai-submit>
-                        {isGenerating ? 'Generating…' : 'Generate Image'}
-                    </button>
-                    {images.length > 0 && (
-                        <button type="button" onClick={clearImages} data-ai-clear>Clear Gallery</button>
-                    )}
-                </div>
-            </form>
-
-            {error && (
-                <div data-ai-error role="alert">
-                    <span>{error}</span>
-                    <button onClick={clearError}>×</button>
-                </div>
-            )}
-
-            {images.length > 0 && (
-                <div data-ai-image-gallery>
-                    {images.map((img, i) => (
-                        <div key={i} data-ai-image-card>
-                            <img src={img.url} alt={img.prompt} data-ai-generated-image />
-                            <div data-ai-image-meta>
-                                <span data-ai-image-model>{img.model}</span>
-                                <span data-ai-image-time>{new Date(img.timestamp).toLocaleTimeString()}</span>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    )
-}

package/packages/react/src/components/ModelSelector.tsx

@@ -1,44 +0,0 @@
-// @geenius-ai/react — src/components/ModelSelector.tsx
-
-/**
- * Model selector dropdown / list.
- * Unstyled with data-* attributes.
- */
-
-import type { AIModel, AIProviderType } from '@geenius-ai/shared'
-
-export interface ModelSelectorProps {
-    models: AIModel[]
-    selectedModel?: string
-    onSelect: (modelId: string) => void
-    className?: string
-    filterProvider?: AIProviderType
-    showCost?: boolean
-    disabled?: boolean
-}
-
-export function ModelSelector(props: ModelSelectorProps) {
-    const filtered = props.filterProvider
-        ? props.models.filter(m => m.provider === props.filterProvider)
-        : props.models
-
-    const activeModels = filtered.filter(m => m.isActive)
-
-    return (
-        <select
-            className={props.className}
-            value={props.selectedModel ?? ''}
-            onChange={(e) => props.onSelect(e.target.value)}
-            disabled={props.disabled}
-            data-ai-component="model-selector"
-        >
-            <option value="" disabled>Select a model…</option>
-            {activeModels.map(model => (
-                <option key={model.id} value={model.id} data-ai-provider={model.provider}>
-                    {model.displayName ?? model.name}
-                    {props.showCost ? ` ($${model.inputCostPer1k}/$${model.outputCostPer1k}/1k)` : ''}
-                </option>
-            ))}
-        </select>
-    )
-}

package/packages/react/src/components/ModelTestRunner.tsx

@@ -1,148 +0,0 @@
-// @geenius-ai/react — src/components/ModelTestRunner.tsx
-
-/**
- * Multi-tab model test runner.
- * Extracted from ModelTestPage.tsx pattern found in 15+ apps.
- */
-
-import { useState, type FormEvent } from 'react'
-import type { AIGenerationType } from '@geenius-ai/shared'
-import { useModelTest, type UseModelTestOptions, type ModelTestResult } from '../hooks/useModelTest'
-
-export interface ModelTestRunnerProps extends UseModelTestOptions {
-    className?: string
-    availableModels?: string[]
-    defaultTab?: AIGenerationType
-    renderResult?: (result: ModelTestResult) => React.ReactNode
-}
-
-const TABS: { id: AIGenerationType; label: string }[] = [
-    { id: 'text', label: 'Text Generation' },
-    { id: 'image', label: 'Image Generation' },
-    { id: 'audio', label: 'Text-to-Speech' },
-    { id: 'transcription', label: 'Audio-to-Text' },
-    { id: 'video', label: 'Video Generation' },
-]
-
-export function ModelTestRunner(props: ModelTestRunnerProps) {
-    const [activeTab, setActiveTab] = useState<AIGenerationType>(props.defaultTab ?? 'text')
-    const [prompt, setPrompt] = useState('')
-    const [selectedModel, setSelectedModel] = useState('')
-    const [batchMode, setBatchMode] = useState(false)
-
-    const test = useModelTest(props)
-
-    const handleSubmit = async (e: FormEvent) => {
-        e.preventDefault()
-        if (!prompt.trim()) return
-
-        if (batchMode && props.availableModels) {
-            await test.runBatchTest(props.availableModels, prompt.trim())
-        } else if (selectedModel) {
-            await test.runTest(selectedModel, prompt.trim(), activeTab)
-        }
-    }
-
-    return (
-        <div className={props.className} data-ai-component="model-test-runner">
-            {/* Tabs */}
-            <div data-ai-tabs role="tablist">
-                {TABS.map(tab => (
-                    <button
-                        key={tab.id}
-                        role="tab"
-                        aria-selected={activeTab === tab.id}
-                        onClick={() => setActiveTab(tab.id)}
-                        data-ai-tab
-                        data-ai-tab-active={activeTab === tab.id ? '' : undefined}
-                    >
-                        {tab.label}
-                    </button>
-                ))}
-            </div>
-
-            {/* Form */}
-            <form onSubmit={handleSubmit} data-ai-test-form>
-                <div data-ai-field="model">
-                    <label htmlFor="test-model">Model</label>
-                    <select
-                        id="test-model"
-                        value={selectedModel}
-                        onChange={(e) => setSelectedModel(e.target.value)}
-                        disabled={test.isRunning || batchMode}
-                        data-ai-input
-                    >
-                        <option value="">Select model…</option>
-                        {(props.availableModels ?? []).map(m => (
-                            <option key={m} value={m}>{m}</option>
-                        ))}
-                    </select>
-                </div>
-
-                <div data-ai-field="prompt">
-                    <label htmlFor="test-prompt">Prompt</label>
-                    <textarea
-                        id="test-prompt"
-                        value={prompt}
-                        onChange={(e) => setPrompt(e.target.value)}
-                        placeholder="Enter your test prompt…"
-                        disabled={test.isRunning}
-                        data-ai-input
-                    />
-                </div>
-
-                <div data-ai-actions>
-                    <label data-ai-toggle>
-                        <input
-                            type="checkbox"
-                            checked={batchMode}
-                            onChange={(e) => setBatchMode(e.target.checked)}
-                            disabled={test.isRunning}
-                        />
-                        Test all models
-                    </label>
-                    <button type="submit" disabled={test.isRunning || !prompt.trim()} data-ai-submit>
-                        {test.isRunning ? 'Running…' : (batchMode ? 'Run All' : 'Run Test')}
-                    </button>
-                    {test.results.length > 0 && (
-                        <button type="button" onClick={test.clearResults} data-ai-clear>
-                            Clear Results
-                        </button>
-                    )}
-                </div>
-            </form>
-
-            {/* Results */}
-            {test.results.length > 0 && (
-                <div data-ai-test-results>
-                    {test.results.map((result, i) => (
-                        props.renderResult ? props.renderResult(result) : (
-                            <div key={i} data-ai-test-result data-ai-status={result.error ? 'error' : 'success'}>
-                                <div data-ai-result-header>
-                                    <span data-ai-result-model>{result.model}</span>
-                                    <span data-ai-result-duration>{result.durationMs}ms</span>
-                                    {result.error && (
-                                        <span data-ai-result-error>{result.error}</span>
-                                    )}
-                                </div>
-                                {!result.error && (
-                                    <div data-ai-result-content>
-                                        {result.type === 'image' ? (
-                                            <img
-                                                src={result.result.startsWith('http') ? result.result : `data:image/png;base64,${result.result}`}
-                                                alt="Generated"
-                                                data-ai-result-image
-                                            />
-                                        ) : (
-                                            <pre data-ai-result-text>{result.result}</pre>
-                                        )}
-                                    </div>
-                                )}
-                            </div>
-                        )
-                    ))}
-                </div>
-            )}
-        </div>
-    )
-}