admin-ui-starter-kit 0.1.3 → 0.1.4

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

@@ -0,0 +1,568 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Or as i,Sr as a,Tr as o,gr as s,hr as c,mr as l,n as u,r as d,t as f}from"./example-C6-_Sy6B.js";import{a as p,c as m,i as h,l as g,n as _,o as v,r as y,s as ee,t as b,u as x}from"./ai-artifact-CQL5krnJ.js";import{t as S}from"./arrow-down-BpVaq9-H.js";import{t as C}from"./arrow-up-BpWEnkdX.js";import{t as w}from"./bot-Bcx5mNAQ.js";import{t as T}from"./chart-column-6Tn3WAT9.js";import{t as E}from"./database-DeGR0hed.js";import{t as D}from"./file-text-BIi71mZ1.js";import{t as te}from"./paperclip-CDxdf8Os.js";import{t as O}from"./sparkles-BEa1AgNq.js";import{n as ne,r as k,t as A}from"./ai-tool-call-D9AsaWJF.js";import{t as j}from"./x-CE8oevyh.js";import{D as M,a as re,n as ie,r as N}from"./index-B8DVXCmf.js";import{t as P}from"./props-table-CM_1cocj.js";import{t as ae}from"./icon-badge-Bcm8TlJi.js";import{t as oe}from"./textarea-CV5gNzXf.js";var se=N(`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`}]]),ce=N(`square`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}]]),le={placeholder:`Ask anything…`,attachAria:`Attach files`,submitAria:`Send message`,stopAria:`Stop generating`,modelPickerAria:`Choose model`,hint:`Press {{submitKey}} to send · {{newlineKey}} for newline`},ue={scrollToBottom:`Jump to latest`,scrollToBottomAria:`Scroll to bottom`},de={header:`In queue`,cancelAria:`Remove from queue`,queuedLabel:`Queued`,runningLabel:`Running`},fe={header:`Try`},pe={pending:`Thinking…`},me={prompt:le,conversation:ue,queue:de,suggestions:fe,message:pe,emptyTitle:`Start a conversation`,emptyDescription:`Ask a question, share context, or attach a file to get going.`};function he(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}var F=re();function I({attachments:e,onRemove:t,onOpen:n,className:r}){return e.length===0?null:(0,F.jsx)(`div`,{className:o(`flex flex-wrap gap-2`,r),children:e.map(e=>(0,F.jsx)(m,{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))})}I.displayName=`AiChatAttachmentsStrip`;var L=t(n(),1);function R({threshold:e=80,dependency:t,disableAutoScroll:n=!1}={}){let r=(0,L.useRef)(null),i=(0,L.useRef)(null),[a,o]=(0,L.useState)(!0),s=(0,L.useCallback)((e=`smooth`)=>{i.current?.scrollIntoView({behavior:e,block:`end`})},[]);return(0,L.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,L.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 z({messages:e,renderMessage:t,intro:n,footer:i,empty:a,disableAutoScroll:s,className:c,strings:l}){let u=M(ue,l),{containerRef:f,endRef:p,isAtBottom:m,scrollToBottom:h}=R({dependency:e.length,disableAutoScroll:s}),g=e.length===0&&!n;return(0,F.jsxs)(`div`,{className:o(`relative flex h-full min-h-0 flex-col`,c),children:[(0,F.jsxs)(`div`,{ref:f,className:`flex-1 overflow-y-auto px-3 py-4 sm:px-4`,children:[!!n&&(0,F.jsx)(`div`,{className:`mb-4`,children:n}),g?a??(0,F.jsx)(`div`,{className:`flex h-full items-center justify-center px-6 py-12`,children:(0,F.jsx)(r,{type:`secondary`,children:`No messages yet.`})}):(0,F.jsx)(`ol`,{className:`space-y-4`,children:e.map((n,r)=>(0,F.jsx)(`li`,{children:t(n,{isLast:r===e.length-1,index:r})},n.id))}),!!i&&(0,F.jsx)(`div`,{className:`mt-4`,children:i}),(0,F.jsx)(`div`,{ref:p,"aria-hidden":!0,className:`h-px`})]}),!m&&(0,F.jsx)(`div`,{className:`pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2`,children:(0,F.jsxs)(d,{type:`button`,variant:`secondary`,buttonStyle:`solid`,"aria-label":u.scrollToBottomAria,onClick:()=>h(`smooth`),className:o(`pointer-events-auto rounded-full shadow-md`,`border border-border/60`),children:[(0,F.jsx)(S,{className:`size-3.5`}),u.scrollToBottom]})})]})}z.displayName=`AiChatConversation`;function B({title:e=`Start a conversation`,description:t,icon:n=O,below:i,className:s}){return(0,F.jsxs)(`div`,{className:o(`flex h-full flex-col items-center justify-center gap-3 px-4 py-10 text-center`,s),children:[(0,F.jsx)(ae,{icon:n,tone:`primary`,size:`md`,shape:`square`}),(0,F.jsxs)(`div`,{className:`max-w-md space-y-1`,children:[(0,F.jsx)(a,{tag:`h4`,children:e}),!!t&&(0,F.jsx)(r,{type:`secondary`,children:t})]}),!!i&&(0,F.jsx)(`div`,{className:`mt-4 w-full max-w-2xl`,children:i})]})}B.displayName=`AiChatEmptyState`;function V({message:e,onCopy:t,onRegenerate:n,onAttachmentOpen:r,className:i,strings:a}){let s=M(pe,a),c=[],l=[];for(let t of e.parts)t.type===`text`?c.push(t):l.push(t);let u=c.map(e=>e.type===`text`?e.plain??H(e.content):``).filter(Boolean).join(`
+`)||void 0,d=e.pending?(0,F.jsx)(x,{children:s.pending}):c.length===0&&l.length>0?null:(0,F.jsx)(`div`,{className:`space-y-2`,children:c.map((e,t)=>e.type===`text`?(0,F.jsx)(`div`,{className:`whitespace-pre-wrap`,children:e.content},t):null)});return(0,F.jsxs)(`div`,{className:o(`space-y-2`,i),children:[(d!==null||e.pending)&&(0,F.jsx)(ne,{role:e.role,avatar:e.avatar,authorName:e.authorName,timestamp:e.timestamp,plainText:u,loading:e.loading,onCopy:u?t??(()=>void 0):void 0,onRegenerate:n,children:d}),l.length>0&&(0,F.jsx)(`div`,{className:o(`space-y-2`,e.role===`user`?`pr-9 sm:pl-12`:`pl-9 sm:pr-12`),children:l.map((e,t)=>(0,F.jsx)(ge,{part:e,onAttachmentOpen:r},t))}),!!e.trailing&&(0,F.jsx)(`div`,{className:o(e.role===`user`?`pr-9 sm:pl-12`:`pl-9 sm:pr-12`),children:e.trailing})]})}V.displayName=`AiChatMessage`;function ge({part:e,onAttachmentOpen:t}){switch(e.type){case`text`:return(0,F.jsx)(r,{children:e.content});case`reasoning`:return(0,F.jsx)(h,{streaming:e.streaming,durationSeconds:e.durationSeconds,children:e.content});case`chain-of-thought`:return(0,F.jsx)(y,{steps:e.steps,streaming:e.streaming});case`tool`:return(0,F.jsx)(A,{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,F.jsx)(g,{code:e.code,language:e.language,filename:e.filename,showLineNumbers:e.showLineNumbers,highlightLines:e.highlightLines});case`attachments`:return(0,F.jsx)(I,{attachments:e.items,onOpen:t?e=>t(e.id):void 0});case`sources`:return(0,F.jsx)(p,{sources:e.items,variant:e.variant,defaultExpanded:e.defaultExpanded});case`task`:return(0,F.jsx)(_,{task:e.task});case`artifact`:return(0,F.jsx)(b,{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,F.jsx)(v,{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,F.jsx)(F.Fragment,{children:e.render()});default:return null}}function H(e){return typeof e==`string`||typeof e==`number`?String(e):Array.isArray(e)?e.map(H).join(``):``}function U({value:e,onChange:t,onSubmit:n,onStop:i,streaming:a=!1,disabled:s=!1,attachments:c=[],onRemoveAttachment:l,onAttach:u,showAttach:f,leadingActions:p,trailingActions:m,hideHint:h=!1,minRows:g=1,maxRows:_=8,autoFocus:v=!1,className:y,strings:ee}){let b=M(le,ee),x=(0,L.useRef)(null),S=!a&&!s&&(e.trim().length>0||c.length>0),w=(0,L.useCallback)(()=>{S&&n?.({text:e,attachments:c})},[S,n,e,c]),T=(0,L.useCallback)(e=>{e.key===`Enter`&&!e.shiftKey&&!e.nativeEvent.isComposing&&(e.preventDefault(),w())},[w]),E=f??!!u,D=typeof navigator<`u`&&navigator.platform?.toLowerCase().includes(`mac`)?`⌘↩`:`↩`;return(0,F.jsxs)(`div`,{className:o(`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`,s&&`opacity-60 pointer-events-none`,y),children:[c.length>0&&(0,F.jsx)(`div`,{className:`border-b border-border/60 p-2`,children:(0,F.jsx)(I,{attachments:c,onRemove:l})}),(0,F.jsx)(oe,{ref:x,value:e,onChange:e=>t(e.target.value),onKeyDown:T,placeholder:b.placeholder,autoResize:!0,minRows:g,maxRows:_,autoFocus:v,disabled:s,className:o(`!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 resize-none px-3 py-2.5`)}),(0,F.jsxs)(`div`,{className:`flex items-center gap-1 border-t border-border/60 px-2 py-1.5`,children:[p,E&&(0,F.jsx)(d,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":b.attachAria,onClick:u,disabled:s,children:(0,F.jsx)(te,{className:`size-4`})}),(0,F.jsxs)(`div`,{className:`ml-auto flex items-center gap-1`,children:[m,a?(0,F.jsx)(d,{type:`button`,variant:`secondary`,buttonStyle:`solid`,size:`icon-sm`,"aria-label":b.stopAria,onClick:i,children:(0,F.jsx)(ce,{className:`size-3.5 fill-current`})}):(0,F.jsx)(d,{type:`button`,variant:`primary`,buttonStyle:`solid`,size:`icon-sm`,"aria-label":b.submitAria,onClick:w,disabled:!S,children:(0,F.jsx)(C,{className:`size-4`})})]})]}),!h&&(0,F.jsx)(`div`,{className:`px-3 pb-2`,children:(0,F.jsx)(r,{size:`xxs`,type:`discrete`,children:he(b.hint,{submitKey:D,newlineKey:`⇧↩`})})})]})}U.displayName=`AiChatPromptInput`;function _e({items:e,hideHeader:t=!1,onCancel:n,className:a,strings:c}){let l=M(de,c);return e.length===0?null:(0,F.jsxs)(`div`,{className:o(`rounded-lg border border-border/60 bg-muted/20 px-2.5 py-2`,a),children:[!t&&(0,F.jsxs)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`mb-1.5 px-1 uppercase tracking-wider`,children:[l.header,` · `,e.length]}),(0,F.jsx)(`ul`,{className:`space-y-1`,children:e.map(e=>{let t=e.status??`queued`;return(0,F.jsxs)(`li`,{className:`flex items-center gap-2 rounded-md bg-card px-2 py-1.5`,children:[t===`running`?(0,F.jsx)(i,{className:`size-3.5 shrink-0 animate-spin text-primary`}):(0,F.jsx)(`span`,{"aria-hidden":!0,className:`size-2 shrink-0 rounded-full bg-muted-foreground/50`}),(0,F.jsx)(r,{size:`xs`,className:`flex-1 truncate`,children:e.label}),(0,F.jsx)(s,{variant:t===`running`?`primary`:`secondary`,children:t===`running`?l.runningLabel:l.queuedLabel}),(!!e.onCancel||!!n)&&(0,F.jsx)(d,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,"aria-label":l.cancelAria,onClick:()=>{e.onCancel?.(),n?.(e.id)},children:(0,F.jsx)(j,{className:`size-3.5`})})]},e.id)})})]})}_e.displayName=`AiChatQueue`;function ve({suggestions:e,onPick:t,hideHeader:n=!1,className:i,strings:a}){let s=M(fe,a);return e.length===0?null:(0,F.jsxs)(`div`,{className:o(`flex items-center gap-2`,i),children:[!n&&(0,F.jsxs)(`div`,{className:`inline-flex shrink-0 items-center gap-1.5`,children:[(0,F.jsx)(O,{className:`size-3.5 text-muted-foreground`}),(0,F.jsx)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:s.header})]}),(0,F.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,F.jsxs)(`button`,{type:`button`,onClick:()=>t?.(e),className:o(`inline-flex shrink-0 items-center 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`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),children:[!!n&&(0,F.jsx)(n,{className:`size-3 text-muted-foreground`}),(0,F.jsx)(r,{tag:`span`,size:`xs`,weight:`medium`,children:e.label})]},e.id)})})]})}ve.displayName=`AiChatSuggestionsRow`;function W({messages:e,inputValue:t,onInputChange:n,onSubmit:i,onStop:a,streaming:s=!1,disabled:c=!1,attachments:l=[],onRemoveAttachment:u,onAttach:d,showAttach:f,agent:p,headerActions:m,queue:h=[],onCancelQueueItem:g,suggestions:_=[],onPickSuggestion:v,onMessageCopy:y,onMessageRegenerate:b,onAttachmentOpen:x,disableAutoScroll:S,slots:C,strings:w,className:T}){let E=M(me,w),[,D]=(0,L.useState)(0),te=(0,L.useCallback)((e,t)=>C?.renderMessage?C.renderMessage(e,t):(0,F.jsx)(V,{className:`ai-chat--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??(p?(0,F.jsxs)(`div`,{className:`flex items-center gap-3 border-b border-border bg-card px-3 py-2 sm:px-4`,children:[(0,F.jsx)(ee,{name:p.name,icon:p.icon,avatar:p.avatar,subtitle:p.subtitle,tone:p.tone,status:p.status,variant:`inline`}),!!m&&(0,F.jsx)(`div`,{className:`ml-auto flex items-center gap-1`,children:m})]}):null),ne=C?.empty??(e.length===0?(0,F.jsx)(B,{title:E.emptyTitle,description:E.emptyDescription}):null),k=C?.queue??(h.length>0?(0,F.jsx)(_e,{items:h,onCancel:g,strings:E.queue}):null),A=C?.suggestions??(_.length>0?(0,F.jsx)(ve,{suggestions:_,onPick:v,strings:E.suggestions}):null),j=C?.input??(0,F.jsx)(U,{value:t,onChange:n,onSubmit:e=>{i?.(e),D(e=>e+1)},onStop:a,streaming:s,disabled:c,attachments:l,onRemoveAttachment:u,onAttach:d,showAttach:f,strings:E.prompt});return(0,F.jsxs)(`div`,{className:o(`flex h-full flex-col overflow-hidden rounded-xl border border-border bg-background`,T),children:[O,(0,F.jsx)(z,{messages:e,renderMessage:te,intro:C?.intro,footer:C?.belowMessages,empty:ne,disableAutoScroll:S,strings:E.conversation}),(k||A||j)&&(0,F.jsxs)(`div`,{className:`border-t border-border bg-card/60`,children:[k&&(0,F.jsx)(`div`,{className:`px-3 pb-2 pt-3 sm:px-4`,children:k}),A&&(0,F.jsx)(`div`,{className:o(`px-3 sm:px-4`,!k&&`pt-3`,`pb-2`),children:A}),j&&(0,F.jsx)(`div`,{className:`px-3 pb-3 pt-2 sm:px-4 sm:pb-4`,children:j})]}),c&&(0,F.jsx)(r,{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:w,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,F.jsx)(k,{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,F.jsx)(g,{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:T},{id:`invoice`,label:`Overdue reminder draft`,icon:D},{id:`lookup`,label:`Find similar customers`,icon:ie},{id:`refund`,label:`Refund policy explainer`,icon:se},{id:`analytics`,label:`Build a SQL query`,icon:E}];function q(){let[e,t]=(0,L.useState)(K),[n,r]=(0,L.useState)(``),[i,a]=(0,L.useState)(!1),[o,s]=(0,L.useState)([]);return(0,F.jsx)(`div`,{className:`h-[640px]`,children:(0,F.jsx)(W,{agent:G,messages:e,inputValue:n,onInputChange:r,onSubmit:(0,L.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,F.jsx)(`div`,{className:`h-[420px]`,children:(0,F.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,L.useState)(``);return(0,F.jsx)(`div`,{className:`h-[420px]`,children:(0,F.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,L.useState)(``),[n,i]=(0,L.useState)([{id:`q1`,label:`Generate weekly KPI digest`,status:`running`},{id:`q2`,label:`Draft refund email to customer #2941`,status:`queued`}]);return(0,F.jsx)(`div`,{className:`h-[520px]`,children:(0,F.jsx)(W,{messages:K.slice(0,2),inputValue:e,onInputChange:t,queue:n,onCancelQueueItem:e=>i(t=>t.filter(t=>t.id!==e)),slots:{header:(0,F.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border bg-card px-4 py-2.5`,children:[(0,F.jsx)(r,{weight:`semibold`,children:`Atlas · workspace assistant`}),(0,F.jsx)(d,{buttonStyle:`ghost`,size:`xs`,children:`Settings`})]}),belowMessages:(0,F.jsx)(`div`,{className:`border-t border-border bg-muted/30 px-4 py-2`,children:(0,F.jsx)(r,{size:`xs`,type:`secondary`,children:`Replies are generated; double-check anything before acting.`})})}})})}function Z(){let[e,t]=(0,L.useState)(``),[n,i]=(0,L.useState)(K.slice(0,2)),{containerRef:a,endRef:o,isAtBottom:s,scrollToBottom:c}=R({dependency:n.length});return(0,F.jsxs)(`div`,{className:`flex h-[520px] flex-col overflow-hidden rounded-xl border border-border bg-background`,children:[(0,F.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border px-4 py-2`,children:[(0,F.jsx)(r,{weight:`semibold`,children:`Custom shell — built from partials`}),!s&&(0,F.jsx)(d,{buttonStyle:`ghost`,size:`xs`,onClick:()=>c(),children:`Jump to latest`})]}),(0,F.jsxs)(`div`,{ref:a,className:`flex-1 overflow-y-auto px-4 py-3`,children:[n.length===0?(0,F.jsx)(B,{title:`Nothing yet`,description:`Send a message to begin.`}):(0,F.jsx)(z,{messages:n,renderMessage:e=>(0,F.jsxs)(`div`,{className:`rounded-md border border-border bg-card/60 p-3`,children:[(0,F.jsxs)(r,{size:`xs`,type:`secondary`,children:[e.authorName,` · `,e.role]}),e.parts.map((e,t)=>e.type===`text`?(0,F.jsx)(r,{className:`mt-1`,children:e.content},t):null)]}),disableAutoScroll:!0}),(0,F.jsx)(`div`,{ref:o})]}),(0,F.jsx)(`div`,{className:`border-t border-border px-4 py-3`,children:(0,F.jsx)(U,{value:e,onChange:t,onSubmit:e=>{e.text.trim()&&(i(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-[640px]">
+			<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-[420px]">
+			<AiChat
+				agent={AGENT}
+				messages={messages}
+				inputValue=""
+				onInputChange={() => {}}
+				streaming
+				onStop={() => {}}
+			/>
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/*  3. Empty state                                                     */
+/* ------------------------------------------------------------------ */
+
+export function Empty() {
+	const [input, setInput] = useState('');
+	return (
+		<div className="h-[420px]">
+			<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-[520px]">
+			<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="xs">
+								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-[520px] 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="xs"
+						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,F.jsxs)(c,{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,F.jsxs)(l,{title:`Overview`,id:`overview`,children:[(0,F.jsxs)(t.p,{children:[(0,F.jsx)(t.code,{children:`AiChat`}),` is a controlled chat shell. The library does `,(0,F.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,F.jsx)(t.p,{children:`The consumer wires:`}),(0,F.jsxs)(t.ul,{children:[`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.code,{children:`messages`}),` — the controlled message list (you append on submit, you
+flip `,(0,F.jsx)(t.code,{children:`pending`}),` off when the assistant turn completes).`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.code,{children:`inputValue`}),` / `,(0,F.jsx)(t.code,{children:`onInputChange`}),` — controlled prompt input.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.code,{children:`onSubmit(values)`}),` — fires on Enter / send. Hook this to your model
+endpoint, tRPC mutation, queue producer, etc.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.code,{children:`onStop`}),` — fires when the user clicks the stop button while
+`,(0,F.jsx)(t.code,{children:`streaming`}),` is true.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.code,{children:`attachments`}),` + `,(0,F.jsx)(t.code,{children:`onAttach`}),` / `,(0,F.jsx)(t.code,{children:`onRemoveAttachment`}),` — staged composer
+attachments. The library never touches storage.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.code,{children:`queue`}),`, `,(0,F.jsx)(t.code,{children:`suggestions`}),`, `,(0,F.jsx)(t.code,{children:`onMessageRegenerate`}),`, `,(0,F.jsx)(t.code,{children:`onMessageCopy`}),` —
+optional callbacks for the surrounding surfaces.`]}),`
+`]})]}),(0,F.jsxs)(l,{title:`How to use`,id:`how-to-use`,children:[(0,F.jsxs)(t.p,{children:[`The canonical mount: controlled state, callback-driven submission, no
+framework SDKs. Drop this in any consumer app and wire `,(0,F.jsx)(t.code,{children:`onSubmit`}),` to
+whatever produces assistant messages.`]}),(0,F.jsx)(u,{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,F.jsxs)(t.p,{children:[(0,F.jsx)(t.strong,{children:`Slots.`}),` Every region is a slot via the `,(0,F.jsx)(t.code,{children:`slots`}),` prop: `,(0,F.jsx)(t.code,{children:`header`}),`,
+`,(0,F.jsx)(t.code,{children:`intro`}),`, `,(0,F.jsx)(t.code,{children:`belowMessages`}),`, `,(0,F.jsx)(t.code,{children:`empty`}),`, `,(0,F.jsx)(t.code,{children:`queue`}),`, `,(0,F.jsx)(t.code,{children:`suggestions`}),`, `,(0,F.jsx)(t.code,{children:`input`}),`, plus
+a `,(0,F.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,F.jsxs)(t.p,{children:[(0,F.jsx)(t.strong,{children:`Strings.`}),` `,(0,F.jsx)(t.code,{children:`strings`}),` is a deep-partial of `,(0,F.jsx)(t.code,{children:`AiChatStrings`}),` covering
+the conversation, prompt input, queue, suggestions, and per-message
+copy (`,(0,F.jsx)(t.code,{children:`Copy`}),`, `,(0,F.jsx)(t.code,{children:`Regenerate`}),`, etc.). Map your i18n into it at the call
+site — the library never reaches for a `,(0,F.jsx)(t.code,{children:`useI18n()`}),` hook.`]}),(0,F.jsxs)(t.p,{children:[(0,F.jsx)(t.strong,{children:`Headless mode.`}),` For a fully custom layout, build directly against
+the partials (`,(0,F.jsx)(t.code,{children:`AiChatConversation`}),`, `,(0,F.jsx)(t.code,{children:`AiChatPromptInput`}),`,
+`,(0,F.jsx)(t.code,{children:`AiChatEmptyState`}),`, …) and use the `,(0,F.jsx)(t.code,{children:`useAiChatScroll`}),` hook to keep the
+auto-stick-to-bottom behaviour.`]})]}),(0,F.jsxs)(l,{title:`Examples`,id:`examples`,children:[(0,F.jsx)(f,{name:`Default`,source:Q,children:(0,F.jsx)(q,{})}),(0,F.jsx)(f,{name:`Streaming`,source:Q,children:(0,F.jsx)(J,{})}),(0,F.jsx)(f,{name:`Empty`,source:Q,children:(0,F.jsx)(Y,{})}),(0,F.jsx)(f,{name:`WithSlots`,source:Q,children:(0,F.jsx)(X,{})}),(0,F.jsx)(f,{name:`Headless`,source:Q,children:(0,F.jsx)(Z,{})})]}),(0,F.jsxs)(l,{title:`API`,id:`api`,children:[(0,F.jsx)(t.h4,{children:`AiChat`}),(0,F.jsx)(P,{component:`AiChat`}),(0,F.jsx)(t.h4,{children:`AiChatConversation`}),(0,F.jsx)(P,{component:`AiChatConversation`}),(0,F.jsx)(t.h4,{children:`AiChatMessage`}),(0,F.jsx)(P,{component:`AiChatMessage`}),(0,F.jsx)(t.h4,{children:`AiChatPromptInput`}),(0,F.jsx)(P,{component:`AiChatPromptInput`}),(0,F.jsx)(t.h4,{children:`AiChatEmptyState`}),(0,F.jsx)(P,{component:`AiChatEmptyState`}),(0,F.jsx)(t.h4,{children:`AiChatQueue`}),(0,F.jsx)(P,{component:`AiChatQueue`}),(0,F.jsx)(t.h4,{children:`AiChatSuggestionsRow`}),(0,F.jsx)(P,{component:`AiChatSuggestionsRow`}),(0,F.jsx)(t.h4,{children:`AiChatAttachmentsStrip`}),(0,F.jsx)(P,{component:`AiChatAttachmentsStrip`})]}),(0,F.jsx)(l,{title:`Notes`,id:`notes`,children:(0,F.jsxs)(t.ul,{children:[`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.strong,{children:`The library does NOT call any LLM.`}),` `,(0,F.jsx)(t.code,{children:`onSubmit`}),` is a callback —
+hook it to your backend, your `,(0,F.jsx)(t.code,{children:`tRPC`}),` mutation, your worker queue,
+whatever produces assistant messages. The library only renders.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.strong,{children:`Messages are fully controlled.`}),` `,(0,F.jsx)(t.code,{children:`pending: true`}),` swaps the bubble
+for the shimmer placeholder; flip it off and pass real `,(0,F.jsx)(t.code,{children:`parts`}),` when
+the assistant turn lands.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsxs)(t.strong,{children:[`Use `,(0,F.jsx)(t.code,{children:`useAiChatScroll`}),` for headless layouts.`]}),` It exposes
+`,(0,F.jsx)(t.code,{children:`containerRef`}),`, `,(0,F.jsx)(t.code,{children:`endRef`}),`, `,(0,F.jsx)(t.code,{children:`isAtBottom`}),`, and `,(0,F.jsx)(t.code,{children:`scrollToBottom`}),` so a
+custom shell keeps the same auto-stick-to-bottom behaviour as
+`,(0,F.jsx)(t.code,{children:`<AiChat>`}),`.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsxs)(t.strong,{children:[`Streaming UI is driven by the `,(0,F.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,F.jsxs)(t.li,{children:[(0,F.jsx)(t.strong,{children:`Attachments are staged client-side.`}),` The library does not upload
+anything; `,(0,F.jsx)(t.code,{children:`onAttach`}),` is your hook to open a file picker (or drop
+zone) and update the controlled `,(0,F.jsx)(t.code,{children:`attachments`}),` array.`]}),`
+`,(0,F.jsxs)(t.li,{children:[(0,F.jsx)(t.strong,{children:`Every partial is exported.`}),` If the default layout doesn't fit,
+compose `,(0,F.jsx)(t.code,{children:`AiChatConversation`}),` / `,(0,F.jsx)(t.code,{children:`AiChatPromptInput`}),` /
+`,(0,F.jsx)(t.code,{children:`AiChatEmptyState`}),` / `,(0,F.jsx)(t.code,{children:`AiChatQueue`}),` / `,(0,F.jsx)(t.code,{children:`AiChatSuggestionsRow`}),` /
+`,(0,F.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,F.jsx)(t,{...e,children:(0,F.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};