9b85448a43
Epic 3 Story 4 compleet: AI action objects worden geparsed en gevalideerd.
E3.S4 - Intent Detection in Response (5 SP)
- Action parser met JSON extraction uit markdown code blocks
- Zod validatie voor action schema (intent, entities, confidence, artifact)
- Confidence-based artifact opening (≥0.7 threshold)
- Visual feedback met action badges in chat messages
- Console logging voor debugging
Nieuwe Components:
- lib/swift/action-parser.ts (149 regels)
- parseActionFromResponse(): Extract & validate JSON actions
- extractJsonBlock(): Regex matching voor ```json blocks
- removeJsonBlocks(): Clean text zonder JSON
- shouldOpenArtifact(): Confidence check (≥0.7)
- getConfidenceLabel(): "Zeer zeker", "Redelijk zeker", etc.
- validateArtifactType(): Intent/artifact type matching
Components Updated:
- components/swift/chat/chat-panel.tsx
- Action parsing in onDone callback
- setPendingAction voor artifact opening (E3.S6)
- Console logging: "[ChatPanel] Action detected"
- components/swift/chat/chat-message.tsx
- Action badge met Sparkles icon
- Intent label (Dagnotitie, Patiënt zoeken, Overdracht)
- CheckCircle icon voor high confidence (≥0.7)
- Confidence label display
- stores/swift-store.ts
- updateLastMessage(): Optional action parameter
- Type-safe action assignment (null/undefined handling)
Features:
- JSON extraction via regex: /```json\s*\n([\s\S]*?)\n```/
- Zod schema: type, intent, entities, confidence, artifact
- Confidence thresholds: >0.9, 0.7-0.9, 0.5-0.7, <0.5
- Visual feedback: Sparkles + CheckCircle icons
- Cleaned text content (JSON removed from display)
- Action stored in message.action en pendingAction state
Action Schema:
```typescript
{
type: "action",
intent: "dagnotitie" | "zoeken" | "overdracht" | "unknown",
entities: {
patientName?: string,
patientId?: string,
category?: "medicatie" | "adl" | "gedrag" | "incident" | "observatie",
content?: string,
query?: string
},
confidence: number, // 0-1
artifact?: {
type: BlockType,
prefill: Record<string, any>
}
}
```
Build Status:
- ✅ pnpm build succesvol (geen type errors)
- Alleen bekende warnings (Supabase realtime, useCallback)
Voortgang: 46 SP / 85 SP (54%) - E3.S4 compleet
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Chat Message Component (v3.0)
|
|
*
|
|
* Displays individual chat messages with styling per message type.
|
|
* Supports user, assistant, system, and error message types.
|
|
*
|
|
* Epic: E2 (Chat Panel & Messages)
|
|
* Story: E2.S2 (ChatMessage component)
|
|
*/
|
|
|
|
import { format } from 'date-fns';
|
|
import { nl } from 'date-fns/locale';
|
|
import { CheckCircle2, Sparkles } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import type { ChatMessage as ChatMessageType } from '@/stores/swift-store';
|
|
import { getConfidenceLabel } from '@/lib/swift/action-parser';
|
|
|
|
// Message styling configuration per type
|
|
const MESSAGE_STYLES = {
|
|
user: {
|
|
container: 'self-end bg-amber-50 border-amber-200 text-slate-900',
|
|
borderRadius: 'rounded-2xl rounded-tr-sm',
|
|
maxWidth: 'max-w-[80%]',
|
|
},
|
|
assistant: {
|
|
container: 'self-start bg-slate-100 border-slate-200 text-slate-900',
|
|
borderRadius: 'rounded-2xl rounded-tl-sm',
|
|
maxWidth: 'max-w-[85%]',
|
|
},
|
|
system: {
|
|
container: 'self-center bg-transparent border-transparent text-slate-500 text-sm italic',
|
|
borderRadius: 'rounded-lg',
|
|
maxWidth: 'max-w-[90%]',
|
|
},
|
|
error: {
|
|
container: 'self-start bg-red-50 border-red-200 text-red-900',
|
|
borderRadius: 'rounded-2xl',
|
|
maxWidth: 'max-w-[80%]',
|
|
},
|
|
} as const;
|
|
|
|
interface ChatMessageProps {
|
|
message: ChatMessageType;
|
|
showTimestamp?: boolean;
|
|
}
|
|
|
|
export function ChatMessage({ message, showTimestamp = false }: ChatMessageProps) {
|
|
const styles = MESSAGE_STYLES[message.type];
|
|
|
|
// Don't show border for system messages
|
|
const showBorder = message.type !== 'system';
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col px-4 py-2.5 border transition-all',
|
|
styles.container,
|
|
styles.borderRadius,
|
|
styles.maxWidth,
|
|
!showBorder && 'border-none px-0 py-1'
|
|
)}
|
|
>
|
|
{/* Message content */}
|
|
<div className="whitespace-pre-wrap break-words leading-relaxed">
|
|
{message.content}
|
|
</div>
|
|
|
|
{/* Action badge (E3.S4) - show if action was detected */}
|
|
{message.action && message.type === 'assistant' && (
|
|
<div className="mt-2 pt-2 border-t border-slate-200">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<Sparkles className="w-3.5 h-3.5 text-amber-600" />
|
|
<span className="font-medium text-slate-700">
|
|
{message.action.intent === 'dagnotitie' && 'Dagnotitie'}
|
|
{message.action.intent === 'zoeken' && 'Patiënt zoeken'}
|
|
{message.action.intent === 'overdracht' && 'Overdracht'}
|
|
{message.action.intent === 'unknown' && 'Onbekend'}
|
|
</span>
|
|
{message.action.confidence >= 0.7 && (
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
|
|
)}
|
|
<span className="text-slate-500">
|
|
{getConfidenceLabel(message.action.confidence)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Timestamp (optional) */}
|
|
{showTimestamp && message.timestamp && (
|
|
<div className="text-xs text-slate-400 mt-1.5">
|
|
{format(message.timestamp, 'HH:mm', { locale: nl })}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|