@yourgpt/copilot-sdk 2.1.3 → 2.1.5-alpha.0

package/dist/ui/index.js

@@ -1,10 +1,12 @@
-import { useCopilot, useThreadManager } from '../chunk-DMBFN7KO.js';
-import { createServerAdapter } from '../chunk-VFV5FVVI.js';
+import { useCopilot, useThreadManager } from '../chunk-6BMQZIS3.js';
+import { createServerAdapter } from '../chunk-UXJ6LIZB.js';
 import { DEFAULT_MCP_UI_SANDBOX, parseMCPUIMessage } from '../chunk-G4SF2PNQ.js';
 import '../chunk-EWVQWTNV.js';
-import '../chunk-LZMBBGWH.js';
-import '../chunk-QLH6TSCC.js';
-import '../chunk-XGITAEXU.js';
+import '../chunk-VNLLW3ZI.js';
+import '../chunk-ENFWM3EY.js';
+import '../chunk-4QXY2PBG.js';
+import '../chunk-LLM7AHMO.js';
+import '../chunk-RQ74USYU.js';
 import '../chunk-7W7QLZNC.js';
 import '../chunk-CEOMTQTP.js';
 import '../chunk-PPFHA6IL.js';
@@ -12,13 +14,12 @@ import '../chunk-DABZYCVX.js';
 import '../chunk-MNDGIW47.js';
 import '../chunk-VD74IPKB.js';
 import '../chunk-53UGJNHN.js';
-import '../chunk-RQ74USYU.js';
 import '../chunk-DGUM43GV.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React20 from 'react';
-import React20__default, { memo, createContext, useState, useRef, useId, useCallback, useLayoutEffect, useContext, useEffect } from 'react';
+import * as React18 from 'react';
+import React18__default, { memo, createContext, useState, useRef, useId, useCallback, useLayoutEffect, useContext, useEffect } from 'react';
 import { Streamdown } from 'streamdown';
 import { code } from '@streamdown/code';
 import { Slot } from '@radix-ui/react-slot';
@@ -383,7 +384,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React20.forwardRef(
+var Button = React18.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -624,7 +625,7 @@ function TooltipTrigger({
   disabled,
   ...props
 }) {
-  if (asChild && React20__default.isValidElement(children)) {
+  if (asChild && React18__default.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, render: children, ...props });
   }
   return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, ...props, children });
@@ -653,7 +654,7 @@ function TooltipContent({
     }
   ) }) });
 }
-var Avatar = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Avatar = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
@@ -665,7 +666,7 @@ var Avatar = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -674,7 +675,7 @@ var AvatarImage = React20.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarFallback = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -734,7 +735,7 @@ var MessageContent = ({
   );
   return markdown ? /* @__PURE__ */ jsx(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsx("div", { className: classNames, ...props, children });
 };
-var Textarea = React20.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React18.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -898,7 +899,7 @@ function PromptInputAction({
 }
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React20.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var HoverCardContent = React18.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -1441,7 +1442,7 @@ function SourcesCollapsible({
   defaultExpanded = false,
   className
 }) {
-  const [expanded, setExpanded] = React20.useState(defaultExpanded);
+  const [expanded, setExpanded] = React18.useState(defaultExpanded);
   if (citations.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: cn("border rounded-lg", className), children: [
     /* @__PURE__ */ jsxs(
@@ -1507,7 +1508,7 @@ function SourcesList({
   if (compact) {
     return /* @__PURE__ */ jsxs("div", { className: cn("text-xs text-muted-foreground", className), children: [
       /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sources: " }),
-      citations.map((c, i) => /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+      citations.map((c, i) => /* @__PURE__ */ jsxs(React18.Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "a",
           {
@@ -1585,11 +1586,11 @@ function resultsToCitations(results) {
     domain: result.domain || getDomain3(result.url)
   }));
 }
-var ReasoningContext = React20.createContext(
+var ReasoningContext = React18.createContext(
   null
 );
 function useReasoningContext() {
-  const context = React20.useContext(ReasoningContext);
+  const context = React18.useContext(ReasoningContext);
   if (!context) {
     throw new Error(
       "Reasoning components must be used within a Reasoning provider"
@@ -1605,11 +1606,11 @@ function Reasoning({
   defaultOpen = false,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React20.useState(defaultOpen);
-  const prevStreamingRef = React20.useRef(isStreaming);
+  const [uncontrolledOpen, setUncontrolledOpen] = React18.useState(defaultOpen);
+  const prevStreamingRef = React18.useRef(isStreaming);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const setIsOpen = React20.useCallback(
+  const setIsOpen = React18.useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -1620,7 +1621,7 @@ function Reasoning({
     },
     [isControlled, onOpenChange]
   );
-  React20.useEffect(() => {
+  React18.useEffect(() => {
     if (isStreaming && !prevStreamingRef.current) {
       setIsOpen(true);
     } else if (!isStreaming && prevStreamingRef.current) {
@@ -1676,9 +1677,9 @@ function ReasoningContent({
   className
 }) {
   const { isOpen } = useReasoningContext();
-  const contentRef = React20.useRef(null);
-  const [height, setHeight] = React20.useState(0);
-  React20.useEffect(() => {
+  const contentRef = React18.useRef(null);
+  const [height, setHeight] = React18.useState(0);
+  React18.useEffect(() => {
     if (contentRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -1727,11 +1728,11 @@ function SimpleReasoning({
     /* @__PURE__ */ jsx(ReasoningContent, { markdown, children: content })
   ] });
 }
-var CopilotUIContext = React20.createContext(
+var CopilotUIContext = React18.createContext(
   null
 );
 function useCopilotUI() {
-  const context = React20.useContext(CopilotUIContext);
+  const context = React18.useContext(CopilotUIContext);
   if (!context) {
     return {
       debug: false,
@@ -1746,7 +1747,7 @@ function CopilotUIProvider({
   debug = false,
   defaultDebugExpanded = false
 }) {
-  const value = React20.useMemo(
+  const value = React18.useMemo(
     () => ({
       debug,
       defaultDebugExpanded,
@@ -1889,7 +1890,7 @@ function ToolStep({
 }) {
   const { isDebug, defaultDebugExpanded } = useCopilotUI();
   const debug = debugProp ?? isDebug;
-  const [expanded, setExpanded] = React20.useState(
+  const [expanded, setExpanded] = React18.useState(
     defaultExpanded ?? defaultDebugExpanded ?? false
   );
   const displayTitle = getDisplayTitle(step);
@@ -2370,9 +2371,9 @@ function ArrowUpRightIcon({ className }) {
     }
   );
 }
-var ConfirmationContext = React20.createContext(null);
+var ConfirmationContext = React18.createContext(null);
 function useConfirmationContext() {
-  const context = React20.useContext(ConfirmationContext);
+  const context = React18.useContext(ConfirmationContext);
   if (!context) {
     throw new Error(
       "Confirmation components must be used within a Confirmation provider"
@@ -2544,8 +2545,8 @@ function PermissionConfirmation({
   permissionOptions = DEFAULT_PERMISSION_OPTIONS,
   className
 }) {
-  const [selectedPermission, setSelectedPermission] = React20.useState("ask");
-  const [showOptions, setShowOptions] = React20.useState(false);
+  const [selectedPermission, setSelectedPermission] = React18.useState("ask");
+  const [showOptions, setShowOptions] = React18.useState(false);
   const handleApprove = () => {
     onApprove?.(selectedPermission);
   };
@@ -2675,7 +2676,7 @@ function CompactPermissionConfirmation({
   onReject,
   className
 }) {
-  const [rememberChoice, setRememberChoice] = React20.useState(false);
+  const [rememberChoice, setRememberChoice] = React18.useState(false);
   const handleApprove = () => {
     onApprove?.(rememberChoice ? "allow_always" : "ask");
   };
@@ -2787,6 +2788,86 @@ function FollowUpQuestions({
     index
   )) });
 }
+function BranchNavigator({
+  siblingIndex,
+  totalSiblings,
+  hasPrevious,
+  hasNext,
+  onPrevious,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "csdk-branch-navigator flex items-center gap-1 text-xs text-muted-foreground select-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onPrevious,
+            disabled: !hasPrevious,
+            "aria-label": "Previous version",
+            className: cn(
+              "p-0.5 rounded transition-colors",
+              hasPrevious ? "hover:text-foreground hover:bg-muted cursor-pointer" : "opacity-30 cursor-default"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "tabular-nums leading-none", children: [
+          siblingIndex + 1,
+          "\u2009/\u2009",
+          totalSiblings
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onNext,
+            disabled: !hasNext,
+            "aria-label": "Next version",
+            className: cn(
+              "p-0.5 rounded transition-colors",
+              hasNext ? "hover:text-foreground hover:bg-muted cursor-pointer" : "opacity-30 cursor-default"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function DevLogger({
   state,
   position = "bottom-right",
@@ -3218,9 +3299,9 @@ function ModelSelector({
   showCapabilities = true,
   className
 }) {
-  const [isOpen, setIsOpen] = React20.useState(false);
-  const containerRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const [isOpen, setIsOpen] = React18.useState(false);
+  const containerRef = React18.useRef(null);
+  React18.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -3229,7 +3310,7 @@ function ModelSelector({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const selectedModel = React20.useMemo(() => {
+  const selectedModel = React18.useMemo(() => {
     if (!value) return null;
     if (providers) {
       for (const provider of providers) {
@@ -3455,7 +3536,7 @@ function PopoverTrigger({
   className,
   ...props
 }) {
-  if (asChild && React20.isValidElement(children)) {
+  if (asChild && React18.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Popover$1.Trigger, { render: children, className, ...props });
   }
   return /* @__PURE__ */ jsx(Popover$1.Trigger, { className, ...props, children });
@@ -3590,8 +3671,8 @@ function ThreadPicker({
   itemClassName,
   newButtonClassName
 }) {
-  const [isOpen, setIsOpen] = React20.useState(false);
-  const selectedThread = React20.useMemo(() => {
+  const [isOpen, setIsOpen] = React18.useState(false);
+  const selectedThread = React18.useMemo(() => {
     if (!value) return null;
     return threads.find((t) => t.id === value) ?? null;
   }, [value, threads]);
@@ -3797,7 +3878,7 @@ function ThreadCard({
   showDelete = true,
   className
 }) {
-  const [isHovered, setIsHovered] = React20.useState(false);
+  const [isHovered, setIsHovered] = React18.useState(false);
   const handleDelete = (e) => {
     e.stopPropagation();
     onDelete?.();
@@ -4038,10 +4119,10 @@ function MCPUIFrame({
   showLoading = true,
   testId
 }) {
-  const iframeRef = React20.useRef(null);
-  const [isLoading, setIsLoading] = React20.useState(true);
-  const [error, setError] = React20.useState(null);
-  React20.useEffect(() => {
+  const iframeRef = React18.useRef(null);
+  const [isLoading, setIsLoading] = React18.useState(true);
+  const [error, setError] = React18.useState(null);
+  React18.useEffect(() => {
     const handleMessage = (event) => {
       if (event.source !== iframeRef.current?.contentWindow) {
         return;
@@ -4054,17 +4135,17 @@ function MCPUIFrame({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [onIntent]);
-  const handleLoad = React20.useCallback(() => {
+  const handleLoad = React18.useCallback(() => {
     setIsLoading(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = React20.useCallback(() => {
+  const handleError = React18.useCallback(() => {
     const err = new Error("Failed to load MCP UI content");
     setError(err);
     setIsLoading(false);
     onError?.(err);
   }, [onError]);
-  const { srcDoc, src } = React20.useMemo(() => {
+  const { srcDoc, src } = React18.useMemo(() => {
     if (resource.mimeType === "text/html") {
       let content = resource.content || "";
       if (resource.blob && !resource.content) {
@@ -4229,28 +4310,92 @@ function DefaultMessage({
   registeredTools,
   toolRenderers,
   mcpToolRenderer,
+  fallbackToolRenderer,
   onApproveToolExecution,
   onRejectToolExecution,
   showFollowUps = true,
   onFollowUpClick,
   followUpClassName,
   followUpButtonClassName,
-  citations = { enabled: true }
+  citations = { enabled: true },
+  branchInfo,
+  onSwitchBranch,
+  onEditMessage
 }) {
   const isUser = message.role === "user";
+  const isCompactionMarker = message.role === "system" && message.metadata?.type === "compaction-marker";
   const isStreaming = isLastMessage && isLoading;
-  const { cleanContent: contentWithoutFollowUps, followUps } = React20.useMemo(() => {
+  const [isEditing, setIsEditing] = React18.useState(false);
+  const [editValue, setEditValue] = React18.useState(message.content ?? "");
+  const editRef = React18.useRef(null);
+  const startEdit = React18.useCallback(() => {
+    setEditValue(message.content ?? "");
+    setIsEditing(true);
+    requestAnimationFrame(() => editRef.current?.focus());
+  }, [message.content]);
+  const cancelEdit = React18.useCallback(() => {
+    setIsEditing(false);
+  }, []);
+  const submitEdit = React18.useCallback(() => {
+    const trimmed = editValue.trim();
+    if (!trimmed || !onEditMessage) return;
+    onEditMessage(message.id, trimmed);
+    setIsEditing(false);
+  }, [editValue, message.id, onEditMessage]);
+  const handleEditKeyDown = React18.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submitEdit();
+      }
+      if (e.key === "Escape") {
+        cancelEdit();
+      }
+    },
+    [submitEdit, cancelEdit]
+  );
+  const showBranchNav = isUser && branchInfo && branchInfo.totalSiblings > 1 && onSwitchBranch;
+  const showEditBtn = isUser && !!onEditMessage && !isLoading;
+  if (isCompactionMarker) {
+    const tokensSaved = message.metadata?.tokensSaved;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-2 px-1 my-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground whitespace-nowrap flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "size-3 opacity-60",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M19 9l-7 7-7-7"
+              }
+            )
+          }
+        ),
+        tokensSaved ? `Earlier conversation summarized \xB7 ~${tokensSaved.toLocaleString()} tokens saved` : "Earlier conversation summarized"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" })
+    ] });
+  }
+  const { cleanContent: contentWithoutFollowUps, followUps } = React18.useMemo(() => {
     if (isUser || !message.content) {
       return { cleanContent: message.content, followUps: [] };
     }
     return parseFollowUps(message.content);
   }, [message.content, isUser]);
-  const cleanContent = React20.useMemo(() => {
+  const cleanContent = React18.useMemo(() => {
     if (!contentWithoutFollowUps) return contentWithoutFollowUps;
     return contentWithoutFollowUps.replace(/\n*\*{0,2}Sources:?\*{0,2}\s*(\[.+?\]\(.+?\)[,\s]*)+$/gi, "").trim();
   }, [contentWithoutFollowUps]);
   const shouldShowFollowUps = showFollowUps && !isUser && isLastMessage && !isLoading && followUps.length > 0 && onFollowUpClick;
-  const sources = React20.useMemo(() => {
+  const sources = React18.useMemo(() => {
     if (isUser || !citations.enabled) return [];
     const extractedSources = [];
     const addSource = (url, title, description) => {
@@ -4307,32 +4452,118 @@ function DefaultMessage({
     return /* @__PURE__ */ jsxs(
       Message,
       {
-        className: cn(
-          "flex gap-2",
-          showUserAvatar ? "justify-end" : "justify-end"
-        ),
+        className: cn("flex gap-2 group/user-msg justify-end"),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: [
-            message.content && /* @__PURE__ */ jsx(
-              MessageContent,
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full min-w-[200px]", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
               {
+                ref: editRef,
+                value: editValue,
+                onChange: (e) => setEditValue(e.target.value),
+                onKeyDown: handleEditKeyDown,
+                rows: Math.max(2, (editValue.match(/\n/g) || []).length + 1),
                 className: cn(
-                  "csdk-message-user rounded-lg px-4 py-2 bg-primary text-primary-foreground",
+                  "csdk-edit-textarea w-full rounded-lg px-3 py-2 text-sm resize-none",
+                  "bg-primary text-primary-foreground placeholder:text-primary-foreground/50",
+                  "focus:outline-none focus:ring-2 focus:ring-primary-foreground/30",
                   userMessageClassName
-                ),
-                markdown: true,
-                size,
-                children: message.content
+                )
               }
             ),
-            hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) })
-          ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 justify-end", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: cancelEdit,
+                  className: "csdk-edit-cancel px-3 py-1 text-xs rounded-md bg-muted text-muted-foreground hover:bg-muted/80 transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: submitEdit,
+                  disabled: !editValue.trim(),
+                  className: "csdk-edit-submit px-3 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors",
+                  children: "Send"
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            message.content && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                MessageContent,
+                {
+                  className: cn(
+                    "csdk-message-user rounded-lg px-4 py-2 bg-primary text-primary-foreground",
+                    userMessageClassName
+                  ),
+                  markdown: true,
+                  size,
+                  children: message.content
+                }
+              ),
+              showEditBtn && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: startEdit,
+                  "aria-label": "Edit message",
+                  className: cn(
+                    "csdk-edit-btn absolute -left-7 top-1/2 -translate-y-1/2",
+                    "size-6 flex items-center justify-center rounded-full",
+                    "text-muted-foreground bg-background border border-border shadow-sm",
+                    "opacity-0 group-hover/user-msg:opacity-100 transition-opacity",
+                    "hover:text-foreground hover:bg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                        /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ] }),
+            hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
+            showBranchNav && /* @__PURE__ */ jsx(
+              BranchNavigator,
+              {
+                siblingIndex: branchInfo.siblingIndex,
+                totalSiblings: branchInfo.totalSiblings,
+                hasPrevious: branchInfo.hasPrevious,
+                hasNext: branchInfo.hasNext,
+                onPrevious: () => onSwitchBranch(
+                  branchInfo.siblingIds[branchInfo.siblingIndex - 1]
+                ),
+                onNext: () => onSwitchBranch(
+                  branchInfo.siblingIds[branchInfo.siblingIndex + 1]
+                ),
+                className: "mt-1"
+              }
+            )
+          ] }) }),
           showUserAvatar && /* @__PURE__ */ jsx(
             MessageAvatar,
             {
               src: userAvatar.src,
               alt: "User",
               fallback: userAvatar.fallback,
+              className: userAvatar.className,
               children: userAvatar.component
             }
           )
@@ -4356,6 +4587,7 @@ function DefaultMessage({
     const toolDef = registeredTools?.find((t) => t.name === toolName);
     if (mcpToolRenderer && (execSource === "mcp" || toolDef?.source === "mcp"))
       return true;
+    if (fallbackToolRenderer) return true;
     if (toolDef?.render) return true;
     return false;
   };
@@ -4382,7 +4614,7 @@ function DefaultMessage({
         alt: "Assistant",
         fallback: assistantAvatar.fallback,
         fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback && !assistantAvatar.component ? /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
-        className: "bg-muted",
+        className: cn("bg-muted", assistantAvatar.className),
         children: assistantAvatar.component
       }
     ),
@@ -4395,10 +4627,7 @@ function DefaultMessage({
           className: "mb-2"
         }
       ),
-      isLastMessage && isProcessing ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted px-4 py-2 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Continuing..." })
-      ] }) : (
+      isLastMessage && isProcessing && !completedTools?.length && !pendingApprovalTools?.length ? /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }) : (
         /* Show streaming loader when loading with no content and no tools */
         isLastMessage && isLoading && !cleanContent?.trim() && !toolsWithCustomRender?.length && !toolsWithoutCustomRender?.length && !pendingApprovalTools?.length ? /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: loaderVariant, size: "sm" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           cleanContent?.trim() && /* @__PURE__ */ jsx(
@@ -4454,6 +4683,24 @@ function DefaultMessage({
                 exec.id
               );
             }
+            if (fallbackToolRenderer) {
+              const FallbackRenderer = fallbackToolRenderer;
+              return /* @__PURE__ */ jsx(
+                FallbackRenderer,
+                {
+                  execution: {
+                    id: exec.id,
+                    name: exec.name,
+                    args: exec.args,
+                    status: exec.status,
+                    result: exec.result,
+                    error: exec.error,
+                    source: exec.source
+                  }
+                },
+                exec.id
+              );
+            }
             const toolDefForRender = toolDef ?? registeredTools?.find((t) => t.name === exec.name);
             if (toolDefForRender?.render) {
               let status = "pending";
@@ -4472,7 +4719,7 @@ function DefaultMessage({
               const output = toolDefForRender.render(
                 renderProps
               );
-              return /* @__PURE__ */ jsx(React20.Fragment, { children: output }, exec.id);
+              return /* @__PURE__ */ jsx(React18.Fragment, { children: output }, exec.id);
             }
             return null;
           }) }),
@@ -4498,6 +4745,7 @@ function DefaultMessage({
               `${exec.id}-ui`
             );
           }),
+          isLastMessage && isProcessing && completedTools && completedTools.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
           pendingApprovalTools && pendingApprovalTools.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: pendingApprovalTools.map((tool) => {
             const approvalCallbacks = {
               onApprove: (extraData) => onApproveToolExecution?.(tool.id, extraData),
@@ -4531,7 +4779,7 @@ function DefaultMessage({
               const output = toolDef.render(
                 renderProps
               );
-              return /* @__PURE__ */ jsx(React20.Fragment, { children: output }, tool.id);
+              return /* @__PURE__ */ jsx(React18.Fragment, { children: output }, tool.id);
             }
             return /* @__PURE__ */ jsx(
               PermissionConfirmation,
@@ -4580,7 +4828,7 @@ function DefaultMessage({
   ] });
 }
 function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React20.useState(false);
+  const [expanded, setExpanded] = React18.useState(false);
   if (attachment.type !== "image") {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attachment.type }),
@@ -5038,10 +5286,10 @@ function ChatView({ children, className }) {
 ChatView.displayName = "ChatView";
 function chatViewHasOnlyLayoutChildren(chatViewElement) {
   if (!chatViewElement?.props?.children) return false;
-  const childArray = React20__default.Children.toArray(chatViewElement.props.children);
+  const childArray = React18__default.Children.toArray(chatViewElement.props.children);
   if (childArray.length === 0) return false;
   return childArray.every(
-    (child) => React20__default.isValidElement(child) && (child.type === Header || child.type === Footer)
+    (child) => React18__default.isValidElement(child) && (child.type === Header || child.type === Footer)
   );
 }
 function Header({ children, className }) {
@@ -5179,18 +5427,18 @@ function ThreadPickerCompound(props) {
   );
 }
 function hasCompoundChild(children, ...components) {
-  return React20__default.Children.toArray(children).some(
-    (child) => React20__default.isValidElement(child) && components.includes(child.type)
+  return React18__default.Children.toArray(children).some(
+    (child) => React18__default.isValidElement(child) && components.includes(child.type)
   );
 }
 function findCompoundChild(children, component) {
-  return React20__default.Children.toArray(children).find(
-    (child) => React20__default.isValidElement(child) && child.type === component
+  return React18__default.Children.toArray(children).find(
+    (child) => React18__default.isValidElement(child) && child.type === component
   );
 }
 function filterCompoundChildren(children, ...components) {
-  return React20__default.Children.toArray(children).filter(
-    (child) => React20__default.isValidElement(child) && components.includes(child.type)
+  return React18__default.Children.toArray(children).filter(
+    (child) => React18__default.isValidElement(child) && components.includes(child.type)
   );
 }
 var DEFAULT_MAX_FILE_SIZE2 = 5 * 1024 * 1024;
@@ -5265,6 +5513,7 @@ function ChatComponent({
   registeredTools,
   toolRenderers,
   mcpToolRenderer,
+  fallbackToolRenderer,
   onApproveToolExecution,
   onRejectToolExecution,
   // Follow-up Questions
@@ -5277,6 +5526,8 @@ function ChatComponent({
   renderMessage,
   renderInput,
   renderHeader,
+  // Avatar grouping
+  groupConsecutiveMessages = false,
   // Styling
   className,
   classNames = {},
@@ -5285,7 +5536,11 @@ function ChatComponent({
   threads,
   currentThreadId,
   onSwitchThread,
-  isThreadBusy
+  isThreadBusy,
+  // Branching
+  getBranchInfo,
+  onSwitchBranch,
+  onEditMessage
 }) {
   const userAvatar = { fallback: "U", ...userAvatarProp };
   const assistantAvatar = { fallback: "AI", ...assistantAvatarProp };
@@ -5460,7 +5715,7 @@ function ChatComponent({
     },
     [onSendMessage]
   );
-  const contextValue = React20__default.useMemo(
+  const contextValue = React18__default.useMemo(
     () => ({
       view,
       send,
@@ -5554,6 +5809,28 @@ function ChatComponent({
                       messages.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-muted-foreground", children: welcomeMessage || "Send a message to start the conversation" }),
                       messages.map((message, index) => {
                         const isLastMessage = index === messages.length - 1;
+                        const GROUP_THRESHOLD_MS = 5 * 60 * 1e3;
+                        const shouldHideAvatar = (() => {
+                          if (!groupConsecutiveMessages || index === 0)
+                            return false;
+                          let prevIdx = index - 1;
+                          while (prevIdx >= 0) {
+                            const prev = messages[prevIdx];
+                            const isToolMsg = prev.role === "tool";
+                            const isInvisibleSystem = prev.role === "system" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            prev.metadata?.type !== "compaction-marker";
+                            if (!isToolMsg && !isInvisibleSystem) break;
+                            prevIdx--;
+                          }
+                          if (prevIdx < 0) return false;
+                          const prevVisible = messages[prevIdx];
+                          if (prevVisible.role !== message.role) return false;
+                          const curTs = message.timestamp;
+                          const prevTs = prevVisible.timestamp;
+                          if (curTs && prevTs && curTs - prevTs > GROUP_THRESHOLD_MS)
+                            return false;
+                          return true;
+                        })();
                         const isEmptyAssistant = message.role === "assistant" && !message.content?.trim();
                         const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
                         const hasToolExecutions = message.toolExecutions && message.toolExecutions.length > 0;
@@ -5576,12 +5853,12 @@ function ChatComponent({
                             onSendMessage?.(question);
                           }
                         };
-                        return renderMessage ? /* @__PURE__ */ jsx(React20__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
+                        return renderMessage ? /* @__PURE__ */ jsx(React18__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
                           DefaultMessage,
                           {
                             message: messageWithExecutions,
-                            userAvatar,
-                            assistantAvatar,
+                            userAvatar: shouldHideAvatar && message.role === "user" ? { ...userAvatar, className: "invisible" } : userAvatar,
+                            assistantAvatar: shouldHideAvatar && message.role === "assistant" ? { ...assistantAvatar, className: "invisible" } : assistantAvatar,
                             showUserAvatar,
                             userMessageClassName: classNames.userMessage,
                             assistantMessageClassName: classNames.assistantMessage,
@@ -5593,13 +5870,17 @@ function ChatComponent({
                             registeredTools,
                             toolRenderers,
                             mcpToolRenderer,
+                            fallbackToolRenderer,
                             onApproveToolExecution,
                             onRejectToolExecution,
                             showFollowUps,
                             onFollowUpClick: handleFollowUpClick,
                             followUpClassName,
                             followUpButtonClassName,
-                            citations: citations === false ? { enabled: false } : citations
+                            citations: citations === false ? { enabled: false } : citations,
+                            branchInfo: message.role === "user" ? getBranchInfo?.(message.id) ?? null : null,
+                            onSwitchBranch,
+                            onEditMessage
                           },
                           message.id
                         );
@@ -5932,7 +6213,7 @@ function useInternalThreadManager(config = {}) {
     clearCurrentThread,
     refreshThreads
   } = threadManager;
-  const { messages, setMessages, status, isLoading } = useCopilot();
+  const { messages, setMessages, status, isLoading, getAllMessages } = useCopilot();
   const isLoadingMessagesRef = useRef(false);
   const savingToThreadRef = useRef(null);
   const lastSavedSnapshotRef = useRef("");
@@ -5951,6 +6232,8 @@ function useInternalThreadManager(config = {}) {
       created_at: m.createdAt,
       tool_calls: m.toolCalls,
       tool_call_id: m.toolCallId,
+      parent_id: m.parentId,
+      children_ids: m.childrenIds,
       // Preserve full metadata including citations, toolExecutions, etc.
       metadata: {
         ...m.metadata,
@@ -5971,6 +6254,8 @@ function useInternalThreadManager(config = {}) {
           createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
           toolCalls: m.tool_calls,
           toolCallId: m.tool_call_id,
+          parentId: m.parent_id,
+          childrenIds: m.children_ids,
           attachments: m.metadata?.attachments
         }));
         lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
@@ -6013,6 +6298,8 @@ function useInternalThreadManager(config = {}) {
         createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
         toolCalls: m.tool_calls,
         toolCallId: m.tool_call_id,
+        parentId: m.parent_id,
+        childrenIds: m.children_ids,
         attachments: m.metadata?.attachments,
         thinking: m.metadata?.thinking,
         // Preserve full metadata including citations, toolExecutions, etc.
@@ -6044,7 +6331,10 @@ function useInternalThreadManager(config = {}) {
     if (currentSnapshot === lastSavedSnapshotRef.current) {
       return;
     }
-    const coreMessages = convertToCore(messages);
+    const allUIMessages = getAllMessages();
+    const coreMessages = convertToCore(
+      allUIMessages.length > 0 ? allUIMessages : messages
+    );
     if (!currentThreadId && !savingToThreadRef.current) {
       savingToThreadRef.current = "creating";
       createThread({ messages: coreMessages }).then((thread) => {
@@ -6069,6 +6359,7 @@ function useInternalThreadManager(config = {}) {
     refreshThreads,
     getMessageSnapshot,
     convertToCore,
+    getAllMessages,
     onThreadChange
   ]);
   const isBusy = isLoading || status === "streaming" || status === "submitted";
@@ -6148,7 +6439,10 @@ function CopilotChatBase(props) {
     toolExecutions: rawToolExecutions,
     approveToolExecution,
     rejectToolExecution,
-    registeredTools
+    registeredTools,
+    switchBranch,
+    getBranchInfo,
+    editMessage
   } = useCopilot();
   const toolExecutions = rawToolExecutions.map(
     (exec) => ({
@@ -6167,7 +6461,9 @@ function CopilotChatBase(props) {
   messages.filter((m) => m.role === "tool" && m.toolCallId).forEach((m) => {
     toolResultsMap.set(m.toolCallId, m.content ?? "");
   });
-  const visibleMessages = messages.filter((m) => m.role !== "tool").map((m) => {
+  const visibleMessages = messages.filter(
+    (m) => m.role !== "tool" && (m.role !== "system" || m.metadata?.type === "compaction-marker")
+  ).map((m) => {
     let messageToolExecutions;
     if (m.role === "assistant" && m.toolCalls && m.toolCalls.length > 0) {
       const toolCallIds = new Set(
@@ -6263,24 +6559,29 @@ function CopilotChatBase(props) {
   });
   const suggestions = visibleMessages.length === 0 && chatProps.suggestions?.length ? chatProps.suggestions : [];
   const lastMessage = messages[messages.length - 1];
-  const isInToolFlow = lastMessage?.role === "assistant" && lastMessage.toolCalls?.length;
+  const lastAssistantWithTools = [...messages].reverse().find(
+    (m) => m.role === "assistant" && m.toolCalls?.length
+  );
+  const isInToolFlow = lastMessage?.role === "tool" || lastMessage?.role === "assistant" && lastMessage.toolCalls?.length;
   let isProcessingToolResults = false;
   if (isLoading && isInToolFlow) {
-    const currentToolCallIds = new Set(
-      lastMessage.toolCalls?.map(
-        (tc) => tc.id
-      ) || []
-    );
-    const currentExecutions = toolExecutions.filter(
-      (exec) => currentToolCallIds.has(exec.id)
-    );
-    const hasCompletedTools = currentExecutions.some(
-      (exec) => exec.status === "completed" || exec.status === "error" || exec.status === "failed"
-    );
-    const hasExecutingTools = currentExecutions.some(
-      (exec) => exec.status === "executing" || exec.status === "pending"
-    );
-    isProcessingToolResults = hasCompletedTools && !hasExecutingTools;
+    if (lastMessage?.role === "tool") {
+      isProcessingToolResults = true;
+    } else if (lastAssistantWithTools) {
+      const currentToolCallIds = new Set(
+        lastAssistantWithTools.toolCalls?.map((tc) => tc.id) || []
+      );
+      const currentExecutions = toolExecutions.filter(
+        (exec) => currentToolCallIds.has(exec.id)
+      );
+      const hasCompletedTools = currentExecutions.some(
+        (exec) => exec.status === "completed" || exec.status === "error" || exec.status === "failed"
+      );
+      const hasExecutingTools = currentExecutions.some(
+        (exec) => exec.status === "executing" || exec.status === "pending"
+      );
+      isProcessingToolResults = hasCompletedTools && !hasExecutingTools;
+    }
   }
   const chatClassNames = classNames ? {
     root: classNames.root,
@@ -6294,7 +6595,7 @@ function CopilotChatBase(props) {
     footer: classNames.footer
   } : void 0;
   const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
-  const handleDeleteThread = React20__default.useCallback(
+  const handleDeleteThread = React18__default.useCallback(
     (threadId) => {
       const isCurrentThread = threadManager.currentThreadId === threadId;
       threadManager.deleteThread(threadId);
@@ -6351,6 +6652,9 @@ function CopilotChatBase(props) {
       currentThreadId: threadManager.currentThreadId,
       onSwitchThread: isPersistenceEnabled ? handleSwitchThread : void 0,
       isThreadBusy: isBusy,
+      getBranchInfo,
+      onSwitchBranch: switchBranch,
+      onEditMessage: editMessage,
       children
     }
   );
@@ -6419,6 +6723,6 @@ function PoweredBy({ className, showLogo = true }) {
   );
 }
 
-export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, cn, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
+export { AlertTriangleIcon, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, cn, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map