@geenius/ai 0.1.0

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

@@ -0,0 +1,119 @@
+// @geenius-ai/react — src/hooks/useTranscription.ts
+
+/**
+ * Audio transcription hook (Whisper, Groq ASR, etc.)
+ */
+
+import { useState, useCallback, useRef } from 'react'
+import { useAction } from 'convex/react'
+
+export interface TranscriptionResult {
+    text: string
+    timestamp: number
+    durationMs: number
+}
+
+export interface UseTranscriptionOptions {
+    transcribeAction: any
+    defaultModel?: string
+    /** Enable browser microphone recording */
+    enableMicrophone?: boolean
+}
+
+export interface UseTranscriptionReturn {
+    transcribe: (audioBase64: string, options?: {
+        model?: string
+        language?: string
+        prompt?: string
+    }) => Promise<string>
+    startRecording: () => Promise<void>
+    stopRecording: () => Promise<string>
+    isTranscribing: boolean
+    isRecording: boolean
+    lastResult: TranscriptionResult | null
+    error: string | null
+    clearError: () => void
+}
+
+export function useTranscription(options: UseTranscriptionOptions): UseTranscriptionReturn {
+    const [isTranscribing, setIsTranscribing] = useState(false)
+    const [isRecording, setIsRecording] = useState(false)
+    const [lastResult, setLastResult] = useState<TranscriptionResult | null>(null)
+    const [error, setError] = useState<string | null>(null)
+    const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+    const chunksRef = useRef<Blob[]>([])
+    const action = useAction(options.transcribeAction)
+
+    const transcribe = useCallback(async (audioBase64: string, opts?: {
+        model?: string; language?: string; prompt?: string
+    }) => {
+        setIsTranscribing(true)
+        setError(null)
+        const start = Date.now()
+        try {
+            const text = await action({
+                audio: audioBase64,
+                model: opts?.model ?? options.defaultModel,
+                language: opts?.language,
+                prompt: opts?.prompt,
+            })
+            setLastResult({ text, timestamp: Date.now(), durationMs: Date.now() - start })
+            return text
+        } catch (err) {
+            const msg = err instanceof Error ? err.message : 'Transcription failed'
+            setError(msg)
+            throw err
+        } finally {
+            setIsTranscribing(false)
+        }
+    }, [action, options.defaultModel])
+
+    const startRecording = useCallback(async () => {
+        if (!options.enableMicrophone) throw new Error('Microphone not enabled')
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+        const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
+        chunksRef.current = []
+        mediaRecorder.ondataavailable = (e) => {
+            if (e.data.size > 0) chunksRef.current.push(e.data)
+        }
+        mediaRecorder.start()
+        mediaRecorderRef.current = mediaRecorder
+        setIsRecording(true)
+    }, [options.enableMicrophone])
+
+    const stopRecording = useCallback(async () => {
+        return new Promise<string>((resolve, reject) => {
+            const recorder = mediaRecorderRef.current
+            if (!recorder) { reject(new Error('Not recording')); return }
+
+            recorder.onstop = async () => {
+                setIsRecording(false)
+                const blob = new Blob(chunksRef.current, { type: 'audio/webm' })
+                const arrayBuffer = await blob.arrayBuffer()
+                const bytes = new Uint8Array(arrayBuffer)
+                let binary = ''
+                for (let i = 0; i < bytes.length; i++) {
+                    binary += String.fromCharCode(bytes[i]!)
+                }
+                const base64 = btoa(binary)
+
+                // Stop all tracks
+                recorder.stream.getTracks().forEach(t => t.stop())
+
+                try {
+                    const text = await transcribe(base64)
+                    resolve(text)
+                } catch (err) {
+                    reject(err)
+                }
+            }
+            recorder.stop()
+        })
+    }, [transcribe])
+
+    return {
+        transcribe, startRecording, stopRecording,
+        isTranscribing, isRecording, lastResult, error,
+        clearError: () => setError(null),
+    }
+}

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

@@ -0,0 +1,79 @@
+// @geenius-ai/react — src/hooks/useVideoGeneration.ts
+
+/**
+ * Video generation hook (Replicate, Fal, etc.)
+ */
+
+import { useState, useCallback } from 'react'
+import { useAction } from 'convex/react'
+
+export interface GeneratedVideo {
+    url: string
+    prompt: string
+    model: string
+    timestamp: number
+}
+
+export interface UseVideoGenerationOptions {
+    generateVideoAction: any
+    defaultModel?: string
+}
+
+export interface UseVideoGenerationReturn {
+    generate: (prompt: string, options?: {
+        model?: string
+        duration?: number
+        aspectRatio?: '16:9' | '9:16' | '1:1'
+        resolution?: '720p' | '1080p' | '4k'
+        startImage?: string
+        endImage?: string
+    }) => Promise<string>
+    videos: GeneratedVideo[]
+    isGenerating: boolean
+    error: string | null
+    clearVideos: () => void
+    clearError: () => void
+}
+
+export function useVideoGeneration(options: UseVideoGenerationOptions): UseVideoGenerationReturn {
+    const [videos, setVideos] = useState<GeneratedVideo[]>([])
+    const [isGenerating, setIsGenerating] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const action = useAction(options.generateVideoAction)
+
+    const generate = useCallback(async (prompt: string, opts?: {
+        model?: string; duration?: number
+        aspectRatio?: '16:9' | '9:16' | '1:1'
+        resolution?: '720p' | '1080p' | '4k'
+        startImage?: string; endImage?: string
+    }) => {
+        setIsGenerating(true)
+        setError(null)
+        try {
+            const model = opts?.model ?? options.defaultModel ?? 'minimax/video-01'
+            const result = await action({
+                prompt, model,
+                duration: opts?.duration,
+                aspectRatio: opts?.aspectRatio,
+                resolution: opts?.resolution,
+                startImage: opts?.startImage,
+                endImage: opts?.endImage,
+            })
+            const vid: GeneratedVideo = { url: result, prompt, model, timestamp: Date.now() }
+            setVideos(prev => [vid, ...prev])
+            return result
+        } catch (err) {
+            const msg = err instanceof Error ? err.message : 'Video generation failed'
+            setError(msg)
+            throw err
+        } finally {
+            setIsGenerating(false)
+        }
+    }, [action, options.defaultModel])
+
+    return {
+        generate, videos, isGenerating, error,
+        clearVideos: () => setVideos([]),
+        clearError: () => setError(null),
+    }
+}

package/packages/react/src/index.ts

@@ -0,0 +1,42 @@
+// @geenius-ai/react — src/index.ts
+
+/**
+ * @geenius-ai/react
+ *
+ * React hooks, headless components, and page compositions for AI-powered
+ * Convex applications. All components are unstyled with data-* attributes
+ * for easy CSS targeting.
+ */
+
+// Hooks — Core
+export { useAI, type UseAIOptions, type UseAIReturn } from './hooks/useAI'
+export { useChat, type UseChatOptions, type UseChatReturn } from './hooks/useChat'
+export { useAILogs, type UseAILogsOptions, type UseAILogsReturn } from './hooks/useAILogs'
+export { useModelTest, type UseModelTestOptions, type UseModelTestReturn, type ModelTestResult } from './hooks/useModelTest'
+export { useAIModels, type UseAIModelsOptions, type UseAIModelsReturn } from './hooks/useAIModels'
+
+// Hooks — Multi-modal
+export { useImageGeneration, type UseImageGenerationOptions, type UseImageGenerationReturn, type GeneratedImage } from './hooks/useImageGeneration'
+export { useTextToSpeech, type UseTextToSpeechOptions, type UseTextToSpeechReturn } from './hooks/useTextToSpeech'
+export { useVideoGeneration, type UseVideoGenerationOptions, type UseVideoGenerationReturn, type GeneratedVideo } from './hooks/useVideoGeneration'
+export { useTranscription, type UseTranscriptionOptions, type UseTranscriptionReturn, type TranscriptionResult } from './hooks/useTranscription'
+export { useRealtimeAudio, type UseRealtimeAudioOptions, type UseRealtimeAudioReturn } from './hooks/useRealtimeAudio'
+
+// Hooks — Content, Memory, Skills
+export { useContentManager, type UseContentManagerOptions, type UseContentManagerReturn } from './hooks/useContentManager'
+export { useMemory, type UseMemoryOptions, type UseMemoryReturn } from './hooks/useMemory'
+export { useSkills, type UseSkillsOptions, type UseSkillsReturn } from './hooks/useSkills'
+
+// Components
+export { ChatWindow, type ChatWindowComponentProps } from './components/ChatWindow'
+export { ModelSelector, type ModelSelectorProps } from './components/ModelSelector'
+export { AILogTable, type AILogTableComponentProps } from './components/AILogTable'
+export { ModelTestRunner, type ModelTestRunnerProps } from './components/ModelTestRunner'
+export { GenerationCard, type GenerationCardProps } from './components/GenerationCard'
+export { ImageGenerator, type ImageGeneratorComponentProps } from './components/ImageGenerator'
+export { VoiceSelector, type VoiceSelectorComponentProps } from './components/VoiceSelector'
+
+// Pages
+export { ChatPage, type ChatPageProps } from './pages/ChatPage'
+export { ModelTestPage, type ModelTestPageProps } from './pages/ModelTestPage'
+export { AILogsPage, type AILogsPageProps } from './pages/AILogsPage'

package/packages/react/src/pages/AILogsPage.tsx

@@ -0,0 +1,98 @@
+// @geenius-ai/react — src/pages/AILogsPage.tsx
+
+/**
+ * AI logs dashboard page with stats and log table.
+ */
+
+import { useState } from 'react'
+import { AILogTable } from '../components/AILogTable'
+import { useAILogs, type UseAILogsOptions } from '../hooks/useAILogs'
+import type { AIRequestStatus, AILogEntry } from '@geenius-ai/shared'
+
+export interface AILogsPageProps {
+    /** Query reference: api.ai.listLogs */
+    listLogsQuery: any
+    className?: string
+    title?: string
+    onRowClick?: (log: AILogEntry) => void
+}
+
+export function AILogsPage(props: AILogsPageProps) {
+    const [modelFilter, setModelFilter] = useState('')
+    const [statusFilter, setStatusFilter] = useState<AIRequestStatus | ''>('')
+
+    const { logs, isLoading } = useAILogs({
+        listLogsQuery: props.listLogsQuery,
+        filters: {
+            model: modelFilter || undefined,
+            status: (statusFilter || undefined) as AIRequestStatus | undefined,
+        },
+        limit: 100,
+    })
+
+    // Calculate quick stats
+    const totalCalls = logs.length
+    const successCalls = logs.filter(l => l.status === 'success').length
+    const errorCalls = totalCalls - successCalls
+    const totalCost = logs.reduce((sum, l) => sum + (l.totalCostUsd ?? 0), 0)
+    const totalTokens = logs.reduce((sum, l) => sum + (l.totalTokens ?? 0), 0)
+
+    return (
+        <div className={props.className} data-ai-page="logs">
+            <div data-ai-page-header>
+                <h1 data-ai-page-title>{props.title ?? 'AI Logs'}</h1>
+            </div>
+
+            {/* Stats cards */}
+            <div data-ai-stats-grid>
+                <div data-ai-stat>
+                    <span data-ai-stat-label>Total Calls</span>
+                    <span data-ai-stat-value>{totalCalls}</span>
+                </div>
+                <div data-ai-stat data-ai-status="success">
+                    <span data-ai-stat-label>Success</span>
+                    <span data-ai-stat-value>{successCalls}</span>
+                </div>
+                <div data-ai-stat data-ai-status="error">
+                    <span data-ai-stat-label>Errors</span>
+                    <span data-ai-stat-value>{errorCalls}</span>
+                </div>
+                <div data-ai-stat>
+                    <span data-ai-stat-label>Total Cost</span>
+                    <span data-ai-stat-value>${totalCost.toFixed(2)}</span>
+                </div>
+                <div data-ai-stat>
+                    <span data-ai-stat-label>Total Tokens</span>
+                    <span data-ai-stat-value>{totalTokens.toLocaleString()}</span>
+                </div>
+            </div>
+
+            {/* Filters */}
+            <div data-ai-filters>
+                <input
+                    type="text"
+                    placeholder="Filter by model…"
+                    value={modelFilter}
+                    onChange={(e) => setModelFilter(e.target.value)}
+                    data-ai-filter-input
+                />
+                <select
+                    value={statusFilter}
+                    onChange={(e) => setStatusFilter(e.target.value as AIRequestStatus | '')}
+                    data-ai-filter-select
+                >
+                    <option value="">All statuses</option>
+                    <option value="success">Success</option>
+                    <option value="error">Error</option>
+                </select>
+            </div>
+
+            {/* Log table */}
+            <AILogTable
+                logs={logs}
+                isLoading={isLoading}
+                onRowClick={props.onRowClick}
+            />
+        </div>
+    )
+}

package/packages/react/src/pages/ChatPage.tsx

@@ -0,0 +1,42 @@
+// @geenius-ai/react — src/pages/ChatPage.tsx
+
+/**
+ * Full chatbot page — sidebar + conversation.
+ * Compose with your own layout and styling.
+ */
+
+import { useState } from 'react'
+import { ChatWindow, type ChatWindowComponentProps } from '../components/ChatWindow'
+
+export interface ChatPageProps extends Omit<ChatWindowComponentProps, 'conversationId'> {
+    className?: string
+    /** Initial conversation ID */
+    conversationId?: string
+}
+
+export function ChatPage(props: ChatPageProps) {
+    const [activeConversationId, setActiveConversationId] = useState<string | undefined>(props.conversationId)
+
+    return (
+        <div className={props.className} data-ai-page="chat">
+            <div data-ai-page-header>
+                <h1 data-ai-page-title>AI Chat</h1>
+                <button
+                    onClick={() => setActiveConversationId(undefined)}
+                    data-ai-new-chat
+                >
+                    New Chat
+                </button>
+            </div>
+
+            <ChatWindow
+                {...props}
+                conversationId={activeConversationId}
+                onNewConversation={(id) => {
+                    setActiveConversationId(id)
+                    props.onNewConversation?.(id)
+                }}
+            />
+        </div>
+    )
+}

package/packages/react/src/pages/ModelTestPage.tsx

@@ -0,0 +1,33 @@
+// @geenius-ai/react — src/pages/ModelTestPage.tsx
+
+/**
+ * Model test page — extracted from the pattern used in 15+ apps.
+ */
+
+import { ModelTestRunner, type ModelTestRunnerProps } from '../components/ModelTestRunner'
+import { DEFAULT_MODELS } from '@geenius-ai/shared'
+import type { AIGenerationType } from '@geenius-ai/shared'
+
+export interface ModelTestPageProps extends ModelTestRunnerProps {
+    title?: string
+}
+
+export function ModelTestPage(props: ModelTestPageProps) {
+    const models = props.availableModels ?? DEFAULT_MODELS.map(m => m.id)
+
+    return (
+        <div className={props.className} data-ai-page="model-test">
+            <div data-ai-page-header>
+                <h1 data-ai-page-title>{props.title ?? 'Model Test Lab'}</h1>
+                <p data-ai-page-subtitle>
+                    Test AI models individually or compare them side-by-side
+                </p>
+            </div>
+
+            <ModelTestRunner
+                {...props}
+                availableModels={models}
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,5 @@
+// @geenius-ai/react — src/pages/index.ts
+
+export { ChatPage, type ChatPageProps } from './ChatPage'
+export { ModelTestPage, type ModelTestPageProps } from './ModelTestPage'
+export { AILogsPage, type AILogsPageProps } from './AILogsPage'

package/packages/react/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

package/packages/react/tsup.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: {
+        index: 'src/index.ts',
+        'hooks/index': 'src/hooks/index.ts',
+        'components/index': 'src/components/index.ts',
+        'pages/index': 'src/pages/index.ts',
+    },
+    format: ['esm'],
+    dts: true,
+    clean: true,
+    sourcemap: true,
+    jsx: 'automatic',
+    external: [
+        'react',
+        'react-dom',
+        'convex',
+        'convex/react',
+        '@geenius-ai/shared',
+    ],
+})

package/packages/react-css/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-ai/react-css\n\n> Geenius AI — React hooks and components (vanilla CSS variant)\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-ai/react-css\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-ai/react-css';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/react-css/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@geenius-ai/react-css",
+  "version": "0.1.0",
+  "description": "Geenius AI — React hooks and components (vanilla CSS variant)",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@geenius-ai/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "~6.0.2"
+  },
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}