@agents24/chat-react 0.1.7 → 0.1.8

package/dist/ui/index.cjs

@@ -0,0 +1,943 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/index.ts
+var ui_exports = {};
+__export(ui_exports, {
+  Attachment: () => Attachment,
+  AttachmentAction: () => AttachmentAction,
+  AttachmentActions: () => AttachmentActions,
+  AttachmentContent: () => AttachmentContent,
+  AttachmentDescription: () => AttachmentDescription,
+  AttachmentGroup: () => AttachmentGroup,
+  AttachmentMedia: () => AttachmentMedia,
+  AttachmentTitle: () => AttachmentTitle,
+  AttachmentTrigger: () => AttachmentTrigger,
+  Bubble: () => Bubble,
+  BubbleContent: () => BubbleContent,
+  BubbleGroup: () => BubbleGroup,
+  BubbleReactions: () => BubbleReactions,
+  ChatAttachment: () => ChatAttachment,
+  ChatAttachments: () => ChatAttachments,
+  ChatMessage: () => ChatMessage,
+  ChatMessageAction: () => ChatMessageAction,
+  ChatMessageActions: () => ChatMessageActions,
+  ChatMessageContent: () => ChatMessageContent,
+  Marker: () => Marker,
+  MarkerContent: () => MarkerContent,
+  MarkerIcon: () => MarkerIcon,
+  Message: () => ChatMessage,
+  MessageAction: () => ChatMessageAction,
+  MessageActions: () => ChatMessageActions,
+  MessageAttachment: () => ChatAttachment,
+  MessageAttachments: () => ChatAttachments,
+  MessageAvatar: () => MessageAvatar,
+  MessageContent: () => ChatMessageContent,
+  MessageFooter: () => MessageFooter,
+  MessageGroup: () => MessageGroup,
+  MessageHeader: () => MessageHeader,
+  MessageResponse: () => MessageResponse,
+  ShadcnMessage: () => Message,
+  ShadcnMessageContent: () => MessageContent,
+  attachmentMediaVariants: () => attachmentMediaVariants,
+  attachmentVariants: () => attachmentVariants,
+  bubbleVariants: () => bubbleVariants,
+  cn: () => cn,
+  markerVariants: () => markerVariants
+});
+module.exports = __toCommonJS(ui_exports);
+
+// src/ui/adapters.ts
+var React = __toESM(require("react"), 1);
+
+// src/ui/attachment.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+
+// src/ui/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...values) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(values));
+}
+
+// src/ui/attachment.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var attachmentVariants = (0, import_class_variance_authority.cva)(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "attachment",
+      "data-state": state,
+      "data-size": size,
+      "data-orientation": orientation,
+      className: cn(attachmentVariants({ size, orientation }), className),
+      ...props
+    }
+  );
+}
+var attachmentMediaVariants = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "attachment-media",
+      "data-variant": variant,
+      className: cn(attachmentMediaVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AttachmentContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "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__ */ (0, import_jsx_runtime.jsx)(
+    "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__ */ (0, import_jsx_runtime.jsx)(
+    "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__ */ (0, import_jsx_runtime.jsx)(
+    "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__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      "data-slot": "attachment-action",
+      type,
+      className: cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentTrigger({
+  className,
+  asChild = false,
+  type,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    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__ */ (0, import_jsx_runtime.jsx)(
+    "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/bubble.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function BubbleGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+var bubbleVariants = (0, import_class_variance_authority2.cva)(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot2.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Comp,
+    {
+      "data-slot": "bubble-content",
+      className: cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var bubbleReactionsVariants = (0, import_class_variance_authority2.cva)(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "bubble-reactions",
+      "data-align": align,
+      "data-side": side,
+      className: cn(bubbleReactionsVariants({ side, align }), className),
+      ...props
+    }
+  );
+}
+
+// src/ui/message.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MessageGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+    "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 flex-col gap-2 overflow-visible",
+    isUser ? cn("is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant max-w-full",
+    className
+  );
+  return React.createElement(Message, messageProps);
+}
+function ChatMessageContent({
+  className,
+  ...props
+}) {
+  return React.createElement(BubbleContent, {
+    className: cn(
+      "flex w-full max-w-full min-w-0 flex-col gap-2 text-sm",
+      "group-[.is-user]:w-fit group-[.is-user]:overflow-visible group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "group-[.is-assistant]:w-full group-[.is-assistant]:max-w-full group-[.is-assistant]:overflow-hidden group-[.is-assistant]:text-foreground",
+      props.dir === "rtl" ? "group-[.is-assistant]:pr-0" : "group-[.is-assistant]:pl-0",
+      props.dir === "rtl" ? "group-[.is-user]:mr-auto" : "group-[.is-user]:ml-auto",
+      className
+    ),
+    ...props
+  });
+}
+function ChatMessageActions({
+  className,
+  ...props
+}) {
+  return React.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 React.createElement(
+    "button",
+    {
+      "aria-label": label || tooltipLabel,
+      className: cn(
+        "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      title: tooltipLabel,
+      type,
+      ...props
+    },
+    children,
+    React.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 React.createElement(
+    Attachment,
+    {
+      orientation: orientation || (isImage ? "vertical" : "horizontal"),
+      ...props
+    },
+    React.createElement(
+      AttachmentMedia,
+      { variant: isImage ? "image" : "icon" },
+      isImage ? React.createElement("img", {
+        alt: filename,
+        className: "size-full object-cover",
+        src: data.url
+      }) : React.createElement(
+        "span",
+        { "aria-hidden": "true", className: "text-sm" },
+        filename.slice(0, 1).toUpperCase()
+      )
+    ),
+    React.createElement(
+      AttachmentContent,
+      null,
+      React.createElement(AttachmentTitle, null, filename),
+      React.createElement(AttachmentDescription, null, mediaType)
+    ),
+    onRemove ? React.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"
+      },
+      React.createElement("span", { "aria-hidden": "true" }, "x")
+    ) : null
+  );
+}
+function ChatAttachments({
+  children,
+  className,
+  ...props
+}) {
+  if (!children) return null;
+  return React.createElement(
+    AttachmentGroup,
+    {
+      className: cn(
+        props.dir === "rtl" ? "mr-auto" : "ml-auto",
+        "w-fit flex-wrap overflow-visible",
+        className
+      ),
+      ...props
+    },
+    children
+  );
+}
+
+// src/ui/marker.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var markerVariants = (0, import_class_variance_authority3.cva)(
+  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2"
+      }
+    }
+  }
+);
+function Marker({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot3.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Comp,
+    {
+      "data-slot": "marker",
+      "data-variant": variant,
+      className: cn(markerVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function MarkerIcon({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      "data-slot": "marker-icon",
+      "aria-hidden": "true",
+      className: cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MarkerContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      "data-slot": "marker-content",
+      className: cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/message-response.tsx
+var React2 = __toESM(require("react"), 1);
+var import_streamdown = require("streamdown");
+
+// src/streaming-text.ts
+var import_react = require("react");
+var DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;
+var defaultCompletedTextCache = /* @__PURE__ */ new Map();
+var defaultStreamingTextCache = {
+  get: (id) => defaultCompletedTextCache.get(id),
+  set: (id, text) => {
+    defaultCompletedTextCache.set(id, text);
+    if (defaultCompletedTextCache.size > DEFAULT_COMPLETED_TEXT_CACHE_SIZE) {
+      const firstKey = defaultCompletedTextCache.keys().next().value;
+      if (firstKey) defaultCompletedTextCache.delete(firstKey);
+    }
+  }
+};
+function useStreamingText({
+  id,
+  isStreaming,
+  text,
+  cache = defaultStreamingTextCache,
+  charsPerSecond = 72,
+  catchupThreshold = 40,
+  maxCatchupChars = 20
+}) {
+  const cacheAdapter = cache === false ? null : cache;
+  const [displayedText, setDisplayedText] = (0, import_react.useState)(() => {
+    const cachedText = cacheAdapter?.get(id);
+    return isStreaming && cachedText !== text ? "" : text;
+  });
+  const targetRef = (0, import_react.useRef)(text);
+  const displayedRef = (0, import_react.useRef)(displayedText);
+  const rafRef = (0, import_react.useRef)(null);
+  const lastFrameAtRef = (0, import_react.useRef)(null);
+  const idRef = (0, import_react.useRef)(id);
+  const shouldAnimateRef = (0, import_react.useRef)(isStreaming);
+  (0, import_react.useEffect)(() => {
+    if (isStreaming || !text) return;
+    cacheAdapter?.set(id, text);
+  }, [cacheAdapter, id, isStreaming, text]);
+  (0, import_react.useEffect)(() => {
+    targetRef.current = text;
+  }, [text]);
+  (0, import_react.useEffect)(() => {
+    if (idRef.current === id) return;
+    idRef.current = id;
+    const cachedText = cacheAdapter?.get(id);
+    const initial = isStreaming && cachedText !== text ? "" : text;
+    shouldAnimateRef.current = isStreaming && initial !== text;
+    displayedRef.current = initial;
+    setDisplayedText(initial);
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    lastFrameAtRef.current = null;
+  }, [cacheAdapter, id, isStreaming, text]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    const cachedText = cacheAdapter?.get(id);
+    if (cachedText === text) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    if (isStreaming) {
+      shouldAnimateRef.current = true;
+    }
+    if (!shouldAnimateRef.current) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    if (!text.startsWith(displayedRef.current)) {
+      displayedRef.current = "";
+      setDisplayedText("");
+    }
+    const tick = (timestamp) => {
+      const previousTimestamp = lastFrameAtRef.current ?? timestamp;
+      lastFrameAtRef.current = timestamp;
+      const target = targetRef.current;
+      const current = displayedRef.current;
+      if (current.length >= target.length) {
+        shouldAnimateRef.current = false;
+        rafRef.current = null;
+        return;
+      }
+      const elapsedMs = Math.max(8, timestamp - previousTimestamp);
+      const charsFromTime = Math.max(1, Math.floor(elapsedMs / 1e3 * charsPerSecond));
+      const gap = target.length - current.length;
+      const catchupStep = gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;
+      const nextLength = Math.min(
+        target.length,
+        current.length + Math.max(charsFromTime, catchupStep)
+      );
+      const next = target.slice(0, nextLength);
+      displayedRef.current = next;
+      setDisplayedText(next);
+      rafRef.current = window.requestAnimationFrame(tick);
+    };
+    if (rafRef.current === null && displayedRef.current.length < text.length) {
+      rafRef.current = window.requestAnimationFrame(tick);
+    }
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      lastFrameAtRef.current = null;
+    };
+  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);
+  return {
+    displayedText,
+    isAnimating: isStreaming,
+    mode: isStreaming ? "streaming" : "static",
+    parseIncompleteMarkdown: isStreaming
+  };
+}
+
+// src/ui/message-response.tsx
+var import_jsx_runtime5 = require("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 (!React2.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 React2.Children.toArray(props.children).some(hasBlockMarkdownChild);
+}
+function MessageMarkdownParagraph({
+  children,
+  ...props
+}) {
+  const domProps = { ...props };
+  delete domProps.node;
+  const childArray = React2.Children.toArray(children).filter(
+    (child) => child !== null && child !== ""
+  );
+  const isImageOnly = childArray.length === 1 && React2.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  if (isImageOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+  }
+  if (childArray.some(hasBlockMarkdownChild)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...domProps, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...domProps, children });
+}
+var MESSAGE_RESPONSE_COMPONENTS = {
+  p: MessageMarkdownParagraph
+};
+var streamdownDefaultRehypePlugins = import_streamdown.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 = React2.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 = React2.useMemo(
+      () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
+      [components]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_streamdown.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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger,
+  Bubble,
+  BubbleContent,
+  BubbleGroup,
+  BubbleReactions,
+  ChatAttachment,
+  ChatAttachments,
+  ChatMessage,
+  ChatMessageAction,
+  ChatMessageActions,
+  ChatMessageContent,
+  Marker,
+  MarkerContent,
+  MarkerIcon,
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageAttachment,
+  MessageAttachments,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageGroup,
+  MessageHeader,
+  MessageResponse,
+  ShadcnMessage,
+  ShadcnMessageContent,
+  attachmentMediaVariants,
+  attachmentVariants,
+  bubbleVariants,
+  cn,
+  markerVariants
+});
+//# sourceMappingURL=index.cjs.map