@agents24/chat-react 0.1.8 → 0.1.10

package/dist/ui/index.cjs

@@ -30,6 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
+  AgentChatComposer: () => AgentChatComposer,
+  AgentChatDefaultActions: () => AgentChatDefaultActions,
+  AgentChatMessage: () => AgentChatMessage,
+  AgentChatPartRow: () => DefaultPartRow,
+  AgentChatUserMessageContent: () => AgentChatUserMessageContent,
+  AgentResponseTimeline: () => AgentResponseTimeline,
   Attachment: () => Attachment,
   AttachmentAction: () => AttachmentAction,
   AttachmentActions: () => AttachmentActions,
@@ -52,6 +58,7 @@ __export(ui_exports, {
   Marker: () => Marker,
   MarkerContent: () => MarkerContent,
   MarkerIcon: () => MarkerIcon,
+  McpConnectRequiredCard: () => McpConnectRequiredCard,
   Message: () => ChatMessage,
   MessageAction: () => ChatMessageAction,
   MessageActions: () => ChatMessageActions,
@@ -69,16 +76,14 @@ __export(ui_exports, {
   attachmentVariants: () => attachmentVariants,
   bubbleVariants: () => bubbleVariants,
   cn: () => cn,
-  markerVariants: () => markerVariants
+  markerVariants: () => markerVariants,
+  shouldCollapseUserMessage: () => shouldCollapseUserMessage
 });
 module.exports = __toCommonJS(ui_exports);
 
-// src/ui/adapters.ts
+// src/ui/agent-chat-composer.tsx
 var React = __toESM(require("react"), 1);
-
-// src/ui/attachment.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react_slot = require("@radix-ui/react-slot");
+var import_lucide_react = require("lucide-react");
 
 // src/ui/utils.ts
 var import_clsx = require("clsx");
@@ -87,10 +92,258 @@ function cn(...values) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(values));
 }
 
-// src/ui/attachment.tsx
+// src/ui/agent-chat-composer.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `file-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+function createComposerFile(file) {
+  return {
+    id: createId(),
+    type: "file",
+    url: URL.createObjectURL(file),
+    filename: file.name || "attachment",
+    mediaType: file.type || "application/octet-stream"
+  };
+}
+function revokeComposerFiles(files) {
+  files.forEach((file) => {
+    try {
+      URL.revokeObjectURL(file.url);
+    } catch {
+    }
+  });
+}
+function formatFileCount(files) {
+  if (files.length === 1) return files[0].filename;
+  return `${files.length} files`;
+}
+var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-full border-0 bg-neutral-100 text-sm text-neutral-600 shadow-none transition-colors hover:bg-neutral-200 hover:text-neutral-800 focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700";
+var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-full border-0 bg-neutral-900 text-sm text-white shadow-none transition-all duration-200 hover:bg-neutral-800 hover:text-white focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white";
+function AgentChatComposer({
+  accept,
+  allowAttachments = true,
+  attachmentLayout = "flow",
+  className,
+  disabled = false,
+  inputToolbarContent,
+  isRunning = false,
+  onAttachmentCountChange,
+  onStop,
+  onSubmit,
+  placeholder = "Send follow-up",
+  textareaRef
+}) {
+  const fileInputRef = React.useRef(null);
+  const filesRef = React.useRef([]);
+  const localTextareaRef = React.useRef(null);
+  const [text, setText] = React.useState("");
+  const [files, setFiles] = React.useState([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const isExpanded = text.includes("\n") || text.length > 62;
+  const setTextareaRef = React.useCallback(
+    (node) => {
+      localTextareaRef.current = node;
+      if (typeof textareaRef === "function") {
+        textareaRef(node);
+      } else if (textareaRef) {
+        textareaRef.current = node;
+      }
+    },
+    [textareaRef]
+  );
+  React.useEffect(() => {
+    filesRef.current = files;
+    onAttachmentCountChange?.(files.length);
+  }, [files, onAttachmentCountChange]);
+  React.useEffect(() => () => revokeComposerFiles(filesRef.current), []);
+  React.useLayoutEffect(() => {
+    const textarea = localTextareaRef.current;
+    if (!textarea) return;
+    if (isExpanded) {
+      textarea.style.height = "auto";
+      const scrollHeight = textarea.scrollHeight;
+      textarea.style.height = `${Math.min(scrollHeight, 224)}px`;
+      textarea.style.overflowY = scrollHeight >= 224 ? "auto" : "hidden";
+      return;
+    }
+    textarea.style.height = "";
+    textarea.style.overflowY = "hidden";
+  }, [isExpanded, text]);
+  const canSubmit = !disabled && !isSubmitting && !isRunning && (text.trim().length > 0 || files.length > 0);
+  const handleFilesChange = (event) => {
+    const selected = Array.from(event.target.files || []).map(createComposerFile);
+    if (selected.length > 0) {
+      setFiles((current) => [...current, ...selected]);
+    }
+    event.currentTarget.value = "";
+  };
+  const removeFile = (fileId) => {
+    setFiles((current) => {
+      const target = current.find((file) => file.id === fileId);
+      if (target) revokeComposerFiles([target]);
+      return current.filter((file) => file.id !== fileId);
+    });
+  };
+  const submit = async () => {
+    if (!canSubmit) return;
+    const submittedText = text.trim();
+    const submittedFiles = files;
+    setIsSubmitting(true);
+    try {
+      await onSubmit({ text: submittedText, files: submittedFiles });
+      setText("");
+      setFiles([]);
+      revokeComposerFiles(submittedFiles);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      void submit();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("relative mx-auto w-full max-w-3xl overflow-visible", className), children: [
+    files.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "data-testid": "agent-chat-composer-attachments",
+        className: cn(
+          "flex min-w-0 gap-2 py-1",
+          attachmentLayout === "overlay" ? "absolute bottom-full left-0 right-0 mb-1.5 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain px-2" : "mb-2 flex-wrap px-1"
+        ),
+        children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "group relative flex h-8 max-w-[min(20rem,calc(100vw-2rem))] cursor-default select-none items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-1.5 text-sm font-medium text-foreground transition-colors hover:bg-neutral-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Paperclip, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  "aria-label": `Remove ${file.filename}`,
+                  className: "inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-70 transition-colors hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:outline-none",
+                  onClick: () => removeFile(file.id),
+                  type: "button",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          file.id
+        ))
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: cn(
+          "relative w-full border border-neutral-200 bg-white shadow-sm transition-colors duration-200 focus-within:border-neutral-300 dark:border-neutral-700 dark:bg-card dark:focus-within:border-neutral-600",
+          isExpanded ? "rounded-[18px] p-2 pb-1.5" : "rounded-full px-2 py-[3px]"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "w-full",
+            style: {
+              alignItems: "center",
+              display: "grid",
+              gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
+              gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
+              gap: isExpanded ? "3px 10px" : "8px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { gridArea: "plus" }, className: "flex shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    accept,
+                    "aria-label": "Attach files",
+                    className: "hidden",
+                    multiple: true,
+                    onChange: handleFilesChange,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    "aria-label": "Attach files",
+                    className: pillButtonClass,
+                    disabled: disabled || isSubmitting || isRunning || !allowAttachments,
+                    onClick: () => fileInputRef.current?.click(),
+                    title: "Attach files",
+                    type: "button",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "textarea" }, className: "min-w-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "textarea",
+                {
+                  ref: setTextareaRef,
+                  "aria-label": "Message",
+                  className: cn(
+                    "w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-neutral-400 focus-visible:ring-0 scrollbar-thin",
+                    isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
+                  ),
+                  disabled: disabled || isSubmitting || isRunning,
+                  onChange: (event) => setText(event.target.value),
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  rows: isExpanded ? 2 : 1,
+                  value: text
+                }
+              ) }),
+              isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "toolbar" }, className: "flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
+              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "submit" }, className: "flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  "aria-label": "Stop generating",
+                  className: submitButtonClass,
+                  disabled: disabled || !onStop,
+                  onClick: onStop,
+                  title: "Stop",
+                  type: "button",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Square, { className: "size-3.5 fill-current" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
+                  className: cn(submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                  disabled: !canSubmit,
+                  onClick: () => void submit(),
+                  title: "Send",
+                  type: "button",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUp, { className: "size-4", strokeWidth: 2.5 })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
+  ] });
+}
+
+// src/ui/agent-chat-actions.tsx
+var import_lucide_react2 = require("lucide-react");
+
+// src/ui/adapters.ts
+var React2 = __toESM(require("react"), 1);
+
+// src/ui/attachment.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var attachmentVariants = (0, import_class_variance_authority.cva)(
-  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:border-neutral-300 focus-within:ring-0 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
   {
     variants: {
       size: {
@@ -112,7 +365,7 @@ function Attachment({
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "attachment",
@@ -143,7 +396,7 @@ function AttachmentMedia({
   variant = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "attachment-media",
@@ -157,7 +410,7 @@ function AttachmentContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "attachment-content",
@@ -173,7 +426,7 @@ function AttachmentTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       "data-slot": "attachment-title",
@@ -189,7 +442,7 @@ function AttachmentDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       "data-slot": "attachment-description",
@@ -206,7 +459,7 @@ function AttachmentActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "attachment-actions",
@@ -223,13 +476,13 @@ function AttachmentAction({
   type = "button",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       "data-slot": "attachment-action",
       type,
       className: cn(
-        "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50",
         className
       ),
       ...props
@@ -243,7 +496,7 @@ function AttachmentTrigger({
   ...props
 }) {
   const Comp = asChild ? import_react_slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Comp,
     {
       "data-slot": "attachment-trigger",
@@ -254,7 +507,7 @@ function AttachmentTrigger({
   );
 }
 function AttachmentGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "attachment-group",
@@ -267,111 +520,6 @@ function AttachmentGroup({ className, ...props }) {
   );
 }
 
-// src/ui/bubble.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_react_slot2 = require("@radix-ui/react-slot");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      "data-slot": "bubble-group",
-      className: cn("flex min-w-0 flex-col gap-2", className),
-      ...props
-    }
-  );
-}
-var bubbleVariants = (0, import_class_variance_authority2.cva)(
-  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
-  {
-    variants: {
-      variant: {
-        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
-        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
-        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
-        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
-        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
-        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
-        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Bubble({
-  variant = "default",
-  align = "start",
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      "data-slot": "bubble",
-      "data-variant": variant,
-      "data-align": align,
-      className: cn(bubbleVariants({ variant }), className),
-      ...props
-    }
-  );
-}
-function BubbleContent({
-  asChild = false,
-  className,
-  ...props
-}) {
-  const Comp = asChild ? import_react_slot2.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Comp,
-    {
-      "data-slot": "bubble-content",
-      className: cn(
-        "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var bubbleReactionsVariants = (0, import_class_variance_authority2.cva)(
-  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
-  {
-    variants: {
-      side: {
-        top: "top-0 -translate-y-3/4",
-        bottom: "bottom-0 translate-y-3/4"
-      },
-      align: {
-        start: "left-3",
-        end: "right-3"
-      }
-    },
-    defaultVariants: {
-      side: "bottom",
-      align: "end"
-    }
-  }
-);
-function BubbleReactions({
-  side = "bottom",
-  align = "end",
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      "data-slot": "bubble-reactions",
-      "data-align": align,
-      "data-side": side,
-      className: cn(bubbleReactionsVariants({ side, align }), className),
-      ...props
-    }
-  );
-}
-
 // src/ui/message.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function MessageGroup({ className, ...props }) {
@@ -464,25 +612,25 @@ function ChatMessage(input) {
   const messageProps = Object.assign({}, props);
   messageProps.align = resolvedAlign;
   messageProps.className = cn(
-    "group flex w-full flex-col gap-2 overflow-visible",
-    isUser ? cn("is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant max-w-full",
+    "group flex w-full max-w-[80%] flex-col gap-2",
+    isUser ? cn("is-user justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant",
     className
   );
-  return React.createElement(Message, messageProps);
+  return React2.createElement(Message, messageProps);
 }
 function ChatMessageContent({
   className,
   ...props
 }) {
-  return React.createElement(BubbleContent, {
+  return React2.createElement("div", {
     className: cn(
-      "flex w-full max-w-full min-w-0 flex-col gap-2 text-sm",
-      "group-[.is-user]:w-fit group-[.is-user]:overflow-visible group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
-      "group-[.is-assistant]:w-full group-[.is-assistant]:max-w-full group-[.is-assistant]:overflow-hidden group-[.is-assistant]:text-foreground",
-      props.dir === "rtl" ? "group-[.is-assistant]:pr-0" : "group-[.is-assistant]:pl-0",
+      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "group-[.is-assistant]:w-full group-[.is-assistant]:max-w-full group-[.is-assistant]:text-foreground",
       props.dir === "rtl" ? "group-[.is-user]:mr-auto" : "group-[.is-user]:ml-auto",
       className
     ),
+    "data-slot": "message-content",
     ...props
   });
 }
@@ -490,7 +638,7 @@ function ChatMessageActions({
   className,
   ...props
 }) {
-  return React.createElement("div", {
+  return React2.createElement("div", {
     className: cn("flex items-center gap-1", className),
     "data-slot": "message-actions",
     ...props
@@ -505,12 +653,12 @@ function ChatMessageAction({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return React.createElement(
+  return React2.createElement(
     "button",
     {
       "aria-label": label || tooltipLabel,
       className: cn(
-        "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50",
         className
       ),
       title: tooltipLabel,
@@ -518,7 +666,7 @@ function ChatMessageAction({
       ...props
     },
     children,
-    React.createElement(
+    React2.createElement(
       "span",
       { className: "sr-only" },
       label || tooltipLabel
@@ -534,32 +682,32 @@ function ChatAttachment({
   const mediaType = data.mediaType || data.contentType || String(data.type || "application/octet-stream");
   const filename = data.filename || data.name || "Attachment";
   const isImage = mediaType.startsWith("image/") && Boolean(data.url);
-  return React.createElement(
+  return React2.createElement(
     Attachment,
     {
       orientation: orientation || (isImage ? "vertical" : "horizontal"),
       ...props
     },
-    React.createElement(
+    React2.createElement(
       AttachmentMedia,
       { variant: isImage ? "image" : "icon" },
-      isImage ? React.createElement("img", {
+      isImage ? React2.createElement("img", {
         alt: filename,
         className: "size-full object-cover",
         src: data.url
-      }) : React.createElement(
+      }) : React2.createElement(
         "span",
         { "aria-hidden": "true", className: "text-sm" },
         filename.slice(0, 1).toUpperCase()
       )
     ),
-    React.createElement(
+    React2.createElement(
       AttachmentContent,
       null,
-      React.createElement(AttachmentTitle, null, filename),
-      React.createElement(AttachmentDescription, null, mediaType)
+      React2.createElement(AttachmentTitle, null, filename),
+      React2.createElement(AttachmentDescription, null, mediaType)
     ),
-    onRemove ? React.createElement(
+    onRemove ? React2.createElement(
       "button",
       {
         "aria-label": "Remove attachment",
@@ -570,7 +718,7 @@ function ChatAttachment({
         },
         type: "button"
       },
-      React.createElement("span", { "aria-hidden": "true" }, "x")
+      React2.createElement("span", { "aria-hidden": "true" }, "x")
     ) : null
   );
 }
@@ -580,7 +728,7 @@ function ChatAttachments({
   ...props
 }) {
   if (!children) return null;
-  return React.createElement(
+  return React2.createElement(
     AttachmentGroup,
     {
       className: cn(
@@ -594,69 +742,122 @@ function ChatAttachments({
   );
 }
 
-// src/ui/marker.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_react_slot3 = require("@radix-ui/react-slot");
+// src/ui/agent-chat-actions.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var markerVariants = (0, import_class_variance_authority3.cva)(
-  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "",
-        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
-        border: "border-b border-border pb-2"
+function AgentChatDefaultActions({
+  handlers,
+  message
+}) {
+  if (!handlers || message.role !== "assistant" || message.isFinal === false) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChatMessageActions, { children: [
+    handlers.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChatMessageAction,
+      {
+        label: "Retry",
+        onClick: () => void handlers.onRetry?.(message),
+        tooltip: "Regenerate response",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.RefreshCcw, { className: "size-4" })
       }
-    }
-  }
-);
-function Marker({
+    ) : null,
+    handlers.onLike ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChatMessageAction,
+      {
+        label: "Like",
+        onClick: () => void handlers.onLike?.(message),
+        tooltip: "Like this response",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsUp, { className: "size-4", fill: handlers.liked ? "currentColor" : "none" })
+      }
+    ) : null,
+    handlers.onDislike ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChatMessageAction,
+      {
+        label: "Dislike",
+        onClick: () => void handlers.onDislike?.(message),
+        tooltip: "Dislike this response",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsDown, { className: "size-4", fill: handlers.disliked ? "currentColor" : "none" })
+      }
+    ) : null,
+    handlers.onCopy ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChatMessageAction,
+      {
+        label: "Copy",
+        onClick: () => handlers.onCopy?.(message.content || "", message.id),
+        tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
+        children: handlers.copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Copy, { className: "size-4" })
+      }
+    ) : null
+  ] });
+}
+
+// src/ui/agent-chat-message.tsx
+var React5 = __toESM(require("react"), 1);
+var import_lucide_react4 = require("lucide-react");
+
+// src/ui/agent-response-timeline.tsx
+var React4 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+
+// src/ui/mcp-connect-required-card.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var STATUS_LABELS = {
+  pending: "Connect",
+  connecting: "Connecting",
+  connected: "Connected",
+  resuming: "Resuming",
+  error: "Try again"
+};
+function McpConnectRequiredCard({
+  serverName,
+  providerKey,
+  message,
+  status = "pending",
+  disabled = false,
+  loading = false,
+  error,
+  onConnect,
   className,
-  variant = "default",
-  asChild = false,
   ...props
 }) {
-  const Comp = asChild ? import_react_slot3.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Comp,
-    {
-      "data-slot": "marker",
-      "data-variant": variant,
-      className: cn(markerVariants({ variant, className })),
-      ...props
-    }
-  );
-}
-function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
-    {
-      "data-slot": "marker-icon",
-      "aria-hidden": "true",
-      className: cn(
-        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
+  const label = String(serverName || providerKey || "MCP server").trim();
+  const isBusy = loading || status === "connecting" || status === "resuming";
+  const isConnected = status === "connected";
+  const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
     {
-      "data-slot": "marker-content",
+      "data-agents24-mcp-connect-card": true,
+      "data-status": status,
       className: cn(
-        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        "w-full rounded-lg border border-border/50 bg-muted/25 p-3 text-sm text-foreground",
         className
       ),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "shrink-0 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+              status === "pending" || status === "error" ? "border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800" : "border-border bg-background text-foreground hover:bg-muted"
+            ),
+            disabled: buttonDisabled,
+            onClick: onConnect,
+            children: STATUS_LABELS[status]
+          }
+        )
+      ] })
     }
   );
 }
 
 // src/ui/message-response.tsx
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var import_streamdown = require("streamdown");
 
 // src/streaming-text.ts
@@ -789,7 +990,7 @@ function useStreamingText({
 }
 
 // src/ui/message-response.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
   "div",
@@ -809,7 +1010,7 @@ function isMultilineCodeNode(node) {
   return node?.tagName === "code" && node.position?.start?.line !== void 0 && node.position?.end?.line !== void 0 && node.position.start.line !== node.position.end.line;
 }
 function hasBlockMarkdownChild(child) {
-  if (!React2.isValidElement(child)) {
+  if (!React3.isValidElement(child)) {
     return false;
   }
   if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
@@ -819,7 +1020,7 @@ function hasBlockMarkdownChild(child) {
   if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
     return true;
   }
-  return React2.Children.toArray(props.children).some(hasBlockMarkdownChild);
+  return React3.Children.toArray(props.children).some(hasBlockMarkdownChild);
 }
 function MessageMarkdownParagraph({
   children,
@@ -827,17 +1028,17 @@ function MessageMarkdownParagraph({
 }) {
   const domProps = { ...props };
   delete domProps.node;
-  const childArray = React2.Children.toArray(children).filter(
+  const childArray = React3.Children.toArray(children).filter(
     (child) => child !== null && child !== ""
   );
-  const isImageOnly = childArray.length === 1 && React2.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  const isImageOnly = childArray.length === 1 && React3.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
   if (isImageOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
   }
   if (childArray.some(hasBlockMarkdownChild)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...domProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...domProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...domProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
   p: MessageMarkdownParagraph
@@ -861,7 +1062,7 @@ var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
     ]
   ] : []
 ];
-var MessageResponse = React2.memo(
+var MessageResponse = React3.memo(
   ({
     children,
     className,
@@ -879,11 +1080,11 @@ var MessageResponse = React2.memo(
       maxCatchupChars: 32,
       text
     });
-    const streamdownComponents = React2.useMemo(
+    const streamdownComponents = React3.useMemo(
       () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
       [components]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_streamdown.Streamdown,
       {
         className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
@@ -897,8 +1098,543 @@ var MessageResponse = React2.memo(
   (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className && prevProps.streaming === nextProps.streaming && prevProps.streamingId === nextProps.streamingId && prevProps.components === nextProps.components
 );
 MessageResponse.displayName = "MessageResponse";
+
+// src/ui/agent-response-timeline.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CONNECT_DECISION = "connect";
+var HITL_DECISIONS = ["approve", "edit", "reject", "respond", "connect"];
+function asRecord(value) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : null;
+}
+function optionalString(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function presentationValue(part, key) {
+  const presentation = part.presentation || {};
+  const snakeKey = key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+  return optionalString(presentation[key]) || optionalString(presentation[snakeKey]);
+}
+function groupKey(part) {
+  return presentationValue(part, "groupKey");
+}
+function groupLabel(part) {
+  return presentationValue(part, "groupLabel") || toolLabel(part);
+}
+function toolLabel(part) {
+  return presentationValue(part, "activity") || presentationValue(part, "title") || part.toolName || "Tool activity";
+}
+function toolDetail(part) {
+  return presentationValue(part, "detail") || part.errorText || null;
+}
+function isActiveTool(part, activeToolId) {
+  return part.id === activeToolId || part.toolCallId === activeToolId || part.state === "input-available" || part.state === "input-streaming";
+}
+function Shimmer({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
+}
+function CompactTask({
+  children,
+  defaultOpen = false,
+  detail,
+  error,
+  label,
+  loading
+}) {
+  const [open, setOpen] = React4.useState(defaultOpen);
+  const expandable = Boolean(children || detail);
+  const content = loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shimmer, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label });
+  if (!expandable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("flex min-w-0 items-center gap-1.5 text-sm", error ? "text-destructive" : "text-muted-foreground"), children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "button",
+      {
+        "aria-expanded": open,
+        className: cn(
+          "group flex min-w-0 items-center gap-1.5 rounded-md px-0 py-0.5 text-left text-sm transition-colors hover:text-foreground",
+          error ? "text-destructive" : "text-muted-foreground"
+        ),
+        onClick: () => setOpen((value) => !value),
+        type: "button",
+        children: [
+          content,
+          open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronDown, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-70" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-1 pl-4 text-sm text-muted-foreground", children: [
+      detail ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: detail }) : null,
+      children
+    ] }) : null
+  ] });
+}
+function ToolPartRow({
+  activeToolId,
+  part
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    CompactTask,
+    {
+      defaultOpen: part.state === "output-error",
+      detail: toolDetail(part),
+      error: part.state === "output-error",
+      label: toolLabel(part),
+      loading: isActiveTool(part, activeToolId)
+    }
+  ) });
+}
+function ToolGroup({
+  activeToolId,
+  parts
+}) {
+  const loading = parts.some((part) => isActiveTool(part, activeToolId));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CompactTask, { label: groupLabel(parts[0]), loading, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-1", children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: cn("text-sm", part.state === "output-error" ? "text-destructive" : "text-muted-foreground"),
+      children: [
+        isActiveTool(part, activeToolId) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shimmer, { children: toolLabel(part) }) : toolLabel(part),
+        toolDetail(part) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1 text-xs text-muted-foreground/75", children: toolDetail(part) }) : null
+      ]
+    },
+    part.id
+  )) }) });
+}
+function collectHitlDecisions(part) {
+  const configs = Array.isArray(part.hitl.review_configs) ? part.hitl.review_configs : [];
+  const decisions = configs.flatMap((config) => {
+    const record = asRecord(config);
+    const allowed = Array.isArray(record?.allowed_decisions) ? record?.allowed_decisions : [];
+    return allowed.filter((item) => HITL_DECISIONS.includes(String(item)));
+  });
+  return Array.from(new Set(decisions));
+}
+function isMcpConnectHitl(part) {
+  const kind = `${part.hitlKind || optionalString(part.hitl.kind) || ""}`.toLowerCase();
+  const decisions = collectHitlDecisions(part);
+  return decisions.includes(CONNECT_DECISION) || kind.includes("mcp") || kind.includes("connection");
+}
+function mcpConnectLabel(part) {
+  const payload = asRecord(part.hitl.client_safe_payload);
+  const origin = asRecord(part.hitl.origin);
+  return optionalString(part.hitl.server_name) || optionalString(part.hitl.provider_name) || optionalString(payload?.server_name) || optionalString(payload?.provider_name) || optionalString(origin?.server_name) || optionalString(origin?.provider_name) || "MCP server";
+}
+function normalizedMcpStatus(status) {
+  if (status === "connecting" || status === "connected" || status === "resuming" || status === "error") return status;
+  return "pending";
+}
+function HitlPartRow({
+  getHitlActionState,
+  isLoading,
+  onHitlAction,
+  part
+}) {
+  const state = getHitlActionState?.(part);
+  const message = optionalString(part.hitl.message) || optionalString(part.hitl.text) || "Input is required to continue.";
+  if (isMcpConnectHitl(part)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      McpConnectRequiredCard,
+      {
+        error: state?.error,
+        message,
+        onConnect: onHitlAction ? () => onHitlAction(part, CONNECT_DECISION) : void 0,
+        serverName: mcpConnectLabel(part),
+        status: normalizedMcpStatus(state?.status)
+      }
+    );
+  }
+  const decisions = collectHitlDecisions(part);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageResponse, { children: message }),
+    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: decisions.map((decision) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        className: cn(
+          "min-w-24 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-60",
+          decision === "approve" || decision === "connect" ? "border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800" : "border-border bg-background text-foreground hover:bg-muted"
+        ),
+        disabled: !onHitlAction || isLoading || state?.status === "connecting" || state?.status === "resuming",
+        onClick: () => onHitlAction?.(part, decision),
+        type: "button",
+        children: decision === "connect" ? "Connect" : decision
+      },
+      decision
+    )) })
+  ] });
+}
+function DefaultPartRow({
+  activeToolId,
+  getHitlActionState,
+  isLoading,
+  message,
+  onHitlAction,
+  part
+}) {
+  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageResponse, { children: part.text });
+  if (part.kind === "tool") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolPartRow, { activeToolId, part });
+  if (part.kind === "reasoning") {
+    const label = part.text || part.label || "Thinking";
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
+  }
+  if (part.kind === "ui-blocks") {
+    if (part.state === "output-error") {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CompactTask, { label: part.state === "input-streaming" ? "Rendering UI block" : "Rendered UI block", loading: part.state === "input-streaming" });
+  }
+  if (part.kind === "hitl") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      HitlPartRow,
+      {
+        getHitlActionState,
+        isLoading,
+        onHitlAction,
+        part
+      }
+    );
+  }
+  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", children: part.errorText });
+  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  return null;
+}
+function AgentResponseTimeline({
+  getHitlActionState,
+  isLoading = false,
+  message,
+  onHitlAction,
+  renderPart
+}) {
+  const parts = message.parts || [];
+  const activeToolId = [...parts].reverse().find((part) => part.kind === "tool" && (part.state === "input-available" || part.state === "input-streaming"))?.id;
+  const rendered = [];
+  let index = 0;
+  while (index < parts.length) {
+    const part = parts[index];
+    if (part.kind === "tool" && groupKey(part)) {
+      const key = groupKey(part);
+      const group = [];
+      while (index < parts.length) {
+        const candidate = parts[index];
+        if (candidate.kind !== "tool" || groupKey(candidate) !== key) break;
+        group.push(candidate);
+        index += 1;
+      }
+      rendered.push(group.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolPartRow, { activeToolId, part: group[0] }, group[0].id) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolGroup, { activeToolId, parts: group }, `tool-group-${key}-${group[0].id}`));
+      continue;
+    }
+    rendered.push(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(React4.Fragment, { children: renderPart ? renderPart(part, message) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        DefaultPartRow,
+        {
+          activeToolId,
+          getHitlActionState,
+          isLoading,
+          message,
+          onHitlAction,
+          part
+        }
+      ) }, part.id)
+    );
+    index += 1;
+  }
+  if (rendered.length === 0 && message.content) {
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+  }
+  if (rendered.length === 0 && isLoading) {
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-muted-foreground", children: "Thinking" }, `${message.id}-thinking`));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-3", children: rendered });
+}
+
+// src/ui/agent-chat-message.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD = 360;
+var DEFAULT_USER_MESSAGE_COLLAPSED_LINES = 4;
+function shouldCollapseUserMessage(content, threshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD) {
+  return typeof threshold === "number" && threshold > 0 && content.length > threshold;
+}
+function AgentChatUserMessageContent({
+  collapsedLines = DEFAULT_USER_MESSAGE_COLLAPSED_LINES,
+  collapseThreshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD,
+  content,
+  showLessLabel = "Show less",
+  showMoreLabel = "Show more"
+}) {
+  const [isExpanded, setIsExpanded] = React5.useState(false);
+  const contentId = React5.useId();
+  const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
+  const Icon = isExpanded ? import_lucide_react4.ChevronUp : import_lucide_react4.ChevronDown;
+  const clampedStyle = shouldCollapse && !isExpanded ? {
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: Math.max(1, collapsedLines),
+    display: "-webkit-box",
+    overflow: "hidden"
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        "aria-controls": contentId,
+        "aria-expanded": isExpanded,
+        className: cn(
+          "inline-flex w-fit items-center gap-1 rounded-md text-left text-sm font-medium text-muted-foreground transition-colors",
+          "hover:text-foreground focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0"
+        ),
+        onClick: () => setIsExpanded((current) => !current),
+        type: "button",
+        children: [
+          isExpanded ? showLessLabel : showMoreLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+        ]
+      }
+    ) : null
+  ] });
+}
+function AgentChatMessage({
+  actionHandlers,
+  actions,
+  actionsClassName,
+  className,
+  contentClassName,
+  dir,
+  getHitlActionState,
+  message,
+  onHitlAction,
+  renderAssistantContent,
+  renderPart,
+  renderUserContent,
+  showAssistantAttachments = false,
+  streamingMessageId,
+  userMessageCollapsedLines,
+  userMessageContent,
+  userMessageCollapseThreshold,
+  userMessageShowLessLabel,
+  userMessageShowMoreLabel
+}) {
+  const isAssistant = message.role === "assistant";
+  const isStreaming = isAssistant && message.id === streamingMessageId;
+  const resolvedUserContent = userMessageContent ?? message.content;
+  const shouldRenderContent = isAssistant || Boolean(renderUserContent || resolvedUserContent);
+  const showAttachments = Boolean(message.attachments?.length) && (message.role === "user" || showAssistantAttachments);
+  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AgentChatDefaultActions, { handlers: actionHandlers, message }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
+    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ChatAttachment,
+      {
+        data: attachment,
+        dir: "ltr"
+      },
+      String(attachment.url || attachment.filename || index)
+    )) }) : null,
+    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      ChatMessageContent,
+      {
+        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+        dir,
+        children: [
+          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            AgentResponseTimeline,
+            {
+              getHitlActionState,
+              isLoading: isStreaming,
+              message,
+              onHitlAction,
+              renderPart
+            }
+          ) : null,
+          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            AgentChatUserMessageContent,
+            {
+              collapsedLines: userMessageCollapsedLines,
+              collapseThreshold: userMessageCollapseThreshold,
+              content: resolvedUserContent,
+              showLessLabel: userMessageShowLessLabel,
+              showMoreLabel: userMessageShowMoreLabel
+            }
+          ) : null : null
+        ]
+      }
+    ) : null,
+    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full translate-x-2" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+  ] });
+}
+
+// src/ui/bubble.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function BubbleGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+var bubbleVariants = (0, import_class_variance_authority2.cva)(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-neutral-900 *:data-[slot=bubble-content]:text-white [&>[data-slot=bubble-content]:is(button,a):hover]:bg-neutral-800",
+        secondary: "*:data-[slot=bubble-content]:bg-muted *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-muted *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot2.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Comp,
+    {
+      "data-slot": "bubble-content",
+      className: cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-neutral-300 [button,a]:focus-visible:ring-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var bubbleReactionsVariants = (0, import_class_variance_authority2.cva)(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "bubble-reactions",
+      "data-align": align,
+      "data-side": side,
+      className: cn(bubbleReactionsVariants({ side, align }), className),
+      ...props
+    }
+  );
+}
+
+// src/ui/marker.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var markerVariants = (0, import_class_variance_authority3.cva)(
+  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2"
+      }
+    }
+  }
+);
+function Marker({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot3.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Comp,
+    {
+      "data-slot": "marker",
+      "data-variant": variant,
+      className: cn(markerVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function MarkerIcon({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "span",
+    {
+      "data-slot": "marker-icon",
+      "aria-hidden": "true",
+      className: cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MarkerContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "span",
+    {
+      "data-slot": "marker-content",
+      className: cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AgentChatComposer,
+  AgentChatDefaultActions,
+  AgentChatMessage,
+  AgentChatPartRow,
+  AgentChatUserMessageContent,
+  AgentResponseTimeline,
   Attachment,
   AttachmentAction,
   AttachmentActions,
@@ -921,6 +1657,7 @@ MessageResponse.displayName = "MessageResponse";
   Marker,
   MarkerContent,
   MarkerIcon,
+  McpConnectRequiredCard,
   Message,
   MessageAction,
   MessageActions,
@@ -938,6 +1675,7 @@ MessageResponse.displayName = "MessageResponse";
   attachmentVariants,
   bubbleVariants,
   cn,
-  markerVariants
+  markerVariants,
+  shouldCollapseUserMessage
 });
 //# sourceMappingURL=index.cjs.map