@uipath/apollo-wind 2.68.0 → 2.69.0

package/dist/components/ui/markdown.js

@@ -0,0 +1,378 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useMemo } from "react";
+import react_markdown from "react-markdown";
+import rehype_katex from "rehype-katex";
+import remark_gfm from "remark-gfm";
+import remark_math from "remark-math";
+import { CodeBlock, DEFAULT_CODE_BLOCK_STRINGS } from "./code-block.js";
+import { cn } from "../../lib/index.js";
+function hastText(node) {
+    if ('text' === node.type) return node.value ?? '';
+    return (node.children ?? []).map(hastText).join('');
+}
+function languageOf(node) {
+    const className = node.properties?.className;
+    const classes = Array.isArray(className) ? className.map(String) : [];
+    return classes.find((name)=>name.startsWith('language-'))?.slice('language-'.length);
+}
+const opensInNewTab = (href)=>!!href && !/^(#|mailto:|tel:)/i.test(href);
+const BR_TAG = /^<br\s*\/?>$/i;
+function remarkHtmlBreaks() {
+    const visit = (node)=>{
+        if (!node.children) return;
+        node.children = node.children.map((child)=>'html' === child.type && BR_TAG.test(child.value?.trim() ?? '') ? {
+                type: 'break'
+            } : child);
+        node.children.forEach(visit);
+    };
+    return (tree)=>visit(tree);
+}
+const CURSOR_CONTAINERS = new Set([
+    'ul',
+    'ol',
+    'li',
+    'blockquote',
+    'table',
+    'thead',
+    'tbody',
+    'tr'
+]);
+const CURSOR_TEXT_BLOCKS = new Set([
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'td',
+    'th'
+]);
+const CURSOR_CLASS = 'ml-0.5 inline-block h-[1.1em] w-[0.45em] translate-y-[0.2em] rounded-[1px] bg-foreground animate-pulse motion-reduce:animate-none';
+function lastContent(node) {
+    const children = node.children ?? [];
+    for(let i = children.length - 1; i >= 0; i--){
+        const child = children[i];
+        if ('element' === child.type) return child;
+        if ('text' === child.type && child.value?.trim()) return child;
+    }
+}
+function findCursorHost(root) {
+    let node = root;
+    for(;;){
+        const last = lastContent(node);
+        if (last?.type !== 'element' || !last.tagName) return node;
+        if (CURSOR_TEXT_BLOCKS.has(last.tagName)) return last;
+        if (!CURSOR_CONTAINERS.has(last.tagName)) return node;
+        node = last;
+    }
+}
+function rehypeStreamingCursor() {
+    return (tree)=>{
+        const host = findCursorHost(tree);
+        host.children = [
+            ...host.children ?? [],
+            {
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                    dataSlot: 'markdown-cursor',
+                    ariaHidden: 'true',
+                    className: [
+                        CURSOR_CLASS
+                    ]
+                },
+                children: []
+            }
+        ];
+    };
+}
+function rehypeScopeFootnoteLabel(options) {
+    const LABEL = 'footnote-label';
+    const scoped = `${options.prefix}${LABEL}`;
+    const visit = (node)=>{
+        const properties = node.properties;
+        if (properties?.id === LABEL) properties.id = scoped;
+        if (properties && Array.isArray(properties.ariaDescribedBy)) properties.ariaDescribedBy = properties.ariaDescribedBy.map((ref)=>ref === LABEL ? scoped : ref);
+        node.children?.forEach(visit);
+    };
+    return (tree)=>visit(tree);
+}
+const DEFAULT_MARKDOWN_STRINGS = {
+    ...DEFAULT_CODE_BLOCK_STRINGS,
+    footnotes: 'Footnotes',
+    footnoteBack: 'Back to content',
+    taskDone: 'Done',
+    taskOpen: 'Not done'
+};
+function isAllowedImageSrc(src, policy) {
+    if ('none' === policy) return false;
+    if ('all' === policy) return true;
+    if ('function' == typeof policy) return policy(src);
+    try {
+        const base = "u" < typeof window ? 'https://relative.invalid' : window.location.href;
+        return new URL(src, base).origin === new URL(base).origin;
+    } catch  {
+        return false;
+    }
+}
+const MarkdownContext = /*#__PURE__*/ createContext({
+    strings: DEFAULT_MARKDOWN_STRINGS,
+    images: 'none',
+    codeWrap: false
+});
+const InsideLinkContext = /*#__PURE__*/ createContext(false);
+const LINK_CLASS = 'font-medium text-foreground-link underline underline-offset-2 hover:no-underline';
+function MarkdownLink({ node: _node, className, href, children, ...rest }) {
+    return /*#__PURE__*/ jsx("a", {
+        href: href,
+        className: cn(LINK_CLASS, className),
+        ...opensInNewTab(href) ? {
+            target: '_blank',
+            rel: 'noreferrer'
+        } : {},
+        ...rest,
+        children: /*#__PURE__*/ jsx(InsideLinkContext.Provider, {
+            value: true,
+            children: children
+        })
+    });
+}
+function MarkdownImage({ node: _node, className, alt, src, ...rest }) {
+    const { images } = useContext(MarkdownContext);
+    const insideLink = useContext(InsideLinkContext);
+    const source = 'string' == typeof src ? src : '';
+    if (source && isAllowedImageSrc(source, images)) return /*#__PURE__*/ jsx("img", {
+        alt: alt ?? '',
+        src: source,
+        loading: "lazy",
+        referrerPolicy: "no-referrer",
+        className: cn('h-auto max-w-full rounded-md', className),
+        ...rest
+    });
+    const label = alt || source;
+    if (insideLink || !source) return /*#__PURE__*/ jsx("span", {
+        "data-slot": "markdown-image-text",
+        children: label
+    });
+    return /*#__PURE__*/ jsx("a", {
+        "data-slot": "markdown-image-link",
+        href: source,
+        target: "_blank",
+        rel: "noreferrer",
+        className: LINK_CLASS,
+        children: label
+    });
+}
+function MarkdownInput({ node: _node, className, type, checked, ...rest }) {
+    const { strings } = useContext(MarkdownContext);
+    if ('checkbox' !== type) return /*#__PURE__*/ jsx("input", {
+        type: type,
+        className: className,
+        ...rest
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                type: "checkbox",
+                checked: checked,
+                "aria-hidden": "true",
+                tabIndex: -1,
+                className: cn('mr-2 size-3.5 translate-y-0.5 accent-primary', className),
+                ...rest
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                "data-slot": "markdown-task-state",
+                className: "sr-only",
+                children: [
+                    checked ? strings.taskDone : strings.taskOpen,
+                    ' '
+                ]
+            })
+        ]
+    });
+}
+function MarkdownPre({ node, children, ...rest }) {
+    const { strings, codeWrap, renderCodeActions } = useContext(MarkdownContext);
+    const codeNode = node?.children?.find((child)=>'element' === child.type && 'code' === child.tagName);
+    if (!codeNode) return /*#__PURE__*/ jsx("pre", {
+        ...rest,
+        children: children
+    });
+    const block = {
+        code: hastText(codeNode).replace(/\n$/, ''),
+        language: languageOf(codeNode)
+    };
+    return /*#__PURE__*/ jsx(CodeBlock, {
+        code: block.code,
+        language: block.language,
+        wrap: codeWrap,
+        actions: renderCodeActions?.(block),
+        strings: strings
+    });
+}
+const BUILT_IN_COMPONENTS = {
+    h1: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("h1", {
+            className: cn('text-xl font-semibold tracking-tight', className),
+            ...rest
+        }),
+    h2: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("h2", {
+            className: cn('text-lg font-semibold tracking-tight', className),
+            ...rest
+        }),
+    h3: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("h3", {
+            className: cn('text-base font-semibold', className),
+            ...rest
+        }),
+    h4: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("h4", {
+            className: cn('text-sm font-semibold', className),
+            ...rest
+        }),
+    h5: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("h5", {
+            className: cn('text-sm font-semibold', className),
+            ...rest
+        }),
+    h6: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("h6", {
+            className: cn('text-sm font-semibold text-muted-foreground', className),
+            ...rest
+        }),
+    p: ({ node: _node, ...rest })=>/*#__PURE__*/ jsx("p", {
+            ...rest
+        }),
+    a: MarkdownLink,
+    ul: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("ul", {
+            className: cn('flex flex-col gap-1 pl-6', className?.includes('contains-task-list') ? 'list-none pl-1' : 'list-disc', 'marker:text-muted-foreground', className),
+            ...rest
+        }),
+    ol: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("ol", {
+            className: cn('flex list-decimal flex-col gap-1 pl-6 marker:text-muted-foreground', className),
+            ...rest
+        }),
+    li: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("li", {
+            className: cn('pl-1 [&>ol]:mt-1 [&>p+p]:mt-2 [&>ul]:mt-1 [&>ul.contains-task-list]:pl-6', className),
+            ...rest
+        }),
+    input: MarkdownInput,
+    blockquote: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("blockquote", {
+            className: cn('flex flex-col gap-2 border-l-2 border-border pl-4 text-muted-foreground', className),
+            ...rest
+        }),
+    hr: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("hr", {
+            className: cn('border-border-subtle', className),
+            ...rest
+        }),
+    img: MarkdownImage,
+    table: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("div", {
+            "data-slot": "markdown-table",
+            tabIndex: 0,
+            className: "max-w-full overflow-x-auto rounded-lg border border-border-subtle outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: /*#__PURE__*/ jsx("table", {
+                className: cn('w-full border-collapse text-left [&_tr:last-child>td]:border-b-0', className),
+                ...rest
+            })
+        }),
+    th: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("th", {
+            className: cn('border-b border-border-subtle bg-surface-overlay px-3 py-2 font-semibold', className),
+            ...rest
+        }),
+    td: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("td", {
+            className: cn('border-b border-border-subtle px-3 py-2 align-top', className),
+            ...rest
+        }),
+    code: ({ node: _node, className, ...rest })=>/*#__PURE__*/ jsx("code", {
+            className: cn('rounded-md bg-surface-overlay px-1.5 py-0.5 font-mono text-[0.875em]', className),
+            ...rest
+        }),
+    pre: MarkdownPre
+};
+const Markdown = /*#__PURE__*/ forwardRef(({ children, components, remarkPlugins, rehypePlugins, streaming = false, images = 'none', codeWrap = false, renderCodeActions, strings, className, ...props }, ref)=>{
+    const context = useMemo(()=>({
+            strings: {
+                ...DEFAULT_MARKDOWN_STRINGS,
+                ...strings
+            },
+            images,
+            codeWrap,
+            renderCodeActions
+        }), [
+        strings,
+        images,
+        codeWrap,
+        renderCodeActions
+    ]);
+    const { footnotes, footnoteBack } = context.strings;
+    const footnotePrefix = `markdown${useId().replace(/[^\w-]/g, '')}-`;
+    const mergedComponents = useMemo(()=>components ? {
+            ...BUILT_IN_COMPONENTS,
+            ...components
+        } : BUILT_IN_COMPONENTS, [
+        components
+    ]);
+    const mergedRemarkPlugins = useMemo(()=>[
+            remark_gfm,
+            [
+                remark_math,
+                {
+                    singleDollarTextMath: false
+                }
+            ],
+            remarkHtmlBreaks,
+            ...remarkPlugins ?? []
+        ], [
+        remarkPlugins
+    ]);
+    const mergedRehypePlugins = useMemo(()=>[
+            [
+                rehypeScopeFootnoteLabel,
+                {
+                    prefix: footnotePrefix
+                }
+            ],
+            [
+                rehype_katex,
+                {
+                    output: 'mathml',
+                    throwOnError: false,
+                    trust: false,
+                    strict: 'ignore'
+                }
+            ],
+            ...rehypePlugins ?? [],
+            ...streaming ? [
+                rehypeStreamingCursor
+            ] : []
+        ], [
+        rehypePlugins,
+        streaming,
+        footnotePrefix
+    ]);
+    const remarkRehypeOptions = useMemo(()=>({
+            clobberPrefix: footnotePrefix,
+            footnoteLabel: footnotes,
+            footnoteBackLabel: footnoteBack
+        }), [
+        footnotePrefix,
+        footnotes,
+        footnoteBack
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "markdown",
+        "data-streaming": streaming || void 0,
+        "aria-busy": streaming || void 0,
+        className: cn('flex min-w-0 flex-col gap-3 text-sm leading-relaxed break-words text-foreground [&_math]:text-[1.15em] [&>.katex]:overflow-x-auto [&>.katex]:py-1', className),
+        ...props,
+        children: /*#__PURE__*/ jsx(MarkdownContext.Provider, {
+            value: context,
+            children: /*#__PURE__*/ jsx(react_markdown, {
+                components: mergedComponents,
+                remarkPlugins: mergedRemarkPlugins,
+                rehypePlugins: mergedRehypePlugins,
+                remarkRehypeOptions: remarkRehypeOptions,
+                children: children
+            })
+        })
+    });
+});
+Markdown.displayName = 'Markdown';
+export { DEFAULT_MARKDOWN_STRINGS, Markdown };

package/dist/components/ui/thinking-indicator.cjs

@@ -0,0 +1,146 @@
+"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__, {
+    thinkingIndicatorVariants: ()=>thinkingIndicatorVariants,
+    DEFAULT_THINKING_INDICATOR_STRINGS: ()=>DEFAULT_THINKING_INDICATOR_STRINGS,
+    ThinkingIndicator: ()=>ThinkingIndicator
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_class_variance_authority_namespaceObject = require("class-variance-authority");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+function getPrefersReducedMotion() {
+    if ("u" < typeof window || 'function' != typeof window.matchMedia) return false;
+    return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function usePrefersReducedMotion() {
+    const [reduced, setReduced] = external_react_namespaceObject.useState(getPrefersReducedMotion);
+    external_react_namespaceObject.useEffect(()=>{
+        if ('function' != typeof window.matchMedia) return;
+        const mql = window.matchMedia(REDUCED_MOTION_QUERY);
+        const onChange = ()=>setReduced(mql.matches);
+        mql.addEventListener('change', onChange);
+        return ()=>mql.removeEventListener('change', onChange);
+    }, []);
+    return reduced;
+}
+const thinkingIndicatorVariants = (0, external_class_variance_authority_namespaceObject.cva)('inline-flex max-w-full min-w-0 items-center text-muted-foreground', {
+    variants: {
+        size: {
+            sm: 'gap-1.5 text-xs [&_[data-slot=thinking-indicator-icon]]:size-3.5',
+            md: 'gap-2 text-sm [&_[data-slot=thinking-indicator-icon]]:size-4'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const DEFAULT_THINKING_INDICATOR_STRINGS = {
+    label: 'Thinking'
+};
+const ThinkingIndicator = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, size = 'md', label, messages, interval = 2500, strings, icon, 'aria-label': ariaLabel, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_THINKING_INDICATOR_STRINGS,
+        ...strings
+    };
+    const staticLabel = label ?? text.label;
+    const name = ariaLabel ?? staticLabel;
+    const labels = messages && messages.length > 0 ? messages : [
+        staticLabel
+    ];
+    const reducedMotion = usePrefersReducedMotion();
+    const rotates = labels.length > 1 && !reducedMotion && interval > 0;
+    const rotationKey = `${rotates}\u0000${labels.join('\u0000')}`;
+    const [index, setIndex] = external_react_namespaceObject.useState(0);
+    const [prevRotationKey, setPrevRotationKey] = external_react_namespaceObject.useState(rotationKey);
+    if (rotationKey !== prevRotationKey) {
+        setPrevRotationKey(rotationKey);
+        setIndex(0);
+    }
+    external_react_namespaceObject.useEffect(()=>{
+        if (!rotates) return;
+        const id = window.setInterval(()=>{
+            setIndex((current)=>(current + 1) % labels.length);
+        }, interval);
+        return ()=>window.clearInterval(id);
+    }, [
+        rotates,
+        labels.length,
+        interval,
+        rotationKey
+    ]);
+    const activeIndex = index < labels.length ? index : 0;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: ref,
+        "data-slot": "thinking-indicator",
+        "data-size": size,
+        role: "status",
+        "aria-label": name,
+        className: (0, index_cjs_namespaceObject.cn)(thinkingIndicatorVariants({
+            size
+        }), className),
+        ...props,
+        children: [
+            null !== icon && false !== icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "data-slot": "thinking-indicator-icon",
+                "aria-hidden": "true",
+                className: "inline-flex shrink-0 items-center justify-center [&>svg]:size-full",
+                children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Sparkles, {
+                    className: "text-primary animate-pulse motion-reduce:animate-none"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "data-slot": "thinking-indicator-label",
+                "aria-hidden": "true",
+                className: "grid min-w-0",
+                children: labels.map((item, i)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "data-active": i === activeIndex,
+                        className: "shimmer col-start-1 row-start-1 truncate transition-opacity duration-300 data-[active=false]:opacity-0 motion-reduce:transition-none",
+                        children: item
+                    }, i))
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "sr-only",
+                children: name
+            })
+        ]
+    });
+});
+ThinkingIndicator.displayName = 'ThinkingIndicator';
+exports.DEFAULT_THINKING_INDICATOR_STRINGS = __webpack_exports__.DEFAULT_THINKING_INDICATOR_STRINGS;
+exports.ThinkingIndicator = __webpack_exports__.ThinkingIndicator;
+exports.thinkingIndicatorVariants = __webpack_exports__.thinkingIndicatorVariants;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DEFAULT_THINKING_INDICATOR_STRINGS",
+    "ThinkingIndicator",
+    "thinkingIndicatorVariants"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/thinking-indicator.d.ts

@@ -0,0 +1,38 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const thinkingIndicatorVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ThinkingIndicatorStrings {
+    /** Default visible label, and the accessible name unless `label` or `aria-label` is set. */
+    label: string;
+}
+export declare const DEFAULT_THINKING_INDICATOR_STRINGS: ThinkingIndicatorStrings;
+export interface ThinkingIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof thinkingIndicatorVariants> {
+    /** A single label. Also the accessible name when `messages` rotate. */
+    label?: string;
+    /** Labels to cycle through. The first shows immediately; reduced motion keeps it there. */
+    messages?: string[];
+    /** Milliseconds each of `messages` stays on screen. */
+    interval?: number;
+    /** Overrides for any subset of the English strings. An explicit `aria-label` wins over both. */
+    strings?: Partial<ThinkingIndicatorStrings>;
+    /**
+     * Replaces the pulsing sparkle; `null` or `false` shows the label alone. A custom icon brings
+     * its own colour and animation and is sized by the indicator's `size`.
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * A "the assistant is working" row for a conversation: a pulsing sparkle and a shimmering label.
+ * Pass `messages` to cycle through progress labels ("Searching", "Reading files") every
+ * `interval` ms with a crossfade.
+ *
+ * Screen readers get one stable name (`label`, else `strings.label`) on a `role="status"` root,
+ * and the visual label is `aria-hidden`. Rotating labels are decoration, so announcing each one
+ * would only add noise. Announce real progress with `LiveRegion` instead.
+ *
+ * Under `prefers-reduced-motion` the icon and shimmer are static and the labels do not rotate.
+ */
+declare const ThinkingIndicator: React.ForwardRefExoticComponent<ThinkingIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export { ThinkingIndicator, thinkingIndicatorVariants };

package/dist/components/ui/thinking-indicator.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Sparkles } from "lucide-react";
+import { forwardRef, useEffect, useState } from "react";
+import { cn } from "../../lib/index.js";
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+function getPrefersReducedMotion() {
+    if ("u" < typeof window || 'function' != typeof window.matchMedia) return false;
+    return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function usePrefersReducedMotion() {
+    const [reduced, setReduced] = useState(getPrefersReducedMotion);
+    useEffect(()=>{
+        if ('function' != typeof window.matchMedia) return;
+        const mql = window.matchMedia(REDUCED_MOTION_QUERY);
+        const onChange = ()=>setReduced(mql.matches);
+        mql.addEventListener('change', onChange);
+        return ()=>mql.removeEventListener('change', onChange);
+    }, []);
+    return reduced;
+}
+const thinkingIndicatorVariants = cva('inline-flex max-w-full min-w-0 items-center text-muted-foreground', {
+    variants: {
+        size: {
+            sm: 'gap-1.5 text-xs [&_[data-slot=thinking-indicator-icon]]:size-3.5',
+            md: 'gap-2 text-sm [&_[data-slot=thinking-indicator-icon]]:size-4'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const DEFAULT_THINKING_INDICATOR_STRINGS = {
+    label: 'Thinking'
+};
+const ThinkingIndicator = /*#__PURE__*/ forwardRef(({ className, size = 'md', label, messages, interval = 2500, strings, icon, 'aria-label': ariaLabel, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_THINKING_INDICATOR_STRINGS,
+        ...strings
+    };
+    const staticLabel = label ?? text.label;
+    const name = ariaLabel ?? staticLabel;
+    const labels = messages && messages.length > 0 ? messages : [
+        staticLabel
+    ];
+    const reducedMotion = usePrefersReducedMotion();
+    const rotates = labels.length > 1 && !reducedMotion && interval > 0;
+    const rotationKey = `${rotates}\u0000${labels.join('\u0000')}`;
+    const [index, setIndex] = useState(0);
+    const [prevRotationKey, setPrevRotationKey] = useState(rotationKey);
+    if (rotationKey !== prevRotationKey) {
+        setPrevRotationKey(rotationKey);
+        setIndex(0);
+    }
+    useEffect(()=>{
+        if (!rotates) return;
+        const id = window.setInterval(()=>{
+            setIndex((current)=>(current + 1) % labels.length);
+        }, interval);
+        return ()=>window.clearInterval(id);
+    }, [
+        rotates,
+        labels.length,
+        interval,
+        rotationKey
+    ]);
+    const activeIndex = index < labels.length ? index : 0;
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "thinking-indicator",
+        "data-size": size,
+        role: "status",
+        "aria-label": name,
+        className: cn(thinkingIndicatorVariants({
+            size
+        }), className),
+        ...props,
+        children: [
+            null !== icon && false !== icon && /*#__PURE__*/ jsx("span", {
+                "data-slot": "thinking-indicator-icon",
+                "aria-hidden": "true",
+                className: "inline-flex shrink-0 items-center justify-center [&>svg]:size-full",
+                children: icon ?? /*#__PURE__*/ jsx(Sparkles, {
+                    className: "text-primary animate-pulse motion-reduce:animate-none"
+                })
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "data-slot": "thinking-indicator-label",
+                "aria-hidden": "true",
+                className: "grid min-w-0",
+                children: labels.map((item, i)=>/*#__PURE__*/ jsx("span", {
+                        "data-active": i === activeIndex,
+                        className: "shimmer col-start-1 row-start-1 truncate transition-opacity duration-300 data-[active=false]:opacity-0 motion-reduce:transition-none",
+                        children: item
+                    }, i))
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: name
+            })
+        ]
+    });
+});
+ThinkingIndicator.displayName = 'ThinkingIndicator';
+export { DEFAULT_THINKING_INDICATOR_STRINGS, ThinkingIndicator, thinkingIndicatorVariants };