chore: wip

autogpt_platform/frontend/src/app/(platform)/copilot/NewChatContext.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { createContext, useContext, useRef, type ReactNode } from "react";
+
+interface NewChatContextValue {
+  onNewChatClick: () => void;
+  setOnNewChatClick: (handler?: () => void) => void;
+  performNewChat?: () => void;
+  setPerformNewChat: (handler?: () => void) => void;
+}
+
+const NewChatContext = createContext<NewChatContextValue | null>(null);
+
+export function NewChatProvider({ children }: { children: ReactNode }) {
+  const onNewChatRef = useRef<(() => void) | undefined>();
+  const performNewChatRef = useRef<(() => void) | undefined>();
+  const contextValueRef = useRef<NewChatContextValue>({
+    onNewChatClick() {
+      onNewChatRef.current?.();
+    },
+    setOnNewChatClick(handler?: () => void) {
+      onNewChatRef.current = handler;
+    },
+    performNewChat() {
+      performNewChatRef.current?.();
+    },
+    setPerformNewChat(handler?: () => void) {
+      performNewChatRef.current = handler;
+    },
+  });
+
+  return (
+    <NewChatContext.Provider value={contextValueRef.current}>
+      {children}
+    </NewChatContext.Provider>
+  );
+}
+
+export function useNewChat() {
+  return useContext(NewChatContext);
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/CopilotShell.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { ChatLoader } from "@/components/contextual/Chat/components/ChatLoader/ChatLoader";
 import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
 import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { useNewChat } from "../../NewChatContext";
 import { DesktopSidebar } from "./components/DesktopSidebar/DesktopSidebar";
 import { LoadingState } from "./components/LoadingState/LoadingState";
 import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
@@ -33,10 +35,25 @@ export function CopilotShell({ children }: Props) {
     isReadyToShowContent,
   } = useCopilotShell();
 
+  const newChatContext = useNewChat();
+  const handleNewChatClickWrapper =
+    newChatContext?.onNewChatClick || handleNewChat;
+
+  useEffect(
+    function registerNewChatHandler() {
+      if (!newChatContext) return;
+      newChatContext.setPerformNewChat(handleNewChat);
+      return function cleanup() {
+        newChatContext.setPerformNewChat(undefined);
+      };
+    },
+    [newChatContext, handleNewChat],
+  );
+
   if (!isLoggedIn) {
     return (
       <div className="flex h-full items-center justify-center">
-        <LoadingSpinner size="large" />
+        <ChatLoader />
       </div>
     );
   }
@@ -55,7 +72,7 @@ export function CopilotShell({ children }: Props) {
           isFetchingNextPage={isFetchingNextPage}
           onSelectSession={handleSelectSession}
           onFetchNextPage={fetchNextPage}
-          onNewChat={handleNewChat}
+          onNewChat={handleNewChatClickWrapper}
           hasActiveSession={Boolean(hasActiveSession)}
         />
       )}
@@ -77,7 +94,7 @@ export function CopilotShell({ children }: Props) {
           isFetchingNextPage={isFetchingNextPage}
           onSelectSession={handleSelectSession}
           onFetchNextPage={fetchNextPage}
-          onNewChat={handleNewChat}
+          onNewChat={handleNewChatClickWrapper}
           onClose={handleCloseDrawer}
           onOpenChange={handleDrawerOpenChange}
           hasActiveSession={Boolean(hasActiveSession)}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/useCopilotShell.ts

@@ -148,13 +148,15 @@ export function useCopilotShell() {
     setHasAutoSelectedSession(false);
   }
 
+  const isLoading = isSessionsLoading && accumulatedSessions.length === 0;
+
   return {
     isMobile,
     isDrawerOpen,
     isLoggedIn,
     hasActiveSession:
       Boolean(currentSessionId) && (!isOnHomepage || Boolean(paramSessionId)),
-    isLoading: isSessionsLoading || !areAllSessionsLoaded,
+    isLoading,
     sessions: visibleSessions,
     currentSessionId: sidebarSelectedSessionId,
     handleSelectSession,

autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts

@@ -1,5 +1,28 @@
 import type { User } from "@supabase/supabase-js";
 
+export type PageState =
+  | { type: "welcome" }
+  | { type: "newChat" }
+  | { type: "creating"; prompt: string }
+  | { type: "chat"; sessionId: string; initialPrompt?: string };
+
+export function getInitialPromptFromState(
+  pageState: PageState,
+  storedInitialPrompt: string | undefined,
+) {
+  if (storedInitialPrompt) return storedInitialPrompt;
+  if (pageState.type === "creating") return pageState.prompt;
+  if (pageState.type === "chat") return pageState.initialPrompt;
+}
+
+export function shouldResetToWelcome(pageState: PageState) {
+  return (
+    pageState.type !== "newChat" &&
+    pageState.type !== "creating" &&
+    pageState.type !== "welcome"
+  );
+}
+
 export function getGreetingName(user?: User | null): string {
   if (!user) return "there";
   const metadata = user.user_metadata as Record<string, unknown> | undefined;

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

@@ -1,6 +1,11 @@
 import type { ReactNode } from "react";
+import { NewChatProvider } from "./NewChatContext";
 import { CopilotShell } from "./components/CopilotShell/CopilotShell";
 
 export default function CopilotLayout({ children }: { children: ReactNode }) {
-  return <CopilotShell>{children}</CopilotShell>;
+  return (
+    <NewChatProvider>
+      <CopilotShell>{children}</CopilotShell>
+    </NewChatProvider>
+  );
 }

autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx

@@ -1,142 +1,35 @@
 "use client";
 
-import { postV2CreateSession } from "@/app/api/__generated__/endpoints/chat/chat";
 import { Skeleton } from "@/components/__legacy__/ui/skeleton";
 import { Button } from "@/components/atoms/Button/Button";
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/atoms/Text/Text";
 import { Chat } from "@/components/contextual/Chat/Chat";
 import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
-import { getHomepageRoute } from "@/lib/constants";
+import { ChatLoader } from "@/components/contextual/Chat/components/ChatLoader/ChatLoader";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import {
+import { useCopilotPage } from "./useCopilotPage";
-  Flag,
-  type FlagValues,
-  useGetFlag,
-} from "@/services/feature-flags/use-get-flag";
-import { useFlags } from "launchdarkly-react-client-sdk";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { getGreetingName, getQuickActions } from "./helpers";
-
-type PageState =
-  | { type: "welcome" }
-  | { type: "creating"; prompt: string }
-  | { type: "chat"; sessionId: string; initialPrompt?: string };
 
 export default function CopilotPage() {
-  const router = useRouter();
+  const { state, handlers } = useCopilotPage();
-  const searchParams = useSearchParams();
+  const {
-  const { user, isLoggedIn, isUserLoading } = useSupabase();
+    greetingName,
+    quickActions,
+    isLoading,
+    pageState,
+    isNewChatModalOpen,
+    isReady,
+  } = state;
+  const {
+    handleQuickAction,
+    startChatWithPrompt,
+    handleSessionNotFound,
+    handleStreamingChange,
+    handleCancelNewChat,
+    proceedWithNewChat,
+    handleNewChatModalOpen,
+  } = handlers;
 
-  const isChatEnabled = useGetFlag(Flag.CHAT);
+  if (!isReady) {
-  const flags = useFlags<FlagValues>();
-  const homepageRoute = getHomepageRoute(isChatEnabled);
-  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
-  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
-  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
-  const isFlagReady =
-    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;
-
-  const [pageState, setPageState] = useState<PageState>({ type: "welcome" });
-  const initialPromptRef = useRef<Map<string, string>>(new Map());
-
-  const urlSessionId = searchParams.get("sessionId");
-
-  // Sync with URL sessionId (preserve initialPrompt from ref)
-  useEffect(
-    function syncSessionFromUrl() {
-      if (urlSessionId) {
-        // If we're already in chat state with this sessionId, don't overwrite
-        if (pageState.type === "chat" && pageState.sessionId === urlSessionId) {
-          return;
-        }
-        // Get initialPrompt from ref or current state
-        const storedInitialPrompt = initialPromptRef.current.get(urlSessionId);
-        const currentInitialPrompt =
-          storedInitialPrompt ||
-          (pageState.type === "creating"
-            ? pageState.prompt
-            : pageState.type === "chat"
-              ? pageState.initialPrompt
-              : undefined);
-        if (currentInitialPrompt) {
-          initialPromptRef.current.set(urlSessionId, currentInitialPrompt);
-        }
-        setPageState({
-          type: "chat",
-          sessionId: urlSessionId,
-          initialPrompt: currentInitialPrompt,
-        });
-      } else if (pageState.type === "chat") {
-        setPageState({ type: "welcome" });
-      }
-    },
-    [urlSessionId],
-  );
-
-  useEffect(
-    function ensureAccess() {
-      if (!isFlagReady) return;
-      if (isChatEnabled === false) {
-        router.replace(homepageRoute);
-      }
-    },
-    [homepageRoute, isChatEnabled, isFlagReady, router],
-  );
-
-  const greetingName = useMemo(
-    function getName() {
-      return getGreetingName(user);
-    },
-    [user],
-  );
-
-  const quickActions = useMemo(function getActions() {
-    return getQuickActions();
-  }, []);
-
-  async function startChatWithPrompt(prompt: string) {
-    if (!prompt?.trim()) return;
-    if (pageState.type === "creating") return;
-
-    const trimmedPrompt = prompt.trim();
-    setPageState({ type: "creating", prompt: trimmedPrompt });
-
-    try {
-      // Create session
-      const sessionResponse = await postV2CreateSession({
-        body: JSON.stringify({}),
-      });
-
-      if (sessionResponse.status !== 200 || !sessionResponse.data?.id) {
-        throw new Error("Failed to create session");
-      }
-
-      const sessionId = sessionResponse.data.id;
-
-      // Store initialPrompt in ref so it persists across re-renders
-      initialPromptRef.current.set(sessionId, trimmedPrompt);
-
-      // Update URL and show Chat with initial prompt
-      // Chat will handle sending the message and streaming
-      window.history.replaceState(null, "", `/copilot?sessionId=${sessionId}`);
-      setPageState({ type: "chat", sessionId, initialPrompt: trimmedPrompt });
-    } catch (error) {
-      console.error("[CopilotPage] Failed to start chat:", error);
-      setPageState({ type: "welcome" });
-    }
-  }
-
-  function handleQuickAction(action: string) {
-    startChatWithPrompt(action);
-  }
-
-  function handleSessionNotFound() {
-    router.replace("/copilot");
-  }
-
-  if (!isFlagReady || isChatEnabled === false || !isLoggedIn) {
     return null;
   }
 
@@ -150,7 +43,55 @@ export default function CopilotPage() {
           urlSessionId={pageState.sessionId}
           initialPrompt={pageState.initialPrompt}
           onSessionNotFound={handleSessionNotFound}
+          onStreamingChange={handleStreamingChange}
         />
+        <Dialog
+          title="Interrupt current chat?"
+          styling={{ maxWidth: 300, width: "100%" }}
+          controlled={{
+            isOpen: isNewChatModalOpen,
+            set: handleNewChatModalOpen,
+          }}
+          onClose={handleCancelNewChat}
+        >
+          <Dialog.Content>
+            <div className="flex flex-col gap-4">
+              <Text variant="body">
+                The current chat response will be interrupted. Are you sure you
+                want to start a new chat?
+              </Text>
+              <Dialog.Footer>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCancelNewChat}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="button"
+                  variant="primary"
+                  onClick={proceedWithNewChat}
+                >
+                  Start new chat
+                </Button>
+              </Dialog.Footer>
+            </div>
+          </Dialog.Content>
+        </Dialog>
+      </div>
+    );
+  }
+
+  if (pageState.type === "newChat") {
+    return (
+      <div className="flex h-full flex-1 flex-col items-center justify-center bg-[#f8f8f9]">
+        <div className="flex flex-col items-center gap-4">
+          <ChatLoader />
+          <Text variant="body" className="text-zinc-500">
+            Loading your chats...
+          </Text>
+        </div>
       </div>
     );
   }
@@ -158,18 +99,18 @@ export default function CopilotPage() {
   // Show loading state while creating session and sending first message
   if (pageState.type === "creating") {
     return (
-      <div className="flex h-full flex-1 flex-col items-center justify-center bg-[#f8f8f9] px-6 py-10">
+      <div className="flex h-full flex-1 flex-col items-center justify-center bg-[#f8f8f9]">
-        <LoadingSpinner size="large" />
+        <div className="flex flex-col items-center gap-4">
-        <Text variant="body" className="mt-4 text-zinc-500">
+          <ChatLoader />
-          Starting your chat...
+          <Text variant="body" className="text-zinc-500">
+            Loading your chats...
           </Text>
         </div>
+      </div>
     );
   }
 
   // Show Welcome screen
-  const isLoading = isUserLoading;
-
   return (
     <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-6 py-10">
       <div className="w-full text-center">

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts

@@ -0,0 +1,258 @@
+import { postV2CreateSession } from "@/app/api/__generated__/endpoints/chat/chat";
+import { getHomepageRoute } from "@/lib/constants";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import {
+  Flag,
+  type FlagValues,
+  useGetFlag,
+} from "@/services/feature-flags/use-get-flag";
+import { useFlags } from "launchdarkly-react-client-sdk";
+import { useRouter } from "next/navigation";
+import { useEffect, useReducer } from "react";
+import { useNewChat } from "./NewChatContext";
+import {
+  getGreetingName,
+  getQuickActions,
+  type PageState,
+} from "./helpers";
+import { useCopilotURLState } from "./useCopilotURLState";
+
+type CopilotState = {
+  pageState: PageState;
+  isStreaming: boolean;
+  isNewChatModalOpen: boolean;
+  initialPrompts: Record<string, string>;
+  previousSessionId: string | null;
+};
+
+type CopilotAction =
+  | { type: "setPageState"; pageState: PageState }
+  | { type: "setStreaming"; isStreaming: boolean }
+  | { type: "setNewChatModalOpen"; isOpen: boolean }
+  | { type: "setInitialPrompt"; sessionId: string; prompt: string }
+  | { type: "setPreviousSessionId"; sessionId: string | null };
+
+function isSamePageState(next: PageState, current: PageState) {
+  if (next.type !== current.type) return false;
+  if (next.type === "creating" && current.type === "creating") {
+    return next.prompt === current.prompt;
+  }
+  if (next.type === "chat" && current.type === "chat") {
+    return (
+      next.sessionId === current.sessionId &&
+      next.initialPrompt === current.initialPrompt
+    );
+  }
+  return true;
+}
+
+function copilotReducer(state: CopilotState, action: CopilotAction): CopilotState {
+  if (action.type === "setPageState") {
+    if (isSamePageState(action.pageState, state.pageState)) return state;
+    return { ...state, pageState: action.pageState };
+  }
+  if (action.type === "setStreaming") {
+    if (action.isStreaming === state.isStreaming) return state;
+    return { ...state, isStreaming: action.isStreaming };
+  }
+  if (action.type === "setNewChatModalOpen") {
+    if (action.isOpen === state.isNewChatModalOpen) return state;
+    return { ...state, isNewChatModalOpen: action.isOpen };
+  }
+  if (action.type === "setInitialPrompt") {
+    if (state.initialPrompts[action.sessionId] === action.prompt) return state;
+    return {
+      ...state,
+      initialPrompts: {
+        ...state.initialPrompts,
+        [action.sessionId]: action.prompt,
+      },
+    };
+  }
+  if (action.type === "setPreviousSessionId") {
+    if (state.previousSessionId === action.sessionId) return state;
+    return { ...state, previousSessionId: action.sessionId };
+  }
+  return state;
+}
+
+export function useCopilotPage() {
+  const router = useRouter();
+  const { user, isLoggedIn, isUserLoading } = useSupabase();
+
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const flags = useFlags<FlagValues>();
+  const homepageRoute = getHomepageRoute(isChatEnabled);
+  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
+  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
+  const isFlagReady =
+    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;
+
+  const [state, dispatch] = useReducer(copilotReducer, {
+    pageState: { type: "welcome" },
+    isStreaming: false,
+    isNewChatModalOpen: false,
+    initialPrompts: {},
+    previousSessionId: null,
+  });
+
+  const newChatContext = useNewChat();
+  const greetingName = getGreetingName(user);
+  const quickActions = getQuickActions();
+
+  function setPageState(pageState: PageState) {
+    dispatch({ type: "setPageState", pageState });
+  }
+
+  function setInitialPrompt(sessionId: string, prompt: string) {
+    dispatch({ type: "setInitialPrompt", sessionId, prompt });
+  }
+
+  function setPreviousSessionId(sessionId: string | null) {
+    dispatch({ type: "setPreviousSessionId", sessionId });
+  }
+
+  const { setUrlSessionId } = useCopilotURLState({
+    pageState: state.pageState,
+    initialPrompts: state.initialPrompts,
+    previousSessionId: state.previousSessionId,
+    setPageState,
+    setInitialPrompt,
+    setPreviousSessionId,
+  });
+
+  useEffect(
+    function registerNewChatHandler() {
+      if (!newChatContext) return;
+      newChatContext.setOnNewChatClick(handleNewChatClick);
+      return function cleanup() {
+        newChatContext.setOnNewChatClick(undefined);
+      };
+    },
+    [newChatContext, handleNewChatClick],
+  );
+
+  useEffect(
+    function transitionNewChatToWelcome() {
+      if (state.pageState.type === "newChat") {
+        function setWelcomeState() {
+          dispatch({ type: "setPageState", pageState: { type: "welcome" } });
+        }
+
+        const timer = setTimeout(setWelcomeState, 300);
+
+        return function cleanup() {
+          clearTimeout(timer);
+        };
+      }
+    },
+    [state.pageState.type],
+  );
+
+  useEffect(
+    function ensureAccess() {
+      if (!isFlagReady) return;
+      if (isChatEnabled === false) {
+        router.replace(homepageRoute);
+      }
+    },
+    [homepageRoute, isChatEnabled, isFlagReady, router],
+  );
+
+  async function startChatWithPrompt(prompt: string) {
+    if (!prompt?.trim()) return;
+    if (state.pageState.type === "creating") return;
+
+    const trimmedPrompt = prompt.trim();
+    dispatch({
+      type: "setPageState",
+      pageState: { type: "creating", prompt: trimmedPrompt },
+    });
+
+    try {
+      const sessionResponse = await postV2CreateSession({
+        body: JSON.stringify({}),
+      });
+
+      if (sessionResponse.status !== 200 || !sessionResponse.data?.id) {
+        throw new Error("Failed to create session");
+      }
+
+      const sessionId = sessionResponse.data.id;
+
+      dispatch({
+        type: "setInitialPrompt",
+        sessionId,
+        prompt: trimmedPrompt,
+      });
+
+      await setUrlSessionId(sessionId, { shallow: false });
+      dispatch({
+        type: "setPageState",
+        pageState: { type: "chat", sessionId, initialPrompt: trimmedPrompt },
+      });
+    } catch (error) {
+      console.error("[CopilotPage] Failed to start chat:", error);
+      dispatch({ type: "setPageState", pageState: { type: "welcome" } });
+    }
+  }
+
+  function handleQuickAction(action: string) {
+    startChatWithPrompt(action);
+  }
+
+  function handleSessionNotFound() {
+    router.replace("/copilot");
+  }
+
+  function handleStreamingChange(isStreamingValue: boolean) {
+    dispatch({ type: "setStreaming", isStreaming: isStreamingValue });
+  }
+
+  function proceedWithNewChat() {
+    dispatch({ type: "setNewChatModalOpen", isOpen: false });
+    if (newChatContext?.performNewChat) {
+      newChatContext.performNewChat();
+      return;
+    }
+    setUrlSessionId(null, { shallow: false });
+    router.replace("/copilot");
+  }
+
+  function handleCancelNewChat() {
+    dispatch({ type: "setNewChatModalOpen", isOpen: false });
+  }
+
+  function handleNewChatModalOpen(isOpen: boolean) {
+    dispatch({ type: "setNewChatModalOpen", isOpen });
+  }
+
+  function handleNewChatClick() {
+    if (state.isStreaming) {
+      dispatch({ type: "setNewChatModalOpen", isOpen: true });
+    } else {
+      proceedWithNewChat();
+    }
+  }
+
+  return {
+    state: {
+      greetingName,
+      quickActions,
+      isLoading: isUserLoading,
+      pageState: state.pageState,
+      isNewChatModalOpen: state.isNewChatModalOpen,
+      isReady: isFlagReady && isChatEnabled !== false && isLoggedIn,
+    },
+    handlers: {
+      handleQuickAction,
+      startChatWithPrompt,
+      handleSessionNotFound,
+      handleStreamingChange,
+      handleCancelNewChat,
+      proceedWithNewChat,
+      handleNewChatModalOpen,
+    },
+  };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotURLState.ts

@@ -0,0 +1,80 @@
+import { parseAsString, useQueryState } from "nuqs";
+import { useLayoutEffect } from "react";
+import {
+  getInitialPromptFromState,
+  type PageState,
+  shouldResetToWelcome,
+} from "./helpers";
+
+interface UseCopilotUrlStateArgs {
+  pageState: PageState;
+  initialPrompts: Record<string, string>;
+  previousSessionId: string | null;
+  setPageState: (pageState: PageState) => void;
+  setInitialPrompt: (sessionId: string, prompt: string) => void;
+  setPreviousSessionId: (sessionId: string | null) => void;
+}
+
+export function useCopilotURLState({
+  pageState,
+  initialPrompts,
+  previousSessionId,
+  setPageState,
+  setInitialPrompt,
+  setPreviousSessionId,
+}: UseCopilotUrlStateArgs) {
+  const [urlSessionId, setUrlSessionId] = useQueryState(
+    "sessionId",
+    parseAsString,
+  );
+
+  function syncSessionFromUrl() {
+    if (urlSessionId) {
+      if (pageState.type === "chat" && pageState.sessionId === urlSessionId) {
+        setPreviousSessionId(urlSessionId);
+        return;
+      }
+
+      const storedInitialPrompt = initialPrompts[urlSessionId];
+      const currentInitialPrompt = getInitialPromptFromState(
+        pageState,
+        storedInitialPrompt,
+      );
+
+      if (currentInitialPrompt) {
+        setInitialPrompt(urlSessionId, currentInitialPrompt);
+      }
+
+      setPageState({
+        type: "chat",
+        sessionId: urlSessionId,
+        initialPrompt: currentInitialPrompt,
+      });
+      setPreviousSessionId(urlSessionId);
+      return;
+    }
+
+    const wasInChat = previousSessionId !== null && pageState.type === "chat";
+    setPreviousSessionId(null);
+    if (wasInChat) {
+      setPageState({ type: "newChat" });
+      return;
+    }
+
+    if (shouldResetToWelcome(pageState)) {
+      setPageState({ type: "welcome" });
+    }
+  }
+
+  useLayoutEffect(syncSessionFromUrl, [
+    urlSessionId,
+    pageState.type,
+    previousSessionId,
+    initialPrompts,
+  ]);
+
+  return {
+    urlSessionId,
+    setUrlSessionId,
+  };
+}

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

@@ -13,6 +13,7 @@ export interface ChatProps {
   urlSessionId?: string | null;
   initialPrompt?: string;
   onSessionNotFound?: () => void;
+  onStreamingChange?: (isStreaming: boolean) => void;
 }
 
 export function Chat({
@@ -20,6 +21,7 @@ export function Chat({
   urlSessionId,
   initialPrompt,
   onSessionNotFound,
+  onStreamingChange,
 }: ChatProps) {
   const hasHandledNotFoundRef = useRef(false);
   const {
@@ -73,6 +75,7 @@ export function Chat({
             initialMessages={messages}
             initialPrompt={initialPrompt}
             className="flex-1"
+            onStreamingChange={onStreamingChange}
           />
         )}
       </main>

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

@@ -4,6 +4,7 @@ import { Text } from "@/components/atoms/Text/Text";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
 import { cn } from "@/lib/utils";
+import { useEffect } from "react";
 import { ChatInput } from "../ChatInput/ChatInput";
 import { MessageList } from "../MessageList/MessageList";
 import { useChatContainer } from "./useChatContainer";
@@ -13,6 +14,7 @@ export interface ChatContainerProps {
   initialMessages: SessionDetailResponse["messages"];
   initialPrompt?: string;
   className?: string;
+  onStreamingChange?: (isStreaming: boolean) => void;
 }
 
 export function ChatContainer({
@@ -20,6 +22,7 @@ export function ChatContainer({
   initialMessages,
   initialPrompt,
   className,
+  onStreamingChange,
 }: ChatContainerProps) {
   const {
     messages,
@@ -36,6 +39,10 @@ export function ChatContainer({
     initialPrompt,
   });
 
+  useEffect(() => {
+    onStreamingChange?.(isStreaming);
+  }, [isStreaming, onStreamingChange]);
+
   const breakpoint = useBreakpoint();
   const isMobile =
     breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";

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

@@ -1,12 +1,8 @@
-import { Text } from "@/components/atoms/Text/Text";
 
 export function ChatLoader() {
   return (
-    <Text
+    <div className="flex items-center gap-2">
-      variant="small"
+      <div className="h-5 w-5 rounded-full bg-black animate-loader" />
-      className="bg-gradient-to-r from-neutral-600 via-neutral-500 to-neutral-600 bg-[length:200%_100%] bg-clip-text text-xs text-transparent [animation:shimmer_2s_ease-in-out_infinite]"
+    </div>
-    >
-      Taking a bit more time...
-    </Text>
   );
 }

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

@@ -7,7 +7,6 @@ import {
   ArrowsClockwiseIcon,
   CheckCircleIcon,
   CheckIcon,
-  CopyIcon,
 } from "@phosphor-icons/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
@@ -340,11 +339,26 @@ export function ChatMessage({
                   size="icon"
                   onClick={handleCopy}
                   aria-label="Copy message"
+                  className="p-1"
                 >
                   {copied ? (
                     <CheckIcon className="size-4 text-green-600" />
                   ) : (
-                    <CopyIcon className="size-4 text-zinc-600" />
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="size-3 text-zinc-600"
+                    >
+                      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                    </svg>
                   )}
                 </Button>
               )}

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

@@ -1,7 +1,6 @@
 import { cn } from "@/lib/utils";
 import { useEffect, useRef, useState } from "react";
 import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
-import { ChatLoader } from "../ChatLoader/ChatLoader";
 
 export interface ThinkingMessageProps {
   className?: string;
@@ -9,7 +8,9 @@ export interface ThinkingMessageProps {
 
 export function ThinkingMessage({ className }: ThinkingMessageProps) {
   const [showSlowLoader, setShowSlowLoader] = useState(false);
+  const [showCoffeeMessage, setShowCoffeeMessage] = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const coffeeTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     if (timerRef.current === null) {
@@ -18,11 +19,21 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
       }, 8000);
     }
 
+    if (coffeeTimerRef.current === null) {
+      coffeeTimerRef.current = setTimeout(() => {
+        setShowCoffeeMessage(true);
+      }, 10000);
+    }
+
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
       }
+      if (coffeeTimerRef.current) {
+        clearTimeout(coffeeTimerRef.current);
+        coffeeTimerRef.current = null;
+      }
     };
   }, []);
 
@@ -37,16 +48,16 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
         <div className="flex min-w-0 flex-1 flex-col">
           <AIChatBubble>
             <div className="transition-all duration-500 ease-in-out">
-              {showSlowLoader ? (
+              {showCoffeeMessage ? (
-                <ChatLoader />
+                <span className="inline-block bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent animate-shimmer">
+                  This could take a few minutes, grab a coffee ☕️
+                </span>
+              ) : showSlowLoader ? (
+                <span className="inline-block bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent animate-shimmer">
+                  Taking a bit more time...
+                </span>
               ) : (
-                <span
+                <span className="inline-block bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent animate-shimmer">
-                  className="inline-block bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-clip-text text-transparent"
-                  style={{
-                    backgroundSize: "200% 100%",
-                    animation: "shimmer 2s ease-in-out infinite",
-                  }}
-                >
                   Thinking...
                 </span>
               )}

autogpt_platform/frontend/tailwind.config.ts

@@ -157,12 +157,21 @@ const config = {
             backgroundPosition: "-200% 0",
           },
         },
+        loader: {
+          "0%": {
+            boxShadow: "0 0 0 0 rgba(0, 0, 0, 0.25)",
+          },
+          "100%": {
+            boxShadow: "0 0 0 30px rgba(0, 0, 0, 0)",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in": "fade-in 0.2s ease-out",
         shimmer: "shimmer 2s ease-in-out infinite",
+        loader: "loader 1s infinite",
       },
       transitionDuration: {
         "2000": "2000ms",