chore: improve loading states

2026-04-08 03:00:28 -04:00 · 2026-01-22 23:12:50 +07:00
parent f9f984a8f4
commit 49e0fb5f40
10 changed files with 258 additions and 35 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/NewChatContext.tsx
+++ b/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);
+}
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/CopilotShell.tsx
+++ b/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)}
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/layout.tsx
+++ b/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>
+  );
 }
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx
@@ -3,10 +3,11 @@
 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 { ChatLoader } from "@/components/contextual/Chat/components/ChatLoader/ChatLoader";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { getHomepageRoute } from "@/lib/constants";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import {
@@ -16,11 +17,13 @@ import {
 } 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 { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useNewChat } from "./NewChatContext";
 import { getGreetingName, getQuickActions } from "./helpers";

 type PageState =
  | { type: "welcome" }
+  | { type: "newChat" }
  | { type: "creating"; prompt: string }
  | { type: "chat"; sessionId: string; initialPrompt?: string };

@@ -39,16 +42,22 @@ export default function CopilotPage() {
    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;

  const [pageState, setPageState] = useState<PageState>({ type: "welcome" });
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isNewChatModalOpen, setIsNewChatModalOpen] = useState(false);
  const initialPromptRef = useRef<Map<string, string>>(new Map());
+  const previousSessionIdRef = useRef<string | null>(null);
+  const newChatContext = useNewChat();

  const urlSessionId = searchParams.get("sessionId");

  // Sync with URL sessionId (preserve initialPrompt from ref)
-  useEffect(
+  // Use useLayoutEffect for immediate updates before paint
+  useLayoutEffect(
    function syncSessionFromUrl() {
      if (urlSessionId) {
        // If we're already in chat state with this sessionId, don't overwrite
        if (pageState.type === "chat" && pageState.sessionId === urlSessionId) {
+          previousSessionIdRef.current = urlSessionId;
          return;
        }
        // Get initialPrompt from ref or current state
@@ -68,11 +77,35 @@ export default function CopilotPage() {
          sessionId: urlSessionId,
          initialPrompt: currentInitialPrompt,
        });
-      } else if (pageState.type === "chat") {
-        setPageState({ type: "welcome" });
+        previousSessionIdRef.current = urlSessionId;
+      } else {
+        const wasInChat =
+          previousSessionIdRef.current !== null && pageState.type === "chat";
+        previousSessionIdRef.current = null;
+        if (wasInChat) {
+          setPageState({ type: "newChat" });
+        } else if (
+          pageState.type !== "newChat" &&
+          pageState.type !== "creating" &&
+          pageState.type !== "welcome"
+        ) {
+          setPageState({ type: "welcome" });
+        }
      }
    },
-    [urlSessionId],
+    [urlSessionId, pageState.type],
+  );
+
+  useEffect(
+    function transitionNewChatToWelcome() {
+      if (pageState.type === "newChat") {
+        const timer = setTimeout(() => {
+          setPageState({ type: "welcome" });
+        }, 300);
+        return () => clearTimeout(timer);
+      }
+    },
+    [pageState.type],
  );

  useEffect(
@@ -136,6 +169,43 @@ export default function CopilotPage() {
    router.replace("/copilot");
  }

+  function handleStreamingChange(isStreamingValue: boolean) {
+    setIsStreaming(isStreamingValue);
+  }
+
+  function handleNewChatClick() {
+    if (isStreaming) {
+      setIsNewChatModalOpen(true);
+    } else {
+      proceedWithNewChat();
+    }
+  }
+
+  function proceedWithNewChat() {
+    setIsNewChatModalOpen(false);
+    if (newChatContext?.performNewChat) {
+      newChatContext.performNewChat();
+      return;
+    }
+    window.history.replaceState(null, "", "/copilot");
+    router.replace("/copilot");
+  }
+
+  function handleCancelNewChat() {
+    setIsNewChatModalOpen(false);
+  }
+
+  useEffect(
+    function registerNewChatHandler() {
+      if (!newChatContext) return;
+      newChatContext.setOnNewChatClick(handleNewChatClick);
+      return function cleanup() {
+        newChatContext.setOnNewChatClick(undefined);
+      };
+    },
+    [newChatContext, handleNewChatClick],
+  );
+
  if (!isFlagReady || isChatEnabled === false || !isLoggedIn) {
    return null;
  }
@@ -150,7 +220,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: setIsNewChatModalOpen,
+          }}
+          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,11 +276,13 @@ 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">
-        <LoadingSpinner size="large" />
-        <Text variant="body" className="mt-4 text-zinc-500">
-          Starting your chat...
-        </Text>
+      <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>
    );
  }
--- a/autogpt_platform/frontend/src/components/contextual/Chat/Chat.tsx
+++ b/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>
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx
+++ b/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";
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoader/ChatLoader.tsx
+++ b/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
-      variant="small"
-      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]"
-    >
-      Taking a bit more time...
-    </Text>
+    <div className="flex items-center gap-2">
+      <div className="h-5 w-5 rounded-full bg-black animate-loader" />
+    </div>
  );
 }
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
+++ b/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>
              )}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ThinkingMessage/ThinkingMessage.tsx
+++ b/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 ? (
-                <ChatLoader />
+              {showCoffeeMessage ? (
+                <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
-                  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",
-                  }}
-                >
+                <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">
                  Thinking...
                </span>
              )}
--- a/autogpt_platform/frontend/tailwind.config.ts
+++ b/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",