@uipath/apollo-wind 2.69.0 → 2.71.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/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 };

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/index.js";
+const DEFAULT_PROMPT_SUGGESTIONS_STRINGS = {
+    label: 'Suggestions'
+};
+const promptSuggestionsListVariants = 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 = 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__*/ forwardRef(({ className, suggestions, onSelect, orientation, density, showLabel = false, animated = false, disabled = false, strings, ...props }, ref)=>{
+    const labelId = useId();
+    const resolvedOrientation = orientation ?? 'vertical';
+    const resolvedDensity = density ?? 'comfortable';
+    const text = {
+        ...DEFAULT_PROMPT_SUGGESTIONS_STRINGS,
+        ...strings
+    };
+    if (0 === suggestions.length) return null;
+    return /*#__PURE__*/ 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: cn('flex w-full min-w-0 flex-col gap-1', animated && 'animate-slide-in-from-bottom', className),
+        ...props,
+        children: [
+            showLabel && /*#__PURE__*/ jsx("div", {
+                id: labelId,
+                "data-slot": "prompt-suggestions-label",
+                className: cn('text-start font-semibold text-foreground', 'compact' === resolvedDensity ? 'text-xs leading-4' : 'text-sm leading-5'),
+                children: text.label
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-slot": "prompt-suggestions-list",
+                className: promptSuggestionsListVariants({
+                    orientation: resolvedOrientation
+                }),
+                children: suggestions.map((suggestion, index)=>/*#__PURE__*/ 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__*/ jsx("span", {
+                                className: "min-w-0",
+                                children: suggestion.label
+                            })
+                        ]
+                    }, suggestion.id ?? suggestion.label))
+            })
+        ]
+    });
+});
+PromptSuggestions.displayName = 'PromptSuggestions';
+export { DEFAULT_PROMPT_SUGGESTIONS_STRINGS, PromptSuggestions, promptSuggestionVariants, promptSuggestionsListVariants };

package/dist/components/ui/quick-form-field/components/field-header.cjs

@@ -39,7 +39,7 @@ const ai_assist_action_cjs_namespaceObject = require("../../field-actions/ai-ass
 const collapse_cjs_namespaceObject = require("../../field-actions/collapse.cjs");
 const insert_variable_action_cjs_namespaceObject = require("../../field-actions/insert-variable-action.cjs");
 const external_types_cjs_namespaceObject = require("../types.cjs");
-function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = external_types_cjs_namespaceObject.FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
+function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = external_types_cjs_namespaceObject.FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
     const [pickerItems, optionsBySelectionId] = (0, external_react_namespaceObject.useMemo)(()=>{
         const byId = new Map();
         const toItem = (v, id)=>{
@@ -97,7 +97,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
                                                         type: "button",
                                                         "aria-label": strings.fieldTypeAriaLabel,
-                                                        className: (0, index_cjs_namespaceObject.cn)('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground', collapsedPaddingClass),
+                                                        disabled: disabled,
+                                                        className: (0, index_cjs_namespaceObject.cn)('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50', collapsedPaddingClass),
                                                         children: [
                                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typeMeta.icon, {
                                                                 size: 12
@@ -155,6 +156,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                             size: "sm",
                                                             checked: !!required,
                                                             onCheckedChange: onRequiredChange,
+                                                            disabled: disabled,
                                                             className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
                                                             "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
                                                         })
@@ -179,7 +181,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                                                                     type: "button",
                                                                     "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel,
-                                                                    className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                                                    disabled: disabled,
+                                                                    className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
                                                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Asterisk, {
                                                                         size: 12
                                                                     })
@@ -205,6 +208,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                                 size: "sm",
                                                                 checked: !!required,
                                                                 onCheckedChange: onRequiredChange,
+                                                                disabled: disabled,
                                                                 className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
                                                                 "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
                                                             })
@@ -220,7 +224,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                 children: [
                                     onGenerateWithAi && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ai_assist_action_cjs_namespaceObject.AiAssistAction, {
                                         onGenerate: onGenerateWithAi,
-                                        hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, typeMeta.supportsExpression)),
+                                        disabled: disabled,
+                                        hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, isExpression)),
                                         strings: {
                                             trigger: strings.aiAssistAriaLabel,
                                             tooltip: strings.aiAssistTooltip,

package/dist/components/ui/quick-form-field/components/field-header.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { QuickFieldType, QuickFormFieldOption, QuickFormFieldStrings } from '../types';
-export declare function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions, }: {
+export declare function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions, }: {
     label?: ReactNode;
     fieldId: string;
     fieldLabel: string;
@@ -11,6 +11,9 @@ export declare function FieldHeader({ label, fieldId, fieldLabel, required, fiel
     onFieldTypeChange?: (fieldType: QuickFieldType) => void;
     onRequiredChange?: (required: boolean) => void;
     compact?: boolean;
+    disabled: boolean;
+    /** Whether the AI output is described as an expression rather than a value. */
+    isExpression: boolean;
     showFieldActions: boolean;
     onValueChange?: (value: string) => void;
     variables: QuickFormFieldOption[];