From 33f31b8292a462fd1a22eee3be051d0ccc6d3bdb Mon Sep 17 00:00:00 2001
From: msinha569 <msinha569@gmail.com>
Date: Fri, 31 Oct 2025 08:28:32 +0530
Subject: [PATCH] No animation on expanding or collapsing Agent Process
 Terminal

---
 surfsense_web/components/chat/ChatTerminal.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/chat/ChatTerminal.tsx b/surfsense_web/components/chat/ChatTerminal.tsx
index 4dea09ac2..07415eaf9 100644
--- a/surfsense_web/components/chat/ChatTerminal.tsx
+++ b/surfsense_web/components/chat/ChatTerminal.tsx
@@ -77,9 +77,15 @@ export default function TerminalDisplay({ message, open }: { message: Message; o
 				</div>
 			</Button>
 
-			{/* Terminal Content */}
-			{!isCollapsed && (
-				<div ref={bottomRef} className="h-64 overflow-y-auto p-4 space-y-1 bg-gray-900">
+			{/* Terminal Content (animated expand/collapse) */}
+			<div
+				className={`overflow-hidden bg-gray-900 transition-[max-height,opacity] duration-300 ease-in-out ${
+					isCollapsed ? "max-h-0 opacity-0" : "max-h-64 opacity-100"
+				}`}
+				style={{ maxHeight: isCollapsed ? "0px" : "16rem" }}
+				aria-hidden={isCollapsed}
+			>
+				<div ref={bottomRef} className="h-64 overflow-y-auto p-4 space-y-1">
 					{events.map((event, index) => (
 						<div key={`${event.id}-${index}`} className="text-green-400">
 							<span className="text-blue-400">$</span>
@@ -93,7 +99,7 @@ export default function TerminalDisplay({ message, open }: { message: Message; o
 						<div className="text-gray-500 italic">No agent events to display...</div>
 					)}
 				</div>
-			)}
+			</div>
 		</div>
 	);
 }