chore: fixes

autogpt_platform/frontend/src/app/(platform)/PlatformLayoutContent.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { ChatDrawer } from "@/components/contextual/Chat/ChatDrawer";
+import { usePathname } from "next/navigation";
+import { Children, ReactNode } from "react";
+
+interface PlatformLayoutContentProps {
+  children: ReactNode;
+}
+
+export function PlatformLayoutContent({
+  children,
+}: PlatformLayoutContentProps) {
+  const pathname = usePathname();
+  const isAuthPage =
+    pathname?.includes("/login") || pathname?.includes("/signup");
+
+  // Extract Navbar, AdminImpersonationBanner, and page content from children
+  const childrenArray = Children.toArray(children);
+  const navbar = childrenArray[0];
+  const adminBanner = childrenArray[1];
+  const pageContent = childrenArray.slice(2);
+
+  // For login/signup pages, use a simpler layout that doesn't interfere with centering
+  if (isAuthPage) {
+    return (
+      <main className="flex min-h-screen w-full flex-col">
+        {navbar}
+        {adminBanner}
+        <section className="flex-1">{pageContent}</section>
+      </main>
+    );
+  }
+
+  // For logged-in pages, use the drawer layout
+  return (
+    <main className="flex h-screen w-full flex-col overflow-hidden">
+      {navbar}
+      {adminBanner}
+      <section className="flex min-h-0 flex-1 overflow-auto">
+        {pageContent}
+      </section>
+      <ChatDrawer />
+    </main>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/layout.tsx

@@ -1,17 +1,14 @@
-import { ChatDrawer } from "@/components/contextual/Chat/ChatDrawer";
 import { Navbar } from "@/components/layout/Navbar/Navbar";
 import { ReactNode } from "react";
 import { AdminImpersonationBanner } from "./admin/components/AdminImpersonationBanner";
+import { PlatformLayoutContent } from "./PlatformLayoutContent";
 
 export default function PlatformLayout({ children }: { children: ReactNode }) {
   return (
-    <main className="flex h-screen w-full flex-col overflow-hidden">
+    <PlatformLayoutContent>
       <Navbar />
       <AdminImpersonationBanner />
-      <section className="flex min-h-0 flex-1 overflow-auto">
-        {children}
-      </section>
-      <ChatDrawer />
-    </main>
+      {children}
+    </PlatformLayoutContent>
   );
 }

autogpt_platform/frontend/src/components/contextual/Chat/ChatDrawer.tsx

@@ -4,7 +4,7 @@ import { scrollbarStyles } from "@/components/styles/scrollbars";
 import { cn } from "@/lib/utils";
 import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { X } from "@phosphor-icons/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Drawer } from "vaul";
 import { Chat } from "./Chat";
 import { useChatDrawer } from "./useChatDrawer";
@@ -14,16 +14,22 @@ interface ChatDrawerProps {
 }
 
 export function ChatDrawer({ blurBackground = true }: ChatDrawerProps) {
+  const [isMounted, setIsMounted] = useState(false);
   const isChatEnabled = useGetFlag(Flag.CHAT);
   const { isOpen, close } = useChatDrawer();
 
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   useEffect(() => {
     if (isChatEnabled === false && isOpen) {
       close();
     }
   }, [isChatEnabled, isOpen, close]);
 
-  if (isChatEnabled === null || isChatEnabled === false) {
+  // Don't render on server - vaul drawer accesses document during SSR
+  if (!isMounted || isChatEnabled === null || isChatEnabled === false) {
     return null;
   }
 

autogpt_platform/frontend/src/components/contextual/Chat/usePageContext.ts

@@ -10,7 +10,7 @@ export interface PageContext {
  */
 export function usePageContext() {
   const capturePageContext = useCallback((): PageContext => {
-    if (typeof window === "undefined") {
+    if (typeof window === "undefined" || typeof document === "undefined") {
       return { url: "", content: "" };
     }
 

autogpt_platform/frontend/src/components/contextual/RunAgentInputs/RunAgentInputs.tsx

@@ -338,6 +338,7 @@ export function RunAgentInputs({
           value={value ?? ""}
           onChange={(e) => onChange((e.target as HTMLInputElement).value)}
           placeholder={placeholder || "Enter text"}
+          disabled={readOnly}
           {...props}
         />
       );
@@ -349,11 +350,14 @@ export function RunAgentInputs({
         {schema.title || placeholder}
         <InformationTooltip description={schema.description} />
       </label>
-      <div
-        className="no-drag relative flex w-full"
-        style={readOnly ? { pointerEvents: "none", opacity: 0.7 } : undefined}
-      >
-        {innerInputElement}
+      <div className="no-drag relative flex w-full">
+        {readOnly ? (
+          <div style={{ pointerEvents: "none", opacity: 0.7 }}>
+            {innerInputElement}
+          </div>
+        ) : (
+          innerInputElement
+        )}
       </div>
     </div>
   );