@copilotkit/react-core 1.56.4-canary.1777529757 → 1.56.4-canary.1777538870

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-core",
-  "version": "1.56.4-canary.1777529757",
+  "version": "1.56.4-canary.1777538870",
   "private": false,
   "keywords": [
     "ai",
@@ -52,8 +52,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ag-ui/client": "0.0.53",
-    "@ag-ui/core": "0.0.53",
+    "@ag-ui/client": "0.0.52",
+    "@ag-ui/core": "0.0.52",
     "@jetbrains/websandbox": "^1.1.3",
     "@lit-labs/react": "^2.0.2",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -73,11 +73,11 @@
     "untruncate-json": "^0.0.1",
     "use-stick-to-bottom": "^1.1.1",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/a2ui-renderer": "1.56.4-canary.1777529757",
-    "@copilotkit/shared": "1.56.4-canary.1777529757",
-    "@copilotkit/web-inspector": "1.56.4-canary.1777529757",
-    "@copilotkit/runtime-client-gql": "1.56.4-canary.1777529757",
-    "@copilotkit/core": "1.56.4-canary.1777529757"
+    "@copilotkit/core": "1.56.4-canary.1777538870",
+    "@copilotkit/runtime-client-gql": "1.56.4-canary.1777538870",
+    "@copilotkit/shared": "1.56.4-canary.1777538870",
+    "@copilotkit/a2ui-renderer": "1.56.4-canary.1777538870",
+    "@copilotkit/web-inspector": "1.56.4-canary.1777538870"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

package/src/v2/components/chat/CopilotChatAttachmentQueue.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal, flushSync } from "react-dom";
 import type { Attachment } from "@copilotkit/shared";
 import {
   formatFileSize,
   getSourceUrl,
   getDocumentIcon,
 } from "@copilotkit/shared";
-import { Play } from "lucide-react";
+import { Play, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Lightbox, useLightbox } from "./Lightbox";
 
 interface CopilotChatAttachmentQueueProps {
   attachments: Attachment[];
@@ -88,6 +88,116 @@ function AttachmentPreview({ attachment }: { attachment: Attachment }) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Lightbox – fullscreen overlay for images and videos (portal to body)
+// Uses the View Transition API when available for a smooth thumbnail-to-
+// fullscreen morph; falls back to a simple opacity fade.
+// ---------------------------------------------------------------------------
+
+interface LightboxProps {
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+function Lightbox({ onClose, children }: LightboxProps) {
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      className="cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in"
+      onClick={onClose}
+    >
+      <button
+        onClick={onClose}
+        className="cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10"
+        aria-label="Close preview"
+      >
+        <X className="cpk:w-5 cpk:h-5" />
+      </button>
+
+      <div onClick={(e) => e.stopPropagation()}>{children}</div>
+    </div>,
+    document.body,
+  );
+}
+
+type DocWithVT = Document & {
+  startViewTransition?: (cb: () => void) => { finished: Promise<void> };
+};
+
+/**
+ * Hook that manages lightbox open/close and uses the View Transition API to
+ * morph the thumbnail into fullscreen content.
+ *
+ * The trick: `view-transition-name` must live on exactly ONE element at a time.
+ * - Old state (thumbnail visible): name is on the thumbnail.
+ * - New state (lightbox visible): name moves to the lightbox content.
+ * `flushSync` ensures React commits the DOM change synchronously inside the
+ * `startViewTransition` callback so the API can snapshot old → new correctly.
+ */
+function useLightbox() {
+  const thumbnailRef = useRef<HTMLElement>(null);
+  const [open, setOpen] = useState(false);
+  const vtName = useId();
+
+  const openLightbox = useCallback(() => {
+    const thumb = thumbnailRef.current;
+    const doc = document as DocWithVT;
+
+    if (doc.startViewTransition && thumb) {
+      // Old snapshot: name on the thumbnail
+      thumb.style.viewTransitionName = vtName;
+
+      doc.startViewTransition(() => {
+        // New snapshot: remove from thumb (lightbox content will have it)
+        thumb.style.viewTransitionName = "";
+        flushSync(() => setOpen(true));
+      });
+    } else {
+      setOpen(true);
+    }
+  }, []);
+
+  const closeLightbox = useCallback(() => {
+    const thumb = thumbnailRef.current;
+    const doc = document as DocWithVT;
+
+    if (doc.startViewTransition && thumb) {
+      const transition = doc.startViewTransition(() => {
+        // New snapshot: name back on thumbnail
+        flushSync(() => setOpen(false));
+        thumb.style.viewTransitionName = vtName;
+      });
+      // Clean up the name after animation finishes (or fails)
+      transition.finished
+        .then(() => {
+          thumb.style.viewTransitionName = "";
+        })
+        .catch(() => {
+          thumb.style.viewTransitionName = "";
+        });
+    } else {
+      setOpen(false);
+    }
+  }, []);
+
+  return {
+    thumbnailRef,
+    vtName,
+    open,
+    openLightbox,
+    closeLightbox,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Image
 // ---------------------------------------------------------------------------

package/src/v2/components/chat/CopilotChatAttachmentRenderer.tsx

@@ -2,7 +2,6 @@ import React, { memo, useState } from "react";
 import type { InputContentSource } from "@copilotkit/shared";
 import { getSourceUrl, getDocumentIcon } from "@copilotkit/shared";
 import { cn } from "../../lib/utils";
-import { Lightbox, useLightbox } from "./Lightbox";
 
 interface CopilotChatAttachmentRendererProps {
   type: "image" | "audio" | "video" | "document";
@@ -19,8 +18,6 @@ const ImageAttachment = memo(function ImageAttachment({
   className?: string;
 }) {
   const [error, setError] = useState(false);
-  const { thumbnailRef, vtName, open, openLightbox, closeLightbox } =
-    useLightbox();
 
   if (error) {
     return (
@@ -36,29 +33,12 @@ const ImageAttachment = memo(function ImageAttachment({
   }
 
   return (
-    <>
-      <img
-        ref={thumbnailRef as React.Ref<HTMLImageElement>}
-        src={src}
-        alt="Image attachment"
-        className={cn(
-          "cpk:max-w-[80px] cpk:max-h-[80px] cpk:w-auto cpk:h-auto cpk:rounded-xl cpk:object-cover cpk:cursor-pointer cpk:bg-muted",
-          className,
-        )}
-        onClick={openLightbox}
-        onError={() => setError(true)}
-      />
-      {open && (
-        <Lightbox onClose={closeLightbox}>
-          <img
-            style={{ viewTransitionName: vtName }}
-            src={src}
-            alt="Image attachment"
-            className="cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
-          />
-        </Lightbox>
-      )}
-    </>
+    <img
+      src={src}
+      alt="Image attachment"
+      className={cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className)}
+      onError={() => setError(true)}
+    />
   );
 });
 

package/src/v2/components/chat/CopilotChatUserMessage.tsx

@@ -217,8 +217,9 @@ export function CopilotChatUserMessage({
       data-message-id={message.id}
       {...props}
     >
+      {BoundMessageRenderer}
       {mediaParts.length > 0 && (
-        <div className="cpk:flex cpk:flex-row cpk:flex-wrap cpk:justify-end cpk:gap-2 cpk:mb-2">
+        <div className="cpk:flex cpk:flex-col cpk:items-end cpk:gap-2 cpk:mt-2">
           {mediaParts.map((part, index) => (
             <CopilotChatAttachmentRenderer
               key={index}
@@ -229,7 +230,6 @@ export function CopilotChatUserMessage({
           ))}
         </div>
       )}
-      {BoundMessageRenderer}
       {BoundToolbar}
     </div>
   );

package/src/v2/components/chat/CopilotChatView.tsx

@@ -167,17 +167,7 @@ export function CopilotChatView({
   className,
   ...props
 }: CopilotChatViewProps) {
-  // Element-as-state via callback ref. The overlay wrapper only renders on the
-  // chat-view branch (the welcome-screen branch omits it), so a plain
-  // useRef + `[]` useEffect would observe `null` on mount whenever the chat
-  // starts on the welcome screen and never re-attach after the user sends
-  // their first message — leaving inputContainerHeight at 0 and the scroll
-  // content's reserved bottom padding at 32px instead of ~input height. The
-  // result is the last messages scrolling underneath the absolute-positioned
-  // input pill. Subscribing to element state lets the observer attach (and
-  // detach) reactively as the overlay mounts/unmounts.
-  const [inputContainerEl, setInputContainerEl] =
-    useState<HTMLDivElement | null>(null);
+  const inputContainerRef = useRef<HTMLDivElement>(null);
   const [inputContainerHeight, setInputContainerHeight] = useState(0);
   const [isResizing, setIsResizing] = useState(false);
   const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -188,14 +178,8 @@ export function CopilotChatView({
 
   // Track input container height changes
   useEffect(() => {
-    const element = inputContainerEl;
-    if (!element) {
-      // Reset measured height so the scroll content's paddingBottom doesn't
-      // hold a stale value if the overlay unmounts (e.g. messages cleared
-      // and the welcome screen returns).
-      setInputContainerHeight(0);
-      return;
-    }
+    const element = inputContainerRef.current;
+    if (!element) return;
 
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -234,7 +218,7 @@ export function CopilotChatView({
         clearTimeout(resizeTimeoutRef.current);
       }
     };
-  }, [inputContainerEl]);
+  }, []);
 
   const BoundMessageView = renderSlot(messageView, CopilotChatMessageView, {
     messages,
@@ -264,14 +248,15 @@ export function CopilotChatView({
     ...(disclaimer !== undefined ? { disclaimer } : {}),
   } as CopilotChatInputProps);
 
-  // Hide suggestions while a thread is connecting (mid-replay would render
-  // against a still-assembling message tree and visibly jump as each final
-  // text chunk reflows the layout). Run-in-flight is handled by the
-  // SuggestionEngine: at run start, non-"always" suggestions are cleared and
-  // only "always" ones are restored — so a non-empty `suggestions` array
-  // here already means "this is something the user opted to keep visible."
+  // Hide suggestions while a thread is connecting or a run is in flight.
+  // Otherwise, mid-replay (bootstrap stream from /connect) or mid-run, the
+  // suggestions would render against a still-assembling message tree and
+  // visibly jump as each final text chunk reflows the layout.
   const hasSuggestions =
-    !isConnecting && Array.isArray(suggestions) && suggestions.length > 0;
+    !isConnecting &&
+    !isRunning &&
+    Array.isArray(suggestions) &&
+    suggestions.length > 0;
   const BoundSuggestionView = hasSuggestions
     ? renderSlot(suggestionView, CopilotChatSuggestionView, {
         suggestions,
@@ -413,7 +398,7 @@ export function CopilotChatView({
       {BoundScrollView}
 
       <div
-        ref={setInputContainerEl}
+        ref={inputContainerRef}
         data-testid="copilot-input-overlay"
         className="cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none"
       >

package/src/v2/components/chat/__tests__/CopilotChatView.inputOverlay.test.tsx

@@ -6,7 +6,6 @@ import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChat
 import { CopilotChatView } from "../CopilotChatView";
 import { LastUserMessageContext } from "../last-user-message-context";
 import type { Attachment } from "@copilotkit/shared";
-import type { Message } from "@ag-ui/core";
 
 beforeEach(() => {
   HTMLElement.prototype.scrollTo = vi.fn();
@@ -170,95 +169,4 @@ describe("CopilotChatView input overlay layout", () => {
       (global as any).ResizeObserver = OriginalRO;
     }
   });
-
-  it("attaches the resize observer when transitioning from welcome to chat view", async () => {
-    // Regression: a `[]`-deps useEffect captured `inputContainerRef.current`
-    // as null when mounted on the welcome screen and never re-ran after the
-    // user sent their first message. The overlay rendered without a measured
-    // height, so paddingBottom stayed at 32 and the last messages slid
-    // underneath the absolute-positioned input pill. Verify the observer
-    // attaches reactively when the overlay mounts post-transition.
-    const callbacks: Array<{
-      cb: ResizeObserverCallback;
-      target: Element | null;
-    }> = [];
-    const OriginalRO = global.ResizeObserver;
-    class MockResizeObserver {
-      private cb: ResizeObserverCallback;
-      constructor(cb: ResizeObserverCallback) {
-        this.cb = cb;
-      }
-      observe(target: Element) {
-        callbacks.push({ cb: this.cb, target });
-      }
-      unobserve() {}
-      disconnect() {}
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (global as any).ResizeObserver = MockResizeObserver as any;
-
-    try {
-      // Render with no messages to start on the welcome screen branch — the
-      // overlay wrapper does not exist in this DOM, so the observer cannot
-      // attach yet.
-      const initialMessages: Message[] = [];
-      const screen = render(
-        <TestWrapper>
-          <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
-            <CopilotChatView messages={initialMessages} />
-          </LastUserMessageContext.Provider>
-        </TestWrapper>,
-      );
-
-      await screen.findByTestId("copilot-welcome-screen");
-      expect(screen.queryByTestId("copilot-input-overlay")).toBeNull();
-
-      // Transition to the chat view by re-rendering with messages — mirrors
-      // what happens when CopilotChat re-renders after the user submits.
-      screen.rerender(
-        <TestWrapper>
-          <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
-            <CopilotChatView messages={sampleMessages} />
-          </LastUserMessageContext.Provider>
-        </TestWrapper>,
-      );
-
-      await waitForMount(screen);
-      const overlay = screen.getByTestId("copilot-input-overlay");
-
-      // The bug: observer was attached at mount when the overlay element was
-      // null, so it never re-attached after the transition. Verify it now
-      // observes the overlay specifically.
-      await waitFor(() =>
-        expect(callbacks.some(({ target }) => target === overlay)).toBe(true),
-      );
-
-      const scrollContent = screen.getByTestId("copilot-scroll-content");
-      // Simulate the overlay reporting a real height (e.g. 88px input pill).
-      // Only fire on the overlay's own observer — other components (e.g. the
-      // textarea autosize) also use ResizeObserver and would corrupt the
-      // assertion if we fed all observers a 88px contentRect.
-      for (const { cb, target } of callbacks) {
-        if (target !== overlay) continue;
-        cb(
-          [
-            {
-              contentRect: { height: 88 } as DOMRectReadOnly,
-            } as ResizeObserverEntry,
-          ],
-          {} as ResizeObserver,
-        );
-      }
-
-      // 88 (input) + 32 (no suggestions baseline) = 120px. Without the fix,
-      // paddingBottom would be stuck at 32px because the observer never
-      // attached.
-      await waitFor(() =>
-        expect(scrollContent.style.paddingBottom).toBe("120px"),
-      );
-    } finally {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (global as any).ResizeObserver = OriginalRO;
-    }
-  });
 });