harebear-ui 0.2.2 → 0.3.0

package/dist/components/ai/chat-shell.js

@@ -0,0 +1,201 @@
+"use client";
+import { ChatThread } from "./chat.js";
+import { Alert, AlertDescription } from "../ui/alert.js";
+import { Button } from "../ui/button.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarProvider, SidebarTrigger, useSidebar, useSidebarOptional } from "../ui/sidebar.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftCloseIcon, PanelLeftOpenIcon, PanelRightIcon, TriangleAlertIcon } from "lucide-react";
+// src/components/ai/chat-shell.tsx
+const WIDE = "(min-width: 1280px)";
+const ChatShellContext = React.createContext(null);
+function readStored(key) {
+	try {
+		const v = window.localStorage.getItem(key);
+		return v === null ? null : v !== "collapsed";
+	} catch {
+		return null;
+	}
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
+* Full-height chat app layout: a sidebar that collapses to an icon rail (a sheet on mobile), the main chat
+* column, and an optional details panel. Put a ChatPanel inside.
+*/
+function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, detailsTitle = "Details", defaultDetailsOpen = true, storageKey, defaultOpen = true, className, children }) {
+	const [open, setOpen] = React.useState(defaultOpen);
+	useIsomorphicLayoutEffect(() => {
+		if (!storageKey) return;
+		const stored = readStored(storageKey);
+		if (stored !== null) setOpen(stored);
+	}, [storageKey]);
+	const onOpenChange = (next) => {
+		setOpen(next);
+		if (!storageKey) return;
+		try {
+			window.localStorage.setItem(storageKey, next ? "open" : "collapsed");
+		} catch {}
+	};
+	const wide = useMediaQuery(WIDE);
+	const [inline, setInline] = React.useState(defaultDetailsOpen);
+	const [sheet, setSheet] = React.useState(false);
+	const hasDetails = details !== void 0 && details !== null && details !== false;
+	const ctx = React.useMemo(() => hasDetails ? {
+		detailsTitle,
+		detailsOpen: wide ? inline : sheet,
+		toggleDetails: () => wide ? setInline((v) => !v) : setSheet((v) => !v)
+	} : null, [
+		hasDetails,
+		detailsTitle,
+		wide,
+		inline,
+		sheet
+	]);
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SidebarProvider, {
+		open,
+		onOpenChange,
+		style: {
+			"--sidebar-width": "17rem",
+			"--sidebar-width-icon": "4.25rem"
+		},
+		children: /* @__PURE__ */ jsxs(ChatShellContext.Provider, {
+			value: ctx,
+			children: [/* @__PURE__ */ jsxs(Sidebar, {
+				collapsible: "icon",
+				children: [
+					/* @__PURE__ */ jsxs(SidebarHeader, {
+						className: "gap-5 px-3.5 pt-[max(1.25rem,env(safe-area-inset-top))] group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-3 group-data-[collapsible=icon]:px-0",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 items-center gap-2 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-3",
+							children: [brand && /* @__PURE__ */ jsx("div", {
+								className: "min-w-0 flex-1 pl-2 group-data-[collapsible=icon]:pl-0",
+								children: brand
+							}), /* @__PURE__ */ jsx(SidebarCollapseButton, {})]
+						}), sidebarActions && /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-2.5 group-data-[collapsible=icon]:items-center",
+							children: sidebarActions
+						})]
+					}),
+					/* @__PURE__ */ jsx(SidebarContent, {
+						className: "px-3.5 pt-2",
+						children: sidebar
+					}),
+					sidebarFooter && /* @__PURE__ */ jsx(SidebarFooter, {
+						className: "px-3.5 pb-[max(1.25rem,env(safe-area-inset-bottom))] group-data-[collapsible=icon]:px-0",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "px-2 group-data-[collapsible=icon]:px-0",
+							children: sidebarFooter
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsxs(SidebarInset, {
+				"data-slot": "chat-shell",
+				className: cn("h-dvh min-w-0 overflow-hidden", className),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex h-full min-h-0 gap-3 p-2 sm:p-3 md:pl-0",
+					children: [children, hasDetails && wide && inline && /* @__PURE__ */ jsx("aside", {
+						"data-slot": "chat-shell-details",
+						"aria-label": detailsTitle,
+						className: "flex w-75 shrink-0 flex-col gap-3 overflow-y-auto",
+						children: details
+					})]
+				}), hasDetails && !wide && /* @__PURE__ */ jsx(Sheet, {
+					open: sheet,
+					onOpenChange: setSheet,
+					children: /* @__PURE__ */ jsxs(SheetContent, {
+						className: "overflow-y-auto bg-background p-4",
+						children: [/* @__PURE__ */ jsx(SheetHeader, {
+							className: "p-0",
+							children: /* @__PURE__ */ jsx(SheetTitle, { children: detailsTitle })
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-3",
+							children: details
+						})]
+					})
+				})]
+			})]
+		})
+	}) });
+}
+/** Collapse / expand control for the desktop sidebar, with a tooltip. Hidden on mobile, where the sidebar is a sheet. */
+function SidebarCollapseButton() {
+	const { state, isMobile, toggleSidebar } = useSidebar();
+	if (isMobile) return null;
+	const label = state === "collapsed" ? "Expand sidebar" : "Collapse sidebar";
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: state === "collapsed" ? "icon" : "icon-sm",
+			"aria-label": label,
+			onClick: toggleSidebar,
+			children: state === "collapsed" ? /* @__PURE__ */ jsx(PanelLeftOpenIcon, {}) : /* @__PURE__ */ jsx(PanelLeftCloseIcon, {})
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		children: label
+	})] });
+}
+/**
+* The chat column as a card: header, optional notice, scrolling thread, composer. Inside ChatShell it adds the
+* mobile sidebar button and the details toggle to the header by itself.
+*/
+function ChatPanel({ title, description, actions, notice, composer, conversationId, autoScroll, className, children, ...props }) {
+	const sidebar = useSidebarOptional();
+	const shell = React.useContext(ChatShellContext);
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "chat-panel",
+		className: cn("flex min-h-0 min-w-0 flex-1 flex-col rounded-xl border border-border bg-card shadow-card", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex flex-wrap items-center gap-2.5 px-3.5 pt-[max(0.75rem,env(safe-area-inset-top))] pb-3 sm:pr-4 sm:pl-6",
+				children: [
+					sidebar && /* @__PURE__ */ jsx(SidebarTrigger, { className: "md:hidden" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 basis-40 flex-col leading-snug",
+						children: [title && /* @__PURE__ */ jsx("h1", {
+							className: "truncate text-[15px] font-semibold",
+							children: title
+						}), description && /* @__PURE__ */ jsx("span", {
+							className: "truncate text-xs text-muted-foreground",
+							children: description
+						})]
+					}),
+					actions,
+					shell && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						"aria-label": `Toggle ${shell.detailsTitle.toLowerCase()}`,
+						"aria-pressed": shell.detailsOpen,
+						onClick: shell.toggleDetails,
+						children: /* @__PURE__ */ jsx(PanelRightIcon, {})
+					})
+				]
+			}),
+			notice && /* @__PURE__ */ jsx("div", {
+				className: "px-3.5 pb-1 sm:px-6",
+				children: /* @__PURE__ */ jsxs(Alert, {
+					variant: "warning",
+					role: "status",
+					children: [/* @__PURE__ */ jsx(TriangleAlertIcon, {}), /* @__PURE__ */ jsx(AlertDescription, { children: notice })]
+				})
+			}),
+			/* @__PURE__ */ jsx(ChatThread, {
+				autoScroll,
+				className: "px-3.5 pt-4 sm:px-6",
+				contentClassName: "gap-7",
+				children
+			}, conversationId),
+			composer && /* @__PURE__ */ jsx("div", {
+				className: "px-3.5 pt-3 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:px-6",
+				children: composer
+			})
+		]
+	});
+}
+export { ChatPanel, ChatShell };

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

@@ -14,9 +14,11 @@ export interface ChatMessageProps extends React.ComponentProps<"div"> {
   avatar?: React.ReactNode;
   /** Rendered under assistant content, usually <MessageActions />. */
   actions?: React.ReactNode;
+  /** User bubble color: "muted" (gray, default) or "soft" (tinted with the accent). */
+  variant?: "muted" | "soft";
 }
 /** One chat turn. User: right-aligned bubble. Assistant: avatar + free-flowing content. */
-declare function ChatMessage({ role, avatar, actions, className, children, ...props }: ChatMessageProps): React.JSX.Element;
+declare function ChatMessage({ role, avatar, actions, variant, className, children, ...props }: ChatMessageProps): React.JSX.Element;
 /** Tinted circle with an icon. Default assistant avatar. */
 declare function AssistantAvatar({ icon, className }: {
   icon?: React.ReactNode;
@@ -32,8 +34,14 @@ export interface MessageActionsProps extends React.ComponentProps<"div"> {
 }
 /** Copy / regenerate / thumbs row under an assistant message. Add more buttons as children. */
 declare function MessageActions({ copyText, onRegenerate, onFeedback, feedback, className, children, ...props }: MessageActionsProps): React.JSX.Element;
-/** Three pulsing dots while the assistant is generating. */
-declare function TypingIndicator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export interface TypingIndicatorProps extends React.ComponentProps<"div"> {
+  /** Text after the dots, e.g. "Working". Also used as the accessible label. */
+  label?: React.ReactNode;
+  /** Dot color: "muted" (default) or "primary". */
+  variant?: "muted" | "primary";
+}
+/** Three pulsing dots while the assistant is generating, with an optional label. */
+declare function TypingIndicator({ label, variant, className, ...props }: TypingIndicatorProps): React.JSX.Element;
 export interface ToolCallProps extends React.ComponentProps<typeof Badge> {
   /** "running" shows a spinner; "error" tints red. */
   status?: "running" | "done" | "error";

package/dist/components/ai/chat.js

@@ -42,14 +42,14 @@ function ChatThread({ autoScroll = true, className, contentClassName, children,
 	});
 }
 /** One chat turn. User: right-aligned bubble. Assistant: avatar + free-flowing content. */
-function ChatMessage({ role, avatar, actions, className, children, ...props }) {
+function ChatMessage({ role, avatar, actions, variant = "muted", className, children, ...props }) {
 	if (role === "user") return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chat-message",
 		"data-role": "user",
 		className: cn("flex justify-end", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "max-w-[80%] rounded-[calc(var(--radius-xl)*1.2)] rounded-br-sm bg-muted px-4.5 py-3 text-[15px] whitespace-pre-wrap",
+			className: cn("max-w-[80%] min-w-0 rounded-[calc(var(--radius-xl)*1.2)] rounded-br-sm px-4.5 py-3 text-[15px] whitespace-pre-wrap wrap-anywhere", variant === "soft" ? "bg-primary-soft" : "bg-muted"),
 			children
 		})
 	});
@@ -119,22 +119,28 @@ function MessageActions({ copyText, onRegenerate, onFeedback, feedback, classNam
 		]
 	});
 }
-/** Three pulsing dots while the assistant is generating. */
-function TypingIndicator({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+/** Three pulsing dots while the assistant is generating, with an optional label. */
+function TypingIndicator({ label, variant = "muted", className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "typing-indicator",
 		role: "status",
-		"aria-label": "Assistant is typing",
-		className: cn("flex gap-1.25 py-1", className),
+		"aria-label": typeof label === "string" ? label : "Assistant is typing",
+		className: cn("flex items-center gap-2 py-1", className),
 		...props,
-		children: [
-			0,
-			150,
-			300
-		].map((d) => /* @__PURE__ */ jsx("span", {
-			className: "inline-block size-1.5 animate-typing rounded-full bg-muted-foreground",
-			style: { animationDelay: `${d}ms` }
-		}, d))
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex gap-1.25",
+			children: [
+				0,
+				150,
+				300
+			].map((d) => /* @__PURE__ */ jsx("span", {
+				className: cn("inline-block size-1.5 animate-typing rounded-full", variant === "primary" ? "bg-primary" : "bg-muted-foreground"),
+				style: { animationDelay: `${d}ms` }
+			}, d))
+		}), label && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground",
+			children: label
+		})]
 	});
 }
 /** Outlined chip summarizing a tool call, e.g. "Read 2 notes from homelab/". */

package/dist/components/ai/code-block.js

@@ -56,7 +56,7 @@ function InlineCode({ className, ...props }) {
 function Prose({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "prose",
-		className: cn("flex flex-col gap-3.5 text-[15px] leading-[1.65] text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
+		className: cn("flex min-w-0 flex-col gap-3.5 text-[15px] leading-[1.65] wrap-anywhere text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
 		...props
 	});
 }

package/dist/components/ai/conversation-list.d.ts

@@ -1,7 +1,15 @@
+import { StatusTone } from "../admin/status.js";
+import { Button } from "../ui/button.js";
 import * as React from "react";
 export interface Conversation {
   id: string;
   title: string;
+  /** Second line under the title, e.g. the last-updated time or "Working". */
+  description?: React.ReactNode;
+  /** Shows a status dot before the description, for live states. */
+  tone?: StatusTone;
+  /** Pulse the status dot. */
+  pulse?: boolean;
 }
 export interface ConversationGroup {
   /** e.g. "Today", "Yesterday", "Previous 7 days". */
@@ -12,7 +20,32 @@ export interface ConversationListProps extends Omit<React.ComponentProps<"nav">,
   groups: ConversationGroup[];
   activeId?: string;
   onSelect?: (id: string) => void;
+  /** Trailing control per row, e.g. a delete button. On devices that can hover it shows on hover and focus; on touch it is always visible. */
+  renderAction?: (conversation: Conversation) => React.ReactNode;
+  /** Shown when there are no conversations. Default "No conversations yet". */
+  empty?: React.ReactNode;
 }
-/** Grouped list of chat threads for a sidebar. */
-declare function ConversationList({ groups, activeId, onSelect, className, ...props }: ConversationListProps): React.JSX.Element;
-export { ConversationList };
+/**
+ * Grouped list of chat threads for a sidebar. Inside a Sidebar it closes the mobile sheet on select,
+ * and hides itself when the sidebar is collapsed to its icon rail.
+ */
+declare function ConversationList({ groups, activeId, onSelect, renderAction, empty, className, ...props }: ConversationListProps): React.JSX.Element;
+/**
+ * Buckets items into Today / Yesterday / Previous 7 days / Earlier by a timestamp (ms or Date),
+ * newest first, and drops empty groups. Pass `now` for deterministic tests.
+ */
+declare function groupByDate<T>(items: T[], getDate: (item: T) => number | Date, toConversation: (item: T) => Conversation, now?: number | Date): ConversationGroup[];
+export interface NewConversationButtonProps extends React.ComponentProps<typeof Button> {
+  /** Default "New conversation". */
+  label?: string;
+  /** Default a plus icon. */
+  icon?: React.ReactNode;
+  /** Trailing content in the expanded button, e.g. <Kbd>⌘N</Kbd>. */
+  shortcut?: React.ReactNode;
+}
+/**
+ * Full-width "New conversation" button for a sidebar header. In the icon rail it shrinks to an icon with a
+ * tooltip; on mobile it closes the sidebar sheet after the click.
+ */
+declare function NewConversationButton({ label, icon, shortcut, variant, onClick, className, ...props }: NewConversationButtonProps): React.JSX.Element;
+export { ConversationList, NewConversationButton, groupByDate };

package/dist/components/ai/conversation-list.js

@@ -1,30 +1,139 @@
 "use client";
+import { StatusDot } from "../admin/status.js";
+import { Button } from "../ui/button.js";
+import { Empty, EmptyDescription } from "../ui/empty.js";
+import { useSidebarOptional } from "../ui/sidebar.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "lucide-react";
 // src/components/ai/conversation-list.tsx
-/** Grouped list of chat threads for a sidebar. */
-function ConversationList({ groups, activeId, onSelect, className, ...props }) {
-	return /* @__PURE__ */ jsx("nav", {
+/**
+* Grouped list of chat threads for a sidebar. Inside a Sidebar it closes the mobile sheet on select,
+* and hides itself when the sidebar is collapsed to its icon rail.
+*/
+function ConversationList({ groups, activeId, onSelect, renderAction, empty = "No conversations yet", className, ...props }) {
+	const sidebar = useSidebarOptional();
+	const select = (id) => {
+		onSelect?.(id);
+		sidebar?.setOpenMobile(false);
+	};
+	const visible = groups.filter((g) => g.items.length);
+	return /* @__PURE__ */ jsxs("nav", {
 		"data-slot": "conversation-list",
 		"aria-label": "Conversations",
-		className: cn("flex flex-col gap-4.5", className),
+		className: cn("flex flex-col gap-4.5 group-data-[collapsible=icon]:hidden", className),
 		...props,
-		children: groups.map((g) => /* @__PURE__ */ jsxs("div", {
+		children: [visible.map((g) => /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-0.5",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground",
 				children: g.label
 			}), g.items.map((c) => {
 				const active = c.id === activeId;
-				return /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-current": active ? "page" : void 0,
-					onClick: () => onSelect?.(c.id),
-					className: cn("w-full truncate rounded-md px-3 py-2.25 text-left font-medium text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40", active && "bg-card text-foreground shadow-card hover:bg-card"),
-					children: c.title
+				const action = renderAction?.(c);
+				return /* @__PURE__ */ jsxs("div", {
+					"data-slot": "conversation-item",
+					"data-active": active || void 0,
+					className: cn("group/conversation flex min-w-0 items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", active && "bg-card text-foreground shadow-card hover:bg-card"),
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-current": active ? "page" : void 0,
+						onClick: () => select(c.id),
+						className: cn("flex min-w-0 flex-1 flex-col rounded-md py-2.25 pl-3 text-left font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring/40", action ? "pr-1" : "pr-3"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: c.title
+						}), c.description !== void 0 && /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-1.5 text-xs font-normal text-muted-foreground tabular-nums",
+							children: [c.tone && /* @__PURE__ */ jsx(StatusDot, {
+								tone: c.tone,
+								pulse: c.pulse
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: c.description
+							})]
+						})]
+					}), action && /* @__PURE__ */ jsx("div", {
+						className: "mr-1 flex shrink-0 items-center [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/conversation:opacity-100 [@media(hover:hover)]:group-focus-within/conversation:opacity-100",
+						children: action
+					})]
 				}, c.id);
 			})]
-		}, g.label))
+		}, g.label)), !visible.length && empty && /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsx(EmptyDescription, { children: empty }) })]
 	});
 }
-export { ConversationList };
+/**
+* Buckets items into Today / Yesterday / Previous 7 days / Earlier by a timestamp (ms or Date),
+* newest first, and drops empty groups. Pass `now` for deterministic tests.
+*/
+function groupByDate(items, getDate, toConversation, now = Date.now()) {
+	const d = new Date(now);
+	const midnight = (daysAgo) => new Date(d.getFullYear(), d.getMonth(), d.getDate() - daysAgo).getTime();
+	const [today, yesterday, weekAgo] = [
+		midnight(0),
+		midnight(1),
+		midnight(7)
+	];
+	const groups = [
+		{
+			label: "Today",
+			items: []
+		},
+		{
+			label: "Yesterday",
+			items: []
+		},
+		{
+			label: "Previous 7 days",
+			items: []
+		},
+		{
+			label: "Earlier",
+			items: []
+		}
+	];
+	const sorted = [...items].sort((a, b) => +getDate(b) - +getDate(a));
+	for (const item of sorted) {
+		const t = +getDate(item);
+		groups[t >= today ? 0 : t >= yesterday ? 1 : t >= weekAgo ? 2 : 3]?.items.push(toConversation(item));
+	}
+	return groups.filter((g) => g.items.length);
+}
+/**
+* Full-width "New conversation" button for a sidebar header. In the icon rail it shrinks to an icon with a
+* tooltip; on mobile it closes the sidebar sheet after the click.
+*/
+function NewConversationButton({ label = "New conversation", icon = /* @__PURE__ */ jsx(PlusIcon, {}), shortcut, variant = "secondary", onClick, className, ...props }) {
+	const sidebar = useSidebarOptional();
+	const rail = sidebar?.state === "collapsed" && !sidebar.isMobile;
+	const button = /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "new-conversation-button",
+		variant,
+		size: rail ? "icon" : "default",
+		"aria-label": rail ? label : void 0,
+		className: cn(!rail && "w-full justify-start", className),
+		onClick: (e) => {
+			onClick?.(e);
+			sidebar?.setOpenMobile(false);
+		},
+		...props,
+		children: [
+			icon,
+			!rail && /* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate text-left",
+				children: label
+			}),
+			!rail && shortcut
+		]
+	});
+	if (!rail) return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		children: label
+	})] });
+}
+export { ConversationList, NewConversationButton, groupByDate };

package/dist/components/ai/prompt-input.d.ts

@@ -20,8 +20,32 @@ export interface PromptInputProps extends Omit<React.ComponentProps<"form">, "on
 }
 /** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
 declare function PromptInput({ value, onValueChange, onSubmit, placeholder, loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }: PromptInputProps): React.JSX.Element;
-/** Toggleable pill for the composer toolbar (web search, a knowledge source…). */
-declare function PromptInputChip({ active, className, ...props }: React.ComponentProps<typeof Button> & {
+export interface PromptInputChipProps extends React.ComponentProps<typeof Button> {
   active?: boolean;
-}): React.JSX.Element;
-export { PromptInput, PromptInputChip };
+  /** "warning" outlines the chip in the warning color, e.g. for a risky mode that is on. */
+  tone?: "default" | "warning";
+}
+/** Toggleable pill for the composer toolbar (web search, a knowledge source…). */
+declare function PromptInputChip({ active, tone, className, ...props }: PromptInputChipProps): React.JSX.Element;
+export interface PromptInputSelectOption {
+  value: string;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  /** "warning" shows the chip in the warning color while this option is selected. */
+  tone?: "default" | "warning";
+}
+export interface PromptInputSelectProps {
+  options: PromptInputSelectOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Heading inside the menu, e.g. "Permissions for this conversation". */
+  label?: React.ReactNode;
+  disabled?: boolean;
+  /** Tooltip text on the chip. */
+  title?: string;
+  className?: string;
+}
+/** Composer chip that picks one of a few modes, each with an icon and a one-line description. */
+declare function PromptInputSelect({ options, value, onValueChange, label, disabled, title, className }: PromptInputSelectProps): React.JSX.Element;
+export { PromptInput, PromptInputChip, PromptInputSelect };

package/dist/components/ai/prompt-input.js

@@ -1,9 +1,10 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowUpIcon, PaperclipIcon, SquareIcon } from "lucide-react";
+import { ArrowUpIcon, ChevronDownIcon, PaperclipIcon, SquareIcon } from "lucide-react";
 // src/components/ai/prompt-input.tsx
 /** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
 function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a message…", loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }) {
@@ -84,16 +85,63 @@ function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a mes
 		})]
 	});
 }
+const chipClass = (tone) => cn("h-8", tone === "warning" && "border-warning/50 bg-transparent text-warning");
 /** Toggleable pill for the composer toolbar (web search, a knowledge source…). */
-function PromptInputChip({ active, className, ...props }) {
+function PromptInputChip({ active, tone = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		type: "button",
 		size: "sm",
 		shape: "pill",
 		variant: active ? "soft" : "outline",
 		"aria-pressed": active,
-		className: cn("h-8", className),
+		"data-tone": tone,
+		className: cn(chipClass(tone), className),
 		...props
 	});
 }
-export { PromptInput, PromptInputChip };
+/** Composer chip that picks one of a few modes, each with an icon and a one-line description. */
+function PromptInputSelect({ options, value, onValueChange, label, disabled, title, className }) {
+	const current = options.find((o) => o.value === value) ?? options[0];
+	const tone = current?.tone ?? "default";
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		disabled,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			size: "sm",
+			shape: "pill",
+			variant: tone === "warning" ? "outline" : "soft",
+			"data-slot": "prompt-input-select",
+			"data-tone": tone,
+			title,
+			className: cn(chipClass(tone), className),
+			children: [
+				current?.icon,
+				current?.label,
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: "opacity-60" })
+			]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "start",
+		className: "w-72",
+		children: [label && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value,
+			onValueChange,
+			children: options.map((o) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: o.value,
+				className: "items-start py-2",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: o.label
+					}), o.description && /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: o.description
+					})]
+				})
+			}, o.value))
+		})]
+	})] });
+}
+export { PromptInput, PromptInputChip, PromptInputSelect };