@epicbagel/saas-kit 1.25.1 → 1.27.0

package/README.md

@@ -543,6 +543,56 @@ Inside a `MessageScrollerProvider`, use `MessageScrollerNavigator` from
 `primitives/message-scroller` with the same props. It uses the thread's scroll
 controller so incoming messages do not undo a jump into a long list.
 
+### Moving through a conversation (1.26.0)
+
+`Chat` and `ChatThread` take `navigator`: an array of `ChatNavigatorItem`.
+Each item has a `messageId` from the thread and a `title`, plus an optional
+`excerpt` and `kind` ("Plan", "Summary").
+
+`ChatTurnNavigator` draws them as a rail of short ticks in the thread's gutter.
+- **Which tick is marked:** the one for the place in view, read from the
+  scroller's own visibility tracking (`activeNavigatorItem`).
+- **Preview:** hovering or focusing a tick shows its kind, title and excerpt.
+- **Jump:** clicking scrolls through the thread's anchoring, as
+  `MessageScrollerNavigator` does.
+- **Keyboard:** arrow keys, Home and End move between ticks, and the rail is
+  one tab stop.
+- **Placement:** the start gutter by default, or `navigatorSide="end"`, under
+  `navigatorLabel` (default "Conversation"). The rail only shows where the
+  gutter beside the reading column has room, so it stays out of a narrow
+  thread or a phone.
+
+`ChatMessage.author` (`{ id, name, avatarUrl?, detail? }`) names who wrote a
+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-HO6DRDGD.js

@@ -0,0 +1,158 @@
+"use client";
+import {
+  useMessageScroller,
+  useMessageScrollerVisibility
+} from "./chunk-OUZSIA5G.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-ZRLUUZHK.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/chat-turn-navigator.tsx
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RAIL_WIDTH = 40;
+var RAIL_GAP = 16;
+function activeNavigatorItem(items, order, visibleMessageIds) {
+  if (items.length === 0) return null;
+  const position = new Map(order.map((id, index) => [id, index]));
+  const firstVisible = visibleMessageIds.map((id) => position.get(id)).filter((index) => index !== void 0).sort((a, b) => a - b)[0];
+  if (firstVisible === void 0) return null;
+  let active = null;
+  for (const item of items) {
+    const index = position.get(item.messageId);
+    if (index !== void 0 && index <= firstVisible) active = item.messageId;
+  }
+  return active ?? items[0].messageId;
+}
+function ChatTurnNavigator({
+  items,
+  order,
+  label = "Conversation",
+  side = "start",
+  columnWidth = 768
+}) {
+  const { scrollToMessage } = useMessageScroller();
+  const { visibleMessageIds } = useMessageScrollerVisibility();
+  const navRef = useRef(null);
+  const listRef = useRef(null);
+  const [fits, setFits] = useState(false);
+  const [focusIndex, setFocusIndex] = useState(0);
+  const active = useMemo(
+    () => activeNavigatorItem(items, order, visibleMessageIds),
+    [items, order, visibleMessageIds]
+  );
+  useLayoutEffect(() => {
+    const root = navRef.current?.parentElement;
+    if (!root) return;
+    const measure = () => setFits((root.clientWidth - columnWidth) / 2 >= RAIL_WIDTH + RAIL_GAP * 2);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [columnWidth]);
+  useEffect(() => {
+    const list = listRef.current;
+    const index = items.findIndex((item) => item.messageId === active);
+    const tick = list?.children[index];
+    if (!list || !tick) return;
+    if (tick.offsetTop < list.scrollTop) list.scrollTop = tick.offsetTop;
+    else if (tick.offsetTop + tick.offsetHeight > list.scrollTop + list.clientHeight) {
+      list.scrollTop = tick.offsetTop + tick.offsetHeight - list.clientHeight;
+    }
+    if (index >= 0) setFocusIndex(index);
+  }, [active, items]);
+  if (items.length === 0) return null;
+  function jump(item) {
+    const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    scrollToMessage(item.messageId, { align: "start", behavior: reduced ? "instant" : "smooth", scrollMargin: 16 });
+  }
+  function onKeyDown(event, index) {
+    const next = event.key === "ArrowDown" ? index + 1 : event.key === "ArrowUp" ? index - 1 : event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : null;
+    if (next === null) return;
+    event.preventDefault();
+    const target = Math.max(0, Math.min(items.length - 1, next));
+    setFocusIndex(target);
+    listRef.current?.children[target]?.querySelector("button")?.focus({ preventScroll: true });
+  }
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": label,
+      hidden: !fits,
+      "data-slot": "chat-turn-navigator",
+      className: cn(
+        "absolute top-1/2 z-10 -translate-y-1/2",
+        side === "start" ? "left-4" : "right-5"
+      ),
+      children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, skipDelayDuration: 300, children: /* @__PURE__ */ jsx(
+        "ol",
+        {
+          ref: listRef,
+          className: "flex max-h-[60vh] flex-col overflow-y-auto py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          children: items.map((item, index) => {
+            const current = item.messageId === active;
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": item.kind ? `${item.kind}: ${item.title}` : item.title,
+                  "aria-current": current ? "location" : void 0,
+                  tabIndex: index === focusIndex ? 0 : -1,
+                  onClick: () => jump(item),
+                  onKeyDown: (event) => onKeyDown(event, index),
+                  className: cn(
+                    "group flex h-3.5 w-10 items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    side === "start" ? "justify-start ps-1" : "justify-end pe-1"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "h-0.5 rounded-full transition-[width,background-color] duration-150",
+                        current ? "w-6 bg-foreground" : "w-3.5 bg-muted-foreground/45 group-hover:w-5 group-hover:bg-muted-foreground group-focus-visible:w-5"
+                      )
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+                TooltipContent,
+                {
+                  side: side === "start" ? "right" : "left",
+                  sideOffset: 10,
+                  className: "flex max-w-80 flex-col gap-1 rounded-xl px-3.5 py-2.5",
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "truncate font-medium", children: [
+                      item.kind ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                        item.kind,
+                        " \xB7 "
+                      ] }) : null,
+                      item.title
+                    ] }),
+                    item.excerpt ? /* @__PURE__ */ jsx("span", { className: "line-clamp-3 text-xs leading-5 text-muted-foreground", children: item.excerpt }) : null
+                  ]
+                }
+              ) })
+            ] }) }, item.messageId);
+          })
+        }
+      ) })
+    }
+  );
+}
+
+export {
+  activeNavigatorItem,
+  ChatTurnNavigator
+};

package/dist/chunk-NXFZULS3.js

@@ -0,0 +1,58 @@
+"use client";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "./chunk-3OWGL4Q2.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/person-avatar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function initials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = words[0];
+  if (!first) return "?";
+  const last = words[words.length - 1];
+  if (words.length === 1 || !last) return first.slice(0, 2).toUpperCase();
+  return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+function PersonAvatar({
+  name,
+  photoUrl,
+  size,
+  className,
+  fallbackClassName,
+  fallbackSize = "default"
+}) {
+  return /* @__PURE__ */ jsxs(
+    Avatar,
+    {
+      className: cn("shrink-0 overflow-hidden rounded-full bg-muted", className),
+      style: size != null ? { width: size, height: size } : void 0,
+      children: [
+        photoUrl ? /* @__PURE__ */ jsx(
+          AvatarImage,
+          {
+            src: photoUrl,
+            alt: name,
+            className: "h-full w-full object-cover"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          AvatarFallback,
+          {
+            className: cn("h-full w-full font-medium", fallbackSize === "default" ? "text-xs" : "text-xl", fallbackClassName),
+            children: initials(name)
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  initials,
+  PersonAvatar
+};

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
+};