@agents24/chat-react 0.3.2 → 0.5.0

package/dist/chunk-R7WFL3YR.js

@@ -0,0 +1,1327 @@
+import {
+  useStreamingText
+} from "./chunk-CHAU7FNW.js";
+
+// src/ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...values) {
+  return twMerge(clsx(values));
+}
+
+// src/ui/agent-chat-composer.tsx
+import * as React from "react";
+import { ArrowUp, Paperclip, Plus, Square, X } from "lucide-react";
+import { jsx, jsxs } from "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",
+    source: file
+  };
+}
+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-[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,
+  attachmentLayout = "flow",
+  className,
+  disabled = false,
+  inputToolbarContent,
+  isRunning = false,
+  onAttachmentCountChange,
+  onStop,
+  onSubmit,
+  placeholder = "Send follow-up\u2026",
+  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__ */ jsxs("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), children: [
+    files.length > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "agent-chat-composer-attachments",
+        "data-layout": attachmentLayout,
+        className: cn(
+          "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__ */ jsxs(
+          "div",
+          {
+            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__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ jsx(Paperclip, { className: "size-3" }) }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": `Remove ${file.filename}`,
+                  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__ */ jsx(X, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          file.id
+        ))
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-expanded": isExpanded ? "" : void 0,
+        className: cn(
+          "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__ */ jsxs(
+          "div",
+          {
+            className: "a24-composer__grid 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__ */ jsxs("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    accept,
+                    "aria-label": "Attach files",
+                    className: "hidden",
+                    multiple: true,
+                    name: "attachments",
+                    onChange: handleFilesChange,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": "Attach files",
+                    className: cn("a24-composer__attach", pillButtonClass),
+                    disabled: disabled || isSubmitting || isRunning || !allowAttachments,
+                    onClick: () => fileInputRef.current?.click(),
+                    title: "Attach files",
+                    type: "button",
+                    children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ref: setTextareaRef,
+                  "aria-label": "Message",
+                  autoComplete: "off",
+                  className: cn(
+                    "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,
+                  rows: isExpanded ? 2 : 1,
+                  value: text
+                }
+              ) }),
+              isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
+              /* @__PURE__ */ jsx("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Stop generating",
+                  className: cn("a24-composer__submit", submitButtonClass),
+                  disabled: disabled || !onStop,
+                  onClick: onStop,
+                  title: "Stop",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(Square, { className: "size-3.5 fill-current" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
+                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                  disabled: !canSubmit,
+                  onClick: () => void submit(),
+                  title: "Send",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
+  ] });
+}
+
+// src/ui/attachment.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var attachmentVariants = 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: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: {
+        default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+      }
+    }
+  }
+);
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment",
+      "data-state": state,
+      "data-size": size,
+      "data-orientation": orientation,
+      className: cn(attachmentVariants({ size, orientation }), className),
+      ...props
+    }
+  );
+}
+var attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "icon"
+    }
+  }
+);
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-media",
+      "data-variant": variant,
+      className: cn(attachmentMediaVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AttachmentContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-content",
+      className: cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      "data-slot": "attachment-title",
+      className: cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      "data-slot": "attachment-description",
+      className: cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-actions",
+      className: cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentAction({
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "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:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentTrigger({
+  className,
+  asChild = false,
+  type,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "attachment-trigger",
+      type: asChild ? void 0 : type ?? "button",
+      className: cn("absolute inset-0 z-10 outline-none", className),
+      ...props
+    }
+  );
+}
+function AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-group",
+      className: cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/message.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MessageGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message",
+      "data-align": align,
+      className: cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageAvatar({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-avatar",
+      className: cn(
+        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-content",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-header",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-footer",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/adapters.ts
+import * as React2 from "react";
+function ChatMessage(input) {
+  const { className, from, align, ...props } = input;
+  const isUser = from === "user";
+  const isRtl = props.dir === "rtl";
+  const resolvedAlign = align || "start";
+  const messageProps = Object.assign({}, props);
+  messageProps.align = resolvedAlign;
+  messageProps.className = cn(
+    "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);
+}
+function ChatMessageContent({
+  className,
+  ...props
+}) {
+  return React2.createElement("div", {
+    className: cn(
+      "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": "bubble-content",
+    ...props
+  });
+}
+function ChatMessageActions({
+  className,
+  ...props
+}) {
+  return React2.createElement("div", {
+    className: cn("flex items-center gap-1", className),
+    "data-slot": "message-actions",
+    ...props
+  });
+}
+function ChatMessageAction({
+  children,
+  className,
+  label,
+  tooltip,
+  type = "button",
+  ...props
+}) {
+  const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
+  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:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      title: tooltipLabel,
+      type,
+      ...props
+    },
+    children,
+    React2.createElement(
+      "span",
+      { className: "sr-only" },
+      label || tooltipLabel
+    )
+  );
+}
+function ChatAttachment({
+  data,
+  onRemove,
+  orientation,
+  ...props
+}) {
+  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 React2.createElement(
+    Attachment,
+    {
+      orientation: orientation || (isImage ? "vertical" : "horizontal"),
+      ...props
+    },
+    React2.createElement(
+      AttachmentMedia,
+      { variant: isImage ? "image" : "icon" },
+      isImage ? React2.createElement("img", {
+        alt: filename,
+        className: "size-full object-cover",
+        src: data.url
+      }) : React2.createElement(
+        "span",
+        { "aria-hidden": "true", className: "text-sm" },
+        filename.slice(0, 1).toUpperCase()
+      )
+    ),
+    React2.createElement(
+      AttachmentContent,
+      null,
+      React2.createElement(AttachmentTitle, null, filename),
+      React2.createElement(AttachmentDescription, null, mediaType)
+    ),
+    onRemove ? React2.createElement(
+      "button",
+      {
+        "aria-label": "Remove attachment",
+        className: "relative z-20 mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
+        type: "button"
+      },
+      React2.createElement("span", { "aria-hidden": "true" }, "x")
+    ) : null
+  );
+}
+function ChatAttachments({
+  children,
+  className,
+  ...props
+}) {
+  if (!children) return null;
+  return React2.createElement(
+    AttachmentGroup,
+    {
+      className: cn(
+        props.dir === "rtl" ? "mr-auto" : "ml-auto",
+        "w-fit flex-wrap overflow-visible",
+        className
+      ),
+      ...props
+    },
+    children
+  );
+}
+
+// src/ui/agent-chat-actions.tsx
+import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function AgentChatDefaultActions({
+  handlers,
+  message
+}) {
+  if (!handlers || message.role !== "assistant" || message.isFinal === false) return null;
+  return /* @__PURE__ */ jsxs2(ChatMessageActions, { children: [
+    handlers.onRetry ? /* @__PURE__ */ jsx4(
+      ChatMessageAction,
+      {
+        label: "Retry",
+        onClick: () => void handlers.onRetry?.(message),
+        tooltip: "Regenerate response",
+        children: /* @__PURE__ */ jsx4(RefreshCcw, { className: "size-4" })
+      }
+    ) : null,
+    handlers.onLike ? /* @__PURE__ */ jsx4(
+      ChatMessageAction,
+      {
+        label: "Like",
+        onClick: () => void handlers.onLike?.(message),
+        tooltip: "Like this response",
+        children: /* @__PURE__ */ jsx4(ThumbsUp, { className: "size-4", fill: handlers.liked ? "currentColor" : "none" })
+      }
+    ) : null,
+    handlers.onDislike ? /* @__PURE__ */ jsx4(
+      ChatMessageAction,
+      {
+        label: "Dislike",
+        onClick: () => void handlers.onDislike?.(message),
+        tooltip: "Dislike this response",
+        children: /* @__PURE__ */ jsx4(ThumbsDown, { className: "size-4", fill: handlers.disliked ? "currentColor" : "none" })
+      }
+    ) : null,
+    handlers.onCopy ? /* @__PURE__ */ jsx4(
+      ChatMessageAction,
+      {
+        label: "Copy",
+        onClick: () => handlers.onCopy?.(message.content || "", message.id),
+        tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
+        children: handlers.copied ? /* @__PURE__ */ jsx4(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "size-4" })
+      }
+    ) : null
+  ] });
+}
+
+// src/ui/message-response.tsx
+import * as React3 from "react";
+import { defaultRehypePlugins, Streamdown } from "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/ui/message-response.tsx
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+function SafeMarkdownLink({ children, href, ...props }) {
+  const domProps = { ...props };
+  delete domProps.node;
+  const safeHref = safeChatMarkdownHref(href);
+  if (!safeHref) return /* @__PURE__ */ jsx5("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ jsx5("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ jsx5("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+}
+function BlockedMarkdownImage({ alt }) {
+  return alt ? /* @__PURE__ */ jsx5("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+}
+var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
+  "blockquote",
+  "div",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "ol",
+  "pre",
+  "table",
+  "ul"
+]);
+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 (!React3.isValidElement(child)) {
+    return false;
+  }
+  if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
+    return true;
+  }
+  const props = child.props;
+  if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
+    return true;
+  }
+  return React3.Children.toArray(props.children).some(hasBlockMarkdownChild);
+}
+function MessageMarkdownParagraph({
+  children,
+  ...props
+}) {
+  const domProps = { ...props };
+  delete domProps.node;
+  const childArray = React3.Children.toArray(children).filter(
+    (child) => child !== null && child !== ""
+  );
+  const isImageOnly = childArray.length === 1 && React3.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  if (isImageOnly) {
+    return /* @__PURE__ */ jsx5(Fragment, { children });
+  }
+  if (childArray.some(hasBlockMarkdownChild)) {
+    return /* @__PURE__ */ jsx5("div", { ...domProps, children });
+  }
+  return /* @__PURE__ */ jsx5("p", { ...domProps, children });
+}
+var MESSAGE_RESPONSE_COMPONENTS = {
+  a: SafeMarkdownLink,
+  img: BlockedMarkdownImage,
+  p: MessageMarkdownParagraph
+};
+var streamdownDefaultRehypePlugins = defaultRehypePlugins || {};
+var streamdownHardenPlugin = Array.isArray(
+  streamdownDefaultRehypePlugins.harden
+) ? streamdownDefaultRehypePlugins.harden[0] : streamdownDefaultRehypePlugins.harden;
+var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
+  ...Object.entries(streamdownDefaultRehypePlugins).filter(([key]) => key !== "harden").map(([, plugin]) => plugin),
+  ...streamdownHardenPlugin ? [
+    [
+      streamdownHardenPlugin,
+      CHAT_MARKDOWN_HARDEN_OPTIONS
+    ]
+  ] : []
+];
+var MessageResponse = React3.memo(
+  ({
+    children,
+    className,
+    components,
+    rehypePlugins,
+    streaming = false,
+    streamingId,
+    ...props
+  }) => {
+    const text = typeof children === "string" || typeof children === "number" ? String(children) : "";
+    const streamingText = useStreamingText({
+      charsPerSecond: 120,
+      id: streamingId || text,
+      isStreaming: streaming && text.length > 0,
+      maxCatchupChars: 32,
+      text
+    });
+    const streamdownComponents = React3.useMemo(
+      () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
+      [components]
+    );
+    return /* @__PURE__ */ jsx5(
+      Streamdown,
+      {
+        className: cn("a24-message-response", className),
+        components: streamdownComponents,
+        rehypePlugins: rehypePlugins || MESSAGE_RESPONSE_REHYPE_PLUGINS,
+        ...props,
+        children: text ? streamingText.displayedText : children
+      }
+    );
+  },
+  (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/hitl-presentation.ts
+function optionalString(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function hitlActionLabel(part, action) {
+  if (action === "approve") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Allow once" : "Approve";
+  if (action === "reject") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Don\u2019t allow" : "Reject";
+  if (action === "connect") return "Connect";
+  return "Skip";
+}
+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") {
+    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;
+}
+function resolvedHitlLabel(part) {
+  const outcome = String(part.resolution?.outcome || part.status).trim().toLowerCase();
+  return {
+    approved: part.hitlKind === "user_approval" ? "Approved" : "Allowed",
+    rejected: part.hitlKind === "user_approval" ? "Rejected" : "Not allowed",
+    connected: "connected",
+    skipped: "Skipped",
+    timeout: "Timed out",
+    expired: "Timed out",
+    cancelled: "Cancelled",
+    invalidated: "No longer available",
+    policy_denied: "Not allowed"
+  }[outcome] || outcome.replace(/_/g, " ");
+}
+
+// src/ui/agent-response-timeline.tsx
+import * as React4 from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function optionalString2(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 optionalString2(presentation[key]) || optionalString2(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__ */ jsx6("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__ */ jsx6(Shimmer, { children: label }) : /* @__PURE__ */ jsx6("span", { children: label });
+  if (!expandable) {
+    return /* @__PURE__ */ jsx6("div", { className: cn("flex min-w-0 items-center gap-1.5 text-sm", error ? "text-destructive" : "text-muted-foreground"), children: content });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs3(
+      "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__ */ jsx6(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx6(ChevronRight, { className: "size-3 opacity-70" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs3("div", { className: "mt-1 pl-4 text-sm text-muted-foreground", children: [
+      detail ? /* @__PURE__ */ jsx6("div", { children: detail }) : null,
+      children
+    ] }) : null
+  ] });
+}
+function ToolPartRow({
+  activeToolId,
+  part
+}) {
+  return /* @__PURE__ */ jsx6("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ jsx6(
+    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__ */ jsx6(CompactTask, { label: groupLabel(parts[0]), loading, children: /* @__PURE__ */ jsx6("div", { className: "space-y-1", children: parts.map((part) => /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn("text-sm", part.state === "output-error" ? "text-destructive" : "text-muted-foreground"),
+      children: [
+        isActiveTool(part, activeToolId) ? /* @__PURE__ */ jsx6(Shimmer, { children: toolLabel(part) }) : toolLabel(part),
+        toolDetail(part) ? /* @__PURE__ */ jsx6("span", { className: "ml-1 text-xs text-muted-foreground/75", children: toolDetail(part) }) : null
+      ]
+    },
+    part.id
+  )) }) });
+}
+function HitlPartRow({
+  getHitlActionState,
+  isLoading,
+  onHitlAction,
+  part
+}) {
+  const state = getHitlActionState?.(part);
+  const [comment, setComment] = React4.useState("");
+  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__ */ jsx6("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__ */ jsxs3("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ jsx6("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ jsx6(
+      "textarea",
+      {
+        "aria-label": "Approval comment",
+        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\u2026",
+        value: comment
+      }
+    ) : null,
+    state?.error ? /* @__PURE__ */ jsx6("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ jsx6("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx6(
+      "button",
+      {
+        "aria-label": hitlActionLabel(part, action),
+        className: cn(
+          "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",
+        children: hitlActionLabel(part, action)
+      },
+      action
+    )) })
+  ] });
+}
+function DefaultPartRow({
+  activeToolId,
+  getHitlActionState,
+  isLoading,
+  message,
+  onHitlAction,
+  part
+}) {
+  if (part.kind === "text") return /* @__PURE__ */ jsx6(MessageResponse, { children: part.text });
+  if (part.kind === "tool") return /* @__PURE__ */ jsx6(ToolPartRow, { activeToolId, part });
+  if (part.kind === "reasoning") {
+    const label = part.text || part.label || "Thinking";
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ jsx6(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ jsx6("div", { className: "text-sm text-muted-foreground", children: label });
+  }
+  if (part.kind === "ui-blocks") {
+    if (part.state === "output-error") {
+      return /* @__PURE__ */ jsx6("div", { className: "text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+    }
+    return part.bundle ? /* @__PURE__ */ jsx6(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ jsx6(CompactTask, { label: part.state === "input-streaming" ? "Rendering UI block" : "Rendered UI block", loading: part.state === "input-streaming" });
+  }
+  if (part.kind === "hitl") {
+    return /* @__PURE__ */ jsx6(
+      HitlPartRow,
+      {
+        getHitlActionState,
+        isLoading,
+        onHitlAction,
+        part
+      }
+    );
+  }
+  if (part.kind === "error") return /* @__PURE__ */ jsx6("div", { className: "text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "source") {
+    const href = safeExternalUrl(part.url);
+    return href ? /* @__PURE__ */ jsx6("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ jsx6("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__ */ jsx6("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ jsx6("span", { className: "a24-citation", children: label });
+  }
+  if (part.kind === "attachment") return /* @__PURE__ */ jsx6("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ jsx6("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__ */ jsxs3("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ jsx6("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__ */ jsx6("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__ */ jsxs3("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ jsx6("h4", { children: title }),
+            /* @__PURE__ */ jsx6("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ jsxs3("table", { children: [
+              /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ jsx6("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ jsx6("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ jsx6("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ jsx6("td", { children: String(cell) }, cellIndex)) }, index)) })
+            ] }) })
+          ] }, String(block.id || blockIndex));
+        }
+        const value = block.value ?? block.text ?? "";
+        return /* @__PURE__ */ jsxs3("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ jsx6("h4", { children: title }),
+          /* @__PURE__ */ jsx6("p", { children: String(value) })
+        ] }, String(block.id || blockIndex));
+      }) }, `row-${rowIndex}`);
+    })
+  ] });
+}
+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__ */ jsx6(ToolPartRow, { activeToolId, part: group[0] }, group[0].id) : /* @__PURE__ */ jsx6(ToolGroup, { activeToolId, parts: group }, `tool-group-${key}-${group[0].id}`));
+      continue;
+    }
+    rendered.push(
+      /* @__PURE__ */ jsx6(React4.Fragment, { children: renderPart ? renderPart(part, message) : /* @__PURE__ */ jsx6(
+        DefaultPartRow,
+        {
+          activeToolId,
+          getHitlActionState,
+          isLoading,
+          message,
+          onHitlAction,
+          part
+        }
+      ) }, part.id)
+    );
+    index += 1;
+  }
+  if (rendered.length === 0 && message.content) {
+    rendered.push(/* @__PURE__ */ jsx6(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+  }
+  if (rendered.length === 0 && isLoading) {
+    rendered.push(/* @__PURE__ */ jsx6("div", { className: "text-sm text-muted-foreground", children: "Thinking" }, `${message.id}-thinking`));
+  }
+  return /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: rendered });
+}
+
+// src/ui/agent-chat-message.tsx
+import * as React5 from "react";
+import { ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs4 } from "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 ? ChevronUp : ChevronDown2;
+  const clampedStyle = shouldCollapse && !isExpanded ? {
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: Math.max(1, collapsedLines),
+    display: "-webkit-box",
+    overflow: "hidden"
+  } : void 0;
+  return /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ jsx7("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ jsxs4(
+      "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__ */ jsx7(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__ */ jsx7(AgentChatDefaultActions, { handlers: actionHandlers, message }) : null);
+  return /* @__PURE__ */ jsxs4(ChatMessage, { className, dir, from: message.role, children: [
+    showAttachments ? /* @__PURE__ */ jsx7(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ jsx7(
+      ChatAttachment,
+      {
+        data: attachment,
+        dir: "ltr"
+      },
+      String(attachment.url || attachment.filename || index)
+    )) }) : null,
+    shouldRenderContent ? /* @__PURE__ */ jsxs4(
+      ChatMessageContent,
+      {
+        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+        dir,
+        children: [
+          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx7(
+            AgentResponseTimeline,
+            {
+              getHitlActionState,
+              isLoading: isStreaming,
+              message,
+              onHitlAction,
+              renderPart
+            }
+          ) : null,
+          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx7(
+            AgentChatUserMessageContent,
+            {
+              collapsedLines: userMessageCollapsedLines,
+              collapseThreshold: userMessageCollapseThreshold,
+              content: resolvedUserContent,
+              showLessLabel: userMessageShowLessLabel,
+              showMoreLabel: userMessageShowMoreLabel
+            }
+          ) : null : null
+        ]
+      }
+    ) : null,
+    renderedActions ? /* @__PURE__ */ jsx7("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
+  ] });
+}
+
+export {
+  cn,
+  AgentChatComposer,
+  attachmentVariants,
+  Attachment,
+  attachmentMediaVariants,
+  AttachmentMedia,
+  AttachmentContent,
+  AttachmentTitle,
+  AttachmentDescription,
+  AttachmentActions,
+  AttachmentAction,
+  AttachmentTrigger,
+  AttachmentGroup,
+  MessageGroup,
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageHeader,
+  MessageFooter,
+  ChatMessage,
+  ChatMessageContent,
+  ChatMessageActions,
+  ChatMessageAction,
+  ChatAttachment,
+  ChatAttachments,
+  AgentChatDefaultActions,
+  MessageResponse,
+  hitlActionLabel,
+  hitlTitle,
+  resolvedHitlLabel,
+  DefaultPartRow,
+  AgentResponseTimeline,
+  shouldCollapseUserMessage,
+  AgentChatUserMessageContent,
+  AgentChatMessage
+};
+//# sourceMappingURL=chunk-R7WFL3YR.js.map