chore: remove dead code command-input.tsx (376 lines)
Component was exported but never imported/used anywhere. v3.0 architecture uses chat-input.tsx instead. Voice features (useCortexVoice hook) remain available for future use. 🤖 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
@@ -1,375 +0,0 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Command Input
|
||||
*
|
||||
* Bottom input bar for text and voice commands.
|
||||
* Height: 64px (h-16)
|
||||
*
|
||||
* Features:
|
||||
* - Text input with dynamic placeholder
|
||||
* - Focus state with ring
|
||||
* - Send button (appears when input has value)
|
||||
* - Voice input with Deepgram streaming
|
||||
* - ⌘K shortcut hint
|
||||
*/
|
||||
|
||||
import { forwardRef, useState, useEffect, useRef } from 'react';
|
||||
import { useCortexStore } from '@/stores/cortex-store';
|
||||
import { useCortexVoice } from '@/lib/cortex/use-cortex-voice';
|
||||
import type { BlockType } from '@/lib/cortex/types';
|
||||
import { Mic, MicOff, Send, Loader2 } from 'lucide-react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { safeFetch, getErrorInfo } from '@/lib/cortex/error-handler';
|
||||
import { routeIntentToArtifact } from '@/lib/cortex/action-parser';
|
||||
import { usePatientSelection } from '@/lib/cortex/hooks/use-patient-selection';
|
||||
import type { PatientSearchResult } from '@/lib/cortex/hooks/use-patient-search';
|
||||
import { PatientMentionDropdown } from './patient-mention-dropdown';
|
||||
|
||||
export const CommandInput = forwardRef<HTMLInputElement>(function CommandInput(_, ref) {
|
||||
const {
|
||||
inputValue,
|
||||
setInputValue,
|
||||
clearInput,
|
||||
activePatient,
|
||||
activeBlock,
|
||||
isVoiceActive,
|
||||
openBlock,
|
||||
openArtifact,
|
||||
addRecentAction,
|
||||
} = useCortexStore();
|
||||
const { toast } = useToast();
|
||||
|
||||
const {
|
||||
isRecording,
|
||||
isConnecting,
|
||||
isConnected,
|
||||
error: voiceError,
|
||||
startRecording,
|
||||
stopRecording,
|
||||
analyserNode,
|
||||
isBrowserSupported,
|
||||
} = useCortexVoice();
|
||||
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const waveformRef = useRef<HTMLCanvasElement>(null);
|
||||
const animationRef = useRef<number | null>(null);
|
||||
|
||||
// @mention state (E2.S1)
|
||||
const [mentionState, setMentionState] = useState<{
|
||||
query: string;
|
||||
startIndex: number;
|
||||
} | null>(null);
|
||||
|
||||
// Patient selection hook (E2.S3)
|
||||
const { selectPatient } = usePatientSelection({
|
||||
showSuccessToast: false, // Don't show toast for @mention selection
|
||||
});
|
||||
|
||||
const hasValue = inputValue.trim().length > 0;
|
||||
|
||||
// @mention detection (E2.S1)
|
||||
const detectMention = (value: string) => {
|
||||
const lastAtIndex = value.lastIndexOf('@');
|
||||
if (lastAtIndex !== -1) {
|
||||
const afterAt = value.slice(lastAtIndex + 1);
|
||||
// Active if: no space after @, and at least 1 char
|
||||
if (!afterAt.includes(' ') && afterAt.length > 0) {
|
||||
setMentionState({ query: afterAt, startIndex: lastAtIndex });
|
||||
return;
|
||||
}
|
||||
}
|
||||
setMentionState(null);
|
||||
};
|
||||
|
||||
// Handle input change with @mention detection
|
||||
const handleInputChange = (value: string) => {
|
||||
setInputValue(value);
|
||||
detectMention(value);
|
||||
};
|
||||
|
||||
// Handle @mention selection (E2.S3)
|
||||
const handleMentionSelect = (patient: PatientSearchResult) => {
|
||||
if (!mentionState) return;
|
||||
|
||||
// 1. Replace @query with @name in input
|
||||
const before = inputValue.slice(0, mentionState.startIndex);
|
||||
const after = inputValue.slice(mentionState.startIndex + mentionState.query.length + 1);
|
||||
const newValue = `${before}@${patient.name} ${after}`.trim();
|
||||
setInputValue(newValue);
|
||||
|
||||
// 2. Set activePatient via selection hook
|
||||
selectPatient(patient);
|
||||
|
||||
// 3. Close dropdown
|
||||
setMentionState(null);
|
||||
};
|
||||
|
||||
// Waveform visualization
|
||||
useEffect(() => {
|
||||
if (!analyserNode || !waveformRef.current || !isRecording) {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
animationRef.current = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = waveformRef.current;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
const bufferLength = analyserNode.frequencyBinCount;
|
||||
const dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
const draw = () => {
|
||||
if (!isRecording) return;
|
||||
|
||||
animationRef.current = requestAnimationFrame(draw);
|
||||
analyserNode.getByteFrequencyData(dataArray);
|
||||
|
||||
ctx.fillStyle = 'rgb(248, 250, 252)'; // slate-50
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const barWidth = (canvas.width / bufferLength) * 2.5;
|
||||
let x = 0;
|
||||
|
||||
for (let i = 0; i < bufferLength; i++) {
|
||||
const barHeight = (dataArray[i] / 255) * canvas.height;
|
||||
|
||||
// Gradient from blue to red based on amplitude
|
||||
const hue = 220 - (dataArray[i] / 255) * 40;
|
||||
ctx.fillStyle = `hsl(${hue}, 70%, 60%)`;
|
||||
|
||||
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
|
||||
x += barWidth + 1;
|
||||
}
|
||||
};
|
||||
|
||||
draw();
|
||||
|
||||
return () => {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, [analyserNode, isRecording]);
|
||||
|
||||
// Dynamic placeholder based on context
|
||||
const getPlaceholder = () => {
|
||||
if (isRecording) return 'Luisteren...';
|
||||
if (isConnecting) return 'Verbinden met spraakherkenning...';
|
||||
if (activePatient) {
|
||||
return `Actie voor ${activePatient.name_given[0]}... (bijv. "notitie medicatie")`;
|
||||
}
|
||||
return 'Typ of spreek je intentie... (bijv. "notitie jan medicatie")';
|
||||
};
|
||||
|
||||
const handleSubmit = async (e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
if (!hasValue || isProcessing) return;
|
||||
|
||||
// Stop recording if active
|
||||
if (isRecording) {
|
||||
stopRecording();
|
||||
}
|
||||
|
||||
const inputText = inputValue.trim();
|
||||
setIsProcessing(true);
|
||||
|
||||
try {
|
||||
// Call intent classification API
|
||||
const response = await safeFetch(
|
||||
'/api/intent/classify',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ input: inputText }),
|
||||
},
|
||||
{ operation: 'Intent classificeren' }
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
const { intent, confidence, entities } = result;
|
||||
|
||||
// Route intent to artifact using Epic 5.S1 routing logic
|
||||
const artifactConfig = routeIntentToArtifact(intent, entities, confidence);
|
||||
|
||||
if (artifactConfig) {
|
||||
// Open artifact with routing configuration
|
||||
openArtifact({
|
||||
type: artifactConfig.type,
|
||||
title: artifactConfig.title,
|
||||
prefill: artifactConfig.prefill,
|
||||
});
|
||||
|
||||
// Add to recent actions
|
||||
addRecentAction({
|
||||
intent,
|
||||
label: inputText.slice(0, 50), // Truncate for display
|
||||
patientName: entities.patientName,
|
||||
});
|
||||
|
||||
clearInput();
|
||||
} else {
|
||||
// Low confidence or missing required entities - show FallbackPicker
|
||||
openBlock('fallback', { content: inputText });
|
||||
clearInput();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error processing intent:', error);
|
||||
const statusCode = (error as any)?.statusCode;
|
||||
const errorInfo = getErrorInfo(error, {
|
||||
operation: 'Intent classificeren',
|
||||
statusCode,
|
||||
});
|
||||
|
||||
// Show error toast
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: errorInfo.title,
|
||||
description: errorInfo.description,
|
||||
});
|
||||
|
||||
// On error, show FallbackPicker so user can choose
|
||||
// This ensures the user's input is not lost
|
||||
openBlock('fallback', { content: inputText });
|
||||
clearInput();
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVoiceToggle = () => {
|
||||
if (isRecording) {
|
||||
stopRecording();
|
||||
} else {
|
||||
startRecording();
|
||||
}
|
||||
};
|
||||
|
||||
// Keyboard shortcut: Cmd/Ctrl+Enter to submit
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Cmd/Ctrl+Enter: submit command
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [handleSubmit]);
|
||||
|
||||
const isDisabled = isProcessing || activeBlock !== null;
|
||||
|
||||
return (
|
||||
<footer className="h-16 border-t border-slate-200 flex items-center px-4 shrink-0 bg-white">
|
||||
<form onSubmit={handleSubmit} className="flex-1 flex items-center gap-2">
|
||||
{/* Input wrapper with optional waveform and @mention dropdown */}
|
||||
<div className="relative flex-1">
|
||||
{/* @mention dropdown (E2.S2) */}
|
||||
{mentionState && (
|
||||
<PatientMentionDropdown
|
||||
query={mentionState.query}
|
||||
onSelect={handleMentionSelect}
|
||||
onClose={() => setMentionState(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Waveform canvas (shown when recording) */}
|
||||
{isRecording && (
|
||||
<canvas
|
||||
ref={waveformRef}
|
||||
width={200}
|
||||
height={40}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 rounded opacity-60"
|
||||
/>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={ref}
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e) => handleInputChange(e.target.value)}
|
||||
placeholder={getPlaceholder()}
|
||||
disabled={isDisabled}
|
||||
className={`w-full bg-white border rounded-xl py-3 text-slate-900 placeholder:text-slate-400
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-all duration-200
|
||||
${isRecording ? 'pl-[220px] pr-12 border-red-500/50' : 'pl-4 pr-12 border-slate-300'}`}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{/* Status indicators */}
|
||||
{!hasValue && !isRecording && !isConnecting && (
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-600 pointer-events-none hidden sm:block">
|
||||
⌘K
|
||||
</span>
|
||||
)}
|
||||
{isConnecting && (
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-amber-500 flex items-center gap-1">
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
Verbinden
|
||||
</span>
|
||||
)}
|
||||
{voiceError && (
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-red-400 max-w-[150px] truncate">
|
||||
{voiceError}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Send button - appears when has value */}
|
||||
{hasValue && (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isProcessing}
|
||||
className="p-3 rounded-xl bg-blue-600 hover:bg-blue-500 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Verstuur (Enter)"
|
||||
>
|
||||
{isProcessing ? (
|
||||
<Loader2 size={20} className="animate-spin" />
|
||||
) : (
|
||||
<Send size={20} />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Voice button */}
|
||||
{isBrowserSupported ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleVoiceToggle}
|
||||
disabled={isDisabled || isConnecting}
|
||||
className={`p-3 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${
|
||||
isRecording
|
||||
? 'bg-red-600 hover:bg-red-500 text-white ring-4 ring-red-600/30'
|
||||
: 'bg-slate-100 hover:bg-slate-200 text-slate-600'
|
||||
}`}
|
||||
title={isRecording ? 'Stop opname' : 'Start voice input'}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<Loader2 size={20} className="animate-spin" />
|
||||
) : isRecording ? (
|
||||
<MicOff size={20} />
|
||||
) : (
|
||||
<Mic size={20} />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
className="p-3 rounded-xl bg-slate-100 text-slate-400 cursor-not-allowed"
|
||||
title="Spraakherkenning niet ondersteund in deze browser"
|
||||
>
|
||||
<MicOff size={20} />
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</footer>
|
||||
);
|
||||
});
|
||||
@@ -3,7 +3,6 @@
|
||||
*/
|
||||
|
||||
export { CommandCenter } from './command-center';
|
||||
export { CommandInput } from './command-input';
|
||||
export { ContextBar } from './context-bar';
|
||||
export { CanvasArea } from './canvas-area';
|
||||
export { RecentStrip } from './recent-strip';
|
||||
|
||||
Reference in New Issue
Block a user