@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/chunk-j5wk4ffj.js

@@ -0,0 +1,251 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  TooltipProvider2,
+  Tooltip2,
+  TooltipTrigger2,
+  TooltipContent2
+} from "./chunk-czg9p52v.js";
+import {
+  Dialog2,
+  DialogTrigger2,
+  DialogContent2,
+  DialogTitle2
+} from "./chunk-zhnwybhq.js";
+import {
+  Avatar2,
+  AvatarImage2,
+  AvatarFallback2
+} from "./chunk-gg39sggp.js";
+import {
+  TooltipIconButton2
+} from "./chunk-q40gqpwh.js";
+
+// src/components/assistant-ui/native/AttachmentPreview.tsx
+import { useState, isValidElement } from "react";
+import { XIcon, PlusIcon, FileText, Loader2Icon, AlertCircleIcon } from "lucide-react";
+import { AttachmentPrimitive, ComposerPrimitive, MessagePrimitive, useAuiState as useAuiState2, useAui } from "@assistant-ui/react";
+
+// src/components/assistant-ui/hooks/useAttachmentSrc.ts
+import { useMemo, useSyncExternalStore } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import { useShallow } from "zustand/react/shallow";
+function createFileSourceStore(file) {
+  let url;
+  return {
+    subscribe(onChange) {
+      if (file === undefined)
+        return () => {};
+      const objectUrl = URL.createObjectURL(file);
+      url = objectUrl;
+      onChange();
+      return () => {
+        URL.revokeObjectURL(objectUrl);
+        url = undefined;
+      };
+    },
+    getSnapshot: () => url
+  };
+}
+function readServerSnapshot() {
+  return;
+}
+function useAttachmentSrc() {
+  const { file, src } = useAuiState(useShallow((state) => {
+    if (state.attachment.type !== "image")
+      return {};
+    if (state.attachment.file)
+      return { file: state.attachment.file };
+    const image = state.attachment.content?.find((part) => part.type === "image")?.image;
+    return image ? { src: image } : {};
+  }));
+  const store = useMemo(() => createFileSourceStore(file), [file]);
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, readServerSnapshot) ?? src;
+}
+
+// src/components/assistant-ui/native/AttachmentPreview.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AttachmentPreview = ({ src, name }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  return /* @__PURE__ */ jsx("img", {
+    src,
+    alt: `Preview of ${name}`,
+    className: cn2("block h-auto max-h-[80vh] w-auto max-w-full rounded-sm object-contain transition-opacity duration-300 motion-reduce:transition-none", isLoaded ? "aui-attachment-preview-image-loaded opacity-100" : "aui-attachment-preview-image-loading opacity-0"),
+    onLoad: () => setIsLoaded(true)
+  });
+};
+var AttachmentPreviewDialog = ({ children, src, name }) => {
+  if (!src)
+    return children;
+  return /* @__PURE__ */ jsxs(Dialog2, {
+    children: [
+      /* @__PURE__ */ jsx(DialogTrigger2, {
+        render: isValidElement(children) ? children : /* @__PURE__ */ jsx("button", {
+          type: "button"
+        }),
+        children: isValidElement(children) ? undefined : children
+      }),
+      /* @__PURE__ */ jsxs(DialogContent2, {
+        size: "wide",
+        children: [
+          /* @__PURE__ */ jsxs(DialogTitle2, {
+            className: "sr-only",
+            children: [
+              "Preview ",
+              name
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden rounded-sm",
+            children: /* @__PURE__ */ jsx(AttachmentPreview, {
+              src,
+              name
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
+var AttachmentThumb = ({ src }) => {
+  return /* @__PURE__ */ jsxs(Avatar2, {
+    size: "lg",
+    children: [
+      /* @__PURE__ */ jsx(AvatarImage2, {
+        src,
+        alt: ""
+      }),
+      /* @__PURE__ */ jsx(AvatarFallback2, {
+        children: /* @__PURE__ */ jsx(FileText, {
+          "aria-hidden": "true",
+          className: "size-4 shrink-0 text-muted-foreground"
+        })
+      })
+    ]
+  });
+};
+var AttachmentUI = () => {
+  const aui = useAui();
+  const isComposer = aui.attachment.source !== "message";
+  const src = useAttachmentSrc();
+  const name = useAuiState2((s) => s.attachment.name);
+  const typeLabel = useAuiState2((s) => {
+    const type = s.attachment.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        return type;
+    }
+  });
+  const uploadState = useAuiState2((s) => s.attachment.status.type === "incomplete" && s.attachment.status.reason === "error" ? "error" : s.attachment.status.type === "running" || s.optional.message?.submission !== undefined && s.attachment.status.type !== "complete" ? "uploading" : undefined);
+  const isUploading = uploadState === "uploading";
+  const isError = uploadState === "error";
+  const errorMessage = useAuiState2((s) => s.attachment.status.type === "incomplete" && s.attachment.status.reason === "error" ? s.attachment.status.message ?? "Upload failed" : undefined);
+  return /* @__PURE__ */ jsx(TooltipProvider2, {
+    children: /* @__PURE__ */ jsxs(Tooltip2, {
+      children: [
+        /* @__PURE__ */ jsxs(AttachmentPrimitive.Root, {
+          render: /* @__PURE__ */ jsx("div", {
+            className: "aui-attachment-root relative"
+          }),
+          children: [
+            /* @__PURE__ */ jsx(AttachmentPreviewDialog, {
+              src,
+              name,
+              children: /* @__PURE__ */ jsxs(TooltipTrigger2, {
+                render: /* @__PURE__ */ jsx("button", {
+                  type: "button",
+                  "aria-label": src ? `Preview ${name}` : `${typeLabel} attachment ${name}`,
+                  className: "relative flex size-14 items-center justify-center overflow-hidden rounded-sm border border-border bg-secondary hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring"
+                }),
+                children: [
+                  /* @__PURE__ */ jsx(AttachmentThumb, {
+                    src
+                  }),
+                  isUploading && /* @__PURE__ */ jsx("span", {
+                    "aria-hidden": "true",
+                    className: "absolute inset-0 flex items-center justify-center bg-background/80",
+                    children: /* @__PURE__ */ jsx(Loader2Icon, {
+                      className: "size-4 animate-spin text-muted-foreground motion-reduce:animate-none"
+                    })
+                  }),
+                  isError && /* @__PURE__ */ jsx("span", {
+                    "aria-hidden": "true",
+                    className: "absolute inset-0 flex items-center justify-center bg-background/80",
+                    children: /* @__PURE__ */ jsx(AlertCircleIcon, {
+                      className: "size-4 text-destructive"
+                    })
+                  })
+                ]
+              })
+            }),
+            isComposer && /* @__PURE__ */ jsx(AttachmentRemove, {
+              name
+            }),
+            isError && /* @__PURE__ */ jsx("p", {
+              role: "alert",
+              className: "max-w-56 py-1 text-sm text-destructive",
+              children: errorMessage
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(TooltipContent2, {
+          side: "top",
+          children: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {})
+        })
+      ]
+    })
+  });
+};
+var AttachmentRemove = ({ name }) => {
+  return /* @__PURE__ */ jsx(AttachmentPrimitive.Remove, {
+    asChild: true,
+    children: /* @__PURE__ */ jsx(TooltipIconButton2, {
+      tooltip: `Remove ${name}`,
+      side: "top",
+      children: /* @__PURE__ */ jsx(XIcon, {
+        "aria-hidden": "true",
+        className: "size-3.5 shrink-0"
+      })
+    })
+  });
+};
+function UserMessageAttachments2() {
+  return /* @__PURE__ */ jsx("div", {
+    className: "aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2 empty:hidden",
+    children: /* @__PURE__ */ jsx(MessagePrimitive.Attachments, {
+      children: () => /* @__PURE__ */ jsx(AttachmentUI, {})
+    })
+  });
+}
+function ComposerAttachments3() {
+  return /* @__PURE__ */ jsx("div", {
+    className: "aui-composer-attachments flex w-full flex-row items-center gap-2 overflow-x-auto empty:hidden",
+    children: /* @__PURE__ */ jsx(ComposerPrimitive.Attachments, {
+      children: () => /* @__PURE__ */ jsx(AttachmentUI, {})
+    })
+  });
+}
+function ComposerAddAttachment2() {
+  return /* @__PURE__ */ jsx(ComposerPrimitive.AddAttachment, {
+    asChild: true,
+    children: /* @__PURE__ */ jsx(TooltipIconButton2, {
+      tooltip: "Add Attachment",
+      side: "bottom",
+      variant: "ghost",
+      "aria-label": "Add Attachment",
+      children: /* @__PURE__ */ jsx(PlusIcon, {
+        "aria-hidden": "true",
+        className: "size-4 shrink-0"
+      })
+    })
+  });
+}
+
+export { UserMessageAttachments2, ComposerAttachments3, ComposerAddAttachment2 };

package/dist/chunk-j89xg1ak.js

@@ -0,0 +1,14 @@
+// src/hooks/usePortalContainer.ts
+import { useContext } from "react";
+
+// src/portal/PortalContext.ts
+import { createContext } from "react";
+var PortalContext = createContext(undefined);
+
+// src/hooks/usePortalContainer.ts
+function usePortalContainer2(container) {
+  const inheritedContainer = useContext(PortalContext);
+  return container === undefined ? inheritedContainer : container;
+}
+
+export { PortalContext, usePortalContainer2 };

package/dist/chunk-j9d304dz.js

@@ -0,0 +1,203 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Checkbox2,
+  Spinner2
+} from "./chunk-eehfrrdz.js";
+import {
+  useReceiptFocus
+} from "./chunk-vxvaaptq.js";
+import {
+  OptionText2
+} from "./chunk-71efbr5n.js";
+import {
+  clamp
+} from "./chunk-v8ks0cfq.js";
+
+// src/components/assistant-ui/elements/OptionList.tsx
+import { useCallback, useState } from "react";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OptionList2({
+  options,
+  selectionMode = "single",
+  defaultValue,
+  minSelections = 1,
+  maxSelections,
+  onConfirm,
+  confirmLabel = "Confirm",
+  choice,
+  variant = "surface",
+  ref,
+  ...props
+}) {
+  const isMultiple = selectionMode === "multiple";
+  const [selected, setSelected] = useState(() => (defaultValue ?? []).filter((id) => options.some((option) => option.id === id)));
+  const [pending, setPending] = useState(null);
+  const [confirmed, setConfirmed] = useState();
+  const [error, setError] = useState(null);
+  const { receiptRef, focusHandlers } = useReceiptFocus(props);
+  const setReceiptRef = useCallback((node) => {
+    receiptRef.current = node;
+    if (typeof ref === "function")
+      return ref(node);
+    if (ref)
+      ref.current = node;
+    return;
+  }, [ref, receiptRef]);
+  const rootClassName = cn2("flex w-full flex-col gap-1 text-foreground", variant === "surface" && "max-w-sm rounded-md border border-frame-edge bg-card p-1 shadow-frame");
+  const confirmedChoice = choice ?? confirmed;
+  const isLocked = pending !== null;
+  const max = Math.floor(clamp(maxSelections ?? options.length, 0, options.length));
+  const min = Math.floor(clamp(minSelections, 0, max));
+  const optionIds = new Set(options.map((option) => option.id));
+  const selectedIds = selected.filter((id) => optionIds.has(id));
+  const canConfirm = !isLocked && selectedIds.length >= min && selectedIds.length <= max;
+  async function commit(ids) {
+    if (isLocked || !onConfirm)
+      return;
+    setPending(ids);
+    setError(null);
+    try {
+      await onConfirm(ids);
+      setConfirmed(ids);
+    } catch (error) {
+      setPending(null);
+      setError(error instanceof Error ? error.message : String(error));
+    }
+  }
+  function toggle(id) {
+    if (isLocked)
+      return;
+    setSelected((current) => {
+      const available = current.filter((value) => optionIds.has(value));
+      if (available.includes(id))
+        return available.filter((value) => value !== id);
+      return available.length < max ? [...available, id] : available;
+    });
+  }
+  if (confirmedChoice !== undefined) {
+    const chosen = options.filter((option) => confirmedChoice.includes(option.id));
+    return /* @__PURE__ */ jsx("div", {
+      ...props,
+      ...focusHandlers,
+      ref: setReceiptRef,
+      tabIndex: -1,
+      "data-testid": "OptionList",
+      "data-slot": "option-list",
+      "data-state": "receipt",
+      className: rootClassName,
+      children: chosen.length === 0 ? /* @__PURE__ */ jsx("span", {
+        className: "p-2 text-base text-muted-foreground",
+        children: "Nothing selected"
+      }) : chosen.map((option) => /* @__PURE__ */ jsxs("div", {
+        className: "flex items-start gap-1 p-2",
+        children: [
+          /* @__PURE__ */ jsx(CheckIcon, {
+            "aria-hidden": "true",
+            className: "size-4 text-success"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "sr-only",
+            children: "Selected:"
+          }),
+          /* @__PURE__ */ jsx(OptionText2, {
+            option
+          })
+        ]
+      }, option.id))
+    });
+  }
+  if (!onConfirm)
+    return /* @__PURE__ */ jsx("div", {
+      ...props,
+      ...focusHandlers,
+      ref,
+      "data-testid": "OptionList",
+      "data-slot": "option-list",
+      className: rootClassName,
+      children: options.map((option) => /* @__PURE__ */ jsx(OptionText2, {
+        option,
+        isPadded: true
+      }, option.id))
+    });
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ...focusHandlers,
+    ref,
+    role: "group",
+    "data-testid": "OptionList",
+    "data-slot": "option-list",
+    "data-state": isLocked ? "pending" : "open",
+    "aria-busy": isLocked || undefined,
+    className: rootClassName,
+    children: [
+      options.map((option) => {
+        const isSelected = selectedIds.includes(option.id);
+        const isUnavailable = option.disabled === true || isLocked || isMultiple && !isSelected && selectedIds.length >= max;
+        return isMultiple ? /* @__PURE__ */ jsxs("label", {
+          className: cn2("flex items-start gap-2 rounded-sm p-2 text-foreground", isUnavailable && "text-muted-foreground", isSelected && "bg-accent"),
+          children: [
+            /* @__PURE__ */ jsx(Checkbox2, {
+              checked: isSelected,
+              disabled: isUnavailable,
+              onCheckedChange: () => toggle(option.id)
+            }),
+            /* @__PURE__ */ jsx(OptionText2, {
+              option
+            })
+          ]
+        }, option.id) : /* @__PURE__ */ jsxs(Button2, {
+          variant: "outline",
+          size: "content",
+          fullWidth: true,
+          align: "start",
+          disabled: isUnavailable,
+          onClick: () => {
+            commit([option.id]);
+          },
+          children: [
+            pending?.includes(option.id) ? /* @__PURE__ */ jsx(Spinner2, {}) : null,
+            /* @__PURE__ */ jsx(OptionText2, {
+              option
+            })
+          ]
+        }, option.id);
+      }),
+      error ? /* @__PURE__ */ jsx("p", {
+        role: "alert",
+        className: "px-2 text-base text-destructive",
+        children: error
+      }) : null,
+      isMultiple ? /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center justify-between gap-2 p-2",
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            className: "text-base text-muted-foreground tabular-nums",
+            children: [
+              selectedIds.length,
+              " of ",
+              max
+            ]
+          }),
+          /* @__PURE__ */ jsxs(Button2, {
+            disabled: !canConfirm,
+            onClick: () => {
+              commit(options.filter((option) => selectedIds.includes(option.id)).map((option) => option.id));
+            },
+            children: [
+              isLocked ? /* @__PURE__ */ jsx(Spinner2, {}) : null,
+              confirmLabel
+            ]
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+
+export { OptionList2 };

package/dist/chunk-jacxpetf.js

@@ -0,0 +1,45 @@
+import {
+  VoiceStatusDot2
+} from "./chunk-k01gpm23.js";
+import {
+  VoiceConnectButton2
+} from "./chunk-wbj4frbk.js";
+import {
+  VoiceMuteButton2
+} from "./chunk-m1a9e1py.js";
+import {
+  VoiceDisconnectButton2
+} from "./chunk-48b1ya7g.js";
+
+// src/components/assistant-ui/native/VoiceControl.tsx
+import { AuiIf } from "@assistant-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VoiceControl2() {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "VoiceControl",
+    className: "flex items-center gap-2 border-b border-border px-2 py-1",
+    children: [
+      /* @__PURE__ */ jsx(VoiceStatusDot2, {}),
+      /* @__PURE__ */ jsx(AuiIf, {
+        condition: (s) => s.thread.voice === undefined || s.thread.voice.status.type === "ended",
+        children: /* @__PURE__ */ jsx(VoiceConnectButton2, {})
+      }),
+      /* @__PURE__ */ jsx(AuiIf, {
+        condition: (s) => s.thread.voice?.status.type === "starting",
+        children: /* @__PURE__ */ jsx("span", {
+          className: "aui-voice-status text-muted-foreground text-sm",
+          children: "Connecting..."
+        })
+      }),
+      /* @__PURE__ */ jsxs(AuiIf, {
+        condition: (s) => s.thread.voice?.status.type === "running",
+        children: [
+          /* @__PURE__ */ jsx(VoiceMuteButton2, {}),
+          /* @__PURE__ */ jsx(VoiceDisconnectButton2, {})
+        ]
+      })
+    ]
+  });
+}
+
+export { VoiceControl2 };

package/dist/chunk-jcxxjkqx.js

@@ -0,0 +1,17 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Label.tsx
+import { jsx } from "react/jsx-runtime";
+"use client";
+function Label2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("label", {
+    "data-density": density,
+    "data-slot": "label",
+    className: cn2("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+    ...props
+  });
+}
+
+export { Label2 };

package/dist/chunk-jhw9q2eq.js

@@ -0,0 +1,57 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/DaySeparator.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DaySeparator2({ messages, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-testid": "DaySeparator",
+    "data-slot": "day-separator",
+    className: "flex w-full max-w-sm flex-col gap-2 text-sm",
+    ...props,
+    children: messages.map((message, index) => {
+      const isNewDay = message.day !== messages[index - 1]?.day;
+      return /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col gap-2",
+        children: [
+          isNewDay && /* @__PURE__ */ jsxs("div", {
+            role: "separator",
+            "aria-label": message.day,
+            className: "flex items-center gap-2 py-1",
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "bg-foreground/[0.08] h-px flex-1"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: cn2(mono, "text-muted-foreground"),
+                children: message.day
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "bg-foreground/[0.08] h-px flex-1"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: cn2("group flex items-baseline gap-2", message.role === "user" && "flex-row-reverse"),
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: cn2("max-w-[80%] text-base leading-relaxed break-words", message.role === "user" ? "bg-foreground/[0.05] rounded-md px-3.5 py-2" : "text-foreground/75"),
+                children: message.text
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: cn2(mono, "text-muted-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 shrink-0 tabular-nums transition-opacity"),
+                children: message.time
+              })
+            ]
+          })
+        ]
+      }, message.id);
+    })
+  });
+}
+
+export { DaySeparator2 };

package/dist/chunk-jpvw9xqy.js

@@ -0,0 +1,4 @@
+// src/components/DirectionProvider.tsx
+import { DirectionProvider as DirectionProvider2, useDirection as useDirection2 } from "@base-ui/react/direction-provider";
+
+export { DirectionProvider2, useDirection2 };

package/dist/chunk-jq6tc65r.js

@@ -0,0 +1,86 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  paper,
+  field,
+  inkButton
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ScrollAnchor.tsx
+import { useLayoutEffect, useRef } from "react";
+import { ArrowDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScrollAnchor2({
+  messages,
+  isFollowing,
+  unreadCount,
+  onFollowingChange,
+  className,
+  ...props
+}) {
+  const viewportRef = useRef(null);
+  const contentRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!isFollowing)
+      return;
+    const viewport = viewportRef.current;
+    const content = contentRef.current;
+    if (!viewport || !content)
+      return;
+    const follow = () => {
+      viewport.scrollTo({ top: viewport.scrollHeight });
+    };
+    follow();
+    const observer = new ResizeObserver(follow);
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [isFollowing, messages.length]);
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ScrollAnchor",
+    "data-slot": "scroll-anchor",
+    className: cn2(cn2(paper, "relative h-64 w-full max-w-sm overflow-hidden rounded-md"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        ref: viewportRef,
+        role: "log",
+        "aria-label": "Conversation messages",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
+        tabIndex: 0,
+        onScroll: (event) => {
+          const viewport = event.currentTarget;
+          const isAtLatest = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <= 1;
+          if (isAtLatest !== isFollowing)
+            onFollowingChange(isAtLatest);
+        },
+        className: "h-full overflow-y-auto p-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsx("div", {
+          ref: contentRef,
+          className: "flex flex-col gap-2.5",
+          children: messages.map((message, index) => /* @__PURE__ */ jsx("div", {
+            className: cn2("max-w-[85%] text-sm leading-relaxed", message.role === "user" ? cn2(field, "self-end rounded-md px-3 py-1.5") : "self-start text-muted-foreground"),
+            children: message.text
+          }, index))
+        })
+      }),
+      !isFollowing && unreadCount > 0 ? /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        onClick: () => onFollowingChange(true),
+        className: cn2(inkButton, "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full px-3 py-1 text-sm"),
+        children: [
+          /* @__PURE__ */ jsx(ArrowDownIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          }),
+          unreadCount,
+          " new ",
+          unreadCount === 1 ? "message" : "messages"
+        ]
+      }) : null
+    ]
+  });
+}
+
+export { ScrollAnchor2 };