@agents24/chat-react 0.3.2 → 0.5.0

package/dist/ui/attachment.d.ts

@@ -6,18 +6,18 @@ declare const attachmentVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
     state?: "idle" | "uploading" | "processing" | "error" | "done";
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
     variant?: "image" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
-declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AttachmentAction({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AttachmentAction({ className, type, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
 declare function AttachmentTrigger({ className, asChild, type, ...props }: React.ComponentProps<"button"> & {
     asChild?: boolean;
-}): React.JSX.Element;
-declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, attachmentVariants, attachmentMediaVariants, };

package/dist/ui/bubble.d.ts

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
     variant?: "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare function BubbleContent({ asChild, className, ...props }: React.ComponentProps<"div"> & {
     asChild?: boolean;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare function BubbleReactions({ side, align, className, ...props }: React.ComponentProps<"div"> & {
     align?: "start" | "end";
     side?: "top" | "bottom";
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export { BubbleGroup, Bubble, BubbleContent, BubbleReactions, bubbleVariants };

package/dist/ui/index.cjs

@@ -104,7 +104,8 @@ function createComposerFile(file) {
     type: "file",
     url: URL.createObjectURL(file),
     filename: file.name || "attachment",
-    mediaType: file.type || "application/octet-stream"
+    mediaType: file.type || "application/octet-stream",
+    source: file
   };
 }
 function revokeComposerFiles(files) {
@@ -120,7 +121,7 @@ function formatFileCount(files) {
   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";
+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-[background-color,color,opacity,transform] 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,
@@ -132,7 +133,7 @@ function AgentChatComposer({
   onAttachmentCountChange,
   onStop,
   onSubmit,
-  placeholder = "Send follow-up",
+  placeholder = "Send follow-up\u2026",
   textareaRef
 }) {
   const fileInputRef = React.useRef(null);
@@ -206,19 +207,20 @@ function AgentChatComposer({
       void submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("relative mx-auto w-full max-w-3xl overflow-visible", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("a24-composer 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",
+        "data-layout": attachmentLayout,
         className: cn(
-          "flex min-w-0 gap-2 py-1",
+          "a24-composer__attachments 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",
+            className: "a24-composer__attachment 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 }),
@@ -226,7 +228,7 @@ function AgentChatComposer({
                 "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",
+                  className: "a24-composer__attachment-remove 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" })
@@ -241,14 +243,15 @@ function AgentChatComposer({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
+        "data-expanded": isExpanded ? "" : void 0,
         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",
+          "a24-composer__surface 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",
+            className: "a24-composer__grid w-full",
             style: {
               alignItems: "center",
               display: "grid",
@@ -257,7 +260,7 @@ function AgentChatComposer({
               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.jsxs)("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "input",
                   {
@@ -266,6 +269,7 @@ function AgentChatComposer({
                     "aria-label": "Attach files",
                     className: "hidden",
                     multiple: true,
+                    name: "attachments",
                     onChange: handleFilesChange,
                     type: "file"
                   }
@@ -274,7 +278,7 @@ function AgentChatComposer({
                   "button",
                   {
                     "aria-label": "Attach files",
-                    className: pillButtonClass,
+                    className: cn("a24-composer__attach", pillButtonClass),
                     disabled: disabled || isSubmitting || isRunning || !allowAttachments,
                     onClick: () => fileInputRef.current?.click(),
                     title: "Attach files",
@@ -283,16 +287,18 @@ function AgentChatComposer({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "textarea" }, className: "min-w-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "textarea",
                 {
                   ref: setTextareaRef,
                   "aria-label": "Message",
+                  autoComplete: "off",
                   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",
+                    "a24-composer__textarea 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,
+                  name: "message",
                   onChange: (event) => setText(event.target.value),
                   onKeyDown: handleKeyDown,
                   placeholder,
@@ -300,14 +306,14 @@ function AgentChatComposer({
                   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: "toolbar" }, className: "a24-composer__toolbar 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)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "button",
                 {
                   "aria-label": "Stop generating",
-                  className: submitButtonClass,
+                  className: cn("a24-composer__submit", submitButtonClass),
                   disabled: disabled || !onStop,
                   onClick: onStop,
                   title: "Stop",
@@ -318,7 +324,7 @@ function AgentChatComposer({
                 "button",
                 {
                   "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
-                  className: cn(submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
                   disabled: !canSubmit,
                   onClick: () => void submit(),
                   title: "Send",
@@ -331,7 +337,7 @@ function AgentChatComposer({
         )
       }
     ),
-    !isExpanded && inputToolbarContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
   ] });
 }
 
@@ -615,8 +621,8 @@ function ChatMessage(input) {
   const messageProps = Object.assign({}, props);
   messageProps.align = resolvedAlign;
   messageProps.className = cn(
-    "group flex w-full max-w-[80%] flex-col gap-2",
-    isUser ? cn("is-user justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant",
+    "group flex w-full flex-col gap-2",
+    isUser ? cn("is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant max-w-full",
     className
   );
   return React2.createElement(Message, messageProps);
@@ -627,13 +633,13 @@ function ChatMessageContent({
 }) {
   return React2.createElement("div", {
     className: cn(
-      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm",
+      "is-user:dark flex w-full max-w-full min-w-0 flex-col gap-2 overflow-hidden 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]:text-foreground",
       props.dir === "rtl" ? "group-[.is-user]:mr-auto" : "group-[.is-user]:ml-auto",
       className
     ),
-    "data-slot": "message-content",
+    "data-slot": "bubble-content",
     ...props
   });
 }
@@ -804,6 +810,27 @@ var import_lucide_react3 = require("lucide-react");
 var React3 = __toESM(require("react"), 1);
 var import_streamdown = require("streamdown");
 
+// src/active-content.ts
+var CHAT_MARKDOWN_HARDEN_OPTIONS = Object.freeze({
+  allowDataImages: false,
+  allowedImagePrefixes: [],
+  allowedLinkPrefixes: ["*"],
+  allowedProtocols: [],
+  defaultOrigin: void 0,
+  imageBlockPolicy: "text-only",
+  linkBlockPolicy: "text-only"
+});
+function safeChatMarkdownHref(value) {
+  if (!value) return void 0;
+  if (value.startsWith("#")) return value;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+
 // src/streaming-text.ts
 var import_react = require("react");
 var DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;
@@ -830,7 +857,7 @@ function useStreamingText({
   const cacheAdapter = cache === false ? null : cache;
   const [displayedText, setDisplayedText] = (0, import_react.useState)(() => {
     const cachedText = cacheAdapter?.get(id);
-    return isStreaming && cachedText !== text ? "" : text;
+    return cachedText && text.startsWith(cachedText) ? cachedText : text;
   });
   const targetRef = (0, import_react.useRef)(text);
   const displayedRef = (0, import_react.useRef)(displayedText);
@@ -849,7 +876,7 @@ function useStreamingText({
     if (idRef.current === id) return;
     idRef.current = id;
     const cachedText = cacheAdapter?.get(id);
-    const initial = isStreaming && cachedText !== text ? "" : text;
+    const initial = cachedText && text.startsWith(cachedText) ? cachedText : text;
     shouldAnimateRef.current = isStreaming && initial !== text;
     displayedRef.current = initial;
     setDisplayedText(initial);
@@ -935,6 +962,17 @@ function useStreamingText({
 
 // src/ui/message-response.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function SafeMarkdownLink({ children, href, ...props }) {
+  const domProps = { ...props };
+  delete domProps.node;
+  const safeHref = safeChatMarkdownHref(href);
+  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+}
+function BlockedMarkdownImage({ alt }) {
+  return alt ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+}
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
   "div",
@@ -985,6 +1023,8 @@ function MessageMarkdownParagraph({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
+  a: SafeMarkdownLink,
+  img: BlockedMarkdownImage,
   p: MessageMarkdownParagraph
 };
 var streamdownDefaultRehypePlugins = import_streamdown.defaultRehypePlugins || {};
@@ -996,13 +1036,7 @@ var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
   ...streamdownHardenPlugin ? [
     [
       streamdownHardenPlugin,
-      {
-        allowDataImages: true,
-        allowedImagePrefixes: ["*"],
-        allowedLinkPrefixes: ["*"],
-        allowedProtocols: ["*", "reshet:", "source:"],
-        defaultOrigin: void 0
-      }
+      CHAT_MARKDOWN_HARDEN_OPTIONS
     ]
   ] : []
 ];
@@ -1031,7 +1065,7 @@ var MessageResponse = React3.memo(
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_streamdown.Streamdown,
       {
-        className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+        className: cn("a24-message-response", className),
         components: streamdownComponents,
         rehypePlugins: rehypePlugins || MESSAGE_RESPONSE_REHYPE_PLUGINS,
         ...props,
@@ -1056,7 +1090,10 @@ function hitlActionLabel(part, action) {
 function hitlTitle(part) {
   const presentation = part.presentation || {};
   if (part.hitlKind === "tool_review") return `Run ${optionalString(presentation.tool_name) || "this tool"}?`;
-  if (part.hitlKind === "mcp_auth") return `Connect ${optionalString(presentation.server_name) || "this service"} to continue`;
+  if (part.hitlKind === "mcp_auth") {
+    const serverName = optionalString(presentation.server_name);
+    return serverName ? `Connect ${serverName} to continue` : part.message;
+  }
   if (part.hitlKind === "app_data_permission") return "Allow this data change?";
   return part.message;
 }
@@ -1065,7 +1102,7 @@ function resolvedHitlLabel(part) {
   return {
     approved: part.hitlKind === "user_approval" ? "Approved" : "Allowed",
     rejected: part.hitlKind === "user_approval" ? "Rejected" : "Not allowed",
-    connected: "Connected",
+    connected: "connected",
     skipped: "Skipped",
     timeout: "Timed out",
     expired: "Timed out",
@@ -1183,30 +1220,39 @@ function HitlPartRow({
   const presentation = part.presentation || {};
   const requireComment = presentation.require_comment === true;
   const isTerminal = part.status !== "pending";
+  const resolvedRef = React4.useRef(null);
+  const wasTerminal = React4.useRef(isTerminal);
+  React4.useEffect(() => {
+    if (isTerminal && !wasTerminal.current) resolvedRef.current?.focus();
+    wasTerminal.current = isTerminal;
+  }, [isTerminal]);
   if (isTerminal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-1 py-1 text-sm text-muted-foreground", children: resolvedHitlLabel(part) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-hitl a24-hitl--resolved px-1 py-1 text-sm text-muted-foreground", ref: resolvedRef, role: "status", tabIndex: -1, children: resolvedHitlLabel(part) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-2.5 rounded-lg bg-muted/45 px-3 py-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
     requireComment ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "textarea",
       {
         "aria-label": "Approval comment",
-        className: "min-h-20 w-full resize-y rounded-md border border-border/60 bg-background px-3 py-2 text-sm outline-none focus-visible:border-neutral-300 focus-visible:ring-0 dark:focus-visible:border-neutral-600",
+        autoComplete: "off",
+        className: "a24-hitl__comment min-h-20 w-full resize-y rounded-md border border-border/60 bg-background px-3 py-2 text-sm outline-none focus-visible:border-neutral-300 focus-visible:ring-0 dark:focus-visible:border-neutral-600",
+        name: "hitl-comment",
         onChange: (event) => setComment(event.target.value),
-        placeholder: "Comment required",
+        placeholder: "Comment required\u2026",
         value: comment
       }
     ) : null,
-    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         "aria-label": hitlActionLabel(part, action),
         className: cn(
-          "min-h-10 rounded-md px-3 text-sm font-medium transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:pointer-events-none disabled:opacity-60",
+          "a24-hitl__action min-h-10 rounded-md px-3 text-sm font-medium transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:pointer-events-none disabled:opacity-60",
           action === "approve" || action === "connect" ? "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white" : "bg-transparent text-muted-foreground hover:bg-background/80 hover:text-foreground"
         ),
+        "data-primary": action === "approve" || action === "connect" ? "" : void 0,
         disabled: !onHitlAction || isLoading || state?.status === "connecting" || state?.status === "resuming" || requireComment && !comment.trim(),
         onClick: () => onHitlAction?.(part, action, comment.trim() || void 0),
         type: "button",
@@ -1234,7 +1280,7 @@ function DefaultPartRow({
     if (part.state === "output-error") {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CompactTask, { label: part.state === "input-streaming" ? "Rendering UI block" : "Rendered UI block", loading: part.state === "input-streaming" });
+    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(
@@ -1247,10 +1293,58 @@ function DefaultPartRow({
       }
     );
   }
-  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", children: part.errorText });
+  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "source") {
+    const href = safeExternalUrl(part.url);
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "a24-source-link", children: part.title });
+  }
+  if (part.kind === "citation") {
+    const href = safeExternalUrl(part.url);
+    const label = part.label || "Citation";
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "a24-citation", children: label });
+  }
+  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
   if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
   return null;
 }
+function safeExternalUrl(value) {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+function SafeUiBlocks({ bundle }) {
+  const rows = Array.isArray(bundle.rows) ? bundle.rows : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: bundle.title }) : null,
+    rows.map((rawRow, rowIndex) => {
+      const row = rawRow && typeof rawRow === "object" && !Array.isArray(rawRow) ? rawRow : {};
+      const blocks = Array.isArray(row.blocks) ? row.blocks : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
+        const block = rawBlock && typeof rawBlock === "object" && !Array.isArray(rawBlock) ? rawBlock : {};
+        const title = typeof block.title === "string" ? block.title : "Result";
+        const kind = String(block.kind || "note");
+        if (kind === "table" && Array.isArray(block.columns) && Array.isArray(block.rows)) {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
+            ] }) })
+          ] }, String(block.id || blockIndex));
+        }
+        const value = block.value ?? block.text ?? "";
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: String(value) })
+        ] }, String(block.id || blockIndex));
+      }) }, `row-${rowIndex}`);
+    })
+  ] });
+}
 function AgentResponseTimeline({
   getHitlActionState,
   isLoading = false,