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

package/dist/ui/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var chunkIXWNDR7H_cjs = require('../chunk-IXWNDR7H.cjs');
-var chunkI3SQUNTT_cjs = require('../chunk-I3SQUNTT.cjs');
+var chunkTCPAT3WG_cjs = require('../chunk-TCPAT3WG.cjs');
+var chunkWIXFZUEZ_cjs = require('../chunk-WIXFZUEZ.cjs');
 var chunkJO4BHPAD_cjs = require('../chunk-JO4BHPAD.cjs');
 require('../chunk-JGPDQDY4.cjs');
 require('../chunk-BJYA5NDL.cjs');
-require('../chunk-JKGFQUHJ.cjs');
-require('../chunk-246B6X5D.cjs');
+require('../chunk-MDS23G2S.cjs');
+require('../chunk-TPB7XED6.cjs');
 require('../chunk-NUXLAZOE.cjs');
 require('../chunk-TXLIY7GF.cjs');
 require('../chunk-CBAHCI4R.cjs');
@@ -20,7 +20,7 @@ require('../chunk-JEQ2X3Z6.cjs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React18 = require('react');
+var React17 = require('react');
 var streamdown = require('streamdown');
 var code = require('@streamdown/code');
 var reactSlot = require('@radix-ui/react-slot');
@@ -50,7 +50,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React18__namespace = /*#__PURE__*/_interopNamespace(React18);
+var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 
@@ -366,7 +366,7 @@ function MarkdownComponent({
     }
   ) });
 }
-var Markdown = React18.memo(MarkdownComponent);
+var Markdown = React17.memo(MarkdownComponent);
 Markdown.displayName = "Markdown";
 function CodeBlock({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -407,7 +407,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React18__namespace.forwardRef(
+var Button = React17__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -648,7 +648,7 @@ function TooltipTrigger({
   disabled,
   ...props
 }) {
-  if (asChild && React18__namespace.default.isValidElement(children)) {
+  if (asChild && React17__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 });
@@ -677,7 +677,7 @@ function TooltipContent({
     }
   ) }) });
 }
-var Avatar = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Avatar = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Root,
   {
     ref,
@@ -689,7 +689,7 @@ var Avatar = React18__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarImage = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Image,
   {
     ref,
@@ -698,7 +698,7 @@ var AvatarImage = React18__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarFallback = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Fallback,
   {
     ref,
@@ -758,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 = React18__namespace.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React17__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -772,7 +772,7 @@ var Textarea = React18__namespace.forwardRef(({ className, ...props }, ref) => {
   );
 });
 Textarea.displayName = "Textarea";
-var PromptInputContext = React18.createContext({
+var PromptInputContext = React17.createContext({
   isLoading: false,
   value: "",
   setValue: () => {
@@ -783,7 +783,7 @@ var PromptInputContext = React18.createContext({
   textareaRef: { current: null }
 });
 function usePromptInput() {
-  return React18.useContext(PromptInputContext);
+  return React17.useContext(PromptInputContext);
 }
 function PromptInput({
   className,
@@ -797,8 +797,8 @@ function PromptInput({
   onClick,
   ...props
 }) {
-  const [internalValue, setInternalValue] = React18.useState(value || "");
-  const textareaRef = React18.useRef(null);
+  const [internalValue, setInternalValue] = React17.useState(value || "");
+  const textareaRef = React17.useRef(null);
   const handleChange = (newValue) => {
     setInternalValue(newValue);
     onValueChange?.(newValue);
@@ -855,7 +855,7 @@ function PromptInputTextarea({
     textareaRef.current = el;
     adjustHeight(el);
   };
-  React18.useLayoutEffect(() => {
+  React17.useLayoutEffect(() => {
     if (!textareaRef.current || disableAutosize) return;
     const el = textareaRef.current;
     el.style.height = "auto";
@@ -922,7 +922,7 @@ function PromptInputAction({
 }
 var HoverCard = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = React18__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var HoverCardContent = React17__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   HoverCardPrimitive__namespace.Content,
   {
     ref,
@@ -936,9 +936,9 @@ var HoverCardContent = React18__namespace.forwardRef(({ className, align = "cent
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
-var SourceContext = React18.createContext(null);
+var SourceContext = React17.createContext(null);
 function useSourceContext() {
-  const ctx = React18.useContext(SourceContext);
+  const ctx = React17.useContext(SourceContext);
   if (!ctx) throw new Error("Source.* must be used inside <Source>");
   return ctx;
 }
@@ -1465,7 +1465,7 @@ function SourcesCollapsible({
   defaultExpanded = false,
   className
 }) {
-  const [expanded, setExpanded] = React18__namespace.useState(defaultExpanded);
+  const [expanded, setExpanded] = React17__namespace.useState(defaultExpanded);
   if (citations.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border rounded-lg", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1531,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(React18__namespace.Fragment, { children: [
+      citations.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxs(React17__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "a",
           {
@@ -1609,11 +1609,11 @@ function resultsToCitations(results) {
     domain: result.domain || getDomain3(result.url)
   }));
 }
-var ReasoningContext = React18__namespace.createContext(
+var ReasoningContext = React17__namespace.createContext(
   null
 );
 function useReasoningContext() {
-  const context = React18__namespace.useContext(ReasoningContext);
+  const context = React17__namespace.useContext(ReasoningContext);
   if (!context) {
     throw new Error(
       "Reasoning components must be used within a Reasoning provider"
@@ -1629,11 +1629,11 @@ function Reasoning({
   defaultOpen = false,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React18__namespace.useState(defaultOpen);
-  const prevStreamingRef = React18__namespace.useRef(isStreaming);
+  const [uncontrolledOpen, setUncontrolledOpen] = React17__namespace.useState(defaultOpen);
+  const prevStreamingRef = React17__namespace.useRef(isStreaming);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const setIsOpen = React18__namespace.useCallback(
+  const setIsOpen = React17__namespace.useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -1644,7 +1644,7 @@ function Reasoning({
     },
     [isControlled, onOpenChange]
   );
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (isStreaming && !prevStreamingRef.current) {
       setIsOpen(true);
     } else if (!isStreaming && prevStreamingRef.current) {
@@ -1700,9 +1700,9 @@ function ReasoningContent({
   className
 }) {
   const { isOpen } = useReasoningContext();
-  const contentRef = React18__namespace.useRef(null);
-  const [height, setHeight] = React18__namespace.useState(0);
-  React18__namespace.useEffect(() => {
+  const contentRef = React17__namespace.useRef(null);
+  const [height, setHeight] = React17__namespace.useState(0);
+  React17__namespace.useEffect(() => {
     if (contentRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -1751,11 +1751,11 @@ function SimpleReasoning({
     /* @__PURE__ */ jsxRuntime.jsx(ReasoningContent, { markdown, children: content })
   ] });
 }
-var CopilotUIContext = React18__namespace.createContext(
+var CopilotUIContext = React17__namespace.createContext(
   null
 );
 function useCopilotUI() {
-  const context = React18__namespace.useContext(CopilotUIContext);
+  const context = React17__namespace.useContext(CopilotUIContext);
   if (!context) {
     return {
       debug: false,
@@ -1770,7 +1770,7 @@ function CopilotUIProvider({
   debug = false,
   defaultDebugExpanded = false
 }) {
-  const value = React18__namespace.useMemo(
+  const value = React17__namespace.useMemo(
     () => ({
       debug,
       defaultDebugExpanded,
@@ -1913,7 +1913,7 @@ function ToolStep({
 }) {
   const { isDebug, defaultDebugExpanded } = useCopilotUI();
   const debug = debugProp ?? isDebug;
-  const [expanded, setExpanded] = React18__namespace.useState(
+  const [expanded, setExpanded] = React17__namespace.useState(
     defaultExpanded ?? defaultDebugExpanded ?? false
   );
   const displayTitle = getDisplayTitle(step);
@@ -2394,9 +2394,9 @@ function ArrowUpRightIcon({ className }) {
     }
   );
 }
-var ConfirmationContext = React18__namespace.createContext(null);
+var ConfirmationContext = React17__namespace.createContext(null);
 function useConfirmationContext() {
-  const context = React18__namespace.useContext(ConfirmationContext);
+  const context = React17__namespace.useContext(ConfirmationContext);
   if (!context) {
     throw new Error(
       "Confirmation components must be used within a Confirmation provider"
@@ -2564,30 +2564,27 @@ function PermissionConfirmation({
   message,
   onApprove,
   onReject,
-  showPermissionOptions = true,
-  permissionOptions = DEFAULT_PERMISSION_OPTIONS,
   className
 }) {
-  const [selectedPermission, setSelectedPermission] = React18__namespace.useState("ask");
-  const [showOptions, setShowOptions] = React18__namespace.useState(false);
   const handleApprove = () => {
-    onApprove?.(selectedPermission);
+    onApprove?.("ask");
   };
   const handleReject = () => {
-    onReject?.(
-      selectedPermission === "deny_always" ? "deny_always" : void 0
-    );
+    onReject?.(void 0);
   };
   if (state === "approved") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400 rounded-lg border bg-green-50 dark:bg-green-950/20",
+          "csdk-confirm-result",
+          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
+          "rounded-2xl border border-green-200/70 dark:border-green-900/40",
+          "bg-green-50 dark:bg-green-950/20 text-green-700 dark:text-green-400",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Approved" })
         ]
       }
@@ -2598,11 +2595,14 @@ function PermissionConfirmation({
       "div",
       {
         className: cn(
-          "flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400 rounded-lg border bg-red-50 dark:bg-red-950/20",
+          "csdk-confirm-result",
+          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
+          "rounded-2xl border border-red-200/70 dark:border-red-900/40",
+          "bg-red-50 dark:bg-red-950/20 text-red-700 dark:text-red-400",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(XIcon2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(XIcon2, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rejected" })
         ]
       }
@@ -2612,81 +2612,47 @@ function PermissionConfirmation({
     "div",
     {
       className: cn(
-        "rounded-lg border bg-card text-card-foreground p-4",
+        "csdk-confirm-card",
+        "w-full rounded-2xl border border-border/60 bg-card text-card-foreground shadow-sm overflow-hidden",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            toolName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: toolName }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: message || "This tool requires your approval to execute." })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-amber-100 dark:bg-amber-950/50", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 pt-0.5", children: [
+            toolName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-1", children: toolName }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground leading-snug", children: message || "This tool requires your approval to execute." })
           ] })
         ] }),
-        showPermissionOptions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              onClick: () => setShowOptions(!showOptions),
-              className: "flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: permissionOptions.find((o) => o.value === selectedPermission)?.label }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: cn(
-                      "h-4 w-4 transition-transform",
-                      showOptions && "rotate-180"
-                    ),
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    strokeWidth: 2,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M19 9l-7 7-7-7"
-                      }
-                    )
-                  }
-                )
-              ]
+              onClick: handleReject,
+              className: cn(
+                "csdk-confirm-btn",
+                "px-4 py-1.5 text-sm font-medium rounded-xl",
+                "border border-border bg-transparent text-muted-foreground",
+                "hover:bg-muted/60 hover:text-foreground"
+              ),
+              children: "Deny"
             }
           ),
-          showOptions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-1 pl-1", children: permissionOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "label",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
+              type: "button",
+              onClick: handleApprove,
               className: cn(
-                "flex items-start gap-2 p-2 rounded-md cursor-pointer transition-colors",
-                selectedPermission === option.value ? "bg-primary/10" : "hover:bg-muted/50"
+                "csdk-confirm-btn",
+                "px-4 py-1.5 text-sm font-medium rounded-xl",
+                "bg-primary text-primary-foreground",
+                "hover:opacity-90"
               ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    name: "permission",
-                    value: option.value,
-                    checked: selectedPermission === option.value,
-                    onChange: () => setSelectedPermission(option.value),
-                    className: "mt-0.5"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: option.label }),
-                  option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: option.description })
-                ] })
-              ]
-            },
-            option.value
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: handleReject, children: "Deny" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "default", size: "sm", onClick: handleApprove, children: "Allow" })
+              children: "Allow"
+            }
+          )
         ] })
       ]
     }
@@ -2699,23 +2665,25 @@ function CompactPermissionConfirmation({
   onReject,
   className
 }) {
-  const [rememberChoice, setRememberChoice] = React18__namespace.useState(false);
   const handleApprove = () => {
-    onApprove?.(rememberChoice ? "allow_always" : "ask");
+    onApprove?.("ask");
   };
   const handleReject = () => {
-    onReject?.(rememberChoice ? "deny_always" : void 0);
+    onReject?.(void 0);
   };
   if (state === "approved") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400",
+          "csdk-confirm-result",
+          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
+          "rounded-2xl border border-green-200/70 dark:border-green-900/40",
+          "bg-green-50 dark:bg-green-950/20 text-green-700 dark:text-green-400",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Approved" })
         ]
       }
@@ -2726,11 +2694,14 @@ function CompactPermissionConfirmation({
       "div",
       {
         className: cn(
-          "flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400",
+          "csdk-confirm-result",
+          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
+          "rounded-2xl border border-red-200/70 dark:border-red-900/40",
+          "bg-red-50 dark:bg-red-950/20 text-red-700 dark:text-red-400",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(XIcon2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(XIcon2, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rejected" })
         ]
       }
@@ -2740,31 +2711,44 @@ function CompactPermissionConfirmation({
     "div",
     {
       className: cn(
-        "rounded-lg border bg-card text-card-foreground p-4",
+        "csdk-confirm-card",
+        "w-full rounded-2xl border border-border/60 bg-card text-card-foreground shadow-sm overflow-hidden",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: message || "This action requires your approval." })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-amber-100 dark:bg-amber-950/50", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 pt-0.5 text-sm text-foreground leading-snug", children: message || "This action requires your approval." })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm text-muted-foreground cursor-pointer", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: rememberChoice,
-                onChange: (e) => setRememberChoice(e.target.checked),
-                className: "rounded border-gray-300"
-              }
-            ),
-            "Don't ask again"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: handleReject, children: "Deny" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "default", size: "sm", onClick: handleApprove, children: "Allow" })
-          ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleReject,
+              className: cn(
+                "csdk-confirm-btn",
+                "px-4 py-1.5 text-sm font-medium rounded-xl",
+                "border border-border bg-transparent text-muted-foreground",
+                "hover:bg-muted/60 hover:text-foreground"
+              ),
+              children: "Deny"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleApprove,
+              className: cn(
+                "csdk-confirm-btn",
+                "px-4 py-1.5 text-sm font-medium rounded-xl",
+                "bg-primary text-primary-foreground",
+                "hover:opacity-90"
+              ),
+              children: "Allow"
+            }
+          )
         ] })
       ]
     }
@@ -2896,8 +2880,8 @@ function DevLogger({
   position = "bottom-right",
   className
 }) {
-  const [isOpen, setIsOpen] = React18.useState(false);
-  const [activeTab, setActiveTab] = React18.useState("chat");
+  const [isOpen, setIsOpen] = React17.useState(false);
+  const [activeTab, setActiveTab] = React17.useState("chat");
   const positionClasses = {
     "bottom-left": "bottom-4 left-4",
     "bottom-right": "bottom-4 right-4",
@@ -3322,9 +3306,9 @@ function ModelSelector({
   showCapabilities = true,
   className
 }) {
-  const [isOpen, setIsOpen] = React18__namespace.useState(false);
-  const containerRef = React18__namespace.useRef(null);
-  React18__namespace.useEffect(() => {
+  const [isOpen, setIsOpen] = React17__namespace.useState(false);
+  const containerRef = React17__namespace.useRef(null);
+  React17__namespace.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -3333,7 +3317,7 @@ function ModelSelector({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const selectedModel = React18__namespace.useMemo(() => {
+  const selectedModel = React17__namespace.useMemo(() => {
     if (!value) return null;
     if (providers) {
       for (const provider of providers) {
@@ -3559,7 +3543,7 @@ function PopoverTrigger({
   className,
   ...props
 }) {
-  if (asChild && React18__namespace.isValidElement(children)) {
+  if (asChild && React17__namespace.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { render: children, className, ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { className, ...props, children });
@@ -3694,8 +3678,8 @@ function ThreadPicker({
   itemClassName,
   newButtonClassName
 }) {
-  const [isOpen, setIsOpen] = React18__namespace.useState(false);
-  const selectedThread = React18__namespace.useMemo(() => {
+  const [isOpen, setIsOpen] = React17__namespace.useState(false);
+  const selectedThread = React17__namespace.useMemo(() => {
     if (!value) return null;
     return threads.find((t) => t.id === value) ?? null;
   }, [value, threads]);
@@ -3901,7 +3885,7 @@ function ThreadCard({
   showDelete = true,
   className
 }) {
-  const [isHovered, setIsHovered] = React18__namespace.useState(false);
+  const [isHovered, setIsHovered] = React17__namespace.useState(false);
   const handleDelete = (e) => {
     e.stopPropagation();
     onDelete?.();
@@ -4142,10 +4126,10 @@ function MCPUIFrame({
   showLoading = true,
   testId
 }) {
-  const iframeRef = React18__namespace.useRef(null);
-  const [isLoading, setIsLoading] = React18__namespace.useState(true);
-  const [error, setError] = React18__namespace.useState(null);
-  React18__namespace.useEffect(() => {
+  const iframeRef = React17__namespace.useRef(null);
+  const [isLoading, setIsLoading] = React17__namespace.useState(true);
+  const [error, setError] = React17__namespace.useState(null);
+  React17__namespace.useEffect(() => {
     const handleMessage = (event) => {
       if (event.source !== iframeRef.current?.contentWindow) {
         return;
@@ -4158,17 +4142,17 @@ function MCPUIFrame({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [onIntent]);
-  const handleLoad = React18__namespace.useCallback(() => {
+  const handleLoad = React17__namespace.useCallback(() => {
     setIsLoading(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = React18__namespace.useCallback(() => {
+  const handleError = React17__namespace.useCallback(() => {
     const err = new Error("Failed to load MCP UI content");
     setError(err);
     setIsLoading(false);
     onError?.(err);
   }, [onError]);
-  const { srcDoc, src } = React18__namespace.useMemo(() => {
+  const { srcDoc, src } = React17__namespace.useMemo(() => {
     if (resource.mimeType === "text/html") {
       let content = resource.content || "";
       if (resource.blob && !resource.content) {
@@ -4348,24 +4332,24 @@ function DefaultMessage({
   const isUser = message.role === "user";
   const isCompactionMarker = message.role === "system" && message.metadata?.type === "compaction-marker";
   const isStreaming = isLastMessage && isLoading;
-  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(() => {
+  const [isEditing, setIsEditing] = React17__namespace.useState(false);
+  const [editValue, setEditValue] = React17__namespace.useState(message.content ?? "");
+  const editRef = React17__namespace.useRef(null);
+  const startEdit = React17__namespace.useCallback(() => {
     setEditValue(message.content ?? "");
     setIsEditing(true);
     requestAnimationFrame(() => editRef.current?.focus());
   }, [message.content]);
-  const cancelEdit = React18__namespace.useCallback(() => {
+  const cancelEdit = React17__namespace.useCallback(() => {
     setIsEditing(false);
   }, []);
-  const submitEdit = React18__namespace.useCallback(() => {
+  const submitEdit = React17__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(
+  const handleEditKeyDown = React17__namespace.useCallback(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -4407,18 +4391,18 @@ function DefaultMessage({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-border" })
     ] });
   }
-  const { cleanContent: contentWithoutFollowUps, followUps } = React18__namespace.useMemo(() => {
+  const { cleanContent: contentWithoutFollowUps, followUps } = React17__namespace.useMemo(() => {
     if (isUser || !message.content) {
       return { cleanContent: message.content, followUps: [] };
     }
     return parseFollowUps(message.content);
   }, [message.content, isUser]);
-  const cleanContent = React18__namespace.useMemo(() => {
+  const cleanContent = React17__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 = React18__namespace.useMemo(() => {
+  const sources = React17__namespace.useMemo(() => {
     if (isUser || !citations.enabled) return [];
     const extractedSources = [];
     const addSource = (url, title, description) => {
@@ -4681,7 +4665,7 @@ function DefaultMessage({
                 renderProps
               );
               if (output != null) {
-                return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, exec.id);
+                return /* @__PURE__ */ jsxRuntime.jsx(React17__namespace.Fragment, { children: output }, exec.id);
               }
             }
             if (mcpToolRenderer && (exec.source === "mcp" || toolDef?.source === "mcp")) {
@@ -4797,13 +4781,13 @@ function DefaultMessage({
               const output = toolDef.render(
                 renderProps
               );
-              return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, tool.id);
+              return /* @__PURE__ */ jsxRuntime.jsx(React17__namespace.Fragment, { children: output }, tool.id);
             }
             return /* @__PURE__ */ jsxRuntime.jsx(
               PermissionConfirmation,
               {
                 state: "pending",
-                toolName: tool.name,
+                toolName: tool.approvalTitle ?? tool.name,
                 message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
                 onApprove: (permissionLevel) => onApproveToolExecution?.(
                   tool.id,
@@ -4846,7 +4830,7 @@ function DefaultMessage({
   ] });
 }
 function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React18__namespace.useState(false);
+  const [expanded, setExpanded] = React17__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 }),
@@ -4975,10 +4959,10 @@ function ChatWelcome({
   processAttachment: processAttachmentProp,
   classNames = {}
 }) {
-  const [input, setInput] = React18.useState("");
-  const [pendingAttachments, setPendingAttachments] = React18.useState([]);
-  const fileInputRef = React18.useRef(null);
-  const fileInputId = React18.useId();
+  const [input, setInput] = React17.useState("");
+  const [pendingAttachments, setPendingAttachments] = React17.useState([]);
+  const fileInputRef = React17.useRef(null);
+  const fileInputId = React17.useId();
   const title = config?.title ?? DEFAULT_TITLE;
   const subtitle = config?.subtitle ?? DEFAULT_SUBTITLE;
   const logo = config?.logo;
@@ -4987,7 +4971,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 = React18.useCallback(
+  const isFileTypeAllowed = React17.useCallback(
     (file) => {
       for (const type of allowedFileTypes) {
         if (type.endsWith("/*")) {
@@ -5001,7 +4985,7 @@ function ChatWelcome({
     },
     [allowedFileTypes]
   );
-  const handleFileSelect = React18.useCallback(
+  const handleFileSelect = React17.useCallback(
     async (files) => {
       if (!files || !attachmentsEnabled) return;
       for (const file of Array.from(files)) {
@@ -5064,7 +5048,7 @@ function ChatWelcome({
     },
     [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
   );
-  const handleInputChange = React18.useCallback(
+  const handleInputChange = React17.useCallback(
     (e) => {
       handleFileSelect(e.target.files);
       if (fileInputRef.current) {
@@ -5073,7 +5057,7 @@ function ChatWelcome({
     },
     [handleFileSelect]
   );
-  const removePendingAttachment = React18.useCallback((id) => {
+  const removePendingAttachment = React17.useCallback((id) => {
     setPendingAttachments((prev) => {
       const att = prev.find((a) => a.id === id);
       if (att) {
@@ -5082,7 +5066,7 @@ function ChatWelcome({
       return prev.filter((a) => a.id !== id);
     });
   }, []);
-  const handleSubmit = React18.useCallback(() => {
+  const handleSubmit = React17.useCallback(() => {
     const hasContent = input.trim();
     const hasAttachments = pendingAttachments.some(
       (att) => att.status === "ready"
@@ -5094,7 +5078,7 @@ function ChatWelcome({
     setPendingAttachments([]);
     setInput("");
   }, [input, isLoading, onSendMessage, pendingAttachments]);
-  const handleSuggestionClick = React18.useCallback(
+  const handleSuggestionClick = React17.useCallback(
     (suggestion) => {
       onSendMessage(suggestion);
     },
@@ -5266,11 +5250,11 @@ function ChatWelcome({
     }
   );
 }
-var CopilotChatContext = React18.createContext(
+var CopilotChatContext = React17.createContext(
   null
 );
 var useCopilotChatContext = () => {
-  const ctx = React18.useContext(CopilotChatContext);
+  const ctx = React17.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>"
@@ -5304,10 +5288,10 @@ function ChatView({ children, className }) {
 ChatView.displayName = "ChatView";
 function chatViewHasOnlyLayoutChildren(chatViewElement) {
   if (!chatViewElement?.props?.children) return false;
-  const childArray = React18__namespace.default.Children.toArray(chatViewElement.props.children);
+  const childArray = React17__namespace.default.Children.toArray(chatViewElement.props.children);
   if (childArray.length === 0) return false;
   return childArray.every(
-    (child) => React18__namespace.default.isValidElement(child) && (child.type === Header || child.type === Footer)
+    (child) => React17__namespace.default.isValidElement(child) && (child.type === Header || child.type === Footer)
   );
 }
 function Header({ children, className }) {
@@ -5323,8 +5307,8 @@ function Input({ placeholder: placeholderProp, className }) {
     onStop,
     placeholder: defaultPlaceholder
   } = useCopilotChatContext();
-  const [value, setValue] = React18.useState("");
-  const handleSubmit = React18.useCallback(() => {
+  const [value, setValue] = React17.useState("");
+  const handleSubmit = React17.useCallback(() => {
     if (value.trim() && !isLoading) {
       send(value.trim());
       setValue("");
@@ -5445,18 +5429,18 @@ function ThreadPickerCompound(props) {
   );
 }
 function hasCompoundChild(children, ...components) {
-  return React18__namespace.default.Children.toArray(children).some(
-    (child) => React18__namespace.default.isValidElement(child) && components.includes(child.type)
+  return React17__namespace.default.Children.toArray(children).some(
+    (child) => React17__namespace.default.isValidElement(child) && components.includes(child.type)
   );
 }
 function findCompoundChild(children, component) {
-  return React18__namespace.default.Children.toArray(children).find(
-    (child) => React18__namespace.default.isValidElement(child) && child.type === component
+  return React17__namespace.default.Children.toArray(children).find(
+    (child) => React17__namespace.default.isValidElement(child) && child.type === component
   );
 }
 function filterCompoundChildren(children, ...components) {
-  return React18__namespace.default.Children.toArray(children).filter(
-    (child) => React18__namespace.default.isValidElement(child) && components.includes(child.type)
+  return React17__namespace.default.Children.toArray(children).filter(
+    (child) => React17__namespace.default.isValidElement(child) && components.includes(child.type)
   );
 }
 var DEFAULT_MAX_FILE_SIZE2 = 5 * 1024 * 1024;
@@ -5541,6 +5525,7 @@ function ChatComponent({
   // Citations/Sources
   citations,
   // Custom rendering
+  messageView,
   renderMessage,
   renderInput,
   renderHeader,
@@ -5562,12 +5547,12 @@ function ChatComponent({
 }) {
   const userAvatar = { fallback: "U", ...userAvatarProp };
   const assistantAvatar = { fallback: "AI", ...assistantAvatarProp };
-  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(
+  const [input, setInput] = React17.useState("");
+  const [pendingAttachments, setPendingAttachments] = React17.useState([]);
+  const [isDragging, setIsDragging] = React17.useState(false);
+  const fileInputRef = React17.useRef(null);
+  const fileInputId = React17.useId();
+  const isFileTypeAllowed = React17.useCallback(
     (file) => {
       for (const type of allowedFileTypes) {
         if (type.endsWith("/*")) {
@@ -5581,7 +5566,7 @@ function ChatComponent({
     },
     [allowedFileTypes]
   );
-  const handleFileSelect = React18.useCallback(
+  const handleFileSelect = React17.useCallback(
     async (files) => {
       if (!files || !attachmentsEnabled) return;
       for (const file of Array.from(files)) {
@@ -5644,7 +5629,7 @@ function ChatComponent({
     },
     [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
   );
-  const handleInputChange = React18.useCallback(
+  const handleInputChange = React17.useCallback(
     (e) => {
       handleFileSelect(e.target.files);
       if (fileInputRef.current) {
@@ -5653,7 +5638,7 @@ function ChatComponent({
     },
     [handleFileSelect]
   );
-  const removePendingAttachment = React18.useCallback((id) => {
+  const removePendingAttachment = React17.useCallback((id) => {
     setPendingAttachments((prev) => {
       const att = prev.find((a) => a.id === id);
       if (att) {
@@ -5662,7 +5647,7 @@ function ChatComponent({
       return prev.filter((a) => a.id !== id);
     });
   }, []);
-  const handleDragOver = React18.useCallback(
+  const handleDragOver = React17.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5672,12 +5657,12 @@ function ChatComponent({
     },
     [attachmentsEnabled]
   );
-  const handleDragLeave = React18.useCallback((e) => {
+  const handleDragLeave = React17.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const handleDrop = React18.useCallback(
+  const handleDrop = React17.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5688,7 +5673,7 @@ function ChatComponent({
     },
     [attachmentsEnabled, handleFileSelect]
   );
-  const handleSubmit = React18.useCallback(() => {
+  const handleSubmit = React17.useCallback(() => {
     const hasContent = input.trim();
     const hasAttachments = pendingAttachments.some(
       (att) => att.status === "ready"
@@ -5700,7 +5685,7 @@ function ChatComponent({
     setPendingAttachments([]);
     setInput("");
   }, [input, isLoading, onSendMessage, pendingAttachments]);
-  const handleSuggestionClick = React18.useCallback(
+  const handleSuggestionClick = React17.useCallback(
     (suggestion) => {
       if (onSuggestionClick) {
         onSuggestionClick(suggestion);
@@ -5727,13 +5712,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 = React18.useCallback(
+  const send = React17.useCallback(
     (message, attachments) => {
       onSendMessage?.(message, attachments);
     },
     [onSendMessage]
   );
-  const contextValue = React18__namespace.default.useMemo(
+  const contextValue = React17__namespace.default.useMemo(
     () => ({
       view,
       send,
@@ -5825,84 +5810,87 @@ function ChatComponent({
                     className: cn("gap-4 p-4", classNames.messageList),
                     children: [
                       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;
-                        const hasPendingApprovals = message.toolExecutions?.some(
-                          (exec) => exec.approvalStatus === "required"
-                        );
-                        if (isEmptyAssistant) {
-                          const shouldShowMessage = hasToolCalls || hasToolExecutions || hasPendingApprovals || isLastMessage && (isLoading || isProcessing);
-                          if (!shouldShowMessage) {
-                            return null;
+                      (() => {
+                        const messageElements = 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;
+                          const hasPendingApprovals = message.toolExecutions?.some(
+                            (exec) => exec.approvalStatus === "required"
+                          );
+                          if (isEmptyAssistant) {
+                            const shouldShowMessage = hasToolCalls || hasToolExecutions || hasPendingApprovals || isLastMessage && (isLoading || isProcessing);
+                            if (!shouldShowMessage) {
+                              return null;
+                            }
                           }
-                        }
-                        const savedExecutions = message.metadata?.toolExecutions;
-                        const messageToolExecutions = message.toolExecutions || savedExecutions;
-                        const messageWithExecutions = messageToolExecutions ? { ...message, toolExecutions: messageToolExecutions } : message;
-                        const handleFollowUpClick = (question) => {
-                          if (onSuggestionClick) {
-                            onSuggestionClick(question);
-                          } else {
-                            onSendMessage?.(question);
-                          }
-                        };
-                        return renderMessage ? /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsxRuntime.jsx(
-                          DefaultMessage,
-                          {
-                            message: messageWithExecutions,
-                            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,
-                            size: fontSize,
-                            isLastMessage,
-                            isLoading,
-                            isProcessing,
-                            loaderVariant,
-                            registeredTools,
-                            toolRenderers,
-                            mcpToolRenderer,
-                            fallbackToolRenderer,
-                            onApproveToolExecution,
-                            onRejectToolExecution,
-                            showFollowUps,
-                            onFollowUpClick: handleFollowUpClick,
-                            followUpClassName,
-                            followUpButtonClassName,
-                            citations: citations === false ? { enabled: false } : citations,
-                            branchInfo: message.role === "user" ? getBranchInfo?.(message.id) ?? null : null,
-                            onSwitchBranch,
-                            onEditMessage
-                          },
-                          message.id
-                        );
-                      }),
+                          const savedExecutions = message.metadata?.toolExecutions;
+                          const messageToolExecutions = message.toolExecutions || savedExecutions;
+                          const messageWithExecutions = messageToolExecutions ? { ...message, toolExecutions: messageToolExecutions } : message;
+                          const handleFollowUpClick = (question) => {
+                            if (onSuggestionClick) {
+                              onSuggestionClick(question);
+                            } else {
+                              onSendMessage?.(question);
+                            }
+                          };
+                          return renderMessage ? /* @__PURE__ */ jsxRuntime.jsx(React17__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsxRuntime.jsx(
+                            DefaultMessage,
+                            {
+                              message: messageWithExecutions,
+                              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,
+                              size: fontSize,
+                              isLastMessage,
+                              isLoading,
+                              isProcessing,
+                              loaderVariant,
+                              registeredTools,
+                              toolRenderers,
+                              mcpToolRenderer,
+                              fallbackToolRenderer,
+                              onApproveToolExecution,
+                              onRejectToolExecution,
+                              showFollowUps,
+                              onFollowUpClick: handleFollowUpClick,
+                              followUpClassName,
+                              followUpButtonClassName,
+                              citations: citations === false ? { enabled: false } : citations,
+                              branchInfo: message.role === "user" ? getBranchInfo?.(message.id) ?? null : null,
+                              onSwitchBranch,
+                              onEditMessage
+                            },
+                            message.id
+                          );
+                        });
+                        return messageView?.children ? messageView.children({ messages, messageElements }) : messageElements;
+                      })(),
                       isLoading && !isProcessing && messages.length > 0 && messages[messages.length - 1]?.role === "user" && /* @__PURE__ */ jsxRuntime.jsx(
                         DefaultMessage,
                         {
@@ -6221,7 +6209,7 @@ function useInternalThreadManager(config = {}) {
     saveDebounce,
     autoRestoreLastThread
   };
-  const threadManager = chunkIXWNDR7H_cjs.useThreadManager(threadManagerConfig);
+  const threadManager = chunkTCPAT3WG_cjs.useThreadManager(threadManagerConfig);
   const {
     currentThread,
     currentThreadId,
@@ -6231,18 +6219,18 @@ function useInternalThreadManager(config = {}) {
     clearCurrentThread,
     refreshThreads
   } = threadManager;
-  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) => {
+  const { messages, setMessages, status, isLoading, getAllMessages } = chunkTCPAT3WG_cjs.useCopilot();
+  const isLoadingMessagesRef = React17.useRef(false);
+  const savingToThreadRef = React17.useRef(null);
+  const lastSavedSnapshotRef = React17.useRef("");
+  const hasInitializedRef = React17.useRef(false);
+  const getMessageSnapshot = React17.useCallback((msgs) => {
     return msgs.map((m) => {
       const contentPreview = (m.content ?? "").slice(0, 20);
       return `${m.id}:${contentPreview}:${m.content?.length ?? 0}`;
     }).join("|");
   }, []);
-  const convertToCore = React18.useCallback((msgs) => {
+  const convertToCore = React17.useCallback((msgs) => {
     return msgs.map((m) => ({
       id: m.id,
       role: m.role,
@@ -6260,7 +6248,7 @@ function useInternalThreadManager(config = {}) {
       }
     }));
   }, []);
-  const handleSwitchThread = React18.useCallback(
+  const handleSwitchThread = React17.useCallback(
     async (threadId) => {
       isLoadingMessagesRef.current = true;
       const thread = await switchThread(threadId);
@@ -6291,7 +6279,7 @@ function useInternalThreadManager(config = {}) {
     },
     [switchThread, setMessages, getMessageSnapshot, onThreadChange]
   );
-  const handleNewThread = React18.useCallback(async () => {
+  const handleNewThread = React17.useCallback(async () => {
     isLoadingMessagesRef.current = true;
     clearCurrentThread();
     lastSavedSnapshotRef.current = "";
@@ -6302,7 +6290,7 @@ function useInternalThreadManager(config = {}) {
       isLoadingMessagesRef.current = false;
     });
   }, [clearCurrentThread, setMessages, onThreadChange]);
-  React18.useEffect(() => {
+  React17.useEffect(() => {
     if (hasInitializedRef.current || !currentThread) {
       return;
     }
@@ -6335,7 +6323,7 @@ function useInternalThreadManager(config = {}) {
       isLoadingMessagesRef.current = false;
     });
   }, [adapter, currentThread, setMessages, getMessageSnapshot, onThreadChange]);
-  React18.useEffect(() => {
+  React17.useEffect(() => {
     if (isLoadingMessagesRef.current) {
       return;
     }
@@ -6408,7 +6396,7 @@ function parsePersistenceConfig(persistence, onThreadChange) {
         };
       case "server":
         return {
-          adapter: chunkI3SQUNTT_cjs.createServerAdapter({
+          adapter: chunkWIXFZUEZ_cjs.createServerAdapter({
             endpoint: persistence.endpoint,
             headers: persistence.headers
           }),
@@ -6461,7 +6449,7 @@ function CopilotChatBase(props) {
     switchBranch,
     getBranchInfo,
     editMessage
-  } = chunkIXWNDR7H_cjs.useCopilot();
+  } = chunkTCPAT3WG_cjs.useCopilot();
   const toolExecutions = rawToolExecutions.map(
     (exec) => ({
       id: exec.id,
@@ -6472,6 +6460,8 @@ function CopilotChatBase(props) {
       error: exec.error,
       timestamp: exec.startedAt ? exec.startedAt.getTime() : Date.now(),
       approvalStatus: exec.approvalStatus,
+      approvalTitle: exec.approvalTitle,
+      approvalMessage: exec.approvalMessage,
       hidden: exec.hidden
     })
   );
@@ -6613,7 +6603,7 @@ function CopilotChatBase(props) {
     footer: classNames.footer
   } : void 0;
   const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
-  const handleDeleteThread = React18__namespace.default.useCallback(
+  const handleDeleteThread = React17__namespace.default.useCallback(
     (threadId) => {
       const isCurrentThread = threadManager.currentThreadId === threadId;
       threadManager.deleteThread(threadId);