Feat: Add ChatInput component #3221 (#4915)

### What problem does this PR solve?

Feat: Add ChatInput component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/chat-input.tsx

@@ -0,0 +1,46 @@
+import { useEventListener } from 'ahooks';
+import { Mic, Paperclip, Send } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+
+export function ChatInput() {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [textareaHeight, setTextareaHeight] = useState<number>(40);
+
+  useEventListener(
+    'keydown',
+    (ev) => {
+      if (ev.shiftKey && ev.code === 'Enter') {
+        setTextareaHeight((h) => {
+          return h + 10;
+        });
+      }
+    },
+    {
+      target: textareaRef,
+    },
+  );
+
+  return (
+    <section className="flex items-end bg-colors-background-neutral-strong px-4 py-3 rounded-xl m-8">
+      <Button variant={'icon'} className="w-10 h-10">
+        <Mic />
+      </Button>
+      <Textarea
+        ref={textareaRef}
+        placeholder="Tell us a little bit about yourself "
+        className="resize-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent border-none min-h-0 max-h-20"
+        style={{ height: textareaHeight }}
+      />
+      <div className="flex gap-2">
+        <Button variant={'icon'} size={'icon'}>
+          <Paperclip />
+        </Button>
+        <Button variant={'tertiary'} size={'icon'}>
+          <Send />
+        </Button>
+      </div>
+    </section>
+  );
+}

web/src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        'flex min-h-[80px] w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex min-h-[80px] w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
         className,
       )}
       ref={ref}