From c415e68bfc853e34b318d0479963fba6727095ef Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Fri, 17 Jul 2026 09:41:29 +0530
Subject: [PATCH] refactor(chat): remove loading component and enhance footer
 visibility logic in ChatViewport

---
 .../[workspace_id]/new-chat/loading.tsx       | 62 -------------------
 .../components/assistant-ui/chat-viewport.tsx | 14 ++++-
 .../components/assistant-ui/thread.tsx        |  5 +-
 3 files changed, 15 insertions(+), 66 deletions(-)
 delete mode 100644 surfsense_web/app/dashboard/[workspace_id]/new-chat/loading.tsx

diff --git a/surfsense_web/app/dashboard/[workspace_id]/new-chat/loading.tsx b/surfsense_web/app/dashboard/[workspace_id]/new-chat/loading.tsx
deleted file mode 100644
index 108671662..000000000
--- a/surfsense_web/app/dashboard/[workspace_id]/new-chat/loading.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function Loading() {
-	return (
-		<div
-			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-main-panel"
-			style={{
-				["--thread-max-width" as string]: "42rem",
-			}}
-		>
-			<div
-				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 scroll-smooth"
-				style={{ scrollbarGutter: "stable" }}
-			>
-				<div
-					aria-hidden
-					className="aui-chat-viewport-top-fade pointer-events-none sticky top-0 z-10 -mx-4 h-2 shrink-0 bg-gradient-to-b from-main-panel from-20% to-transparent"
-				/>
-				<div className="mx-auto w-full max-w-(--thread-max-width) flex flex-1 flex-col gap-6 py-8">
-					{/* User message */}
-					<div className="flex justify-end">
-						<Skeleton className="h-12 w-56 rounded-2xl" />
-					</div>
-
-					{/* Assistant message */}
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-4 w-full" />
-						<Skeleton className="h-4 w-[85%]" />
-						<Skeleton className="h-18 w-[40%]" />
-					</div>
-
-					{/* User message */}
-					<div className="flex gap-2 justify-end">
-						<Skeleton className="h-12 w-72 rounded-2xl" />
-					</div>
-
-					{/* Assistant message */}
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-10 w-[30%]" />
-						<Skeleton className="h-4 w-[90%]" />
-						<Skeleton className="h-6 w-[60%]" />
-					</div>
-
-					{/* User message */}
-					<div className="flex gap-2 justify-end">
-						<Skeleton className="h-12 w-96 rounded-2xl" />
-					</div>
-				</div>
-
-				{/* Input bar */}
-				<div
-					className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-main-panel from-60% to-transparent px-4 pt-6"
-					style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
-				>
-					<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
-						<Skeleton className="h-28 w-full rounded-3xl" />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/components/assistant-ui/chat-viewport.tsx b/surfsense_web/components/assistant-ui/chat-viewport.tsx
index 83308b642..cb0c57442 100644
--- a/surfsense_web/components/assistant-ui/chat-viewport.tsx
+++ b/surfsense_web/components/assistant-ui/chat-viewport.tsx
@@ -22,9 +22,19 @@ const ChatScrollToBottom: FC = () => (
 export interface ChatViewportProps {
 	children: ReactNode;
 	footer?: ReactNode;
+	/**
+	 * Keep the footer (composer) pinned even when the thread has no messages —
+	 * needed while an existing thread's messages are still loading, so the
+	 * bottom composer stays visible above the loading skeleton.
+	 */
+	footerAlwaysVisible?: boolean;
 }
 
-export const ChatViewport: FC<ChatViewportProps> = ({ children, footer }) => (
+export const ChatViewport: FC<ChatViewportProps> = ({
+	children,
+	footer,
+	footerAlwaysVisible = false,
+}) => (
 	<ThreadPrimitive.Viewport
 		turnAnchor="top"
 		autoScroll
@@ -40,7 +50,7 @@ export const ChatViewport: FC<ChatViewportProps> = ({ children, footer }) => (
 		/>
 		{children}
 		{footer ? (
-			<AuiIf condition={({ thread }) => !thread.isEmpty}>
+			<AuiIf condition={({ thread }) => footerAlwaysVisible || !thread.isEmpty}>
 				<ThreadPrimitive.ViewportFooter
 					className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-main-panel from-60% to-transparent px-4 pt-6"
 					style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index f11e82952..fc8118fe7 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -169,11 +169,12 @@ const ThreadContent: FC<ThreadProps> = ({
 			}}
 		>
 			<ChatViewport
+				footerAlwaysVisible={hasActiveThread}
 				footer={
-					<AuiIf condition={({ thread }) => hasActiveThread || !thread.isEmpty}>
+					<>
 						<PremiumQuotaPinnedAlert />
 						<Composer isLoadingMessages={isLoadingMessages} />
-					</AuiIf>
+					</>
 				}
 			>
 				<AuiIf condition={({ thread }) => !hasActiveThread && thread.isEmpty}>