Create standalone browser port of LTX Athena with authenticated native API transport

2026-09-29 17:59:23 +02:00
commit 1333b0c36b
202 changed files with 63054 additions and 0 deletions
@@ -0,0 +1,81 @@
+import { useState, useEffect, useRef } from 'react'
+import { X } from 'lucide-react'
+
+const SHOW_DELAY_MS = 2500
+
+// Module-level flag — resets on each app launch (page reload)
+let dismissedThisSession = false
+
+export function FreeApiKeyBubble({
+  forceApiGenerations,
+  hasLtxApiKey,
+  isGenerating,
+}: {
+  forceApiGenerations: boolean
+  hasLtxApiKey: boolean
+  isGenerating: boolean
+}) {
+  const [dismissed, setDismissed] = useState(() => dismissedThisSession)
+  const [visible, setVisible] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (isGenerating && !dismissed && !forceApiGenerations && !hasLtxApiKey) {
+      timerRef.current = setTimeout(() => setVisible(true), SHOW_DELAY_MS)
+    } else {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      timerRef.current = null
+      setVisible(false)
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [isGenerating, dismissed, forceApiGenerations, hasLtxApiKey])
+
+  if (!visible) return null
+
+  const handleDismiss = () => {
+    dismissedThisSession = true
+    setDismissed(true)
+  }
+
+  const handleGoToSettings = () => {
+    window.dispatchEvent(
+      new CustomEvent('open-settings', { detail: { tab: 'apiKeys' } }),
+    )
+  }
+
+  return (
+    <div
+      className="mb-2 rounded-xl bg-zinc-900/90 backdrop-blur-sm border border-zinc-700/50 px-4 py-3 text-sm text-zinc-200"
+      style={{ animation: 'fadeInUp 0.3s ease-out' }}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex-1 min-w-0">
+          <p>
+            Speed up inference and save memory with free cloud text encoding and
+            prompt enhancement.{' '}
+            <button
+              onClick={handleGoToSettings}
+              className="text-blue-400 hover:text-blue-300 underline underline-offset-2 transition-colors"
+            >
+              Get a free LTX API key
+            </button>{' '}
+            to enable it.
+          </p>
+          <p className="mt-1 text-xs text-zinc-400">
+            The free API key covers text encoding and prompt enhancement only.
+            Video generation via API requires a paid plan.
+          </p>
+        </div>
+        <button
+          onClick={handleDismiss}
+          className="shrink-0 p-0.5 rounded hover:bg-zinc-700/60 text-zinc-400 hover:text-zinc-200 transition-colors"
+          aria-label="Dismiss"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  )
+}