From 9fc221e88a7c9394da1b66e8f891e763943df54a Mon Sep 17 00:00:00 2001
From: Tat Dat Duong <david@duong.cz>
Date: Fri, 7 Mar 2025 15:18:57 +0100
Subject: [PATCH] Support multiline input

---
 src/components/thread/index.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx
index 710144b..a1fa7e9 100644
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -4,7 +4,6 @@ import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 import { useStreamContext } from "@/providers/Stream";
 import { useState, FormEvent } from "react";
-import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { Checkpoint, Message } from "@langchain/langgraph-sdk";
 import { AssistantMessage, AssistantMessageLoading } from "./messages/ai";
@@ -316,17 +315,24 @@ export function Thread() {
 
                 <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />
 
-                <div className="bg-background rounded-2xl border shadow-md mx-auto mb-8 w-full max-w-4xl relative z-10">
+                <div className="bg-muted rounded-2xl border mx-auto mb-8 w-full max-w-4xl relative z-10">
                   <form
                     onSubmit={handleSubmit}
                     className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"
                   >
-                    <Input
-                      type="text"
+                    <textarea
                       value={input}
                       onChange={(e) => setInput(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && !e.shiftKey && !e.metaKey) {
+                          e.preventDefault();
+                          const el = e.target as HTMLElement | undefined;
+                          const form = el?.closest("form");
+                          form?.requestSubmit();
+                        }
+                      }}
                       placeholder="Type your message..."
-                      className="px-4 py-6 border-none bg-transparent shadow-none ring-0 outline-none focus:outline-none focus:ring-0"
+                      className="p-3.5 pb-0 border-none bg-transparent field-sizing-content shadow-none ring-0 outline-none focus:outline-none focus:ring-0 resize-none"
                     />
 
                     <div className="flex items-center justify-end p-2 pt-0">
@@ -338,6 +344,7 @@ export function Thread() {
                       ) : (
                         <Button
                           type="submit"
+                          className="transition-all"
                           disabled={isLoading || !input.trim()}
                         >
                           Send