admin-ui-starter-kit 0.1.4 → 0.4.3

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

@@ -1,568 +0,0 @@
-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};