@veevarts/design-system 2.0.0-alpha.6 → 2.0.0-alpha.61

package/README.md

@@ -163,6 +163,27 @@ function App() {
 }
 ```
 
+### Import the assistant pieces
+
+The pieces for a conversation with an assistant are on their own entry, `@veevarts/design-system/assistant`, not on the package root. An app that doesn't import them doesn't bundle them (`npm run build` checks it).
+
+```tsx
+import { AssistantComposer, AssistantMessage, ScrollToLatest } from '@veevarts/design-system/assistant';
+```
+
+| Export | What it is |
+|--------|------------|
+| `AssistantMessage` | One turn of the conversation, the person's or the assistant's |
+| `AssistantActivity`, `formatAssistantDuration` | The steps the assistant took for a turn |
+| `AssistantNotice` | The panel's run state: working, failed, a limit, offline, no access |
+| `AssistantComposer` | The field, Send/Stop and suggestion pills |
+| `ScrollToLatest` | The transcript's scroll box, which follows the newest content |
+
+- `markdown-it` (`^14`) is an **optional peer** of this entry, declared for its Markdown rendering. npm doesn't install optional peers, and none of the pieces above imports it, so you don't need it for them. The package root never imports it, and no built file bundles a copy (`npm run build` checks both).
+- The `ai-*` colours they use come with `veevartPreset`; the hex values (`assistantSurfaceTokens`) stay on the package root. See below and Storybook → Foundations → Assistant color.
+- TypeScript finds the entry's types with `moduleResolution` `bundler` (through `exports`) and `node` (through `typesVersions`), the same settings the package root works with.
+- Each piece's page in Storybook (Patterns → Assistant) has its usage, accessibility notes and test ids.
+
 ### Import HeroUI components
 
 All HeroUI components are re-exported and themed:
@@ -183,6 +204,51 @@ import { DatePicker } from '@veevarts/design-system';
 
 For `mode="datetime"`, the design system does not convert timezones. The consuming app must pass the value already prepared in the business timezone it wants to present. The component hides timezone labels by default.
 
+`Modal`, `Drawer` and `Table` are also thin wrappers over HeroUI's: every HeroUI prop, ref and the generic `TableProps<Row>` type still work, and they add the accessibility defaults below.
+
+**Translatable close button (`Modal`, `Drawer`).** HeroUI hard-codes `aria-label="Close"` on the corner close button. Set `closeLabel` to localize it, either once on `HeroUIProvider` or per overlay. Resolution order: the `closeLabel` prop, then the `closeLabel` of the nearest `HeroUIProvider`, then HeroUI's default `"Close"` (its own button, untouched). A `closeButton` you pass is yours and is not relabelled; `hideCloseButton` still hides the button.
+
+```tsx
+<HeroUIProvider closeLabel="Fermer">
+  <Modal isOpen={isOpen} onOpenChange={setOpen} closeLabel="Fermer la fenêtre">
+    {/* ... */}
+  </Modal>
+</HeroUIProvider>
+```
+
+**React Aria locale (`HeroUIProvider`).** Set `locale` (BCP 47, e.g. `"fr-FR"`) so the strings React Aria renders follow the app's language: the hidden "Dismiss" buttons of every overlay, date and number formatting. Without it HeroUI uses `"en-US"`. `closeLabel` stays separate because HeroUI's close button text is not a React Aria string.
+
+```tsx
+<HeroUIProvider locale="fr-FR" closeLabel="Fermer">
+  {/* ... */}
+</HeroUIProvider>
+```
+
+**Reduced motion (`HeroUIProvider`).** `reducedMotion` defaults to `"user"`: overlays, toasts and every other framer-motion animation follow the OS "reduce motion" setting. HeroUI's own default is `"never"`, which animates regardless. Pass `"always"` to drop them for an app-level preference, or `"never"` to opt out.
+
+```tsx
+<HeroUIProvider reducedMotion={posPrefersStill ? 'always' : 'user'}>
+  {/* ... */}
+</HeroUIProvider>
+```
+
+**Readable toasts (`ToastProvider`).** The `ToastProvider` exported here wraps HeroUI's: same props, same `addToast` queue. Titles wrap instead of truncating to one line, and the animation is off when the OS or the POS (`data-pos-reduce-motion`) asks for reduced motion, unless you pass `disableAnimation`.
+
+From `sm` up a toast takes the width its text needs, between HeroUI's 356px and `min(32rem, 100vw - 11rem)`, instead of a fixed 356px: both bounds are `rem`, so it keeps up when the root font grows (the POS Text size setting, or a larger browser default). The close button sits inside the toast beside the title, always visible, as a 44px (`2.75rem`) target, instead of HeroUI's hover-only circle on the corner. A short toast at the default text size is the same 356px as before.
+
+A `toastProps.classNames` you pass is merged after these defaults, slot by slot (`base`, `closeButton`, `closeIcon`, `title`, `description`). HeroUI replaces the provider `classNames` with a per-toast `addToast({ classNames })` as a whole object, so a per-toast `classNames` drops these defaults for that toast.
+
+**Still skeletons (`Skeleton`).** The `Skeleton` exported here wraps HeroUI's: same props. HeroUI draws the shimmer on the block's `::before`, so `motion-reduce:animate-none` on the block never stops it. This one adds `motion-reduce:before:animate-none` (and the transition equivalents), so under the OS "reduce motion" setting the block is a plain grey shape at the same size; with motion allowed nothing changes. `EntityListSkeleton` and the other DS skeletons draw their blocks with it.
+
+```tsx
+<HeroUIProvider>
+  <ToastProvider placement="top-right" />
+  {/* addToast({ title, description }) anywhere below */}
+</HeroUIProvider>
+```
+
+**Table header contrast (`Table`).** Column headers default to `text-default-600` (`text-default-700` on a hovered sortable column) so 12px header text clears 4.5:1 (WCAG 1.4.3). Your classes win: a `classNames.th` color on the table, or a `className` on a `TableColumn`, replaces the default.
+
 For complete HeroUI documentation, visit: [HeroUI Storybook](https://storybook.heroui.com/)
 
 ### Configure Tailwind CSS
@@ -243,6 +309,21 @@ module.exports = {
 | `colors` | Color tokens (brand, semantic, neutral, palettes) |
 | `typography` | Typography tokens (fontFamily, fontSize, fontWeight, lineHeight) |
 | `spacing` | Spacing tokens |
+| `assistantSurfaceTokens` | The assistant (`ai-*`) palette as hex, `{ light, dark }` |
+| `assistantSurfacePlugin` | Writes the `--ai-*` custom properties. Already inside `veevartPreset`; add it yourself only if you extend `tokens.tailwindTheme` without the preset |
+| `assistantSurfaceTailwindColors` | The `ai` colour map the preset uses: each colour reads its `--ai-*` property, with the light value as fallback |
+
+#### Assistant color (`ai-*`), light and dark
+
+The preset adds an `ai` colour family for assistant surfaces: `ai-accent`, `ai-fill`, `ai-border`, `ai-user-bubble`, `ai-assistant-bubble` and `ai-focus` (`text-ai-accent`, `bg-ai-fill/50`, `ring-ai-focus`, …).
+
+- Each color reads a custom property (`--ai-accent`, …) that the preset's plugin writes. **The `.dark` class is the switch:** dark values under `.dark`, light values on `:root`, `.light` and `[data-theme="light"]`, the selectors every HeroUI 2.x in the peer range writes its own variables under, so the palette flips together with HeroUI's semantic colors (a test compiles both and compares). `.dark` on a subtree darkens that subtree only.
+- `data-theme="dark"` is **not** a switch. On HeroUI 2.8 (what the DS builds and tests with) neither palette turns dark under it, because 2.8 writes its dark variables under `.dark` only. On 2.7, the floor of the peer range, HeroUI turns dark there and `ai-*` doesn't. Use `.dark` either way.
+- As with HeroUI's own `.dark` theme, Tailwind emits the dark values only when your content uses the `dark` class, which any app that toggles it does.
+- The properties hold channels (`29 78 216`), and only `assistantSurfacePlugin` (inside the preset) writes them, into the Tailwind build's base layer. In plain CSS outside that build, or loaded before it, give the light value as the fallback: `rgb(var(--ai-accent, 29 78 216))`. Without one, the colour resolves to nothing.
+- Without the plugin, the `ai-*` utilities fall back to their light values (the fallback is inside each utility's `var()`); a plain-CSS `var()` with no fallback does not.
+- **The hue is a placeholder** (the info blue scale for accent, fill, border and focus) until Design picks the assistant color. The two turns are HeroUI neutrals (`content1` for the assistant, `content2` for the person), so only the assistant wears the hue. Values and contrast tests live in `src/tokens/assistant-surface.ts`; see Storybook → Foundations → Assistant color.
+- Storybook has a **Theme** toolbar (light / dark); dark wraps the story in `.dark`, the way apps scope it.
 
 ---
 
@@ -252,6 +333,7 @@ module.exports = {
 design-system/
 ├── src/
 │   ├── index.ts                    # Main entry point
+│   ├── assistant.ts                # The /assistant entry (assistant pieces)
 │   ├── foundations/                # Design tokens (colors, typography, spacing)
 │   ├── patterns/                   # Composition components
 │   │   ├── Navbar/

package/dist/assistant.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),d=require("./hasContent-JfCtoDIu.cjs"),s=require("@heroui/react");require("lucide-react");const w={base:"flex w-full min-w-0 flex-col gap-1.5",baseUser:"items-end",baseAssistant:"items-start",header:"flex min-w-0 max-w-full flex-wrap items-center gap-x-2 gap-y-0.5",mark:"inline-flex size-6 flex-none items-center justify-center rounded-full bg-ai-fill text-ai-accent",author:"min-w-0 text-sm font-semibold text-ai-accent [overflow-wrap:anywhere]",meta:"min-w-0 text-xs tabular-nums text-default-500 [overflow-wrap:anywhere]",body:"min-w-0 text-sm leading-relaxed text-foreground [overflow-wrap:anywhere]",bodyUser:"max-w-[85%] rounded-2xl rounded-br-md bg-ai-user-bubble px-4 py-2.5",bodyAssistant:"w-full",plain:"whitespace-pre-wrap",status:"m-0 flex min-w-0 items-center gap-1.5 text-xs font-medium [overflow-wrap:anywhere]",statusIcon:"inline-flex size-3.5 flex-none",actions:"flex flex-wrap items-center gap-1",userLabel:"sr-only",statusFallback:"sr-only"},ae={stopped:"text-default-600",error:"text-danger-600 dark:text-danger-500"},re={stopped:"solar:stop-circle-linear",error:"solar:danger-circle-linear"},ie="solar:stars-minimalistic-linear",oe={stopped:"Stopped",error:"Failed"};function G(t){return typeof t=="string"?t.trim()!=="":Array.isArray(t)?t.some(G):d.hasContent(t)}function J({author:t,authorLabel:c,children:y,status:p="complete",statusLabel:m,meta:u,actions:v,icon:x=ie,className:N,classNames:i={},"data-testid":h="assistant-message"}){const g=r.useId(),o=t==="user",f=p==="complete"?null:p==="stopped"?"stopped":"error",S=d.hasContent(u)?e.jsx("span",{"data-testid":`${h}-meta`,className:s.cn(w.meta,i.meta),children:u}):null;return e.jsxs("article",{"aria-labelledby":g,"data-author":t,"data-status":p,"data-testid":h,className:s.cn(w.base,o?w.baseUser:w.baseAssistant,N,i.base),children:[o?e.jsx("span",{id:g,className:w.userLabel,children:c}):e.jsxs("header",{"data-testid":`${h}-header`,className:s.cn(w.header,i.header),children:[x?e.jsx("span",{"aria-hidden":"true","data-testid":`${h}-mark`,className:w.mark,children:e.jsx(d.Icon,{icon:x,width:14,height:14})}):null,e.jsx("span",{id:g,"data-testid":`${h}-author`,className:w.author,children:c}),S]}),d.hasContent(y)?e.jsx("div",{"data-testid":`${h}-body`,className:s.cn(w.body,o?w.bodyUser:w.bodyAssistant,typeof y=="string"&&w.plain,i.body),children:y}):null,f?e.jsxs("p",{"data-testid":`${h}-status`,className:s.cn(w.status,ae[f],i.status),children:[e.jsx("span",{"aria-hidden":"true","data-testid":`${h}-status-icon`,className:w.statusIcon,children:e.jsx(d.Icon,{icon:re[f],width:14,height:14})}),G(m)?e.jsx("span",{children:m}):e.jsx("span",{className:w.statusFallback,children:oe[f]})]}):null,o?S:null,d.hasContent(v)?e.jsx("div",{"data-testid":`${h}-actions`,className:s.cn(w.actions,i.actions),children:v}):null]})}J.displayName="AssistantMessage";const A={base:"w-full px-0",item:"shadow-none",trigger:"gap-2 py-1.5",title:"text-sm font-medium text-default-700",indicator:"text-default-500",content:"pb-2 pt-0",list:"m-0 flex list-none flex-col gap-1.5 p-0",row:"flex min-w-0 items-start gap-2 text-sm",icon:"mt-0.5 flex-none",label:"min-w-0 flex-1 text-foreground [overflow-wrap:anywhere]",failed:"flex-none text-danger-700 dark:text-danger-700",duration:"mt-px flex-none text-xs tabular-nums text-default-500",stateLabel:"sr-only"},le={done:{icon:"solar:check-circle-linear",className:"text-success-600"},failed:{icon:"solar:close-circle-linear",className:"text-danger-600"}};function V(t){if(!Number.isFinite(t)||t<0)return"";if(t<1e3)return`${Math.floor(t)} ms`;if(t<1e4)return`${(Math.floor(t/100)/10).toFixed(1)} s`;const c=Math.floor(t/1e3);return c<60?`${c} s`:`${Math.floor(c/60)} min ${String(c%60).padStart(2,"0")} s`}const B="activity",ce={done:"Done",failed:"Failed"};function Y({items:t,title:c,titleText:y,isExpanded:p,defaultExpanded:m=!0,onExpandedChange:u,stateLabels:v,formatDuration:x=V,className:N,"data-testid":i="assistant-activity"}){const[h,g]=r.useState(m),o=d.useReducedMotion(),f=p??h,S={...ce,...v};return t.length===0?null:e.jsx(s.Accordion,{"data-testid":i,disableAnimation:o,selectedKeys:f?new Set([B]):new Set,onSelectionChange:n=>{const $=n==="all"||n.has(B);p===void 0&&g($),u?.($)},className:s.cn(A.base,N),children:e.jsx(s.AccordionItem,{"data-testid":`${i}-group`,title:c,textValue:typeof c=="string"?c:y,classNames:{base:A.item,trigger:A.trigger,title:A.title,indicator:A.indicator,content:A.content},children:e.jsx("ol",{"data-testid":`${i}-list`,className:A.list,children:t.map(n=>{const $=le[n.state],_=`${i}-item-${n.id}`;return e.jsxs("li",{"data-testid":_,"data-state":n.state,className:A.row,children:[e.jsx(d.Icon,{icon:$.icon,width:16,height:16,"aria-hidden":"true",className:s.cn(A.icon,$.className)}),e.jsxs("span",{className:A.label,children:[n.state==="done"?e.jsxs("span",{className:A.stateLabel,children:[S.done,": "]}):null,n.label]}),n.state==="failed"?e.jsx(s.Chip,{size:"sm",variant:"flat",color:"danger","data-testid":`${_}-failed`,className:A.failed,children:S.failed}):null,n.durationMs!==void 0?e.jsx("span",{"data-testid":`${_}-duration`,className:A.duration,children:x(n.durationMs)}):null]},n.id)})})},B)})}Y.displayName="AssistantActivity";const T="dark:bg-default-100",de={thinking:{color:"default",base:"bg-ai-fill dark:bg-ai-fill",title:"text-ai-accent",description:"text-default-600",icon:""},info:{color:"default",base:"bg-ai-fill dark:bg-ai-fill",title:"text-ai-accent",description:"text-default-600",icon:"solar:info-circle-linear"},empty:{color:"default",base:T,title:"text-foreground",description:"text-default-600",icon:"solar:chat-round-line-linear"},error:{color:"danger",base:"",title:"text-danger-700",description:"text-danger-700",icon:"solar:danger-triangle-linear"},caution:{color:"warning",base:"",title:"text-warning-700",description:"text-warning-700",icon:"solar:hourglass-line-linear"},offline:{color:"default",base:T,title:"text-foreground",description:"text-default-600",icon:"solar:cloud-cross-linear"},blocked:{color:"default",base:T,title:"text-foreground",description:"text-default-600",icon:"solar:lock-keyhole-minimalistic-linear"}},j={base:"items-start gap-x-3 px-4 py-3",mainWrapper:"ms-0 min-h-0 min-w-0 items-start justify-start gap-0.5",icon:"mt-0.5 inline-flex size-5 flex-none items-center justify-center",live:"col-span-full row-start-1 grid min-w-0 grid-cols-subgrid gap-y-0.5",text:"grid w-full min-w-0 grid-cols-1 items-baseline gap-x-2",textWithClock:"grid-cols-[auto_1fr]",title:"col-start-1 m-0 min-w-0 justify-self-start text-sm font-medium [overflow-wrap:anywhere]",elapsed:"col-start-2 row-start-1 justify-self-start whitespace-nowrap text-sm tabular-nums",description:"col-span-full m-0 min-w-0 text-sm [overflow-wrap:anywhere]",action:"mt-2 flex flex-wrap items-center gap-2",detailsToggle:"-ms-1.5 h-7 min-w-0 gap-1 px-1.5 text-xs font-medium text-current",detailsWrapper:"w-full min-w-0",detailsChevron:`transition-transform ${d.stillTransitionClass}`,detailsChevronOpen:"rotate-180",details:"mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-content1 p-2 font-mono text-xs text-foreground [overflow-wrap:anywhere]"},ue={thinking:"status",info:"status",empty:"status",error:"alert",caution:"status",offline:"status",blocked:"status"};function Q({kind:t,title:c,description:y,elapsed:p,action:m,details:u,detailsLabel:v="Details",icon:x,role:N=ue[t],ariaLive:i=N==="alert"?"assertive":"polite",className:h,classNames:g={},"data-testid":o="assistant-notice"}){const f=de[t],S=p!=null&&p!==!1,n=x===void 0?f.icon:x,$=t==="thinking"&&x===void 0?e.jsx(s.Spinner,{size:"sm",color:"current"}):n?e.jsx(d.Icon,{icon:n,width:20,height:20}):null;return e.jsxs(s.Alert,{role:"none","data-kind":t,"data-testid":o,color:f.color,variant:"flat",hideIcon:!0,startContent:$?e.jsx("span",{"aria-hidden":"true","data-testid":`${o}-icon`,className:s.cn(j.icon,f.title),children:$}):void 0,classNames:{base:s.cn(j.base,f.base,h,g.base),mainWrapper:j.mainWrapper},children:[e.jsxs("div",{className:s.cn(j.text,S&&j.textWithClock),children:[e.jsxs("div",{role:N,"aria-live":i,"aria-atomic":"true","data-testid":`${o}-live`,className:j.live,children:[e.jsx("p",{"data-testid":`${o}-title`,className:s.cn(j.title,f.title,g.title),children:c}),y!=null&&y!==!1?e.jsx("p",{"data-testid":`${o}-description`,className:s.cn(j.description,f.description,g.description),children:y}):null]}),S?e.jsx("span",{"aria-hidden":"true","data-testid":`${o}-elapsed`,className:s.cn(j.elapsed,f.title),children:p}):null]}),m!=null&&m!==!1?e.jsx("div",{"data-testid":`${o}-action`,className:s.cn(j.action,g.action),children:m}):null,u!=null&&u!==!1?e.jsx(fe,{label:v,toneClass:f.description,className:g.details,dataTestId:o,children:u}):null]})}function fe({label:t,toneClass:c,className:y,dataTestId:p,children:m}){const[u,v]=r.useState(!1),x=r.useId();return e.jsxs("div",{className:j.detailsWrapper,children:[e.jsx(d.Button,{size:"sm",variant:"light",color:"default",radius:"sm","aria-expanded":u,"aria-controls":x,onPress:()=>v(N=>!N),testId:`${p}-details-toggle`,className:s.cn(j.detailsToggle,c),endContent:e.jsx(d.Icon,{icon:"solar:alt-arrow-down-linear",width:14,height:14,"aria-hidden":"true",className:s.cn(j.detailsChevron,u&&j.detailsChevronOpen)}),children:t}),e.jsx("div",{id:x,hidden:!u,"data-testid":`${p}-details`,className:s.cn(j.details,y),children:m})]})}Q.displayName="AssistantNotice";const k={base:"flex w-full min-w-0 flex-col gap-2",suggestions:"flex flex-wrap gap-2",suggestion:"h-auto min-h-8 max-w-full whitespace-normal bg-default-100 py-1.5 text-left text-foreground data-[hover=true]:bg-default-200",row:"flex min-w-0 items-end gap-2",field:"min-w-0 flex-1",inputWrapper:"border-default-200 bg-content1 data-[hover=true]:border-default-300 group-data-[focus=true]:border-ai-focus group-data-[focus=true]:data-[hover=true]:border-ai-focus",input:"text-sm text-foreground placeholder:text-default-500",helper:"m-0 flex w-full justify-between gap-2 text-xs text-default-500",count:"ms-auto flex-none tabular-nums",button:"flex-none"};function X({value:t,onValueChange:c,onSubmit:y,onStop:p,isRunning:m=!1,isStopDisabled:u=!1,isDisabled:v=!1,label:x,placeholder:N,description:i,sendLabel:h="Send",stopLabel:g="Stop",suggestions:o,suggestionsLabel:f="Suggestions",onSuggestionSelect:S,maxLength:n,minRows:$=2,maxRows:_=8,className:U,"data-testid":E="assistant-composer"}){const C=r.useRef(null),R=r.useId(),M=t.trim(),z=n===void 0||t.length<=n,O=!v&&!m&&M.length>0&&z,a=m&&p!==void 0,b=()=>{O&&y(M)},F=()=>C.current?.focus(),ee=l=>{l.target===C.current&&(l.key!=="Enter"||l.shiftKey||l.nativeEvent.isComposing||l.keyCode===229||(l.preventDefault(),b()))},te=l=>{l.preventDefault(),b(),F()},L=r.useRef(!1),H=r.useRef(a);r.useLayoutEffect(()=>{H.current&&!a&&L.current&&(L.current=!1,C.current?.focus()),H.current=a},[a]),r.useLayoutEffect(()=>{u&&L.current&&(L.current=!1,C.current?.focus())},[u]);const se=()=>{F(),p?.()},ne=l=>{const K=l.prompt??l.label;c(n===void 0?K:K.slice(0,n)),C.current?.focus(),S?.(l)},W=n!==void 0?`${t.length}/${n}`:null,I=d.hasContent(i)||W?e.jsxs("p",{id:R,"data-testid":`${E}-helper`,className:k.helper,children:[d.hasContent(i)?e.jsx("span",{children:i}):null,W?e.jsx("span",{"data-testid":`${E}-count`,className:k.count,children:W}):null]}):null;return e.jsxs("form",{noValidate:!0,"data-testid":E,"data-running":m||void 0,onSubmit:te,onKeyDown:ee,className:s.cn(k.base,U),children:[o&&o.length>0?e.jsx("div",{role:"group","aria-label":f,"data-testid":`${E}-suggestions`,className:k.suggestions,children:o.map(l=>e.jsx(d.Button,{type:"button",size:"sm",variant:"flat",color:"default",isDisabled:v,onPress:()=>ne(l),testId:`${E}-suggestion-${l.key}`,className:k.suggestion,children:l.label},l.key))}):null,e.jsxs("div",{className:k.row,onMouseDown:l=>{l.target===l.currentTarget&&l.preventDefault()},children:[e.jsx(s.Textarea,{ref:C,"aria-label":x,placeholder:N,value:t,onValueChange:c,isDisabled:v,maxLength:n,minRows:$,maxRows:_,variant:"bordered","aria-describedby":I?R:void 0,"data-testid":`${E}-field`,className:k.field,classNames:{inputWrapper:k.inputWrapper,input:k.input}}),a?e.jsx(d.Button,{type:"button",isIconOnly:!0,color:"default",variant:"flat","aria-label":g,isDisabled:u,onPress:se,onFocus:()=>{L.current=!0},onBlur:l=>{l.target.disabled||(L.current=!1)},testId:`${E}-stop`,className:k.button,children:e.jsx(d.Icon,{icon:"solar:stop-bold",width:18,height:18,"aria-hidden":"true"})},"stop"):e.jsx(d.Button,{type:"submit",isIconOnly:!0,color:"primary","aria-label":h,isDisabled:!O,testId:`${E}-send`,className:k.button,children:e.jsx(d.Icon,{icon:"solar:arrow-up-linear",width:18,height:18,"aria-hidden":"true"})},"send")]}),I]})}X.displayName="AssistantComposer";const D={base:"relative flex min-h-0 w-full flex-col",scroller:"min-h-0 flex-1 overflow-y-auto overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-focus",content:"min-w-0",jumpBar:"pointer-events-none absolute inset-x-0 bottom-3 flex justify-center",jump:"pointer-events-auto border border-divider bg-content1 text-foreground shadow-medium"},q=(t,c)=>t.scrollHeight-t.scrollTop-t.clientHeight<=c,P=t=>t.clientHeight>0;function Z({children:t,label:c,followKey:y,jumpLabel:p="Jump to newest",onFollowChange:m,threshold:u=32,className:v,classNames:x={},"data-testid":N="scroll-to-latest"}){const i=r.useRef(null),h=r.useRef(null),g=r.useRef(!0),o=r.useRef(0),f=r.useRef(m),S=r.useRef(u),[n,$]=r.useState(!0),[_,U]=r.useState(!1),E=d.useReducedMotion();r.useEffect(()=>{f.current=m},[m]),r.useEffect(()=>{S.current=u},[u]);const C=r.useCallback(a=>{g.current!==a&&(g.current=a,$(a),f.current?.(a))},[]),R=r.useCallback(()=>{const a=i.current;a&&(U(a.scrollHeight>a.clientHeight),P(a)&&q(a,S.current)&&C(!0))},[C]),M=r.useCallback(a=>{const b=i.current;b&&(typeof b.scrollTo=="function"?b.scrollTo({top:b.scrollHeight,behavior:a}):b.scrollTop=b.scrollHeight,o.current=b.scrollTop)},[]);r.useLayoutEffect(()=>{g.current&&M("auto"),R()},[y,M,R]),r.useEffect(()=>{const a=h.current,b=i.current;if(!a||!b||typeof ResizeObserver>"u")return;const F=new ResizeObserver(()=>{g.current&&M("auto"),R()});return F.observe(a),F.observe(b),()=>F.disconnect()},[M,R]);const z=()=>{const a=i.current;if(!a||!P(a))return;const b=a.scrollTop;q(a,u)?C(!0):b<o.current-1&&C(!1),o.current=b,R()},O=()=>{C(!0),M(E?"auto":"smooth"),i.current?.focus({preventScroll:!0})};return e.jsxs("div",{"data-testid":N,"data-following":n,className:s.cn(D.base,v,x.base),children:[e.jsx(s.ScrollShadow,{ref:i,role:"region","aria-label":c,tabIndex:0,size:24,onScroll:z,"data-testid":`${N}-scroller`,className:s.cn(D.scroller,x.scroller),children:e.jsx("div",{ref:h,className:s.cn(D.content,x.content),children:t})}),!n&&_?e.jsx("div",{className:D.jumpBar,children:e.jsx(d.Button,{type:"button",size:"sm",radius:"full",color:"default",variant:"solid",onPress:O,testId:`${N}-jump`,startContent:e.jsx(d.Icon,{icon:"solar:arrow-down-linear",width:16,height:16,"aria-hidden":"true"}),className:s.cn(D.jump,x.jump),children:p})}):null]})}Z.displayName="ScrollToLatest";exports.AssistantActivity=Y;exports.AssistantComposer=X;exports.AssistantMessage=J;exports.AssistantNotice=Q;exports.ScrollToLatest=Z;exports.formatAssistantDuration=V;

package/dist/assistant.d.ts

@@ -0,0 +1,10 @@
+export { AssistantMessage } from './patterns/AssistantMessage';
+export type { AssistantMessageAuthor, AssistantMessageBaseProps, AssistantMessageClassNames, AssistantMessageProps, AssistantMessageStatus, AssistantMessageStatusLabel, AssistantMessageStatusProps, } from './patterns/AssistantMessage';
+export { AssistantActivity, formatAssistantDuration } from './patterns/AssistantActivity';
+export type { AssistantActivityItem, AssistantActivityProps, AssistantActivityState, } from './patterns/AssistantActivity';
+export { AssistantNotice } from './patterns/AssistantNotice';
+export type { AssistantNoticeClassNames, AssistantNoticeKind, AssistantNoticeProps } from './patterns/AssistantNotice';
+export { AssistantComposer } from './patterns/AssistantComposer';
+export type { AssistantComposerProps, AssistantComposerSuggestion } from './patterns/AssistantComposer';
+export { ScrollToLatest } from './patterns/ScrollToLatest';
+export type { ScrollToLatestClassNames, ScrollToLatestProps } from './patterns/ScrollToLatest';