harebear-ui 0.6.0 → 0.8.0

package/dist/components/admin/settings.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface SettingsSectionProps extends Omit<React.ComponentProps<"section">, "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** SettingsRow children. */
+  children?: React.ReactNode;
+}
+/** A card of settings: heading, optional description, then SettingsRows separated by hairlines. */
+declare function SettingsSection({ title, description, className, children, ...props }: SettingsSectionProps): React.JSX.Element;
+export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "content"> {
+  label: React.ReactNode;
+  /** One line under the label. */
+  description?: React.ReactNode;
+  /** id of the control, so the label is a <label> for it (Switch, Select trigger, Input). */
+  htmlFor?: string;
+  /** The control at the right: Switch, Select, ToggleGroup, Button. */
+  control?: React.ReactNode;
+  /**
+   * Inline content that expands under the row (change password, add a connection). Without a `control`, the row
+   * gets a toggle button (`expandLabel` / "Cancel").
+   */
+  content?: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Label of the default toggle button. Default "Change". */
+  expandLabel?: React.ReactNode;
+}
+/** One setting: label and description at the left, a control at the right, optional expandable content. */
+declare function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
+export { SettingsRow, SettingsSection };

package/dist/components/admin/settings.js

@@ -0,0 +1,78 @@
+"use client";
+import { Collapse } from "../layout/collapse.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";
+// src/components/admin/settings.tsx
+/** A card of settings: heading, optional description, then SettingsRows separated by hairlines. */
+function SettingsSection({ title, description, className, children, ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "settings-section",
+		"aria-labelledby": id,
+		className: cn("flex min-w-0 flex-col rounded-xl bg-card shadow-card", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 px-5 pt-5 pb-2",
+			children: [/* @__PURE__ */ jsx("h2", {
+				id,
+				className: "text-base font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col divide-y divide-border px-5 pb-1",
+			children
+		})]
+	});
+}
+/** 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 }) {
+	const [openState, setOpenState] = React.useState(defaultOpen);
+	const open = openProp ?? openState;
+	const setOpen = (next) => {
+		if (openProp === void 0) setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const contentId = React.useId();
+	const Label = htmlFor ? "label" : "div";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "settings-row",
+		"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
+			})
+		})]
+	});
+}
+export { SettingsRow, SettingsSection };

package/dist/components/ai/action-receipt.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface ActionReceiptProps extends Omit<React.ComponentProps<"div">, "title"> {
+  /** What was done, past tense: "Added milk to Groceries". */
+  title: React.ReactNode;
+  /** One line, e.g. "Groceries · just now". */
+  meta?: React.ReactNode;
+  /** Shows an Undo button. */
+  onUndo?: () => void;
+  /** Default "Undo". */
+  undoLabel?: React.ReactNode;
+  /** After undo: the check goes away, the title is struck through and the button is replaced by "Undone". */
+  undone?: boolean;
+}
+/** A compact card for one action the assistant took on its own: round check, title, one meta line, Undo. */
+declare function ActionReceipt({ title, meta, onUndo, undoLabel, undone, className, ...props }: ActionReceiptProps): React.JSX.Element;
+export { ActionReceipt };

package/dist/components/ai/action-receipt.js

@@ -0,0 +1,47 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+// src/components/ai/action-receipt.tsx
+/** A compact card for one action the assistant took on its own: round check, title, one meta line, Undo. */
+function ActionReceipt({ title, meta, onUndo, undoLabel = "Undo", undone, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "action-receipt",
+		"data-undone": undone || void 0,
+		className: cn("flex min-w-0 items-center gap-3 rounded-xl border border-border bg-card px-3.5 py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("grid size-6 shrink-0 place-items-center rounded-full", undone ? "border-2 border-muted-foreground/40" : "bg-success text-card"),
+				children: !undone && /* @__PURE__ */ jsx(CheckIcon, {
+					className: "size-3.5",
+					strokeWidth: 3
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col leading-snug",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("text-sm font-medium wrap-anywhere", undone && "text-muted-foreground line-through"),
+					children: title
+				}), meta && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs text-muted-foreground",
+					children: meta
+				})]
+			}),
+			undone ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-xs font-medium text-muted-foreground",
+				children: "Undone"
+			}) : onUndo && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				className: "shrink-0",
+				onClick: onUndo,
+				children: undoLabel
+			})
+		]
+	});
+}
+export { ActionReceipt };

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

@@ -0,0 +1,27 @@
+import { SpeechSource } from "./dictation.js";
+import * as React from "react";
+export interface AskBoxProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Called with the trimmed text on Enter or the send button. Shift+Enter inserts a newline. */
+  onSubmit: (value: string) => void;
+  /** One per app, e.g. "Ask HomeBot anything". Also the field's accessible label. Default "Ask anything". */
+  placeholder?: string;
+  /** Shown under the text while there is text, e.g. chips for the date or list it picked up. */
+  chips?: React.ReactNode;
+  /** Pills under the box. Clicking one submits it (or calls onSuggestion). */
+  suggestions?: string[];
+  onSuggestion?: (suggestion: string) => void;
+  /** Speech source for the mic. Default the browser's; `false` hides the mic. */
+  dictation?: SpeechSource | false;
+  /** BCP 47 language for dictation. */
+  lang?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+/**
+ * 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.
+ */
+declare function AskBox({ value, onValueChange, onSubmit, placeholder, chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, className, ...props }: AskBoxProps): React.JSX.Element;
+export { AskBox };

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

@@ -0,0 +1,85 @@
+"use client";
+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";
+// src/components/ai/ask-box.tsx
+const noSpeech = {
+	isSupported: () => false,
+	start: () => () => {}
+};
+/**
+* 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.
+*/
+function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything", chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, className, ...props }) {
+	const id = React.useId();
+	const submit = () => {
+		const text = value.trim();
+		if (text && !disabled) onSubmit(text);
+	};
+	const hasText = value.trim().length > 0;
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "ask-box",
+		className: cn("flex w-full min-w-0 flex-col gap-3", className),
+		onSubmit: (e) => {
+			e.preventDefault();
+			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)
+					})
+				]
+			}), 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))
+		})]
+	});
+}
+export { AskBox };

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

@@ -0,0 +1,94 @@
+import { SpeechSource } from "./dictation.js";
+import * as React from "react";
+export interface AssistantMessage {
+  id: string;
+  role: "user" | "assistant";
+  /** Text or nodes: Prose, ActionReceipts, ToolSteps. */
+  content: React.ReactNode;
+}
+/** What the open page tells the assistant: use it as context, and its suggestions fill the dock's empty state. */
+export interface AssistantPage {
+  /** Stable key for the page, e.g. the route. */
+  id: string;
+  title?: string;
+  /** Anything the send handler needs: the open list, the selected record. */
+  data?: unknown;
+  suggestions?: string[];
+}
+export interface AssistantSendContext {
+  page: AssistantPage | null;
+  /** The conversation before this message. */
+  messages: AssistantMessage[];
+  /** Add a message (a streamed reply, a receipt) while the handler runs. Returns its id. */
+  append: (message: Omit<AssistantMessage, "id"> & {
+    id?: string;
+  }) => string;
+  /** Replace a message's content, e.g. while a reply streams in. */
+  update: (id: string, content: React.ReactNode) => void;
+}
+export interface AssistantContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  messages: AssistantMessage[];
+  /** True while the send handler runs. */
+  pending: boolean;
+  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>;
+  append: AssistantSendContext["append"];
+  update: AssistantSendContext["update"];
+  clear: () => void;
+}
+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.
+   */
+  onSend: (text: string, context: AssistantSendContext) => React.ReactNode | Promise<React.ReactNode>;
+  initialMessages?: AssistantMessage[];
+  defaultOpen?: boolean;
+  children?: React.ReactNode;
+}
+/**
+ * Keeps one assistant conversation across pages: open state, messages, the open page as context, and the app's
+ * send handler. Mount it above the router outlet; read it with useAssistant().
+ */
+declare function AssistantProvider({ onSend, initialMessages, defaultOpen, children }: AssistantProviderProps): React.JSX.Element;
+/** The assistant state from AssistantProvider. Throws outside one. */
+export declare function useAssistant(): AssistantContextValue;
+/**
+ * Tells the assistant which page is open, for as long as the calling component is mounted. The page is replaced
+ * when `page.id` changes; other fields are read at send time.
+ */
+export declare function useAssistantPage(page: AssistantPage): void;
+export interface AssistantDockProps extends Omit<React.ComponentProps<"section">, "title"> {
+  /** Assistant name in the header and launcher, e.g. "HomeBot". Default "Assistant". */
+  title?: string;
+  /** Header and launcher icon. Default a sparkle. */
+  icon?: React.ReactNode;
+  /** Link to the full-screen chat. Shows an expand button in the header. */
+  fullScreenHref?: string;
+  /** Empty state heading. Default "How can I help?". */
+  emptyTitle?: React.ReactNode;
+  /** Empty state line under the heading. */
+  emptyDescription?: React.ReactNode;
+  /** Suggestion pills in the empty state. Default: the open page's suggestions. */
+  suggestions?: string[];
+  /** Composer placeholder. Default `Ask ${title}`. */
+  placeholder?: string;
+  /** Speech source for the mic. Default the browser's; `false` hides the mic. */
+  dictation?: SpeechSource | false;
+  /** Show the floating launcher button while closed. Default true. Turn off when another control opens it. */
+  launcher?: boolean;
+  /** Label of the launcher. Default `Ask ${title}`. */
+  launcherLabel?: string;
+}
+/**
+ * The assistant as a floating panel over the page (it never reflows the page): header, empty state with
+ * suggestions, message list, AskBox. A soft launcher button opens it. Escape closes it. Needs AssistantProvider.
+ * Sits above AppNav's phone tab bar.
+ */
+declare function AssistantDock({ title, icon, fullScreenHref, emptyTitle, emptyDescription, suggestions, placeholder, dictation, launcher, launcherLabel, className, ...props }: AssistantDockProps): React.JSX.Element | null;
+export { AssistantDock, AssistantProvider };

package/dist/components/ai/assistant.js

@@ -0,0 +1,229 @@
+"use client";
+import { AskBox } from "./ask-box.js";
+import { AssistantAvatar, ChatMessage, ChatThread, TypingIndicator } from "./chat.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 { Maximize2Icon, SparklesIcon, XIcon } from "lucide-react";
+// src/components/ai/assistant.tsx
+const AssistantContext = React.createContext(null);
+let nextId = 0;
+const newId = () => `m${Date.now().toString(36)}${(nextId++).toString(36)}`;
+/**
+* Keeps one assistant conversation across pages: open state, messages, the open page as context, and the app's
+* send handler. Mount it above the router outlet; read it with useAssistant().
+*/
+function AssistantProvider({ onSend, initialMessages = [], defaultOpen = false, children }) {
+	const [open, setOpen] = React.useState(defaultOpen);
+	const [messages, setMessages] = React.useState(initialMessages);
+	const [pending, setPending] = React.useState(false);
+	const [page, setPage] = React.useState(null);
+	const messagesRef = React.useRef(messages);
+	messagesRef.current = messages;
+	const pageRef = React.useRef(page);
+	pageRef.current = page;
+	const onSendRef = React.useRef(onSend);
+	onSendRef.current = onSend;
+	const append = React.useCallback((m) => {
+		const id = m.id ?? newId();
+		setMessages((list) => [...list, {
+			...m,
+			id
+		}]);
+		return id;
+	}, []);
+	const update = React.useCallback((id, content) => {
+		setMessages((list) => list.map((m) => m.id === id ? {
+			...m,
+			content
+		} : m));
+	}, []);
+	const send = React.useCallback(async (text) => {
+		const before = messagesRef.current;
+		append({
+			role: "user",
+			content: text
+		});
+		setOpen(true);
+		setPending(true);
+		try {
+			const reply = await onSendRef.current(text, {
+				page: pageRef.current,
+				messages: before,
+				append,
+				update
+			});
+			if (reply !== void 0 && reply !== null && reply !== false) append({
+				role: "assistant",
+				content: reply
+			});
+		} catch (e) {
+			append({
+				role: "assistant",
+				content: e instanceof Error ? e.message : "Something went wrong."
+			});
+		} finally {
+			setPending(false);
+		}
+	}, [append, update]);
+	const value = React.useMemo(() => ({
+		open,
+		setOpen,
+		toggle: () => setOpen((v) => !v),
+		messages,
+		pending,
+		page,
+		setPage,
+		send,
+		append,
+		update,
+		clear: () => setMessages([])
+	}), [
+		open,
+		messages,
+		pending,
+		page,
+		send,
+		append,
+		update
+	]);
+	return /* @__PURE__ */ jsx(AssistantContext.Provider, {
+		value,
+		children
+	});
+}
+/** The assistant state from AssistantProvider. Throws outside one. */
+function useAssistant() {
+	const ctx = React.useContext(AssistantContext);
+	if (!ctx) throw new Error("useAssistant must be used inside <AssistantProvider>");
+	return ctx;
+}
+/**
+* Tells the assistant which page is open, for as long as the calling component is mounted. The page is replaced
+* when `page.id` changes; other fields are read at send time.
+*/
+function useAssistantPage(page) {
+	const { setPage } = useAssistant();
+	const latest = React.useRef(page);
+	latest.current = page;
+	React.useEffect(() => {
+		setPage(latest.current);
+		return () => setPage(null);
+	}, [page.id, setPage]);
+}
+/**
+* The assistant as a floating panel over the page (it never reflows the page): header, empty state with
+* suggestions, message list, AskBox. A soft launcher button opens it. Escape closes it. Needs AssistantProvider.
+* 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 [draft, setDraft] = React.useState("");
+	const titleId = React.useId();
+	const panelRef = React.useRef(null);
+	const launcherRef = React.useRef(null);
+	const wasOpen = React.useRef(open);
+	const pills = suggestions ?? page?.suggestions ?? [];
+	React.useEffect(() => {
+		if (open && !wasOpen.current) panelRef.current?.querySelector("textarea")?.focus();
+		if (!open && wasOpen.current) launcherRef.current?.focus();
+		wasOpen.current = open;
+	}, [open]);
+	const submit = (text) => {
+		if (pending) return;
+		setDraft("");
+		panelRef.current?.querySelector("textarea")?.focus();
+		send(text);
+	};
+	if (!open) {
+		if (!launcher) return null;
+		return /* @__PURE__ */ jsxs("button", {
+			ref: launcherRef,
+			type: "button",
+			"data-slot": "assistant-launcher",
+			"aria-expanded": false,
+			onClick: () => setOpen(true),
+			className: "fixed right-4 bottom-[calc(var(--hb-bottom-inset,0px)+var(--hb-fab-inset,0px)+1rem)] z-40 flex h-12 items-center gap-2 rounded-full border border-border bg-card pr-5 pl-2 text-sm font-medium text-foreground shadow-card outline-none hover:bg-muted focus-visible:ring-4 focus-visible:ring-ring/20 md:right-6 md:bottom-6",
+			children: [/* @__PURE__ */ jsx(AssistantAvatar, { icon }), launcherLabel ?? `Ask ${title}`]
+		});
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		ref: panelRef,
+		"data-slot": "assistant-dock",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-labelledby": titleId,
+		onKeyDown: (e) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				setOpen(false);
+			}
+		},
+		className: cn("fixed inset-x-2 bottom-[calc(var(--hb-bottom-inset,0px)+0.5rem)] z-40 flex h-[min(40rem,calc(100dvh-var(--hb-bottom-inset,0px)-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-card duration-200 animate-in fade-in slide-in-from-bottom-4 motion-reduce:animate-none sm:inset-x-auto sm:right-4 sm:w-104 md:right-6 md:bottom-6 md:h-[min(40rem,calc(100dvh-3rem))]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-center gap-2.5 py-2.5 pr-2.5 pl-4",
+				children: [
+					/* @__PURE__ */ jsx(AssistantAvatar, { icon }),
+					/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "min-w-0 flex-1 truncate text-[15px] font-semibold",
+						children: title
+					}),
+					fullScreenHref && /* @__PURE__ */ jsx(Button, {
+						asChild: true,
+						variant: "ghost",
+						size: "icon",
+						shape: "pill",
+						children: /* @__PURE__ */ jsx("a", {
+							href: fullScreenHref,
+							"aria-label": "Open full screen",
+							children: /* @__PURE__ */ jsx(Maximize2Icon, {})
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						shape: "pill",
+						"aria-label": `Close ${title}`,
+						onClick: () => setOpen(false),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			}),
+			messages.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "assistant-dock-empty",
+				className: "flex flex-1 flex-col justify-end gap-1 overflow-y-auto px-5 pb-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-lg font-semibold",
+					children: emptyTitle
+				}), emptyDescription && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: emptyDescription
+				})]
+			}) : /* @__PURE__ */ jsxs(ChatThread, {
+				className: "px-4 pt-2",
+				contentClassName: "gap-5",
+				children: [messages.map((m) => /* @__PURE__ */ jsx(ChatMessage, {
+					role: m.role,
+					avatar: false,
+					children: m.content
+				}, m.id)), pending && /* @__PURE__ */ jsx(TypingIndicator, { label: "Working" })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "px-3 pt-2 pb-3",
+				children: /* @__PURE__ */ jsx(AskBox, {
+					value: draft,
+					onValueChange: setDraft,
+					onSubmit: submit,
+					placeholder: placeholder ?? `Ask ${title}`,
+					suggestions: messages.length === 0 ? pills : void 0,
+					dictation
+				})
+			})
+		]
+	});
+}
+export { AssistantDock, AssistantProvider, useAssistant, useAssistantPage };

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+export interface SpeechSourceHandlers {
+  /** Recognised text. `final` is false for interim guesses that may still change. */
+  onResult: (text: string, final: boolean) => void;
+  /** Listening stopped (silence, stop(), or an error). */
+  onEnd: () => void;
+  onError: (error: string) => void;
+}
+/**
+ * Where dictation comes from. The default is `browserSpeechSource` (the Web Speech API); pass your own to use a
+ * server model: start recording in `start`, call the handlers, and return a function that stops.
+ */
+export interface SpeechSource {
+  isSupported: () => boolean;
+  start: (handlers: SpeechSourceHandlers, options: {
+    lang?: string;
+  }) => () => void;
+}
+/** SpeechSource on the browser's SpeechRecognition API. Unsupported (Firefox, most WebViews) means no mic button. */
+export declare const browserSpeechSource: SpeechSource;
+export interface UseDictationOptions {
+  /** Default browserSpeechSource. */
+  source?: SpeechSource;
+  /** BCP 47 language, e.g. "en-CA". Default: the browser's. */
+  lang?: string;
+  /** Called with each final transcript. */
+  onTranscript: (text: string) => void;
+}
+/** Dictation state for a custom control: `{ supported, listening, interim, error, start, stop }`. */
+export declare function useDictation({ source, lang, onTranscript }: UseDictationOptions): {
+  supported: boolean;
+  listening: boolean;
+  interim: string;
+  error: string | null;
+  start: () => void;
+  stop: () => void;
+};
+export interface DictationButtonProps extends Omit<React.ComponentProps<"div">, "onSubmit"> {
+  /** The composer's current text. Empty shows the mic; text shows send. */
+  value: string;
+  /** Final transcripts, to append to the text. */
+  onTranscript: (text: string) => void;
+  /** Send. Without it, the send button is a submit button for the surrounding form. */
+  onSend?: () => void;
+  source?: SpeechSource;
+  lang?: string;
+  disabled?: boolean;
+  /** Default "Send message". */
+  sendLabel?: string;
+}
+/**
+ * One round button for a composer: a mic when empty, stop (with listening bars) while listening, send once there is
+ * text. Announces "Listening" in a polite live region. Without a supported speech source the mic is hidden and the
+ * button is just send.
+ */
+declare function DictationButton({ value, onTranscript, onSend, source, lang, disabled, sendLabel, className, ...props }: DictationButtonProps): React.JSX.Element;
+export { DictationButton };