From 819e5d39ecb8dc80d10ae54662b80a982411885f Mon Sep 17 00:00:00 2001
From: "mr.robot" <150504400+nohope88@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:45:21 +0700
Subject: [PATCH 1/2] fix: auto resize height textarea

---
 viewer/src/client/components/chat/ChatInput.jsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/viewer/src/client/components/chat/ChatInput.jsx b/viewer/src/client/components/chat/ChatInput.jsx
index a808030..2ab9a77 100644
--- a/viewer/src/client/components/chat/ChatInput.jsx
+++ b/viewer/src/client/components/chat/ChatInput.jsx
@@ -19,6 +19,8 @@ import { blobToAttachment, imageFilesFromDataTransfer, MAX_ATTACHMENTS } from ".
 
 export { buildSendValue };
 
+const MAX_TEXTAREA_HEIGHT = 192; // tailwind max-h-48
+
 function ChatInput({ className }, ref) {
   const [value, setValue] = useState("");
   const turnInProgress = useChatStore((state) => state.turnInProgress);
@@ -165,6 +167,15 @@ function ChatInput({ className }, ref) {
     window.requestAnimationFrame?.(() => textareaRef.current?.focus());
   }, []);
 
+  const adjustTextareaHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "0px";
+    const nextHeight = Math.min(textarea.scrollHeight, MAX_TEXTAREA_HEIGHT);
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY = textarea.scrollHeight > MAX_TEXTAREA_HEIGHT ? "auto" : "hidden";
+  }, []);
+
   useImperativeHandle(ref, () => ({
     focus(options) {
       textareaRef.current?.focus(options);
@@ -186,6 +197,10 @@ function ChatInput({ className }, ref) {
 
   const hasStrip = pendingTokens.length > 0 || pendingAttachments.length > 0;
 
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, [value, hasStrip, adjustTextareaHeight]);
+
   return (
     <div
       data-slot="chat-input"
@@ -264,7 +279,7 @@ function ChatInput({ className }, ref) {
           onPaste={handlePaste}
           placeholder="Do anything"
           rows={2}
-          className="min-h-10 flex-1 resize-none border-0 bg-transparent! px-0 py-0 text-sm shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-0 dark:bg-transparent!"
+          className="scrollbar-thin min-h-10 resize-none border-0 bg-transparent! px-0 py-0 text-sm shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-0 dark:bg-transparent!"
           data-slot="chat-input-textarea"
         />
 

From 4eca8ab3bd5c4143c53082a9ff2b5298b5086a3c Mon Sep 17 00:00:00 2001
From: "mr.robot" <150504400+nohope88@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:49:12 +0700
Subject: [PATCH 2/2] fix: support display table from markdown

---
 .../src/client/components/chat/Markdown.jsx   | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/viewer/src/client/components/chat/Markdown.jsx b/viewer/src/client/components/chat/Markdown.jsx
index c4c811b..82b6597 100644
--- a/viewer/src/client/components/chat/Markdown.jsx
+++ b/viewer/src/client/components/chat/Markdown.jsx
@@ -26,6 +26,39 @@ const COMPONENTS = {
       {children}
     </a>
   ),
+  table: ({ children }) => (
+    <div
+      data-slot="chat-markdown-table"
+      className="scrollbar-thin my-2 overflow-x-auto rounded-md border border-border/50"
+    >
+      <table className="w-full min-w-max border-collapse text-left text-[13px]">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => <thead className="border-b border-border/60 bg-muted/40">{children}</thead>,
+  tbody: ({ children }) => <tbody className="divide-y divide-border/40">{children}</tbody>,
+  tr: ({ children }) => <tr>{children}</tr>,
+  th: ({ children, align }) => (
+    <th
+      className={cn(
+        "px-2.5 py-1.5 font-semibold text-foreground",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+      )}
+    >
+      {children}
+    </th>
+  ),
+  td: ({ children, align }) => (
+    <td
+      className={cn(
+        "px-2.5 py-1.5 align-top",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+      )}
+    >
+      {children}
+    </td>
+  ),
   pre: ({ children }) => <>{children}</>,
   code: ({ className, children }) => {
     const lang = /language-([\w-]+)/.exec(className || "")?.[1];