// chatflix-ui.jsx — original Chatflix product UI primitives // Brand mark: public/logos/chatflix-final-logo.png const { useState, useEffect, useRef } = React; // ─── Brand mark (logo asset) ─────────────────────────────────── function CMark({ size = 36, radius: _r }) { const aspect = 1; const w = Math.round(size * aspect); return ( Chatflix ); } // ─── Routing badge "Chatflix Auto" ─────────────────────────────── function AutoBadge({ subtitle = '1.0' }) { return (
A Chatflix Auto · {subtitle}
); } // ─── Model pill (monospace, neutral) ───────────────────────────── function ModelPill({ name, dim = false, glow = false, iconSrc, className }) { return (
{iconSrc ? ( ) : ( )} {name}
); } // The "20+ models" pool — neutral monospace IDs only const MODEL_NAMES = [ 'claude-opus-4.7', 'claude-sonnet-4.6', 'gpt-5.4', 'gpt-5-mini', 'gemini-3.1-pro', 'gemini-flash', 'grok-4', 'mistral-large', 'deepseek-v4', 'perplexity-sonar', 'qwen-3-max', 'kimi-k3', 'llama-4', 'command-r+', 'phi-4', 'jamba-1.7' ]; // ─── Composer (the input bar w/ Auto badge) ────────────────────── function Composer({ value = '', placeholder = 'Pose ta question…', autoLabel, ghostText = '' }) { return (
{value || placeholder} {ghostText && {ghostText}} {value && }
); } const iconBtn = { width: 28, height: 28, borderRadius: 999, background: 'transparent', border: 'none', color: '#8A8A95', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', }; // ─── Model row (the cascade under the composer) ────────────────── function ModelRow({ models, glowIndex = -1 }) { return (
{models.map((m, i) =>
= 0 && i !== glowIndex} glow={i === glowIndex} />
)}
); } // ─── Maquette produit (hero) — rail d’icônes étroit ───────────── function MockRailIcon({ children }) { return ( {children} ); } function MockIconRail() { const items = [ <>, // search <>, // edit <>, // chat <>, // terminal-ish <>, // video <>, // folder <>, // phone <>, // music ]; return (
{items.map((paths, i) => ( ))}
TA
); } // ─── Maquette — champ unique type « pilule » ───────────────────── function MockPillComposer() { return (
Écris ton message ici...
); } // ─── Maquette — bande de logos modèles (style grayscale, tuck scroll) ─ function MockModelLogoStrip({ models, glowIndex = -1 }) { return (
{models.map((name, i) =>
= 0 && i !== glowIndex ? 'grayscale(1) opacity(0.55)' : 'grayscale(0.85)', transition: 'all 420ms ease', whiteSpace: 'nowrap', }}>{name}
)}
); } function MockCategoryChips() { const cats = [ { label: 'Apprendre', d: 'M22 10v6M2 10l10-5 10 5-10 5z M6 12v5c3 3 9 3 12 0v-5' }, { label: 'Stratégie', d: 'M3 3v18h18 M9 9l12-6M9 9v12M9 9H3' }, { label: 'Écrire', d: 'M12 19l7-7 3 3-7 7-3-3z M18 13l-6-6a2.828 2.828 0 00-4 4l6 6' }, { label: 'Vie quotidienne', d: 'M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z M6 1v3M10 1v3M14 1v3' }, ]; return (
{cats.map((c) => ( ))}
); } // ─── Sidebar (mini) ────────────────────────────────────────────── function Sidebar() { const items = [ { label: 'Chat', active: true }, { label: 'Image' }, { label: 'Vidéo' }, { label: 'Code' }, { label: 'Voix' }, { label: 'Groupes' }, ]; return (
Chatflix
{items.map(it => (
{it.label}
))}
Plan Pro
Mémoire active · 47 facts
); } // ─── Reveal-on-scroll wrapper ──────────────────────────────────── function Reveal({ children, delay = 0, stagger = false, as = 'div', className = '', style = {} }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); io.unobserve(el); } }, { threshold: 0.15, rootMargin: '0px 0px -80px 0px' }); io.observe(el); return () => io.disconnect(); }, [delay]); const cls = (stagger ? 'reveal-stagger ' : 'reveal ') + className; const Tag = as; return {children}; } Object.assign(window, { CMark, AutoBadge, ModelPill, Composer, ModelRow, Sidebar, MockIconRail, MockPillComposer, MockModelLogoStrip, MockCategoryChips, Reveal, MODEL_NAMES, iconBtn, });