@veevarts/design-system 2.0.0-alpha.59 → 2.0.0-alpha.60

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:
@@ -312,6 +333,7 @@ The preset adds an `ai` colour family for assistant surfaces: `ai-accent`, `ai-f
 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';