@womp/kookie-ui 0.8.0 → 0.9.0

package/dist/esm/props/index.js

@@ -1,2 +1,2 @@
-import{a as Go}from"../chunk-MQWH2IFO.js";import{a as Bo,b as Co}from"../chunk-TZTUPQYK.js";import{a as Do}from"../chunk-CLMOWP5T.js";import{a as Eo,b as Fo}from"../chunk-MN3XALXD.js";import{a as uo}from"../chunk-XDDKT4NF.js";import{a as vo}from"../chunk-AF6XKU3W.js";import{a as wo}from"../chunk-AUV6B4AH.js";import{a as yo,b as zo,c as Ao}from"../chunk-BALS3AVM.js";import{a as so}from"../chunk-OJU5GCDZ.js";import{a as qo}from"../chunk-CRSHBENJ.js";import{a as jo}from"../chunk-NIX6Z3JG.js";import{a as io}from"../chunk-FC2DBBJ3.js";import{a as ko,b as lo,c as no}from"../chunk-EBQZ3Z22.js";import{a as co}from"../chunk-QEL55MLF.js";import{a as go}from"../chunk-OWMA6GTG.js";import{a as ho}from"../chunk-VLTXI4A7.js";import"../chunk-STPMPY3X.js";import{a as ao}from"../chunk-7FKKGUHK.js";import{a as bo}from"../chunk-5XV4QEP5.js";import{a as to}from"../chunk-L6UXAITB.js";import{a as po}from"../chunk-GFOSP3PZ.js";import{a as xo}from"../chunk-JAMLW534.js";import{a as mo}from"../chunk-VJSZG35J.js";import"../chunk-YKPMLM7M.js";import"../chunk-WOR3JCLX.js";import{a as fo}from"../chunk-GM7KMQDI.js";import{a as _}from"../chunk-72AHPGPN.js";import{a as $}from"../chunk-PPNWGWN3.js";import"../chunk-OA7C34MJ.js";import{a as oo,b as ro,c as eo}from"../chunk-NIIEIZKQ.js";import{a as Y}from"../chunk-5SNHUVDA.js";import"../chunk-UICSVJ3B.js";import{a as Z}from"../chunk-5M7STAH3.js";import"../chunk-6DWDNKLS.js";import{a as T}from"../chunk-OGVKSYLL.js";import{a as U}from"../chunk-OO652UQW.js";import{a as V}from"../chunk-5KICSAT7.js";import{a as X}from"../chunk-667BKCUG.js";import{a as W}from"../chunk-HAGKI7NA.js";import{a as O}from"../chunk-QFPHEY77.js";import{a as Q}from"../chunk-BPVVFHYD.js";import{a as P}from"../chunk-QQ62LO3X.js";import{a as R}from"../chunk-YVSM2LGS.js";import{a as S}from"../chunk-FGORMEAO.js";import{a as M}from"../chunk-OTKQN2KY.js";import{a as N}from"../chunk-26I257HE.js";import{a as I}from"../chunk-G2CKYO2I.js";import"../chunk-AXUDFYLY.js";import{a as H}from"../chunk-KNQBAOMV.js";import{a as L}from"../chunk-FD2TR343.js";import{a as K}from"../chunk-ZE2KAVXW.js";import{a as J}from"../chunk-WYADYDPN.js";import{a as F,b as G}from"../chunk-ZWZGUBL4.js";import{a as E}from"../chunk-XKBLNVOD.js";import{a as D}from"../chunk-GCUGJXI2.js";import{a as C}from"../chunk-XYVLQDGR.js";import{a as l}from"../chunk-3KB2XWBE.js";import{a as k}from"../chunk-SMGDH54W.js";import{a as j}from"../chunk-SNR5VFWG.js";import{a as h}from"../chunk-K53W3ELO.js";import{a as c}from"../chunk-TTFUM47A.js";import{a as d}from"../chunk-VX44UTQ5.js";import{a as g}from"../chunk-ERGJN7FJ.js";import{a as x}from"../chunk-JFWMAYEH.js";import{a as p,b as t}from"../chunk-KRJTW535.js";import{a as n}from"../chunk-F6V7GBNQ.js";import{a as q,b as s,c as u,d as v,e as w,f as y}from"../chunk-3KSGRY6I.js";import{a as z}from"../chunk-ARIV4AT5.js";import{a as i}from"../chunk-GSTOGDAJ.js";import{a,b}from"../chunk-WRWNN2NW.js";import{a as o}from"../chunk-NZJGC6ZW.js";import{a as A}from"../chunk-WMGIFPI2.js";import{a as B}from"../chunk-CFNESRYI.js";import{a as r,b as e,c as f,d as m}from"../chunk-ZNK6AH2G.js";import"../chunk-OS3FCYZY.js";export{m as accentColorPropDef,r as accentColors,E as alertDialogContentPropDefs,o as asChildPropDef,O as avatarPropDefs,P as badgePropDefs,R as blockquotePropDefs,S as boxPropDefs,b as breakpointSet,a as breakpoints,x as buttonPropDefs,T as calloutRootPropDefs,U as cardPropDefs,X as checkboxCardsRootPropDefs,Y as checkboxGroupRootPropDefs,n as checkboxPropDefs,Z as codePropDefs,f as colorPropDef,$ as containerPropDefs,w as contextMenuCheckboxItemPropDefs,u as contextMenuContentPropDefs,v as contextMenuItemPropDefs,y as contextMenuRadioItemPropDefs,u as contextMenuSubContentPropDefs,ro as dataListItemPropDefs,eo as dataListLabelPropDefs,oo as dataListRootPropDefs,D as dialogContentPropDefs,w as dropdownMenuCheckboxItemPropDefs,s as dropdownMenuContentPropDefs,v as dropdownMenuItemPropDefs,y as dropdownMenuRadioItemPropDefs,u as dropdownMenuSubContentPropDefs,fo as emPropDefs,F as emphases,G as emphasisPropDef,k as flexPropDefs,j as gapPropDefs,e as grayColors,W as gridPropDefs,M as headingPropDefs,d as heightPropDefs,mo as hoverCardContentPropDefs,x as iconButtonPropDefs,po as imagePropDefs,xo as insetPropDefs,z as kbdPropDefs,h as layoutPropDefs,H as leadingTrimPropDef,ao as linkPropDefs,i as marginPropDefs,c as paddingPropDefs,_ as popoverContentPropDefs,bo as progressPropDefs,co as quotePropDefs,p as radii,go as radioCardsRootPropDefs,ho as radioGroupRootPropDefs,A as radioPropDefs,t as radiusPropDef,V as scrollAreaPropDefs,jo as sectionPropDefs,io as segmentedControlRootPropDefs,no as selectContentPropDefs,ko as selectRootPropDefs,lo as selectTriggerPropDefs,qo as separatorPropDefs,Go as shadowPropDefs,to as skeletonPropDefs,so as sliderPropDefs,l as spinnerPropDefs,uo as strongPropDefs,q as submenuBehaviors,vo as switchPropDefs,wo as tabNavLinkPropDefs,B as tabNavRootPropDefs,Ao as tableCellPropDefs,yo as tableRootPropDefs,zo as tableRowPropDefs,Co as tabsContentPropDefs,B as tabsListPropDefs,Bo as tabsRootPropDefs,I as textAlignPropDef,Do as textAreaPropDefs,Eo as textFieldRootPropDefs,Fo as textFieldSlotPropDefs,N as textPropDefs,J as textWrapPropDef,C as themePropDefs,Q as tooltipPropDefs,K as truncatePropDef,L as weightPropDef,g as widthPropDefs};
+import{a as Go}from"../chunk-MQWH2IFO.js";import{a as yo,b as zo,c as Ao}from"../chunk-BALS3AVM.js";import{a as Bo,b as Co}from"../chunk-TZTUPQYK.js";import{a as Do}from"../chunk-CLMOWP5T.js";import{a as Eo,b as Fo}from"../chunk-MN3XALXD.js";import{a as uo}from"../chunk-XI5YXUCK.js";import{a as vo}from"../chunk-AF6XKU3W.js";import{a as wo}from"../chunk-AUV6B4AH.js";import{a as so}from"../chunk-OJU5GCDZ.js";import{a as ko,b as lo,c as no}from"../chunk-EBQZ3Z22.js";import{a as qo}from"../chunk-CRSHBENJ.js";import{a as jo}from"../chunk-NIX6Z3JG.js";import{a as io}from"../chunk-FC2DBBJ3.js";import"../chunk-STPMPY3X.js";import{a as bo}from"../chunk-5XV4QEP5.js";import{a as co}from"../chunk-MCQCG6AS.js";import{a as go}from"../chunk-OWMA6GTG.js";import{a as ho}from"../chunk-VLTXI4A7.js";import{a as ao}from"../chunk-AGSSWWFI.js";import{a as to}from"../chunk-L6UXAITB.js";import{a as po}from"../chunk-GFOSP3PZ.js";import{a as xo}from"../chunk-JAMLW534.js";import{a as mo}from"../chunk-VJSZG35J.js";import"../chunk-YKPMLM7M.js";import"../chunk-WOR3JCLX.js";import{a as fo}from"../chunk-4JQZUQY7.js";import{a as _}from"../chunk-72AHPGPN.js";import{a as $}from"../chunk-PPNWGWN3.js";import"../chunk-OA7C34MJ.js";import{a as oo,b as ro,c as eo}from"../chunk-NIIEIZKQ.js";import{a as Y}from"../chunk-5SNHUVDA.js";import"../chunk-UICSVJ3B.js";import{a as Z}from"../chunk-KZWNGWIM.js";import"../chunk-6DWDNKLS.js";import{a as T}from"../chunk-OGVKSYLL.js";import{a as U}from"../chunk-OO652UQW.js";import{a as V}from"../chunk-5KICSAT7.js";import{a as X}from"../chunk-667BKCUG.js";import{a as W}from"../chunk-HAGKI7NA.js";import{a as O}from"../chunk-QFPHEY77.js";import{a as Q}from"../chunk-BPVVFHYD.js";import{a as P}from"../chunk-QQ62LO3X.js";import{a as R}from"../chunk-WGYUWEQV.js";import{a as S}from"../chunk-FGORMEAO.js";import{a as M}from"../chunk-PZ7OYATT.js";import{a as N}from"../chunk-4XKK32M4.js";import{a as I}from"../chunk-G2CKYO2I.js";import"../chunk-AXUDFYLY.js";import{a as H}from"../chunk-KNQBAOMV.js";import{a as L}from"../chunk-FD2TR343.js";import{a as J}from"../chunk-WYADYDPN.js";import{a as K}from"../chunk-ZE2KAVXW.js";import{a as F,b as G}from"../chunk-ZWZGUBL4.js";import{a as E}from"../chunk-XKBLNVOD.js";import{a as D}from"../chunk-GCUGJXI2.js";import{a as C}from"../chunk-XYVLQDGR.js";import{a as l}from"../chunk-3KB2XWBE.js";import{a as k}from"../chunk-SMGDH54W.js";import{a as j}from"../chunk-SNR5VFWG.js";import{a as h}from"../chunk-K53W3ELO.js";import{a as c}from"../chunk-TTFUM47A.js";import{a as d}from"../chunk-VX44UTQ5.js";import{a as g}from"../chunk-ERGJN7FJ.js";import{a as x}from"../chunk-JFWMAYEH.js";import{a as p,b as t}from"../chunk-KRJTW535.js";import{a as n}from"../chunk-F6V7GBNQ.js";import{a as q,b as s,c as u,d as v,e as w,f as y}from"../chunk-3KSGRY6I.js";import{a as z}from"../chunk-ARIV4AT5.js";import{a as i}from"../chunk-GSTOGDAJ.js";import{a,b}from"../chunk-WRWNN2NW.js";import{a as o}from"../chunk-NZJGC6ZW.js";import{a as A}from"../chunk-WMGIFPI2.js";import{a as B}from"../chunk-CFNESRYI.js";import{a as r,b as e,c as f,d as m}from"../chunk-ZNK6AH2G.js";import"../chunk-OS3FCYZY.js";export{m as accentColorPropDef,r as accentColors,E as alertDialogContentPropDefs,o as asChildPropDef,O as avatarPropDefs,P as badgePropDefs,R as blockquotePropDefs,S as boxPropDefs,b as breakpointSet,a as breakpoints,x as buttonPropDefs,T as calloutRootPropDefs,U as cardPropDefs,X as checkboxCardsRootPropDefs,Y as checkboxGroupRootPropDefs,n as checkboxPropDefs,Z as codePropDefs,f as colorPropDef,$ as containerPropDefs,w as contextMenuCheckboxItemPropDefs,u as contextMenuContentPropDefs,v as contextMenuItemPropDefs,y as contextMenuRadioItemPropDefs,u as contextMenuSubContentPropDefs,ro as dataListItemPropDefs,eo as dataListLabelPropDefs,oo as dataListRootPropDefs,D as dialogContentPropDefs,w as dropdownMenuCheckboxItemPropDefs,s as dropdownMenuContentPropDefs,v as dropdownMenuItemPropDefs,y as dropdownMenuRadioItemPropDefs,u as dropdownMenuSubContentPropDefs,fo as emPropDefs,F as emphases,G as emphasisPropDef,k as flexPropDefs,j as gapPropDefs,e as grayColors,W as gridPropDefs,M as headingPropDefs,d as heightPropDefs,mo as hoverCardContentPropDefs,x as iconButtonPropDefs,po as imagePropDefs,xo as insetPropDefs,z as kbdPropDefs,h as layoutPropDefs,H as leadingTrimPropDef,ao as linkPropDefs,i as marginPropDefs,c as paddingPropDefs,_ as popoverContentPropDefs,bo as progressPropDefs,co as quotePropDefs,p as radii,go as radioCardsRootPropDefs,ho as radioGroupRootPropDefs,A as radioPropDefs,t as radiusPropDef,V as scrollAreaPropDefs,jo as sectionPropDefs,io as segmentedControlRootPropDefs,no as selectContentPropDefs,ko as selectRootPropDefs,lo as selectTriggerPropDefs,qo as separatorPropDefs,Go as shadowPropDefs,to as skeletonPropDefs,so as sliderPropDefs,l as spinnerPropDefs,uo as strongPropDefs,q as submenuBehaviors,vo as switchPropDefs,wo as tabNavLinkPropDefs,B as tabNavRootPropDefs,Ao as tableCellPropDefs,yo as tableRootPropDefs,zo as tableRowPropDefs,Co as tabsContentPropDefs,B as tabsListPropDefs,Bo as tabsRootPropDefs,I as textAlignPropDef,Do as textAreaPropDefs,Eo as textFieldRootPropDefs,Fo as textFieldSlotPropDefs,N as textPropDefs,J as textWrapPropDef,C as themePropDefs,Q as tooltipPropDefs,K as truncatePropDef,L as weightPropDef,g as widthPropDefs};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",
@@ -150,6 +150,7 @@
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.20",
+    "@shadcn/react": "0.3.1",
     "@tanstack/react-virtual": "^3.14.13",
     "@zag-js/react": "^1.44.0",
     "@zag-js/splitter": "^1.44.0",

package/src/components/_internal/base-sidebar-menu.css

@@ -189,7 +189,8 @@
   padding-inline-start: var(--base-menu-item-padding-left);
   padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
-  color: var(--gray-a10);
+  /* a11 keeps the label above 4.5:1 on every sidebar background. */
+  color: var(--gray-a11);
   user-select: none;
   cursor: default;
 

package/src/components/chatbar.css

@@ -9,6 +9,9 @@
 /* Defaults */
 .rt-ChatbarRoot {
   --chatbar-attachment-thumb: var(--space-8);
+  /* A column: notices, then the box (which fills any height the consumer gives the root), then context. */
+  display: flex;
+  flex-direction: column;
 
   /*
    * Component-level material override
@@ -595,3 +598,24 @@
     }
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * NOTICES AND CONTEXT                                                                             *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* Notices stand above the box, in a column; the last one is nearest the text. */
+.rt-ChatbarNotices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+/* Context is quiet text below the box, inset to line up with the text inside it. */
+.rt-ChatbarContext {
+  padding: var(--space-2) var(--space-3) 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}

package/src/components/chatbar.tsx

@@ -9,6 +9,8 @@ import { CloseIcon, FileTextIcon } from './icons.js';
 import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
+import { NoticeSizeContext } from './notice.js';
+import { Spinner } from './spinner.js';
 import { Text } from './text.js';
 import { VisuallyHidden } from './visually-hidden.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -257,6 +259,19 @@ interface ChatbarRootBaseProps {
    * Provides methods to focus the textarea and open the file picker.
    */
   apiRef?: React.Ref<ChatbarApi>;
+
+  /**
+   * Messages that need an answer before the next message, such as `Notice` and `Confirmation`.
+   * They stack in a column above the chatbar, in the order given, so put the one the next
+   * message answers last, nearest the text. They sit outside the box: a button in a notice never
+   * submits the message, and pressing one never collapses the chatbar.
+   */
+  notices?: React.ReactNode;
+  /**
+   * Short facts that stay true about the conversation, such as the model or the context left.
+   * They sit below the chatbar, inset from its sides.
+   */
+  context?: React.ReactNode;
 }
 
 type RootElement = React.ElementRef<'div'>;
@@ -328,6 +343,8 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     dropzone = true,
     apiRef,
     onBlurCapture,
+    notices,
+    context,
     ...divProps
   } = props;
   const effectiveMaterial = material || panelBackground;
@@ -704,7 +721,12 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                 style={{ display: 'none' }}
                 onChange={handleFileInputChange}
               />
-              <div {...(dropzone ? getRootProps() : {})} style={{ width: '100%', height: '100%' }} onPointerDown={handleContainerPointerDown}>
+              {notices ? (
+                <div className="rt-ChatbarNotices">
+                  <NoticeSizeContext.Provider value={size}>{notices}</NoticeSizeContext.Provider>
+                </div>
+              ) : null}
+              <div {...(dropzone ? getRootProps() : {})} style={{ width: '100%', flex: '1 1 auto', minHeight: 0 }} onPointerDown={handleContainerPointerDown}>
                 <m.div
                   className={classNames('rt-ChatbarBox', `rt-variant-${variant ?? 'surface'}`)}
                   style={{ position: 'relative' }}
@@ -729,6 +751,11 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                   )}
                 </m.div>
               </div>
+              {context ? (
+                <Text as="div" size={size === '3' ? '2' : '1'} emphasis="medium" className="rt-ChatbarContext">
+                  {context}
+                </Text>
+              ) : null}
               <VisuallyHidden role="status" aria-live="polite">
                 {dragActive ? 'Drop files here to attach.' : <span key={announcement.id}>{announcement.text}</span>}
               </VisuallyHidden>
@@ -1187,6 +1214,8 @@ const RowEnd = React.forwardRef<HTMLDivElement, RowSlotProps>((props, forwardedR
 });
 RowEnd.displayName = 'Chatbar.RowEnd';
 
+type SendStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+
 type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {
   /** Optional override for accessible name. Defaults to "Send". */
   'aria-label'?: string;
@@ -1194,6 +1223,25 @@ type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {
   asChild?: boolean;
   /** Clear message and attachments after sending. Defaults to Root `clearOnSubmit`. */
   clearOnSend?: boolean;
+  /**
+   * What the button means. `ready` sends. While a reply is `submitted` or `streaming` and the
+   * box is empty, the button STOPS the reply (`onStop`); with a draft in the box it still sends,
+   * and the app decides whether sending interrupts the reply. After an `error`, an empty box
+   * makes it RETRY (`onRetry`). Default `ready`.
+   */
+  status?: SendStatus;
+  /** Called when the button is pressed to stop a reply. */
+  onStop?: () => void;
+  /** Called when the button is pressed to retry after an error. */
+  onRetry?: () => void;
+  /** Accessible name while it stops. Default "Stop". */
+  stopLabel?: string;
+  /** Accessible name while it retries. Default "Retry". */
+  retryLabel?: string;
+  /** Glyph while it stops. Defaults to a square, or a spinner while `submitted`. */
+  stopIcon?: React.ReactNode;
+  /** Glyph while it retries. */
+  retryIcon?: React.ReactNode;
 };
 
 const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef) => {
@@ -1208,6 +1256,13 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
     variant: variantProp,
     tabIndex,
     onClick,
+    status = 'ready',
+    onStop,
+    onRetry,
+    stopLabel = 'Stop',
+    retryLabel = 'Retry',
+    stopIcon,
+    retryIcon,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     ...buttonProps
@@ -1215,30 +1270,64 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
   const ctx = useChatbarContext();
   const value = React.useContext(ChatbarValueContext);
 
-  if (ctx.sendMode === 'never') return null;
-
   const hasContent = hasText(value) || ctx.attachments.length > 0;
-  const visible = ctx.sendMode === 'always' || hasContent;
-  const inactive = disabled || ctx.disabled || ctx.readOnly || !hasContent;
+  const running = status === 'submitted' || status === 'streaming';
+  const mode: 'send' | 'stop' | 'retry' = hasContent ? 'send' : running ? 'stop' : status === 'error' ? 'retry' : 'send';
+
+  if (ctx.sendMode === 'never' && mode === 'send') return null;
+
+  const visible = mode !== 'send' || ctx.sendMode === 'always' || hasContent;
+  const inactive = mode === 'send' ? disabled || ctx.disabled || ctx.readOnly || !hasContent : disabled || ctx.disabled;
 
-  const labelProps: { 'aria-label': string } | { 'aria-labelledby': string } = ariaLabelledby
-    ? { 'aria-labelledby': ariaLabelledby }
-    : { 'aria-label': ariaLabel ?? 'Send' };
+  const sendName = ariaLabel ?? 'Send';
+  const labelProps: { 'aria-label': string } | { 'aria-labelledby': string } =
+    mode === 'stop' ? { 'aria-label': stopLabel } : mode === 'retry' ? { 'aria-label': retryLabel } : ariaLabelledby ? { 'aria-labelledby': ariaLabelledby } : { 'aria-label': sendName };
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     onClick?.(event);
     if (event.defaultPrevented || inactive) return;
+    if (mode === 'stop') {
+      onStop?.();
+      return;
+    }
+    if (mode === 'retry') {
+      onRetry?.();
+      return;
+    }
     const clear = clearOnSend ?? ctx.clearOnSubmit;
     // Clearing hides and disables this button; keep keyboard focus in the composer
     if (ctx.submit(clear) && clear) ctx.textareaRef.current?.focus({ preventScroll: true });
   };
 
+  const glyph =
+    mode === 'stop' ? (
+      stopIcon ?? (status === 'submitted' ? <Spinner size={ctx.size} /> : (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+          <rect x="7" y="7" width="10" height="10" rx="2" />
+        </svg>
+      ))
+    ) : mode === 'retry' ? (
+      retryIcon ?? (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+          <path d="M3 3v5h5" />
+        </svg>
+      )
+    ) : (
+      children ?? (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M5 12h14" />
+          <path d="m12 5 7 7-7 7" />
+        </svg>
+      )
+    );
+
   return (
     <IconButton
       {...buttonProps}
       ref={forwardedRef}
       size={sizeProp ?? ctx.size}
-      variant={variantProp ?? (ctx.open ? 'solid' : 'ghost')}
+      variant={variantProp ?? (ctx.open || mode !== 'send' ? 'solid' : 'ghost')}
       disabled={inactive}
       className={classNames('rt-ChatbarSend', className)}
       style={{ opacity: visible ? 1 : 0, pointerEvents: visible ? undefined : 'none', ...style }}
@@ -1247,14 +1336,11 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
       tabIndex={visible ? tabIndex : -1}
       asChild={asChild}
       onClick={handleClick}
+      data-status={status}
+      data-mode={mode}
       {...labelProps}
     >
-      {children ?? (
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-          <path d="M5 12h14" />
-          <path d="m12 5 7 7-7 7" />
-        </svg>
-      )}
+      {glyph}
     </IconButton>
   );
 });
@@ -1278,4 +1364,5 @@ export type {
   AttachmentStatus as ChatbarAttachmentStatus,
   ExpandOn as ChatbarExpandOn,
   SendMode as ChatbarSendMode,
+  SendStatus as ChatbarSendStatus,
 };

package/src/components/index.css

@@ -62,6 +62,8 @@
 @import './user-card.css';
 @import './virtual-menu.css';
 @import './chatbar.css';
+@import './message-scroller.css';
+@import './notice.css';
 
 .radix-themes:where([data-is-root-theme='true']) {
   /* Create a new stacking context on the root `Theme` so layered components work out of the box */

package/src/components/index.tsx

@@ -80,3 +80,10 @@ export * as Sidebar from './sidebar.js';
 export * as Shell from './shell.js';
 export * as Sheet from './sheet.js';
 export * as Chatbar from './chatbar.js';
+export * as MessageScroller from './message-scroller.js';
+export {
+  Notice,
+  Confirmation,
+  type NoticeProps,
+  type ConfirmationProps,
+} from './notice.js';

package/src/components/message-scroller.css

@@ -0,0 +1,54 @@
+/*
+ * MessageScroller — the transcript's layout. The behaviour is shadcn/ui's primitive.
+ */
+
+.rt-MessageScrollerRoot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.rt-MessageScrollerViewport {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-a6) transparent;
+  outline: none;
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -2px;
+  }
+}
+
+.rt-MessageScrollerContent {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.rt-MessageScrollerItem {
+  min-width: 0;
+}
+
+/* The jump button floats over the bottom edge of the viewport, centred by its margins, never by a
+   transform: a button's own press and hover motion may use `translate`, and a centring transform
+   would be replaced by it. */
+.rt-MessageScrollerButton {
+  position: absolute;
+  bottom: var(--space-3);
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  z-index: 1;
+}
+
+/* Asleep while the reader is at the end: the primitive makes it inert; this makes it unseen. */
+.rt-MessageScrollerButton:where([data-active='false']) {
+  opacity: 0;
+  pointer-events: none;
+}

package/src/components/message-scroller.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+/**
+ * MessageScroller — a transcript that follows a conversation.
+ *
+ * The behaviour is shadcn/ui's Message Scroller primitive (`@shadcn/react/message-scroller`,
+ * MIT, https://ui.shadcn.com). Streaming, anchoring a new turn, keeping your place when history
+ * loads above, and jumping back to the latest are a body of edge cases nobody should rewrite, so
+ * Kookie takes the primitive and adds only the surface: the parts, the class names, the button.
+ *
+ * Anatomy
+ * ```tsx
+ * <MessageScroller.Root>
+ *   <MessageScroller.Viewport aria-label="Conversation">
+ *     <MessageScroller.Content>
+ *       <MessageScroller.Item messageId="u1" scrollAnchor>…</MessageScroller.Item>
+ *       <MessageScroller.Item messageId="a1">…</MessageScroller.Item>
+ *     </MessageScroller.Content>
+ *   </MessageScroller.Viewport>
+ *   <MessageScroller.Button aria-label="Jump to the latest" />
+ * </MessageScroller.Root>
+ * ```
+ *
+ * The viewport is its own scroller. Kookie's `ScrollArea` is Radix's, and Radix cannot hand its
+ * viewport element to another library, so the transcript scrolls natively with a thin scrollbar.
+ *
+ * Requires React 19, which the primitive needs.
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+import {
+  MessageScroller as Primitive,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+  type MessageScrollerDefaultScrollPosition,
+  type MessageScrollerScrollOptions,
+  type MessageScrollerScrollable,
+  type MessageScrollerVisibilityState,
+} from '@shadcn/react/message-scroller';
+
+import { IconButton, type IconButtonProps } from './icon-button.js';
+
+interface RootProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * Keeps the newest content in view while the reader is at the end. Default `true`.
+   * Once the reader scrolls up, the transcript stays where they are until they return.
+   */
+  autoScroll?: boolean;
+  /** Where the transcript opens: `end` (default), `start`, or the last anchored message. */
+  defaultScrollPosition?: MessageScrollerDefaultScrollPosition;
+  /** Distance in pixels from the end that still counts as "at the end". */
+  scrollEdgeThreshold?: number;
+  /** Space in pixels kept above a message when one is scrolled to or anchored. */
+  scrollMargin?: number;
+}
+
+/** Holds the scroll state. Everything else goes inside it. */
+const Root = React.forwardRef<HTMLDivElement, RootProps>(
+  ({ autoScroll = true, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollMargin, className, children, ...props }, forwardedRef) => (
+    <Primitive.Provider
+      autoScroll={autoScroll}
+      defaultScrollPosition={defaultScrollPosition}
+      {...(scrollEdgeThreshold != null ? { scrollEdgeThreshold } : {})}
+      {...(scrollMargin != null ? { scrollMargin } : {})}
+    >
+      <Primitive.Root {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerRoot', className)}>
+        {children}
+      </Primitive.Root>
+    </Primitive.Provider>
+  ),
+);
+Root.displayName = 'MessageScroller.Root';
+
+interface ViewportProps extends React.ComponentPropsWithoutRef<'div'> {
+  /** Name of the transcript region, e.g. "Conversation". */
+  'aria-label'?: string;
+  /** Keep the reader's place when older messages are added above. Default `true`. */
+  preserveScrollOnPrepend?: boolean;
+}
+
+/** The scrolling element. */
+const Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(({ className, 'aria-label': label, ...props }, forwardedRef) => (
+  // The primitive names an unnamed viewport "Messages", in English. An empty name is skipped by
+  // accessible-name computation, so a transcript is only named when the app names it.
+  <Primitive.Viewport aria-label={label ?? ''} {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerViewport', className)} />
+));
+Viewport.displayName = 'MessageScroller.Viewport';
+
+type ContentProps = React.ComponentPropsWithoutRef<'div'>;
+
+/** The list of messages, inside the viewport. */
+const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ className, ...props }, forwardedRef) => (
+  <Primitive.Content {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerContent', className)} />
+));
+Content.displayName = 'MessageScroller.Content';
+
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  /** A stable id, so the row can be scrolled to with `useMessageScroller().scrollToMessage`. */
+  messageId?: string;
+  /** Anchor this row near the top when it arrives. Set it on the person's own messages. */
+  scrollAnchor?: boolean;
+}
+
+/** One row of the transcript. */
+const Item = React.forwardRef<HTMLDivElement, ItemProps>(({ className, ...props }, forwardedRef) => (
+  <Primitive.Item {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerItem', className)} />
+));
+Item.displayName = 'MessageScroller.Item';
+
+type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {
+  /** Accessible name, in your words. Default "Jump to the latest". */
+  'aria-label'?: string;
+  /** `end` jumps to the latest message (default); `start` to the first. */
+  direction?: 'start' | 'end';
+  /** Scroll behaviour of the jump. Default `smooth`. */
+  behavior?: ScrollBehavior;
+};
+
+/**
+ * Jumps back to the latest message. It renders only while the reader is away from the end.
+ * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
+ */
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ direction = 'end', behavior, className, children, size = '2', variant = 'surface', color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
+    <Primitive.Button
+      direction={direction}
+      {...(behavior ? { behavior } : {})}
+      render={
+        <IconButton
+          {...props}
+          ref={forwardedRef}
+          size={size}
+          variant={variant}
+          color={color}
+          radius={radius}
+          aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
+          className={classNames('rt-MessageScrollerButton', className)}
+          data-direction={direction}
+        >
+          {children ?? (
+            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>
+              <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          )}
+        </IconButton>
+      }
+    />
+  ),
+);
+Button.displayName = 'MessageScroller.Button';
+
+export { Root, Viewport, Content, Item, Button, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };
+export type {
+  RootProps as MessageScrollerRootProps,
+  ViewportProps as MessageScrollerViewportProps,
+  ContentProps as MessageScrollerContentProps,
+  ItemProps as MessageScrollerItemProps,
+  ButtonProps as MessageScrollerButtonProps,
+  MessageScrollerDefaultScrollPosition,
+  MessageScrollerScrollOptions,
+  MessageScrollerScrollable,
+  MessageScrollerVisibilityState,
+};

package/src/components/notice.css

@@ -0,0 +1,91 @@
+/*
+ * Notice and Confirmation — one strip, two kinds.
+ * It takes space and never floats: no position, no z-index.
+ */
+
+.rt-NoticeRoot {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--accent-ink);
+  border-radius: var(--notice-radius);
+
+  --material-blend: 100%;
+  --material-alpha: 0;
+  background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
+
+  &:where([data-material='translucent']) {
+    --material-blend: 60%;
+    --material-alpha: 1;
+    backdrop-filter: var(--backdrop-filter-components-enabled);
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* Gray is the resting category: its fill is one step quieter and its words are the ordinary ink. */
+.rt-NoticeRoot:where([data-accent-color='gray']) {
+  background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
+  color: var(--gray-12);
+}
+
+.rt-NoticeIcon {
+  display: flex;
+  flex: none;
+  align-items: center;
+
+  /* stylelint-disable-next-line selector-max-type */
+  & :where(svg) {
+    width: var(--notice-icon-size);
+    height: var(--notice-icon-size);
+  }
+}
+
+.rt-NoticeText {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.rt-NoticeActions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+/* A question wraps its answers under the words when the strip is narrow. */
+.rt-NoticeRoot:where([data-kind='confirmation']) {
+  flex-wrap: wrap;
+
+  & :where(.rt-NoticeActions) {
+    margin-left: auto;
+  }
+}
+
+.rt-NoticeRoot {
+  &:where(.rt-r-size-1) {
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
+    min-height: calc(var(--space-6) + var(--space-2));
+    --notice-radius: var(--radius-surface-1);
+    --notice-icon-size: var(--content-icon-size-1);
+  }
+  &:where(.rt-r-size-2) {
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
+    min-height: calc(var(--space-7) + var(--space-2));
+    --notice-radius: var(--radius-surface-2);
+    --notice-icon-size: var(--content-icon-size-2);
+  }
+  &:where(.rt-r-size-3) {
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
+    min-height: calc(var(--space-8) + var(--space-2));
+    --notice-radius: var(--radius-surface-3);
+    --notice-icon-size: var(--content-icon-size-3);
+  }
+}