@uipath/apollo-wind 2.70.0 → 2.72.0

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

@@ -14,6 +14,7 @@ export * from './calendar';
 export * from './card';
 export * from './chart';
 export * from './chat-composer';
+export * from './chat-hero';
 export * from './checkbox';
 export * from './citation';
 export * from './code-block';
@@ -53,20 +54,24 @@ export * from './message-scroller';
 export * from './model-picker';
 export * from './multi-select';
 export * from './pagination';
+export * from './panel-tabs';
 export * from './popover';
 export * from './portal-container';
 export * from './progress';
 export * from './prompt-editor';
+export * from './prompt-suggestions';
 export * from './prompt-value-control';
 export * from './quick-form-field';
 export * from './radio-group';
+export { ReferenceChip, type ReferenceChipProps } from './reference-chip';
+export { getReferenceChipColors } from './reference-chip-colors';
 export * from './resizable';
 export * from './scroll-area';
 export * from './search';
 export * from './select';
 export * from './separator';
-export * from './sidebar';
 export * from './sheet';
+export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './sonner';
@@ -76,7 +81,6 @@ export * from './stats-card';
 export * from './stepper';
 export * from './switch';
 export * from './table';
-export * from './panel-tabs';
 export * from './tabs';
 export * from './textarea';
 export * from './thinking-indicator';

package/dist/components/ui/index.js

@@ -1,3 +1,5 @@
+import { ReferenceChip } from "./reference-chip.js";
+import { getReferenceChipColors } from "./reference-chip-colors.js";
 import tree_view, { TreeView } from "./tree-view.js";
 export * from "./accordion.js";
 export * from "./alert.js";
@@ -15,6 +17,7 @@ export * from "./calendar.js";
 export * from "./card.js";
 export * from "./chart.js";
 export * from "./chat-composer.js";
+export * from "./chat-hero.js";
 export * from "./checkbox.js";
 export * from "./citation.js";
 export * from "./code-block.js";
@@ -54,10 +57,12 @@ export * from "./message-scroller/index.js";
 export * from "./model-picker/index.js";
 export * from "./multi-select.js";
 export * from "./pagination.js";
+export * from "./panel-tabs.js";
 export * from "./popover.js";
 export * from "./portal-container.js";
 export * from "./progress.js";
 export * from "./prompt-editor/index.js";
+export * from "./prompt-suggestions.js";
 export * from "./prompt-value-control.js";
 export * from "./quick-form-field/index.js";
 export * from "./radio-group.js";
@@ -66,8 +71,8 @@ export * from "./scroll-area.js";
 export * from "./search.js";
 export * from "./select.js";
 export * from "./separator.js";
-export * from "./sidebar/index.js";
 export * from "./sheet.js";
+export * from "./sidebar/index.js";
 export * from "./skeleton.js";
 export * from "./slider.js";
 export * from "./sonner.js";
@@ -77,7 +82,6 @@ export * from "./stats-card.js";
 export * from "./stepper.js";
 export * from "./switch.js";
 export * from "./table.js";
-export * from "./panel-tabs.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
 export * from "./thinking-indicator.js";
@@ -87,4 +91,4 @@ export * from "./tool-call.js";
 export * from "./tooltip.js";
 export * from "./variable-picker/index.js";
 export * from "./variable-value-control.js";
-export { tree_view as FileTreeView, TreeView };
+export { tree_view as FileTreeView, ReferenceChip, TreeView, getReferenceChipColors };

package/dist/components/ui/prompt-editor/components/MarkdownPreview.cjs

@@ -40,6 +40,7 @@ const external_dompurify_namespaceObject = require("dompurify");
 var external_dompurify_default = /*#__PURE__*/ __webpack_require__.n(external_dompurify_namespaceObject);
 const external_marked_namespaceObject = require("marked");
 const external_react_namespaceObject = require("react");
+const external_reference_chip_colors_cjs_namespaceObject = require("../../reference-chip-colors.cjs");
 const external_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
 const external_token_icon_markup_cjs_namespaceObject = require("./token-icon-markup.cjs");
 const marked = new external_marked_namespaceObject.Marked({
@@ -47,6 +48,7 @@ const marked = new external_marked_namespaceObject.Marked({
     gfm: true,
     breaks: true
 });
+const referenceColors = (0, external_reference_chip_colors_cjs_namespaceObject.getReferenceChipColors)().valid;
 const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview { color: var(--color-foreground); }
 .prompt-editor-preview-empty { color: var(--color-muted-foreground); }
@@ -73,8 +75,8 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
 .prompt-editor-preview strong { font-weight: 700; }
 .prompt-editor-preview em { font-style: italic; }
-.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-info-background); color: var(--color-info-text); }
-.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-info-icon); width: 14px; height: 14px; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: ${referenceColors.background}; color: ${referenceColors.text}; }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: ${referenceColors.icon}; width: 14px; height: 14px; }
 `;
 const PURIFY_CONFIG = {
     ALLOWED_TAGS: [

package/dist/components/ui/prompt-editor/components/MarkdownPreview.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import dompurify from "dompurify";
 import { Marked } from "marked";
 import { useMemo } from "react";
+import { getReferenceChipColors } from "../../reference-chip-colors.js";
 import { usePromptEditorConfig } from "../prompt-editor-config.js";
 import { buildTokenIconSvgMarkup } from "./token-icon-markup.js";
 const marked = new Marked({
@@ -9,6 +10,7 @@ const marked = new Marked({
     gfm: true,
     breaks: true
 });
+const referenceColors = getReferenceChipColors().valid;
 const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview { color: var(--color-foreground); }
 .prompt-editor-preview-empty { color: var(--color-muted-foreground); }
@@ -35,8 +37,8 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
 .prompt-editor-preview strong { font-weight: 700; }
 .prompt-editor-preview em { font-style: italic; }
-.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-info-background); color: var(--color-info-text); }
-.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-info-icon); width: 14px; height: 14px; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: ${referenceColors.background}; color: ${referenceColors.text}; }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: ${referenceColors.icon}; width: 14px; height: 14px; }
 `;
 const PURIFY_CONFIG = {
     ALLOWED_TAGS: [

package/dist/components/ui/prompt-editor/components/TokenPill.cjs

@@ -29,8 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_reference_chip_cjs_namespaceObject = require("../../reference-chip.cjs");
 const external_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
-const external_types_cjs_namespaceObject = require("../types.cjs");
 const TOKEN_TYPE_ICON = {
     input: external_lucide_react_namespaceObject.Variable,
     output: external_lucide_react_namespaceObject.SquareFunction,
@@ -40,75 +40,20 @@ const TOKEN_TYPE_ICON = {
 };
 const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
     const { strings } = (0, external_prompt_editor_config_cjs_namespaceObject.usePromptEditorConfig)();
-    const PROMPT_EDITOR_TOKEN_COLORS = (0, external_types_cjs_namespaceObject.getPromptEditorTokenColors)();
-    const colors = isInvalid && !diffType ? PROMPT_EDITOR_TOKEN_COLORS.invalid : PROMPT_EDITOR_TOKEN_COLORS.valid;
     const Icon = TOKEN_TYPE_ICON[tokenType];
-    const handleRemoveMouseDown = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const handleRemoveClick = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        onRemove?.();
-    };
-    const bgColor = diffType ? 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)' : colors.background;
-    const outerClassName = [
-        'relative inline-flex items-center align-middle gap-[3px] h-5 rounded px-1 text-[13px] leading-5 outline-offset-1',
-        readonly ? 'cursor-default' : 'cursor-pointer',
-        'removed' === diffType ? 'line-through opacity-60' : '',
-        isSelected ? 'z-10' : ''
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_reference_chip_cjs_namespaceObject.ReferenceChip, {
+        label: value,
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {}),
+        onRemove: onRemove,
+        removeLabel: strings.removeToken,
+        readOnly: readonly,
+        invalid: isInvalid && !diffType,
+        selected: isSelected,
         onMouseDown: onMouseDown,
-        className: outerClassName,
-        style: {
-            backgroundColor: bgColor,
-            outline: isSelected ? `2px solid ${colors.border}` : 'none'
-        },
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "inline-flex shrink-0",
-                style: {
-                    color: colors.icon
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                    className: "h-3.5 w-3.5"
-                })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "font-normal whitespace-nowrap",
-                style: {
-                    color: colors.text,
-                    fontFamily: "'Noto Sans', sans-serif"
-                },
-                children: value
-            }),
-            !readonly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                type: "button",
-                "aria-label": strings.removeToken,
-                className: "inline-flex items-center justify-center p-px border-0 bg-transparent cursor-pointer rounded-[2px] w-4 h-4",
-                style: {
-                    color: colors.text
-                },
-                onMouseDown: handleRemoveMouseDown,
-                onClick: handleRemoveClick,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
-                    width: "12",
-                    height: "12",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                        d: "M18 6L6 18M6 6L18 18",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
-                    })
-                })
-            })
-        ]
+        className: `${readonly ? 'cursor-default' : 'cursor-pointer'} ${'removed' === diffType ? 'line-through opacity-60' : ''}`,
+        style: diffType ? {
+            backgroundColor: 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)'
+        } : void 0
     });
 };
 const TokenPill = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(TokenPillBase);

package/dist/components/ui/prompt-editor/components/TokenPill.js

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Database, Paperclip, SquareFunction, Variable } from "lucide-react";
 import { memo } from "react";
+import { ReferenceChip } from "../../reference-chip.js";
 import { usePromptEditorConfig } from "../prompt-editor-config.js";
-import { getPromptEditorTokenColors } from "../types.js";
 const TOKEN_TYPE_ICON = {
     input: Variable,
     output: SquareFunction,
@@ -12,75 +12,20 @@ const TOKEN_TYPE_ICON = {
 };
 const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
     const { strings } = usePromptEditorConfig();
-    const PROMPT_EDITOR_TOKEN_COLORS = getPromptEditorTokenColors();
-    const colors = isInvalid && !diffType ? PROMPT_EDITOR_TOKEN_COLORS.invalid : PROMPT_EDITOR_TOKEN_COLORS.valid;
     const Icon = TOKEN_TYPE_ICON[tokenType];
-    const handleRemoveMouseDown = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const handleRemoveClick = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        onRemove?.();
-    };
-    const bgColor = diffType ? 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)' : colors.background;
-    const outerClassName = [
-        'relative inline-flex items-center align-middle gap-[3px] h-5 rounded px-1 text-[13px] leading-5 outline-offset-1',
-        readonly ? 'cursor-default' : 'cursor-pointer',
-        'removed' === diffType ? 'line-through opacity-60' : '',
-        isSelected ? 'z-10' : ''
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ jsxs("span", {
+    return /*#__PURE__*/ jsx(ReferenceChip, {
+        label: value,
+        icon: /*#__PURE__*/ jsx(Icon, {}),
+        onRemove: onRemove,
+        removeLabel: strings.removeToken,
+        readOnly: readonly,
+        invalid: isInvalid && !diffType,
+        selected: isSelected,
         onMouseDown: onMouseDown,
-        className: outerClassName,
-        style: {
-            backgroundColor: bgColor,
-            outline: isSelected ? `2px solid ${colors.border}` : 'none'
-        },
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                className: "inline-flex shrink-0",
-                style: {
-                    color: colors.icon
-                },
-                children: /*#__PURE__*/ jsx(Icon, {
-                    className: "h-3.5 w-3.5"
-                })
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "font-normal whitespace-nowrap",
-                style: {
-                    color: colors.text,
-                    fontFamily: "'Noto Sans', sans-serif"
-                },
-                children: value
-            }),
-            !readonly && /*#__PURE__*/ jsx("button", {
-                type: "button",
-                "aria-label": strings.removeToken,
-                className: "inline-flex items-center justify-center p-px border-0 bg-transparent cursor-pointer rounded-[2px] w-4 h-4",
-                style: {
-                    color: colors.text
-                },
-                onMouseDown: handleRemoveMouseDown,
-                onClick: handleRemoveClick,
-                children: /*#__PURE__*/ jsx("svg", {
-                    width: "12",
-                    height: "12",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /*#__PURE__*/ jsx("path", {
-                        d: "M18 6L6 18M6 6L18 18",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
-                    })
-                })
-            })
-        ]
+        className: `${readonly ? 'cursor-default' : 'cursor-pointer'} ${'removed' === diffType ? 'line-through opacity-60' : ''}`,
+        style: diffType ? {
+            backgroundColor: 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)'
+        } : void 0
     });
 };
 const TokenPill = /*#__PURE__*/ memo(TokenPillBase);

package/dist/components/ui/prompt-editor/types.cjs

@@ -29,20 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
     isPromptEditorNonTextToken: ()=>isPromptEditorNonTextToken,
     isPromptEditorTextToken: ()=>isPromptEditorTextToken
 });
-const getPromptEditorTokenColors = ()=>({
-        valid: {
-            background: 'var(--color-info-background)',
-            border: 'var(--color-info-icon)',
-            text: 'var(--color-info-text)',
-            icon: 'var(--color-info-icon)'
-        },
-        invalid: {
-            background: 'var(--color-error-background)',
-            border: 'var(--color-error-icon)',
-            text: 'var(--color-error-text)',
-            icon: 'var(--color-error-icon)'
-        }
-    });
+const external_reference_chip_colors_cjs_namespaceObject = require("../reference-chip-colors.cjs");
+const getPromptEditorTokenColors = external_reference_chip_colors_cjs_namespaceObject.getReferenceChipColors;
 const getPromptEditorTokenTypeLabel = (type, labels)=>{
     switch(type){
         case 'input':

package/dist/components/ui/prompt-editor/types.d.ts

@@ -63,7 +63,20 @@ export interface PromptEditorTokenColorConfig {
  * Two-state palette: invalid = red, valid = blue. Backed by apollo-wind's semantic design tokens,
  * which already resolve per light/dark theme via CSS — no JS theme detection needed.
  */
-export declare const getPromptEditorTokenColors: () => Record<"valid" | "invalid", PromptEditorTokenColorConfig>;
+export declare const getPromptEditorTokenColors: () => {
+    valid: {
+        background: string;
+        border: string;
+        text: string;
+        icon: string;
+    };
+    invalid: {
+        background: string;
+        border: string;
+        text: string;
+        icon: string;
+    };
+};
 /** The token-type label subset of `PromptEditorStrings` (structural, to avoid a config↔types cycle). */
 export interface PromptEditorTokenTypeLabels {
     tokenTypeInput: string;

package/dist/components/ui/prompt-editor/types.js

@@ -1,17 +1,5 @@
-const getPromptEditorTokenColors = ()=>({
-        valid: {
-            background: 'var(--color-info-background)',
-            border: 'var(--color-info-icon)',
-            text: 'var(--color-info-text)',
-            icon: 'var(--color-info-icon)'
-        },
-        invalid: {
-            background: 'var(--color-error-background)',
-            border: 'var(--color-error-icon)',
-            text: 'var(--color-error-text)',
-            icon: 'var(--color-error-icon)'
-        }
-    });
+import { getReferenceChipColors } from "../reference-chip-colors.js";
+const getPromptEditorTokenColors = getReferenceChipColors;
 const getPromptEditorTokenTypeLabel = (type, labels)=>{
     switch(type){
         case 'input':

package/dist/components/ui/prompt-suggestions.cjs

@@ -0,0 +1,133 @@
+"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__, {
+    DEFAULT_PROMPT_SUGGESTIONS_STRINGS: ()=>DEFAULT_PROMPT_SUGGESTIONS_STRINGS,
+    PromptSuggestions: ()=>PromptSuggestions,
+    promptSuggestionsListVariants: ()=>promptSuggestionsListVariants,
+    promptSuggestionVariants: ()=>promptSuggestionVariants
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+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 DEFAULT_PROMPT_SUGGESTIONS_STRINGS = {
+    label: 'Suggestions'
+};
+const promptSuggestionsListVariants = (0, external_class_variance_authority_namespaceObject.cva)('flex min-w-0 gap-2', {
+    variants: {
+        orientation: {
+            vertical: 'flex-col items-start',
+            horizontal: '-mx-1 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none overflow-x-auto overscroll-x-contain px-1 py-1'
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical'
+    }
+});
+const promptSuggestionVariants = (0, external_class_variance_authority_namespaceObject.cva)('inline-flex max-w-full cursor-pointer items-center border border-border-subtle bg-surface-raised text-left font-normal text-foreground transition-colors hover:border-border hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        density: {
+            comfortable: 'gap-2 px-4 py-2 text-sm leading-5 [&_svg]:size-4 rounded-xl',
+            compact: 'gap-1.5 px-2 py-1 text-xs leading-4 [&_svg]:size-3.5 rounded-lg'
+        },
+        orientation: {
+            vertical: 'whitespace-normal',
+            horizontal: 'flex-none snap-start whitespace-nowrap'
+        }
+    },
+    defaultVariants: {
+        density: 'comfortable',
+        orientation: 'vertical'
+    }
+});
+const PromptSuggestions = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, suggestions, onSelect, orientation, density, showLabel = false, animated = false, disabled = false, strings, ...props }, ref)=>{
+    const labelId = external_react_namespaceObject.useId();
+    const resolvedOrientation = orientation ?? 'vertical';
+    const resolvedDensity = density ?? 'comfortable';
+    const text = {
+        ...DEFAULT_PROMPT_SUGGESTIONS_STRINGS,
+        ...strings
+    };
+    if (0 === suggestions.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: ref,
+        role: "group",
+        "aria-label": showLabel ? void 0 : text.label,
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "data-slot": "prompt-suggestions",
+        "data-orientation": resolvedOrientation,
+        "data-density": resolvedDensity,
+        className: (0, index_cjs_namespaceObject.cn)('flex w-full min-w-0 flex-col gap-1', animated && 'animate-slide-in-from-bottom', className),
+        ...props,
+        children: [
+            showLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                id: labelId,
+                "data-slot": "prompt-suggestions-label",
+                className: (0, index_cjs_namespaceObject.cn)('text-start font-semibold text-foreground', 'compact' === resolvedDensity ? 'text-xs leading-4' : 'text-sm leading-5'),
+                children: text.label
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                "data-slot": "prompt-suggestions-list",
+                className: promptSuggestionsListVariants({
+                    orientation: resolvedOrientation
+                }),
+                children: suggestions.map((suggestion, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                        type: "button",
+                        "data-slot": "prompt-suggestion",
+                        "data-index": index,
+                        disabled: disabled,
+                        className: promptSuggestionVariants({
+                            density: resolvedDensity,
+                            orientation: resolvedOrientation
+                        }),
+                        onClick: ()=>onSelect?.(suggestion),
+                        children: [
+                            suggestion.icon,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "min-w-0",
+                                children: suggestion.label
+                            })
+                        ]
+                    }, suggestion.id ?? suggestion.label))
+            })
+        ]
+    });
+});
+PromptSuggestions.displayName = 'PromptSuggestions';
+exports.DEFAULT_PROMPT_SUGGESTIONS_STRINGS = __webpack_exports__.DEFAULT_PROMPT_SUGGESTIONS_STRINGS;
+exports.PromptSuggestions = __webpack_exports__.PromptSuggestions;
+exports.promptSuggestionVariants = __webpack_exports__.promptSuggestionVariants;
+exports.promptSuggestionsListVariants = __webpack_exports__.promptSuggestionsListVariants;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DEFAULT_PROMPT_SUGGESTIONS_STRINGS",
+    "PromptSuggestions",
+    "promptSuggestionVariants",
+    "promptSuggestionsListVariants"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/prompt-suggestions.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+/**
+ * Prompts the user can pick instead of typing, as a group of chips. `onSelect` receives the
+ * suggestion; whether that sends it or puts it in the composer is the caller's call:
+ *
+ * ```tsx
+ * <PromptSuggestions
+ *   suggestions={[{ label: 'Summarize', prompt: 'Summarize this conversation' }]}
+ *   onSelect={({ label, prompt }) => send(prompt ?? label)}
+ * />
+ * ```
+ */
+export interface PromptSuggestionsStrings {
+    /** Accessible name of the group, and its visible title with `showLabel`. */
+    label: string;
+}
+export declare const DEFAULT_PROMPT_SUGGESTIONS_STRINGS: PromptSuggestionsStrings;
+/** One chip. Shaped so a chat service's `{ label, prompt }` suggestions pass straight in. */
+export interface PromptSuggestionItem {
+    label: string;
+    /** The text to send or prefill, when it differs from the label. */
+    prompt?: string;
+    /** Keys the chip. Defaults to `label`. */
+    id?: string;
+    /** Leading icon. */
+    icon?: React.ReactNode;
+}
+export type PromptSuggestionsDensity = 'comfortable' | 'compact';
+declare const promptSuggestionsListVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const promptSuggestionVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PromptSuggestionsOrientation = 'vertical' | 'horizontal';
+export interface PromptSuggestionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'> {
+    suggestions: PromptSuggestionItem[];
+    onSelect?: (suggestion: PromptSuggestionItem) => void;
+    orientation?: PromptSuggestionsOrientation;
+    density?: PromptSuggestionsDensity;
+    /** Shows `strings.label` as a title above the chips, as a chat does after a reply. */
+    showLabel?: boolean;
+    /** Slides the group in from below when it mounts. Only fades under reduced motion. */
+    animated?: boolean;
+    disabled?: boolean;
+    /** Overrides for any subset of the English strings. */
+    strings?: Partial<PromptSuggestionsStrings>;
+}
+/** Stacks vertically by default; `horizontal` keeps one row that scrolls when it overflows. */
+declare const PromptSuggestions: React.ForwardRefExoticComponent<PromptSuggestionsProps & React.RefAttributes<HTMLDivElement>>;
+export { PromptSuggestions, promptSuggestionsListVariants, promptSuggestionVariants };