harebear-ui 0.8.0 → 0.9.0

package/dist/components/admin/markdown-editor.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface MarkdownEditorProps extends Omit<React.ComponentProps<"textarea">, "value" | "defaultValue" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /**
+   * Turns the Markdown into elements for the Preview tab; the result is wrapped in Prose.
+   * With react-markdown: `(md) => <Markdown components={{ blockquote: ProseBlockquote }}>{md}</Markdown>`.
+   */
+  renderPreview: (markdown: string) => React.ReactNode;
+  /** Classes for the wrapping Tabs. `className` goes to the textarea. */
+  wrapperClassName?: string;
+}
+/** Markdown field with Write and Preview tabs. Other props go to the Textarea (id, placeholder, aria-*). */
+declare function MarkdownEditor({ value, onValueChange, renderPreview, className, wrapperClassName, ...props }: MarkdownEditorProps): React.JSX.Element;
+export { MarkdownEditor };

package/dist/components/admin/markdown-editor.js

@@ -0,0 +1,42 @@
+"use client";
+import { Prose } from "../ai/code-block.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { Textarea } from "../ui/textarea.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/markdown-editor.tsx
+/** Markdown field with Write and Preview tabs. Other props go to the Textarea (id, placeholder, aria-*). */
+function MarkdownEditor({ value, onValueChange, renderPreview, className, wrapperClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(Tabs, {
+		"data-slot": "markdown-editor",
+		defaultValue: "write",
+		className: cn("gap-3", wrapperClassName),
+		children: [
+			/* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTrigger, {
+				value: "write",
+				children: "Write"
+			}), /* @__PURE__ */ jsx(TabsTrigger, {
+				value: "preview",
+				children: "Preview"
+			})] }),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "write",
+				children: /* @__PURE__ */ jsx(Textarea, {
+					value,
+					onChange: (e) => onValueChange(e.target.value),
+					className: cn("min-h-48", className),
+					...props
+				})
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "preview",
+				className: "min-h-48 rounded-md border px-3.5 py-3",
+				children: value.trim() ? /* @__PURE__ */ jsx(Prose, { children: renderPreview(value) }) : /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Nothing to preview."
+				})
+			})
+		]
+	});
+}
+export { MarkdownEditor };

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. */
@@ -18,5 +21,5 @@ export interface UserMenuProps {
  * 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, className }: UserMenuProps): React.JSX.Element;
 export { UserMenu };

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

@@ -28,7 +28,7 @@ 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", className }) {
 	const { mode, setMode } = useTheme();
 	const sidebar = useSidebarOptional();
 	const rail = sidebar?.state === "collapsed" && !sidebar.isMobile;
@@ -40,6 +40,7 @@ function UserMenu({ name, subtitle, avatarUrl, children, themeSwitch = true, onS
 			name,
 			subtitle,
 			avatarUrl,
+			color,
 			className: "flex-1"
 		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })]
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {

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[];

package/dist/components/ai/assistant.js

@@ -2,6 +2,7 @@
 import { AskBox } from "./ask-box.js";
 import { AssistantAvatar, ChatMessage, ChatThread, TypingIndicator } from "./chat.js";
 import { Button } from "../ui/button.js";
+import { useToastClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -25,6 +26,7 @@ function AssistantProvider({ onSend, initialMessages = [], defaultOpen = false,
 	pageRef.current = page;
 	const onSendRef = React.useRef(onSend);
 	onSendRef.current = onSend;
+	const runRef = React.useRef(null);
 	const append = React.useCallback((m) => {
 		const id = m.id ?? newId();
 		setMessages((list) => [...list, {
@@ -39,43 +41,66 @@ function AssistantProvider({ onSend, initialMessages = [], defaultOpen = false,
 			content
 		} : m));
 	}, []);
-	const send = React.useCallback(async (text) => {
+	const send = React.useCallback(async (text, options) => {
 		const before = messagesRef.current;
+		runRef.current?.abort();
+		const run = new AbortController();
+		runRef.current = run;
 		append({
 			role: "user",
 			content: text
 		});
-		setOpen(true);
+		if (options?.open !== false) setOpen(true);
 		setPending(true);
 		try {
 			const reply = await onSendRef.current(text, {
 				page: pageRef.current,
 				messages: before,
-				append,
-				update
+				append: (m) => run.signal.aborted ? "" : append(m),
+				update: (id, content) => {
+					if (!run.signal.aborted) update(id, content);
+				},
+				signal: run.signal
 			});
+			if (run.signal.aborted) return;
 			if (reply !== void 0 && reply !== null && reply !== false) append({
 				role: "assistant",
 				content: reply
 			});
 		} catch (e) {
+			if (run.signal.aborted) return;
 			append({
 				role: "assistant",
 				content: e instanceof Error ? e.message : "Something went wrong."
 			});
 		} finally {
-			setPending(false);
+			if (runRef.current === run) {
+				runRef.current = null;
+				setPending(false);
+			}
 		}
 	}, [append, update]);
+	const stop = React.useCallback(() => {
+		runRef.current?.abort();
+		runRef.current = null;
+		setPending(false);
+	}, []);
+	const reply = React.useMemo(() => {
+		const start = messages.findLastIndex((m) => m.role === "user");
+		const answer = start === -1 ? [] : messages.slice(start + 1);
+		return answer.length ? answer.map((m) => /* @__PURE__ */ jsx("div", { children: m.content }, m.id)) : null;
+	}, [messages]);
 	const value = React.useMemo(() => ({
 		open,
 		setOpen,
 		toggle: () => setOpen((v) => !v),
 		messages,
 		pending,
+		reply,
 		page,
 		setPage,
 		send,
+		stop,
 		append,
 		update,
 		clear: () => setMessages([])
@@ -83,8 +108,10 @@ function AssistantProvider({ onSend, initialMessages = [], defaultOpen = false,
 		open,
 		messages,
 		pending,
+		reply,
 		page,
 		send,
+		stop,
 		append,
 		update
 	]);
@@ -118,7 +145,7 @@ function useAssistantPage(page) {
 * Sits above AppNav's phone tab bar.
 */
 function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(SparklesIcon, {}), fullScreenHref, emptyTitle = "How can I help?", emptyDescription, suggestions, placeholder, dictation, launcher = true, launcherLabel, className, ...props }) {
-	const { open, setOpen, messages, pending, page, send } = useAssistant();
+	const { open, setOpen, messages, pending, page, send, stop } = useAssistant();
 	const [draft, setDraft] = React.useState("");
 	const titleId = React.useId();
 	const panelRef = React.useRef(null);
@@ -136,6 +163,7 @@ function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(Sparkle
 		panelRef.current?.querySelector("textarea")?.focus();
 		send(text);
 	};
+	useToastClearance("--hb-toast-launcher", "3.5rem", !open && launcher);
 	if (!open) {
 		if (!launcher) return null;
 		return /* @__PURE__ */ jsxs("button", {
@@ -220,7 +248,9 @@ function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(Sparkle
 					onSubmit: submit,
 					placeholder: placeholder ?? `Ask ${title}`,
 					suggestions: messages.length === 0 ? pills : void 0,
-					dictation
+					dictation,
+					pending,
+					onStop: stop
 				})
 			})
 		]

package/dist/components/ai/code-block.d.ts

@@ -22,10 +22,17 @@ export interface InlineCodeProps extends React.ComponentProps<"code"> {
   truncate?: number;
 }
 declare function InlineCode({ truncate, className, children, title, ...props }: InlineCodeProps): React.JSX.Element;
+/**
+ * A blockquote that becomes a `Callout` when its first word is "Tip:" (the word is dropped).
+ * Prose applies it to blockquote children; pass it to react-markdown as `components={{ blockquote: ProseBlockquote }}`.
+ */
+declare function ProseBlockquote({ children, node: _node, ...props }: React.ComponentProps<"blockquote"> & {
+  node?: unknown;
+}): React.JSX.Element;
 /**
  * Typography for long-form and model output. Styles plain HTML children
  * (p, ul, ol, li, strong, a, code, pre, h1-h4, blockquote, table), so it works
- * with react-markdown or any HTML renderer.
+ * with react-markdown or any HTML renderer. A blockquote starting "Tip:" renders as a Callout.
  */
-declare function Prose({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { CodeSnippet, InlineCode, Prose };
+declare function Prose({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { CodeSnippet, InlineCode, Prose, ProseBlockquote };