initial

apps/web/src/components/ChatInput.tsx

@@ -0,0 +1,58 @@
+import { useState, type KeyboardEvent } from 'react';
+import { Send } from 'lucide-react';
+import { toast } from 'sonner';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+
+interface Props {
+  disabled?: boolean;
+  onSend: (content: string) => void | Promise<void>;
+}
+
+export function ChatInput({ disabled, onSend }: Props) {
+  const [value, setValue] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    const text = value.trim();
+    if (!text || disabled || busy) return;
+    setBusy(true);
+    try {
+      await onSend(text);
+      setValue('');
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'failed to send');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      void submit();
+    }
+  }
+
+  return (
+    <div className="border-t px-4 py-3 flex items-end gap-2">
+      <Textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder="Ask about this project. Cmd/Ctrl+Enter to send."
+        disabled={disabled || busy}
+        rows={3}
+        className="resize-none min-h-[68px] max-h-[240px]"
+      />
+      <Button
+        onClick={() => void submit()}
+        disabled={disabled || busy || !value.trim()}
+        size="icon-lg"
+        aria-label="Send"
+      >
+        <Send />
+      </Button>
+    </div>
+  );
+}