134 lines
4.0 KiB
TypeScript
134 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Artifact Container Component
|
|
*
|
|
* Container die meerdere artifacts kan beheren met tabs.
|
|
* Max 3 artifacts tegelijk, tabs alleen zichtbaar bij >1 artifact.
|
|
*
|
|
* Epic: E4 (Artifact Area & Tabs)
|
|
* Story: E4.S1 (ArtifactContainer component)
|
|
*/
|
|
|
|
import { ArtifactTab } from './artifact-tab';
|
|
import { DagnotatieBlock } from '../blocks/dagnotitie-block';
|
|
import { ZoekenBlock } from '../blocks/zoeken-block';
|
|
import { OverdrachtBlock } from '../blocks/overdracht-block';
|
|
import { PatientDashboardBlock } from '../blocks/patient-dashboard-block';
|
|
import { FallbackPicker } from '../blocks/fallback-picker';
|
|
import type { Artifact, BlockType } from '@/stores/swift-store';
|
|
|
|
interface ArtifactContainerProps {
|
|
artifacts: Artifact[];
|
|
activeArtifactId: string | null;
|
|
onSelectArtifact: (id: string) => void;
|
|
onCloseArtifact: (id: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Render the appropriate block component based on artifact type
|
|
*/
|
|
function renderArtifactBlock(artifact: Artifact) {
|
|
switch (artifact.type) {
|
|
case 'dagnotitie':
|
|
return <DagnotatieBlock key={artifact.id} prefill={artifact.prefill} />;
|
|
case 'zoeken':
|
|
return <ZoekenBlock key={artifact.id} prefill={artifact.prefill} />;
|
|
case 'overdracht':
|
|
return <OverdrachtBlock key={artifact.id} prefill={artifact.prefill} />;
|
|
case 'patient-dashboard':
|
|
return <PatientDashboardBlock key={artifact.id} prefill={artifact.prefill} />;
|
|
case 'fallback':
|
|
return <FallbackPicker key={artifact.id} originalInput={artifact.prefill?.content} />;
|
|
default:
|
|
return (
|
|
<div className="p-4 text-slate-500">
|
|
Onbekend artifact type: {artifact.type}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get user-friendly title for artifact type
|
|
*/
|
|
export function getArtifactTitle(type: BlockType, prefill?: any): string {
|
|
switch (type) {
|
|
case 'dagnotitie':
|
|
return prefill?.patientName
|
|
? `Dagnotitie - ${prefill.patientName}`
|
|
: 'Dagnotitie';
|
|
case 'zoeken':
|
|
return 'Patiënt Zoeken';
|
|
case 'overdracht':
|
|
return 'Dienst Overdracht';
|
|
case 'fallback':
|
|
return 'Kies een actie';
|
|
case 'patient-dashboard':
|
|
return prefill?.patientName
|
|
? `Dashboard - ${prefill.patientName}`
|
|
: 'Patiëntoverzicht';
|
|
default:
|
|
return 'Artifact';
|
|
}
|
|
}
|
|
|
|
export function ArtifactContainer({
|
|
artifacts,
|
|
activeArtifactId,
|
|
onSelectArtifact,
|
|
onCloseArtifact,
|
|
}: ArtifactContainerProps) {
|
|
// Find active artifact
|
|
const activeArtifact = artifacts.find((a) => a.id === activeArtifactId);
|
|
|
|
// Show placeholder if no artifacts
|
|
if (artifacts.length === 0) {
|
|
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">
|
|
Vraag me iets in de chat om te beginnen!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex flex-col bg-slate-50">
|
|
{/* Tabs - alleen tonen bij >1 artifact */}
|
|
{artifacts.length > 1 && (
|
|
<div className="flex bg-white border-b border-slate-200">
|
|
{artifacts.map((artifact) => (
|
|
<ArtifactTab
|
|
key={artifact.id}
|
|
artifact={artifact}
|
|
isActive={artifact.id === activeArtifactId}
|
|
onSelect={onSelectArtifact}
|
|
onClose={onCloseArtifact}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Active artifact content */}
|
|
<div className="flex-1 flex items-center justify-center p-6 overflow-y-auto">
|
|
{activeArtifact ? (
|
|
<div key={activeArtifact.id} className="artifact-enter w-full">
|
|
{renderArtifactBlock(activeArtifact)}
|
|
</div>
|
|
) : (
|
|
<div className="text-slate-500">
|
|
Selecteer een artifact om te bekijken
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|