Initial commit

frontend/src/components/MessageInput.tsx

@@ -0,0 +1,75 @@
+import { useState, useCallback, useImperativeHandle, forwardRef, useRef, type FormEvent, type KeyboardEvent } from 'react';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+
+interface MessageInputProps {
+  onSend: (text: string) => Promise<void>;
+  disabled: boolean;
+  placeholder?: string;
+}
+
+export interface MessageInputHandle {
+  appendText: (text: string) => void;
+}
+
+export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(
+  function MessageInput({ onSend, disabled, placeholder }, ref) {
+  const [text, setText] = useState('');
+  const [sending, setSending] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    appendText: (appendedText: string) => {
+      setText((prev) => prev + appendedText);
+      // Focus the input after appending
+      inputRef.current?.focus();
+    },
+  }));
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      const trimmed = text.trim();
+      if (!trimmed || sending || disabled) return;
+
+      setSending(true);
+      try {
+        await onSend(trimmed);
+        setText('');
+      } catch (err) {
+        console.error('Failed to send message:', err);
+      } finally {
+        setSending(false);
+      }
+    },
+    [text, sending, disabled, onSend]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit(e as unknown as FormEvent);
+      }
+    },
+    [handleSubmit]
+  );
+
+  return (
+    <form className="px-4 py-3 border-t border-border flex gap-2" onSubmit={handleSubmit}>
+      <Input
+        ref={inputRef}
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder || 'Type a message...'}
+        disabled={disabled || sending}
+        className="flex-1"
+      />
+      <Button type="submit" disabled={disabled || sending || !text.trim()}>
+        {sending ? 'Sending...' : 'Send'}
+      </Button>
+    </form>
+  );
+});