@epicbagel/saas-kit 1.26.0 → 1.27.0

package/README.md

@@ -567,6 +567,32 @@ turn. The thread draws the avatar and name above the first of each run of
 turns by the same person on the same side, and again after a time marker, so
 a conversation with several people in it says who said what.
 
+### Next steps in the empty state (1.27.0)
+
+`Chat` takes `emptyActions`, an array of `ChatEmptyAction`: what a returning
+user can pick up, shown under the empty-state composer and before any
+`examplePrompts`.
+
+```tsx
+<Chat
+  messages={[]}
+  onSend={send}
+  emptyActions={[
+    { id: "review", icon: Users, label: "Review 3 new people", detail: "Head of Sales · Northwind", onSelect: openReview },
+    { id: "answer", icon: MessageCircleQuestion, label: "London", detail: "Where is the role based? · VP Finance", onSelect: answer },
+  ]}
+/>
+```
+
+- **A row** is a button: the icon, the `label` and the muted `detail`, on one
+  line where there is room.
+- **A pick** calls `onSelect` and sends nothing. Return a promise to show the
+  row's spinner and disable every row until it settles; a rejection
+  re-enables them and goes to `onSendError` (else `reportError`).
+- **The heading** is `emptyActionsLabel`, default "Pick up where you left
+  off". `""` hides it and keeps the default as the list's accessible name.
+- It hides while `pending` and once the conversation has started.
+
 ## Notes
 
 `primitives/notes` provides a reusable `Notes` area and `NoteComposer` for any

package/dist/chunk-DHXKCMKY.cjs

@@ -0,0 +1,198 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkNQK5ZWC7cjs = require('./chunk-NQK5ZWC7.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/item.tsx
+var _classvarianceauthority = require('class-variance-authority');
+var _radixui = require('radix-ui');
+var _jsxruntime = require('react/jsx-runtime');
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkNQK5ZWC7cjs.Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "my-2", className),
+      ...props
+    }
+  );
+}
+var itemVariants = _classvarianceauthority.cva.call(void 0, 
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? _radixui.Slot.Root : "div";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = _classvarianceauthority.cva.call(void 0, 
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-content",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-title",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    {
+      "data-slot": "item-description",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-header",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+exports.ItemGroup = ItemGroup; exports.ItemSeparator = ItemSeparator; exports.Item = Item; exports.ItemMedia = ItemMedia; exports.ItemContent = ItemContent; exports.ItemTitle = ItemTitle; exports.ItemDescription = ItemDescription; exports.ItemActions = ItemActions; exports.ItemHeader = ItemHeader; exports.ItemFooter = ItemFooter;

package/dist/chunk-SG4ZE2EN.js

@@ -0,0 +1,198 @@
+"use client";
+import {
+  Separator
+} from "./chunk-HYTILYE5.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/item.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-2", className),
+      ...props
+    }
+  );
+}
+var itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export {
+  ItemGroup,
+  ItemSeparator,
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemTitle,
+  ItemDescription,
+  ItemActions,
+  ItemHeader,
+  ItemFooter
+};

package/dist/primitives/chat.cjs

@@ -17,6 +17,9 @@ var _chunkPNI354BYcjs = require('../chunk-PNI354BY.cjs');
 var _chunkM4V7OJNFcjs = require('../chunk-M4V7OJNF.cjs');
 
 
+var _chunkVMXKT67Ecjs = require('../chunk-VMXKT67E.cjs');
+
+
 var _chunkU7XNNLVPcjs = require('../chunk-U7XNNLVP.cjs');
 
 
@@ -37,6 +40,14 @@ require('../chunk-2HV2KKOE.cjs');
 
 
 
+
+
+
+var _chunkDHXKCMKYcjs = require('../chunk-DHXKCMKY.cjs');
+require('../chunk-NQK5ZWC7.cjs');
+
+
+
 var _chunkZLEM2SAUcjs = require('../chunk-ZLEM2SAU.cjs');
 
 
@@ -120,6 +131,7 @@ var _chunkH2UFRLLNcjs = require('../chunk-H2UFRLLN.cjs');
 
 
 
+
 var _react = require('react');
 
 
@@ -758,6 +770,92 @@ function ChatSuggestions({
     )
   ] });
 }
+var DEFAULT_EMPTY_ACTIONS_LABEL = "Pick up where you left off";
+function ChatEmptyActionIcon({ icon }) {
+  if (!icon) return null;
+  if (_react.isValidElement.call(void 0, icon)) return icon;
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconComp, { "aria-hidden": true });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: icon });
+}
+function ChatEmptyActions({
+  items,
+  label,
+  onError,
+  className
+}) {
+  const labelId = _react.useId.call(void 0, );
+  const [running, setRunning] = _react.useState.call(void 0, null);
+  if (items.length === 0) return null;
+  const showLabel = label.length > 0;
+  const pick = async (item) => {
+    if (running !== null) return;
+    let result;
+    try {
+      result = item.onSelect();
+    } catch (cause) {
+      onError(cause);
+      return;
+    }
+    if (!result || typeof result.then !== "function") return;
+    setRunning(item.id);
+    try {
+      await result;
+    } catch (cause) {
+      onError(cause);
+    } finally {
+      setRunning(null);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "chat-empty-actions", className: _chunkKWLSBTB2cjs.cn.call(void 0, "w-full text-left", className), children: [
+    showLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: labelId, "data-slot": "chat-empty-actions-label", className: "mb-1.5 px-3 text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "aria-label": showLabel ? void 0 : DEFAULT_EMPTY_ACTIONS_LABEL,
+        className: "flex flex-col gap-0.5",
+        children: items.map((item) => {
+          const busy = running === item.id;
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDHXKCMKYcjs.Item, { asChild: true, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "button",
+            {
+              type: "button",
+              "data-slot": "chat-empty-action",
+              "data-state": busy ? "loading" : void 0,
+              "aria-busy": busy || void 0,
+              disabled: item.disabled || running !== null,
+              onClick: () => void pick(item),
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                "min-h-11 cursor-pointer flex-nowrap text-left",
+                "hover:bg-muted focus-visible:bg-muted",
+                "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+                busy && "disabled:opacity-100"
+              ),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunkDHXKCMKYcjs.ItemMedia,
+                  {
+                    variant: "icon",
+                    className: "size-8 self-center rounded-md bg-muted text-muted-foreground group-has-data-[slot=item-description]/item:translate-y-0 group-has-data-[slot=item-description]/item:self-center",
+                    children: busy ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVMXKT67Ecjs.Spinner, { "aria-hidden": true }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatEmptyActionIcon, { icon: item.icon })
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDHXKCMKYcjs.ItemContent, { className: "min-w-0 flex-row flex-wrap items-baseline gap-x-2 gap-y-0.5 md:flex-nowrap", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDHXKCMKYcjs.ItemTitle, { className: "w-auto min-w-0 shrink-0 font-normal text-foreground md:max-w-[60%] md:truncate", children: item.label }),
+                  item.detail && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDHXKCMKYcjs.ItemDescription, { className: "line-clamp-1 min-w-0 flex-1 truncate text-xs md:text-sm", children: item.detail })
+                ] })
+              ]
+            }
+          ) }, item.id);
+        })
+      }
+    )
+  ] });
+}
 function MobileReplySuggestions({
   items,
   onSelect,
@@ -913,6 +1011,8 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   emptySubtitle,
   examplePrompts = [],
   examplePromptsLabel = "Try",
+  emptyActions = [],
+  emptyActionsLabel = DEFAULT_EMPTY_ACTIONS_LABEL,
   examplePromptsVariant = "chips",
   examplePromptsLoading = false,
   examplePromptsLoadingLabel = "Loading suggestions\u2026",
@@ -1152,6 +1252,15 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                     }
                   ),
                   error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatError, { children: error }),
+                  !pending && emptyActions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    ChatEmptyActions,
+                    {
+                      items: emptyActions,
+                      label: emptyActionsLabel,
+                      onError: reportSendError,
+                      className: "mt-3"
+                    }
+                  ),
                   !pending && examplePromptsLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExamplePromptsLoading, { label: examplePromptsLoadingLabel }),
                   !pending && !examplePromptsLoading && examplePrompts.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     ChatSuggestions,

package/dist/primitives/chat.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
 import { VoiceSessionControlsProps } from './voice-session-controls.cjs';
 import { ChatNavigatorItem } from './chat-turn-navigator.cjs';
 import { MarkdownComponents } from './markdown.cjs';
@@ -259,6 +260,24 @@ interface ChatInputProps {
  * device-aware default modes.
  */
 declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+/** A next step offered in the empty state, under the composer (`emptyActions`). */
+interface ChatEmptyAction {
+    /** Stable key. */
+    id: string;
+    /** What picking it does, e.g. "Review 3 new people". */
+    label: ReactNode;
+    /** Where it applies, muted after the label, e.g. "Head of Sales · Northwind". One line, truncated. */
+    detail?: ReactNode;
+    /** Leading icon: a Lucide component or an element. */
+    icon?: LucideIcon | ReactNode;
+    /**
+     * Called when picked. While a returned promise is pending, that row shows a
+     * spinner and every row is disabled; a rejection re-enables them and is
+     * reported.
+     */
+    onSelect: () => void | Promise<void>;
+    disabled?: boolean;
+}
 interface ChatProps {
     /** Conversation messages. */
     messages: ChatMessage[];
@@ -304,6 +323,21 @@ interface ChatProps {
     examplePrompts?: ReadonlyArray<string>;
     /** Label above the example prompts. Defaults to "Try". */
     examplePromptsLabel?: string;
+    /**
+     * Next steps under the empty-state composer, before `examplePrompts`,
+     * ChatGPT-style: a quiet list of rows, each an icon, what picking it does
+     * and where it applies (`ChatEmptyAction`). Picking one calls its
+     * `onSelect`; nothing is sent here. While a returned promise is pending
+     * the row shows a spinner and every row is disabled. Hidden while
+     * `pending`, like the example prompts.
+     */
+    emptyActions?: ReadonlyArray<ChatEmptyAction>;
+    /**
+     * The actions' small heading and accessible name. Defaults to "Pick up
+     * where you left off"; `""` hides the heading and keeps that default as
+     * the list's accessible name.
+     */
+    emptyActionsLabel?: string;
     /**
      * `chips` (the default) wrap onto as many lines as they need; `row` is one
      * line that scrolls sideways, for a few short prompts where height is
@@ -500,4 +534,4 @@ interface ChatHandle {
  */
 declare const Chat: React$1.ForwardRefExoticComponent<ChatProps & React$1.RefAttributes<ChatHandle>>;
 
-export { Chat, type ChatAttachment, type ChatAttachmentAction, ChatCopyAction, type ChatCopyActionProps, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatMessageAuthor, ChatNavigatorItem, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps, authorLines };
+export { Chat, type ChatAttachment, type ChatAttachmentAction, ChatCopyAction, type ChatCopyActionProps, type ChatEmptyAction, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatMessageAuthor, ChatNavigatorItem, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps, authorLines };

package/dist/primitives/chat.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
 import { VoiceSessionControlsProps } from './voice-session-controls.js';
 import { ChatNavigatorItem } from './chat-turn-navigator.js';
 import { MarkdownComponents } from './markdown.js';
@@ -259,6 +260,24 @@ interface ChatInputProps {
  * device-aware default modes.
  */
 declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+/** A next step offered in the empty state, under the composer (`emptyActions`). */
+interface ChatEmptyAction {
+    /** Stable key. */
+    id: string;
+    /** What picking it does, e.g. "Review 3 new people". */
+    label: ReactNode;
+    /** Where it applies, muted after the label, e.g. "Head of Sales · Northwind". One line, truncated. */
+    detail?: ReactNode;
+    /** Leading icon: a Lucide component or an element. */
+    icon?: LucideIcon | ReactNode;
+    /**
+     * Called when picked. While a returned promise is pending, that row shows a
+     * spinner and every row is disabled; a rejection re-enables them and is
+     * reported.
+     */
+    onSelect: () => void | Promise<void>;
+    disabled?: boolean;
+}
 interface ChatProps {
     /** Conversation messages. */
     messages: ChatMessage[];
@@ -304,6 +323,21 @@ interface ChatProps {
     examplePrompts?: ReadonlyArray<string>;
     /** Label above the example prompts. Defaults to "Try". */
     examplePromptsLabel?: string;
+    /**
+     * Next steps under the empty-state composer, before `examplePrompts`,
+     * ChatGPT-style: a quiet list of rows, each an icon, what picking it does
+     * and where it applies (`ChatEmptyAction`). Picking one calls its
+     * `onSelect`; nothing is sent here. While a returned promise is pending
+     * the row shows a spinner and every row is disabled. Hidden while
+     * `pending`, like the example prompts.
+     */
+    emptyActions?: ReadonlyArray<ChatEmptyAction>;
+    /**
+     * The actions' small heading and accessible name. Defaults to "Pick up
+     * where you left off"; `""` hides the heading and keeps that default as
+     * the list's accessible name.
+     */
+    emptyActionsLabel?: string;
     /**
      * `chips` (the default) wrap onto as many lines as they need; `row` is one
      * line that scrolls sideways, for a few short prompts where height is
@@ -500,4 +534,4 @@ interface ChatHandle {
  */
 declare const Chat: React$1.ForwardRefExoticComponent<ChatProps & React$1.RefAttributes<ChatHandle>>;
 
-export { Chat, type ChatAttachment, type ChatAttachmentAction, ChatCopyAction, type ChatCopyActionProps, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatMessageAuthor, ChatNavigatorItem, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps, authorLines };
+export { Chat, type ChatAttachment, type ChatAttachmentAction, ChatCopyAction, type ChatCopyActionProps, type ChatEmptyAction, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatMessageAuthor, ChatNavigatorItem, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps, authorLines };

package/dist/primitives/chat.js

@@ -15,6 +15,9 @@ import {
   Suggestion,
   Suggestions
 } from "../chunk-IJG2B3Y2.js";
+import {
+  Spinner
+} from "../chunk-QZBPZLAB.js";
 import {
   PersonAvatar
 } from "../chunk-NXFZULS3.js";
@@ -34,6 +37,14 @@ import {
   InputGroupTextarea
 } from "../chunk-QTPPNK6F.js";
 import "../chunk-6FC65AZQ.js";
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle
+} from "../chunk-SG4ZE2EN.js";
+import "../chunk-HYTILYE5.js";
 import {
   FileDropArea,
   FileDropzone
@@ -114,6 +125,7 @@ import {
 // src/primitives/chat.tsx
 import {
   forwardRef,
+  isValidElement,
   useCallback,
   useEffect,
   useId,
@@ -758,6 +770,92 @@ function ChatSuggestions({
     )
   ] });
 }
+var DEFAULT_EMPTY_ACTIONS_LABEL = "Pick up where you left off";
+function ChatEmptyActionIcon({ icon }) {
+  if (!icon) return null;
+  if (isValidElement(icon)) return icon;
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ jsx(IconComp, { "aria-hidden": true });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: icon });
+}
+function ChatEmptyActions({
+  items,
+  label,
+  onError,
+  className
+}) {
+  const labelId = useId();
+  const [running, setRunning] = useState(null);
+  if (items.length === 0) return null;
+  const showLabel = label.length > 0;
+  const pick = async (item) => {
+    if (running !== null) return;
+    let result;
+    try {
+      result = item.onSelect();
+    } catch (cause) {
+      onError(cause);
+      return;
+    }
+    if (!result || typeof result.then !== "function") return;
+    setRunning(item.id);
+    try {
+      await result;
+    } catch (cause) {
+      onError(cause);
+    } finally {
+      setRunning(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chat-empty-actions", className: cn("w-full text-left", className), children: [
+    showLabel && /* @__PURE__ */ jsx("p", { id: labelId, "data-slot": "chat-empty-actions-label", className: "mb-1.5 px-3 text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "aria-label": showLabel ? void 0 : DEFAULT_EMPTY_ACTIONS_LABEL,
+        className: "flex flex-col gap-0.5",
+        children: items.map((item) => {
+          const busy = running === item.id;
+          return /* @__PURE__ */ jsx(Item, { asChild: true, size: "sm", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-slot": "chat-empty-action",
+              "data-state": busy ? "loading" : void 0,
+              "aria-busy": busy || void 0,
+              disabled: item.disabled || running !== null,
+              onClick: () => void pick(item),
+              className: cn(
+                "min-h-11 cursor-pointer flex-nowrap text-left",
+                "hover:bg-muted focus-visible:bg-muted",
+                "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+                busy && "disabled:opacity-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ItemMedia,
+                  {
+                    variant: "icon",
+                    className: "size-8 self-center rounded-md bg-muted text-muted-foreground group-has-data-[slot=item-description]/item:translate-y-0 group-has-data-[slot=item-description]/item:self-center",
+                    children: busy ? /* @__PURE__ */ jsx(Spinner, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChatEmptyActionIcon, { icon: item.icon })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(ItemContent, { className: "min-w-0 flex-row flex-wrap items-baseline gap-x-2 gap-y-0.5 md:flex-nowrap", children: [
+                  /* @__PURE__ */ jsx(ItemTitle, { className: "w-auto min-w-0 shrink-0 font-normal text-foreground md:max-w-[60%] md:truncate", children: item.label }),
+                  item.detail && /* @__PURE__ */ jsx(ItemDescription, { className: "line-clamp-1 min-w-0 flex-1 truncate text-xs md:text-sm", children: item.detail })
+                ] })
+              ]
+            }
+          ) }, item.id);
+        })
+      }
+    )
+  ] });
+}
 function MobileReplySuggestions({
   items,
   onSelect,
@@ -913,6 +1011,8 @@ var Chat = forwardRef(function Chat2({
   emptySubtitle,
   examplePrompts = [],
   examplePromptsLabel = "Try",
+  emptyActions = [],
+  emptyActionsLabel = DEFAULT_EMPTY_ACTIONS_LABEL,
   examplePromptsVariant = "chips",
   examplePromptsLoading = false,
   examplePromptsLoadingLabel = "Loading suggestions\u2026",
@@ -1152,6 +1252,15 @@ var Chat = forwardRef(function Chat2({
                     }
                   ),
                   error && /* @__PURE__ */ jsx(ChatError, { children: error }),
+                  !pending && emptyActions.length > 0 && /* @__PURE__ */ jsx(
+                    ChatEmptyActions,
+                    {
+                      items: emptyActions,
+                      label: emptyActionsLabel,
+                      onError: reportSendError,
+                      className: "mt-3"
+                    }
+                  ),
                   !pending && examplePromptsLoading && /* @__PURE__ */ jsx(ExamplePromptsLoading, { label: examplePromptsLoadingLabel }),
                   !pending && !examplePromptsLoading && examplePrompts.length > 0 && /* @__PURE__ */ jsx(
                     ChatSuggestions,

package/dist/primitives/item.cjs

@@ -1,197 +1,27 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkNQK5ZWC7cjs = require('../chunk-NQK5ZWC7.cjs');
-
-
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
-
-// src/primitives/item.tsx
-var _classvarianceauthority = require('class-variance-authority');
-var _radixui = require('radix-ui');
-var _jsxruntime = require('react/jsx-runtime');
-function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      role: "list",
-      "data-slot": "item-group",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkNQK5ZWC7cjs.Separator,
-    {
-      "data-slot": "item-separator",
-      orientation: "horizontal",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, "my-2", className),
-      ...props
-    }
-  );
-}
-var itemVariants = _classvarianceauthority.cva.call(void 0, 
-  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent",
-        outline: "border-border",
-        muted: "border-transparent bg-muted/50"
-      },
-      size: {
-        default: "gap-3.5 px-4 py-3.5",
-        sm: "gap-2.5 px-3 py-2.5",
-        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Item({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? _radixui.Slot.Root : "div";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Comp,
-    {
-      "data-slot": "item",
-      "data-variant": variant,
-      "data-size": size,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var itemMediaVariants = _classvarianceauthority.cva.call(void 0, 
-  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "[&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      "data-slot": "item-media",
-      "data-variant": variant,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemMediaVariants({ variant, className })),
-      ...props
-    }
-  );
-}
-function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      "data-slot": "item-content",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      "data-slot": "item-title",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "p",
-    {
-      "data-slot": "item-description",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      "data-slot": "item-actions",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-center gap-2", className),
-      ...props
-    }
-  );
-}
-function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      "data-slot": "item-header",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        "flex basis-full items-center justify-between gap-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      "data-slot": "item-footer",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        "flex basis-full items-center justify-between gap-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-
-
-
-
-
-
-
-
-
-
-exports.Item = Item; exports.ItemActions = ItemActions; exports.ItemContent = ItemContent; exports.ItemDescription = ItemDescription; exports.ItemFooter = ItemFooter; exports.ItemGroup = ItemGroup; exports.ItemHeader = ItemHeader; exports.ItemMedia = ItemMedia; exports.ItemSeparator = ItemSeparator; exports.ItemTitle = ItemTitle;
+
+
+
+
+
+
+
+
+
+var _chunkDHXKCMKYcjs = require('../chunk-DHXKCMKY.cjs');
+require('../chunk-NQK5ZWC7.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+
+
+
+
+
+
+
+
+
+exports.Item = _chunkDHXKCMKYcjs.Item; exports.ItemActions = _chunkDHXKCMKYcjs.ItemActions; exports.ItemContent = _chunkDHXKCMKYcjs.ItemContent; exports.ItemDescription = _chunkDHXKCMKYcjs.ItemDescription; exports.ItemFooter = _chunkDHXKCMKYcjs.ItemFooter; exports.ItemGroup = _chunkDHXKCMKYcjs.ItemGroup; exports.ItemHeader = _chunkDHXKCMKYcjs.ItemHeader; exports.ItemMedia = _chunkDHXKCMKYcjs.ItemMedia; exports.ItemSeparator = _chunkDHXKCMKYcjs.ItemSeparator; exports.ItemTitle = _chunkDHXKCMKYcjs.ItemTitle;

package/dist/primitives/item.js

@@ -1,188 +1,18 @@
 "use client";
 import {
-  Separator
-} from "../chunk-HYTILYE5.js";
-import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/item.tsx
-import { cva } from "class-variance-authority";
-import { Slot } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
-function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "list",
-      "data-slot": "item-group",
-      className: cn(
-        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Separator,
-    {
-      "data-slot": "item-separator",
-      orientation: "horizontal",
-      className: cn("my-2", className),
-      ...props
-    }
-  );
-}
-var itemVariants = cva(
-  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent",
-        outline: "border-border",
-        muted: "border-transparent bg-muted/50"
-      },
-      size: {
-        default: "gap-3.5 px-4 py-3.5",
-        sm: "gap-2.5 px-3 py-2.5",
-        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Item({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "item",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(itemVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "[&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-media",
-      "data-variant": variant,
-      className: cn(itemMediaVariants({ variant, className })),
-      ...props
-    }
-  );
-}
-function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-content",
-      className: cn(
-        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-title",
-      className: cn(
-        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "item-description",
-      className: cn(
-        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-actions",
-      className: cn("flex items-center gap-2", className),
-      ...props
-    }
-  );
-}
-function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-header",
-      className: cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-footer",
-      className: cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      ),
-      ...props
-    }
-  );
-}
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle
+} from "../chunk-SG4ZE2EN.js";
+import "../chunk-HYTILYE5.js";
+import "../chunk-G6SRSWXB.js";
 export {
   Item,
   ItemActions,

package/package.json

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