harebear-ui 0.8.1 → 0.10.0

package/dist/components/admin/settings.js

@@ -29,8 +29,8 @@ function SettingsSection({ title, description, className, children, ...props })
 		})]
 	});
 }
-/** One setting: label and description at the left, a control at the right, optional expandable content. */
-function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen = false, onOpenChange, expandLabel = "Change", className, ...props }) {
+/** One setting: label and description at the left, a control at the right, optional body and expandable content. */
+function SettingsRow({ label, description, htmlFor, control, body, content, open: openProp, defaultOpen = false, onOpenChange, expandLabel = "Change", className, ...props }) {
 	const [openState, setOpenState] = React.useState(defaultOpen);
 	const open = openProp ?? openState;
 	const setOpen = (next) => {
@@ -44,35 +44,42 @@ function SettingsRow({ label, description, htmlFor, control, content, open: open
 		"data-state": content ? open ? "open" : "closed" : void 0,
 		className: cn("py-3.5", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-x-4 gap-y-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 basis-48 flex-col",
-				children: [/* @__PURE__ */ jsx(Label, {
-					htmlFor,
-					className: "text-sm font-medium",
-					children: label
-				}), description && /* @__PURE__ */ jsx("span", {
-					className: "text-[13px] text-muted-foreground",
-					children: description
-				})]
-			}), control ?? (content ? /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "outline",
-				size: "sm",
-				"aria-expanded": open,
-				"aria-controls": contentId,
-				onClick: () => setOpen(!open),
-				children: open ? "Cancel" : expandLabel
-			}) : null)]
-		}), content && /* @__PURE__ */ jsx(Collapse, {
-			open,
-			id: contentId,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "pt-3.5",
-				children: content
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 basis-48 flex-col",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor,
+						className: "text-sm font-medium",
+						children: label
+					}), description && /* @__PURE__ */ jsx("span", {
+						className: "text-[13px] text-muted-foreground",
+						children: description
+					})]
+				}), control ?? (content ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					"aria-expanded": open,
+					"aria-controls": contentId,
+					onClick: () => setOpen(!open),
+					children: open ? "Cancel" : expandLabel
+				}) : null)]
+			}),
+			body && /* @__PURE__ */ jsx("div", {
+				className: "pt-3",
+				children: body
+			}),
+			content && /* @__PURE__ */ jsx(Collapse, {
+				open,
+				id: contentId,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pt-3.5",
+					children: content
+				})
 			})
-		})]
+		]
 	});
 }
 export { SettingsRow, SettingsSection };

package/dist/components/admin/time-zone-picker.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface TimeZonePickerProps {
+  /** IANA name, e.g. "America/Vancouver". */
+  value: string;
+  onValueChange: (value: string) => void;
+  /** id of the search input, for a FieldLabel or SettingsRow `htmlFor`. */
+  id?: string;
+  className?: string;
+}
+/** Searchable IANA time zone list (Intl.supportedValuesOf("timeZone")), built on Combobox. */
+declare function TimeZonePicker({ value, onValueChange, id, className }: TimeZonePickerProps): React.JSX.Element;
+export { TimeZonePicker };

package/dist/components/admin/time-zone-picker.js

@@ -0,0 +1,31 @@
+"use client";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../ui/combobox.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/time-zone-picker.tsx
+const label = (zone) => zone.replaceAll("_", " ");
+/** Searchable IANA time zone list (Intl.supportedValuesOf("timeZone")), built on Combobox. */
+function TimeZonePicker({ value, onValueChange, id, className }) {
+	const zones = React.useMemo(() => {
+		const all = Intl.supportedValuesOf("timeZone");
+		return value && !all.includes(value) ? [value, ...all] : all;
+	}, [value]);
+	return /* @__PURE__ */ jsxs(Combobox, {
+		items: zones,
+		value,
+		onValueChange: (next) => next && onValueChange(next),
+		itemToStringLabel: label,
+		children: [/* @__PURE__ */ jsx(ComboboxInput, {
+			id,
+			placeholder: "Search time zones",
+			showTrigger: false,
+			className: cn("w-full", className)
+		}), /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No matching time zone." }), /* @__PURE__ */ jsx(ComboboxList, { children: (zone) => /* @__PURE__ */ jsx(ComboboxItem, {
+			value: zone,
+			className: "pointer-coarse:min-h-11",
+			children: label(zone)
+		}, zone) })] })]
+	});
+}
+export { TimeZonePicker };

package/dist/components/admin/user-chip.d.ts

@@ -1,14 +1,45 @@
+import { CategoryColor } from "./category.js";
+import { Avatar } from "../ui/avatar.js";
 import * as React from "react";
 /** Up to two initials from a name: "Maya Chen" -> "MC". */
 export declare function initials(name: string): string;
-export interface UserChipProps extends React.ComponentProps<"div"> {
+export interface MemberAvatarProps extends Omit<React.ComponentProps<typeof Avatar>, "children" | "color"> {
+  name: string;
+  avatarUrl?: string;
+  /** Category colour behind the initials when there is no photo. Default: the soft primary tint. */
+  color?: CategoryColor;
+}
+/**
+ * A person's photo, or their initials on their category colour. It is an image named after the person; pass
+ * `aria-hidden` when the name is already shown next to it.
+ */
+declare function MemberAvatar({ name, avatarUrl, color, ...props }: MemberAvatarProps): React.JSX.Element;
+export interface AvatarStackProps extends React.ComponentProps<"div"> {
+  members: Pick<MemberAvatarProps, "name" | "avatarUrl" | "color">[];
+  /** Total slots, default 4. Past it, `max - 1` faces and a "+N" chip. */
+  max?: number;
+}
+/** Overlapping small avatars, e.g. who a list is shared with. Each face is named; the overflow reads "N more". */
+declare function AvatarStack({ members, max, className, ...props }: AvatarStackProps): React.JSX.Element;
+export interface VisibilityBadgeProps extends React.ComponentProps<"div"> {
+  visibility: "shared" | "private";
+  /** Faces shown when shared. */
+  members?: AvatarStackProps["members"];
+  /** Default "Shared with everyone" or "Only you". */
+  label?: React.ReactNode;
+}
+/** Who can see something: faces and "Shared with everyone", or a lock and "Only you". */
+declare function VisibilityBadge({ visibility, members, label, className, ...props }: VisibilityBadgeProps): React.JSX.Element;
+export interface UserChipProps extends Omit<React.ComponentProps<"div">, "color"> {
   name: string;
   subtitle?: React.ReactNode;
   avatarUrl?: string;
+  /** Category colour behind the initials when there is no photo. */
+  color?: CategoryColor;
   /** Trailing control, e.g. a menu button. */
   action?: React.ReactNode;
   size?: "sm" | "default" | "lg";
 }
 /** Avatar + name + secondary line. In a sidebar collapsed to its icon rail, only the avatar shows. */
-declare function UserChip({ name, subtitle, avatarUrl, action, size, className, ...props }: UserChipProps): React.JSX.Element;
-export { UserChip };
+declare function UserChip({ name, subtitle, avatarUrl, color, action, size, className, ...props }: UserChipProps): React.JSX.Element;
+export { AvatarStack, MemberAvatar, UserChip, VisibilityBadge };

package/dist/components/admin/user-chip.js

@@ -1,25 +1,84 @@
 "use client";
+import { categoryBg } from "./category.js";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { LockIcon } from "lucide-react";
 // src/components/admin/user-chip.tsx
 /** Up to two initials from a name: "Maya Chen" -> "MC". */
 function initials(name) {
 	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase()).join("");
 }
+/**
+* A person's photo, or their initials on their category colour. It is an image named after the person; pass
+* `aria-hidden` when the name is already shown next to it.
+*/
+function MemberAvatar({ name, avatarUrl, color, ...props }) {
+	return /* @__PURE__ */ jsxs(Avatar, {
+		role: "img",
+		"aria-label": name,
+		"data-color": color,
+		...props,
+		children: [avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+			src: avatarUrl,
+			alt: ""
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			"aria-hidden": "true",
+			className: cn(color && [categoryBg[color], "text-category-foreground"]),
+			children: initials(name)
+		})]
+	});
+}
+/** Overlapping small avatars, e.g. who a list is shared with. Each face is named; the overflow reads "N more". */
+function AvatarStack({ members, max = 4, className, ...props }) {
+	const shown = members.length > max ? members.slice(0, max - 1) : members;
+	const extra = members.length - shown.length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "avatar-stack",
+		className: cn("flex -space-x-1.5", className),
+		...props,
+		children: [shown.map((m, i) => /* @__PURE__ */ jsx(MemberAvatar, {
+			size: "sm",
+			...m,
+			className: "ring-2 ring-background"
+		}, `${m.name}-${i}`)), extra > 0 && /* @__PURE__ */ jsxs("span", {
+			role: "img",
+			"aria-label": `${extra} more`,
+			className: "relative flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground ring-2 ring-background",
+			children: ["+", extra]
+		})]
+	});
+}
+/** Who can see something: faces and "Shared with everyone", or a lock and "Only you". */
+function VisibilityBadge({ visibility, members, label, className, ...props }) {
+	const shared = visibility === "shared";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "visibility-badge",
+		"data-visibility": visibility,
+		className: cn("inline-flex items-center gap-2 text-[13px] text-muted-foreground", className),
+		...props,
+		children: [shared ? members?.length ? /* @__PURE__ */ jsx(AvatarStack, {
+			members,
+			"aria-hidden": "true"
+		}) : null : /* @__PURE__ */ jsx(LockIcon, {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0"
+		}), /* @__PURE__ */ jsx("span", { children: label ?? (shared ? "Shared with everyone" : "Only you") })]
+	});
+}
 /** Avatar + name + secondary line. In a sidebar collapsed to its icon rail, only the avatar shows. */
-function UserChip({ name, subtitle, avatarUrl, action, size = "default", className, ...props }) {
+function UserChip({ name, subtitle, avatarUrl, color, action, size = "default", className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "user-chip",
 		className: cn("flex min-w-0 items-center gap-3 group-data-[collapsible=icon]:justify-center", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsxs(Avatar, {
+			/* @__PURE__ */ jsx(MemberAvatar, {
+				name,
+				avatarUrl,
+				color,
 				size,
-				children: [avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
-					src: avatarUrl,
-					alt: ""
-				}), /* @__PURE__ */ jsx(AvatarFallback, { children: initials(name) })]
+				"aria-hidden": "true"
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1 leading-snug group-data-[collapsible=icon]:hidden",
@@ -38,4 +97,4 @@ function UserChip({ name, subtitle, avatarUrl, action, size = "default", classNa
 		]
 	});
 }
-export { UserChip, initials };
+export { AvatarStack, MemberAvatar, UserChip, VisibilityBadge, initials };

package/dist/components/admin/user-menu.d.ts

@@ -1,9 +1,12 @@
+import { CategoryColor } from "./category.js";
 import * as React from "react";
 export interface UserMenuProps {
   name: string;
   /** Second line, e.g. the email or "Signed in". */
   subtitle?: React.ReactNode;
   avatarUrl?: string;
+  /** Category colour behind the initials when there is no photo. */
+  color?: CategoryColor;
   /** Extra items between the header and the theme choice, e.g. a Settings DropdownMenuItem. */
   children?: React.ReactNode;
   /** Show the Light / Dark / System choice. Default true. Needs ThemeProvider. */
@@ -12,11 +15,13 @@ export interface UserMenuProps {
   onSignOut?: () => void;
   /** Default "Sign out". */
   signOutLabel?: React.ReactNode;
+  /** Trigger is just the avatar (44px on touch screens) and the menu opens below it, e.g. in a phone page header. */
+  compact?: boolean;
   className?: string;
 }
 /**
  * The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
  * Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
  */
-declare function UserMenu({ name, subtitle, avatarUrl, children, themeSwitch, onSignOut, signOutLabel, className }: UserMenuProps): React.JSX.Element;
+declare function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch, onSignOut, signOutLabel, compact, className }: UserMenuProps): React.JSX.Element;
 export { UserMenu };

package/dist/components/admin/user-menu.js

@@ -1,6 +1,8 @@
 "use client";
-import { UserChip } from "./user-chip.js";
+import { categoryBg } from "./category.js";
+import { UserChip, initials } from "./user-chip.js";
 import { useTheme } from "../theme/theme-provider.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { useSidebarOptional } from "../ui/sidebar.js";
 import { cn } from "../../lib/utils.js";
@@ -28,25 +30,35 @@ const themes = [
 * The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
 * Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
 */
-function UserMenu({ name, subtitle, avatarUrl, children, themeSwitch = true, onSignOut, signOutLabel = "Sign out", className }) {
+function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch = true, onSignOut, signOutLabel = "Sign out", compact = false, className }) {
 	const { mode, setMode } = useTheme();
 	const sidebar = useSidebarOptional();
 	const rail = sidebar?.state === "collapsed" && !sidebar.isMobile;
-	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		"data-slot": "user-menu-trigger",
-		"aria-label": `Account menu for ${name}`,
-		className: cn("flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/40 data-[state=open]:bg-muted group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0", className),
-		children: [/* @__PURE__ */ jsx(UserChip, {
+		"aria-label": compact ? `Account menu for ${name}` : rail ? name : void 0,
+		className: cn(compact ? "grid size-10 shrink-0 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background pointer-coarse:size-11" : "flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-muted group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0", className),
+		children: compact || rail ? /* @__PURE__ */ jsxs(Avatar, {
+			"aria-hidden": "true",
+			children: [avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+				src: avatarUrl,
+				alt: ""
+			}), /* @__PURE__ */ jsx(AvatarFallback, {
+				"data-initials": initials(name),
+				className: cn("after:content-[attr(data-initials)]", color && [categoryBg[color], "text-category-foreground"])
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UserChip, {
 			name,
 			subtitle,
 			avatarUrl,
+			color,
 			className: "flex-1"
-		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })]
+		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })] })
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 		"data-slot": "user-menu",
-		side: rail ? "right" : "top",
-		align: rail ? "end" : "start",
-		className: "w-(--radix-dropdown-menu-trigger-width) min-w-60",
+		side: compact ? "bottom" : rail ? "right" : "top",
+		align: compact || rail ? "end" : "start",
+		className: compact ? "min-w-60" : "w-(--radix-dropdown-menu-trigger-width) min-w-60",
 		children: [
 			/* @__PURE__ */ jsxs(DropdownMenuLabel, {
 				className: "flex min-w-0 flex-col font-normal",

package/dist/components/ai/ask-box.d.ts

@@ -18,10 +18,22 @@ export interface AskBoxProps extends Omit<React.ComponentProps<"form">, "onSubmi
   lang?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  /** The assistant is working: sending is blocked and, with `onStop`, the send button becomes Stop. */
+  pending?: boolean;
+  /** Stops the assistant. Shown as a Stop button while `pending`. */
+  onStop?: () => void;
+  /**
+   * The answer, shown under the box (text, Prose, ActionReceipts). Passing it, even `null`, turns the reply area on:
+   * while `pending` with no answer yet it shows a typing indicator. `useAssistant().reply` fits here.
+   */
+  reply?: React.ReactNode;
+  /** Link under the reply to continue in the full chat, labelled "Open chat". */
+  chatHref?: string;
 }
 /**
  * The large rounded input an assistant starts from: auto-growing text, chips while typing, suggestion pills and the
- * DictationButton (mic, stop, send). The focus ring is on the whole box.
+ * DictationButton (mic, stop, send). The focus ring is on the whole box. With `reply` the answer shows under the box;
+ * with `pending` and `onStop` the send button becomes Stop.
  */
-declare function AskBox({ value, onValueChange, onSubmit, placeholder, chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, className, ...props }: AskBoxProps): React.JSX.Element;
+declare function AskBox({ value, onValueChange, onSubmit, placeholder, chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, pending, onStop, reply, chatHref, className, ...props }: AskBoxProps): React.JSX.Element;
 export { AskBox };

package/dist/components/ai/ask-box.js

@@ -1,9 +1,11 @@
 "use client";
+import { TypingIndicator } from "./chat.js";
 import { DictationButton } from "./dictation.js";
 import { Button } from "../ui/button.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon, SquareIcon } from "lucide-react";
 // src/components/ai/ask-box.tsx
 const noSpeech = {
 	isSupported: () => false,
@@ -11,15 +13,20 @@ const noSpeech = {
 };
 /**
 * The large rounded input an assistant starts from: auto-growing text, chips while typing, suggestion pills and the
-* DictationButton (mic, stop, send). The focus ring is on the whole box.
+* DictationButton (mic, stop, send). The focus ring is on the whole box. With `reply` the answer shows under the box;
+* with `pending` and `onStop` the send button becomes Stop.
 */
-function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything", chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, className, ...props }) {
+function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything", chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, pending, onStop, reply, chatHref, className, ...props }) {
 	const id = React.useId();
 	const submit = () => {
 		const text = value.trim();
-		if (text && !disabled) onSubmit(text);
+		if (!text || disabled || pending) return;
+		onSubmit(text);
+		document.getElementById(id)?.focus();
 	};
 	const hasText = value.trim().length > 0;
+	const hasReply = reply != null && reply !== false;
+	const showReply = hasReply || pending && reply !== void 0;
 	return /* @__PURE__ */ jsxs("form", {
 		"data-slot": "ask-box",
 		className: cn("flex w-full min-w-0 flex-col gap-3", className),
@@ -28,58 +35,87 @@ function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything",
 			submit();
 		},
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "focus-box flex flex-col gap-2 rounded-3xl border border-transparent bg-muted py-2.5 pr-2.5 pl-5",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-end gap-2",
-				children: [
-					/* @__PURE__ */ jsx("label", {
-						htmlFor: id,
-						className: "sr-only",
-						children: placeholder
-					}),
-					/* @__PURE__ */ jsx("textarea", {
-						id,
-						rows: 1,
-						value,
-						disabled,
-						autoFocus,
-						placeholder,
-						onChange: (e) => onValueChange(e.target.value),
-						onKeyDown: (e) => {
-							if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-								e.preventDefault();
-								submit();
-							}
-						},
-						className: "field-sizing-content max-h-48 min-h-10 min-w-0 flex-1 resize-none border-0 bg-transparent py-2 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground"
-					}),
-					/* @__PURE__ */ jsx(DictationButton, {
-						value,
-						disabled,
-						source: dictation === false ? noSpeech : dictation,
-						lang,
-						onTranscript: (text) => onValueChange(value ? `${value.replace(/\s+$/, "")} ${text}` : text)
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "focus-box flex flex-col gap-2 rounded-3xl border border-transparent bg-muted py-2.5 pr-2.5 pl-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-end gap-2",
+					children: [
+						/* @__PURE__ */ jsx("label", {
+							htmlFor: id,
+							className: "sr-only",
+							children: placeholder
+						}),
+						/* @__PURE__ */ jsx("textarea", {
+							id,
+							rows: 1,
+							value,
+							disabled,
+							autoFocus,
+							placeholder,
+							onChange: (e) => onValueChange(e.target.value),
+							onKeyDown: (e) => {
+								if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+									e.preventDefault();
+									submit();
+								}
+							},
+							className: "field-sizing-content max-h-48 min-h-10 min-w-0 flex-1 resize-none border-0 bg-transparent py-2 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground"
+						}),
+						pending && onStop ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "icon",
+							shape: "pill",
+							className: "size-10 shrink-0",
+							"aria-label": "Stop",
+							onClick: () => {
+								onStop();
+								document.getElementById(id)?.focus();
+							},
+							children: /* @__PURE__ */ jsx(SquareIcon, { className: "size-3.5 fill-current" })
+						}) : /* @__PURE__ */ jsx(DictationButton, {
+							value,
+							disabled: disabled || pending,
+							source: dictation === false ? noSpeech : dictation,
+							lang,
+							onTranscript: (text) => onValueChange(value ? `${value.replace(/\s+$/, "")} ${text}` : text)
+						})
+					]
+				}), hasText && chips && /* @__PURE__ */ jsx("div", {
+					"data-slot": "ask-box-chips",
+					className: "flex flex-wrap gap-1.5 pb-1",
+					children: chips
+				})]
+			}),
+			showReply && /* @__PURE__ */ jsxs("div", {
+				"data-slot": "ask-box-reply",
+				"aria-live": "polite",
+				"aria-busy": pending || void 0,
+				className: "flex min-w-0 flex-col gap-3 px-2 text-[15px] leading-relaxed",
+				children: [hasReply ? reply : /* @__PURE__ */ jsx(TypingIndicator, { label: "Working" }), chatHref && /* @__PURE__ */ jsx(Button, {
+					asChild: true,
+					variant: "link",
+					className: "self-start px-0 max-md:min-h-11",
+					children: /* @__PURE__ */ jsxs("a", {
+						href: chatHref,
+						children: ["Open chat", /* @__PURE__ */ jsx(ArrowRightIcon, {})]
 					})
-				]
-			}), hasText && chips && /* @__PURE__ */ jsx("div", {
-				"data-slot": "ask-box-chips",
-				className: "flex flex-wrap gap-1.5 pb-1",
-				children: chips
-			})]
-		}), suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
-			"data-slot": "ask-box-suggestions",
-			className: "flex flex-wrap gap-2",
-			children: suggestions.map((s) => /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "outline",
-				size: "sm",
-				shape: "pill",
-				disabled,
-				onClick: () => onSuggestion ? onSuggestion(s) : onSubmit(s),
-				children: s
-			}, s))
-		})]
+				})]
+			}),
+			suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+				"data-slot": "ask-box-suggestions",
+				className: "flex flex-wrap gap-2",
+				children: suggestions.map((s) => /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					shape: "pill",
+					disabled,
+					onClick: () => onSuggestion ? onSuggestion(s) : onSubmit(s),
+					children: s
+				}, s))
+			})
+		]
 	});
 }
 export { AskBox };

package/dist/components/ai/assistant.d.ts

@@ -25,6 +25,12 @@ export interface AssistantSendContext {
   }) => string;
   /** Replace a message's content, e.g. while a reply streams in. */
   update: (id: string, content: React.ReactNode) => void;
+  /** Aborted when the user presses Stop. Pass it to `fetch`, or listen for `abort` to tell your server to stop. */
+  signal: AbortSignal;
+}
+export interface AssistantSendOptions {
+  /** Open the dock. Default true; false for an AskBox that shows the answer inline. */
+  open?: boolean;
 }
 export interface AssistantContextValue {
   open: boolean;
@@ -33,10 +39,14 @@ export interface AssistantContextValue {
   messages: AssistantMessage[];
   /** True while the send handler runs. */
   pending: boolean;
+  /** The assistant messages after the latest user message, ready for `AskBox` `reply`; null until there is one. */
+  reply: React.ReactNode;
   page: AssistantPage | null;
   setPage: (page: AssistantPage | null) => void;
-  /** Adds the user message, opens the dock and runs the app's onSend. */
-  send: (text: string) => Promise<void>;
+  /** Adds the user message, opens the dock (unless `{ open: false }`) and runs the app's onSend. */
+  send: (text: string, options?: AssistantSendOptions) => Promise<void>;
+  /** Stops the running send: aborts its `signal`, ends `pending` and drops its return value and later `append`/`update` calls. */
+  stop: () => void;
   append: AssistantSendContext["append"];
   update: AssistantSendContext["update"];
   clear: () => void;
@@ -44,7 +54,7 @@ export interface AssistantContextValue {
 export interface AssistantProviderProps {
   /**
    * The app's send handler. Return the reply (text or nodes) to append it, or call `append` / `update` yourself
-   * (for streaming or receipts) and return nothing. A thrown error is shown as the reply.
+   * (for streaming or receipts) and return nothing. A thrown error is shown as the reply. Stop aborts `signal`.
    */
   onSend: (text: string, context: AssistantSendContext) => React.ReactNode | Promise<React.ReactNode>;
   initialMessages?: AssistantMessage[];