@geenius/ai 0.1.0

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

@@ -0,0 +1,90 @@
+// @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

@@ -0,0 +1,118 @@
+// @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

@@ -0,0 +1,73 @@
+// @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

@@ -0,0 +1,103 @@
+// @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

@@ -0,0 +1,44 @@
+// @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

@@ -0,0 +1,148 @@
+// @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>
+    )
+}

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

@@ -0,0 +1,51 @@
+// @geenius-ai/react — src/components/VoiceSelector.tsx
+
+/**
+ * Voice selector for TTS — works with OpenAI and ElevenLabs voices.
+ */
+
+import type { AIVoiceOption } from '@geenius-ai/shared'
+
+export interface VoiceSelectorComponentProps {
+    voices: AIVoiceOption[]
+    selectedVoice?: string
+    onSelect: (voiceId: string) => void
+    className?: string
+    disabled?: boolean
+    showProvider?: boolean
+    showPreview?: boolean
+    onPreview?: (voiceId: string) => void
+}
+
+export function VoiceSelector(props: VoiceSelectorComponentProps) {
+    return (
+        <div className={props.className} data-ai-component="voice-selector">
+            {props.voices.map(voice => (
+                <button
+                    key={voice.id}
+                    onClick={() => props.onSelect(voice.id)}
+                    disabled={props.disabled}
+                    data-ai-voice
+                    data-ai-voice-selected={props.selectedVoice === voice.id ? '' : undefined}
+                    data-ai-provider={voice.provider}
+                >
+                    <span data-ai-voice-name>{voice.name}</span>
+                    {voice.gender && <span data-ai-voice-gender>{voice.gender}</span>}
+                    {voice.language && <span data-ai-voice-language>{voice.language}</span>}
+                    {props.showProvider && <span data-ai-voice-provider>{voice.provider}</span>}
+                    {props.showPreview && voice.preview && (
+                        <button
+                            data-ai-voice-preview
+                            onClick={(e) => {
+                                e.stopPropagation()
+                                props.onPreview?.(voice.id)
+                            }}
+                        >
+                            ▶
+                        </button>
+                    )}
+                </button>
+            ))}
+        </div>
+    )
+}

package/packages/react/src/components/index.ts

@@ -0,0 +1,9 @@
+// @geenius-ai/react — src/components/index.ts
+
+export { ChatWindow, type ChatWindowComponentProps } from './ChatWindow'
+export { ModelSelector, type ModelSelectorProps } from './ModelSelector'
+export { AILogTable, type AILogTableComponentProps } from './AILogTable'
+export { ModelTestRunner, type ModelTestRunnerProps } from './ModelTestRunner'
+export { GenerationCard, type GenerationCardProps } from './GenerationCard'
+export { ImageGenerator, type ImageGeneratorComponentProps } from './ImageGenerator'
+export { VoiceSelector, type VoiceSelectorComponentProps } from './VoiceSelector'

package/packages/react/src/hooks/index.ts

@@ -0,0 +1,12 @@
+// @geenius-ai/react — src/hooks/index.ts
+
+export { useAI, type UseAIOptions, type UseAIReturn } from './useAI'
+export { useChat, type UseChatOptions, type UseChatReturn } from './useChat'
+export { useAILogs, type UseAILogsOptions, type UseAILogsReturn } from './useAILogs'
+export { useModelTest, type UseModelTestOptions, type UseModelTestReturn, type ModelTestResult } from './useModelTest'
+export { useAIModels, type UseAIModelsOptions, type UseAIModelsReturn } from './useAIModels'
+export { useImageGeneration, type UseImageGenerationOptions, type UseImageGenerationReturn, type GeneratedImage } from './useImageGeneration'
+export { useTextToSpeech, type UseTextToSpeechOptions, type UseTextToSpeechReturn } from './useTextToSpeech'
+export { useVideoGeneration, type UseVideoGenerationOptions, type UseVideoGenerationReturn, type GeneratedVideo } from './useVideoGeneration'
+export { useTranscription, type UseTranscriptionOptions, type UseTranscriptionReturn, type TranscriptionResult } from './useTranscription'
+export { useRealtimeAudio, type UseRealtimeAudioOptions, type UseRealtimeAudioReturn } from './useRealtimeAudio'