Epic 4 Story 1 compleet: Basis structuur voor meerdere artifacts met tabs.
E4.S1 - ArtifactContainer Component (5 SP)
- Artifact interface gedefineerd in store
- ArtifactTab component met active state en close button
- ArtifactContainer met conditional tab rendering
- Helper functies voor artifact rendering en titels
Nieuwe Components:
- components/swift/artifacts/artifact-tab.tsx (60 regels)
- Tab UI met title, active state, close button
- Hover effects en opacity animations
- Min/max width, title truncation met tooltip
- Stop propagation op close click
- components/swift/artifacts/artifact-container.tsx (127 regels)
- Props: artifacts[], activeArtifactId, onSelect, onClose
- Tabs alleen bij >1 artifact
- renderArtifactBlock(): switch op artifact type
- getArtifactTitle(): user-friendly titles met patient naam
- Placeholder state wanneer geen artifacts
Artifact Interface:
```typescript
interface Artifact {
id: string;
type: BlockType;
prefill: BlockPrefillData;
title: string;
createdAt: Date;
}
```
Features:
- Tab rendering: alleen bij meerdere artifacts
- Active tab styling: amber-500 border bottom
- Close button: opacity 0 → 100 on hover/active
- Title generation: "Dagnotitie - Jan" voor context
- Block rendering: dagnotitie, zoeken, overdracht, fallback
- Placeholder: "Artifacts verschijnen hier" met voorbeelden
- Responsive: min-w-[140px] max-w-[200px] per tab
Tab Styling:
- Active: bg-white + border-b-2 border-b-amber-500
- Hover: bg-slate-50
- Close button: group-hover:opacity-100
- Text: text-sm font-medium truncate
Build Status:
- ✅ pnpm build succesvol (geen type errors)
- Alleen bekende warnings (Supabase realtime, useCallback)
Note: E4.S1 definieert structuur. E4.S2 voegt store management toe
(openArtifacts[], activeArtifactId, openArtifact(), closeArtifact()).
Voortgang: 53 SP / 85 SP (62%) - 17/31 stories compleet, 2 geskipt
Next: E4.S2 (Artifact lifecycle management) - Store state & actions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
275 lines
6.6 KiB
TypeScript
275 lines
6.6 KiB
TypeScript
import { create } from 'zustand';
|
|
import { devtools } from 'zustand/middleware';
|
|
import type { Database } from '@/lib/supabase/database.types';
|
|
import type { VerpleegkundigCategory } from '@/lib/types/report';
|
|
|
|
// Database types
|
|
export type Patient = Database['public']['Tables']['patients']['Row'];
|
|
|
|
// Swift-specific types
|
|
export type ShiftType = 'nacht' | 'ochtend' | 'middag' | 'avond';
|
|
|
|
export type SwiftIntent =
|
|
| 'dagnotitie'
|
|
| 'zoeken'
|
|
| 'overdracht'
|
|
| 'unknown';
|
|
|
|
export type BlockType = Exclude<SwiftIntent, 'unknown'> | 'fallback';
|
|
|
|
// Chat types (v3.0)
|
|
export type ChatMessageType = 'user' | 'assistant' | 'system' | 'error';
|
|
|
|
export interface ChatMessage {
|
|
id: string;
|
|
type: ChatMessageType;
|
|
content: string;
|
|
timestamp: Date;
|
|
action?: ChatAction; // Optional action attached to assistant messages
|
|
}
|
|
|
|
export interface ChatAction {
|
|
intent: SwiftIntent;
|
|
entities: ExtractedEntities;
|
|
confidence: number;
|
|
artifact?: {
|
|
type: BlockType;
|
|
prefill: BlockPrefillData;
|
|
};
|
|
}
|
|
|
|
// Extracted entities from user input
|
|
export interface ExtractedEntities {
|
|
patientName?: string;
|
|
patientId?: string;
|
|
category?: VerpleegkundigCategory;
|
|
content?: string;
|
|
}
|
|
|
|
// Block prefill data
|
|
export interface BlockPrefillData extends ExtractedEntities {
|
|
// Additional prefill data specific to blocks
|
|
}
|
|
|
|
// Artifact type (E4 - Multiple artifacts support)
|
|
export interface Artifact {
|
|
id: string;
|
|
type: BlockType;
|
|
prefill: BlockPrefillData;
|
|
title: string;
|
|
createdAt: Date;
|
|
}
|
|
|
|
// Recent action for the Recent Strip
|
|
export interface RecentAction {
|
|
id: string;
|
|
intent: SwiftIntent;
|
|
label: string;
|
|
timestamp: Date;
|
|
patientName?: string;
|
|
}
|
|
|
|
// Store interface
|
|
interface SwiftStore {
|
|
// Context
|
|
activePatient: Patient | null;
|
|
shift: ShiftType;
|
|
|
|
// Block state
|
|
activeBlock: BlockType | null;
|
|
prefillData: BlockPrefillData;
|
|
isBlockLoading: boolean;
|
|
|
|
// Input state
|
|
inputValue: string;
|
|
isVoiceActive: boolean;
|
|
|
|
// Recent actions
|
|
recentActions: RecentAction[];
|
|
|
|
// Chat state (v3.0)
|
|
chatMessages: ChatMessage[];
|
|
isStreaming: boolean;
|
|
pendingAction: ChatAction | null;
|
|
|
|
// Context actions
|
|
setActivePatient: (patient: Patient | null) => void;
|
|
setShift: (shift: ShiftType) => void;
|
|
|
|
// Block actions
|
|
openBlock: (type: BlockType, prefill?: BlockPrefillData) => void;
|
|
closeBlock: () => void;
|
|
setBlockLoading: (loading: boolean) => void;
|
|
|
|
// Input actions
|
|
setInputValue: (value: string) => void;
|
|
setVoiceActive: (active: boolean) => void;
|
|
clearInput: () => void;
|
|
|
|
// Recent actions
|
|
addRecentAction: (action: Omit<RecentAction, 'id' | 'timestamp'>) => void;
|
|
|
|
// Chat actions (v3.0)
|
|
addChatMessage: (message: Omit<ChatMessage, 'id' | 'timestamp'>) => void;
|
|
updateLastMessage: (content: string, action?: ChatAction | null) => void;
|
|
clearChat: () => void;
|
|
setStreaming: (streaming: boolean) => void;
|
|
setPendingAction: (action: ChatAction | null) => void;
|
|
|
|
// Reset
|
|
reset: () => void;
|
|
}
|
|
|
|
// Helper to calculate current shift based on time
|
|
function getCurrentShift(): ShiftType {
|
|
const hour = new Date().getHours();
|
|
if (hour >= 0 && hour < 7) return 'nacht';
|
|
if (hour >= 7 && hour < 12) return 'ochtend';
|
|
if (hour >= 12 && hour < 17) return 'middag';
|
|
return 'avond';
|
|
}
|
|
|
|
// Initial state
|
|
const initialState = {
|
|
activePatient: null,
|
|
shift: getCurrentShift(),
|
|
activeBlock: null,
|
|
prefillData: {},
|
|
isBlockLoading: false,
|
|
inputValue: '',
|
|
isVoiceActive: false,
|
|
recentActions: [],
|
|
// Chat state (v3.0)
|
|
chatMessages: [],
|
|
isStreaming: false,
|
|
pendingAction: null,
|
|
};
|
|
|
|
// Create the store
|
|
export const useSwiftStore = create<SwiftStore>()(
|
|
devtools(
|
|
(set, get) => ({
|
|
...initialState,
|
|
|
|
// Context actions
|
|
setActivePatient: (patient) => set({ activePatient: patient }, false, 'setActivePatient'),
|
|
|
|
setShift: (shift) => set({ shift }, false, 'setShift'),
|
|
|
|
// Block actions
|
|
openBlock: (type, prefill = {}) => {
|
|
set(
|
|
{
|
|
activeBlock: type,
|
|
prefillData: prefill,
|
|
isBlockLoading: false,
|
|
},
|
|
false,
|
|
'openBlock'
|
|
);
|
|
},
|
|
|
|
closeBlock: () => {
|
|
set(
|
|
{
|
|
activeBlock: null,
|
|
prefillData: {},
|
|
isBlockLoading: false,
|
|
},
|
|
false,
|
|
'closeBlock'
|
|
);
|
|
},
|
|
|
|
setBlockLoading: (loading) => set({ isBlockLoading: loading }, false, 'setBlockLoading'),
|
|
|
|
// Input actions
|
|
setInputValue: (value) => set({ inputValue: value }, false, 'setInputValue'),
|
|
|
|
setVoiceActive: (active) => set({ isVoiceActive: active }, false, 'setVoiceActive'),
|
|
|
|
clearInput: () => set({ inputValue: '' }, false, 'clearInput'),
|
|
|
|
// Recent actions
|
|
addRecentAction: (action) => {
|
|
const newAction: RecentAction = {
|
|
...action,
|
|
id: crypto.randomUUID(),
|
|
timestamp: new Date(),
|
|
};
|
|
|
|
set(
|
|
(state) => ({
|
|
recentActions: [newAction, ...state.recentActions].slice(0, 5),
|
|
}),
|
|
false,
|
|
'addRecentAction'
|
|
);
|
|
},
|
|
|
|
// Chat actions (v3.0)
|
|
addChatMessage: (message) => {
|
|
const newMessage: ChatMessage = {
|
|
...message,
|
|
id: crypto.randomUUID(),
|
|
timestamp: new Date(),
|
|
};
|
|
|
|
set(
|
|
(state) => ({
|
|
chatMessages: [...state.chatMessages, newMessage],
|
|
}),
|
|
false,
|
|
'addChatMessage'
|
|
);
|
|
},
|
|
|
|
updateLastMessage: (content, action?) => {
|
|
set(
|
|
(state) => {
|
|
const messages = [...state.chatMessages];
|
|
if (messages.length > 0) {
|
|
const updatedMessage: ChatMessage = {
|
|
...messages[messages.length - 1],
|
|
content,
|
|
};
|
|
|
|
// Only add action if it's not null/undefined
|
|
if (action !== undefined && action !== null) {
|
|
updatedMessage.action = action;
|
|
}
|
|
|
|
messages[messages.length - 1] = updatedMessage;
|
|
}
|
|
return { chatMessages: messages };
|
|
},
|
|
false,
|
|
'updateLastMessage'
|
|
);
|
|
},
|
|
|
|
clearChat: () => {
|
|
set(
|
|
{
|
|
chatMessages: [],
|
|
isStreaming: false,
|
|
pendingAction: null,
|
|
},
|
|
false,
|
|
'clearChat'
|
|
);
|
|
},
|
|
|
|
setStreaming: (streaming) => set({ isStreaming: streaming }, false, 'setStreaming'),
|
|
|
|
setPendingAction: (action) => set({ pendingAction: action }, false, 'setPendingAction'),
|
|
|
|
// Reset
|
|
reset: () => set(initialState, false, 'reset'),
|
|
}),
|
|
{
|
|
name: 'swift-store',
|
|
}
|
|
)
|
|
);
|