@agents24/chat-react 0.3.2 → 0.4.0

package/dist/ui/index.js

@@ -1,1206 +1,48 @@
 import {
-  useStreamingText
-} from "../chunk-EWZO4QJI.js";
-import {
-  cn
-} from "../chunk-UU7OXHL3.js";
-
-// 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"
-  };
-}
-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__ */ jsxs("div", { className: cn("relative mx-auto w-full max-w-3xl overflow-visible", className), children: [
-    files.length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ 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: "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",
-      {
-        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__ */ 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__ */ jsxs("div", { style: { gridArea: "plus" }, className: "flex shrink-0 items-center justify-center", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: fileInputRef,
-                    accept,
-                    "aria-label": "Attach files",
-                    className: "hidden",
-                    multiple: true,
-                    onChange: handleFilesChange,
-                    type: "file"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "aria-label": "Attach files",
-                    className: 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: "min-w-0 w-full", children: /* @__PURE__ */ 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__ */ jsx("div", { style: { gridArea: "toolbar" }, className: "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: "flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": "Stop generating",
-                  className: 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(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: "mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
-  ] });
-}
-
-// src/ui/agent-chat-actions.tsx
-import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
-
-// src/ui/adapters.ts
-import * as React2 from "react";
+  AgentChatComposer,
+  AgentChatDefaultActions,
+  AgentChatMessage,
+  AgentChatUserMessageContent,
+  AgentResponseTimeline,
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger,
+  ChatAttachment,
+  ChatAttachments,
+  ChatMessage,
+  ChatMessageAction,
+  ChatMessageActions,
+  ChatMessageContent,
+  DefaultPartRow,
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageGroup,
+  MessageHeader,
+  MessageResponse,
+  attachmentMediaVariants,
+  attachmentVariants,
+  cn,
+  hitlActionLabel,
+  hitlTitle,
+  resolvedHitlLabel,
+  shouldCollapseUserMessage
+} from "../chunk-NLEOWTZG.js";
+import "../chunk-CHAU7FNW.js";
 
-// src/ui/attachment.tsx
+// src/ui/bubble.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
-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 max-w-[80%] flex-col gap-2",
-    isUser ? cn("is-user justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant",
-    className
-  );
-  return React2.createElement(Message, messageProps);
-}
-function ChatMessageContent({
-  className,
-  ...props
-}) {
-  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",
-      "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
-  });
-}
-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 { 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/agent-chat-message.tsx
-import * as React5 from "react";
-import { ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
-
-// src/ui/agent-response-timeline.tsx
-import * as React4 from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
-
-// src/ui/message-response.tsx
-import * as React3 from "react";
-import { defaultRehypePlugins, Streamdown } from "streamdown";
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
-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 = {
-  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,
-      {
-        allowDataImages: true,
-        allowedImagePrefixes: ["*"],
-        allowedLinkPrefixes: ["*"],
-        allowedProtocols: ["*", "reshet:", "source:"],
-        defaultOrigin: void 0
-      }
-    ]
-  ] : []
-];
-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("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", 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") return `Connect ${optionalString(presentation.server_name) || "this service"} to continue`;
-  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 { 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";
-  if (isTerminal) {
-    return /* @__PURE__ */ jsx6("div", { className: "px-1 py-1 text-sm text-muted-foreground", children: resolvedHitlLabel(part) });
-  }
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 rounded-lg bg-muted/45 px-3 py-2.5", children: [
-    /* @__PURE__ */ jsx6("div", { className: "text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
-    requireComment ? /* @__PURE__ */ jsx6(
-      "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",
-        onChange: (event) => setComment(event.target.value),
-        placeholder: "Comment required",
-        value: comment
-      }
-    ) : null,
-    state?.error ? /* @__PURE__ */ jsx6("div", { className: "text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx6(
-      "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",
-          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"
-        ),
-        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 /* @__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", children: part.errorText });
-  if (part.kind === "data") return /* @__PURE__ */ jsx6("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__ */ 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 { 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
-  ] });
-}
-
-// src/ui/bubble.tsx
-import { cva as cva2 } from "class-variance-authority";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "bubble-group",
@@ -1209,7 +51,7 @@ function BubbleGroup({ className, ...props }) {
     }
   );
 }
-var bubbleVariants = cva2(
+var bubbleVariants = 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: {
@@ -1234,7 +76,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "bubble",
@@ -1250,8 +92,8 @@ function BubbleContent({
   className,
   ...props
 }) {
-  const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx8(
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -1263,7 +105,7 @@ function BubbleContent({
     }
   );
 }
-var bubbleReactionsVariants = cva2(
+var bubbleReactionsVariants = 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: {
@@ -1288,7 +130,7 @@ function BubbleReactions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "bubble-reactions",
@@ -1301,10 +143,10 @@ function BubbleReactions({
 }
 
 // src/ui/marker.tsx
-import { cva as cva3 } from "class-variance-authority";
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var markerVariants = cva3(
+import { cva as cva2 } from "class-variance-authority";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var markerVariants = cva2(
   "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: {
@@ -1322,8 +164,8 @@ function Marker({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? Slot3 : "div";
-  return /* @__PURE__ */ jsx9(
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx2(
     Comp,
     {
       "data-slot": "marker",
@@ -1334,7 +176,7 @@ function Marker({
   );
 }
 function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       "data-slot": "marker-icon",
@@ -1348,7 +190,7 @@ function MarkerIcon({ className, ...props }) {
   );
 }
 function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       "data-slot": "marker-content",
@@ -1362,7 +204,7 @@ function MarkerContent({ className, ...props }) {
 }
 
 // src/ui/mcp-connect-required-card.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var STATUS_LABELS = {
   pending: "Connect",
   connecting: "Connecting",
@@ -1386,7 +228,7 @@ function McpConnectRequiredCard({
   const isBusy = loading || status === "connecting" || status === "resuming";
   const isConnected = status === "connected";
   const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       "data-agents24-mcp-connect-card": true,
@@ -1396,13 +238,13 @@ function McpConnectRequiredCard({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx10("div", { className: "truncate text-sm font-medium", children: label }),
-          /* @__PURE__ */ jsx10("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
-          status === "error" && error ? /* @__PURE__ */ jsx10("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ jsx3("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ jsx3("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",