admin-ui-starter-kit 0.4.2 → 0.4.4

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

@@ -1,568 +0,0 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,Tr as i,hr as a,kr as o,mr as s,n as c,r as l,t as u,yr as d}from"./example-BIrQab7K.js";import{a as f,c as p,i as m,l as h,n as g,o as _,r as v,s as y,t as b,u as x}from"./ai-artifact-CUAlhcSX.js";import{t as S}from"./arrow-down-CYh_aUsd.js";import{t as C}from"./arrow-up-BhmQRZs9.js";import{t as w}from"./bot-5Ro5Dayc.js";import{t as T}from"./chart-column-DjAyOA-t.js";import{t as E}from"./database-BVwSMeGM.js";import{t as D}from"./file-text-D3AE37vP.js";import{t as ee}from"./paperclip-CDMZ_JAo.js";import{t as O}from"./sparkles-DFJmoAFP.js";import{n as k,r as A,t as j}from"./ai-tool-call-BaJx1rR4.js";import{t as M}from"./x-BqJnRkKw.js";import{a as te,i as ne,k as N,n as P,s as re}from"./index-Cz4UGUT2.js";import{t as F}from"./props-table-BR-KjRNe.js";import{t as ie}from"./icon-badge-CxvxB8Vd.js";import{t as ae}from"./textarea-BGHGV17m.js";var oe=te(`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=te(`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=re();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)(p,{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:i,empty:a,disableAutoScroll:o,className:s,strings:c}){let u=N(le,c),{containerRef:d,endRef:f,isAtBottom:p,scrollToBottom:m}=z({dependency:e.length,disableAutoScroll:o}),h=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:d,className:`flex-1 overflow-y-auto px-3 py-4 sm:px-4`,children:[!!n&&(0,I.jsx)(`div`,{className:`mb-4`,children:n}),h?a??(0,I.jsx)(`div`,{className:`flex h-full items-center justify-center px-6 py-12`,children:(0,I.jsx)(r,{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))}),!!i&&(0,I.jsx)(`div`,{className:`mt-4`,children:i}),(0,I.jsx)(`div`,{ref:f,"aria-hidden":!0,className:`h-px`})]}),!p&&(0,I.jsx)(`div`,{className:`pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2`,children:(0,I.jsxs)(l,{type:`button`,variant:`secondary`,buttonStyle:`solid`,"aria-label":u.scrollToBottomAria,onClick:()=>m(`smooth`),className:P(`pointer-events-auto rounded-full shadow-md`,`border border-border/60`),children:[(0,I.jsx)(S,{className:`size-3.5`}),u.scrollToBottom]})})]})}B.displayName=`AiChatConversation`;function V({title:e=`Start a conversation`,description:t,icon:n=O,below:a,className:o}){return(0,I.jsxs)(`div`,{className:P(`flex h-full flex-col items-center justify-center gap-3 px-4 py-10 text-center`,o),children:[(0,I.jsx)(ie,{icon:n,tone:`primary`,size:`md`,shape:`square`}),(0,I.jsxs)(`div`,{className:`max-w-md space-y-1`,children:[(0,I.jsx)(i,{tag:`h4`,children:e}),!!t&&(0,I.jsx)(r,{type:`secondary`,children:t})]}),!!a&&(0,I.jsx)(`div`,{className:`mt-4 w-full max-w-2xl`,children:a})]})}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)(x,{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)(r,{children:e.content});case`reasoning`:return(0,I.jsx)(m,{streaming:e.streaming,durationSeconds:e.durationSeconds,children:e.content});case`chain-of-thought`:return(0,I.jsx)(v,{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)(h,{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)(f,{sources:e.items,variant:e.variant,defaultExpanded:e.defaultExpanded});case`task`:return(0,I.jsx)(g,{task:e.task});case`artifact`:return(0,I.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,I.jsx)(_,{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:i,streaming:a=!1,disabled:o=!1,attachments:s=[],onRemoveAttachment:c,onAttach:u,showAttach:d,leadingActions:f,trailingActions:p,hideHint:m=!1,minRows:h=1,maxRows:g=8,autoFocus:_=!1,className:v,strings:y}){let b=N(ce,y),x=(0,R.useRef)(null),S=!a&&!o&&(e.trim().length>0||s.length>0),w=(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(),w())},[w]),E=d??!!u,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`,o&&`opacity-60 pointer-events-none`,v),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:h,maxRows:g,autoFocus:_,disabled:o,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:[f,E&&(0,I.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":b.attachAria,onClick:u,disabled:o,children:(0,I.jsx)(ee,{className:`size-4`})}),(0,I.jsxs)(`div`,{className:`ml-auto flex items-center gap-1`,children:[p,a?(0,I.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`solid`,size:`icon-sm`,"aria-label":b.stopAria,onClick:i,children:(0,I.jsx)(se,{className:`size-3.5 fill-current`})}):(0,I.jsx)(l,{type:`button`,variant:`primary`,buttonStyle:`solid`,size:`icon-sm`,"aria-label":b.submitAria,onClick:w,disabled:!S,children:(0,I.jsx)(C,{className:`size-4`})})]})]}),!m&&(0,I.jsx)(`div`,{className:`px-3 pb-2`,children:(0,I.jsx)(r,{size:`xxs`,type:`discrete`,children:me(b.hint,{submitKey:D,newlineKey:`⇧↩`})})})]})}U.displayName=`AiChatPromptInput`;function _e({items:e,hideHeader:t=!1,onCancel:n,className:i,strings:a}){let s=N(ue,a);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`,i),children:[!t&&(0,I.jsxs)(r,{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)(o,{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)(r,{size:`xs`,className:`flex-1 truncate`,children:e.label}),(0,I.jsx)(d,{variant:t===`running`?`primary`:`secondary`,children:t===`running`?s.runningLabel:s.queuedLabel}),(!!e.onCancel||!!n)&&(0,I.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,"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:i,strings:a}){let o=N(de,a);return e.length===0?null:(0,I.jsxs)(`div`,{className:P(`flex items-center gap-2`,i),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)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:o.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)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,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)(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:o=!1,disabled:s=!1,attachments:c=[],onRemoveAttachment:l,onAttach:u,showAttach:d,agent:f,headerActions:p,queue:m=[],onCancelQueueItem:h,suggestions:g=[],onPickSuggestion:_,onMessageCopy:v,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:v?()=>v(e):void 0,onRegenerate:b?()=>b(e):void 0,onAttachmentOpen:x?t=>x(e.id,t):void 0}),[x,v,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)(y,{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:h,strings:E.queue}):null),j=C?.suggestions??(g.length>0?(0,I.jsx)(ve,{suggestions:g,onPick:_,strings:E.suggestions}):null),M=C?.input??(0,I.jsx)(U,{value:t,onChange:n,onSubmit:e=>{i?.(e),D(e=>e+1)},onStop:a,streaming:o,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)(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,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)(h,{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:ne},{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-[640px]`,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-[420px]`,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-[420px]`,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,i]=(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-[520px]`,children:(0,I.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,I.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border bg-card px-4 py-2.5`,children:[(0,I.jsx)(r,{weight:`semibold`,children:`Atlas · workspace assistant`}),(0,I.jsx)(l,{buttonStyle:`ghost`,size:`xs`,children:`Settings`})]}),belowMessages:(0,I.jsx)(`div`,{className:`border-t border-border bg-muted/30 px-4 py-2`,children:(0,I.jsx)(r,{size:`xs`,type:`secondary`,children:`Replies are generated; double-check anything before acting.`})})}})})}function Z(){let[e,t]=(0,R.useState)(``),[n,i]=(0,R.useState)(K.slice(0,2)),{containerRef:a,endRef:o,isAtBottom:s,scrollToBottom:c}=z({dependency:n.length});return(0,I.jsxs)(`div`,{className:`flex h-[520px] 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)(r,{weight:`semibold`,children:`Custom shell — built from partials`}),!s&&(0,I.jsx)(l,{buttonStyle:`ghost`,size:`xs`,onClick:()=>c(),children:`Jump to latest`})]}),(0,I.jsxs)(`div`,{ref:a,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)(r,{size:`xs`,type:`secondary`,children:[e.authorName,` · `,e.role]}),e.parts.map((e,t)=>e.type===`text`?(0,I.jsx)(r,{className:`mt-1`,children:e.content},t):null)]}),disableAutoScroll:!0}),(0,I.jsx)(`div`,{ref:o})]}),(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()&&(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,I.jsxs)(a,{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)(u,{name:`Default`,source:Q,children:(0,I.jsx)(q,{})}),(0,I.jsx)(u,{name:`Streaming`,source:Q,children:(0,I.jsx)(J,{})}),(0,I.jsx)(u,{name:`Empty`,source:Q,children:(0,I.jsx)(Y,{})}),(0,I.jsx)(u,{name:`WithSlots`,source:Q,children:(0,I.jsx)(X,{})}),(0,I.jsx)(u,{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};