3814189934
Epic 3 Story 6 compleet: Artifacts openen automatisch vanuit chat! 🎉 EPIC 3 COMPLEET - Medical Scribe Chat werkt end-to-end! E3.S6 - Artifact Opening from Chat (2 SP) - PendingAction state triggers artifact opening - useEffect in CommandCenter luistert naar pendingAction - Automatische block opening met prefill data - Visual flow: Chat → AI → Action → Artifact verschijnt rechts Components Updated: - components/swift/artifacts/artifact-area.tsx (86 regels) - Renders DagnotatieBlock, ZoekenBlock, OverdrachtBlock - Placeholder state wanneer geen block actief - Conditional rendering based on activeBlock state - components/swift/command-center/command-center.tsx - useEffect voor pendingAction handling - openBlock(type, prefill) aanroep - setPendingAction(null) cleanup - Console logging voor debugging Artifact Opening Flow: 1. User: "Notitie voor Jan: medicatie gegeven" 2. AI response met JSON action (confidence 0.95) 3. ChatPanel: parseActionFromResponse() 4. ChatPanel: setPendingAction(action) if confidence ≥ 0.7 5. CommandCenter: useEffect triggers op pendingAction 6. CommandCenter: openBlock('dagnotitie', { patientName: 'Jan', ... }) 7. ArtifactArea: Renders DagnotatieBlock met prefill 8. setPendingAction(null) cleanup Features: - Automatische artifact opening bij high confidence (≥0.7) - Prefill data van AI naar block (patientName, category, content, etc.) - Console logging voor debugging: - "[CommandCenter] Processing pending action: {...}" - "[CommandCenter] Opening artifact: dagnotitie with prefill: {...}" - Placeholder state met voorbeelden wanneer geen artifact actief - Overflow-y-auto voor scrollable artifacts Blocks Supported: - dagnotitie → DagnotatieBlock - zoeken → ZoekenBlock - overdracht → OverdrachtBlock - fallback → FallbackPicker Build Status: - ✅ pnpm build succesvol (geen type errors) - Alleen bekende warnings (Supabase realtime, useCallback) Epic 3 Summary (Chat API & Medical Scribe): - ✅ E3.S1 — Chat API endpoint skeleton (3 SP) - ✅ E3.S2 — Streaming response logic (5 SP) - ✅ E3.S3 — Medical scribe system prompt (3 SP) - ✅ E3.S4 — Intent detection in response (5 SP) - ❌ E3.S5 — Frontend streaming (GESKIPT - 3 SP) - ✅ E3.S6 — Artifact opening from chat (2 SP) Epic 3 Stats: 5/6 stories (18 SP), 1 geskipt (3 SP) Voortgang: 48 SP / 85 SP (56%) - 16/31 stories compleet, 2 geskipt Next Epic: E4 (Artifact Area & Tabs) - Meerdere artifacts, tabs, animaties 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Artifact Area (v3.0)
|
|
*
|
|
* Displays active blocks based on activeBlock state.
|
|
* Shows placeholder when no block is active.
|
|
*
|
|
* Epic: E1 (Foundation), E3 (Chat API & Medical Scribe)
|
|
* Stories: E1.S3 (Placeholder componenten), E3.S6 (Artifact opening from chat)
|
|
*/
|
|
|
|
import { useSwiftStore } from '@/stores/swift-store';
|
|
import { DagnotatieBlock } from '../blocks/dagnotitie-block';
|
|
import { ZoekenBlock } from '../blocks/zoeken-block';
|
|
import { OverdrachtBlock } from '../blocks/overdracht-block';
|
|
import { FallbackPicker } from '../blocks/fallback-picker';
|
|
|
|
export function ArtifactArea() {
|
|
const activeBlock = useSwiftStore((s) => s.activeBlock);
|
|
const prefillData = useSwiftStore((s) => s.prefillData);
|
|
|
|
// Render active block
|
|
if (activeBlock) {
|
|
return (
|
|
<div className="h-full flex items-center justify-center bg-slate-50 p-6 overflow-y-auto">
|
|
{activeBlock === 'dagnotitie' && <DagnotatieBlock />}
|
|
{activeBlock === 'zoeken' && <ZoekenBlock />}
|
|
{activeBlock === 'overdracht' && <OverdrachtBlock />}
|
|
{activeBlock === 'fallback' && <FallbackPicker />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Placeholder when no block is active
|
|
return (
|
|
<div className="h-full flex items-center justify-center bg-slate-50 p-6">
|
|
<div className="max-w-lg text-center text-slate-500">
|
|
<div className="text-5xl mb-4">📋</div>
|
|
<h3 className="text-xl font-medium text-slate-700 mb-3">
|
|
Artifacts verschijnen hier
|
|
</h3>
|
|
<p className="text-sm mb-6">
|
|
Wanneer je een actie vraagt in de chat, verschijnt het bijbehorende formulier of overzicht hier.
|
|
</p>
|
|
|
|
<div className="bg-white rounded-lg border border-slate-200 p-4 text-left space-y-3">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-sm">
|
|
📝
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-slate-700 text-sm">Dagnotitie</p>
|
|
<p className="text-xs text-slate-500">Voor snelle notities tijdens de dienst</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-8 h-8 rounded bg-green-100 flex items-center justify-center text-sm">
|
|
🔍
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-slate-700 text-sm">Patiënt Zoeken</p>
|
|
<p className="text-xs text-slate-500">Zoek en selecteer patiënten</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-8 h-8 rounded bg-purple-100 flex items-center justify-center text-sm">
|
|
🔄
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-slate-700 text-sm">Overdracht</p>
|
|
<p className="text-xs text-slate-500">Dienst overdracht met AI-samenvatting</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-400 mt-6">
|
|
Vraag me iets in de chat om te beginnen!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|