@uipath/apollo-wind 2.69.0 → 2.70.0

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

@@ -0,0 +1,241 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Check, Copy, Ellipsis, ThumbsDown, ThumbsUp } from "lucide-react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/index.js";
+import { copyTextToClipboard } from "../../lib/clipboard.js";
+import { Button } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Toggle } from "./toggle.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+const DEFAULT_MESSAGE_ACTIONS_OVERFLOW_STRINGS = {
+    more: 'More actions'
+};
+const DEFAULT_MESSAGE_ACTIONS_STRINGS = {
+    ...DEFAULT_MESSAGE_ACTIONS_OVERFLOW_STRINGS,
+    label: 'Message actions'
+};
+const messageActionsVariants = cva('flex w-fit max-w-full items-center gap-0.5 px-2', {
+    variants: {
+        visibility: {
+            always: '',
+            hover: 'opacity-0 transition-opacity group-hover/message:opacity-100 group-focus-within/message:opacity-100 focus-within:opacity-100 has-[[data-state=open]]:opacity-100 has-[[data-state=delayed-open]]:opacity-100 has-[[data-state=instant-open]]:opacity-100 [@media(hover:none)]:opacity-100'
+        }
+    },
+    defaultVariants: {
+        visibility: 'always'
+    }
+});
+const MessageActions = /*#__PURE__*/ forwardRef(({ className, visibility = 'always', actions = [], maxVisible, strings, 'aria-label': ariaLabel, children, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_ACTIONS_STRINGS,
+        ...strings
+    };
+    const limit = void 0 === maxVisible ? actions.length : Math.max(0, maxVisible);
+    const visible = actions.slice(0, limit);
+    const overflow = actions.slice(limit);
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 300,
+        skipDelayDuration: 150,
+        children: /*#__PURE__*/ jsxs("div", {
+            ref: ref,
+            role: "group",
+            "aria-label": ariaLabel ?? text.label,
+            "data-slot": "message-actions",
+            "data-visibility": visibility,
+            className: cn(messageActionsVariants({
+                visibility
+            }), className),
+            ...props,
+            children: [
+                children,
+                visible.map((action)=>/*#__PURE__*/ jsx(MessageAction, {
+                        label: action.label,
+                        disabled: action.disabled,
+                        onClick: action.onSelect,
+                        children: action.icon
+                    }, action.id)),
+                overflow.length > 0 && /*#__PURE__*/ jsx(MessageActionsOverflow, {
+                    items: overflow,
+                    strings: {
+                        more: text.more
+                    }
+                })
+            ]
+        })
+    });
+});
+MessageActions.displayName = 'MessageActions';
+const MessageAction = /*#__PURE__*/ forwardRef(({ label, tooltipSide = 'bottom', variant = 'ghost', size = '3xs', icon = true, ...props }, ref)=>/*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    ref: ref,
+                    "data-slot": "message-action",
+                    "aria-label": label,
+                    variant: variant,
+                    size: size,
+                    icon: icon,
+                    ...props
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                side: tooltipSide,
+                children: label
+            })
+        ]
+    }));
+MessageAction.displayName = 'MessageAction';
+const DEFAULT_MESSAGE_ACTION_COPY_STRINGS = {
+    copy: 'Copy',
+    copied: 'Copied'
+};
+const COPIED_RESET_MS = 1500;
+const MessageActionCopy = /*#__PURE__*/ forwardRef(({ text: copyText, onCopy, strings, onClick, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_ACTION_COPY_STRINGS,
+        ...strings
+    };
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(void 0);
+    useEffect(()=>()=>clearTimeout(timer.current), []);
+    const handleClick = async (event)=>{
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (!await copyTextToClipboard(copyText)) return;
+        onCopy?.(copyText);
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(()=>setCopied(false), COPIED_RESET_MS);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(MessageAction, {
+                ref: ref,
+                "data-copied": copied || void 0,
+                label: copied ? text.copied : text.copy,
+                onClick: handleClick,
+                ...props,
+                children: copied ? /*#__PURE__*/ jsx(Check, {}) : /*#__PURE__*/ jsx(Copy, {})
+            }),
+            /*#__PURE__*/ jsx("output", {
+                "aria-live": "polite",
+                className: "sr-only",
+                children: copied ? text.copied : ''
+            })
+        ]
+    });
+});
+MessageActionCopy.displayName = 'MessageActionCopy';
+const DEFAULT_MESSAGE_ACTION_FEEDBACK_STRINGS = {
+    label: 'Rate this response',
+    helpful: 'Helpful',
+    notHelpful: 'Not helpful'
+};
+const feedbackToggleClass = 'size-6 min-w-6 px-0 aria-pressed:bg-accent aria-pressed:text-accent-foreground future:aria-pressed:text-foreground';
+const MessageActionFeedback = /*#__PURE__*/ forwardRef(({ value: valueProp, defaultValue = null, onChange, disabled, strings, className, 'aria-label': ariaLabel, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_ACTION_FEEDBACK_STRINGS,
+        ...strings
+    };
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const value = void 0 === valueProp ? uncontrolled : valueProp;
+    const set = (next)=>{
+        if (next === value) return;
+        if (void 0 === valueProp) setUncontrolled(next);
+        onChange?.(next);
+    };
+    const thumbs = [
+        {
+            rating: 'up',
+            label: text.helpful,
+            icon: /*#__PURE__*/ jsx(ThumbsUp, {})
+        },
+        {
+            rating: 'down',
+            label: text.notHelpful,
+            icon: /*#__PURE__*/ jsx(ThumbsDown, {})
+        }
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        role: "group",
+        "aria-label": ariaLabel ?? text.label,
+        "data-slot": "message-action-feedback",
+        "data-value": value ?? void 0,
+        className: cn('flex items-center gap-0.5', className),
+        ...props,
+        children: thumbs.map(({ rating, label, icon })=>/*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(Toggle, {
+                            "data-slot": "message-action",
+                            size: "xs",
+                            className: feedbackToggleClass,
+                            "aria-label": label,
+                            pressed: value === rating,
+                            onPressedChange: ()=>set(rating),
+                            disabled: disabled,
+                            children: icon
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        side: "bottom",
+                        children: label
+                    })
+                ]
+            }, rating))
+    });
+});
+MessageActionFeedback.displayName = 'MessageActionFeedback';
+const MessageActionsOverflow = /*#__PURE__*/ forwardRef(({ items, strings, align = 'start', tooltipSide = 'bottom', ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_MESSAGE_ACTIONS_OVERFLOW_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(TooltipTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsx(Button, {
+                                ref: ref,
+                                "data-slot": "message-actions-overflow",
+                                "aria-label": text.more,
+                                variant: "ghost",
+                                size: "3xs",
+                                icon: true,
+                                ...props,
+                                children: /*#__PURE__*/ jsx(Ellipsis, {})
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        side: tooltipSide,
+                        children: text.more
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                align: align,
+                children: items.map((item)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        disabled: item.disabled,
+                        onSelect: item.onSelect,
+                        className: cn(item.destructive && 'text-error focus:bg-error-background focus:text-error'),
+                        children: [
+                            item.icon,
+                            item.label
+                        ]
+                    }, item.id))
+            })
+        ]
+    });
+});
+MessageActionsOverflow.displayName = 'MessageActionsOverflow';
+export { DEFAULT_MESSAGE_ACTIONS_OVERFLOW_STRINGS, DEFAULT_MESSAGE_ACTIONS_STRINGS, DEFAULT_MESSAGE_ACTION_COPY_STRINGS, DEFAULT_MESSAGE_ACTION_FEEDBACK_STRINGS, MessageAction, MessageActionCopy, MessageActionFeedback, MessageActions, MessageActionsOverflow, messageActionsVariants };

package/dist/components/ui/message.cjs

@@ -52,7 +52,7 @@ Message.displayName = 'Message';
 const MessageAvatar = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
         "data-slot": "message-avatar",
-        className: (0, index_cjs_namespaceObject.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),
+        className: (0, index_cjs_namespaceObject.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 group-has-[[data-slot=message-actions]]/message:-translate-y-10 group-has-[[data-slot=message-footer]]/message:group-has-[[data-slot=message-actions]]/message:-translate-y-16', className),
         ...props
     }));
 MessageAvatar.displayName = 'MessageAvatar';

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

@@ -3,6 +3,8 @@ import * as React from 'react';
  * Chat conversation row primitives, ported from shadcn/ui's chat components. A `Message` lays out
  * one turn: an optional `MessageAvatar`, then `MessageContent` holding a `MessageHeader`, the body
  * (usually a `Bubble`) and a `MessageFooter`. `align="end"` mirrors the row for the current user.
+ * A `MessageActions` bar goes inside `MessageContent` after the body, so it takes the same
+ * alignment as the bubble.
  */
 declare const MessageGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/components/ui/message.js

@@ -19,7 +19,7 @@ Message.displayName = 'Message';
 const MessageAvatar = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
         "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),
+        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 group-has-[[data-slot=message-actions]]/message:-translate-y-10 group-has-[[data-slot=message-footer]]/message:group-has-[[data-slot=message-actions]]/message:-translate-y-16', className),
         ...props
     }));
 MessageAvatar.displayName = 'MessageAvatar';

package/dist/components/ui/sources.cjs

@@ -0,0 +1,175 @@
+"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__, {
+    SourcesList: ()=>SourcesList,
+    DEFAULT_SOURCES_STRINGS: ()=>DEFAULT_SOURCES_STRINGS,
+    SourceItem: ()=>SourceItem,
+    Sources: ()=>Sources
+});
+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_collapsible_cjs_namespaceObject = require("./collapsible.cjs");
+const DEFAULT_SOURCES_STRINGS = {
+    sourceCount: (count)=>1 === count ? '1 source' : `${count} sources`,
+    opensInNewTab: '(opens in a new tab)'
+};
+const SourcesStringsContext = /*#__PURE__*/ external_react_namespaceObject.createContext(DEFAULT_SOURCES_STRINGS);
+const Sources = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, count, strings, children, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_SOURCES_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SourcesStringsContext.Provider, {
+        value: text,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_collapsible_cjs_namespaceObject.Collapsible, {
+            ref: ref,
+            "data-slot": "sources",
+            className: (0, index_cjs_namespaceObject.cn)('group/sources flex w-full min-w-0 flex-col gap-2', className),
+            ...props,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_collapsible_cjs_namespaceObject.CollapsibleTrigger, {
+                    "data-slot": "sources-trigger",
+                    className: "inline-flex h-7 w-fit cursor-pointer items-center gap-1.5 rounded-lg border border-border-subtle px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-surface-overlay hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3.5 [&_svg]:shrink-0",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Link2, {
+                            "aria-hidden": "true"
+                        }),
+                        text.sourceCount(count),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                            "aria-hidden": "true",
+                            className: "transition-transform group-data-[state=open]/sources:rotate-180"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_collapsible_cjs_namespaceObject.CollapsibleContent, {
+                    "data-slot": "sources-content",
+                    className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+                    children: children
+                })
+            ]
+        })
+    });
+});
+Sources.displayName = 'Sources';
+const SourcesList = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ol", {
+        ref: ref,
+        "data-slot": "sources-list",
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col gap-0.5 rounded-xl border border-border-subtle bg-card p-1', className),
+        ...props
+    }));
+SourcesList.displayName = 'SourcesList';
+const SourceItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, index, title, source, snippet, href, icon, onSelect, onClick, target = '_blank', rel, ...props }, ref)=>{
+    const text = external_react_namespaceObject.useContext(SourcesStringsContext);
+    const linkHref = (0, index_cjs_namespaceObject.safeHref)(href);
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (!event.defaultPrevented) onSelect?.({
+            index,
+            title,
+            source,
+            snippet,
+            href: linkHref
+        }, event);
+    };
+    const itemClassName = (0, index_cjs_namespaceObject.cn)('flex w-full min-w-0 cursor-pointer items-start gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm transition-colors hover:bg-surface-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className);
+    const newTab = '_blank' === target;
+    const body = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "data-slot": "source-index",
+                className: "mt-0.5 flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-full bg-muted px-1 text-[11px] font-medium leading-none text-muted-foreground tabular-nums",
+                children: index
+            }),
+            icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "data-slot": "source-icon",
+                className: "mt-0.5 flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_img]:size-4 [&_img]:rounded-sm [&_svg]:size-4",
+                children: icon
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                className: "flex min-w-0 flex-1 flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "data-slot": "source-title",
+                        className: "truncate font-medium text-foreground",
+                        children: title
+                    }),
+                    source && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "data-slot": "source-source",
+                        className: "truncate text-xs text-muted-foreground",
+                        children: source
+                    }),
+                    snippet && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "data-slot": "source-snippet",
+                        className: "line-clamp-2 text-xs leading-relaxed text-muted-foreground",
+                        children: snippet
+                    })
+                ]
+            }),
+            linkHref && newTab && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "sr-only",
+                children: text.opensInNewTab
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
+        "data-slot": "source-item",
+        className: "min-w-0",
+        children: linkHref ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
+            ref: ref,
+            href: linkHref,
+            target: target,
+            rel: rel ?? (newTab ? 'noopener noreferrer' : void 0),
+            className: itemClassName,
+            onClick: handleClick,
+            ...props,
+            children: body
+        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+            ref: ref,
+            type: "button",
+            className: itemClassName,
+            onClick: handleClick,
+            ...props,
+            children: body
+        })
+    });
+});
+SourceItem.displayName = 'SourceItem';
+exports.DEFAULT_SOURCES_STRINGS = __webpack_exports__.DEFAULT_SOURCES_STRINGS;
+exports.SourceItem = __webpack_exports__.SourceItem;
+exports.Sources = __webpack_exports__.Sources;
+exports.SourcesList = __webpack_exports__.SourcesList;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DEFAULT_SOURCES_STRINGS",
+    "SourceItem",
+    "Sources",
+    "SourcesList"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Collapsible } from './collapsible';
+/**
+ * The list of sources behind an assistant answer, collapsed behind a count. `Sources` owns the
+ * trigger; put a `SourcesList` of `SourceItem`s inside. Items do not navigate on their own unless
+ * given `href`; `onSelect` receives the item and the event, so a host can run its `citation-click`
+ * pre-hook and call `event.preventDefault()` to stop a link. The payload drops an `href` that is
+ * not http(s), mailto, tel or relative, so it is safe to open.
+ */
+export interface SourcesStrings {
+    /** Trigger text. A function so a host can apply its own plural rules. */
+    sourceCount: (count: number) => string;
+    /** Screen reader hint on links that open a new tab. */
+    opensInNewTab: string;
+}
+export declare const DEFAULT_SOURCES_STRINGS: SourcesStrings;
+export interface SourcesProps extends React.ComponentPropsWithoutRef<typeof Collapsible> {
+    /** Number of sources, shown in the trigger. */
+    count: number;
+    /** Overrides for any subset of the English strings. Also read by the `SourceItem`s inside. */
+    strings?: Partial<SourcesStrings>;
+}
+declare const Sources: React.ForwardRefExoticComponent<SourcesProps & React.RefAttributes<HTMLDivElement>>;
+declare const SourcesList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
+export interface SourceData {
+    index: number | string;
+    title: string;
+    source?: string;
+    snippet?: string;
+    href?: string;
+}
+type SourceItemElementProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'title' | 'type'>;
+export interface SourceItemProps extends SourceItemElementProps, SourceData {
+    /** Leading icon, such as a favicon or file type. */
+    icon?: React.ReactNode;
+    onSelect?: (source: SourceData, event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+}
+/**
+ * One source. A link when `href` is set and uses a safe protocol (new tab by default), otherwise a
+ * button for `onSelect`.
+ * The ref and extra props go to that link or button, not the wrapping `li`.
+ */
+declare const SourceItem: React.ForwardRefExoticComponent<SourceItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { Sources, SourcesList, SourceItem };

package/dist/components/ui/sources.js

@@ -0,0 +1,132 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Link2 } from "lucide-react";
+import { createContext, forwardRef, useContext } from "react";
+import { cn, safeHref } from "../../lib/index.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+const DEFAULT_SOURCES_STRINGS = {
+    sourceCount: (count)=>1 === count ? '1 source' : `${count} sources`,
+    opensInNewTab: '(opens in a new tab)'
+};
+const SourcesStringsContext = /*#__PURE__*/ createContext(DEFAULT_SOURCES_STRINGS);
+const Sources = /*#__PURE__*/ forwardRef(({ className, count, strings, children, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_SOURCES_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ jsx(SourcesStringsContext.Provider, {
+        value: text,
+        children: /*#__PURE__*/ jsxs(Collapsible, {
+            ref: ref,
+            "data-slot": "sources",
+            className: cn('group/sources flex w-full min-w-0 flex-col gap-2', className),
+            ...props,
+            children: [
+                /*#__PURE__*/ jsxs(CollapsibleTrigger, {
+                    "data-slot": "sources-trigger",
+                    className: "inline-flex h-7 w-fit cursor-pointer items-center gap-1.5 rounded-lg border border-border-subtle px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-surface-overlay hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3.5 [&_svg]:shrink-0",
+                    children: [
+                        /*#__PURE__*/ jsx(Link2, {
+                            "aria-hidden": "true"
+                        }),
+                        text.sourceCount(count),
+                        /*#__PURE__*/ jsx(ChevronDown, {
+                            "aria-hidden": "true",
+                            className: "transition-transform group-data-[state=open]/sources:rotate-180"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(CollapsibleContent, {
+                    "data-slot": "sources-content",
+                    className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+                    children: children
+                })
+            ]
+        })
+    });
+});
+Sources.displayName = 'Sources';
+const SourcesList = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("ol", {
+        ref: ref,
+        "data-slot": "sources-list",
+        className: cn('flex flex-col gap-0.5 rounded-xl border border-border-subtle bg-card p-1', className),
+        ...props
+    }));
+SourcesList.displayName = 'SourcesList';
+const SourceItem = /*#__PURE__*/ forwardRef(({ className, index, title, source, snippet, href, icon, onSelect, onClick, target = '_blank', rel, ...props }, ref)=>{
+    const text = useContext(SourcesStringsContext);
+    const linkHref = safeHref(href);
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (!event.defaultPrevented) onSelect?.({
+            index,
+            title,
+            source,
+            snippet,
+            href: linkHref
+        }, event);
+    };
+    const itemClassName = cn('flex w-full min-w-0 cursor-pointer items-start gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm transition-colors hover:bg-surface-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className);
+    const newTab = '_blank' === target;
+    const body = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-slot": "source-index",
+                className: "mt-0.5 flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-full bg-muted px-1 text-[11px] font-medium leading-none text-muted-foreground tabular-nums",
+                children: index
+            }),
+            icon && /*#__PURE__*/ jsx("span", {
+                "data-slot": "source-icon",
+                className: "mt-0.5 flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_img]:size-4 [&_img]:rounded-sm [&_svg]:size-4",
+                children: icon
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: "flex min-w-0 flex-1 flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "data-slot": "source-title",
+                        className: "truncate font-medium text-foreground",
+                        children: title
+                    }),
+                    source && /*#__PURE__*/ jsx("span", {
+                        "data-slot": "source-source",
+                        className: "truncate text-xs text-muted-foreground",
+                        children: source
+                    }),
+                    snippet && /*#__PURE__*/ jsx("span", {
+                        "data-slot": "source-snippet",
+                        className: "line-clamp-2 text-xs leading-relaxed text-muted-foreground",
+                        children: snippet
+                    })
+                ]
+            }),
+            linkHref && newTab && /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: text.opensInNewTab
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("li", {
+        "data-slot": "source-item",
+        className: "min-w-0",
+        children: linkHref ? /*#__PURE__*/ jsx("a", {
+            ref: ref,
+            href: linkHref,
+            target: target,
+            rel: rel ?? (newTab ? 'noopener noreferrer' : void 0),
+            className: itemClassName,
+            onClick: handleClick,
+            ...props,
+            children: body
+        }) : /*#__PURE__*/ jsx("button", {
+            ref: ref,
+            type: "button",
+            className: itemClassName,
+            onClick: handleClick,
+            ...props,
+            children: body
+        })
+    });
+});
+SourceItem.displayName = 'SourceItem';
+export { DEFAULT_SOURCES_STRINGS, SourceItem, Sources, SourcesList };