@epicbagel/saas-kit 1.6.0 → 1.7.0

package/README.md

@@ -94,7 +94,8 @@ public in 1.1.0, and these were the decisions about its props then:
   ("Thinking…"), `scrollButtonLabel` ("Scroll to latest message"),
   `uploadingLabel` ("Uploading…"), `voiceHeroLabel` ("Tap to speak"),
   `voiceHeroSwitchLabel` ("or type instead"), `examplePromptsLabel` ("Try"),
-  `examplePromptsLoadingLabel` ("Loading suggestions…"), `addFilesLabel`,
+  `examplePromptsLoadingLabel` ("Loading suggestions…"),
+  `replySuggestionsLabel` ("Suggested replies"), `addFilesLabel`,
   `placeholder` and `activePlaceholder`. The defaults are plain English with
   no product voice, and the empty state has no title unless you pass
   `emptyTitle`. The icon buttons' accessible names ("Send", "Add to
@@ -114,6 +115,15 @@ public in 1.1.0, and these were the decisions about its props then:
 - **Example prompts.** `examplePromptsVariant` is `chips` (the default: chips
   that wrap onto as many lines as they need), `row` (one line that scrolls
   sideways) or `cards` (a two-column grid).
+- **Reply suggestions (1.7.0).** `replySuggestions` are the replies the
+  conversation offers next. They show once the conversation has started, at
+  the composer, directly above the input, as the example prompts' chips (one
+  implementation draws both), and wrap rather than cover the input on a
+  phone. `replySuggestionsLabel` ("Suggested replies") names the group.
+  Picking a suggestion of either kind sends only its words, `onSend(text,
+  [])`: the draft and staged files stay, and a failure is reported without
+  touching them. Suggestions are disabled while `pending`; pass none once
+  they no longer apply.
 - **Failed sends.** When `onSend` rejects, Chat puts the text back in the
   composer and calls `onSendError`; without one it reports the rejection
   through `reportError`, so a failure is never silent.

package/dist/primitives/attachment.d.cts

@@ -12,7 +12,7 @@ declare function Attachment({ className, state, size, orientation, ...props }: R
     state?: "idle" | "uploading" | "processing" | "error" | "done";
 }): react_jsx_runtime.JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-    variant?: "image" | "icon" | null | undefined;
+    variant?: "icon" | "image" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): react_jsx_runtime.JSX.Element;
 declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;

package/dist/primitives/attachment.d.ts

@@ -12,7 +12,7 @@ declare function Attachment({ className, state, size, orientation, ...props }: R
     state?: "idle" | "uploading" | "processing" | "error" | "done";
 }): react_jsx_runtime.JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-    variant?: "image" | "icon" | null | undefined;
+    variant?: "icon" | "image" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): react_jsx_runtime.JSX.Element;
 declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;

package/dist/primitives/badge.d.cts

@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ElementType } from 'react';
 
 declare const badgeVariants: (props?: ({
-    variant?: "neutral" | "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | null | undefined;
+    variant?: "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     weight?: "normal" | "semibold" | "bold";

package/dist/primitives/badge.d.ts

@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ElementType } from 'react';
 
 declare const badgeVariants: (props?: ({
-    variant?: "neutral" | "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | null | undefined;
+    variant?: "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     weight?: "normal" | "semibold" | "bold";

package/dist/primitives/bubble.d.cts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare const bubbleVariants: (props?: ({
-    variant?: "default" | "muted" | "ghost" | "secondary" | "destructive" | "outline" | "tinted" | null | undefined;
+    variant?: "muted" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "tinted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";

package/dist/primitives/bubble.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare const bubbleVariants: (props?: ({
-    variant?: "default" | "muted" | "ghost" | "secondary" | "destructive" | "outline" | "tinted" | null | undefined;
+    variant?: "muted" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "tinted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";

package/dist/primitives/button.d.cts

@@ -4,13 +4,13 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "ghost" | "secondary" | "destructive" | "outline" | "outline-muted" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
-    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "tone" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "outline-muted" | "ghost" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
+    size?: "filter" | "status" | "icon" | "toolbar" | "sm" | "lg" | "default" | "micro" | "compact" | "hero" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | "tone" | null | undefined;
     width?: "auto" | "full" | "responsive" | null | undefined;
     align?: "center" | "start" | null | undefined;
     shrink?: boolean | null | undefined;
     shape?: "circle" | "default" | "pill" | null | undefined;
-    ring?: "none" | "surface" | null | undefined;
+    ring?: "surface" | "none" | null | undefined;
     grow?: boolean | null | undefined;
     minWidth?: "auto" | "zero" | null | undefined;
     textAlign?: "center" | "start" | null | undefined;

package/dist/primitives/button.d.ts

@@ -4,13 +4,13 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "ghost" | "secondary" | "destructive" | "outline" | "outline-muted" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
-    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "tone" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "outline-muted" | "ghost" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
+    size?: "filter" | "status" | "icon" | "toolbar" | "sm" | "lg" | "default" | "micro" | "compact" | "hero" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | "tone" | null | undefined;
     width?: "auto" | "full" | "responsive" | null | undefined;
     align?: "center" | "start" | null | undefined;
     shrink?: boolean | null | undefined;
     shape?: "circle" | "default" | "pill" | null | undefined;
-    ring?: "none" | "surface" | null | undefined;
+    ring?: "surface" | "none" | null | undefined;
     grow?: boolean | null | undefined;
     minWidth?: "auto" | "zero" | null | undefined;
     textAlign?: "center" | "start" | null | undefined;

package/dist/primitives/chat.cjs

@@ -629,27 +629,40 @@ var EXAMPLE_PROMPT_LAYOUTS = {
   row: "row",
   cards: "grid"
 };
-function ExamplePrompts({
-  prompts,
+function ChatSuggestions({
+  slot,
+  items,
   onSelect,
-  label = "Try",
+  label,
+  showLabel = true,
   variant = "chips",
+  disabled = false,
   className
 }) {
   const labelId = _react.useId.call(void 0, );
-  if (prompts.length === 0) return null;
+  if (items.length === 0) return null;
   const cards = variant === "cards";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "chat-examples", "data-variant": variant, className: _chunkKWLSBTB2cjs.cn.call(void 0, cards ? "mt-4" : "mt-3", className), children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: labelId, "data-slot": "chat-examples-label", className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM4V7OJNFcjs.Suggestions, { role: "group", "aria-labelledby": labelId, layout: EXAMPLE_PROMPT_LAYOUTS[variant], children: prompts.map((prompt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkM4V7OJNFcjs.Suggestion,
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": slot, "data-variant": variant, className, children: [
+    showLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: labelId, "data-slot": `${slot}-label`, className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkM4V7OJNFcjs.Suggestions,
       {
-        suggestion: prompt,
-        onClick: onSelect,
-        className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
-      },
-      prompt
-    )) })
+        role: "group",
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "aria-label": showLabel ? void 0 : label,
+        layout: EXAMPLE_PROMPT_LAYOUTS[variant],
+        children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkM4V7OJNFcjs.Suggestion,
+          {
+            suggestion: item,
+            onClick: onSelect,
+            disabled,
+            className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
+          },
+          item
+        ))
+      }
+    )
   ] });
 }
 function ExamplePromptsLoading({ label, className }) {
@@ -693,6 +706,8 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   examplePromptsVariant = "chips",
   examplePromptsLoading = false,
   examplePromptsLoadingLabel = "Loading suggestions\u2026",
+  replySuggestions = [],
+  replySuggestionsLabel = "Suggested replies",
   compactEmptyState = false,
   defaultMode,
   placeholder = "Type your message\u2026",
@@ -739,6 +754,14 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const conversationStarted = messages.length > 0;
   const [userMode, setUserMode] = _react.useState.call(void 0, null);
   const mode = _nullishCoalesce(_nullishCoalesce(userMode, () => ( defaultMode)), () => ( (isMobile ? "voice" : "text")));
+  const reportSendError = _react.useCallback.call(void 0, 
+    (cause) => {
+      if (onSendError) onSendError(cause);
+      else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
+      else console.error(cause);
+    },
+    [onSendError]
+  );
   const send = _react.useCallback.call(void 0, 
     async (text, sentAttachments = attachments) => {
       const trimmed = text.trim();
@@ -751,18 +774,29 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
           setInput((current) => current ? current : trimmed);
           if (mode === "voice") setUserMode("text");
         }
-        if (onSendError) onSendError(cause);
-        else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
-        else console.error(cause);
+        reportSendError(cause);
       }
       window.setTimeout(() => _optionalChain([inputRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]), 0);
     },
-    [attachments, mode, onSend, onSendError, pending]
+    [attachments, mode, onSend, pending, reportSendError]
+  );
+  const sendSuggestion = _react.useCallback.call(void 0, 
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || pending) return;
+      try {
+        await onSend(trimmed, []);
+      } catch (cause) {
+        reportSendError(cause);
+      }
+      window.setTimeout(() => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.focus, 'call', _14 => _14()]), 0);
+    },
+    [onSend, pending, reportSendError]
   );
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      focusInput: () => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.focus, 'call', _14 => _14()]),
+      focusInput: () => _optionalChain([inputRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.focus, 'call', _17 => _17()]),
       clearInput: () => setInput("")
     }),
     []
@@ -770,7 +804,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const dropFiles = _react.useCallback.call(void 0, 
     (files) => {
       if (!conversationStarted && mode === "voice") setUserMode("text");
-      return _optionalChain([onFilesSelected, 'optionalCall', _15 => _15(files)]);
+      return _optionalChain([onFilesSelected, 'optionalCall', _18 => _18(files)]);
     },
     [conversationStarted, mode, onFilesSelected]
   );
@@ -898,12 +932,14 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                   error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatError, { children: error }),
                   !pending && examplePromptsLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExamplePromptsLoading, { label: examplePromptsLoadingLabel }),
                   !pending && !examplePromptsLoading && examplePrompts.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    ExamplePrompts,
+                    ChatSuggestions,
                     {
-                      prompts: examplePrompts,
-                      onSelect: (p) => void send(p),
+                      slot: "chat-examples",
+                      items: examplePrompts,
+                      onSelect: (prompt) => void sendSuggestion(prompt),
                       label: examplePromptsLabel,
-                      variant: examplePromptsVariant
+                      variant: examplePromptsVariant,
+                      className: examplePromptsVariant === "cards" ? "mt-4" : "mt-3"
                     }
                   ),
                   emptyFooter && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "chat-empty-footer", className: "mt-5", children: emptyFooter })
@@ -946,6 +982,18 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
               workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
             ),
             children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                ChatSuggestions,
+                {
+                  slot: "chat-replies",
+                  items: replySuggestions,
+                  onSelect: (reply) => void sendSuggestion(reply),
+                  label: replySuggestionsLabel,
+                  showLabel: false,
+                  disabled: pending,
+                  className: _chunkKWLSBTB2cjs.cn.call(void 0, "mb-3", workspace && "mx-auto max-w-3xl")
+                }
+              ),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 ChatInput,
                 {

package/dist/primitives/chat.d.cts

@@ -249,7 +249,10 @@ interface ChatProps {
     emptyTitle?: ReactNode;
     /** Subheadline shown under the headline. */
     emptySubtitle?: ReactNode;
-    /** Optional list of suggested starter prompts. Click → sends. */
+    /**
+     * Optional list of suggested starter prompts, under the empty-state
+     * composer. Picking one sends it as `replySuggestions` do.
+     */
     examplePrompts?: ReadonlyArray<string>;
     /** Label above the example prompts. Defaults to "Try". */
     examplePromptsLabel?: string;
@@ -303,6 +306,19 @@ interface ChatProps {
     addFilesLabel?: string;
     /** Shown on a file, staged or on a message, while it is still uploading. Defaults to "Uploading…". */
     uploadingLabel?: string;
+    /**
+     * Replies the conversation offers next, such as the choices the latest
+     * assistant turn asked for. Once the conversation has started they show
+     * at the composer, directly above the input and at its width, as the same
+     * suggestion chips as `examplePrompts`, wrapping onto as many lines as
+     * they need. Picking one sends only its words: the draft and any staged
+     * files stay in the composer, and a failed send is reported
+     * (`onSendError`) without touching them. Disabled while `pending`. Pass
+     * none (the default) to show none; drop them once they no longer apply.
+     */
+    replySuggestions?: ReadonlyArray<string>;
+    /** The reply suggestions' accessible name. Defaults to "Suggested replies". */
+    replySuggestionsLabel?: string;
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
     /**
@@ -406,7 +422,8 @@ interface ChatHandle {
  *   - Optional example prompts render as suggestions below the input.
  *
  * **Active state** (messages exist) — always the compact text input;
- * the mic stays as an accessory icon.
+ * the mic stays as an accessory icon. Optional reply suggestions render as
+ * the same suggestions, directly above the input.
  *
  * **Files** — with `onFilesSelected`, the composer's menu picks files and a
  * file dragged anywhere on the conversation can be dropped (`fileDrop`);

package/dist/primitives/chat.d.ts

@@ -249,7 +249,10 @@ interface ChatProps {
     emptyTitle?: ReactNode;
     /** Subheadline shown under the headline. */
     emptySubtitle?: ReactNode;
-    /** Optional list of suggested starter prompts. Click → sends. */
+    /**
+     * Optional list of suggested starter prompts, under the empty-state
+     * composer. Picking one sends it as `replySuggestions` do.
+     */
     examplePrompts?: ReadonlyArray<string>;
     /** Label above the example prompts. Defaults to "Try". */
     examplePromptsLabel?: string;
@@ -303,6 +306,19 @@ interface ChatProps {
     addFilesLabel?: string;
     /** Shown on a file, staged or on a message, while it is still uploading. Defaults to "Uploading…". */
     uploadingLabel?: string;
+    /**
+     * Replies the conversation offers next, such as the choices the latest
+     * assistant turn asked for. Once the conversation has started they show
+     * at the composer, directly above the input and at its width, as the same
+     * suggestion chips as `examplePrompts`, wrapping onto as many lines as
+     * they need. Picking one sends only its words: the draft and any staged
+     * files stay in the composer, and a failed send is reported
+     * (`onSendError`) without touching them. Disabled while `pending`. Pass
+     * none (the default) to show none; drop them once they no longer apply.
+     */
+    replySuggestions?: ReadonlyArray<string>;
+    /** The reply suggestions' accessible name. Defaults to "Suggested replies". */
+    replySuggestionsLabel?: string;
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
     /**
@@ -406,7 +422,8 @@ interface ChatHandle {
  *   - Optional example prompts render as suggestions below the input.
  *
  * **Active state** (messages exist) — always the compact text input;
- * the mic stays as an accessory icon.
+ * the mic stays as an accessory icon. Optional reply suggestions render as
+ * the same suggestions, directly above the input.
  *
  * **Files** — with `onFilesSelected`, the composer's menu picks files and a
  * file dragged anywhere on the conversation can be dropped (`fileDrop`);

package/dist/primitives/chat.js

@@ -629,27 +629,40 @@ var EXAMPLE_PROMPT_LAYOUTS = {
   row: "row",
   cards: "grid"
 };
-function ExamplePrompts({
-  prompts,
+function ChatSuggestions({
+  slot,
+  items,
   onSelect,
-  label = "Try",
+  label,
+  showLabel = true,
   variant = "chips",
+  disabled = false,
   className
 }) {
   const labelId = useId();
-  if (prompts.length === 0) return null;
+  if (items.length === 0) return null;
   const cards = variant === "cards";
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "chat-examples", "data-variant": variant, className: cn(cards ? "mt-4" : "mt-3", className), children: [
-    /* @__PURE__ */ jsx("p", { id: labelId, "data-slot": "chat-examples-label", className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx(Suggestions, { role: "group", "aria-labelledby": labelId, layout: EXAMPLE_PROMPT_LAYOUTS[variant], children: prompts.map((prompt) => /* @__PURE__ */ jsx(
-      Suggestion,
+  return /* @__PURE__ */ jsxs("div", { "data-slot": slot, "data-variant": variant, className, children: [
+    showLabel && /* @__PURE__ */ jsx("p", { id: labelId, "data-slot": `${slot}-label`, className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      Suggestions,
       {
-        suggestion: prompt,
-        onClick: onSelect,
-        className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
-      },
-      prompt
-    )) })
+        role: "group",
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "aria-label": showLabel ? void 0 : label,
+        layout: EXAMPLE_PROMPT_LAYOUTS[variant],
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          Suggestion,
+          {
+            suggestion: item,
+            onClick: onSelect,
+            disabled,
+            className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
+          },
+          item
+        ))
+      }
+    )
   ] });
 }
 function ExamplePromptsLoading({ label, className }) {
@@ -693,6 +706,8 @@ var Chat = forwardRef(function Chat2({
   examplePromptsVariant = "chips",
   examplePromptsLoading = false,
   examplePromptsLoadingLabel = "Loading suggestions\u2026",
+  replySuggestions = [],
+  replySuggestionsLabel = "Suggested replies",
   compactEmptyState = false,
   defaultMode,
   placeholder = "Type your message\u2026",
@@ -739,6 +754,14 @@ var Chat = forwardRef(function Chat2({
   const conversationStarted = messages.length > 0;
   const [userMode, setUserMode] = useState(null);
   const mode = userMode ?? defaultMode ?? (isMobile ? "voice" : "text");
+  const reportSendError = useCallback(
+    (cause) => {
+      if (onSendError) onSendError(cause);
+      else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
+      else console.error(cause);
+    },
+    [onSendError]
+  );
   const send = useCallback(
     async (text, sentAttachments = attachments) => {
       const trimmed = text.trim();
@@ -751,13 +774,24 @@ var Chat = forwardRef(function Chat2({
           setInput((current) => current ? current : trimmed);
           if (mode === "voice") setUserMode("text");
         }
-        if (onSendError) onSendError(cause);
-        else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
-        else console.error(cause);
+        reportSendError(cause);
+      }
+      window.setTimeout(() => inputRef.current?.focus(), 0);
+    },
+    [attachments, mode, onSend, pending, reportSendError]
+  );
+  const sendSuggestion = useCallback(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || pending) return;
+      try {
+        await onSend(trimmed, []);
+      } catch (cause) {
+        reportSendError(cause);
       }
       window.setTimeout(() => inputRef.current?.focus(), 0);
     },
-    [attachments, mode, onSend, onSendError, pending]
+    [onSend, pending, reportSendError]
   );
   useImperativeHandle(
     ref,
@@ -898,12 +932,14 @@ var Chat = forwardRef(function Chat2({
                   error && /* @__PURE__ */ jsx(ChatError, { children: error }),
                   !pending && examplePromptsLoading && /* @__PURE__ */ jsx(ExamplePromptsLoading, { label: examplePromptsLoadingLabel }),
                   !pending && !examplePromptsLoading && examplePrompts.length > 0 && /* @__PURE__ */ jsx(
-                    ExamplePrompts,
+                    ChatSuggestions,
                     {
-                      prompts: examplePrompts,
-                      onSelect: (p) => void send(p),
+                      slot: "chat-examples",
+                      items: examplePrompts,
+                      onSelect: (prompt) => void sendSuggestion(prompt),
                       label: examplePromptsLabel,
-                      variant: examplePromptsVariant
+                      variant: examplePromptsVariant,
+                      className: examplePromptsVariant === "cards" ? "mt-4" : "mt-3"
                     }
                   ),
                   emptyFooter && /* @__PURE__ */ jsx("div", { "data-slot": "chat-empty-footer", className: "mt-5", children: emptyFooter })
@@ -946,6 +982,18 @@ var Chat = forwardRef(function Chat2({
               workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
             ),
             children: [
+              /* @__PURE__ */ jsx(
+                ChatSuggestions,
+                {
+                  slot: "chat-replies",
+                  items: replySuggestions,
+                  onSelect: (reply) => void sendSuggestion(reply),
+                  label: replySuggestionsLabel,
+                  showLabel: false,
+                  disabled: pending,
+                  className: cn("mb-3", workspace && "mx-auto max-w-3xl")
+                }
+              ),
               /* @__PURE__ */ jsx(
                 ChatInput,
                 {

package/dist/primitives/item.d.cts

@@ -8,14 +8,14 @@ import '@radix-ui/react-separator';
 declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
 declare const itemVariants: (props?: ({
-    variant?: "default" | "muted" | "outline" | null | undefined;
+    variant?: "muted" | "default" | "outline" | null | undefined;
     size?: "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "icon" | "image" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): react_jsx_runtime.JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;

package/dist/primitives/item.d.ts

@@ -8,14 +8,14 @@ import '@radix-ui/react-separator';
 declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
 declare const itemVariants: (props?: ({
-    variant?: "default" | "muted" | "outline" | null | undefined;
+    variant?: "muted" | "default" | "outline" | null | undefined;
     size?: "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "icon" | "image" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): react_jsx_runtime.JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;

package/dist/primitives/section-header.d.cts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const sectionHeaderVariants: (props?: ({
     variant?: "muted" | "plain" | null | undefined;
-    spacing?: "none" | "tight" | "loose" | null | undefined;
+    spacing?: "tight" | "loose" | "none" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "children">, VariantProps<typeof sectionHeaderVariants> {
     /** Pre-rendered icon node. Sized to match the header text. */

package/dist/primitives/section-header.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const sectionHeaderVariants: (props?: ({
     variant?: "muted" | "plain" | null | undefined;
-    spacing?: "none" | "tight" | "loose" | null | undefined;
+    spacing?: "tight" | "loose" | "none" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "children">, VariantProps<typeof sectionHeaderVariants> {
     /** Pre-rendered icon node. Sized to match the header text. */

package/dist/primitives/toggle-group.d.cts

@@ -5,11 +5,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     grow?: boolean;
     textSize?: "inherit" | "xs";

package/dist/primitives/toggle-group.d.ts

@@ -5,11 +5,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     grow?: boolean;
     textSize?: "inherit" | "xs";

package/dist/primitives/toggle.d.cts

@@ -5,11 +5,11 @@ import * as React from 'react';
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 
 export { Toggle, toggleVariants };

package/dist/primitives/toggle.d.ts

@@ -5,11 +5,11 @@ import * as React from 'react';
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-lg" | "avatar" | "chip" | null | undefined;
+    size?: "icon" | "sm" | "lg" | "default" | "icon-lg" | "avatar" | "chip" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 
 export { Toggle, toggleVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [