@uipath/apollo-wind 2.66.1 → 2.67.0

package/dist/components/ui/index.d.ts

@@ -2,10 +2,12 @@ export * from './accordion';
 export * from './alert';
 export * from './alert-dialog';
 export * from './aspect-ratio';
+export * from './attachment';
 export * from './avatar';
 export * from './badge';
 export * from './boolean-radio-group';
 export * from './breadcrumb';
+export * from './bubble';
 export * from './button';
 export * from './button-group';
 export * from './calendar';
@@ -31,11 +33,14 @@ export * from './form-field';
 export * from './hover-card';
 export * from './info-tooltip';
 export * from './input';
-export * from './json-tree-view';
 export * from './input-group';
+export * from './json-tree-view';
 export * from './label';
 export * from './layout';
 export * from './lockable-value-field';
+export * from './marker';
+export * from './message';
+export * from './message-scroller';
 export * from './model-picker';
 export * from './multi-select';
 export * from './pagination';

package/dist/components/ui/index.js

@@ -3,10 +3,12 @@ export * from "./accordion.js";
 export * from "./alert.js";
 export * from "./alert-dialog.js";
 export * from "./aspect-ratio.js";
+export * from "./attachment.js";
 export * from "./avatar.js";
 export * from "./badge.js";
 export * from "./boolean-radio-group.js";
 export * from "./breadcrumb.js";
+export * from "./bubble.js";
 export * from "./button.js";
 export * from "./button-group.js";
 export * from "./calendar.js";
@@ -32,11 +34,14 @@ export * from "./form-field.js";
 export * from "./hover-card.js";
 export * from "./info-tooltip.js";
 export * from "./input.js";
-export * from "./json-tree-view/index.js";
 export * from "./input-group.js";
+export * from "./json-tree-view/index.js";
 export * from "./label.js";
 export * from "./layout/index.js";
 export * from "./lockable-value-field/index.js";
+export * from "./marker.js";
+export * from "./message.js";
+export * from "./message-scroller/index.js";
 export * from "./model-picker/index.js";
 export * from "./multi-select.js";
 export * from "./pagination.js";

package/dist/components/ui/marker.cjs

@@ -0,0 +1,89 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Marker: ()=>Marker,
+    MarkerContent: ()=>MarkerContent,
+    markerVariants: ()=>markerVariants,
+    MarkerIcon: ()=>MarkerIcon
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_slot_namespaceObject = require("@radix-ui/react-slot");
+const external_class_variance_authority_namespaceObject = require("class-variance-authority");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const markerVariants = (0, external_class_variance_authority_namespaceObject.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'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+const Marker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, variant = 'default', asChild = false, ...props }, ref)=>{
+    const Comp = asChild ? react_slot_namespaceObject.Slot : 'div';
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Comp, {
+        ref: ref,
+        "data-slot": "marker",
+        "data-variant": variant,
+        className: (0, index_cjs_namespaceObject.cn)(markerVariants({
+            variant
+        }), className),
+        ...props
+    });
+});
+Marker.displayName = 'Marker';
+const MarkerIcon = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        ref: ref,
+        "data-slot": "marker-icon",
+        "aria-hidden": "true",
+        className: (0, index_cjs_namespaceObject.cn)("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        ...props
+    }));
+MarkerIcon.displayName = 'MarkerIcon';
+const MarkerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        ref: ref,
+        "data-slot": "marker-content",
+        className: (0, index_cjs_namespaceObject.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
+    }));
+MarkerContent.displayName = 'MarkerContent';
+exports.Marker = __webpack_exports__.Marker;
+exports.MarkerContent = __webpack_exports__.MarkerContent;
+exports.MarkerIcon = __webpack_exports__.MarkerIcon;
+exports.markerVariants = __webpack_exports__.markerVariants;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Marker",
+    "MarkerContent",
+    "MarkerIcon",
+    "markerVariants"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/marker.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * A status line inside a conversation, ported from shadcn/ui's chat components: a system note, a
+ * dated separator between turns, or a bordered row. `MarkerIcon` and `MarkerContent` are its parts.
+ */
+declare const markerVariants: (props?: ({
+    variant?: "default" | "separator" | "border" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MarkerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof markerVariants> {
+    asChild?: boolean;
+}
+declare const Marker: React.ForwardRefExoticComponent<MarkerProps & React.RefAttributes<HTMLDivElement>>;
+declare const MarkerIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const MarkerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export { Marker, MarkerIcon, MarkerContent, markerVariants };

package/dist/components/ui/marker.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../lib/index.js";
+const markerVariants = 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'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+const Marker = /*#__PURE__*/ forwardRef(({ className, variant = 'default', asChild = false, ...props }, ref)=>{
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(Comp, {
+        ref: ref,
+        "data-slot": "marker",
+        "data-variant": variant,
+        className: cn(markerVariants({
+            variant
+        }), className),
+        ...props
+    });
+});
+Marker.displayName = 'Marker';
+const MarkerIcon = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-slot": "marker-icon",
+        "aria-hidden": "true",
+        className: cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        ...props
+    }));
+MarkerIcon.displayName = 'MarkerIcon';
+const MarkerContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "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
+    }));
+MarkerContent.displayName = 'MarkerContent';
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/ui/message-scroller/index.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __webpack_modules__ = {
+    "./message-scroller?d92f" (module) {
+        module.exports = require("./message-scroller.cjs");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    var _message_scroller__rspack_import_0 = __webpack_require__("./message-scroller?d92f");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _message_scroller__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_message_scroller__rspack_import_0[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+})();
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/message-scroller/index.d.ts

@@ -0,0 +1 @@
+export * from './message-scroller';

package/dist/components/ui/message-scroller/index.js

@@ -0,0 +1 @@
+export * from "./message-scroller.js";

package/dist/components/ui/message-scroller/message-scroller.cjs

@@ -0,0 +1,137 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    MessageScrollerViewport: ()=>MessageScrollerViewport,
+    MessageScrollerItem: ()=>MessageScrollerItem,
+    DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS: ()=>DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS,
+    useMessageScroller: ()=>external_primitive_index_cjs_namespaceObject.useMessageScroller,
+    MessageScrollerButton: ()=>MessageScrollerButton,
+    useMessageScrollerScrollable: ()=>external_primitive_index_cjs_namespaceObject.useMessageScrollerScrollable,
+    MessageScrollerProvider: ()=>MessageScrollerProvider,
+    useMessageScrollerVisibility: ()=>external_primitive_index_cjs_namespaceObject.useMessageScrollerVisibility,
+    MessageScroller: ()=>MessageScroller,
+    MessageScrollerContent: ()=>MessageScrollerContent,
+    DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS: ()=>DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_primitive_index_cjs_namespaceObject = require("./primitive/index.cjs");
+const MessageScrollerProvider = external_primitive_index_cjs_namespaceObject.MessageScroller.Provider;
+const MessageScroller = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Root, {
+        ref: ref,
+        "data-slot": "message-scroller",
+        className: (0, index_cjs_namespaceObject.cn)('relative flex min-h-0 flex-col', className),
+        ...props
+    }));
+MessageScroller.displayName = 'MessageScroller';
+const DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS = {
+    label: 'Messages'
+};
+const MessageScrollerViewport = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, 'aria-label': ariaLabel, strings, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Viewport, {
+        ref: ref,
+        "data-slot": "message-scroller-viewport",
+        "aria-label": ariaLabel ?? text.label,
+        className: (0, index_cjs_namespaceObject.cn)('min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none', className),
+        ...props
+    });
+});
+MessageScrollerViewport.displayName = 'MessageScrollerViewport';
+const MessageScrollerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Content, {
+        ref: ref,
+        "data-slot": "message-scroller-content",
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col gap-4 px-4 py-4', className),
+        ...props
+    }));
+MessageScrollerContent.displayName = 'MessageScrollerContent';
+const MessageScrollerItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Item, {
+        ref: ref,
+        "data-slot": "message-scroller-item",
+        className: (0, index_cjs_namespaceObject.cn)('min-w-0', className),
+        ...props
+    }));
+MessageScrollerItem.displayName = 'MessageScrollerItem';
+const DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS = {
+    scrollToLatest: 'Scroll to latest',
+    scrollToStart: 'Scroll to start'
+};
+const MessageScrollerButton = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, direction = 'end', strings, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Button, {
+        ref: ref,
+        "data-slot": "message-scroller-button",
+        direction: direction,
+        className: (0, index_cjs_namespaceObject.cn)('absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-1.5 rounded-full border border-border-subtle bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-md transition-opacity hover:bg-surface-overlay data-[active=false]:pointer-events-none data-[active=false]:opacity-0', 'start' === direction && 'top-3 bottom-auto', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                    size: 14,
+                    className: (0, index_cjs_namespaceObject.cn)('start' === direction && 'rotate-180')
+                }),
+                'start' === direction ? text.scrollToStart : text.scrollToLatest
+            ]
+        })
+    });
+});
+MessageScrollerButton.displayName = 'MessageScrollerButton';
+exports.DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS = __webpack_exports__.DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS;
+exports.DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS = __webpack_exports__.DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS;
+exports.MessageScroller = __webpack_exports__.MessageScroller;
+exports.MessageScrollerButton = __webpack_exports__.MessageScrollerButton;
+exports.MessageScrollerContent = __webpack_exports__.MessageScrollerContent;
+exports.MessageScrollerItem = __webpack_exports__.MessageScrollerItem;
+exports.MessageScrollerProvider = __webpack_exports__.MessageScrollerProvider;
+exports.MessageScrollerViewport = __webpack_exports__.MessageScrollerViewport;
+exports.useMessageScroller = __webpack_exports__.useMessageScroller;
+exports.useMessageScrollerScrollable = __webpack_exports__.useMessageScrollerScrollable;
+exports.useMessageScrollerVisibility = __webpack_exports__.useMessageScrollerVisibility;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS",
+    "DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS",
+    "MessageScroller",
+    "MessageScrollerButton",
+    "MessageScrollerContent",
+    "MessageScrollerItem",
+    "MessageScrollerProvider",
+    "MessageScrollerViewport",
+    "useMessageScroller",
+    "useMessageScrollerScrollable",
+    "useMessageScrollerVisibility"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/message-scroller/message-scroller.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { MessageScroller as MessageScrollerPrimitive } from './primitive';
+/**
+ * The scroll container for a conversation, styled over the headless MessageScroller in
+ * `./primitive` (vendored from shadcn/ui, see the README there). The primitive owns the behaviour:
+ * following new content while the reader is at the end, keeping the position when older messages
+ * are prepended (`preserveScrollOnPrepend` on the viewport), anchoring a new turn to the top of the
+ * viewport (`scrollAnchor` on an item), jumping to a message by id (`useMessageScroller`), and
+ * reporting what is in view (`useMessageScrollerVisibility`).
+ */
+export { type MessageScrollerDefaultScrollPosition, type MessageScrollerScrollAlign, type MessageScrollerScrollable, type MessageScrollerScrollOptions, type MessageScrollerVisibilityState, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from './primitive';
+declare const MessageScrollerProvider: typeof import("./primitive/components").MessageScrollerProvider;
+export type MessageScrollerProps = React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Root>;
+/**
+ * The frame around the viewport and the jump button. It takes its height from the consumer:
+ * pass `h-*`, `h-full`, or `flex-1` when it sits in a sized flex column. Without a definite
+ * height the viewport cannot scroll and the frame grows with the transcript.
+ */
+declare const MessageScroller: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface MessageScrollerViewportStrings {
+    /** Accessible name of the scrolling region. */
+    label: string;
+}
+export declare const DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS: MessageScrollerViewportStrings;
+export interface MessageScrollerViewportProps extends React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Viewport> {
+    /** Overrides for any subset of the English strings. An explicit `aria-label` wins over `label`. */
+    strings?: Partial<MessageScrollerViewportStrings>;
+}
+/**
+ * The scrolling element, a focusable `region`. Its accessible name comes from `strings.label`
+ * (default "Messages"), so hosts should pass translated strings.
+ */
+declare const MessageScrollerViewport: React.ForwardRefExoticComponent<MessageScrollerViewportProps & React.RefAttributes<HTMLDivElement>>;
+export type MessageScrollerContentProps = React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Content>;
+declare const MessageScrollerContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    spacerClassName?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type MessageScrollerItemProps = React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Item>;
+declare const MessageScrollerItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    messageId?: string;
+    scrollAnchor?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface MessageScrollerButtonStrings {
+    /** Label of the jump button when it leads to the newest message. */
+    scrollToLatest: string;
+    /** Label of the jump button when `direction="start"` leads to the oldest message. */
+    scrollToStart: string;
+}
+export declare const DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS: MessageScrollerButtonStrings;
+export interface MessageScrollerButtonProps extends React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Button> {
+    /** Overrides for any subset of the English strings. Ignored when `children` is given. */
+    strings?: Partial<MessageScrollerButtonStrings>;
+}
+/**
+ * The jump button, shown only while the viewport is away from its `direction` edge. The primitive
+ * sets `data-active`; this styling fades the button out rather than unmounting it so the position
+ * is stable.
+ */
+declare const MessageScrollerButton: React.ForwardRefExoticComponent<MessageScrollerButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, };

package/dist/components/ui/message-scroller/message-scroller.js

@@ -0,0 +1,73 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../../lib/index.js";
+import { MessageScroller, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "./primitive/index.js";
+const MessageScrollerProvider = MessageScroller.Provider;
+const message_scroller_MessageScroller = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MessageScroller.Root, {
+        ref: ref,
+        "data-slot": "message-scroller",
+        className: cn('relative flex min-h-0 flex-col', className),
+        ...props
+    }));
+message_scroller_MessageScroller.displayName = 'MessageScroller';
+const DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS = {
+    label: 'Messages'
+};
+const MessageScrollerViewport = /*#__PURE__*/ forwardRef(({ className, 'aria-label': ariaLabel, strings, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ jsx(MessageScroller.Viewport, {
+        ref: ref,
+        "data-slot": "message-scroller-viewport",
+        "aria-label": ariaLabel ?? text.label,
+        className: cn('min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none', className),
+        ...props
+    });
+});
+MessageScrollerViewport.displayName = 'MessageScrollerViewport';
+const MessageScrollerContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MessageScroller.Content, {
+        ref: ref,
+        "data-slot": "message-scroller-content",
+        className: cn('flex flex-col gap-4 px-4 py-4', className),
+        ...props
+    }));
+MessageScrollerContent.displayName = 'MessageScrollerContent';
+const MessageScrollerItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MessageScroller.Item, {
+        ref: ref,
+        "data-slot": "message-scroller-item",
+        className: cn('min-w-0', className),
+        ...props
+    }));
+MessageScrollerItem.displayName = 'MessageScrollerItem';
+const DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS = {
+    scrollToLatest: 'Scroll to latest',
+    scrollToStart: 'Scroll to start'
+};
+const MessageScrollerButton = /*#__PURE__*/ forwardRef(({ className, children, direction = 'end', strings, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ jsx(MessageScroller.Button, {
+        ref: ref,
+        "data-slot": "message-scroller-button",
+        direction: direction,
+        className: cn('absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-1.5 rounded-full border border-border-subtle bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-md transition-opacity hover:bg-surface-overlay data-[active=false]:pointer-events-none data-[active=false]:opacity-0', 'start' === direction && 'top-3 bottom-auto', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(ChevronDown, {
+                    size: 14,
+                    className: cn('start' === direction && 'rotate-180')
+                }),
+                'start' === direction ? text.scrollToStart : text.scrollToLatest
+            ]
+        })
+    });
+});
+MessageScrollerButton.displayName = 'MessageScrollerButton';
+export { DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS, DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS, message_scroller_MessageScroller as MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };