feat(swift): implementeer artifact lifecycle management (E4.S2)
Epic 4 Story 2 compleet: Meerdere artifacts met open/close/switch werken!
E4.S2 - Artifact Lifecycle Management (3 SP)
- Store state: openArtifacts[], activeArtifactId
- Store actions met max 3 artifacts logica
- ArtifactArea refactor naar ArtifactContainer
- CommandCenter integration met nieuwe artifact system
Store Updates (stores/swift-store.ts):
- openArtifacts: Artifact[] — Array van open artifacts
- activeArtifactId: string | null — Currently active artifact
- Initial state: [], null
Store Actions:
```typescript
openArtifact(artifact: Omit<Artifact, 'id' | 'createdAt'>) {
// Auto-generate ID + timestamp
// Max 3 artifacts: remove oldest if at capacity
// Set new artifact as active
}
closeArtifact(id: string) {
// Filter out artifact
// Auto-switch to last remaining if closing active
}
switchArtifact(id: string) {
// Verify artifact exists
// Set activeArtifactId
}
closeAllArtifacts() {
// Clear all artifacts + active ID
}
```
Features:
- Max 3 artifacts enforced (oldest removed at capacity)
- Auto-switch when closing active artifact
- Console logging voor debugging
- ID generation met crypto.randomUUID()
- Timestamp tracking met createdAt
Components Updated:
- components/swift/artifacts/artifact-area.tsx (30 regels)
- Simplified: alleen ArtifactContainer rendering
- Props: openArtifacts, activeArtifactId, switchArtifact, closeArtifact
- components/swift/command-center/command-center.tsx
- openArtifact() i.p.v. openBlock()
- getArtifactTitle() voor dynamic titles
- Escape: closeAllArtifacts() i.p.v. closeBlock()
- Artifact opening met title generation
Integration Flow:
1. Chat: AI genereert action met artifact data
2. ChatPanel: setPendingAction(action)
3. CommandCenter: useEffect detecteert pendingAction
4. CommandCenter: getArtifactTitle(type, prefill)
5. CommandCenter: openArtifact({ type, prefill, title })
6. Store: Auto-generate ID, check max 3, add to array
7. ArtifactArea: Renders ArtifactContainer met artifacts
8. ArtifactContainer: Shows tabs (if >1), renders active block
Console Logging:
- "[Store] Max 3 artifacts reached, removing oldest"
- "[Store] Opening artifact: dagnotitie Dagnotitie - Jan"
- "[Store] Closing artifact: [id] New active: [id]"
- "[Store] Switching to artifact: [id]"
- "[Store] Cannot switch to artifact: [id] (not found)"
Build Status:
- ✅ pnpm build succesvol (geen type errors)
- Alleen bekende warnings (Supabase realtime, useCallback)
Voortgang: 56 SP / 85 SP (66%) - 18/31 stories compleet, 2 geskipt
Next: E4.S3 (Slide-in animatie) - 200ms ease-out transitions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -92,15 +92,25 @@ interface SwiftStore {
|
||||
isStreaming: boolean;
|
||||
pendingAction: ChatAction | null;
|
||||
|
||||
// Artifact state (E4 - Multiple artifacts support)
|
||||
openArtifacts: Artifact[];
|
||||
activeArtifactId: string | null;
|
||||
|
||||
// Context actions
|
||||
setActivePatient: (patient: Patient | null) => void;
|
||||
setShift: (shift: ShiftType) => void;
|
||||
|
||||
// Block actions
|
||||
// Block actions (legacy - will be replaced by artifact actions)
|
||||
openBlock: (type: BlockType, prefill?: BlockPrefillData) => void;
|
||||
closeBlock: () => void;
|
||||
setBlockLoading: (loading: boolean) => void;
|
||||
|
||||
// Artifact actions (E4.S2)
|
||||
openArtifact: (artifact: Omit<Artifact, 'id' | 'createdAt'>) => void;
|
||||
closeArtifact: (id: string) => void;
|
||||
switchArtifact: (id: string) => void;
|
||||
closeAllArtifacts: () => void;
|
||||
|
||||
// Input actions
|
||||
setInputValue: (value: string) => void;
|
||||
setVoiceActive: (active: boolean) => void;
|
||||
@@ -143,6 +153,9 @@ const initialState = {
|
||||
chatMessages: [],
|
||||
isStreaming: false,
|
||||
pendingAction: null,
|
||||
// Artifact state (E4)
|
||||
openArtifacts: [],
|
||||
activeArtifactId: null,
|
||||
};
|
||||
|
||||
// Create the store
|
||||
@@ -264,6 +277,89 @@ export const useSwiftStore = create<SwiftStore>()(
|
||||
|
||||
setPendingAction: (action) => set({ pendingAction: action }, false, 'setPendingAction'),
|
||||
|
||||
// Artifact actions (E4.S2)
|
||||
openArtifact: (artifactData) => {
|
||||
set(
|
||||
(state) => {
|
||||
// Create artifact with unique ID and timestamp
|
||||
const newArtifact: Artifact = {
|
||||
...artifactData,
|
||||
id: crypto.randomUUID(),
|
||||
createdAt: new Date(),
|
||||
};
|
||||
|
||||
let artifacts = [...state.openArtifacts];
|
||||
|
||||
// Max 3 artifacts - remove oldest if at capacity
|
||||
if (artifacts.length >= 3) {
|
||||
console.log('[Store] Max 3 artifacts reached, removing oldest');
|
||||
artifacts = artifacts.slice(1); // Remove first (oldest)
|
||||
}
|
||||
|
||||
console.log('[Store] Opening artifact:', newArtifact.type, newArtifact.title);
|
||||
|
||||
return {
|
||||
openArtifacts: [...artifacts, newArtifact],
|
||||
activeArtifactId: newArtifact.id,
|
||||
};
|
||||
},
|
||||
false,
|
||||
'openArtifact'
|
||||
);
|
||||
},
|
||||
|
||||
closeArtifact: (id) => {
|
||||
set(
|
||||
(state) => {
|
||||
const artifacts = state.openArtifacts.filter((a) => a.id !== id);
|
||||
|
||||
// If closing active artifact, switch to last remaining artifact
|
||||
let newActiveId = state.activeArtifactId;
|
||||
if (state.activeArtifactId === id) {
|
||||
newActiveId = artifacts.length > 0 ? artifacts[artifacts.length - 1].id : null;
|
||||
}
|
||||
|
||||
console.log('[Store] Closing artifact:', id, 'New active:', newActiveId);
|
||||
|
||||
return {
|
||||
openArtifacts: artifacts,
|
||||
activeArtifactId: newActiveId,
|
||||
};
|
||||
},
|
||||
false,
|
||||
'closeArtifact'
|
||||
);
|
||||
},
|
||||
|
||||
switchArtifact: (id) => {
|
||||
set(
|
||||
(state) => {
|
||||
// Verify artifact exists
|
||||
const exists = state.openArtifacts.some((a) => a.id === id);
|
||||
if (!exists) {
|
||||
console.warn('[Store] Cannot switch to artifact:', id, '(not found)');
|
||||
return state;
|
||||
}
|
||||
|
||||
console.log('[Store] Switching to artifact:', id);
|
||||
return { activeArtifactId: id };
|
||||
},
|
||||
false,
|
||||
'switchArtifact'
|
||||
);
|
||||
},
|
||||
|
||||
closeAllArtifacts: () => {
|
||||
set(
|
||||
{
|
||||
openArtifacts: [],
|
||||
activeArtifactId: null,
|
||||
},
|
||||
false,
|
||||
'closeAllArtifacts'
|
||||
);
|
||||
},
|
||||
|
||||
// Reset
|
||||
reset: () => set(initialState, false, 'reset'),
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user