refactor: rename swift → cortex in code and documentation
Complete rename of "swift" terminology to "cortex" across the codebase: Code Changes: - Rename directories: lib/swift → lib/cortex, components/swift → components/cortex - Rename API routes: /api/swift/* → /api/cortex/* - Rename page routes: /epd/swift → /epd/cortex - Rename store: swift-store.ts → cortex-store.ts Type Renames: - SwiftIntent → CortexIntent - SwiftStore → CortexStore - useSwiftStore → useCortexStore - SwiftContext → CortexContext - useSwiftVoice → useCortexVoice Documentation Updates (docs/intent/): - Safety Net → Nudge (Layer 3 rename) - SafetySuggestion → NudgeSuggestion - evaluateSafetyNet → evaluateNudge - SWIFT_* feature flags → CORTEX_* - All path references updated to match new structure Files affected: 47 files, ~700 lines changed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
colinislit
184
components/cortex/chat/chat-input.tsx
Normal file
184
components/cortex/chat/chat-input.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Chat Input Component (v3.0)
|
||||
*
|
||||
* Text input onderaan chat panel met Enter to submit en Shift+Enter voor nieuwe regel.
|
||||
*
|
||||
* Epic: E2 (Chat Panel & Messages)
|
||||
* Story: E2.S4 (ChatInput component)
|
||||
*/
|
||||
|
||||
import { useState, useRef, KeyboardEvent, ChangeEvent, forwardRef, useImperativeHandle } from 'react';
|
||||
import { Send, Mic } from 'lucide-react';
|
||||
import { useCortexStore } from '@/stores/cortex-store';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ChatInputProps {
|
||||
placeholder?: string;
|
||||
onSend?: (message: string) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface ChatInputHandle {
|
||||
focus: () => void;
|
||||
clear: () => void;
|
||||
}
|
||||
|
||||
export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(function ChatInput({
|
||||
placeholder = 'Typ of spreek wat je wilt doen...',
|
||||
onSend,
|
||||
disabled = false,
|
||||
}, ref) {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const addChatMessage = useCortexStore((s) => s.addChatMessage);
|
||||
|
||||
// Expose focus and clear methods to parent
|
||||
useImperativeHandle(ref, () => ({
|
||||
focus: () => {
|
||||
textareaRef.current?.focus();
|
||||
},
|
||||
clear: () => {
|
||||
setInputValue('');
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto';
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
// Handle input change and auto-resize
|
||||
const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setInputValue(e.target.value);
|
||||
|
||||
// Auto-resize textarea
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto';
|
||||
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
||||
}
|
||||
};
|
||||
|
||||
// Handle submit
|
||||
const handleSubmit = () => {
|
||||
const trimmedValue = inputValue.trim();
|
||||
if (!trimmedValue || disabled) return;
|
||||
|
||||
// Add user message to store
|
||||
addChatMessage({
|
||||
type: 'user',
|
||||
content: trimmedValue,
|
||||
});
|
||||
|
||||
// Call optional onSend callback
|
||||
onSend?.(trimmedValue);
|
||||
|
||||
// Clear input
|
||||
setInputValue('');
|
||||
|
||||
// Reset textarea height
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto';
|
||||
}
|
||||
|
||||
// Focus back on textarea
|
||||
textareaRef.current?.focus();
|
||||
};
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
// Enter to submit (unless Shift is pressed)
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
|
||||
// Escape to clear input
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
setInputValue('');
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
// Shift+Enter for new line (default behavior, no need to handle)
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-t border-slate-200 p-4 bg-white">
|
||||
<div className="relative flex items-end gap-2">
|
||||
{/* Textarea input */}
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={inputValue}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
rows={1}
|
||||
className={cn(
|
||||
'flex-1 px-4 py-3 pr-12',
|
||||
'rounded-lg border border-slate-300',
|
||||
'focus:border-brand-600 focus:ring-2 focus:ring-brand-600/20',
|
||||
'outline-none resize-none',
|
||||
'text-slate-900 placeholder:text-slate-400',
|
||||
'max-h-32 overflow-y-auto',
|
||||
'transition-colors',
|
||||
disabled && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
style={{ minHeight: '48px' }}
|
||||
/>
|
||||
|
||||
{/* Voice input button (placeholder for now) */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'absolute right-12 bottom-3',
|
||||
'text-slate-400 hover:text-slate-600',
|
||||
'transition-colors p-1.5 rounded-md hover:bg-slate-100',
|
||||
disabled && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
disabled={disabled}
|
||||
aria-label="Spraak invoer"
|
||||
title="Spraak invoer (komt in E5.S3)"
|
||||
>
|
||||
<Mic className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* Send button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={disabled || !inputValue.trim()}
|
||||
className={cn(
|
||||
'absolute right-3 bottom-3',
|
||||
'text-brand-600 hover:text-brand-700',
|
||||
'transition-all p-1.5 rounded-md',
|
||||
'hover:bg-brand-50 active:scale-95',
|
||||
(!inputValue.trim() || disabled) && 'opacity-30 cursor-not-allowed'
|
||||
)}
|
||||
aria-label="Verstuur bericht"
|
||||
title="Verstuur (Enter)"
|
||||
>
|
||||
<Send className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Helper text */}
|
||||
<p className="text-xs text-slate-400 mt-2">
|
||||
<kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
|
||||
⌘K
|
||||
</kbd>{' '}
|
||||
focus •{' '}
|
||||
<kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
|
||||
Esc
|
||||
</kbd>{' '}
|
||||
clear •{' '}
|
||||
<kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
|
||||
Enter
|
||||
</kbd>{' '}
|
||||
versturen
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
99
components/cortex/chat/chat-message.tsx
Normal file
99
components/cortex/chat/chat-message.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'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/cortex-store';
|
||||
import { getConfidenceLabel } from '@/lib/cortex/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>
|
||||
);
|
||||
}
|
||||
215
components/cortex/chat/chat-panel.tsx
Normal file
215
components/cortex/chat/chat-panel.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Chat Panel (v3.0)
|
||||
*
|
||||
* Chat interface met scrollable message list, auto-scroll, en scroll-lock detection.
|
||||
*
|
||||
* Epic: E2 (Chat Panel & Messages)
|
||||
* Story: E2.S3 (ChatPanel component - scrolling)
|
||||
*/
|
||||
|
||||
import { useRef, useEffect, useState, useCallback } from 'react';
|
||||
import { ArrowDown } from 'lucide-react';
|
||||
import { ChatMessage } from './chat-message';
|
||||
import { ChatInput, ChatInputHandle } from './chat-input';
|
||||
import { useCortexStore } from '@/stores/cortex-store';
|
||||
import { sendChatMessage } from '@/lib/cortex/chat-api';
|
||||
import { parseActionFromResponse, shouldOpenArtifact } from '@/lib/cortex/action-parser';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export function ChatPanel() {
|
||||
const chatMessages = useCortexStore((s) => s.chatMessages);
|
||||
const addChatMessage = useCortexStore((s) => s.addChatMessage);
|
||||
const updateLastMessage = useCortexStore((s) => s.updateLastMessage);
|
||||
const setStreaming = useCortexStore((s) => s.setStreaming);
|
||||
const isStreaming = useCortexStore((s) => s.isStreaming);
|
||||
const setPendingAction = useCortexStore((s) => s.setPendingAction);
|
||||
const activePatient = useCortexStore((s) => s.activePatient);
|
||||
const shift = useCortexStore((s) => s.shift);
|
||||
|
||||
// Refs for scrolling
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Ref for chat input (for keyboard shortcuts)
|
||||
const chatInputRef = useRef<ChatInputHandle>(null);
|
||||
|
||||
// Scroll-lock state
|
||||
const [isScrolledUp, setIsScrolledUp] = useState(false);
|
||||
const [showScrollButton, setShowScrollButton] = useState(false);
|
||||
|
||||
const hasMessages = chatMessages.length > 0;
|
||||
|
||||
// Scroll to bottom function
|
||||
const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior });
|
||||
setIsScrolledUp(false);
|
||||
setShowScrollButton(false);
|
||||
}, []);
|
||||
|
||||
// Detect scroll position (scroll-lock detection)
|
||||
const handleScroll = useCallback(() => {
|
||||
if (!scrollContainerRef.current) return;
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
|
||||
const isNearBottom = scrollHeight - scrollTop - clientHeight < 100; // 100px threshold
|
||||
|
||||
setIsScrolledUp(!isNearBottom);
|
||||
|
||||
// Show scroll button only if scrolled up AND there are messages
|
||||
setShowScrollButton(!isNearBottom && hasMessages);
|
||||
}, [hasMessages]);
|
||||
|
||||
// Auto-scroll to latest message when new message arrives (unless user scrolled up)
|
||||
useEffect(() => {
|
||||
if (!isScrolledUp && hasMessages) {
|
||||
scrollToBottom('smooth');
|
||||
}
|
||||
}, [chatMessages.length, isScrolledUp, hasMessages, scrollToBottom]);
|
||||
|
||||
// Initial scroll to bottom on mount
|
||||
useEffect(() => {
|
||||
scrollToBottom('auto');
|
||||
}, [scrollToBottom]);
|
||||
|
||||
// Global keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
||||
// ⌘K or Ctrl+K to focus chat input
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
chatInputRef.current?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleGlobalKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-white">
|
||||
{/* Chat messages area - scrollable */}
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
onScroll={handleScroll}
|
||||
className="flex-1 overflow-y-auto p-6 relative"
|
||||
>
|
||||
{hasMessages ? (
|
||||
<div className="flex flex-col space-y-3">
|
||||
{chatMessages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} showTimestamp />
|
||||
))}
|
||||
{/* Invisible element to scroll to */}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="max-w-md text-center text-slate-500">
|
||||
<div className="text-4xl mb-4">💬</div>
|
||||
<h3 className="text-lg font-medium text-slate-700 mb-2">
|
||||
Welkom bij Cortex Assistent
|
||||
</h3>
|
||||
<p className="text-sm mb-4">
|
||||
Typ of spreek wat je wilt doen...
|
||||
</p>
|
||||
<div className="text-left text-sm space-y-1 bg-slate-50 rounded-lg p-4">
|
||||
<p className="font-medium text-slate-700 mb-2">Voorbeelden:</p>
|
||||
<p>• “Notitie voor Jan: medicatie gegeven”</p>
|
||||
<p>• “Zoek Marie van den Berg”</p>
|
||||
<p>• “Maak overdracht voor deze dienst”</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scroll to bottom button */}
|
||||
{showScrollButton && (
|
||||
<button
|
||||
onClick={() => scrollToBottom('smooth')}
|
||||
className={cn(
|
||||
'absolute bottom-4 right-4 z-10',
|
||||
'bg-white border border-slate-300 rounded-full p-2',
|
||||
'shadow-lg hover:shadow-xl',
|
||||
'transition-all duration-200',
|
||||
'hover:bg-slate-50 active:scale-95',
|
||||
'flex items-center gap-2 text-sm text-slate-700 font-medium px-3 py-2'
|
||||
)}
|
||||
aria-label="Scroll naar laatste bericht"
|
||||
>
|
||||
<ArrowDown className="w-4 h-4" />
|
||||
<span>Scroll naar beneden</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Chat input */}
|
||||
<ChatInput
|
||||
ref={chatInputRef}
|
||||
disabled={isStreaming}
|
||||
onSend={async (message) => {
|
||||
// E3.S1: Test streaming API with mock response
|
||||
setStreaming(true);
|
||||
|
||||
// Add empty assistant message that will be filled by streaming
|
||||
addChatMessage({
|
||||
type: 'assistant',
|
||||
content: '',
|
||||
});
|
||||
|
||||
let accumulatedContent = '';
|
||||
|
||||
await sendChatMessage(
|
||||
message,
|
||||
chatMessages,
|
||||
{
|
||||
activePatient: activePatient ? {
|
||||
id: activePatient.id,
|
||||
first_name: activePatient.name_given?.[0] || '',
|
||||
last_name: activePatient.name_family || '',
|
||||
} : null,
|
||||
shift,
|
||||
},
|
||||
(chunk) => {
|
||||
// On each chunk, append to accumulated content and update last message
|
||||
accumulatedContent += chunk;
|
||||
updateLastMessage(accumulatedContent);
|
||||
},
|
||||
() => {
|
||||
// On done - parse action from complete response
|
||||
setStreaming(false);
|
||||
|
||||
// E3.S4: Parse action object from AI response
|
||||
const parsed = parseActionFromResponse(accumulatedContent);
|
||||
|
||||
if (parsed.action) {
|
||||
console.log('[ChatPanel] Action detected:', parsed.action);
|
||||
|
||||
// Update last message with cleaned text content and action
|
||||
updateLastMessage(parsed.textContent, parsed.action);
|
||||
|
||||
// Store action in pendingAction for artifact opening (E3.S6)
|
||||
if (shouldOpenArtifact(parsed.action.confidence)) {
|
||||
setPendingAction(parsed.action);
|
||||
console.log('[ChatPanel] Pending action set (confidence:', parsed.action.confidence, ')');
|
||||
} else {
|
||||
console.log('[ChatPanel] Action confidence too low:', parsed.action.confidence);
|
||||
}
|
||||
} else {
|
||||
console.log('[ChatPanel] No action detected in response');
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
// On error
|
||||
setStreaming(false);
|
||||
addChatMessage({
|
||||
type: 'error',
|
||||
content: `Er ging iets mis: ${error}`,
|
||||
});
|
||||
}
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user