// ===================================================================== // OYC AI Studio — Front-end v2 // // Lives at /v2. Shares backend (auth, plugins, chat) with v1 at /. // v1.0 of v2 ships the redesigned dashboard only. Click-through behavior // (Work with X) hands off to v1's chat for now (/?nav=chat-{plugin-id}); // future iterations will ship a v2 chat view. // ===================================================================== const { useState, useEffect, useRef } = React; const ASSETS = '/public/assets/figma-redesign'; const APP_NAME = (typeof STUDIO_CONFIG !== 'undefined' && STUDIO_CONFIG.appName) || 'OYC AI Studio'; // --------------------------------------------------------------------- // Plugin visual mapping // --------------------------------------------------------------------- // API returns id, name, emoji, description, etc. — the *visual* treatment // (which photo layers to stack, badge color, role copy) lives here. // Keyed by plugin id from plugins/registry.json. const PLUGIN_VISUALS = { 'jed-pov-writer': { firstName: 'Jed', role: 'The AI Category POV Writer', category: 'Strategy', avatar: 'margaret' }, 'kendrick-mic-drop': { firstName: 'Kendrick', role: 'The Mic Drop POV Writer', category: 'Strategy', avatar: 'kendrick' }, 'molly-concepts': { firstName: 'Molly', role: 'The Category Concepts Creator', category: 'Strategy', avatar: 'molly' }, 'philip-k-messaging': { firstName: 'Philip K', role: 'The North Star Messaging Creator', category: 'Messaging', avatar: 'philip' }, 'ray-north-star-map': { firstName: 'Ray', role: 'The North Star Map Writer', category: 'Messaging', avatar: 'ray' }, 'steven-p-canvas-coach':{ firstName: 'Steven P', role: 'The Category Canvas Coach', category: 'Strategy', avatar: 'steven' }, }; const AVATAR_LAYER_PRESETS = { backdropWide: layer('avatar-image-1235.png', 213, 142, '-42px', '50%', 'translateY(-50%)'), backdropMid: layer('avatar-image-1237.png', 153, 102, 'calc(50% + 2.5px)', '50%', 'translate(-50%, -50%)'), baseFace: layer('avatar-image-1246.png', 128, 128, '50%', '50%', 'translate(-50%, -50%)'), topHair: layer('avatar-image-1247.png', 147, 147, 'calc(50% + 3.5px)', '-38px', 'translateX(-50%)'), }; const AVATAR_LAYERS = { steven: [ AVATAR_LAYER_PRESETS.backdropWide, AVATAR_LAYER_PRESETS.backdropMid, AVATAR_LAYER_PRESETS.baseFace, AVATAR_LAYER_PRESETS.topHair, ], kendrick: [ AVATAR_LAYER_PRESETS.backdropWide, AVATAR_LAYER_PRESETS.backdropMid, AVATAR_LAYER_PRESETS.baseFace, layer('avatar-image-1254.png', 182, 182, 'calc(50% + 4px)', 'calc(50% - 3px)', 'translate(-50%, -50%)'), layer('avatar-image-1258.png', 128, 128, '50%', 'calc(50% - 7px)', 'translate(-50%, -50%)'), layer('avatar-image-1259.png', 142, 142, '50%', 'calc(50% + 8px)', 'translate(-50%, -50%)'), ], molly: [ layer('avatar-image-1265.png', 191, 191, 'calc(50% - 0.5px)', 'calc(50% + 9.5px)', 'translate(-50%, -50%)'), layer('avatar-image-1266.png', 106, 106, '50%', 'calc(50% - 5px)', 'translate(-50%, -50%)'), ], ray: [ layer('avatar-image-1263.png', 158, 158, '50%', '50%', 'translate(-50%, -50%)'), ], philip: [ AVATAR_LAYER_PRESETS.backdropWide, AVATAR_LAYER_PRESETS.backdropMid, layer('avatar-image-1246.png', 140, 140, 'calc(50% - 4px)', 'calc(50% + 6px)', 'translate(-50%, -50%)'), ], margaret: [ AVATAR_LAYER_PRESETS.backdropWide, AVATAR_LAYER_PRESETS.backdropMid, AVATAR_LAYER_PRESETS.baseFace, AVATAR_LAYER_PRESETS.topHair, layer('avatar-image-1257.png', 154, 154, 'calc(50% + 2px)', 'calc(50% - 13px)', 'translate(-50%, -50%)'), ], }; function layer(image, width, height, left, top, transform) { return { image, width, height, left, top, transform }; } // Mirrors v1's MILESTONE_DEFS — keep in sync if v1 changes. const MILESTONE_DEFS = [ { id: 'first-message', emoji: '🌱', name: 'First Message', description: 'Sent your first message' }, { id: 'chatterbox', emoji: '💬', name: 'Chatterbox', description: 'Sent 50 messages' }, { id: 'power-user', emoji: '🔥', name: 'Power User', description: 'Sent 100 messages' }, { id: 'super-user', emoji: '⚡', name: 'Super User', description: 'Sent 500 messages' }, { id: 'legend', emoji: '🏆', name: 'Legend', description: 'Sent 1,000 messages' }, { id: 'explorer', emoji: '🧭', name: 'Explorer', description: 'Used 3 different tools' }, { id: 'trailblazer', emoji: '🌍', name: 'Trailblazer', description: 'Used every available tool' }, { id: 'consistent', emoji: '📅', name: 'Consistent', description: '7-day activity streak' }, { id: 'on-fire', emoji: '🔥', name: 'On Fire', description: '30-day activity streak' }, ]; // --------------------------------------------------------------------- // Cohort 2 unlock schedule (Pacific Time) // --------------------------------------------------------------------- // Modules and tools unlock on date boundaries in Pacific Time. Admins // bypass all gating. Anything not in these maps is treated as unlocked. // Date format: ISO with -07:00 (PT, daylight saving) at 00:00 = midnight // at the start of the unlock day. const TOOL_UNLOCKS = { // plugin id → ISO unlock instant. Mirrors module dates. 'steven-p-canvas-coach': null, // Week 1 — always unlocked 'kendrick-mic-drop': '2026-05-18T00:00:00-07:00', // Week 2 'molly-concepts': '2026-05-18T00:00:00-07:00', // Week 2 'ray-north-star-map': '2026-05-25T00:00:00-07:00', // Week 3 'philip-k-messaging': '2026-06-01T00:00:00-07:00', // Week 4 'jed-pov-writer': '2026-06-01T00:00:00-07:00', // Week 4 (Margaret runs as KV override on this id) }; const LESSON_UNLOCKS = { 'Welcome': null, 'Module 1: Build Your Category Canvas': null, 'Module 2: Write Your Mic Drop POV': '2026-05-18T00:00:00-07:00', 'Module 3: Create Your North Star Map': '2026-05-25T00:00:00-07:00', 'Module 4: Finalize Your North Star Messaging': '2026-06-01T00:00:00-07:00', 'Wrap Up & Next Steps': '2026-06-03T00:00:00-07:00', }; function isUnlockedFor(unlockIso, user, now) { if (user?.role === 'admin') return true; if (!unlockIso) return true; const at = Date.parse(unlockIso); if (Number.isNaN(at)) return true; return (now ?? Date.now()) >= at; } function isLessonUnlockedFor(unlockIso, user, now) { return isUnlockedFor(unlockIso, user, now); } function formatUnlockDate(unlockIso) { // "Mon, May 18" — short and friendly for the locked-row hint. const d = new Date(unlockIso); return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'America/Los_Angeles', }); } // Inline lock glyph. 14×14 stroke icon. function LockIcon() { return ( ); } // --------------------------------------------------------------------- // Components // --------------------------------------------------------------------- function Avatar({ visuals, size }) { // size: 'md' | 'sm' (defaults to full 90px dashboard size) const sizeClass = size ? ` avatar--${size}` : ''; return (
); } function PluginCard({ plugin, visuals, isFavorite, onOpen, onToggleFavorite, locked, unlockIso }) { // Display fields come from the dynamic plugin manifest (admin-editable), // with PLUGIN_VISUALS as fallback for back-compat. Avatar layers are // visual-only and stay on PLUGIN_VISUALS. const displayName = plugin.name || visuals.firstName; const displayRole = plugin.role || visuals.role; const tagLower = (plugin.tag || visuals.category || '').toLowerCase(); const tagLabel = plugin.tag ? plugin.tag.charAt(0).toUpperCase() + plugin.tag.slice(1) : visuals.category; const badgeClass = tagLower === 'messaging' ? 'badge--messaging' : 'badge--strategy'; const starIcon = isFavorite ? 'icon-star-filled.svg' : 'icon-star-outline.svg'; const favBtnClass = isFavorite ? 'btn-icon' : 'btn-icon btn-icon--outline'; const unlockHint = locked && unlockIso ? `Available ${formatUnlockDate(unlockIso)}` : null; return (
{tagLabel}

{displayName}, {displayRole}

{plugin.description}

{unlockHint && (

{unlockHint}

)}
); } function Sidebar({ user, activeNav, onNav, onLogout, pinnedChats, onOpenPinnedChat, onRenamePinnedChat, plugins, onOpenPlugin, theme, onToggleTheme }) { const initials = user ? (user.display_name || user.email || '?').split(/[\s@.]+/).filter(Boolean).slice(0, 2).map(s => s[0]).join('').toUpperCase() : '?'; const displayName = user?.display_name || user?.email || 'You'; const [renamingId, setRenamingId] = useState(null); const [renameDraft, setRenameDraft] = useState(''); const startRename = (e, convo) => { e.stopPropagation(); setRenamingId(convo.id); setRenameDraft(convo.title || ''); }; const commitRename = async (id) => { const title = renameDraft.trim(); if (title) await onRenamePinnedChat?.(id, title); setRenamingId(null); }; return ( ); } // ===================================================================== // EmailVerificationBanner — surfaced above main when email_verified=false. // ===================================================================== function EmailVerificationBanner() { const [resending, setResending] = useState(false); const [done, setDone] = useState(false); const handleResend = async () => { setResending(true); try { const res = await fetch('/api/auth/resend-verify', { method: 'POST', credentials: 'include' }); if (res.ok) setDone(true); } catch {} setResending(false); }; return (
Please verify your email to keep using all features. {done ? ( ✓ Verification email sent ) : ( )}
); } // ===================================================================== // Toast — short-lived top-right notification (success/error/info). // ===================================================================== function ToastStack({ toasts, onDismiss }) { return (
{toasts.map(t => ( ))}
); } function Toast({ toast, onDismiss }) { useEffect(() => { const t = setTimeout(() => onDismiss(toast.id), 4000); return () => clearTimeout(t); }, [toast.id]); return (
onDismiss(toast.id)}> {toast.message}
); } // ===================================================================== // AppShell — the global v2 chrome. Every authenticated page wraps its // content with this so the sidebar, landscape backdrop, and version // toggle stay consistent across the app. // ===================================================================== function AppShell({ user, activeNav, onNav, onLogout, pinnedChats, onOpenPinnedChat, onRenamePinnedChat, plugins, onOpenPlugin, theme, onToggleTheme, children, historyOpen, historyConvos, onCloseHistory, onOpenHistoryConvo, onDeleteHistoryConvo, onRenameHistoryConvo, }) { const showVerifyBanner = user && !user.email_verified; return (
{showVerifyBanner && }
{children}
); } function formatRelativeDate(iso) { if (!iso) return ''; const date = new Date(iso); const diff = (Date.now() - date.getTime()) / 1000; if (diff < 60) return 'Just now'; if (diff < 3600) return `${Math.floor(diff / 60)}m`; if (diff < 86400) return `${Math.floor(diff / 3600)}h`; if (diff < 604800) return `${Math.floor(diff / 86400)}d`; return date.toLocaleDateString(); } function HistoryDrawer({ open, convos, onClose, onOpenConvo, onDelete, onRename }) { const [renamingId, setRenamingId] = useState(null); const [renameDraft, setRenameDraft] = useState(''); const startRename = (e, c) => { e.stopPropagation(); setRenamingId(c.id); setRenameDraft(c.title || ''); }; const commitRename = async (id) => { const title = renameDraft.trim(); if (title) await onRename(id, title); setRenamingId(null); }; return ( ); } // --------------------------------------------------------------------- // Page contents — each fits inside
within the AppShell. // --------------------------------------------------------------------- // ===================================================================== // ToolsContent — "My Tools" page. The 6 plugin cards on the landscape. // (Was previously misnamed DashboardContent.) // ===================================================================== function ToolsContent({ plugins, user, onOpenPlugin, onToggleFavorite }) { const favorites = user?.favorite_plugins || []; const now = Date.now(); return ( <>

Different happens here.

Stop competing. Start defining your category.

{plugins.map(plugin => { const visuals = PLUGIN_VISUALS[plugin.id]; if (!visuals) return null; const unlockIso = TOOL_UNLOCKS[plugin.id]; const locked = !isUnlockedFor(unlockIso, user, now); return ( ); })}
); } // ===================================================================== // DashboardContent — personal home. Mirrors v1's DashboardHome IA: // greeting, stat cards (admin or user variant), personal activity, // weekly + all-time leaderboards, milestones, upgrade upsell. // Hits same backend: /api/stats/me, /api/leaderboard, /api/admin/usage. // ===================================================================== // Inline line-style icons used by stat cards + leaderboard headers. // Hand-rolled to match Streamline Core aesthetic at 24×24 with stroke 1.5. function Icon({ name, size = 24 }) { const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (name) { case 'chat-bubble': return ( ); case 'signal': return ( ); case 'wrench': return ( ); case 'flash': return ( ); case 'calendar': return ( ); case 'compass': return ( ); case 'trophy': return ( ); case 'users': return ( ); case 'dollar': return ( ); default: return null; } } function StatCard({ icon, value, label, progress, valueSize }) { const valueClass = valueSize === 'half' ? 'stat-card-value stat-card-value--half' : 'stat-card-value'; return (
{value}
{label}
{progress !== undefined && (
)}
); } function LeaderboardPanel({ icon, label, rows, labelFn }) { return (
{label}
{rows.slice(0, 3).map((row, i) => { const rankClass = i === 1 ? ' lb-rank-pill--silver' : i === 2 ? ' lb-rank-pill--bronze' : ''; return (
#{i + 1} {labelFn(row)}
); })}
); } // --------------------------------------------------------------------- // Stripe helpers — used by every "upgrade" / "manage billing" CTA in v2. // --------------------------------------------------------------------- async function startCheckout(planId, interval) { if (!planId) return; try { const res = await fetch('/api/stripe/checkout', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ planId, interval: interval || 'monthly' }), }); const data = await res.json().catch(() => ({})); if (data.url) { window.location.href = data.url; } else { window.alert(data.error || 'Could not start checkout. Try again.'); } } catch { window.alert('Could not start checkout. Try again.'); } } async function openBillingPortal() { try { const res = await fetch('/api/stripe/portal', { method: 'POST', credentials: 'include', }); const data = await res.json().catch(() => ({})); if (data.url) { window.location.href = data.url; } else { window.alert(data.error || 'Could not open billing portal.'); } } catch { window.alert('Could not connect to billing portal.'); } } function pluginDisplayName(pluginId, plugins) { const plugin = plugins.find(p => p.id === pluginId); if (plugin?.name) return plugin.name; const visuals = PLUGIN_VISUALS[pluginId]; return visuals?.firstName || pluginId; } function computeApiCost(adminStats) { const pricing = (typeof STUDIO_CONFIG !== 'undefined' && STUDIO_CONFIG.apiPricing) || {}; return (adminStats.byPlugin || []).reduce((sum, r) => { const p = pricing[r.model] || { inputPer1k: 0.003, outputPer1k: 0.015, cacheWritePer1k: 0.00375, cacheReadPer1k: 0.0003 }; return sum + (r.input_tokens / 1000) * p.inputPer1k + (r.output_tokens / 1000) * p.outputPer1k + ((r.cache_creation_input_tokens || 0) / 1000) * (p.cacheWritePer1k || 0.00375) + ((r.cache_read_input_tokens || 0) / 1000) * (p.cacheReadPer1k || 0.0003); }, 0).toFixed(2); } function DashboardContent({ user, plugins, onNav }) { const isAdmin = user?.role === 'admin'; const [adminStats, setAdminStats] = useState(null); const [personalStats, setPersonalStats] = useState(null); const [leaderboard, setLeaderboard] = useState(null); // Greeting copy comes from the Figma design — single phrase, no time-of-day variation. const firstName = (user?.full_name || user?.display_name || user?.email || '').split(/[\s@]/)[0] || ''; useEffect(() => { if (!isAdmin) return; (async () => { try { const res = await fetch('/api/admin/usage?days=30', { credentials: 'include' }); if (res.ok) setAdminStats(await res.json()); } catch {} })(); }, [isAdmin]); useEffect(() => { (async () => { try { const [statsRes, lbRes] = await Promise.all([ fetch('/api/stats/me', { credentials: 'include' }), fetch('/api/leaderboard', { credentials: 'include' }), ]); if (statsRes.ok) setPersonalStats(await statsRes.json()); if (lbRes.ok) setLeaderboard(await lbRes.json()); } catch {} })(); }, []); const cfg = (typeof STUDIO_CONFIG !== 'undefined') ? STUDIO_CONFIG : {}; const planLimits = { free: cfg.rateLimits?.freeTrialMessages || 10 }; (cfg.plans || []).forEach(p => { planLimits[p.id] = p.monthlyMessageLimit; }); const limit = planLimits[user?.plan] || 10; const used = user?.messages_used || 0; const remaining = Math.max(limit - used, 0); const plans = cfg.plans || []; const currentPlan = plans.find(p => p.id === user?.plan); const upgradePlan = plans.find(p => p.price > (currentPlan?.price || 0)); const stats = isAdmin ? [ { icon: 'users', label: 'Total Users', value: adminStats ? String(adminStats.totalUsers || 0) : '—' }, { icon: 'signal', label: 'Active (30d)', value: adminStats ? String(adminStats.activeUsers || 0) : '—' }, { icon: 'chat-bubble', label: 'Messages (30d)', value: adminStats ? (adminStats.totals?.total_messages || 0).toLocaleString() : '—' }, { icon: 'dollar', label: 'Est. API Cost', value: adminStats ? '$' + computeApiCost(adminStats) : '—' }, ] : [ { icon: 'chat-bubble', label: 'Messages Left', value: String(remaining), valueSize: 'half' }, { icon: 'signal', label: 'Messages Used', value: String(used) }, { icon: 'wrench', label: 'Tools Available', value: String(plugins.length) }, { icon: 'flash', label: 'Current Plan', value: ((user?.plan || 'free').charAt(0).toUpperCase() + (user?.plan || 'free').slice(1)), valueSize: 'half' }, ]; const handleUpgrade = () => onNav?.('pricing'); return (

Let's do this{firstName ? `, ${firstName}` : ''}.

What are we building today?

{/* Top stat row — no chip header, sits directly under greeting */}
{stats.map(s => ( ))}
{personalStats && (
Your Activity
0 ? 'flash' : 'calendar'} value={personalStats.streak || 0} label="Day Streak" progress={0} /> 0 ? Math.min((personalStats.toolsExplored / personalStats.totalTools) * 100, 100) : undefined} />
)} {leaderboard && (
This Week's Leaderboard
{(leaderboard.topUsers?.length > 0 || leaderboard.topTools?.length > 0) ? (
u.displayName} /> pluginDisplayName(t.pluginId, plugins)} />
) : (
No activity yet this week — check back soon.
)}
)} {leaderboard && (leaderboard.topUsersAllTime?.length > 0 || leaderboard.topToolsAllTime?.length > 0) && (
All Time Leaderboard
{leaderboard.topUsersAllTime?.length > 0 && ( u.displayName} /> )} {leaderboard.topToolsAllTime?.length > 0 && ( pluginDisplayName(t.pluginId, plugins)} /> )}
)} {personalStats?.milestones !== undefined && (
Milestones
{MILESTONE_DEFS.map(m => { const earned = (personalStats.milestones || []).find(e => e.id === m.id); return (
{m.emoji}
{m.name}
{m.description}
{earned &&
{new Date(earned.earnedAt).toLocaleDateString()}
}
); })}
)} {upgradePlan && !isAdmin && (
⚡ {upgradePlan.name}
Want to level up?
{(upgradePlan.features || []).slice(-2).join(' + ')}. ${upgradePlan.price}/{upgradePlan.period}.
)}
); } // ===================================================================== // Chat — conversation screen for a single plugin. // Hits the same /api/chat (SSE-streaming) backend as v1. // ===================================================================== function PluginAvatarLayers({ visuals }) { const layers = AVATAR_LAYERS[visuals?.avatar] || []; return (
{layers.map((l, i) => ( ))}
); } function renderMarkdown(text) { if (!text) return ''; if (typeof marked === 'undefined') return escapeHtml(text); try { // breaks: false on purpose. With breaks: true every single newline turns // into a
, including the newline at the end of a paragraph that // precedes a block element (list, heading, blockquote). That phantom
// adds an extra line of whitespace between a paragraph and the list/header // that follows it. Standard markdown semantics: blank lines separate // paragraphs; single newlines mid-paragraph collapse to spaces. const html = marked.parse(text, { breaks: false, gfm: true }); if (typeof DOMPurify !== 'undefined') { return DOMPurify.sanitize(html, { USE_PROFILES: { html: true }, ADD_ATTR: ['target', 'rel'], }); } return escapeHtml(text); } catch { return escapeHtml(text); } } function escapeHtml(text) { return String(text).replace(/[&<>"']/g, ch => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', }[ch])); } function ChatMessage({ role, content, visuals, images, docs, onEdit, onRegenerate }) { const isAssistant = role === 'assistant'; if (role === 'compaction') { return (
— {content} —
); } return (
{isAssistant && (
)}
{images && images.length > 0 && (
{images.map((src, i) => )}
)} {docs && docs.length > 0 && (
{docs.map((d, i) => 📄 {d.name})}
)} {isAssistant ?
: (content || (images?.length ? '' : '')) } {(onEdit || onRegenerate) && (
{onEdit && !isAssistant && ( )} {onRegenerate && isAssistant && content && ( )}
)}
); } function ThinkingMessage({ visuals }) { return (
); } function ChatScreen({ plugin, user, initialConversationId, onConversationChange, onPinnedChange, onOpenHistory }) { const visuals = PLUGIN_VISUALS[plugin.id]; const firstName = plugin.name || visuals?.firstName; const role = plugin.role || visuals?.role || plugin.description || ''; const tagLower = (plugin.tag || visuals?.category || '').toLowerCase(); const tagLabel = plugin.tag ? plugin.tag.charAt(0).toUpperCase() + plugin.tag.slice(1) : visuals?.category; const greeting = plugin.greeting || `Hi, I'm ${firstName}. What are you working on?`; const [messages, setMessages] = useState([{ role: 'assistant', content: greeting }]); const [conversationId, setConversationId] = useState(initialConversationId || null); const [isPinned, setIsPinned] = useState(false); const [input, setInput] = useState(''); const [isThinking, setIsThinking] = useState(false); const [pendingImages, setPendingImages] = useState([]); const [pendingDocs, setPendingDocs] = useState([]); const [attachError, setAttachError] = useState(''); const messagesEndRef = useRef(null); const inputRef = useRef(null); const fileInputRef = useRef(null); // Reset when plugin changes (only if no specific convo to load) useEffect(() => { if (!initialConversationId) { setMessages([{ role: 'assistant', content: greeting }]); setConversationId(null); setIsPinned(false); } }, [plugin.id]); // Track conversation IDs we minted locally (after sending the first message in // a new chat). When the parent echoes that ID back as initialConversationId, // we must NOT refetch — the worker writes the user+assistant messages to D1 // *after* the stream completes, so a fetch here races the batch INSERT and // returns an empty conversation, wiping the messages we just streamed. const locallyOwnedConvoIds = useRef(new Set()); // Load specific conversation (e.g. clicked from sidebar pinned chat or history) useEffect(() => { if (!initialConversationId) return; if (locallyOwnedConvoIds.current.has(initialConversationId)) return; (async () => { try { const res = await fetch(`/api/conversations/${initialConversationId}`, { credentials: 'include' }); if (res.ok) { const data = await res.json(); setMessages(data.messages || []); setConversationId(initialConversationId); setIsPinned(!!data.conversation?.pinned); } } catch {} })(); }, [initialConversationId]); // Auto-scroll on new messages / thinking state useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' }); }, [messages, isThinking]); // Auto-grow textarea const handleInputChange = (e) => { setInput(e.target.value); if (inputRef.current) { inputRef.current.style.height = 'auto'; inputRef.current.style.height = Math.min(inputRef.current.scrollHeight, 200) + 'px'; } }; // -------- Pin / unpin -------- const togglePin = async () => { if (!conversationId) return; const next = !isPinned; setIsPinned(next); try { const res = await fetch(`/api/conversations/${conversationId}`, { method: 'PATCH', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pinned: next }), }); if (!res.ok) { setIsPinned(!next); // revert on server error const err = await res.json().catch(() => ({})); console.error('Pin toggle failed:', res.status, err); return; } onPinnedChange?.(); } catch (e) { setIsPinned(!next); console.error('Pin toggle threw:', e); } }; // -------- Edit / Regenerate -------- // Edit a user message: replace text in place, truncate everything after, // and re-send via /api/chat. Server history will retain the original // turn — this is local-state replay (good enough for v2 v1.0). const editMessage = (index) => { const msg = messages[index]; if (!msg || msg.role !== 'user') return; const next = window.prompt('Edit your message:', msg.content); if (next === null) return; const trimmed = next.trim(); if (!trimmed) return; setMessages(prev => prev.slice(0, index)); sendMessageWithText(trimmed, msg.images, msg.docs); }; const regenerateMessage = (index) => { const assistantMsg = messages[index]; if (!assistantMsg || assistantMsg.role !== 'assistant') return; // Find the user message that prompted this response let userIdx = index - 1; while (userIdx >= 0 && messages[userIdx].role !== 'user') userIdx--; if (userIdx < 0) return; const userMsg = messages[userIdx]; setMessages(prev => prev.slice(0, index)); sendMessageWithText(userMsg.content, userMsg.images, userMsg.docs); }; // -------- Attachments (image + PDF) -------- const readFileAsBase64 = (file) => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { const result = reader.result; const base64 = (result || '').split(',')[1] || ''; resolve(base64); }; reader.onerror = reject; reader.readAsDataURL(file); }); const handleAttachClick = () => fileInputRef.current?.click(); const handleFileChosen = async (e) => { setAttachError(''); const files = Array.from(e.target.files || []); e.target.value = ''; const ALLOWED_IMG = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']; const MAX_IMG = 5 * 1024 * 1024; const MAX_PDF = 32 * 1024 * 1024; const newImages = []; const newDocs = []; for (const file of files) { try { if (ALLOWED_IMG.includes(file.type)) { if (file.size > MAX_IMG) { setAttachError(`${file.name} is too big (max 5MB).`); continue; } const base64 = await readFileAsBase64(file); newImages.push({ base64, mediaType: file.type, preview: `data:${file.type};base64,${base64}` }); } else if (file.type === 'application/pdf') { if (file.size > MAX_PDF) { setAttachError(`${file.name} is too big (max 32MB).`); continue; } const base64 = await readFileAsBase64(file); newDocs.push({ base64, mediaType: file.type, name: file.name, size: file.size }); } else { setAttachError('Only JPG, PNG, GIF, WebP, and PDF files are supported.'); } } catch { setAttachError(`Could not read ${file.name}.`); } } if (newImages.length > 0) { setPendingImages(prev => { const merged = [...prev, ...newImages]; if (merged.length > 3) { setAttachError('Maximum 3 images per message.'); return merged.slice(0, 3); } return merged; }); } if (newDocs.length > 0) { setPendingDocs(prev => { const merged = [...prev, ...newDocs]; if (merged.length > 3) { setAttachError('Maximum 3 PDFs per message.'); return merged.slice(0, 3); } return merged; }); } }; const removeImage = (i) => setPendingImages(prev => prev.filter((_, idx) => idx !== i)); const removeDoc = (i) => setPendingDocs(prev => prev.filter((_, idx) => idx !== i)); const sendMessage = async () => { const text = input.trim(); if ((!text && pendingImages.length === 0 && pendingDocs.length === 0) || isThinking) return; const imagesToSend = [...pendingImages]; const docsToSend = [...pendingDocs]; setInput(''); if (inputRef.current) inputRef.current.style.height = 'auto'; setPendingImages([]); setPendingDocs([]); setAttachError(''); await sendMessageWithText(text, imagesToSend.length ? imagesToSend.map(i => i.preview) : null, docsToSend.length ? docsToSend.map(d => ({ name: d.name, size: d.size })) : null, imagesToSend, docsToSend); }; // Shared send routine — used by sendMessage, editMessage, regenerateMessage. // For edit/regenerate, no fresh attachments (uses preserved local state). const sendMessageWithText = async (text, imagePreviews, docMeta, freshImages, freshDocs) => { if (isThinking) return; const userMsg = { role: 'user', content: text }; if (imagePreviews && imagePreviews.length > 0) userMsg.images = imagePreviews; if (docMeta && docMeta.length > 0) userMsg.docs = docMeta; setMessages(prev => [...prev, userMsg]); setIsThinking(true); try { const res = await fetch('/api/chat', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pluginId: plugin.id, conversationId, message: text || '(see attachments)', ...(freshImages && freshImages.length > 0 ? { images: freshImages.map(img => ({ base64: img.base64, mediaType: img.mediaType })) } : {}), ...(freshDocs && freshDocs.length > 0 ? { documents: freshDocs.map(doc => ({ base64: doc.base64, mediaType: doc.mediaType, name: doc.name })) } : {}), }), }); if (!res.ok) { const err = await res.json().catch(() => ({})); setMessages(prev => [...prev, { role: 'assistant', content: err.error || 'Something went wrong. Try again.' }]); setIsThinking(false); return; } const newConvoId = res.headers.get('X-Conversation-Id'); if (newConvoId) { // Mark as locally-owned BEFORE bubbling up — the parent will echo this // back as initialConversationId and trigger the load effect; the guard // there checks this set and skips the racing fetch. locallyOwnedConvoIds.current.add(newConvoId); setConversationId(newConvoId); onConversationChange?.(newConvoId); } const wasCompacted = res.headers.get('X-Compacted') === 'true'; if (wasCompacted) { setMessages(prev => [...prev, { role: 'compaction', content: 'Conversation summarized to keep things fast.' }]); } // Stream SSE response setIsThinking(false); setMessages(prev => [...prev, { role: 'assistant', content: '' }]); const reader = res.body.getReader(); const decoder = new TextDecoder(); let assistantContent = ''; let sseBuffer = ''; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value, { stream: true }); sseBuffer += chunk; const lines = sseBuffer.split('\n'); sseBuffer = lines.pop() || ''; for (const line of lines) { if (!line.startsWith('data: ')) continue; const data = line.slice(6); if (data === '[DONE]') continue; try { const event = JSON.parse(data); if (event.type === 'content_block_delta' && event.delta?.text) { assistantContent += event.delta.text; setMessages(prev => { const next = [...prev]; next[next.length - 1] = { role: 'assistant', content: assistantContent }; return next; }); } } catch {} } } } catch { setIsThinking(false); setMessages(prev => [...prev, { role: 'assistant', content: 'Could not connect. Try again.' }]); } }; const handleKeyDown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; return (

{firstName}

{role}

{tagLabel && ( {tagLabel} )}
{conversationId && ( )}
{messages.map((m, i) => ( editMessage(i) : undefined} onRegenerate={m.role === 'assistant' && !isThinking && i > 0 ? () => regenerateMessage(i) : undefined} /> ))} {isThinking && }