@yourgpt/copilot-sdk 2.1.4 → 2.1.5-alpha.1

package/dist/ui/index.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var chunkN6VZ7FOW_cjs = require('../chunk-N6VZ7FOW.cjs');
-var chunkOQPRIB73_cjs = require('../chunk-OQPRIB73.cjs');
+var chunkIXWNDR7H_cjs = require('../chunk-IXWNDR7H.cjs');
+var chunkI3SQUNTT_cjs = require('../chunk-I3SQUNTT.cjs');
 var chunkJO4BHPAD_cjs = require('../chunk-JO4BHPAD.cjs');
 require('../chunk-JGPDQDY4.cjs');
-require('../chunk-WAPGTQDR.cjs');
-require('../chunk-POZNNKNJ.cjs');
-require('../chunk-ASV6JLYG.cjs');
+require('../chunk-BJYA5NDL.cjs');
+require('../chunk-JKGFQUHJ.cjs');
+require('../chunk-246B6X5D.cjs');
+require('../chunk-NUXLAZOE.cjs');
+require('../chunk-TXLIY7GF.cjs');
 require('../chunk-CBAHCI4R.cjs');
 require('../chunk-MEBXW75C.cjs');
 require('../chunk-W73FBYIH.cjs');
@@ -14,12 +16,11 @@ require('../chunk-2FAWEBZS.cjs');
 require('../chunk-6T5XXJEP.cjs');
 require('../chunk-GANCV72Z.cjs');
 require('../chunk-XWOHNY3F.cjs');
-require('../chunk-TXLIY7GF.cjs');
 require('../chunk-JEQ2X3Z6.cjs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React20 = require('react');
+var React18 = require('react');
 var streamdown = require('streamdown');
 var code = require('@streamdown/code');
 var reactSlot = require('@radix-ui/react-slot');
@@ -49,7 +50,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React20__namespace = /*#__PURE__*/_interopNamespace(React20);
+var React18__namespace = /*#__PURE__*/_interopNamespace(React18);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 
@@ -365,7 +366,7 @@ function MarkdownComponent({
     }
   ) });
 }
-var Markdown = React20.memo(MarkdownComponent);
+var Markdown = React18.memo(MarkdownComponent);
 Markdown.displayName = "Markdown";
 function CodeBlock({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -406,7 +407,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React20__namespace.forwardRef(
+var Button = React18__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -647,7 +648,7 @@ function TooltipTrigger({
   disabled,
   ...props
 }) {
-  if (asChild && React20__namespace.default.isValidElement(children)) {
+  if (asChild && React18__namespace.default.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { disabled, render: children, ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { disabled, ...props, children });
@@ -676,7 +677,7 @@ function TooltipContent({
     }
   ) }) });
 }
-var Avatar = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Avatar = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Root,
   {
     ref,
@@ -688,7 +689,7 @@ var Avatar = React20__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarImage = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Image,
   {
     ref,
@@ -697,7 +698,7 @@ var AvatarImage = React20__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarFallback = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Fallback,
   {
     ref,
@@ -757,7 +758,7 @@ var MessageContent = ({
   );
   return markdown ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, ...props, children });
 };
-var Textarea = React20__namespace.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React18__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -771,7 +772,7 @@ var Textarea = React20__namespace.forwardRef(({ className, ...props }, ref) => {
   );
 });
 Textarea.displayName = "Textarea";
-var PromptInputContext = React20.createContext({
+var PromptInputContext = React18.createContext({
   isLoading: false,
   value: "",
   setValue: () => {
@@ -782,7 +783,7 @@ var PromptInputContext = React20.createContext({
   textareaRef: { current: null }
 });
 function usePromptInput() {
-  return React20.useContext(PromptInputContext);
+  return React18.useContext(PromptInputContext);
 }
 function PromptInput({
   className,
@@ -796,8 +797,8 @@ function PromptInput({
   onClick,
   ...props
 }) {
-  const [internalValue, setInternalValue] = React20.useState(value || "");
-  const textareaRef = React20.useRef(null);
+  const [internalValue, setInternalValue] = React18.useState(value || "");
+  const textareaRef = React18.useRef(null);
   const handleChange = (newValue) => {
     setInternalValue(newValue);
     onValueChange?.(newValue);
@@ -854,7 +855,7 @@ function PromptInputTextarea({
     textareaRef.current = el;
     adjustHeight(el);
   };
-  React20.useLayoutEffect(() => {
+  React18.useLayoutEffect(() => {
     if (!textareaRef.current || disableAutosize) return;
     const el = textareaRef.current;
     el.style.height = "auto";
@@ -921,7 +922,7 @@ function PromptInputAction({
 }
 var HoverCard = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = React20__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var HoverCardContent = React18__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   HoverCardPrimitive__namespace.Content,
   {
     ref,
@@ -935,9 +936,9 @@ var HoverCardContent = React20__namespace.forwardRef(({ className, align = "cent
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
-var SourceContext = React20.createContext(null);
+var SourceContext = React18.createContext(null);
 function useSourceContext() {
-  const ctx = React20.useContext(SourceContext);
+  const ctx = React18.useContext(SourceContext);
   if (!ctx) throw new Error("Source.* must be used inside <Source>");
   return ctx;
 }
@@ -1464,7 +1465,7 @@ function SourcesCollapsible({
   defaultExpanded = false,
   className
 }) {
-  const [expanded, setExpanded] = React20__namespace.useState(defaultExpanded);
+  const [expanded, setExpanded] = React18__namespace.useState(defaultExpanded);
   if (citations.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border rounded-lg", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1530,7 +1531,7 @@ function SourcesList({
   if (compact) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-xs text-muted-foreground", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Sources: " }),
-      citations.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.Fragment, { children: [
+      citations.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxs(React18__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "a",
           {
@@ -1608,11 +1609,11 @@ function resultsToCitations(results) {
     domain: result.domain || getDomain3(result.url)
   }));
 }
-var ReasoningContext = React20__namespace.createContext(
+var ReasoningContext = React18__namespace.createContext(
   null
 );
 function useReasoningContext() {
-  const context = React20__namespace.useContext(ReasoningContext);
+  const context = React18__namespace.useContext(ReasoningContext);
   if (!context) {
     throw new Error(
       "Reasoning components must be used within a Reasoning provider"
@@ -1628,11 +1629,11 @@ function Reasoning({
   defaultOpen = false,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React20__namespace.useState(defaultOpen);
-  const prevStreamingRef = React20__namespace.useRef(isStreaming);
+  const [uncontrolledOpen, setUncontrolledOpen] = React18__namespace.useState(defaultOpen);
+  const prevStreamingRef = React18__namespace.useRef(isStreaming);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const setIsOpen = React20__namespace.useCallback(
+  const setIsOpen = React18__namespace.useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -1643,7 +1644,7 @@ function Reasoning({
     },
     [isControlled, onOpenChange]
   );
-  React20__namespace.useEffect(() => {
+  React18__namespace.useEffect(() => {
     if (isStreaming && !prevStreamingRef.current) {
       setIsOpen(true);
     } else if (!isStreaming && prevStreamingRef.current) {
@@ -1699,9 +1700,9 @@ function ReasoningContent({
   className
 }) {
   const { isOpen } = useReasoningContext();
-  const contentRef = React20__namespace.useRef(null);
-  const [height, setHeight] = React20__namespace.useState(0);
-  React20__namespace.useEffect(() => {
+  const contentRef = React18__namespace.useRef(null);
+  const [height, setHeight] = React18__namespace.useState(0);
+  React18__namespace.useEffect(() => {
     if (contentRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -1750,11 +1751,11 @@ function SimpleReasoning({
     /* @__PURE__ */ jsxRuntime.jsx(ReasoningContent, { markdown, children: content })
   ] });
 }
-var CopilotUIContext = React20__namespace.createContext(
+var CopilotUIContext = React18__namespace.createContext(
   null
 );
 function useCopilotUI() {
-  const context = React20__namespace.useContext(CopilotUIContext);
+  const context = React18__namespace.useContext(CopilotUIContext);
   if (!context) {
     return {
       debug: false,
@@ -1769,7 +1770,7 @@ function CopilotUIProvider({
   debug = false,
   defaultDebugExpanded = false
 }) {
-  const value = React20__namespace.useMemo(
+  const value = React18__namespace.useMemo(
     () => ({
       debug,
       defaultDebugExpanded,
@@ -1912,7 +1913,7 @@ function ToolStep({
 }) {
   const { isDebug, defaultDebugExpanded } = useCopilotUI();
   const debug = debugProp ?? isDebug;
-  const [expanded, setExpanded] = React20__namespace.useState(
+  const [expanded, setExpanded] = React18__namespace.useState(
     defaultExpanded ?? defaultDebugExpanded ?? false
   );
   const displayTitle = getDisplayTitle(step);
@@ -2393,9 +2394,9 @@ function ArrowUpRightIcon({ className }) {
     }
   );
 }
-var ConfirmationContext = React20__namespace.createContext(null);
+var ConfirmationContext = React18__namespace.createContext(null);
 function useConfirmationContext() {
-  const context = React20__namespace.useContext(ConfirmationContext);
+  const context = React18__namespace.useContext(ConfirmationContext);
   if (!context) {
     throw new Error(
       "Confirmation components must be used within a Confirmation provider"
@@ -2567,8 +2568,8 @@ function PermissionConfirmation({
   permissionOptions = DEFAULT_PERMISSION_OPTIONS,
   className
 }) {
-  const [selectedPermission, setSelectedPermission] = React20__namespace.useState("ask");
-  const [showOptions, setShowOptions] = React20__namespace.useState(false);
+  const [selectedPermission, setSelectedPermission] = React18__namespace.useState("ask");
+  const [showOptions, setShowOptions] = React18__namespace.useState(false);
   const handleApprove = () => {
     onApprove?.(selectedPermission);
   };
@@ -2698,7 +2699,7 @@ function CompactPermissionConfirmation({
   onReject,
   className
 }) {
-  const [rememberChoice, setRememberChoice] = React20__namespace.useState(false);
+  const [rememberChoice, setRememberChoice] = React18__namespace.useState(false);
   const handleApprove = () => {
     onApprove?.(rememberChoice ? "allow_always" : "ask");
   };
@@ -2810,13 +2811,93 @@ function FollowUpQuestions({
     index
   )) });
 }
+function BranchNavigator({
+  siblingIndex,
+  totalSiblings,
+  hasPrevious,
+  hasNext,
+  onPrevious,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "csdk-branch-navigator flex items-center gap-1 text-xs text-muted-foreground select-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tabular-nums leading-none", children: [
+          siblingIndex + 1,
+          "\u2009/\u2009",
+          totalSiblings
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function DevLogger({
   state,
   position = "bottom-right",
   className
 }) {
-  const [isOpen, setIsOpen] = React20.useState(false);
-  const [activeTab, setActiveTab] = React20.useState("chat");
+  const [isOpen, setIsOpen] = React18.useState(false);
+  const [activeTab, setActiveTab] = React18.useState("chat");
   const positionClasses = {
     "bottom-left": "bottom-4 left-4",
     "bottom-right": "bottom-4 right-4",
@@ -3241,9 +3322,9 @@ function ModelSelector({
   showCapabilities = true,
   className
 }) {
-  const [isOpen, setIsOpen] = React20__namespace.useState(false);
-  const containerRef = React20__namespace.useRef(null);
-  React20__namespace.useEffect(() => {
+  const [isOpen, setIsOpen] = React18__namespace.useState(false);
+  const containerRef = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -3252,7 +3333,7 @@ function ModelSelector({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const selectedModel = React20__namespace.useMemo(() => {
+  const selectedModel = React18__namespace.useMemo(() => {
     if (!value) return null;
     if (providers) {
       for (const provider of providers) {
@@ -3478,7 +3559,7 @@ function PopoverTrigger({
   className,
   ...props
 }) {
-  if (asChild && React20__namespace.isValidElement(children)) {
+  if (asChild && React18__namespace.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { render: children, className, ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { className, ...props, children });
@@ -3613,8 +3694,8 @@ function ThreadPicker({
   itemClassName,
   newButtonClassName
 }) {
-  const [isOpen, setIsOpen] = React20__namespace.useState(false);
-  const selectedThread = React20__namespace.useMemo(() => {
+  const [isOpen, setIsOpen] = React18__namespace.useState(false);
+  const selectedThread = React18__namespace.useMemo(() => {
     if (!value) return null;
     return threads.find((t) => t.id === value) ?? null;
   }, [value, threads]);
@@ -3820,7 +3901,7 @@ function ThreadCard({
   showDelete = true,
   className
 }) {
-  const [isHovered, setIsHovered] = React20__namespace.useState(false);
+  const [isHovered, setIsHovered] = React18__namespace.useState(false);
   const handleDelete = (e) => {
     e.stopPropagation();
     onDelete?.();
@@ -4061,10 +4142,10 @@ function MCPUIFrame({
   showLoading = true,
   testId
 }) {
-  const iframeRef = React20__namespace.useRef(null);
-  const [isLoading, setIsLoading] = React20__namespace.useState(true);
-  const [error, setError] = React20__namespace.useState(null);
-  React20__namespace.useEffect(() => {
+  const iframeRef = React18__namespace.useRef(null);
+  const [isLoading, setIsLoading] = React18__namespace.useState(true);
+  const [error, setError] = React18__namespace.useState(null);
+  React18__namespace.useEffect(() => {
     const handleMessage = (event) => {
       if (event.source !== iframeRef.current?.contentWindow) {
         return;
@@ -4077,17 +4158,17 @@ function MCPUIFrame({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [onIntent]);
-  const handleLoad = React20__namespace.useCallback(() => {
+  const handleLoad = React18__namespace.useCallback(() => {
     setIsLoading(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = React20__namespace.useCallback(() => {
+  const handleError = React18__namespace.useCallback(() => {
     const err = new Error("Failed to load MCP UI content");
     setError(err);
     setIsLoading(false);
     onError?.(err);
   }, [onError]);
-  const { srcDoc, src } = React20__namespace.useMemo(() => {
+  const { srcDoc, src } = React18__namespace.useMemo(() => {
     if (resource.mimeType === "text/html") {
       let content = resource.content || "";
       if (resource.blob && !resource.content) {
@@ -4252,28 +4333,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__namespace.useMemo(() => {
+  const [isEditing, setIsEditing] = React18__namespace.useState(false);
+  const [editValue, setEditValue] = React18__namespace.useState(message.content ?? "");
+  const editRef = React18__namespace.useRef(null);
+  const startEdit = React18__namespace.useCallback(() => {
+    setEditValue(message.content ?? "");
+    setIsEditing(true);
+    requestAnimationFrame(() => editRef.current?.focus());
+  }, [message.content]);
+  const cancelEdit = React18__namespace.useCallback(() => {
+    setIsEditing(false);
+  }, []);
+  const submitEdit = React18__namespace.useCallback(() => {
+    const trimmed = editValue.trim();
+    if (!trimmed || !onEditMessage) return;
+    onEditMessage(message.id, trimmed);
+    setIsEditing(false);
+  }, [editValue, message.id, onEditMessage]);
+  const handleEditKeyDown = React18__namespace.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 py-2 px-1 my-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-border" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-muted-foreground whitespace-nowrap flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "size-3 opacity-60",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-border" })
+    ] });
+  }
+  const { cleanContent: contentWithoutFollowUps, followUps } = React18__namespace.useMemo(() => {
     if (isUser || !message.content) {
       return { cleanContent: message.content, followUps: [] };
     }
     return parseFollowUps(message.content);
   }, [message.content, isUser]);
-  const cleanContent = React20__namespace.useMemo(() => {
+  const cleanContent = React18__namespace.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__namespace.useMemo(() => {
+  const sources = React18__namespace.useMemo(() => {
     if (isUser || !citations.enabled) return [];
     const extractedSources = [];
     const addSource = (url, title, description) => {
@@ -4327,41 +4472,121 @@ function DefaultMessage({
   const shouldShowSources = citations.enabled && sources.length > 0;
   if (isUser) {
     const hasAttachments = message.attachments && message.attachments.length > 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Message,
-      {
-        className: cn(
-          "flex gap-2",
-          showUserAvatar ? "justify-end" : "justify-end"
+    return /* @__PURE__ */ jsxRuntime.jsxs(Message, { className: cn("flex gap-2 group/user-msg justify-end"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full min-w-[200px]", children: [
+        /* @__PURE__ */ jsxRuntime.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-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
+            )
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: [
-            message.content && /* @__PURE__ */ jsxRuntime.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
-              }
-            ),
-            hasAttachments && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { attachment }, index)) })
-          ] }),
-          showUserAvatar && /* @__PURE__ */ jsxRuntime.jsx(
-            MessageAvatar,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 justify-end", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "button",
             {
-              src: userAvatar.src,
-              alt: "User",
-              fallback: userAvatar.fallback,
-              children: userAvatar.component
+              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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        message.content && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { attachment }, index)) }),
+        showBranchNav && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        MessageAvatar,
+        {
+          src: userAvatar.src,
+          alt: "User",
+          fallback: userAvatar.fallback,
+          className: userAvatar.className,
+          children: userAvatar.component
+        }
+      )
+    ] });
   }
   const isToolHidden = (exec) => {
     if (exec.hidden === true) return true;
@@ -4379,6 +4604,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;
   };
@@ -4405,7 +4631,7 @@ function DefaultMessage({
         alt: "Assistant",
         fallback: assistantAvatar.fallback,
         fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback && !assistantAvatar.component ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
-        className: "bg-muted",
+        className: cn("bg-muted", assistantAvatar.className),
         children: assistantAvatar.component
       }
     ),
@@ -4418,10 +4644,7 @@ function DefaultMessage({
           className: "mb-2"
         }
       ),
-      isLastMessage && isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted px-4 py-2 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Continuing..." })
-      ] }) : (
+      isLastMessage && isProcessing && !completedTools?.length && !pendingApprovalTools?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: loaderVariant, size: "sm" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           cleanContent?.trim() && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4437,10 +4660,34 @@ function DefaultMessage({
             }
           ),
           toolsWithCustomRender && toolsWithCustomRender.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", cleanContent?.trim() && "mt-2"), children: toolsWithCustomRender.map((exec) => {
-            const Renderer = toolRenderers?.[exec.name];
-            if (Renderer) {
+            const toolDef = registeredTools?.find(
+              (t) => t.name === exec.name
+            );
+            if (toolDef?.render) {
+              let status = "pending";
+              if (exec.status === "executing") status = "executing";
+              else if (exec.status === "completed") status = "completed";
+              else if (exec.status === "error" || exec.status === "failed" || exec.status === "rejected")
+                status = "error";
+              const renderProps = {
+                status,
+                args: exec.args,
+                result: exec.result,
+                error: exec.error,
+                toolCallId: exec.id,
+                toolName: exec.name
+              };
+              const output = toolDef.render(
+                renderProps
+              );
+              if (output != null) {
+                return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, exec.id);
+              }
+            }
+            if (mcpToolRenderer && (exec.source === "mcp" || toolDef?.source === "mcp")) {
+              const MCPRenderer = mcpToolRenderer;
               return /* @__PURE__ */ jsxRuntime.jsx(
-                Renderer,
+                MCPRenderer,
                 {
                   execution: {
                     id: exec.id,
@@ -4449,20 +4696,16 @@ function DefaultMessage({
                     status: exec.status,
                     result: exec.result,
                     error: exec.error,
-                    approvalStatus: exec.approvalStatus,
-                    source: exec.source
+                    source: exec.source || toolDef?.source
                   }
                 },
                 exec.id
               );
             }
-            const toolDef = registeredTools?.find(
-              (t) => t.name === exec.name
-            );
-            if (mcpToolRenderer && (exec.source === "mcp" || toolDef?.source === "mcp")) {
-              const MCPRenderer = mcpToolRenderer;
+            if (fallbackToolRenderer) {
+              const FallbackRenderer = fallbackToolRenderer;
               return /* @__PURE__ */ jsxRuntime.jsx(
-                MCPRenderer,
+                FallbackRenderer,
                 {
                   execution: {
                     id: exec.id,
@@ -4471,31 +4714,30 @@ function DefaultMessage({
                     status: exec.status,
                     result: exec.result,
                     error: exec.error,
-                    source: exec.source || toolDef?.source
+                    source: exec.source
                   }
                 },
                 exec.id
               );
             }
-            const toolDefForRender = toolDef ?? registeredTools?.find((t) => t.name === exec.name);
-            if (toolDefForRender?.render) {
-              let status = "pending";
-              if (exec.status === "executing") status = "executing";
-              else if (exec.status === "completed") status = "completed";
-              else if (exec.status === "error" || exec.status === "failed" || exec.status === "rejected")
-                status = "error";
-              const renderProps = {
-                status,
-                args: exec.args,
-                result: exec.result,
-                error: exec.error,
-                toolCallId: exec.id,
-                toolName: exec.name
-              };
-              const output = toolDefForRender.render(
-                renderProps
+            const Renderer = toolRenderers?.[exec.name];
+            if (Renderer) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                Renderer,
+                {
+                  execution: {
+                    id: exec.id,
+                    name: exec.name,
+                    args: exec.args,
+                    status: exec.status,
+                    result: exec.result,
+                    error: exec.error,
+                    approvalStatus: exec.approvalStatus,
+                    source: exec.source
+                  }
+                },
+                exec.id
               );
-              return /* @__PURE__ */ jsxRuntime.jsx(React20__namespace.Fragment, { children: output }, exec.id);
             }
             return null;
           }) }),
@@ -4521,6 +4763,7 @@ function DefaultMessage({
               `${exec.id}-ui`
             );
           }),
+          isLastMessage && isProcessing && completedTools && completedTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }) }),
           pendingApprovalTools && pendingApprovalTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-2", children: pendingApprovalTools.map((tool) => {
             const approvalCallbacks = {
               onApprove: (extraData) => onApproveToolExecution?.(tool.id, extraData),
@@ -4554,7 +4797,7 @@ function DefaultMessage({
               const output = toolDef.render(
                 renderProps
               );
-              return /* @__PURE__ */ jsxRuntime.jsx(React20__namespace.Fragment, { children: output }, tool.id);
+              return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, tool.id);
             }
             return /* @__PURE__ */ jsxRuntime.jsx(
               PermissionConfirmation,
@@ -4603,7 +4846,7 @@ function DefaultMessage({
   ] });
 }
 function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React20__namespace.useState(false);
+  const [expanded, setExpanded] = React18__namespace.useState(false);
   if (attachment.type !== "image") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: attachment.type }),
@@ -4732,10 +4975,10 @@ function ChatWelcome({
   processAttachment: processAttachmentProp,
   classNames = {}
 }) {
-  const [input, setInput] = React20.useState("");
-  const [pendingAttachments, setPendingAttachments] = React20.useState([]);
-  const fileInputRef = React20.useRef(null);
-  const fileInputId = React20.useId();
+  const [input, setInput] = React18.useState("");
+  const [pendingAttachments, setPendingAttachments] = React18.useState([]);
+  const fileInputRef = React18.useRef(null);
+  const fileInputId = React18.useId();
   const title = config?.title ?? DEFAULT_TITLE;
   const subtitle = config?.subtitle ?? DEFAULT_SUBTITLE;
   const logo = config?.logo;
@@ -4744,7 +4987,7 @@ function ChatWelcome({
   config?.recentChatsLabel ?? DEFAULT_RECENT_CHATS_LABEL;
   const maxRecentChats = config?.maxRecentChats ?? DEFAULT_MAX_RECENT_CHATS;
   config?.viewMoreLabel ?? DEFAULT_VIEW_MORE_LABEL;
-  const isFileTypeAllowed = React20.useCallback(
+  const isFileTypeAllowed = React18.useCallback(
     (file) => {
       for (const type of allowedFileTypes) {
         if (type.endsWith("/*")) {
@@ -4758,7 +5001,7 @@ function ChatWelcome({
     },
     [allowedFileTypes]
   );
-  const handleFileSelect = React20.useCallback(
+  const handleFileSelect = React18.useCallback(
     async (files) => {
       if (!files || !attachmentsEnabled) return;
       for (const file of Array.from(files)) {
@@ -4821,7 +5064,7 @@ function ChatWelcome({
     },
     [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
   );
-  const handleInputChange = React20.useCallback(
+  const handleInputChange = React18.useCallback(
     (e) => {
       handleFileSelect(e.target.files);
       if (fileInputRef.current) {
@@ -4830,7 +5073,7 @@ function ChatWelcome({
     },
     [handleFileSelect]
   );
-  const removePendingAttachment = React20.useCallback((id) => {
+  const removePendingAttachment = React18.useCallback((id) => {
     setPendingAttachments((prev) => {
       const att = prev.find((a) => a.id === id);
       if (att) {
@@ -4839,7 +5082,7 @@ function ChatWelcome({
       return prev.filter((a) => a.id !== id);
     });
   }, []);
-  const handleSubmit = React20.useCallback(() => {
+  const handleSubmit = React18.useCallback(() => {
     const hasContent = input.trim();
     const hasAttachments = pendingAttachments.some(
       (att) => att.status === "ready"
@@ -4851,7 +5094,7 @@ function ChatWelcome({
     setPendingAttachments([]);
     setInput("");
   }, [input, isLoading, onSendMessage, pendingAttachments]);
-  const handleSuggestionClick = React20.useCallback(
+  const handleSuggestionClick = React18.useCallback(
     (suggestion) => {
       onSendMessage(suggestion);
     },
@@ -5023,11 +5266,11 @@ function ChatWelcome({
     }
   );
 }
-var CopilotChatContext = React20.createContext(
+var CopilotChatContext = React18.createContext(
   null
 );
 var useCopilotChatContext = () => {
-  const ctx = React20.useContext(CopilotChatContext);
+  const ctx = React18.useContext(CopilotChatContext);
   if (!ctx) {
     throw new Error(
       "useCopilotChatContext must be used within CopilotChat. Make sure you're using CopilotChat.Home, CopilotChat.Input, etc. inside <CopilotChat>"
@@ -5061,10 +5304,10 @@ function ChatView({ children, className }) {
 ChatView.displayName = "ChatView";
 function chatViewHasOnlyLayoutChildren(chatViewElement) {
   if (!chatViewElement?.props?.children) return false;
-  const childArray = React20__namespace.default.Children.toArray(chatViewElement.props.children);
+  const childArray = React18__namespace.default.Children.toArray(chatViewElement.props.children);
   if (childArray.length === 0) return false;
   return childArray.every(
-    (child) => React20__namespace.default.isValidElement(child) && (child.type === Header || child.type === Footer)
+    (child) => React18__namespace.default.isValidElement(child) && (child.type === Header || child.type === Footer)
   );
 }
 function Header({ children, className }) {
@@ -5080,8 +5323,8 @@ function Input({ placeholder: placeholderProp, className }) {
     onStop,
     placeholder: defaultPlaceholder
   } = useCopilotChatContext();
-  const [value, setValue] = React20.useState("");
-  const handleSubmit = React20.useCallback(() => {
+  const [value, setValue] = React18.useState("");
+  const handleSubmit = React18.useCallback(() => {
     if (value.trim() && !isLoading) {
       send(value.trim());
       setValue("");
@@ -5202,18 +5445,18 @@ function ThreadPickerCompound(props) {
   );
 }
 function hasCompoundChild(children, ...components) {
-  return React20__namespace.default.Children.toArray(children).some(
-    (child) => React20__namespace.default.isValidElement(child) && components.includes(child.type)
+  return React18__namespace.default.Children.toArray(children).some(
+    (child) => React18__namespace.default.isValidElement(child) && components.includes(child.type)
   );
 }
 function findCompoundChild(children, component) {
-  return React20__namespace.default.Children.toArray(children).find(
-    (child) => React20__namespace.default.isValidElement(child) && child.type === component
+  return React18__namespace.default.Children.toArray(children).find(
+    (child) => React18__namespace.default.isValidElement(child) && child.type === component
   );
 }
 function filterCompoundChildren(children, ...components) {
-  return React20__namespace.default.Children.toArray(children).filter(
-    (child) => React20__namespace.default.isValidElement(child) && components.includes(child.type)
+  return React18__namespace.default.Children.toArray(children).filter(
+    (child) => React18__namespace.default.isValidElement(child) && components.includes(child.type)
   );
 }
 var DEFAULT_MAX_FILE_SIZE2 = 5 * 1024 * 1024;
@@ -5288,6 +5531,7 @@ function ChatComponent({
   registeredTools,
   toolRenderers,
   mcpToolRenderer,
+  fallbackToolRenderer,
   onApproveToolExecution,
   onRejectToolExecution,
   // Follow-up Questions
@@ -5300,6 +5544,8 @@ function ChatComponent({
   renderMessage,
   renderInput,
   renderHeader,
+  // Avatar grouping
+  groupConsecutiveMessages = false,
   // Styling
   className,
   classNames = {},
@@ -5308,16 +5554,20 @@ function ChatComponent({
   threads,
   currentThreadId,
   onSwitchThread,
-  isThreadBusy
+  isThreadBusy,
+  // Branching
+  getBranchInfo,
+  onSwitchBranch,
+  onEditMessage
 }) {
   const userAvatar = { fallback: "U", ...userAvatarProp };
   const assistantAvatar = { fallback: "AI", ...assistantAvatarProp };
-  const [input, setInput] = React20.useState("");
-  const [pendingAttachments, setPendingAttachments] = React20.useState([]);
-  const [isDragging, setIsDragging] = React20.useState(false);
-  const fileInputRef = React20.useRef(null);
-  const fileInputId = React20.useId();
-  const isFileTypeAllowed = React20.useCallback(
+  const [input, setInput] = React18.useState("");
+  const [pendingAttachments, setPendingAttachments] = React18.useState([]);
+  const [isDragging, setIsDragging] = React18.useState(false);
+  const fileInputRef = React18.useRef(null);
+  const fileInputId = React18.useId();
+  const isFileTypeAllowed = React18.useCallback(
     (file) => {
       for (const type of allowedFileTypes) {
         if (type.endsWith("/*")) {
@@ -5331,7 +5581,7 @@ function ChatComponent({
     },
     [allowedFileTypes]
   );
-  const handleFileSelect = React20.useCallback(
+  const handleFileSelect = React18.useCallback(
     async (files) => {
       if (!files || !attachmentsEnabled) return;
       for (const file of Array.from(files)) {
@@ -5394,7 +5644,7 @@ function ChatComponent({
     },
     [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
   );
-  const handleInputChange = React20.useCallback(
+  const handleInputChange = React18.useCallback(
     (e) => {
       handleFileSelect(e.target.files);
       if (fileInputRef.current) {
@@ -5403,7 +5653,7 @@ function ChatComponent({
     },
     [handleFileSelect]
   );
-  const removePendingAttachment = React20.useCallback((id) => {
+  const removePendingAttachment = React18.useCallback((id) => {
     setPendingAttachments((prev) => {
       const att = prev.find((a) => a.id === id);
       if (att) {
@@ -5412,7 +5662,7 @@ function ChatComponent({
       return prev.filter((a) => a.id !== id);
     });
   }, []);
-  const handleDragOver = React20.useCallback(
+  const handleDragOver = React18.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5422,12 +5672,12 @@ function ChatComponent({
     },
     [attachmentsEnabled]
   );
-  const handleDragLeave = React20.useCallback((e) => {
+  const handleDragLeave = React18.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const handleDrop = React20.useCallback(
+  const handleDrop = React18.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5438,7 +5688,7 @@ function ChatComponent({
     },
     [attachmentsEnabled, handleFileSelect]
   );
-  const handleSubmit = React20.useCallback(() => {
+  const handleSubmit = React18.useCallback(() => {
     const hasContent = input.trim();
     const hasAttachments = pendingAttachments.some(
       (att) => att.status === "ready"
@@ -5450,7 +5700,7 @@ function ChatComponent({
     setPendingAttachments([]);
     setInput("");
   }, [input, isLoading, onSendMessage, pendingAttachments]);
-  const handleSuggestionClick = React20.useCallback(
+  const handleSuggestionClick = React18.useCallback(
     (suggestion) => {
       if (onSuggestionClick) {
         onSuggestionClick(suggestion);
@@ -5477,13 +5727,13 @@ function ChatComponent({
   const chatViewNeedsDefault = chatViewElement && (!chatViewElement.props.children || chatViewHasOnlyLayoutChildren(chatViewElement));
   const showDefaultWelcome = view === "home" && !hasCustomHome && welcome !== false;
   const welcomeConfig = typeof welcome === "object" ? welcome : void 0;
-  const send = React20.useCallback(
+  const send = React18.useCallback(
     (message, attachments) => {
       onSendMessage?.(message, attachments);
     },
     [onSendMessage]
   );
-  const contextValue = React20__namespace.default.useMemo(
+  const contextValue = React18__namespace.default.useMemo(
     () => ({
       view,
       send,
@@ -5577,6 +5827,28 @@ function ChatComponent({
                       messages.length === 0 && /* @__PURE__ */ jsxRuntime.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;
@@ -5599,12 +5871,12 @@ function ChatComponent({
                             onSendMessage?.(question);
                           }
                         };
-                        return renderMessage ? /* @__PURE__ */ jsxRuntime.jsx(React20__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsxRuntime.jsx(
+                        return renderMessage ? /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsxRuntime.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,
@@ -5616,13 +5888,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
                         );
@@ -5945,7 +6221,7 @@ function useInternalThreadManager(config = {}) {
     saveDebounce,
     autoRestoreLastThread
   };
-  const threadManager = chunkN6VZ7FOW_cjs.useThreadManager(threadManagerConfig);
+  const threadManager = chunkIXWNDR7H_cjs.useThreadManager(threadManagerConfig);
   const {
     currentThread,
     currentThreadId,
@@ -5955,18 +6231,18 @@ function useInternalThreadManager(config = {}) {
     clearCurrentThread,
     refreshThreads
   } = threadManager;
-  const { messages, setMessages, status, isLoading } = chunkN6VZ7FOW_cjs.useCopilot();
-  const isLoadingMessagesRef = React20.useRef(false);
-  const savingToThreadRef = React20.useRef(null);
-  const lastSavedSnapshotRef = React20.useRef("");
-  const hasInitializedRef = React20.useRef(false);
-  const getMessageSnapshot = React20.useCallback((msgs) => {
+  const { messages, setMessages, status, isLoading, getAllMessages } = chunkIXWNDR7H_cjs.useCopilot();
+  const isLoadingMessagesRef = React18.useRef(false);
+  const savingToThreadRef = React18.useRef(null);
+  const lastSavedSnapshotRef = React18.useRef("");
+  const hasInitializedRef = React18.useRef(false);
+  const getMessageSnapshot = React18.useCallback((msgs) => {
     return msgs.map((m) => {
       const contentPreview = (m.content ?? "").slice(0, 20);
       return `${m.id}:${contentPreview}:${m.content?.length ?? 0}`;
     }).join("|");
   }, []);
-  const convertToCore = React20.useCallback((msgs) => {
+  const convertToCore = React18.useCallback((msgs) => {
     return msgs.map((m) => ({
       id: m.id,
       role: m.role,
@@ -5974,6 +6250,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,
@@ -5982,7 +6260,7 @@ function useInternalThreadManager(config = {}) {
       }
     }));
   }, []);
-  const handleSwitchThread = React20.useCallback(
+  const handleSwitchThread = React18.useCallback(
     async (threadId) => {
       isLoadingMessagesRef.current = true;
       const thread = await switchThread(threadId);
@@ -5994,6 +6272,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);
@@ -6011,7 +6291,7 @@ function useInternalThreadManager(config = {}) {
     },
     [switchThread, setMessages, getMessageSnapshot, onThreadChange]
   );
-  const handleNewThread = React20.useCallback(async () => {
+  const handleNewThread = React18.useCallback(async () => {
     isLoadingMessagesRef.current = true;
     clearCurrentThread();
     lastSavedSnapshotRef.current = "";
@@ -6022,7 +6302,7 @@ function useInternalThreadManager(config = {}) {
       isLoadingMessagesRef.current = false;
     });
   }, [clearCurrentThread, setMessages, onThreadChange]);
-  React20.useEffect(() => {
+  React18.useEffect(() => {
     if (hasInitializedRef.current || !currentThread) {
       return;
     }
@@ -6036,6 +6316,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.
@@ -6053,7 +6335,7 @@ function useInternalThreadManager(config = {}) {
       isLoadingMessagesRef.current = false;
     });
   }, [adapter, currentThread, setMessages, getMessageSnapshot, onThreadChange]);
-  React20.useEffect(() => {
+  React18.useEffect(() => {
     if (isLoadingMessagesRef.current) {
       return;
     }
@@ -6067,7 +6349,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) => {
@@ -6092,6 +6377,7 @@ function useInternalThreadManager(config = {}) {
     refreshThreads,
     getMessageSnapshot,
     convertToCore,
+    getAllMessages,
     onThreadChange
   ]);
   const isBusy = isLoading || status === "streaming" || status === "submitted";
@@ -6122,7 +6408,7 @@ function parsePersistenceConfig(persistence, onThreadChange) {
         };
       case "server":
         return {
-          adapter: chunkOQPRIB73_cjs.createServerAdapter({
+          adapter: chunkI3SQUNTT_cjs.createServerAdapter({
             endpoint: persistence.endpoint,
             headers: persistence.headers
           }),
@@ -6171,8 +6457,11 @@ function CopilotChatBase(props) {
     toolExecutions: rawToolExecutions,
     approveToolExecution,
     rejectToolExecution,
-    registeredTools
-  } = chunkN6VZ7FOW_cjs.useCopilot();
+    registeredTools,
+    switchBranch,
+    getBranchInfo,
+    editMessage
+  } = chunkIXWNDR7H_cjs.useCopilot();
   const toolExecutions = rawToolExecutions.map(
     (exec) => ({
       id: exec.id,
@@ -6190,7 +6479,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(
@@ -6286,24 +6577,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,
@@ -6317,7 +6613,7 @@ function CopilotChatBase(props) {
     footer: classNames.footer
   } : void 0;
   const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
-  const handleDeleteThread = React20__namespace.default.useCallback(
+  const handleDeleteThread = React18__namespace.default.useCallback(
     (threadId) => {
       const isCurrentThread = threadManager.currentThreadId === threadId;
       threadManager.deleteThread(threadId);
@@ -6374,6 +6670,9 @@ function CopilotChatBase(props) {
       currentThreadId: threadManager.currentThreadId,
       onSwitchThread: isPersistenceEnabled ? handleSwitchThread : void 0,
       isThreadBusy: isBusy,
+      getBranchInfo,
+      onSwitchBranch: switchBranch,
+      onEditMessage: editMessage,
       children
     }
   );
@@ -6444,6 +6743,7 @@ function PoweredBy({ className, showLogo = true }) {
 
 exports.AlertTriangleIcon = AlertTriangleIcon;
 exports.BotIcon = BotIcon;
+exports.BranchNavigator = BranchNavigator;
 exports.Button = Button;
 exports.CapabilityBadge = CapabilityBadge;
 exports.CapabilityList = CapabilityList;