admin-ui-starter-kit 0.5.0 → 0.6.2

package/dist/showcase/assets/ai-chat-DxxlaytU.js

@@ -0,0 +1,568 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{f as r,n as i,o as a,p as o,t as s}from"./section-Dd6X6IKg.js";import{a as c,c as l,i as u,l as d,n as f,o as p,r as m,s as h,t as g,u as _}from"./ai-artifact-BaYtjrP5.js";import{t as v}from"./arrow-down-JuqwH6gj.js";import{t as y}from"./arrow-up-RWJP_FHU.js";import{t as b}from"./bot-DxRjlJlO.js";import{t as x}from"./chart-column-CbUwWFn7.js";import{Er as S,n as C,r as w,t as T}from"./example-Rrx9vj75.js";import{t as E}from"./database-Ad0l2Bjl.js";import{t as D}from"./file-text-Clv0qFr3.js";import{t as ee}from"./paperclip-BBDKiZeH.js";import{t as O}from"./sparkles-Bc0I4qTf.js";import{n as k,r as A,t as j}from"./ai-tool-call-Da4srLLe.js";import{t as M}from"./x-FNPo6qUv.js";import{N,a as te,d as ne,l as re,n as P}from"./index-o71HAmc3.js";import{t as F}from"./props-table-C6gPyO49.js";import{t as ie}from"./icon-badge-GMIN-bca.js";import{t as ae}from"./textarea-CBhdtg5X.js";var oe=re(`lightbulb`,[[`path`,{d:`M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5`,key:`1gvzjb`}],[`path`,{d:`M9 18h6`,key:`x1upvd`}],[`path`,{d:`M10 22h4`,key:`ceow96`}]]),se=re(`square`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}]]),ce={placeholder:`Ask anything…`,attachAria:`Attach files`,submitAria:`Send message`,stopAria:`Stop generating`,modelPickerAria:`Choose model`,hint:`Press {{submitKey}} to send · {{newlineKey}} for newline`},le={scrollToBottom:`Jump to latest`,scrollToBottomAria:`Scroll to bottom`},ue={header:`In queue`,cancelAria:`Remove from queue`,queuedLabel:`Queued`,runningLabel:`Running`},de={header:`Try`},fe={pending:`Thinking…`},pe={prompt:ce,conversation:le,queue:ue,suggestions:de,message:fe,emptyTitle:`Start a conversation`,emptyDescription:`Ask a question, share context, or attach a file to get going.`};function me(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}var I=ne();function L({attachments:e,onRemove:t,onOpen:n,className:r}){return e.length===0?null:(0,I.jsx)(`div`,{className:P(`flex flex-wrap gap-2`,r),children:e.map(e=>(0,I.jsx)(l,{name:e.name,meta:e.meta,kind:e.kind,icon:e.icon,thumbnailUrl:e.thumbnailUrl,progress:e.progress,errored:e.errored,onOpen:n?()=>n(e):void 0,onRemove:t?()=>t(e.id):void 0},e.id))})}L.displayName=`AiChatAttachmentsStrip`;var R=t(n(),1);function z({threshold:e=80,dependency:t,disableAutoScroll:n=!1}={}){let r=(0,R.useRef)(null),i=(0,R.useRef)(null),[a,o]=(0,R.useState)(!0),s=(0,R.useCallback)((e=`smooth`)=>{i.current?.scrollIntoView({behavior:e,block:`end`})},[]);return(0,R.useEffect)(()=>{let t=r.current;if(!t)return;let n=()=>{o(t.scrollHeight-t.clientHeight-t.scrollTop<=e)};return n(),t.addEventListener(`scroll`,n,{passive:!0}),()=>t.removeEventListener(`scroll`,n)},[e]),(0,R.useEffect)(()=>{if(n||!a)return;let e=window.requestAnimationFrame(()=>s(`auto`));return()=>window.cancelAnimationFrame(e)},[t,n]),{containerRef:r,endRef:i,isAtBottom:a,scrollToBottom:s}}function B({messages:e,renderMessage:t,intro:n,footer:r,empty:i,disableAutoScroll:a,className:s,strings:c}){let l=N(le,c),{containerRef:u,endRef:d,isAtBottom:f,scrollToBottom:p}=z({dependency:e.length,disableAutoScroll:a}),m=e.length===0&&!n;return(0,I.jsxs)(`div`,{className:P(`relative flex h-full min-h-0 flex-col`,s),children:[(0,I.jsxs)(`div`,{ref:u,className:`flex-1 overflow-y-auto px-3 py-4 sm:px-4`,children:[!!n&&(0,I.jsx)(`div`,{className:`mb-4`,children:n}),m?i??(0,I.jsx)(`div`,{className:`flex h-full items-center justify-center px-6 py-12`,children:(0,I.jsx)(o,{type:`secondary`,children:`No messages yet.`})}):(0,I.jsx)(`ol`,{className:`space-y-4`,children:e.map((n,r)=>(0,I.jsx)(`li`,{children:t(n,{isLast:r===e.length-1,index:r})},n.id))}),!!r&&(0,I.jsx)(`div`,{className:`mt-4`,children:r}),(0,I.jsx)(`div`,{ref:d,"aria-hidden":!0,className:`h-px`})]}),!f&&(0,I.jsx)(`div`,{className:`pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2`,children:(0,I.jsxs)(w,{type:`button`,variant:`secondary`,buttonStyle:`solid`,"aria-label":l.scrollToBottomAria,onClick:()=>p(`smooth`),className:P(`pointer-events-auto rounded-full shadow-md`,`border border-border/60`),children:[(0,I.jsx)(v,{className:`size-3.5`}),l.scrollToBottom]})})]})}B.displayName=`AiChatConversation`;function V({title:e=`Start a conversation`,description:t,icon:n=O,below:i,className:a}){return(0,I.jsxs)(`div`,{className:P(`flex h-full flex-col items-center justify-center gap-3 px-4 py-10 text-center`,a),children:[(0,I.jsx)(ie,{icon:n,tone:`primary`,size:`default`,shape:`square`}),(0,I.jsxs)(`div`,{className:`max-w-md space-y-1`,children:[(0,I.jsx)(r,{tag:`h4`,children:e}),!!t&&(0,I.jsx)(o,{type:`secondary`,children:t})]}),!!i&&(0,I.jsx)(`div`,{className:`mt-4 w-full max-w-2xl`,children:i})]})}V.displayName=`AiChatEmptyState`;function H({message:e,onCopy:t,onRegenerate:n,onAttachmentOpen:r,className:i,strings:a}){let o=N(fe,a),s=[],c=[];for(let t of e.parts)t.type===`text`?s.push(t):c.push(t);let l=s.map(e=>e.type===`text`?e.plain??ge(e.content):``).filter(Boolean).join(`
+`)||void 0,u=e.pending?(0,I.jsx)(_,{children:o.pending}):s.length===0&&c.length>0?null:(0,I.jsx)(`div`,{className:`space-y-2`,children:s.map((e,t)=>e.type===`text`?(0,I.jsx)(`div`,{className:`whitespace-pre-wrap`,children:e.content},t):null)});return(0,I.jsxs)(`div`,{className:P(`space-y-2`,i),children:[(u!==null||e.pending)&&(0,I.jsx)(k,{role:e.role,avatar:e.avatar,authorName:e.authorName,timestamp:e.timestamp,plainText:l,loading:e.loading,onCopy:l?t??(()=>void 0):void 0,onRegenerate:n,children:u}),c.length>0&&(0,I.jsx)(`div`,{className:P(`space-y-2`,e.role===`user`?`pr-9 sm:pl-12`:`pl-9 sm:pr-12`),children:c.map((e,t)=>(0,I.jsx)(he,{part:e,onAttachmentOpen:r},t))}),!!e.trailing&&(0,I.jsx)(`div`,{className:P(e.role===`user`?`pr-9 sm:pl-12`:`pl-9 sm:pr-12`),children:e.trailing})]})}H.displayName=`AiChatMessage`;function he({part:e,onAttachmentOpen:t}){switch(e.type){case`text`:return(0,I.jsx)(o,{children:e.content});case`reasoning`:return(0,I.jsx)(u,{streaming:e.streaming,durationSeconds:e.durationSeconds,children:e.content});case`chain-of-thought`:return(0,I.jsx)(m,{steps:e.steps,streaming:e.streaming});case`tool`:return(0,I.jsx)(j,{name:e.name,status:e.status,icon:e.icon,args:e.args,result:e.result,error:e.error,durationMs:e.durationMs,defaultExpanded:e.defaultExpanded});case`code`:return(0,I.jsx)(d,{code:e.code,language:e.language,filename:e.filename,showLineNumbers:e.showLineNumbers,highlightLines:e.highlightLines});case`attachments`:return(0,I.jsx)(L,{attachments:e.items,onOpen:t?e=>t(e.id):void 0});case`sources`:return(0,I.jsx)(c,{sources:e.items,variant:e.variant,defaultExpanded:e.defaultExpanded});case`task`:return(0,I.jsx)(f,{task:e.task});case`artifact`:return(0,I.jsx)(g,{title:e.title,subtitle:e.subtitle,icon:e.icon,copyText:e.copyText,actions:e.actions,onOpen:e.onOpen,onDownload:e.onDownload,children:e.body});case`confirmation`:return(0,I.jsx)(p,{title:e.title,description:e.description,tone:e.tone,status:e.status,details:e.details,onApprove:e.onApprove,onReject:e.onReject});case`custom`:return(0,I.jsx)(I.Fragment,{children:e.render()});default:return null}}function ge(e){return typeof e==`string`||typeof e==`number`?String(e):Array.isArray(e)?e.map(ge).join(``):``}function U({value:e,onChange:t,onSubmit:n,onStop:r,streaming:i=!1,disabled:a=!1,attachments:s=[],onRemoveAttachment:c,onAttach:l,showAttach:u,leadingActions:d,trailingActions:f,hideHint:p=!1,minRows:m=1,maxRows:h=8,autoFocus:g=!1,className:_,strings:v}){let b=N(ce,v),x=(0,R.useRef)(null),S=!i&&!a&&(e.trim().length>0||s.length>0),C=(0,R.useCallback)(()=>{S&&n?.({text:e,attachments:s})},[S,n,e,s]),T=(0,R.useCallback)(e=>{e.key===`Enter`&&!e.shiftKey&&!e.nativeEvent.isComposing&&(e.preventDefault(),C())},[C]),E=u??!!l,D=typeof navigator<`u`&&navigator.platform?.toLowerCase().includes(`mac`)?`⌘↩`:`↩`;return(0,I.jsxs)(`div`,{className:P(`rounded-xl border border-border bg-card transition-colors duration-150`,`focus-within:border-foreground/20 focus-within:ring-2 focus-within:ring-ring/30`,a&&`opacity-60 pointer-events-none`,_),children:[s.length>0&&(0,I.jsx)(`div`,{className:`border-b border-border/60 p-2`,children:(0,I.jsx)(L,{attachments:s,onRemove:c})}),(0,I.jsx)(ae,{ref:x,value:e,onChange:e=>t(e.target.value),onKeyDown:T,placeholder:b.placeholder,autoResize:!0,minRows:m,maxRows:h,autoFocus:g,disabled:a,className:P(`!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 resize-none px-3 py-2.5`)}),(0,I.jsxs)(`div`,{className:`flex items-center gap-1 border-t border-border/60 px-2 py-1.5`,children:[d,E&&(0,I.jsx)(w,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":b.attachAria,onClick:l,disabled:a,children:(0,I.jsx)(ee,{className:`size-4`})}),(0,I.jsxs)(`div`,{className:`ml-auto flex items-center gap-1`,children:[f,i?(0,I.jsx)(w,{type:`button`,variant:`secondary`,buttonStyle:`solid`,size:`icon-small`,"aria-label":b.stopAria,onClick:r,children:(0,I.jsx)(se,{className:`size-3.5 fill-current`})}):(0,I.jsx)(w,{type:`button`,variant:`primary`,buttonStyle:`solid`,size:`icon-small`,"aria-label":b.submitAria,onClick:C,disabled:!S,children:(0,I.jsx)(y,{className:`size-4`})})]})]}),!p&&(0,I.jsx)(`div`,{className:`px-3 pb-2`,children:(0,I.jsx)(o,{size:`xxs`,type:`discrete`,children:me(b.hint,{submitKey:D,newlineKey:`⇧↩`})})})]})}U.displayName=`AiChatPromptInput`;function _e({items:e,hideHeader:t=!1,onCancel:n,className:r,strings:i}){let s=N(ue,i);return e.length===0?null:(0,I.jsxs)(`div`,{className:P(`rounded-lg border border-border/60 bg-muted/20 px-2.5 py-2`,r),children:[!t&&(0,I.jsxs)(o,{size:`xxs`,type:`secondary`,weight:`medium`,className:`mb-1.5 px-1 uppercase tracking-wider`,children:[s.header,` · `,e.length]}),(0,I.jsx)(`ul`,{className:`space-y-1`,children:e.map(e=>{let t=e.status??`queued`;return(0,I.jsxs)(`li`,{className:`flex items-center gap-2 rounded-md bg-card px-2 py-1.5`,children:[t===`running`?(0,I.jsx)(S,{className:`size-3.5 shrink-0 animate-spin text-primary`}):(0,I.jsx)(`span`,{"aria-hidden":!0,className:`size-2 shrink-0 rounded-full bg-muted-foreground/50`}),(0,I.jsx)(o,{size:`xs`,className:`flex-1 truncate`,children:e.label}),(0,I.jsx)(a,{variant:t===`running`?`primary`:`secondary`,children:t===`running`?s.runningLabel:s.queuedLabel}),(!!e.onCancel||!!n)&&(0,I.jsx)(w,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":s.cancelAria,onClick:()=>{e.onCancel?.(),n?.(e.id)},children:(0,I.jsx)(M,{className:`size-3.5`})})]},e.id)})})]})}_e.displayName=`AiChatQueue`;function ve({suggestions:e,onPick:t,hideHeader:n=!1,className:r,strings:i}){let a=N(de,i);return e.length===0?null:(0,I.jsxs)(`div`,{className:P(`flex items-center gap-2`,r),children:[!n&&(0,I.jsxs)(`div`,{className:`inline-flex shrink-0 items-center gap-1.5`,children:[(0,I.jsx)(O,{className:`size-3.5 text-muted-foreground`}),(0,I.jsx)(o,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:a.header})]}),(0,I.jsx)(`div`,{className:`-mx-1 flex flex-1 items-center gap-1.5 overflow-x-auto px-1 py-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,children:e.map(e=>{let n=e.icon;return(0,I.jsxs)(w,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:()=>t?.(e),className:P(`h-auto shrink-0 gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1`,`transition-[border-color,background] duration-150`,`hover:border-foreground/20 hover:bg-muted/40`),children:[!!n&&(0,I.jsx)(n,{className:`size-3 text-muted-foreground`}),(0,I.jsx)(o,{tag:`span`,size:`xs`,weight:`medium`,children:e.label})]},e.id)})})]})}ve.displayName=`AiChatSuggestionsRow`;function W({messages:e,inputValue:t,onInputChange:n,onSubmit:r,onStop:i,streaming:a=!1,disabled:s=!1,attachments:c=[],onRemoveAttachment:l,onAttach:u,showAttach:d,agent:f,headerActions:p,queue:m=[],onCancelQueueItem:g,suggestions:_=[],onPickSuggestion:v,onMessageCopy:y,onMessageRegenerate:b,onAttachmentOpen:x,disableAutoScroll:S,slots:C,strings:w,className:T}){let E=N(pe,w),[,D]=(0,R.useState)(0),ee=(0,R.useCallback)((e,t)=>C?.renderMessage?C.renderMessage(e,t):(0,I.jsx)(H,{className:`ai-chat-message--component`,message:e,strings:E.message,onCopy:y?()=>y(e):void 0,onRegenerate:b?()=>b(e):void 0,onAttachmentOpen:x?t=>x(e.id,t):void 0}),[x,y,b,C,E.message]),O=C?.header??(f?(0,I.jsxs)(`div`,{className:`flex items-center gap-3 border-b border-border bg-card px-3 py-2 sm:px-4`,children:[(0,I.jsx)(h,{name:f.name,icon:f.icon,avatar:f.avatar,subtitle:f.subtitle,tone:f.tone,status:f.status,variant:`inline`}),!!p&&(0,I.jsx)(`div`,{className:`ml-auto flex items-center gap-1`,children:p})]}):null),k=C?.empty??(e.length===0?(0,I.jsx)(V,{title:E.emptyTitle,description:E.emptyDescription}):null),A=C?.queue??(m.length>0?(0,I.jsx)(_e,{items:m,onCancel:g,strings:E.queue}):null),j=C?.suggestions??(_.length>0?(0,I.jsx)(ve,{suggestions:_,onPick:v,strings:E.suggestions}):null),M=C?.input??(0,I.jsx)(U,{value:t,onChange:n,onSubmit:e=>{r?.(e),D(e=>e+1)},onStop:i,streaming:a,disabled:s,attachments:c,onRemoveAttachment:l,onAttach:u,showAttach:d,strings:E.prompt});return(0,I.jsxs)(`div`,{className:P(`ai-chat--component flex h-full flex-col overflow-hidden rounded-xl border border-border bg-background`,T),children:[O,(0,I.jsx)(B,{messages:e,renderMessage:ee,intro:C?.intro,footer:C?.belowMessages,empty:k,disableAutoScroll:S,strings:E.conversation}),(A||j||M)&&(0,I.jsxs)(`div`,{className:`border-t border-border bg-card/60`,children:[A&&(0,I.jsx)(`div`,{className:`px-3 pb-2 pt-3 sm:px-4`,children:A}),j&&(0,I.jsx)(`div`,{className:P(`px-3 sm:px-4`,!A&&`pt-3`,`pb-2`),children:j}),M&&(0,I.jsx)(`div`,{className:`px-3 pb-3 pt-2 sm:px-4 sm:pb-4`,children:M})]}),s&&(0,I.jsx)(o,{className:`sr-only`,"aria-live":`polite`,children:`Chat is disabled`})]})}W.displayName=`AiChat`;var ye=e({Default:()=>q,Empty:()=>Y,Headless:()=>Z,Streaming:()=>J,WithSlots:()=>X}),G={name:`Atlas`,subtitle:`claude-4.7-1m · with tools`,icon:b,tone:`primary`,status:`idle`},be=`import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount((c) => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}`,K=[{id:`m1`,role:`user`,authorName:`You`,timestamp:`14:31`,parts:[{type:`text`,content:`Can you summarise yesterday’s bookings and flag anything unusual?`},{type:`attachments`,items:[{id:`a1`,name:`bookings-2026-04-30.csv`,meta:`124 KB · CSV`,kind:`document`}]}]},{id:`m2`,role:`assistant`,authorName:`Atlas`,timestamp:`14:31`,parts:[{type:`reasoning`,durationSeconds:3.4,content:`Loading the CSV, grouping by date, computing totals and refund deltas. Spa package volume looked off so checked the prior 7-day baseline.`},{type:`tool`,name:`analytics.query`,status:`success`,durationMs:320,args:`{ "from": "2026-04-30", "to": "2026-04-30", "metric": "bookings" }`,result:`23 bookings · 4,820 USD · 2 refunds`},{type:`text`,content:`You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one cancellation, one duplicate). The Spa package saw 2× the usual demand.`},{type:`sources`,variant:`avatars`,items:[{id:`s1`,title:`bookings.csv`,publisher:`attached file`},{id:`s2`,title:`pricing.json`,publisher:`attached file`},{id:`s3`,title:`refunds.tsv`,publisher:`attached file`}]}],trailing:(0,I.jsx)(A,{onVote:()=>{},onSubmitComment:()=>{}})},{id:`m3`,role:`user`,authorName:`You`,timestamp:`14:33`,parts:[{type:`text`,content:`Generate a Counter.tsx demo and queue an npm install for the deps.`}]},{id:`m4`,role:`assistant`,authorName:`Atlas`,timestamp:`14:33`,parts:[{type:`chain-of-thought`,steps:[{id:`1`,title:`Pick a minimal example`,status:`completed`},{id:`2`,title:`Write the component`,status:`completed`},{id:`3`,title:`Verify dependencies`,status:`active`}]},{type:`artifact`,title:`Counter.tsx`,subtitle:`React component · 12 lines`,icon:D,copyText:be,body:(0,I.jsx)(d,{code:be,language:`tsx`,hideHeader:!0}),onDownload:()=>{},onOpen:()=>{}},{type:`confirmation`,title:`Run pnpm install in the workspace?`,description:`Atlas needs to install react-dom@19 to run the demo.`,tone:`info`,onApprove:()=>{},onReject:()=>{}}]}],xe=[{id:`kpi`,label:`KPI digest`,icon:x},{id:`invoice`,label:`Overdue reminder draft`,icon:D},{id:`lookup`,label:`Find similar customers`,icon:te},{id:`refund`,label:`Refund policy explainer`,icon:oe},{id:`analytics`,label:`Build a SQL query`,icon:E}];function q(){let[e,t]=(0,R.useState)(K),[n,r]=(0,R.useState)(``),[i,a]=(0,R.useState)(!1),[o,s]=(0,R.useState)([]);return(0,I.jsx)(`div`,{className:`h-160`,children:(0,I.jsx)(W,{agent:G,messages:e,inputValue:n,onInputChange:r,onSubmit:(0,R.useCallback)(e=>{if(!e.text.trim()&&e.attachments.length===0)return;let n={id:`u-${Date.now()}`,role:`user`,authorName:`You`,timestamp:new Date().toLocaleTimeString([],{hour:`2-digit`,minute:`2-digit`}),parts:[...e.text.trim()?[{type:`text`,content:e.text}]:[],...e.attachments.length>0?[{type:`attachments`,items:e.attachments}]:[]]},i={id:`a-${Date.now()}`,role:`assistant`,authorName:`Atlas`,pending:!0,parts:[]};t(e=>[...e,n,i]),r(``),s([]),a(!0),window.setTimeout(()=>{t(e=>e.map(e=>e.id===i.id?{...e,pending:!1,parts:[{type:`text`,content:"Got it. (This is a demo — wire `onSubmit` to your model API in production.)"}]}:e)),a(!1)},1200)},[]),onStop:()=>a(!1),streaming:i,attachments:o,onRemoveAttachment:e=>s(t=>t.filter(t=>t.id!==e)),onAttach:()=>s(e=>[...e,{id:`att-${Date.now()}`,name:`sample-spec.md`,meta:`32 KB · Markdown`,kind:`document`}]),suggestions:xe,onPickSuggestion:e=>r(typeof e.label==`string`?e.label:``),onMessageRegenerate:()=>{},onMessageCopy:()=>{}})})}function J(){return(0,I.jsx)(`div`,{className:`h-105`,children:(0,I.jsx)(W,{agent:G,messages:[{id:`u`,role:`user`,authorName:`You`,timestamp:`15:02`,parts:[{type:`text`,content:`Draft a refund email for ORD-A219.`}]},{id:`a`,role:`assistant`,authorName:`Atlas`,pending:!0,parts:[]}],inputValue:``,onInputChange:()=>{},streaming:!0,onStop:()=>{}})})}function Y(){let[e,t]=(0,R.useState)(``);return(0,I.jsx)(`div`,{className:`h-105`,children:(0,I.jsx)(W,{agent:G,messages:[],inputValue:e,onInputChange:t,suggestions:xe,onPickSuggestion:e=>t(typeof e.label==`string`?e.label:``),strings:{emptyTitle:`Start a conversation`,emptyDescription:`Ask Atlas about bookings, refunds, KPIs, or paste a spec to review.`}})})}function X(){let[e,t]=(0,R.useState)(``),[n,r]=(0,R.useState)([{id:`q1`,label:`Generate weekly KPI digest`,status:`running`},{id:`q2`,label:`Draft refund email to customer #2941`,status:`queued`}]);return(0,I.jsx)(`div`,{className:`h-130`,children:(0,I.jsx)(W,{messages:K.slice(0,2),inputValue:e,onInputChange:t,queue:n,onCancelQueueItem:e=>r(t=>t.filter(t=>t.id!==e)),slots:{header:(0,I.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border bg-card px-4 py-2.5`,children:[(0,I.jsx)(o,{weight:`semibold`,children:`Atlas · workspace assistant`}),(0,I.jsx)(w,{buttonStyle:`ghost`,size:`small`,children:`Settings`})]}),belowMessages:(0,I.jsx)(`div`,{className:`border-t border-border bg-muted/30 px-4 py-2`,children:(0,I.jsx)(o,{size:`xs`,type:`secondary`,children:`Replies are generated; double-check anything before acting.`})})}})})}function Z(){let[e,t]=(0,R.useState)(``),[n,r]=(0,R.useState)(K.slice(0,2)),{containerRef:i,endRef:a,isAtBottom:s,scrollToBottom:c}=z({dependency:n.length});return(0,I.jsxs)(`div`,{className:`flex h-130 flex-col overflow-hidden rounded-xl border border-border bg-background`,children:[(0,I.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border px-4 py-2`,children:[(0,I.jsx)(o,{weight:`semibold`,children:`Custom shell — built from partials`}),!s&&(0,I.jsx)(w,{buttonStyle:`ghost`,size:`small`,onClick:()=>c(),children:`Jump to latest`})]}),(0,I.jsxs)(`div`,{ref:i,className:`flex-1 overflow-y-auto px-4 py-3`,children:[n.length===0?(0,I.jsx)(V,{title:`Nothing yet`,description:`Send a message to begin.`}):(0,I.jsx)(B,{messages:n,renderMessage:e=>(0,I.jsxs)(`div`,{className:`rounded-md border border-border bg-card/60 p-3`,children:[(0,I.jsxs)(o,{size:`xs`,type:`secondary`,children:[e.authorName,` · `,e.role]}),e.parts.map((e,t)=>e.type===`text`?(0,I.jsx)(o,{className:`mt-1`,children:e.content},t):null)]}),disableAutoScroll:!0}),(0,I.jsx)(`div`,{ref:a})]}),(0,I.jsx)(`div`,{className:`border-t border-border px-4 py-3`,children:(0,I.jsx)(U,{value:e,onChange:t,onSubmit:e=>{e.text.trim()&&(r(t=>[...t,{id:`u-${Date.now()}`,role:`user`,authorName:`You`,parts:[{type:`text`,content:e.text}]}]),t(``))}})})]})}var Q=`import { useCallback, useState } from 'react';
+import {
+	BarChart3,
+	Bot,
+	Database,
+	FileText,
+	Lightbulb,
+	Search,
+} from 'lucide-react';
+
+import {
+	AiChat,
+	AiChatConversation,
+	AiChatEmptyState,
+	AiChatPromptInput,
+	useAiChatScroll,
+	type AiChatAttachment,
+	type AiChatMessage,
+	type AiChatQueueItem,
+	type AiChatSubmitValues,
+	type AiChatSuggestion,
+} from '@/components/features/ai-chat';
+import { AiCodeBlock } from '@/components/composed/ai/ai-code-block';
+import { AiFeedback } from '@/components/composed/ai/ai-feedback';
+import { Button } from '@/components/base/buttons';
+import { Text } from '@/components/typography';
+
+/* ------------------------------------------------------------------ */
+/*  Shared seed data                                                  */
+/* ------------------------------------------------------------------ */
+
+const AGENT = {
+	name: 'Atlas',
+	subtitle: 'claude-4.7-1m · with tools',
+	icon: Bot,
+	tone: 'primary' as const,
+	status: 'idle' as const,
+};
+
+const SAMPLE_CODE = \`import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount((c) => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}\`;
+
+const SEED_MESSAGES: AiChatMessage[] = [
+	{
+		id: 'm1',
+		role: 'user',
+		authorName: 'You',
+		timestamp: '14:31',
+		parts: [
+			{
+				type: 'text',
+				content:
+					'Can you summarise yesterday’s bookings and flag anything unusual?',
+			},
+			{
+				type: 'attachments',
+				items: [
+					{
+						id: 'a1',
+						name: 'bookings-2026-04-30.csv',
+						meta: '124 KB · CSV',
+						kind: 'document',
+					},
+				],
+			},
+		],
+	},
+	{
+		id: 'm2',
+		role: 'assistant',
+		authorName: 'Atlas',
+		timestamp: '14:31',
+		parts: [
+			{
+				type: 'reasoning',
+				durationSeconds: 3.4,
+				content:
+					'Loading the CSV, grouping by date, computing totals and refund deltas. Spa package volume looked off so checked the prior 7-day baseline.',
+			},
+			{
+				type: 'tool',
+				name: 'analytics.query',
+				status: 'success',
+				durationMs: 320,
+				args: '{ "from": "2026-04-30", "to": "2026-04-30", "metric": "bookings" }',
+				result: '23 bookings · 4,820 USD · 2 refunds',
+			},
+			{
+				type: 'text',
+				content:
+					'You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one cancellation, one duplicate). The Spa package saw 2× the usual demand.',
+			},
+			{
+				type: 'sources',
+				variant: 'avatars',
+				items: [
+					{ id: 's1', title: 'bookings.csv', publisher: 'attached file' },
+					{ id: 's2', title: 'pricing.json', publisher: 'attached file' },
+					{ id: 's3', title: 'refunds.tsv', publisher: 'attached file' },
+				],
+			},
+		],
+		trailing: <AiFeedback onVote={() => {}} onSubmitComment={() => {}} />,
+	},
+	{
+		id: 'm3',
+		role: 'user',
+		authorName: 'You',
+		timestamp: '14:33',
+		parts: [
+			{
+				type: 'text',
+				content:
+					'Generate a Counter.tsx demo and queue an npm install for the deps.',
+			},
+		],
+	},
+	{
+		id: 'm4',
+		role: 'assistant',
+		authorName: 'Atlas',
+		timestamp: '14:33',
+		parts: [
+			{
+				type: 'chain-of-thought',
+				steps: [
+					{ id: '1', title: 'Pick a minimal example', status: 'completed' },
+					{ id: '2', title: 'Write the component', status: 'completed' },
+					{ id: '3', title: 'Verify dependencies', status: 'active' },
+				],
+			},
+			{
+				type: 'artifact',
+				title: 'Counter.tsx',
+				subtitle: 'React component · 12 lines',
+				icon: FileText,
+				copyText: SAMPLE_CODE,
+				body: <AiCodeBlock code={SAMPLE_CODE} language="tsx" hideHeader />,
+				onDownload: () => {},
+				onOpen: () => {},
+			},
+			{
+				type: 'confirmation',
+				title: 'Run pnpm install in the workspace?',
+				description: 'Atlas needs to install react-dom@19 to run the demo.',
+				tone: 'info',
+				onApprove: () => {},
+				onReject: () => {},
+			},
+		],
+	},
+];
+
+const SUGGESTIONS: AiChatSuggestion[] = [
+	{ id: 'kpi', label: 'KPI digest', icon: BarChart3 },
+	{ id: 'invoice', label: 'Overdue reminder draft', icon: FileText },
+	{ id: 'lookup', label: 'Find similar customers', icon: Search },
+	{ id: 'refund', label: 'Refund policy explainer', icon: Lightbulb },
+	{ id: 'analytics', label: 'Build a SQL query', icon: Database },
+];
+
+/* ------------------------------------------------------------------ */
+/*  1. Default conversation                                            */
+/* ------------------------------------------------------------------ */
+
+export function Default() {
+	const [messages, setMessages] = useState<AiChatMessage[]>(SEED_MESSAGES);
+	const [input, setInput] = useState('');
+	const [streaming, setStreaming] = useState(false);
+	const [attachments, setAttachments] = useState<AiChatAttachment[]>([]);
+
+	const handleSubmit = useCallback((values: AiChatSubmitValues) => {
+		if (!values.text.trim() && values.attachments.length === 0) return;
+		const userMsg: AiChatMessage = {
+			id: \`u-\${Date.now()}\`,
+			role: 'user',
+			authorName: 'You',
+			timestamp: new Date().toLocaleTimeString([], {
+				hour: '2-digit',
+				minute: '2-digit',
+			}),
+			parts: [
+				...(values.text.trim()
+					? [{ type: 'text' as const, content: values.text }]
+					: []),
+				...(values.attachments.length > 0
+					? [{ type: 'attachments' as const, items: values.attachments }]
+					: []),
+			],
+		};
+		const assistantPlaceholder: AiChatMessage = {
+			id: \`a-\${Date.now()}\`,
+			role: 'assistant',
+			authorName: 'Atlas',
+			pending: true,
+			parts: [],
+		};
+		setMessages((prev) => [...prev, userMsg, assistantPlaceholder]);
+		setInput('');
+		setAttachments([]);
+		setStreaming(true);
+		window.setTimeout(() => {
+			setMessages((prev) =>
+				prev.map((m) =>
+					m.id === assistantPlaceholder.id
+						? {
+								...m,
+								pending: false,
+								parts: [
+									{
+										type: 'text',
+										content:
+											'Got it. (This is a demo — wire \`onSubmit\` to your model API in production.)',
+									},
+								],
+							}
+						: m,
+				),
+			);
+			setStreaming(false);
+		}, 1200);
+	}, []);
+
+	return (
+		<div className="h-160">
+			<AiChat
+				agent={AGENT}
+				messages={messages}
+				inputValue={input}
+				onInputChange={setInput}
+				onSubmit={handleSubmit}
+				onStop={() => setStreaming(false)}
+				streaming={streaming}
+				attachments={attachments}
+				onRemoveAttachment={(id) =>
+					setAttachments((prev) => prev.filter((a) => a.id !== id))
+				}
+				onAttach={() =>
+					setAttachments((prev) => [
+						...prev,
+						{
+							id: \`att-\${Date.now()}\`,
+							name: 'sample-spec.md',
+							meta: '32 KB · Markdown',
+							kind: 'document',
+						},
+					])
+				}
+				suggestions={SUGGESTIONS}
+				onPickSuggestion={(s) =>
+					setInput(typeof s.label === 'string' ? s.label : '')
+				}
+				onMessageRegenerate={() => {}}
+				onMessageCopy={() => {}}
+			/>
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/*  2. Streaming / pending assistant message                          */
+/* ------------------------------------------------------------------ */
+
+export function Streaming() {
+	const messages: AiChatMessage[] = [
+		{
+			id: 'u',
+			role: 'user',
+			authorName: 'You',
+			timestamp: '15:02',
+			parts: [{ type: 'text', content: 'Draft a refund email for ORD-A219.' }],
+		},
+		{
+			id: 'a',
+			role: 'assistant',
+			authorName: 'Atlas',
+			pending: true,
+			parts: [],
+		},
+	];
+	return (
+		<div className="h-105">
+			<AiChat
+				agent={AGENT}
+				messages={messages}
+				inputValue=""
+				onInputChange={() => {}}
+				streaming
+				onStop={() => {}}
+			/>
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/*  3. Empty state                                                     */
+/* ------------------------------------------------------------------ */
+
+export function Empty() {
+	const [input, setInput] = useState('');
+	return (
+		<div className="h-105">
+			<AiChat
+				agent={AGENT}
+				messages={[]}
+				inputValue={input}
+				onInputChange={setInput}
+				suggestions={SUGGESTIONS}
+				onPickSuggestion={(s) =>
+					setInput(typeof s.label === 'string' ? s.label : '')
+				}
+				strings={{
+					emptyTitle: 'Start a conversation',
+					emptyDescription:
+						'Ask Atlas about bookings, refunds, KPIs, or paste a spec to review.',
+				}}
+			/>
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/*  4. Slots — custom header, intro, queue                             */
+/* ------------------------------------------------------------------ */
+
+export function WithSlots() {
+	const [input, setInput] = useState('');
+	const [queue, setQueue] = useState<AiChatQueueItem[]>([
+		{ id: 'q1', label: 'Generate weekly KPI digest', status: 'running' },
+		{ id: 'q2', label: 'Draft refund email to customer #2941', status: 'queued' },
+	]);
+	return (
+		<div className="h-130">
+			<AiChat
+				messages={SEED_MESSAGES.slice(0, 2)}
+				inputValue={input}
+				onInputChange={setInput}
+				queue={queue}
+				onCancelQueueItem={(id) =>
+					setQueue((prev) => prev.filter((q) => q.id !== id))
+				}
+				slots={{
+					header: (
+						<div className="flex items-center justify-between border-b border-border bg-card px-4 py-2.5">
+							<Text weight="semibold">Atlas · workspace assistant</Text>
+							<Button buttonStyle="ghost" size="small">
+								Settings
+							</Button>
+						</div>
+					),
+					belowMessages: (
+						<div className="border-t border-border bg-muted/30 px-4 py-2">
+							<Text size="xs" type="secondary">
+								Replies are generated; double-check anything before acting.
+							</Text>
+						</div>
+					),
+				}}
+			/>
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/*  5. Headless — useAiChatScroll + custom layout                     */
+/* ------------------------------------------------------------------ */
+
+export function Headless() {
+	const [input, setInput] = useState('');
+	const [messages, setMessages] = useState<AiChatMessage[]>(
+		SEED_MESSAGES.slice(0, 2),
+	);
+	const { containerRef, endRef, isAtBottom, scrollToBottom } = useAiChatScroll({
+		dependency: messages.length,
+	});
+
+	return (
+		<div className="flex h-130 flex-col overflow-hidden rounded-xl border border-border bg-background">
+			<div className="flex items-center justify-between border-b border-border px-4 py-2">
+				<Text weight="semibold">Custom shell — built from partials</Text>
+				{!isAtBottom && (
+					<Button
+						buttonStyle="ghost"
+						size="small"
+						onClick={() => scrollToBottom()}
+					>
+						Jump to latest
+					</Button>
+				)}
+			</div>
+			<div
+				ref={containerRef}
+				className="flex-1 overflow-y-auto px-4 py-3"
+			>
+				{messages.length === 0 ? (
+					<AiChatEmptyState
+						title="Nothing yet"
+						description="Send a message to begin."
+					/>
+				) : (
+					<AiChatConversation
+						messages={messages}
+						renderMessage={(m) => (
+							<div className="rounded-md border border-border bg-card/60 p-3">
+								<Text size="xs" type="secondary">
+									{m.authorName} · {m.role}
+								</Text>
+								{m.parts.map((part, i) =>
+									part.type === 'text' ? (
+										<Text key={i} className="mt-1">
+											{part.content}
+										</Text>
+									) : null,
+								)}
+							</div>
+						)}
+						disableAutoScroll
+					/>
+				)}
+				<div ref={endRef} />
+			</div>
+			<div className="border-t border-border px-4 py-3">
+				<AiChatPromptInput
+					value={input}
+					onChange={setInput}
+					onSubmit={(values) => {
+						if (!values.text.trim()) return;
+						setMessages((prev) => [
+							...prev,
+							{
+								id: \`u-\${Date.now()}\`,
+								role: 'user',
+								authorName: 'You',
+								parts: [{ type: 'text', content: values.text }],
+							},
+						]);
+						setInput('');
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
+`;function Se(e){let t={code:`code`,h4:`h4`,li:`li`,p:`p`,strong:`strong`,ul:`ul`,...e.components};return ye||$(`Examples`,!1),q||$(`Examples.Default`,!0),Y||$(`Examples.Empty`,!0),Z||$(`Examples.Headless`,!0),J||$(`Examples.Streaming`,!0),X||$(`Examples.WithSlots`,!0),(0,I.jsxs)(i,{title:`AI Chat`,description:`Framework-agnostic AI chat surface. Ties together prompt input, conversation, message renderer, queue, and the full composed/ai/* palette (reasoning, tool calls, attachments, artifacts, confirmations).`,layer:`features`,status:`ready`,sourcePath:`src/components/features/ai-chat`,children:[(0,I.jsxs)(s,{title:`Overview`,id:`overview`,children:[(0,I.jsxs)(t.p,{children:[(0,I.jsx)(t.code,{children:`AiChat`}),` is a controlled chat shell. The library does `,(0,I.jsx)(t.strong,{children:`not`}),` call any
+LLM, fetch any data, or wire any router — every piece of state flows in
+as a prop and every action exits through a callback. That is what makes
+it portable across Inertia, Next.js, Remix, plain Vite, and friends.`]}),(0,I.jsx)(t.p,{children:`The consumer wires:`}),(0,I.jsxs)(t.ul,{children:[`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.code,{children:`messages`}),` — the controlled message list (you append on submit, you
+flip `,(0,I.jsx)(t.code,{children:`pending`}),` off when the assistant turn completes).`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.code,{children:`inputValue`}),` / `,(0,I.jsx)(t.code,{children:`onInputChange`}),` — controlled prompt input.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.code,{children:`onSubmit(values)`}),` — fires on Enter / send. Hook this to your model
+endpoint, tRPC mutation, queue producer, etc.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.code,{children:`onStop`}),` — fires when the user clicks the stop button while
+`,(0,I.jsx)(t.code,{children:`streaming`}),` is true.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.code,{children:`attachments`}),` + `,(0,I.jsx)(t.code,{children:`onAttach`}),` / `,(0,I.jsx)(t.code,{children:`onRemoveAttachment`}),` — staged composer
+attachments. The library never touches storage.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.code,{children:`queue`}),`, `,(0,I.jsx)(t.code,{children:`suggestions`}),`, `,(0,I.jsx)(t.code,{children:`onMessageRegenerate`}),`, `,(0,I.jsx)(t.code,{children:`onMessageCopy`}),` —
+optional callbacks for the surrounding surfaces.`]}),`
+`]})]}),(0,I.jsxs)(s,{title:`How to use`,id:`how-to-use`,children:[(0,I.jsxs)(t.p,{children:[`The canonical mount: controlled state, callback-driven submission, no
+framework SDKs. Drop this in any consumer app and wire `,(0,I.jsx)(t.code,{children:`onSubmit`}),` to
+whatever produces assistant messages.`]}),(0,I.jsx)(C,{language:`tsx`,code:`import { useState } from 'react';
+import { Bot } from 'lucide-react';
+import {
+AiChat,
+type AiChatMessage,
+type AiChatSubmitValues,
+} from '@/components/features/ai-chat';
+
+export function MyAssistant() {
+const [messages, setMessages] = useState<AiChatMessage[]>([]);
+const [input, setInput] = useState('');
+const [streaming, setStreaming] = useState(false);
+
+async function onSubmit(values: AiChatSubmitValues) {
+  if (!values.text.trim()) return;
+  const userMsg: AiChatMessage = {
+    id: \`u-\${Date.now()}\`,
+    role: 'user',
+    authorName: 'You',
+    parts: [{ type: 'text', content: values.text }],
+  };
+  const placeholder: AiChatMessage = {
+    id: \`a-\${Date.now()}\`,
+    role: 'assistant',
+    pending: true,
+    parts: [],
+  };
+  setMessages((prev) => [...prev, userMsg, placeholder]);
+  setInput('');
+  setStreaming(true);
+
+  // Wire this to YOUR backend / model API.
+  const reply = await fetch('/api/chat', {
+    method: 'POST',
+    body: JSON.stringify({ text: values.text }),
+  }).then((r) => r.json());
+
+  setMessages((prev) =>
+    prev.map((m) =>
+      m.id === placeholder.id
+        ? { ...m, pending: false, parts: [{ type: 'text', content: reply.text }] }
+        : m,
+    ),
+  );
+  setStreaming(false);
+}
+
+return (
+  <AiChat
+    agent={{ name: 'Atlas', icon: Bot, tone: 'primary', status: 'idle' }}
+    messages={messages}
+    inputValue={input}
+    onInputChange={setInput}
+    onSubmit={onSubmit}
+    onStop={() => setStreaming(false)}
+    streaming={streaming}
+  />
+);
+}`}),(0,I.jsxs)(t.p,{children:[(0,I.jsx)(t.strong,{children:`Slots.`}),` Every region is a slot via the `,(0,I.jsx)(t.code,{children:`slots`}),` prop: `,(0,I.jsx)(t.code,{children:`header`}),`,
+`,(0,I.jsx)(t.code,{children:`intro`}),`, `,(0,I.jsx)(t.code,{children:`belowMessages`}),`, `,(0,I.jsx)(t.code,{children:`empty`}),`, `,(0,I.jsx)(t.code,{children:`queue`}),`, `,(0,I.jsx)(t.code,{children:`suggestions`}),`, `,(0,I.jsx)(t.code,{children:`input`}),`, plus
+a `,(0,I.jsx)(t.code,{children:`renderMessage(message, ctx)`}),` render-prop for fully custom message
+chrome. Anything you don't pass falls back to the library default.`]}),(0,I.jsxs)(t.p,{children:[(0,I.jsx)(t.strong,{children:`Strings.`}),` `,(0,I.jsx)(t.code,{children:`strings`}),` is a deep-partial of `,(0,I.jsx)(t.code,{children:`AiChatStrings`}),` covering
+the conversation, prompt input, queue, suggestions, and per-message
+copy (`,(0,I.jsx)(t.code,{children:`Copy`}),`, `,(0,I.jsx)(t.code,{children:`Regenerate`}),`, etc.). Map your i18n into it at the call
+site — the library never reaches for a `,(0,I.jsx)(t.code,{children:`useI18n()`}),` hook.`]}),(0,I.jsxs)(t.p,{children:[(0,I.jsx)(t.strong,{children:`Headless mode.`}),` For a fully custom layout, build directly against
+the partials (`,(0,I.jsx)(t.code,{children:`AiChatConversation`}),`, `,(0,I.jsx)(t.code,{children:`AiChatPromptInput`}),`,
+`,(0,I.jsx)(t.code,{children:`AiChatEmptyState`}),`, …) and use the `,(0,I.jsx)(t.code,{children:`useAiChatScroll`}),` hook to keep the
+auto-stick-to-bottom behaviour.`]})]}),(0,I.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,I.jsx)(T,{name:`Default`,source:Q,children:(0,I.jsx)(q,{})}),(0,I.jsx)(T,{name:`Streaming`,source:Q,children:(0,I.jsx)(J,{})}),(0,I.jsx)(T,{name:`Empty`,source:Q,children:(0,I.jsx)(Y,{})}),(0,I.jsx)(T,{name:`WithSlots`,source:Q,children:(0,I.jsx)(X,{})}),(0,I.jsx)(T,{name:`Headless`,source:Q,children:(0,I.jsx)(Z,{})})]}),(0,I.jsxs)(s,{title:`API`,id:`api`,children:[(0,I.jsx)(t.h4,{children:`AiChat`}),(0,I.jsx)(F,{component:`AiChat`}),(0,I.jsx)(t.h4,{children:`AiChatConversation`}),(0,I.jsx)(F,{component:`AiChatConversation`}),(0,I.jsx)(t.h4,{children:`AiChatMessage`}),(0,I.jsx)(F,{component:`AiChatMessage`}),(0,I.jsx)(t.h4,{children:`AiChatPromptInput`}),(0,I.jsx)(F,{component:`AiChatPromptInput`}),(0,I.jsx)(t.h4,{children:`AiChatEmptyState`}),(0,I.jsx)(F,{component:`AiChatEmptyState`}),(0,I.jsx)(t.h4,{children:`AiChatQueue`}),(0,I.jsx)(F,{component:`AiChatQueue`}),(0,I.jsx)(t.h4,{children:`AiChatSuggestionsRow`}),(0,I.jsx)(F,{component:`AiChatSuggestionsRow`}),(0,I.jsx)(t.h4,{children:`AiChatAttachmentsStrip`}),(0,I.jsx)(F,{component:`AiChatAttachmentsStrip`})]}),(0,I.jsx)(s,{title:`Notes`,id:`notes`,children:(0,I.jsxs)(t.ul,{children:[`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.strong,{children:`The library does NOT call any LLM.`}),` `,(0,I.jsx)(t.code,{children:`onSubmit`}),` is a callback —
+hook it to your backend, your `,(0,I.jsx)(t.code,{children:`tRPC`}),` mutation, your worker queue,
+whatever produces assistant messages. The library only renders.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.strong,{children:`Messages are fully controlled.`}),` `,(0,I.jsx)(t.code,{children:`pending: true`}),` swaps the bubble
+for the shimmer placeholder; flip it off and pass real `,(0,I.jsx)(t.code,{children:`parts`}),` when
+the assistant turn lands.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsxs)(t.strong,{children:[`Use `,(0,I.jsx)(t.code,{children:`useAiChatScroll`}),` for headless layouts.`]}),` It exposes
+`,(0,I.jsx)(t.code,{children:`containerRef`}),`, `,(0,I.jsx)(t.code,{children:`endRef`}),`, `,(0,I.jsx)(t.code,{children:`isAtBottom`}),`, and `,(0,I.jsx)(t.code,{children:`scrollToBottom`}),` so a
+custom shell keeps the same auto-stick-to-bottom behaviour as
+`,(0,I.jsx)(t.code,{children:`<AiChat>`}),`.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsxs)(t.strong,{children:[`Streaming UI is driven by the `,(0,I.jsx)(t.code,{children:`streaming`}),` prop`]}),`, not by message
+state — toggle it around your network call so the prompt input
+shows the stop button.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.strong,{children:`Attachments are staged client-side.`}),` The library does not upload
+anything; `,(0,I.jsx)(t.code,{children:`onAttach`}),` is your hook to open a file picker (or drop
+zone) and update the controlled `,(0,I.jsx)(t.code,{children:`attachments`}),` array.`]}),`
+`,(0,I.jsxs)(t.li,{children:[(0,I.jsx)(t.strong,{children:`Every partial is exported.`}),` If the default layout doesn't fit,
+compose `,(0,I.jsx)(t.code,{children:`AiChatConversation`}),` / `,(0,I.jsx)(t.code,{children:`AiChatPromptInput`}),` /
+`,(0,I.jsx)(t.code,{children:`AiChatEmptyState`}),` / `,(0,I.jsx)(t.code,{children:`AiChatQueue`}),` / `,(0,I.jsx)(t.code,{children:`AiChatSuggestionsRow`}),` /
+`,(0,I.jsx)(t.code,{children:`AiChatAttachmentsStrip`}),` directly — same data shape, full control
+over the chrome.`]}),`
+`]})})]})}function Ce(e={}){let{wrapper:t}=e.components||{};return t?(0,I.jsx)(t,{...e,children:(0,I.jsx)(Se,{...e})}):Se(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Ce as default};