1import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
2
3// Web Speech API types
4interface SpeechRecognitionEvent extends Event {
5 results: SpeechRecognitionResultList;
6 resultIndex: number;
7}
8
9interface SpeechRecognitionResultList {
10 length: number;
11 item(index: number): SpeechRecognitionResult;
12 [index: number]: SpeechRecognitionResult;
13}
14
15interface SpeechRecognitionResult {
16 isFinal: boolean;
17 length: number;
18 item(index: number): SpeechRecognitionAlternative;
19 [index: number]: SpeechRecognitionAlternative;
20}
21
22interface SpeechRecognitionAlternative {
23 transcript: string;
24 confidence: number;
25}
26
27interface SpeechRecognition extends EventTarget {
28 continuous: boolean;
29 interimResults: boolean;
30 lang: string;
31 onresult: ((event: SpeechRecognitionEvent) => void) | null;
32 onerror: ((event: Event & { error: string }) => void) | null;
33 onend: (() => void) | null;
34 start(): void;
35 stop(): void;
36 abort(): void;
37}
38
39declare global {
40 interface Window {
41 SpeechRecognition: new () => SpeechRecognition;
42 webkitSpeechRecognition: new () => SpeechRecognition;
43 }
44}
45
46interface MessageInputProps {
47 onSend: (message: string) => Promise<void>;
48 disabled?: boolean;
49 autoFocus?: boolean;
50 onFocus?: () => void;
51 injectedText?: string;
52 onClearInjectedText?: () => void;
53 /** If set, persist draft message to localStorage under this key */
54 persistKey?: string;
55}
56
57const PERSIST_KEY_PREFIX = "shelley_draft_";
58
59function MessageInput({
60 onSend,
61 disabled = false,
62 autoFocus = false,
63 onFocus,
64 injectedText,
65 onClearInjectedText,
66 persistKey,
67}: MessageInputProps) {
68 const [message, setMessage] = useState(() => {
69 // Load persisted draft if persistKey is set
70 if (persistKey) {
71 return localStorage.getItem(PERSIST_KEY_PREFIX + persistKey) || "";
72 }
73 return "";
74 });
75 const [submitting, setSubmitting] = useState(false);
76 const [uploadsInProgress, setUploadsInProgress] = useState(0);
77 const [dragCounter, setDragCounter] = useState(0);
78 const [isListening, setIsListening] = useState(false);
79 const [isSmallScreen, setIsSmallScreen] = useState(() => {
80 if (typeof window === "undefined") return false;
81 return window.innerWidth < 480;
82 });
83 const textareaRef = useRef<HTMLTextAreaElement>(null);
84 const fileInputRef = useRef<HTMLInputElement>(null);
85 const recognitionRef = useRef<SpeechRecognition | null>(null);
86 // Track the base text (before speech recognition started) and finalized speech text
87 const baseTextRef = useRef<string>("");
88 const finalizedTextRef = useRef<string>("");
89
90 // Check if speech recognition is available
91 const speechRecognitionAvailable =
92 typeof window !== "undefined" && (window.SpeechRecognition || window.webkitSpeechRecognition);
93
94 // Responsive placeholder text
95 const placeholderText = useMemo(
96 () => (isSmallScreen ? "Message..." : "Message, paste image, or attach file..."),
97 [isSmallScreen],
98 );
99
100 // Track screen size for responsive placeholder
101 useEffect(() => {
102 const handleResize = () => {
103 setIsSmallScreen(window.innerWidth < 480);
104 };
105 window.addEventListener("resize", handleResize);
106 return () => window.removeEventListener("resize", handleResize);
107 }, []);
108
109 const stopListening = useCallback(() => {
110 if (recognitionRef.current) {
111 recognitionRef.current.stop();
112 recognitionRef.current = null;
113 }
114 setIsListening(false);
115 }, []);
116
117 const startListening = useCallback(() => {
118 if (!speechRecognitionAvailable) return;
119
120 const SpeechRecognitionClass = window.SpeechRecognition || window.webkitSpeechRecognition;
121 const recognition = new SpeechRecognitionClass();
122
123 recognition.continuous = true;
124 recognition.interimResults = true;
125 recognition.lang = navigator.language || "en-US";
126
127 // Capture current message as base text
128 setMessage((current) => {
129 baseTextRef.current = current;
130 finalizedTextRef.current = "";
131 return current;
132 });
133
134 recognition.onresult = (event: SpeechRecognitionEvent) => {
135 let finalTranscript = "";
136 let interimTranscript = "";
137
138 for (let i = event.resultIndex; i < event.results.length; i++) {
139 const transcript = event.results[i][0].transcript;
140 if (event.results[i].isFinal) {
141 finalTranscript += transcript;
142 } else {
143 interimTranscript += transcript;
144 }
145 }
146
147 // Accumulate finalized text
148 if (finalTranscript) {
149 finalizedTextRef.current += finalTranscript;
150 }
151
152 // Build the full message: base + finalized + interim
153 const base = baseTextRef.current;
154 const needsSpace = base.length > 0 && !/\s$/.test(base);
155 const spacer = needsSpace ? " " : "";
156 const fullText = base + spacer + finalizedTextRef.current + interimTranscript;
157
158 setMessage(fullText);
159 };
160
161 recognition.onerror = (event) => {
162 console.error("Speech recognition error:", event.error);
163 stopListening();
164 };
165
166 recognition.onend = () => {
167 setIsListening(false);
168 recognitionRef.current = null;
169 };
170
171 recognitionRef.current = recognition;
172 recognition.start();
173 setIsListening(true);
174 }, [speechRecognitionAvailable, stopListening]);
175
176 const toggleListening = useCallback(() => {
177 if (isListening) {
178 stopListening();
179 } else {
180 startListening();
181 }
182 }, [isListening, startListening, stopListening]);
183
184 // Cleanup on unmount
185 useEffect(() => {
186 return () => {
187 if (recognitionRef.current) {
188 recognitionRef.current.abort();
189 }
190 };
191 }, []);
192
193 const uploadFile = async (file: File) => {
194 // Add a loading indicator at the end of the current message
195 const loadingText = `[uploading ${file.name}...]`;
196 setMessage((prev) => (prev ? prev + " " : "") + loadingText);
197 setUploadsInProgress((prev) => prev + 1);
198
199 try {
200 const formData = new FormData();
201 formData.append("file", file);
202
203 const response = await fetch("/api/upload", {
204 method: "POST",
205 headers: { "X-Shelley-Request": "1" },
206 body: formData,
207 });
208
209 if (!response.ok) {
210 throw new Error(`Upload failed: ${response.statusText}`);
211 }
212
213 const data = await response.json();
214
215 // Replace the loading placeholder with the actual file path
216 setMessage((currentMessage) => currentMessage.replace(loadingText, `[${data.path}]`));
217 } catch (error) {
218 console.error("Failed to upload file:", error);
219 // Replace loading indicator with error message
220 const errorText = `[upload failed: ${error instanceof Error ? error.message : "unknown error"}]`;
221 setMessage((currentMessage) => currentMessage.replace(loadingText, errorText));
222 } finally {
223 setUploadsInProgress((prev) => prev - 1);
224 }
225 };
226
227 const handlePaste = (event: React.ClipboardEvent) => {
228 // Check clipboard items (works on both desktop and mobile)
229 // Mobile browsers often don't populate clipboardData.files, but items works
230 const items = event.clipboardData?.items;
231 if (items) {
232 for (let i = 0; i < items.length; i++) {
233 const item = items[i];
234 if (item.kind === "file") {
235 const file = item.getAsFile();
236 if (file) {
237 event.preventDefault();
238 // Fire and forget - uploadFile handles state updates internally.
239 uploadFile(file);
240 return;
241 }
242 }
243 }
244 }
245 };
246
247 const handleDragOver = (event: React.DragEvent) => {
248 event.preventDefault();
249 event.stopPropagation();
250 };
251
252 const handleDragEnter = (event: React.DragEvent) => {
253 event.preventDefault();
254 event.stopPropagation();
255 setDragCounter((prev) => prev + 1);
256 };
257
258 const handleDragLeave = (event: React.DragEvent) => {
259 event.preventDefault();
260 event.stopPropagation();
261 setDragCounter((prev) => prev - 1);
262 };
263
264 const handleDrop = async (event: React.DragEvent) => {
265 event.preventDefault();
266 event.stopPropagation();
267 setDragCounter(0);
268
269 if (event.dataTransfer && event.dataTransfer.files.length > 0) {
270 // Process all dropped files
271 for (let i = 0; i < event.dataTransfer.files.length; i++) {
272 const file = event.dataTransfer.files[i];
273 await uploadFile(file);
274 }
275 }
276 };
277
278 const handleAttachClick = () => {
279 fileInputRef.current?.click();
280 };
281
282 const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
283 const files = event.target.files;
284 if (!files || files.length === 0) return;
285
286 for (let i = 0; i < files.length; i++) {
287 const file = files[i];
288 await uploadFile(file);
289 }
290
291 // Reset input so same file can be selected again
292 event.target.value = "";
293 };
294
295 // Auto-insert injected text (diff comments) directly into the textarea
296 useEffect(() => {
297 if (injectedText) {
298 setMessage((prev) => {
299 const needsNewline = prev.length > 0 && !prev.endsWith("\n");
300 return prev + (needsNewline ? "\n\n" : "") + injectedText;
301 });
302 onClearInjectedText?.();
303 // Focus the textarea after inserting
304 setTimeout(() => textareaRef.current?.focus(), 0);
305 }
306 }, [injectedText, onClearInjectedText]);
307
308 const handleSubmit = async (e: React.FormEvent) => {
309 e.preventDefault();
310 if (message.trim() && !disabled && !submitting && uploadsInProgress === 0) {
311 // Stop listening if we were recording
312 if (isListening) {
313 stopListening();
314 }
315
316 const messageToSend = message;
317 setSubmitting(true);
318 try {
319 await onSend(messageToSend);
320 // Only clear on success
321 setMessage("");
322 // Clear persisted draft on successful send
323 if (persistKey) {
324 localStorage.removeItem(PERSIST_KEY_PREFIX + persistKey);
325 }
326 } catch {
327 // Keep the message on error so user can retry
328 } finally {
329 setSubmitting(false);
330 }
331 }
332 };
333
334 const handleKeyDown = (e: React.KeyboardEvent) => {
335 // Don't submit while IME is composing (e.g., converting Japanese hiragana to kanji)
336 if (e.nativeEvent.isComposing) {
337 return;
338 }
339 if (e.key === "Enter" && !e.shiftKey) {
340 // On mobile, let Enter create newlines since there's a send button
341 // I'm not convinced the divergence from desktop is the correct answer,
342 // but we can try it and see how it feels.
343 const isMobile = "ontouchstart" in window;
344 if (isMobile) {
345 return;
346 }
347 e.preventDefault();
348 handleSubmit(e);
349 }
350 };
351
352 const adjustTextareaHeight = () => {
353 if (textareaRef.current) {
354 textareaRef.current.style.height = "auto";
355 const scrollHeight = textareaRef.current.scrollHeight;
356 const maxHeight = 200; // Maximum height in pixels
357 textareaRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
358 }
359 };
360
361 useEffect(() => {
362 adjustTextareaHeight();
363 }, [message]);
364
365 // Persist draft to localStorage when persistKey is set
366 useEffect(() => {
367 if (persistKey) {
368 if (message) {
369 localStorage.setItem(PERSIST_KEY_PREFIX + persistKey, message);
370 } else {
371 localStorage.removeItem(PERSIST_KEY_PREFIX + persistKey);
372 }
373 }
374 }, [message, persistKey]);
375
376 useEffect(() => {
377 if (autoFocus && textareaRef.current) {
378 // Use setTimeout to ensure the component is fully rendered
379 setTimeout(() => {
380 textareaRef.current?.focus();
381 }, 0);
382 }
383 }, [autoFocus]);
384
385 // Handle virtual keyboard appearance on mobile (especially Android Firefox)
386 // The visualViewport API lets us detect when the keyboard shrinks the viewport
387 useEffect(() => {
388 if (typeof window === "undefined" || !window.visualViewport) {
389 return;
390 }
391
392 const handleViewportResize = () => {
393 // Only scroll if our textarea is focused (keyboard is for us)
394 if (document.activeElement === textareaRef.current) {
395 // Small delay to let the viewport settle after resize
396 requestAnimationFrame(() => {
397 textareaRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
398 });
399 }
400 };
401
402 window.visualViewport.addEventListener("resize", handleViewportResize);
403 return () => {
404 window.visualViewport?.removeEventListener("resize", handleViewportResize);
405 };
406 }, []);
407
408 const isDisabled = disabled;
409 const canSubmit = message.trim() && !isDisabled && !submitting && uploadsInProgress === 0;
410
411 const isDraggingOver = dragCounter > 0;
412 // Check if user is typing a shell command (starts with !)
413 const isShellMode = message.trimStart().startsWith("!");
414 // Note: injectedText is auto-inserted via useEffect, no manual UI needed
415
416 return (
417 <div
418 className={`message-input-container ${isDraggingOver ? "drag-over" : ""} ${isShellMode ? "shell-mode" : ""}`}
419 onDragOver={handleDragOver}
420 onDragEnter={handleDragEnter}
421 onDragLeave={handleDragLeave}
422 onDrop={handleDrop}
423 >
424 {isDraggingOver && (
425 <div className="drag-overlay">
426 <div className="drag-overlay-content">Drop files here</div>
427 </div>
428 )}
429 <form onSubmit={handleSubmit} className="message-input-form">
430 <input
431 type="file"
432 ref={fileInputRef}
433 onChange={handleFileSelect}
434 style={{ display: "none" }}
435 multiple
436 accept="image/*,video/*,audio/*,.pdf,.txt,.md,.json,.csv,.xml,.html,.css,.js,.ts,.tsx,.jsx,.py,.go,.rs,.java,.c,.cpp,.h,.hpp,.sh,.yaml,.yml,.toml,.sql,.log,*"
437 aria-hidden="true"
438 />
439 <div className="textarea-wrapper">
440 {isShellMode && (
441 <div className="shell-mode-indicator" title="This will run as a shell command">
442 <svg
443 width="16"
444 height="16"
445 viewBox="0 0 24 24"
446 fill="none"
447 stroke="currentColor"
448 strokeWidth="2"
449 >
450 <polyline points="4 17 10 11 4 5" />
451 <line x1="12" y1="19" x2="20" y2="19" />
452 </svg>
453 </div>
454 )}
455 <textarea
456 ref={textareaRef}
457 value={message}
458 onChange={(e) => setMessage(e.target.value)}
459 onKeyDown={handleKeyDown}
460 onPaste={handlePaste}
461 onFocus={() => {
462 // Scroll to bottom after keyboard animation settles
463 if (onFocus) {
464 requestAnimationFrame(() => requestAnimationFrame(onFocus));
465 }
466 }}
467 placeholder={placeholderText}
468 className="message-textarea"
469 disabled={isDisabled}
470 rows={1}
471 aria-label="Message input"
472 data-testid="message-input"
473 autoFocus={autoFocus}
474 />
475 </div>
476 <button
477 type="button"
478 onClick={handleAttachClick}
479 disabled={isDisabled}
480 className="message-attach-btn"
481 aria-label="Attach file"
482 data-testid="attach-button"
483 >
484 <svg
485 fill="none"
486 stroke="currentColor"
487 strokeWidth="2"
488 viewBox="0 0 24 24"
489 width="20"
490 height="20"
491 >
492 <path
493 strokeLinecap="round"
494 strokeLinejoin="round"
495 d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
496 />
497 </svg>
498 </button>
499 {speechRecognitionAvailable && (
500 <button
501 type="button"
502 onClick={toggleListening}
503 disabled={isDisabled}
504 className={`message-voice-btn ${isListening ? "listening" : ""}`}
505 aria-label={isListening ? "Stop voice input" : "Start voice input"}
506 data-testid="voice-button"
507 >
508 {isListening ? (
509 <svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
510 <circle cx="12" cy="12" r="6" />
511 </svg>
512 ) : (
513 <svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
514 <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
515 </svg>
516 )}
517 </button>
518 )}
519 <button
520 type="submit"
521 disabled={!canSubmit}
522 className="message-send-btn"
523 aria-label="Send message"
524 data-testid="send-button"
525 >
526 {isDisabled || submitting ? (
527 <div className="flex items-center justify-center">
528 <div className="spinner spinner-small" style={{ borderTopColor: "white" }}></div>
529 </div>
530 ) : (
531 <svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
532 <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
533 </svg>
534 )}
535 </button>
536 </form>
537 </div>
538 );
539}
540
541export default MessageInput;