{!hasText && ( )}

{mention && filtered.length > 0 && ( insertChip(item, mention.trigger)} /> )}

); } /* ============ User message bubble ============ */ function UserMessage({ text }) { return

{text}

; } /* ============ Assistant message — with status streaming + final answer ============ */ function AssistantMessage({ message, onOpenCite, onCardAction }) { // TN cites route to the TN record drawer; everything else uses the app handler. const openCite = (cite) => { if (cite && typeof cite.id === 'string' && cite.id.indexOf('tn_') === 0 && window.openDrawer) { window.openDrawer(cite.id); return; } if (onOpenCite) onOpenCite(cite); }; // message: { id, statuses, statusIdx, answerPieces, answerDone, error, taskRef, card } const { statuses, statusIdx, answerPieces, answerDone, error } = message; const showStatus = !answerPieces && !error; // Control · Tasks: optional task-ref chip + inline flow card (window.TaskRef/TaskCard). const TaskRefC = window.TaskRef; const TaskCardC = window.TaskCard; const refEl = message.taskRef && TaskRefC ? : null; const ProxaIco = ; if (error) { return (

{ProxaIco}

{error}

); } if (showStatus) { return (

{ProxaIco}

{refEl}

{statuses[statusIdx]}

); } // Final answer (streaming) return (
{ProxaIco}
{refEl} {message.card && answerDone && TaskCardC && ( onCardAction && onCardAction(message.card, reply, btn)} /> )}

); } /* ============ Hub skills & workflows (drawer tabs) ============ */ const HUB_SKILLS = [ { name: 'Daily report digest', desc: 'Summarizes the day\u2019s safety export & field sign-in into the daily report', meta: 'Updated 5 h ago' }, { name: 'Cost variance explainer', desc: 'Explains a monthly report cost overrun by category from the cost export', meta: 'Updated 2 d ago' }, { name: 'Owner update email', desc: 'Drafts the weekly owner progress email from this hub\u2019s artifacts', meta: 'Updated 6 d ago' }, ]; const HUB_WORKFLOWS = [ { name: 'Daily report build', desc: 'Assembles AWST daily from the safety export & field sign-in', meta: 'Daily \u00b7 17:00' }, { name: 'Headcount conflict watch', desc: 'Runs when Daily & Team headcount figures disagree', meta: 'On source conflict' }, { name: 'Weekly progress roll-up', desc: 'Compiles Weekly 220 when the project export re-syncs', meta: 'On source change' }, { name: 'Egnyte source sync', desc: 'Pulls the 7 domain Excel exports from /cedar-narrows-tunnel', meta: 'Every 2 h' }, { name: 'Month-end report assembly', desc: 'Builds Monthly No. 50 from P6 schedule & cost reports', meta: '1st of month' }, ]; function DrawerList({ items, onPick }) { return (
{items.map((it) => )}
); } /* ============ Main chat panel ============ */ function ChatPanel({ open, width, onClose, onWidthChange, onOpenCite, mobile, mode, wide, onToggleWide, agent, setAgent, initialPrompt, onInitialPromptHandled, onboardMessage, onOnboardMessageHandled, onGenerateDashboard, pendingSkill, onPendingSkillHandled, pendingTask, onPendingTaskHandled }) { const [messages, setMessages] = useStateChat([]); // {role:'user'|'assistant', ...} const [drawerTab, setDrawerTab] = useStateChat('agents'); // 'agents' | 'skills' | 'workflows' const [busy, setBusy] = useStateChat(false); const scrollRef = useRefChat(null); const dragStartY = useRefChat(null); const [dragY, setDragY] = useStateChat(0); const activeAgent = AGENTS.find((a) => a.key === agent) || AGENTS[0]; // Hub-aware starter prompts: the shared AGENTS list is construction-flavored; // hubs can override per agent via window.HUB_AGENT_PROMPTS[hub][agentKey]. const hubPrompts = (window.HUB_AGENT_PROMPTS && window.HUB_AGENT_PROMPTS[window.__ACTIVE_HUB] && window.HUB_AGENT_PROMPTS[window.__ACTIVE_HUB][activeAgent.key]) || null; const agentPrompts = hubPrompts || activeAgent.prompts; // Auto-scroll on new message useLayoutEffChat(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages]); // External prompt submission (e.g. from a record's empty state) React.useEffect(() => { if (!initialPrompt || !open) return; submitFreeform(initialPrompt); onInitialPromptHandled && onInitialPromptHandled(); }, [initialPrompt, open]); // Onboarding: seed a single assistant instruction message when the drawer // opens after a template pick (answerPieces = array of strings / {bold} / {br}). React.useEffect(() => { if (!onboardMessage || !open) return; setMessages([{ id: 'onboard', role: 'assistant', answerPieces: onboardMessage, answerDone: true }]); onOnboardMessageHandled && onOnboardMessageHandled(); }, [onboardMessage, open]); const reset = () => { setMessages([]); setBusy(false); }; const updateMsg = (id, patch) => { setMessages((prev) => prev.map((m) => (m.id === id ? { ...m, ...patch } : m))); }; // Simulate a canned knowledge-agent answer (statuses → streamed body). // If resp.stageMs is set, use those exact per-step durations (used by the // dashboard-generation flow to stay in sync with the record placeholder). const runCanned = (resp, asstId, onDone) => { let i = 0; const stageMs = resp.stageMs; const stepStatus = () => { if (i < resp.statuses.length - 1) { i += 1; updateMsg(asstId, { statusIdx: i }); const wait = stageMs ? (stageMs[i - 1] || 1300) : (700 + Math.random() * 400); setTimeout(stepStatus, wait); } else { // Reveal answer setTimeout(() => { updateMsg(asstId, { answerPieces: resp.answer, answerDone: false }); // mark done after text-stream interval (text length / 220 cps + buffer) const textLen = resp.answer.reduce((acc, p) => { if (typeof p === 'string') return acc + p.length; if (p && p.bold) return acc + p.bold.length; return acc; }, 0); const ms = (textLen / 220) * 1000 + 250; setTimeout(() => { updateMsg(asstId, { answerDone: true }); setBusy(false); if (onDone) onDone(); }, ms); }, 350); } }; const initialWait = stageMs ? (stageMs[0] || 1100) : 600; setTimeout(stepStatus, initialWait); }; /* === Control · Tasks: agent-driven task flows (window.TASK_FLOWS) === A row click in the Control Tasks table calls window.hubOpenTask(id), which sets pendingTask; the effect below opens the flow: statuses stream, then an inline card (upload/survey/conflict/confirm/diff/checklist) hands control to the user and advances the flow to completion. */ const rid = () => Math.random().toString(36).slice(2); const runTaskStep = (taskId, stepIdx, replyText) => { const flow = (window.TASK_FLOWS || {})[taskId]; const step = flow && flow.steps[stepIdx]; if (!step) return; const asstId = rid(); setBusy(true); setMessages((prev) => [ ...prev, ...(replyText ? [{ id: rid(), role: 'user', text: replyText }] : []), { id: asstId, role: 'assistant', statuses: step.statuses, statusIdx: 0, taskRef: stepIdx === 0 ? { type: flow.type, title: flow.title } : null, }, ]); setTimeout(() => runCanned({ statuses: step.statuses, answer: step.answer }, asstId, () => { if (step.card) updateMsg(asstId, { card: { ...step.card, taskId, stepIdx } }); if (step.complete && window.ccCompleteTask) window.ccCompleteTask(taskId); }), 0); }; const handleCardAction = (card, reply, btn) => { const next = (btn && btn.skipTo != null) ? btn.skipTo : card.stepIdx + 1; if (btn && btn.hold) { setMessages((prev) => [ ...prev, { id: rid(), role: 'user', text: reply }, { id: rid(), role: 'assistant', answerPieces: ['Held. The report stays staged and the model is untouched — the task will keep waiting on you until you approve or discard it.'], answerDone: true }, ]); return; } runTaskStep(card.taskId, next, reply); }; React.useEffect(() => { if (!pendingTask || !open) return; onPendingTaskHandled && onPendingTaskHandled(); const flow = (window.TASK_FLOWS || {})[pendingTask.id]; if (!flow) return; // Fresh thread for the task so it opens on its first step. setMessages([]); setBusy(false); setTimeout(() => runTaskStep(pendingTask.id, 0), 0); }, [pendingTask, open]); // Real LLM call via window.claude.complete for ad-hoc questions const runClaude = async (asstId, userText) => { let i = 0; const statuses = [ 'Searching knowledge base…', 'Reading hub context…', 'Reasoning…', ]; const stepStatus = () => { if (i < statuses.length - 1) { i += 1; updateMsg(asstId, { statusIdx: i }); setTimeout(stepStatus, 750); } }; const statusTimer = setTimeout(stepStatus, 700); const sys = `You are the Knowledge agent for Proxa — a knowledge-base product. The active hub is the "Cedar Narrows Water Supply Tunnel" project (Traylor Bros., Inc.). Context: - 1.4-mile water-supply tunnel for Metro Vancouver, $289M, joint venture of Traylor Infrastructure Canada and Aecon. - TBM (named "MARK") averaging 18.4 m/day on the South drive, 1,847 m of 2,253 m complete. - 3 open RFIs (#214 segment ring tolerance overdue, #218 grout mix, #221 cross-passage waterproofing). - Q1 cost-to-complete forecast $71.4M vs $69.2M budget; +$2.2M overrun. - 2 recordable safety events in April (one first-aid Apr 14, one near-miss Apr 21). TRIR YTD 0.84. - Net cash position +$4.8M; $6.1M receivable from Metro Vancouver on PE #14. - Hub contents: monthly reports, weekly reports, daily reports (438), photos (6), records (TBM daily log, RFIs, owner-call notes, shift reports). Answer the user's question in 2–3 short sentences, grounded in the context above. If the question is off-topic for this hub, say so briefly and suggest what you can answer. Plain prose only — no markdown, no headings, no bullet lists.`; try { const reply = await window.claude.complete({ messages: [ { role: 'user', content: `${sys}\n\nUser question: ${userText}` }, ], }); clearTimeout(statusTimer); // Reveal as a single text piece + a generic citation back to the project collection const pieces = [reply.trim(), { br: true }, { cite: { id: 'c-cedar-narrows', label: 'Cedar Narrows WST — Project Overview', target: 'collection', tab: 'overview' } }, ]; updateMsg(asstId, { answerPieces: pieces, answerDone: false }); const textLen = reply.length; const ms = (textLen / 240) * 1000 + 250; setTimeout(() => { updateMsg(asstId, { answerDone: true }); setBusy(false); }, ms); } catch (e) { clearTimeout(statusTimer); updateMsg(asstId, { error: "I couldn't reach the model just now. Try again in a moment." }); setBusy(false); } }; const askPrompt = (prompt) => { if (busy) return; const userId = Math.random().toString(36).slice(2); const asstId = Math.random().toString(36).slice(2); setBusy(true); // Special: the Node agent's dashboard prompt, fired from inside an open // empty record → build the Cedar Narrows WST overview from the hub knowledge // base. Drives the record-area loader (onGenerateDashboard) and streams the // matching gen statuses + answer so chat and record stay in sync. if (agent === 'node' && prompt.kind === 'na-dashboard') { const started = onGenerateDashboard && onGenerateDashboard(); if (started) { const resp = NODE_RESPONSES['na-dashboard-gen']; setMessages((prev) => [ ...prev, { id: userId, role: 'user', text: prompt.text }, { id: asstId, role: 'assistant', statuses: resp.statuses, statusIdx: 0 }, ]); setTimeout(() => runCanned(resp, asstId), 0); return; } } setMessages((prev) => [ ...prev, { id: userId, role: 'user', text: prompt.text }, { id: asstId, role: 'assistant', statuses: ['Searching knowledge base…', 'Reading source documents…', 'Synthesizing answer…'], statusIdx: 0 }, ]); if (agent !== 'knowledge' && !NODE_RESPONSES[prompt.kind]) { // Non-knowledge agents are stubbed unless they have a canned response setTimeout(() => { updateMsg(asstId, { error: `${activeAgent.label} isn't wired up in this prototype yet. Switch back to Knowledge Base to try a live answer.` }); setBusy(false); }, 600); return; } const resp = KNOWLEDGE_RESPONSES[prompt.kind] || NODE_RESPONSES[prompt.kind]; if (resp) { // Use the response's actual statuses updateMsg(asstId, { statuses: resp.statuses, statusIdx: 0 }); // re-schedule with new statuses (the previous useEffect chain referenced old array) // Easiest: rerun stepper after a tick using a local snapshot setTimeout(() => runCanned(resp, asstId), 0); } else { runClaude(asstId, prompt.text); } }; const submitFreeform = (text) => { if (busy) return; const userId = Math.random().toString(36).slice(2); const asstId = Math.random().toString(36).slice(2); setBusy(true); // Special: dashboard-generation prompt (from the empty record's Create // chips). Use the canned na-dashboard-gen response so the chat statuses // mirror the placeholder in the record area. const isDashboardGen = typeof text === 'string' && text.trim() === window.DASHBOARD_GEN_PROMPT; if (isDashboardGen) { const resp = NODE_RESPONSES['na-dashboard-gen']; setMessages((prev) => [ ...prev, { id: userId, role: 'user', text }, { id: asstId, role: 'assistant', statuses: resp.statuses, statusIdx: 0 }, ]); setTimeout(() => runCanned(resp, asstId), 0); return; } setMessages((prev) => [ ...prev, { id: userId, role: 'user', text }, { id: asstId, role: 'assistant', statuses: ['Searching knowledge base…', 'Reading hub context…', 'Reasoning…'], statusIdx: 0 }, ]); if (agent !== 'knowledge') { setTimeout(() => { updateMsg(asstId, { error: `${activeAgent.label} isn't wired up in this prototype yet. Switch back to Knowledge Base to try a live answer.` }); setBusy(false); }, 600); return; } runClaude(asstId, text); }; /* === Resize handle (inline mouse-down handler for reliability) === */ const startResize = (e) => { if (mobile) return; e.preventDefault(); e.stopPropagation(); const startX = e.clientX; const startW = width; document.body.classList.add('is-chat-resizing'); const onMove = (ev) => { ev.preventDefault(); // Panel is docked on the right edge: dragging left (negative dx) widens it. const dx = ev.clientX - startX; const w = Math.min(700, Math.max(375, startW - dx)); onWidthChange(w); }; const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.classList.remove('is-chat-resizing'); }; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); }; /* === Mobile swipe-down to dismiss === */ const onTouchStart = (e) => { if (!mobile) return; dragStartY.current = e.touches[0].clientY; }; const onTouchMove = (e) => { if (!mobile || dragStartY.current == null) return; const dy = e.touches[0].clientY - dragStartY.current; setDragY(Math.max(0, dy)); }; const onTouchEnd = () => { if (!mobile) return; if (dragY > 100) { onClose(); } setDragY(0); dragStartY.current = null; }; if (!open) return null; const showEmpty = messages.length === 0; const panelStyle = mobile ? { transform: `translateY(${dragY}px)` } : null; return ( <> {mobile &&
}
{mobile && (

)}

{drawerTab === 'agents' ? 'Chat with agents' : drawerTab === 'skills' ? 'Skills in this hub' : 'Workflows in this hub'}

{mode === 'beneath' && !mobile && ( )}

{drawerTab !== 'agents' ? ( { const isSkill = drawerTab === 'skills'; setDrawerTab('agents'); submitFreeform(isSkill ? `Use the ${it.name} skill.` : `Run the ${it.name} workflow now.`); }} /> ) : showEmpty ? (

{activeAgent.question}

{agentPrompts.map((p, i) => ( ))}

) : (
{messages.map((m) => ( m.role === 'user' ? : ))}
)}
{drawerTab === 'agents' && (

)}
{[['agents', 'Agents'], ['skills', 'Skills'], ['workflows', 'Workflows']].map(([k, l]) => )}
{!mobile && mode !== 'beneath' &&
); } Object.assign(window, { ChatPanel, ProxaP, AGENTS, Composer });