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

package/dist/ui/index.js

@@ -1,10 +1,10 @@
-import { useCopilot, useThreadManager } from '../chunk-5Q72LZ5H.js';
-import { createServerAdapter } from '../chunk-UXJ6LIZB.js';
+import { useCopilot, useThreadManager } from '../chunk-PT2TOHG5.js';
+import { createServerAdapter } from '../chunk-WZ2TOZ7M.js';
 import { DEFAULT_MCP_UI_SANDBOX, parseMCPUIMessage } from '../chunk-G4SF2PNQ.js';
 import '../chunk-EWVQWTNV.js';
 import '../chunk-VNLLW3ZI.js';
-import '../chunk-ENFWM3EY.js';
-import '../chunk-4QXY2PBG.js';
+import '../chunk-RKGRQRZU.js';
+import '../chunk-3AONOZLY.js';
 import '../chunk-LLM7AHMO.js';
 import '../chunk-RQ74USYU.js';
 import '../chunk-7W7QLZNC.js';
@@ -18,8 +18,8 @@ import '../chunk-DGUM43GV.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React18 from 'react';
-import React18__default, { memo, createContext, useState, useRef, useId, useCallback, useLayoutEffect, useContext, useEffect } from 'react';
+import * as React19 from 'react';
+import React19__default, { memo, createContext, useState, useRef, useId, useCallback, useMemo, useLayoutEffect, useContext, useEffect } from 'react';
 import { Streamdown } from 'streamdown';
 import { code } from '@streamdown/code';
 import { Slot } from '@radix-ui/react-slot';
@@ -384,7 +384,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React18.forwardRef(
+var Button = React19.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -625,7 +625,7 @@ function TooltipTrigger({
   disabled,
   ...props
 }) {
-  if (asChild && React18__default.isValidElement(children)) {
+  if (asChild && React19__default.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, render: children, ...props });
   }
   return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, ...props, children });
@@ -654,7 +654,7 @@ function TooltipContent({
     }
   ) }) });
 }
-var Avatar = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Avatar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
@@ -666,7 +666,7 @@ var Avatar = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -675,7 +675,7 @@ var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -735,7 +735,34 @@ var MessageContent = ({
   );
   return markdown ? /* @__PURE__ */ jsx(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsx("div", { className: classNames, ...props, children });
 };
-var Textarea = React18.forwardRef(({ className, ...props }, ref) => {
+var MessageActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "csdk-message-actions text-muted-foreground flex items-center gap-2",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var MessageAction = ({
+  tooltip,
+  children,
+  className,
+  side = "top",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, className, children: tooltip })
+  ] }) });
+};
+var Textarea = React19.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -899,7 +926,7 @@ function PromptInputAction({
 }
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React18.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var HoverCardContent = React19.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -1442,7 +1469,7 @@ function SourcesCollapsible({
   defaultExpanded = false,
   className
 }) {
-  const [expanded, setExpanded] = React18.useState(defaultExpanded);
+  const [expanded, setExpanded] = React19.useState(defaultExpanded);
   if (citations.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: cn("border rounded-lg", className), children: [
     /* @__PURE__ */ jsxs(
@@ -1508,7 +1535,7 @@ function SourcesList({
   if (compact) {
     return /* @__PURE__ */ jsxs("div", { className: cn("text-xs text-muted-foreground", className), children: [
       /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sources: " }),
-      citations.map((c, i) => /* @__PURE__ */ jsxs(React18.Fragment, { children: [
+      citations.map((c, i) => /* @__PURE__ */ jsxs(React19.Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "a",
           {
@@ -1586,11 +1613,11 @@ function resultsToCitations(results) {
     domain: result.domain || getDomain3(result.url)
   }));
 }
-var ReasoningContext = React18.createContext(
+var ReasoningContext = React19.createContext(
   null
 );
 function useReasoningContext() {
-  const context = React18.useContext(ReasoningContext);
+  const context = React19.useContext(ReasoningContext);
   if (!context) {
     throw new Error(
       "Reasoning components must be used within a Reasoning provider"
@@ -1606,11 +1633,11 @@ function Reasoning({
   defaultOpen = false,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React18.useState(defaultOpen);
-  const prevStreamingRef = React18.useRef(isStreaming);
+  const [uncontrolledOpen, setUncontrolledOpen] = React19.useState(defaultOpen);
+  const prevStreamingRef = React19.useRef(isStreaming);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const setIsOpen = React18.useCallback(
+  const setIsOpen = React19.useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -1621,7 +1648,7 @@ function Reasoning({
     },
     [isControlled, onOpenChange]
   );
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (isStreaming && !prevStreamingRef.current) {
       setIsOpen(true);
     } else if (!isStreaming && prevStreamingRef.current) {
@@ -1677,9 +1704,9 @@ function ReasoningContent({
   className
 }) {
   const { isOpen } = useReasoningContext();
-  const contentRef = React18.useRef(null);
-  const [height, setHeight] = React18.useState(0);
-  React18.useEffect(() => {
+  const contentRef = React19.useRef(null);
+  const [height, setHeight] = React19.useState(0);
+  React19.useEffect(() => {
     if (contentRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -1728,11 +1755,11 @@ function SimpleReasoning({
     /* @__PURE__ */ jsx(ReasoningContent, { markdown, children: content })
   ] });
 }
-var CopilotUIContext = React18.createContext(
+var CopilotUIContext = React19.createContext(
   null
 );
 function useCopilotUI() {
-  const context = React18.useContext(CopilotUIContext);
+  const context = React19.useContext(CopilotUIContext);
   if (!context) {
     return {
       debug: false,
@@ -1747,7 +1774,7 @@ function CopilotUIProvider({
   debug = false,
   defaultDebugExpanded = false
 }) {
-  const value = React18.useMemo(
+  const value = React19.useMemo(
     () => ({
       debug,
       defaultDebugExpanded,
@@ -1890,7 +1917,7 @@ function ToolStep({
 }) {
   const { isDebug, defaultDebugExpanded } = useCopilotUI();
   const debug = debugProp ?? isDebug;
-  const [expanded, setExpanded] = React18.useState(
+  const [expanded, setExpanded] = React19.useState(
     defaultExpanded ?? defaultDebugExpanded ?? false
   );
   const displayTitle = getDisplayTitle(step);
@@ -2371,9 +2398,9 @@ function ArrowUpRightIcon({ className }) {
     }
   );
 }
-var ConfirmationContext = React18.createContext(null);
+var ConfirmationContext = React19.createContext(null);
 function useConfirmationContext() {
-  const context = React18.useContext(ConfirmationContext);
+  const context = React19.useContext(ConfirmationContext);
   if (!context) {
     throw new Error(
       "Confirmation components must be used within a Confirmation provider"
@@ -2541,30 +2568,27 @@ function PermissionConfirmation({
   message,
   onApprove,
   onReject,
-  showPermissionOptions = true,
-  permissionOptions = DEFAULT_PERMISSION_OPTIONS,
   className
 }) {
-  const [selectedPermission, setSelectedPermission] = React18.useState("ask");
-  const [showOptions, setShowOptions] = React18.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__ */ 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__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: "Approved" })
         ]
       }
@@ -2575,11 +2599,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__ */ jsx(XIcon2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(XIcon2, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: "Rejected" })
         ]
       }
@@ -2589,81 +2616,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__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
-          /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            toolName && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: toolName }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message || "This tool requires your approval to execute." })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4", children: [
+          /* @__PURE__ */ 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__ */ jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pt-0.5", children: [
+            toolName && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-1", children: toolName }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground leading-snug", children: message || "This tool requires your approval to execute." })
           ] })
         ] }),
-        showPermissionOptions && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+          /* @__PURE__ */ 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__ */ jsx("span", { children: permissionOptions.find((o) => o.value === selectedPermission)?.label }),
-                /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "mt-2 space-y-1 pl-1", children: permissionOptions.map((option) => /* @__PURE__ */ jsxs(
-            "label",
+          /* @__PURE__ */ 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__ */ jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    name: "permission",
-                    value: option.value,
-                    checked: selectedPermission === option.value,
-                    onChange: () => setSelectedPermission(option.value),
-                    className: "mt-0.5"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: option.label }),
-                  option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: option.description })
-                ] })
-              ]
-            },
-            option.value
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleReject, children: "Deny" }),
-          /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", onClick: handleApprove, children: "Allow" })
+              children: "Allow"
+            }
+          )
         ] })
       ]
     }
@@ -2676,23 +2669,25 @@ function CompactPermissionConfirmation({
   onReject,
   className
 }) {
-  const [rememberChoice, setRememberChoice] = React18.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__ */ 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__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: "Approved" })
         ]
       }
@@ -2703,11 +2698,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__ */ jsx(XIcon2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(XIcon2, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: "Rejected" })
         ]
       }
@@ -2717,31 +2715,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__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
-          /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: message || "This action requires your approval." })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4", children: [
+          /* @__PURE__ */ 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__ */ jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-muted-foreground cursor-pointer", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: rememberChoice,
-                onChange: (e) => setRememberChoice(e.target.checked),
-                className: "rounded border-gray-300"
-              }
-            ),
-            "Don't ask again"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleReject, children: "Deny" }),
-            /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", onClick: handleApprove, children: "Allow" })
-          ] })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+          /* @__PURE__ */ 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__ */ 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"
+            }
+          )
         ] })
       ]
     }
@@ -3299,9 +3310,9 @@ function ModelSelector({
   showCapabilities = true,
   className
 }) {
-  const [isOpen, setIsOpen] = React18.useState(false);
-  const containerRef = React18.useRef(null);
-  React18.useEffect(() => {
+  const [isOpen, setIsOpen] = React19.useState(false);
+  const containerRef = React19.useRef(null);
+  React19.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -3310,7 +3321,7 @@ function ModelSelector({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const selectedModel = React18.useMemo(() => {
+  const selectedModel = React19.useMemo(() => {
     if (!value) return null;
     if (providers) {
       for (const provider of providers) {
@@ -3536,7 +3547,7 @@ function PopoverTrigger({
   className,
   ...props
 }) {
-  if (asChild && React18.isValidElement(children)) {
+  if (asChild && React19.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Popover$1.Trigger, { render: children, className, ...props });
   }
   return /* @__PURE__ */ jsx(Popover$1.Trigger, { className, ...props, children });
@@ -3671,8 +3682,8 @@ function ThreadPicker({
   itemClassName,
   newButtonClassName
 }) {
-  const [isOpen, setIsOpen] = React18.useState(false);
-  const selectedThread = React18.useMemo(() => {
+  const [isOpen, setIsOpen] = React19.useState(false);
+  const selectedThread = React19.useMemo(() => {
     if (!value) return null;
     return threads.find((t) => t.id === value) ?? null;
   }, [value, threads]);
@@ -3878,7 +3889,7 @@ function ThreadCard({
   showDelete = true,
   className
 }) {
-  const [isHovered, setIsHovered] = React18.useState(false);
+  const [isHovered, setIsHovered] = React19.useState(false);
   const handleDelete = (e) => {
     e.stopPropagation();
     onDelete?.();
@@ -4119,10 +4130,10 @@ function MCPUIFrame({
   showLoading = true,
   testId
 }) {
-  const iframeRef = React18.useRef(null);
-  const [isLoading, setIsLoading] = React18.useState(true);
-  const [error, setError] = React18.useState(null);
-  React18.useEffect(() => {
+  const iframeRef = React19.useRef(null);
+  const [isLoading, setIsLoading] = React19.useState(true);
+  const [error, setError] = React19.useState(null);
+  React19.useEffect(() => {
     const handleMessage = (event) => {
       if (event.source !== iframeRef.current?.contentWindow) {
         return;
@@ -4135,17 +4146,17 @@ function MCPUIFrame({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [onIntent]);
-  const handleLoad = React18.useCallback(() => {
+  const handleLoad = React19.useCallback(() => {
     setIsLoading(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = React18.useCallback(() => {
+  const handleError = React19.useCallback(() => {
     const err = new Error("Failed to load MCP UI content");
     setError(err);
     setIsLoading(false);
     onError?.(err);
   }, [onError]);
-  const { srcDoc, src } = React18.useMemo(() => {
+  const { srcDoc, src } = React19.useMemo(() => {
     if (resource.mimeType === "text/html") {
       let content = resource.content || "";
       if (resource.blob && !resource.content) {
@@ -4295,6 +4306,284 @@ function MCPUIFrameList({
     `${resource.uri}-${index}`
   )) });
 }
+var MessageActionsContext = createContext(
+  null
+);
+function MessageActionsProvider({
+  children
+}) {
+  const [registry, setRegistry] = useState(
+    {}
+  );
+  const registerActions = useCallback(
+    (role, actions) => {
+      setRegistry((prev) => ({ ...prev, [role]: actions }));
+    },
+    []
+  );
+  const clearActions = useCallback((role) => {
+    setRegistry((prev) => {
+      const next = { ...prev };
+      delete next[role];
+      return next;
+    });
+  }, []);
+  const getActions = useCallback(
+    (role) => registry[role] ?? [],
+    [registry]
+  );
+  return /* @__PURE__ */ jsx(
+    MessageActionsContext.Provider,
+    {
+      value: { getActions, registerActions, clearActions },
+      children
+    }
+  );
+}
+function useMessageActionsContext() {
+  return useContext(MessageActionsContext);
+}
+createContext(null);
+function CopyIcon2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function CheckIcon3() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+    }
+  );
+}
+function EditIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+        /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+      ]
+    }
+  );
+}
+function ThumbsUpIcon3() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M7 10v12" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })
+      ]
+    }
+  );
+}
+function ThumbsDownIcon3() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M17 14V2" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })
+      ]
+    }
+  );
+}
+function CopyAction({ tooltip = "Copy", className }) {
+  return null;
+}
+CopyAction.displayName = "CopyAction";
+function EditAction({ tooltip = "Edit", className }) {
+  return null;
+}
+EditAction.displayName = "EditAction";
+function FeedbackAction({
+  onFeedback,
+  tooltip = "Feedback",
+  className
+}) {
+  return null;
+}
+FeedbackAction.displayName = "FeedbackAction";
+function Action({
+  icon,
+  tooltip,
+  onClick,
+  hidden,
+  className
+}) {
+  return null;
+}
+Action.displayName = "Action";
+function MessageActions2({ role, children }) {
+  const ctx = useMessageActionsContext();
+  const actions = useMemo(() => {
+    const result = [];
+    React19__default.Children.forEach(children, (child) => {
+      if (!React19__default.isValidElement(child)) return;
+      const props = child.props;
+      const type = child.type;
+      if (type === CopyAction || child.type?.displayName === "CopyAction") {
+        result.push({
+          id: "copy",
+          icon: /* @__PURE__ */ jsx(CopyIcon2, {}),
+          tooltip: props.tooltip ?? "Copy",
+          onClick: ({ message }) => {
+            navigator.clipboard.writeText(message.content ?? "");
+          },
+          className: props.className
+        });
+      } else if (type === EditAction || child.type?.displayName === "EditAction") {
+        result.push({
+          id: "edit",
+          icon: /* @__PURE__ */ jsx(EditIcon, {}),
+          tooltip: props.tooltip ?? "Edit",
+          onClick: () => {
+          },
+          // handled internally by DefaultMessage via onEditMessage
+          className: props.className
+        });
+      } else if (type === FeedbackAction || child.type?.displayName === "FeedbackAction") {
+        const onFeedback = props.onFeedback;
+        result.push(
+          {
+            id: "feedback-up",
+            icon: /* @__PURE__ */ jsx(ThumbsUpIcon3, {}),
+            tooltip: "Helpful",
+            onClick: ({ message }) => onFeedback?.(message, "helpful"),
+            className: props.className
+          },
+          {
+            id: "feedback-down",
+            icon: /* @__PURE__ */ jsx(ThumbsDownIcon3, {}),
+            tooltip: "Not helpful",
+            onClick: ({ message }) => onFeedback?.(message, "not-helpful"),
+            className: props.className
+          }
+        );
+      } else if (type === Action || child.type?.displayName === "Action") {
+        result.push({
+          id: props.id ?? props.tooltip,
+          icon: props.icon,
+          tooltip: props.tooltip,
+          onClick: props.onClick,
+          hidden: props.hidden,
+          className: props.className
+        });
+      }
+    });
+    return result;
+  }, [children]);
+  useLayoutEffect(() => {
+    if (!ctx) return;
+    ctx.registerActions(role, actions);
+    return () => ctx.clearActions(role);
+  }, [ctx, role, actions]);
+  return null;
+}
+function FloatingActions({
+  message,
+  role,
+  align = "left",
+  onEdit
+}) {
+  const ctx = useMessageActionsContext();
+  const [copiedId, setCopiedId] = React19.useState(null);
+  if (!ctx) return null;
+  const actions = ctx.getActions(role);
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-0.5 mt-1",
+        "opacity-0 group-hover/message:opacity-100 transition-opacity duration-150",
+        align === "right" ? "justify-end" : "justify-start"
+      ),
+      children: actions.map((action) => {
+        const isHidden = typeof action.hidden === "function" ? action.hidden({ message }) : action.hidden;
+        if (isHidden) return null;
+        const isCopied = copiedId === action.id;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: action.tooltip,
+            "aria-label": action.tooltip,
+            className: cn(
+              "flex items-center justify-center size-6 rounded-md",
+              "text-muted-foreground hover:text-foreground hover:bg-muted",
+              "transition-colors",
+              action.className
+            ),
+            onClick: () => {
+              if (action.id === "edit" && onEdit) {
+                onEdit();
+                return;
+              }
+              if (action.id === "copy") {
+                navigator.clipboard.writeText(message.content ?? "");
+                setCopiedId("copy");
+                setTimeout(() => setCopiedId(null), 1500);
+                return;
+              }
+              action.onClick({ message });
+            },
+            children: action.id === "copy" && isCopied ? /* @__PURE__ */ jsx(CheckIcon3, {}) : action.icon
+          },
+          action.id
+        );
+      })
+    }
+  );
+}
 function DefaultMessage({
   message,
   userAvatar,
@@ -4325,24 +4614,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.useState(false);
-  const [editValue, setEditValue] = React18.useState(message.content ?? "");
-  const editRef = React18.useRef(null);
-  const startEdit = React18.useCallback(() => {
+  const [isEditing, setIsEditing] = React19.useState(false);
+  const [editValue, setEditValue] = React19.useState(message.content ?? "");
+  const editRef = React19.useRef(null);
+  const startEdit = React19.useCallback(() => {
     setEditValue(message.content ?? "");
     setIsEditing(true);
     requestAnimationFrame(() => editRef.current?.focus());
   }, [message.content]);
-  const cancelEdit = React18.useCallback(() => {
+  const cancelEdit = React19.useCallback(() => {
     setIsEditing(false);
   }, []);
-  const submitEdit = React18.useCallback(() => {
+  const submitEdit = React19.useCallback(() => {
     const trimmed = editValue.trim();
     if (!trimmed || !onEditMessage) return;
     onEditMessage(message.id, trimmed);
     setIsEditing(false);
   }, [editValue, message.id, onEditMessage]);
-  const handleEditKeyDown = React18.useCallback(
+  const handleEditKeyDown = React19.useCallback(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -4384,18 +4673,18 @@ function DefaultMessage({
       /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" })
     ] });
   }
-  const { cleanContent: contentWithoutFollowUps, followUps } = React18.useMemo(() => {
+  const { cleanContent: contentWithoutFollowUps, followUps } = React19.useMemo(() => {
     if (isUser || !message.content) {
       return { cleanContent: message.content, followUps: [] };
     }
     return parseFollowUps(message.content);
   }, [message.content, isUser]);
-  const cleanContent = React18.useMemo(() => {
+  const cleanContent = React19.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.useMemo(() => {
+  const sources = React19.useMemo(() => {
     if (isUser || !citations.enabled) return [];
     const extractedSources = [];
     const addSource = (url, title, description) => {
@@ -4449,121 +4738,136 @@ function DefaultMessage({
   const shouldShowSources = citations.enabled && sources.length > 0;
   if (isUser) {
     const hasAttachments = message.attachments && message.attachments.length > 0;
-    return /* @__PURE__ */ jsxs(Message, { className: cn("flex gap-2 group/user-msg justify-end"), children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full min-w-[200px]", children: [
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            ref: editRef,
-            value: editValue,
-            onChange: (e) => setEditValue(e.target.value),
-            onKeyDown: handleEditKeyDown,
-            rows: Math.max(2, (editValue.match(/\n/g) || []).length + 1),
-            className: cn(
-              "csdk-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
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 justify-end", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: cancelEdit,
-              className: "csdk-edit-cancel px-3 py-1 text-xs rounded-md bg-muted text-muted-foreground hover:bg-muted/80 transition-colors",
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: submitEdit,
-              disabled: !editValue.trim(),
-              className: "csdk-edit-submit px-3 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors",
-              children: "Send"
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        message.content && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            MessageContent,
-            {
-              className: cn(
-                "csdk-message-user rounded-lg px-4 py-2 bg-primary text-primary-foreground",
-                userMessageClassName
+    return /* @__PURE__ */ jsxs(
+      Message,
+      {
+        className: cn("flex gap-2 group/user-msg group/message justify-end"),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full min-w-[200px]", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: editRef,
+                value: editValue,
+                onChange: (e) => setEditValue(e.target.value),
+                onKeyDown: handleEditKeyDown,
+                rows: Math.max(2, (editValue.match(/\n/g) || []).length + 1),
+                className: cn(
+                  "csdk-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
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 justify-end", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: cancelEdit,
+                  className: "csdk-edit-cancel px-3 py-1 text-xs rounded-md bg-muted text-muted-foreground hover:bg-muted/80 transition-colors",
+                  children: "Cancel"
+                }
               ),
-              markdown: true,
-              size,
-              children: message.content
-            }
-          ),
-          showEditBtn && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: startEdit,
-              "aria-label": "Edit message",
-              className: cn(
-                "csdk-edit-btn absolute -left-7 top-1/2 -translate-y-1/2",
-                "size-6 flex items-center justify-center rounded-full",
-                "text-muted-foreground bg-background border border-border shadow-sm",
-                "opacity-0 group-hover/user-msg:opacity-100 transition-opacity",
-                "hover:text-foreground hover:bg-muted"
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: submitEdit,
+                  disabled: !editValue.trim(),
+                  className: "csdk-edit-submit px-3 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors",
+                  children: "Send"
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            message.content && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                MessageContent,
+                {
+                  className: cn(
+                    "csdk-message-user rounded-lg px-4 py-2 bg-primary text-primary-foreground",
+                    userMessageClassName
+                  ),
+                  markdown: true,
+                  size,
+                  children: message.content
+                }
               ),
-              children: /* @__PURE__ */ jsxs(
-                "svg",
+              showEditBtn && /* @__PURE__ */ jsx(
+                "button",
                 {
-                  width: "12",
-                  height: "12",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: 2,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-                    /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
-                  ]
+                  type: "button",
+                  onClick: startEdit,
+                  "aria-label": "Edit message",
+                  className: cn(
+                    "csdk-edit-btn absolute -left-7 top-1/2 -translate-y-1/2",
+                    "size-6 flex items-center justify-center rounded-full",
+                    "text-muted-foreground bg-background border border-border shadow-sm",
+                    "opacity-0 group-hover/user-msg:opacity-100 transition-opacity",
+                    "hover:text-foreground hover:bg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                        /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+                      ]
+                    }
+                  )
                 }
               )
+            ] }),
+            hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
+            showBranchNav && /* @__PURE__ */ jsx(
+              BranchNavigator,
+              {
+                siblingIndex: branchInfo.siblingIndex,
+                totalSiblings: branchInfo.totalSiblings,
+                hasPrevious: branchInfo.hasPrevious,
+                hasNext: branchInfo.hasNext,
+                onPrevious: () => onSwitchBranch(
+                  branchInfo.siblingIds[branchInfo.siblingIndex - 1]
+                ),
+                onNext: () => onSwitchBranch(
+                  branchInfo.siblingIds[branchInfo.siblingIndex + 1]
+                ),
+                className: "mt-1"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FloatingActions,
+              {
+                message,
+                role: "user",
+                align: "right",
+                onEdit: onEditMessage ? startEdit : void 0
+              }
+            )
+          ] }) }),
+          showUserAvatar && /* @__PURE__ */ jsx(
+            MessageAvatar,
+            {
+              src: userAvatar.src,
+              alt: "User",
+              fallback: userAvatar.fallback,
+              className: userAvatar.className,
+              children: userAvatar.component
             }
           )
-        ] }),
-        hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
-        showBranchNav && /* @__PURE__ */ jsx(
-          BranchNavigator,
-          {
-            siblingIndex: branchInfo.siblingIndex,
-            totalSiblings: branchInfo.totalSiblings,
-            hasPrevious: branchInfo.hasPrevious,
-            hasNext: branchInfo.hasNext,
-            onPrevious: () => onSwitchBranch(
-              branchInfo.siblingIds[branchInfo.siblingIndex - 1]
-            ),
-            onNext: () => onSwitchBranch(
-              branchInfo.siblingIds[branchInfo.siblingIndex + 1]
-            ),
-            className: "mt-1"
-          }
-        )
-      ] }) }),
-      showUserAvatar && /* @__PURE__ */ jsx(
-        MessageAvatar,
-        {
-          src: userAvatar.src,
-          alt: "User",
-          fallback: userAvatar.fallback,
-          className: userAvatar.className,
-          children: userAvatar.component
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
   const isToolHidden = (exec) => {
     if (exec.hidden === true) return true;
@@ -4600,7 +4904,7 @@ function DefaultMessage({
     result: exec.result,
     error: exec.error
   }));
-  return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+  return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2 group/message", children: [
     /* @__PURE__ */ jsx(
       MessageAvatar,
       {
@@ -4658,7 +4962,7 @@ function DefaultMessage({
                 renderProps
               );
               if (output != null) {
-                return /* @__PURE__ */ jsx(React18.Fragment, { children: output }, exec.id);
+                return /* @__PURE__ */ jsx(React19.Fragment, { children: output }, exec.id);
               }
             }
             if (mcpToolRenderer && (exec.source === "mcp" || toolDef?.source === "mcp")) {
@@ -4774,13 +5078,13 @@ function DefaultMessage({
               const output = toolDef.render(
                 renderProps
               );
-              return /* @__PURE__ */ jsx(React18.Fragment, { children: output }, tool.id);
+              return /* @__PURE__ */ jsx(React19.Fragment, { children: output }, tool.id);
             }
             return /* @__PURE__ */ 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,
@@ -4816,14 +5120,15 @@ function DefaultMessage({
               className: followUpClassName,
               buttonClassName: followUpButtonClassName
             }
-          )
+          ),
+          /* @__PURE__ */ jsx(FloatingActions, { message, role: "assistant", align: "left" })
         ] })
       )
     ] })
   ] });
 }
 function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React18.useState(false);
+  const [expanded, setExpanded] = React19.useState(false);
   if (attachment.type !== "image") {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attachment.type }),
@@ -5281,10 +5586,10 @@ function ChatView({ children, className }) {
 ChatView.displayName = "ChatView";
 function chatViewHasOnlyLayoutChildren(chatViewElement) {
   if (!chatViewElement?.props?.children) return false;
-  const childArray = React18__default.Children.toArray(chatViewElement.props.children);
+  const childArray = React19__default.Children.toArray(chatViewElement.props.children);
   if (childArray.length === 0) return false;
   return childArray.every(
-    (child) => React18__default.isValidElement(child) && (child.type === Header || child.type === Footer)
+    (child) => React19__default.isValidElement(child) && (child.type === Header || child.type === Footer)
   );
 }
 function Header({ children, className }) {
@@ -5422,18 +5727,18 @@ function ThreadPickerCompound(props) {
   );
 }
 function hasCompoundChild(children, ...components) {
-  return React18__default.Children.toArray(children).some(
-    (child) => React18__default.isValidElement(child) && components.includes(child.type)
+  return React19__default.Children.toArray(children).some(
+    (child) => React19__default.isValidElement(child) && components.includes(child.type)
   );
 }
 function findCompoundChild(children, component) {
-  return React18__default.Children.toArray(children).find(
-    (child) => React18__default.isValidElement(child) && child.type === component
+  return React19__default.Children.toArray(children).find(
+    (child) => React19__default.isValidElement(child) && child.type === component
   );
 }
 function filterCompoundChildren(children, ...components) {
-  return React18__default.Children.toArray(children).filter(
-    (child) => React18__default.isValidElement(child) && components.includes(child.type)
+  return React19__default.Children.toArray(children).filter(
+    (child) => React19__default.isValidElement(child) && components.includes(child.type)
   );
 }
 var DEFAULT_MAX_FILE_SIZE2 = 5 * 1024 * 1024;
@@ -5518,6 +5823,7 @@ function ChatComponent({
   // Citations/Sources
   citations,
   // Custom rendering
+  messageView,
   renderMessage,
   renderInput,
   renderHeader,
@@ -5710,7 +6016,7 @@ function ChatComponent({
     },
     [onSendMessage]
   );
-  const contextValue = React18__default.useMemo(
+  const contextValue = React19__default.useMemo(
     () => ({
       view,
       send,
@@ -5718,6 +6024,9 @@ function ChatComponent({
       onStop,
       attachmentsEnabled,
       placeholder,
+      // Messages for Chat.MessageList primitive
+      messages,
+      registeredTools,
       // Thread management - passed from connected-chat
       onNewChat,
       threads,
@@ -5733,6 +6042,8 @@ function ChatComponent({
       onStop,
       attachmentsEnabled,
       placeholder,
+      messages,
+      registeredTools,
       onNewChat,
       threads,
       currentThreadId,
@@ -5741,7 +6052,7 @@ function ChatComponent({
       isThreadBusy
     ]
   );
-  return /* @__PURE__ */ jsx(CopilotChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(MessageActionsProvider, { children: /* @__PURE__ */ jsx(CopilotChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
@@ -5802,84 +6113,90 @@ function ChatComponent({
                     className: cn("gap-4 p-4", classNames.messageList),
                     children: [
                       messages.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-muted-foreground", children: welcomeMessage || "Send a message to start the conversation" }),
-                      messages.map((message, index) => {
-                        const isLastMessage = index === messages.length - 1;
-                        const GROUP_THRESHOLD_MS = 5 * 60 * 1e3;
-                        const shouldHideAvatar = (() => {
-                          if (!groupConsecutiveMessages || index === 0)
-                            return false;
-                          let prevIdx = index - 1;
-                          while (prevIdx >= 0) {
-                            const prev = messages[prevIdx];
-                            const isToolMsg = prev.role === "tool";
-                            const isInvisibleSystem = prev.role === "system" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            prev.metadata?.type !== "compaction-marker";
-                            if (!isToolMsg && !isInvisibleSystem) break;
-                            prevIdx--;
-                          }
-                          if (prevIdx < 0) return false;
-                          const prevVisible = messages[prevIdx];
-                          if (prevVisible.role !== message.role) return false;
-                          const curTs = message.timestamp;
-                          const prevTs = prevVisible.timestamp;
-                          if (curTs && prevTs && curTs - prevTs > GROUP_THRESHOLD_MS)
-                            return false;
-                          return true;
-                        })();
-                        const isEmptyAssistant = message.role === "assistant" && !message.content?.trim();
-                        const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
-                        const hasToolExecutions = message.toolExecutions && message.toolExecutions.length > 0;
-                        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__ */ jsx(React18__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ 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__ */ jsx(React19__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ 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__ */ jsx(
                         DefaultMessage,
                         {
@@ -6029,7 +6346,7 @@ function ChatComponent({
         rootFooter
       ]
     }
-  ) });
+  ) }) });
 }
 var Chat = Object.assign(ChatComponent, {
   Root: ChatComponent,
@@ -6045,9 +6362,34 @@ var Chat = Object.assign(ChatComponent, {
   Suggestions: SuggestionsCompound,
   BackButton,
   // Navigation: start new chat
-  ThreadPicker: ThreadPickerCompound
+  ThreadPicker: ThreadPickerCompound,
   // Thread switching
+  // Message actions compound components
+  MessageActions: MessageActions2,
+  CopyAction,
+  EditAction,
+  FeedbackAction,
+  Action
 });
+function MessageList({ children, className }) {
+  const { messages, registeredTools } = useCopilotChatContext();
+  return /* @__PURE__ */ jsx("div", { className, children: messages.map((message, index) => {
+    if (children) {
+      return /* @__PURE__ */ jsx(React19.Fragment, { children: children(message, index) }, message.id);
+    }
+    return /* @__PURE__ */ jsx(
+      DefaultMessage,
+      {
+        message,
+        userAvatar: { fallback: "U" },
+        assistantAvatar: { fallback: "AI" },
+        registeredTools,
+        isLastMessage: index === messages.length - 1
+      },
+      message.id
+    );
+  }) });
+}
 function ToolExecutionMessage({
   executions,
   assistantAvatar = { fallback: "AI" },
@@ -6191,7 +6533,8 @@ function useInternalThreadManager(config = {}) {
     adapter,
     saveDebounce = 1e3,
     autoRestoreLastThread = true,
-    onThreadChange
+    onThreadChange,
+    enabled = true
   } = config;
   const threadManagerConfig = {
     adapter,
@@ -6280,6 +6623,7 @@ function useInternalThreadManager(config = {}) {
     });
   }, [clearCurrentThread, setMessages, onThreadChange]);
   useEffect(() => {
+    if (!enabled) return;
     if (hasInitializedRef.current || !currentThread) {
       return;
     }
@@ -6311,8 +6655,9 @@ function useInternalThreadManager(config = {}) {
     requestAnimationFrame(() => {
       isLoadingMessagesRef.current = false;
     });
-  }, [adapter, currentThread, setMessages, getMessageSnapshot, onThreadChange]);
+  }, [enabled, adapter, currentThread, setMessages, getMessageSnapshot, onThreadChange]);
   useEffect(() => {
+    if (!enabled) return;
     if (isLoadingMessagesRef.current) {
       return;
     }
@@ -6345,6 +6690,7 @@ function useInternalThreadManager(config = {}) {
     updateCurrentThread({ messages: coreMessages });
     lastSavedSnapshotRef.current = currentSnapshot;
   }, [
+    enabled,
     adapter,
     messages,
     currentThreadId,
@@ -6423,7 +6769,7 @@ function CopilotChatBase(props) {
   } = props;
   const persistenceConfig = parsePersistenceConfig(persistence, onThreadChange);
   const threadManagerResult = useInternalThreadManager(
-    persistenceConfig ?? { autoRestoreLastThread: false }
+    persistenceConfig ?? { autoRestoreLastThread: false, enabled: false }
   );
   const isPersistenceEnabled = !!persistence;
   const {
@@ -6449,6 +6795,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
     })
   );
@@ -6590,7 +6938,7 @@ function CopilotChatBase(props) {
     footer: classNames.footer
   } : void 0;
   const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
-  const handleDeleteThread = React18__default.useCallback(
+  const handleDeleteThread = React19__default.useCallback(
     (threadId) => {
       const isCurrentThread = threadManager.currentThreadId === threadId;
       threadManager.deleteThread(threadId);
@@ -6718,6 +7066,38 @@ function PoweredBy({ className, showLogo = true }) {
   );
 }
 
-export { AlertTriangleIcon, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, cn, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
+// src/ui/index.ts
+var ChatPrimitives = {
+  // ── List ──────────────────────────────────────────────
+  /** Renders the message list via render-prop. Falls back to DefaultMessage if no children. */
+  MessageList,
+  // ── Messages ──────────────────────────────────────────
+  /** Full SDK message bubble (user + assistant + tools). Use as fallback inside MessageList. */
+  DefaultMessage,
+  /** Low-level message row wrapper (flex layout + avatar slot) */
+  Message,
+  /** Message avatar — image with fallback text/icon */
+  MessageAvatar,
+  /** Message content bubble — supports markdown */
+  MessageContent,
+  /** Action bar below a message (copy, feedback, etc.) */
+  MessageActions,
+  /** Single action button with tooltip inside MessageActions */
+  MessageAction,
+  // ── Layout ────────────────────────────────────────────
+  /** Chat header bar with title and controls */
+  Header: ChatHeader,
+  /** Welcome screen shown when there are no messages */
+  Welcome: ChatWelcome,
+  /** Chat input / composer */
+  Input: PromptInput,
+  /** Scroll anchor — keeps the view pinned to the latest message */
+  ScrollAnchor: ChatContainerScrollAnchor,
+  // ── Indicators ────────────────────────────────────────
+  /** Loading / streaming indicator (dots, wave, typing variants) */
+  Loader
+};
+
+export { AlertTriangleIcon, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatPrimitives, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, cn, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map