{ "src/AgentPatterns.tsx": "'use client';\nimport {RiGitBranchLine,RiInfinityLine,RiDownloadCloud2Line,RiGitPullRequestLine,RiShieldCheckLine,RiUserAddLine,RiMenuLine,RiPushpinLine,RiShare2Line,RiMoreFill} from '@remixicon/react';\nimport creatorArtwork from './board-native-agents/creator-artwork.json';\nimport agentSectionCopy from './board-native-agents/source-section-copy.json';\nimport {CreatorAppearance} from './CreatorAppearance.js';\nimport {CreatorAvatar} from './CreatorAvatar.js';\nimport { UIIcon, renderIcon } from './icons.js';\nimport {useDirection} from './Direction.js';\nimport {SocialBrandMark} from './BoardExtras.js';\n\n\nimport { createContext, useContext, createElement, isValidElement, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { ReactNode, CSSProperties } from 'react';\nimport {Popover,Dialog as AriaDialog,Menu,MenuItem} from 'react-aria-components';\nimport {Select as CreatorSelect,SelectItem as CreatorSelectItem} from './board-native/components/base/select/select.js';\nimport {Switch as CreatorSwitch} from './board-native/components/base/switch/switch.js';\nimport {SegmentedControl as CreatorSegments,SegmentedControlItem as CreatorSegment} from './board-native/components/base/segmented-control/segmented-control.js';\nimport {Dropdown,DropdownTrigger,DropdownPopover,DropdownGroup,DropdownItem} from './board-native/components/base/dropdown/dropdown.js';\nimport { motion } from 'motion/react';\nimport { useMotionPreference as useReducedMotion } from './useMotionPreference.js';\nimport { Button, Checkbox, DataState, Dialog, Input, Select, Tabs } from './components.js';\nimport { FileUpload } from './ApplicationFamilies.js';\nimport type { FamilyProps } from './family-types.js';\nimport {NativeScope} from './board-native/NativeScope.js';\nimport {AgentThinking as NativeAgentThinking} from './board-native-agents/components/application/agent-thinking/agent-thinking.js';\nimport {AuthCard as NativeAuthCard,AuthMediaCarousel as NativeAuthMediaCarousel} from './board-native-agents/components/application/auth/auth-card.js';\nimport {ComposerLoader as NativeComposerLoader} from './board-native-agents/components/application/composer-loader/composer-loader.js';\nimport {NotificationCenter as NativeNotificationCenter,type NotificationCenterItem as NativeNotificationItem} from './board-native-agents/components/application/notification-center/notification-center.js';\n\n\n\nexport type PublicAgentIcon=ReactNode|React.ComponentType<{size?:number}>;\nfunction renderAgentIcon(icon:PublicAgentIcon){return typeof icon==='function'||icon&&typeof icon==='object'&&!isValidElement(icon)&&'$$typeof'in icon?createElement(icon as React.ElementType,{size:16}):typeof icon==='string'?renderIcon(icon):icon;}\n\nexport type AgentProfile = {\n name: string;\n label: string;\n description: string;\n shape:\n | 'cloud'\n | 'circle'\n | 'square'\n | 'diamond'\n | 'heart'\n | 'star'\n | 'shield'\n | 'hexagon'\n | 'pill' | 'petal' | 'flower' | 'slender' | 'pocket';\n expression: 'neutral'|'happy'|'angry'|'thinking'|'shook'|'curious'|'wink'|'sleepy'|'sad'|'worried'|'skeptical'|'focused'|'excited'|'calm'|'shy'|'confused'|'surprised';\n color: string;\n language: string;\n notify: boolean;\n speed: string;\n voice?: string;\n};\nexport const avatarExpressions:AgentProfile['expression'][]=['neutral','happy','angry','thinking','shook','curious','wink','sleepy','sad','worried','skeptical','focused','excited','calm','shy','confused'];\nexport const avatarShapes:AgentProfile['shape'][]=['petal','flower','star','heart','cloud','diamond','shield','slender','pocket'];\nexport const defaultAgent: AgentProfile = {\n name: 'Cloud engineer',\n label: 'Cloud',\n description:\n 'Helps with server architecture, cloud infrastructure and practical deployment planning.',\n shape: 'cloud',\n expression: 'happy',\n color: '#3392ff',\n language: 'Auto-detect',\n notify: true,\n speed: '1',\n};\nexport function AgentAvatar({\n shape = 'cloud',\n expression = 'happy',\n color = '#3392ff',\n name = 'Agent',\n animated = true,\n}: {\n shape?: AgentProfile['shape'];\n expression?: AgentProfile['expression'];\n color?: string;\n name?: string;\n animated?: boolean;\n}) {\n const reduce = useReducedMotion();\n return (\n \n \n \n \n \n \n \n );\n}\nconst creatorSwatchGradients=[\"radial-gradient(circle closest-side, rgb(67, 126, 247) 0%, rgb(0, 77, 233) 100%)\",\"radial-gradient(circle closest-side, rgb(39, 181, 162) 0%, rgb(0, 149, 124) 100%)\",\"radial-gradient(circle closest-side, rgb(133, 84, 246) 0%, rgb(62, 0, 205) 100%)\",\"radial-gradient(circle closest-side, rgb(227, 71, 152) 0%, rgb(211, 0, 109) 100%)\",\"radial-gradient(circle closest-side, rgb(231, 66, 65) 0%, rgb(207, 1, 0) 100%)\",\"radial-gradient(circle closest-side, rgb(244, 115, 39) 0%, rgb(216, 63, 0) 100%)\",\"radial-gradient(circle closest-side, rgb(27, 180, 206) 0%, rgb(0, 147, 173) 100%)\",\"radial-gradient(circle closest-side, rgb(136, 200, 28) 0%, rgb(106, 164, 0) 100%)\",\"radial-gradient(circle closest-side, rgb(54, 193, 92) 0%, rgb(0, 159, 19) 100%)\"];\nfunction creatorColorHsv(hex:string){\n const rgb=(/^#[0-9a-f]{6}$/i.test(hex)?hex:'#f0af93').slice(1).match(/../g)!.map(x=>parseInt(x,16)/255),max=Math.max(...rgb),min=Math.min(...rgb),d=max-min;\n const hue=!d?0:((max===rgb[0]?(rgb[1]-rgb[2])/d+(rgb[1]Math.round((c+m)*255).toString(16).padStart(2,'0')).join('');}\n/** The native browser color dialog cannot reproduce the in-editor saturation/hue controls. */\nexport function SourceColorPicker({value,disabled=false,onChange,label='Custom color',normalizeAvatar=false}:{value:string;disabled?:boolean;onChange:(value:string)=>void;label?:string;normalizeAvatar?:boolean}){\n const[open,setOpen]=useState(false),[draft,setDraft]=useState(''),trigger=useRef(null),display=normalizeAvatar&&value.toLowerCase()==='#f8b193'?'#f0af93':value,hsv=creatorColorHsv(display);\n useEffect(()=>setDraft(display),[display]);useEffect(()=>{if(disabled)setOpen(false)},[disabled]);\n const changeOpen=(next:boolean)=>{setOpen(next);if(!next)requestAnimationFrame(()=>trigger.current?.focus())};\n const change=(patch:Partial)=>{const next={...hsv,...patch};onChange(creatorHsvHex(next.h,next.s,next.v))};\n const point=(event:React.PointerEvent,area:boolean)=>{if(disabled)return;const box=event.currentTarget.getBoundingClientRect(),x=Math.max(0,Math.min(1,(event.clientX-box.left)/box.width)),y=Math.max(0,Math.min(1,(event.clientY-box.top)/box.height));change(area?{s:x*100,v:(1-y)*100}:{h:x*360})};\n const keyboard=(event:React.KeyboardEvent,area:boolean)=>{const step=event.shiftKey?10:1;let patch:Partial|undefined;if(area){if(event.key==='ArrowRight')patch={s:Math.min(100,hsv.s+step)};if(event.key==='ArrowLeft')patch={s:Math.max(0,hsv.s-step)};if(event.key==='ArrowUp')patch={v:Math.min(100,hsv.v+step)};if(event.key==='ArrowDown')patch={v:Math.max(0,hsv.v-step)};if(event.key==='Home')patch={s:0,v:100};if(event.key==='End')patch={s:100,v:0};}else{if(event.key==='ArrowRight'||event.key==='ArrowUp')patch={h:Math.min(360,hsv.h+step)};if(event.key==='ArrowLeft'||event.key==='ArrowDown')patch={h:Math.max(0,hsv.h-step)};if(event.key==='Home')patch={h:0};if(event.key==='End')patch={h:360};}if(patch){event.preventDefault();change(patch)}};\n return <>
keyboard(e,true)} onPointerDown={e=>{e.currentTarget.setPointerCapture(e.pointerId);point(e,true)}} onPointerMove={e=>{if(e.currentTarget.hasPointerCapture(e.pointerId))point(e,true)}}>
keyboard(e,false)} onPointerDown={e=>{e.currentTarget.setPointerCapture(e.pointerId);point(e,false)}} onPointerMove={e=>{if(e.currentTarget.hasPointerCapture(e.pointerId))point(e,false)}}>
{const next=e.target.value;setDraft(next);if(/^#[0-9a-f]{6}$/i.test(next))onChange(next)}} onBlur={()=>setDraft(display)} onKeyDown={e=>{if(e.key==='Enter'){e.preventDefault();if(/^#[0-9a-f]{6}$/i.test(draft))changeOpen(false)}}}/>
;\n}\nexport function AgentCreator({\n agent,\n onChange,\n disabled = false,onClose,renderAvatar,renderShape,presentation='interactive',\n}: {\n agent?: AgentProfile;\n onChange?: (agent: AgentProfile) => void;\n disabled?: boolean;onClose?:()=>void;presentation?:'interactive'|'source';\n renderAvatar?:(profile:Pick&{animated?:boolean})=>ReactNode;\n renderShape?:(shape:AgentProfile['shape'],color:string)=>ReactNode;\n}) {\n const {direction}=useDirection();\n const [local, setLocal] = useState(defaultAgent),\n [status, setStatus] = useState(''),\n [voices,setVoices]=useState([]),\n current = agent ?? local;\n const preferredVoice=voices.find(voice=>voice.name==='Alice')||voices.find(voice=>voice.default)||voices[0];\n const voiceKey=current.voice??preferredVoice?.voiceURI??'system';\n const sourceVoices=voices.filter(voice=>/^en(?:-|$)/i.test(voice.lang)).slice(0,12);\n for(const voice of voices.filter(voice=>voice.name==='Alice'||voice.voiceURI===voiceKey)){\n if(!sourceVoices.some(item=>item.voiceURI===voice.voiceURI))sourceVoices.push(voice);\n }\n useEffect(()=>{if(typeof speechSynthesis==='undefined')return;const refresh=()=>setVoices(speechSynthesis.getVoices());refresh();speechSynthesis.addEventListener('voiceschanged',refresh);return()=>speechSynthesis.removeEventListener('voiceschanged',refresh)},[]);\n const update = (patch: Partial) => {\n const next = { ...current, ...patch };\n setLocal(next);\n onChange?.(next);\n setStatus('Agent preferences updated locally.');\n };\n useEffect(\n () => () => {\n if (typeof speechSynthesis !== 'undefined') speechSynthesis.cancel();\n },\n [],\n );\n return (\n
\n

{current.name || 'Untitled agent'}

{onClose&&}
\n {presentation==='source'&&renderAvatar&&renderShape?:<>\n
\n {renderAvatar?renderAvatar(current):}\n
\n {avatarExpressions.map((expression,index)=>)}\n
\n
\n
{if(!renderShape||disabled||!['ArrowLeft','ArrowRight','Home','End'].includes(event.key))return;event.preventDefault();const index=avatarShapes.indexOf(current.shape),step=event.key==='ArrowLeft'?(direction==='rtl'?1:-1):(direction==='rtl'?-1:1),next=event.key==='Home'?0:event.key==='End'?avatarShapes.length-1:(index+step+avatarShapes.length)%avatarShapes.length;update({shape:avatarShapes[next]});const node=event.currentTarget;requestAnimationFrame(()=>node.querySelectorAll('button')[next]?.focus())}} onPointerDown={event=>{if(renderShape)event.currentTarget.dataset.dragStart=String(event.clientX)}} onPointerUp={event=>{if(!renderShape||disabled)return;const shift=event.clientX-Number(event.currentTarget.dataset.dragStart||event.clientX);if(Math.abs(shift)>24){const next=(avatarShapes.indexOf(current.shape)+(shift<0?1:-1)+avatarShapes.length)%avatarShapes.length;update({shape:avatarShapes[next]})}}}>\n {avatarShapes.map((shape,index) => (\n update({ shape })}\n >\n {renderShape?renderShape(shape,current.color):}\n \n ))}\n
\n }\n
\n {(presentation==='source'?['#8eb0f6','#a4dfe0','#b194f0','#ef95cf','#f29292','#f8c48b','#92ddf2','#d3ee96','#a3e1bd']:['#3392ff', '#00CED1', '#7847EB', '#DD3992', '#E5484D', '#EF962D', '#06B6D4', '#A3E635', '#24A46D']).map(\n (color,index) => (\n update({ color })}\n >{presentation==='source'&&<>}\n ),\n )}\n {presentation==='source'?update({color})} label=\"Custom avatar color\" normalizeAvatar/>:}\n
\n update({ name: event.target.value })}\n />\n update({ label: event.target.value })}\n />\n \n {presentation==='source'?
Languageupdate({language:String(key)})}>{['Auto-detect','English','Turkish','Spanish','French','German','Japanese','Portuguese','Hindi','Tamil','Kannada','Marathi'].map(language=>{language})}
Notifications

Show a notice when a reply is ready.

update({notify})}/>
Voice
Playback speed{const speed=[...keys][0];if(speed!==undefined)update({speed:String(speed)})}}>{['0.75','1','1.25','1.5'].map(speed=>{speed}×)}
:<> update({ language: event.target.value })}\n options={['Auto-detect', 'English', 'Hindi', 'Tamil', 'Kannada', 'Marathi'].map(\n (value) => ({ value, label: value }),\n )}\n />\n update({ notify: event.target.checked })}\n />\n {clearFeedback();setEmail(event.target.value)}}/>

{resetMessage}

\n \n );\n return (\n
\n {media&&}\n
\n {logo!==null&&
{logo??<>Helios UI}
}\n {\n setTab(value as typeof tab);\n clearFeedback();\n }}\n items={[\n {\n id: 'signin',\n label: 'Sign in',\n content: tab === 'signin' ? formContent : null,\n disabled,\n },\n {\n id: 'signup',\n label: 'Sign up',\n content: tab === 'signup' ? formContent : null,\n disabled,\n },\n {\n id: 'verify',\n label: 'Verify',\n content: tab === 'verify' ? formContent : null,\n disabled,\n },\n ]}\n />\n {footnote&&

{footnote}

}\n
\n
\n );\n}\n\nexport type AuthMediaSlide={src?:string;alt?:string;title?:string;color?:string};\nexport function AuthMediaCarousel({slides=[{title:'Build with clarity',color:'#00CED1'},{title:'Make it yours',color:'#7847EB'},{title:'Bring ideas to life',color:'#DD3992'},{title:'A system that grows',color:'#24A46D'}],interval=4000,disabled=false}:{slides?:AuthMediaSlide[];interval?:number;disabled?:boolean}){\n const [index,setIndex]=useState(0),[paused,setPaused]=useState(false),reduce=useReducedMotion();\n useEffect(()=>{if(paused||reduce!==false||disabled||slides.length<2)return;const timer=setInterval(()=>setIndex(current=>(current+1)%slides.length),Math.max(800,interval));return()=>clearInterval(timer)},[paused,reduce,disabled,slides.length,interval]);\n const current=slides[index%Math.max(1,slides.length)];if(!current)return
No artwork slides were supplied.
;\n return
{if(disabled)return;if(event.key==='ArrowRight'){event.preventDefault();setIndex((index+1)%slides.length)}if(event.key==='ArrowLeft'){event.preventDefault();setIndex((index-1+slides.length)%slides.length)}}}>
{current.src?{current.alt||''}/:
}{current.title&&

{current.title}

}
{index+1} / {slides.length}
;\n}\n\nexport type ComposerAttachmentKind='image'|'document'|'spreadsheet'|'presentation'|'code'|'video';\nexport type ComposerAttachment={id:string;name:string;kind:ComposerAttachmentKind;src?:string;progress?:number;file?:File};\nexport function ComposerAttachmentTile({attachment,onRemove,disabled=false}:{attachment:ComposerAttachment;onRemove?:()=>void;disabled?:boolean}){\n const progress=attachment.progress,preparing=progress!==undefined&&progress<100;\n return
\n {attachment.kind==='image'&&attachment.src?{`Preview:{({document:'W',spreadsheet:'X',presentation:'P',code:'',video:'▶',image:'▧'} as const)[attachment.kind]}}\n \n {preparing&&{Math.round(progress)}%}\n
{attachment.name}
\n
;\n}\nexport function ComposerAttachmentStrip({attachments,onRemove,disabled=false}:{attachments:ComposerAttachment[];onRemove?:(id:string)=>void;disabled?:boolean}){return
{attachments.map(attachment=>onRemove(attachment.id):undefined} disabled={disabled}/>)}
}\nfunction ComposerPopover({label,trigger,disabled=false,children}:{label:string;trigger:ReactNode;disabled?:boolean;children:(close:()=>void)=>ReactNode}){\n const {direction,locale}=useDirection();const [open,setOpen]=useState(false),anchor=useRef(null);\n useEffect(()=>{if(disabled)setOpen(false)},[disabled]);\n return {children(()=>setOpen(false))};\n}\nexport const COMPOSER_PERMISSIONS=[{value:'Auto',description:'Follow the application’s configured permission rules.'},{value:'Manual',description:'Ask before each action in the application.'},{value:'Plan mode',description:'Prepare a plan before requesting any action.'},{value:'Bypass all',description:'Local UI preference only; service authorization still applies.'}];\nexport function ComposerPermissionPicker({value,onChange,disabled=false,learnMoreHref,onLearnMore}:{value:string;onChange:(value:string)=>void;disabled?:boolean;learnMoreHref?:string;onLearnMore?:()=>void}){\n const name=useId();return {value==='Bypass all'&&}{value}} disabled={disabled}>{close=>

Permission

{onLearnMore?:learnMoreHref&&/^(https?:\\/\\/|\\/(?!\\/)|#)/.test(learnMoreHref)?Learn more:null}
{COMPOSER_PERMISSIONS.map(item=>)}
Learn about permissions

These controls choose application preferences. They do not grant access, approve a tool, or change service authorization in this local example.

};\n}\nexport type ComposerModelProvider={id:string;name:string;models:{id:string;name:string}[]};\n/** Provider/model labels observed in BoardUI’s public picker on26October2026. UI fixtures, not an availability or connection claim. */\nexport const COMPOSER_MODEL_PROVIDERS:ComposerModelProvider[]=[{\"id\": \"helios\", \"name\": \"Helios\", \"models\": [{\"id\": \"Helios Fast\", \"name\": \"Helios Fast\"}, {\"id\": \"Helios Balanced\", \"name\": \"Helios Balanced\"}, {\"id\": \"Helios Deep\", \"name\": \"Helios Deep\"}]}, {\"id\": \"openai\", \"name\": \"OpenAI\", \"models\": [{\"id\": \"openai/gpt-5.6-mini\", \"name\": \"GPT-5.6 Mini\"}, {\"id\": \"openai/gpt-5.6-terra\", \"name\": \"GPT-5.6 Terra\"}, {\"id\": \"openai/gpt-5.6-sol\", \"name\": \"GPT-5.6 Sol\"}, {\"id\": \"openai/gpt-5.5\", \"name\": \"GPT-5.5\"}, {\"id\": \"openai/gpt-5.5-mini\", \"name\": \"GPT-5.5 Mini\"}, {\"id\": \"openai/gpt-5.4\", \"name\": \"GPT-5.4\"}, {\"id\": \"openai/gpt-5.4-mini\", \"name\": \"GPT-5.4 Mini\"}, {\"id\": \"openai/gpt-5.4-nano\", \"name\": \"GPT-5.4 Nano\"}, {\"id\": \"openai/o5\", \"name\": \"o5\"}, {\"id\": \"openai/o5-mini\", \"name\": \"o5 Mini\"}, {\"id\": \"openai/gpt-oss-120b\", \"name\": \"GPT-OSS 120B\"}, {\"id\": \"openai/gpt-oss-20b\", \"name\": \"GPT-OSS 20B\"}]}, {\"id\": \"anthropic\", \"name\": \"Anthropic\", \"models\": [{\"id\": \"anthropic/fable-5.1\", \"name\": \"Fable 5.1\"}, {\"id\": \"anthropic/fable-5\", \"name\": \"Fable 5\"}, {\"id\": \"anthropic/opus-5\", \"name\": \"Opus 5\"}, {\"id\": \"anthropic/sonnet-5\", \"name\": \"Sonnet 5\"}, {\"id\": \"anthropic/haiku-4.5\", \"name\": \"Haiku 4.5\"}, {\"id\": \"anthropic/opus-4.1\", \"name\": \"Opus 4.1\"}, {\"id\": \"anthropic/sonnet-4.5\", \"name\": \"Sonnet 4.5\"}, {\"id\": \"anthropic/opus-4\", \"name\": \"Opus 4\"}, {\"id\": \"anthropic/sonnet-4\", \"name\": \"Sonnet 4\"}, {\"id\": \"anthropic/haiku-3.5\", \"name\": \"Haiku 3.5\"}]}, {\"id\": \"perplexity\", \"name\": \"Perplexity\", \"models\": [{\"id\": \"perplexity/sonar-pro\", \"name\": \"Sonar Pro\"}, {\"id\": \"perplexity/sonar-reasoning-pro\", \"name\": \"Sonar Reasoning Pro\"}, {\"id\": \"perplexity/sonar-reasoning\", \"name\": \"Sonar Reasoning\"}, {\"id\": \"perplexity/sonar-deep-research\", \"name\": \"Sonar Deep Research\"}, {\"id\": \"perplexity/sonar\", \"name\": \"Sonar\"}, {\"id\": \"perplexity/r1-1776\", \"name\": \"R1 1776\"}, {\"id\": \"perplexity/sonar-large\", \"name\": \"Sonar Large\"}, {\"id\": \"perplexity/sonar-small\", \"name\": \"Sonar Small\"}]}, {\"id\": \"cursor\", \"name\": \"Cursor\", \"models\": [{\"id\": \"cursor/composer-2.5\", \"name\": \"Composer 2.5\"}, {\"id\": \"cursor/composer-2\", \"name\": \"Composer 2\"}, {\"id\": \"cursor/composer-1.5\", \"name\": \"Composer 1.5\"}, {\"id\": \"cursor/composer-1\", \"name\": \"Composer 1\"}, {\"id\": \"cursor/tab-3\", \"name\": \"Tab 3\"}, {\"id\": \"cursor/tab-2\", \"name\": \"Tab 2\"}, {\"id\": \"cursor/apply-2\", \"name\": \"Apply 2\"}, {\"id\": \"cursor/fast-apply\", \"name\": \"Fast Apply\"}]}, {\"id\": \"openrouter\", \"name\": \"OpenRouter\", \"models\": [{\"id\": \"openrouter/auto-router\", \"name\": \"Auto Router\"}, {\"id\": \"openrouter/llama-4-maverick\", \"name\": \"Llama 4 Maverick\"}, {\"id\": \"openrouter/llama-4-scout\", \"name\": \"Llama 4 Scout\"}, {\"id\": \"openrouter/qwen-3.5-coder\", \"name\": \"Qwen 3.5 Coder\"}, {\"id\": \"openrouter/kimi-k2.5\", \"name\": \"Kimi K2.5\"}, {\"id\": \"openrouter/glm-5\", \"name\": \"GLM 5\"}, {\"id\": \"openrouter/deepseek-v4\", \"name\": \"DeepSeek V4\"}, {\"id\": \"openrouter/mistral-large-3\", \"name\": \"Mistral Large 3\"}, {\"id\": \"openrouter/hermes-4\", \"name\": \"Hermes 4\"}, {\"id\": \"openrouter/nemotron-ultra\", \"name\": \"Nemotron Ultra\"}]}, {\"id\": \"deepseek\", \"name\": \"DeepSeek\", \"models\": [{\"id\": \"deepseek/deepseek-v4\", \"name\": \"DeepSeek V4\"}, {\"id\": \"deepseek/deepseek-r2\", \"name\": \"DeepSeek R2\"}, {\"id\": \"deepseek/deepseek-v3.2\", \"name\": \"DeepSeek V3.2\"}, {\"id\": \"deepseek/deepseek-v3.1\", \"name\": \"DeepSeek V3.1\"}, {\"id\": \"deepseek/deepseek-r1\", \"name\": \"DeepSeek R1\"}, {\"id\": \"deepseek/deepseek-v3\", \"name\": \"DeepSeek V3\"}, {\"id\": \"deepseek/deepseek-coder-v3\", \"name\": \"DeepSeek Coder V3\"}, {\"id\": \"deepseek/deepseek-prover-v2\", \"name\": \"DeepSeek Prover V2\"}, {\"id\": \"deepseek/janus-pro\", \"name\": \"Janus Pro\"}]}, {\"id\": \"jina\", \"name\": \"Jina\", \"models\": [{\"id\": \"jina/embeddings-v4\", \"name\": \"Embeddings v4\"}, {\"id\": \"jina/embeddings-v3\", \"name\": \"Embeddings v3\"}, {\"id\": \"jina/reranker-v3\", \"name\": \"Reranker v3\"}, {\"id\": \"jina/reranker-v2\", \"name\": \"Reranker v2\"}, {\"id\": \"jina/clip-v2\", \"name\": \"CLIP v2\"}, {\"id\": \"jina/readerlm-v2\", \"name\": \"ReaderLM v2\"}, {\"id\": \"jina/colbert-v2\", \"name\": \"ColBERT v2\"}, {\"id\": \"jina/segmenter\", \"name\": \"Segmenter\"}, {\"id\": \"jina/classifier\", \"name\": \"Classifier\"}]}, {\"id\": \"ollama\", \"name\": \"Ollama\", \"models\": [{\"id\": \"ollama/llama-4-scout\", \"name\": \"Llama 4 Scout\"}, {\"id\": \"ollama/gemma-4\", \"name\": \"Gemma 4\"}, {\"id\": \"ollama/qwen-3.5\", \"name\": \"Qwen 3.5\"}, {\"id\": \"ollama/qwen-3.5-coder\", \"name\": \"Qwen 3.5 Coder\"}, {\"id\": \"ollama/phi-5\", \"name\": \"Phi 5\"}, {\"id\": \"ollama/mistral-small-4\", \"name\": \"Mistral Small 4\"}, {\"id\": \"ollama/deepseek-r2\", \"name\": \"DeepSeek R2\"}, {\"id\": \"ollama/gpt-oss-20b\", \"name\": \"GPT-OSS 20B\"}, {\"id\": \"ollama/llama-3.3\", \"name\": \"Llama 3.3\"}, {\"id\": \"ollama/nomic-embed-v2\", \"name\": \"Nomic Embed v2\"}]}, {\"id\": \"google\", \"name\": \"Google\", \"models\": [{\"id\": \"google/gemini-3.5-pro\", \"name\": \"Gemini 3.5 Pro\"}, {\"id\": \"google/gemini-3.5-flash\", \"name\": \"Gemini 3.5 Flash\"}, {\"id\": \"google/gemini-3.5-flash-lite\", \"name\": \"Gemini 3.5 Flash Lite\"}, {\"id\": \"google/gemini-3-pro\", \"name\": \"Gemini 3 Pro\"}, {\"id\": \"google/gemini-3-flash\", \"name\": \"Gemini 3 Flash\"}, {\"id\": \"google/gemini-3-flash-lite\", \"name\": \"Gemini 3 Flash Lite\"}, {\"id\": \"google/gemma-4\", \"name\": \"Gemma 4\"}, {\"id\": \"google/gemma-4-nano\", \"name\": \"Gemma 4 Nano\"}, {\"id\": \"google/imagen-5\", \"name\": \"Imagen 5\"}, {\"id\": \"google/veo-4\", \"name\": \"Veo 4\"}]}, {\"id\": \"meta\", \"name\": \"Meta\", \"models\": [{\"id\": \"meta/llama-5\", \"name\": \"Llama 5\"}, {\"id\": \"meta/llama-4-behemoth\", \"name\": \"Llama 4 Behemoth\"}, {\"id\": \"meta/llama-4-maverick\", \"name\": \"Llama 4 Maverick\"}, {\"id\": \"meta/llama-4-scout\", \"name\": \"Llama 4 Scout\"}, {\"id\": \"meta/llama-3.3-70b\", \"name\": \"Llama 3.3 70B\"}, {\"id\": \"meta/llama-3.2-vision\", \"name\": \"Llama 3.2 Vision\"}, {\"id\": \"meta/llama-3.2-3b\", \"name\": \"Llama 3.2 3B\"}, {\"id\": \"meta/code-llama-2\", \"name\": \"Code Llama 2\"}, {\"id\": \"meta/llama-guard-4\", \"name\": \"Llama Guard 4\"}]}, {\"id\": \"mistral\", \"name\": \"Mistral\", \"models\": [{\"id\": \"mistral/mistral-large-3\", \"name\": \"Mistral Large 3\"}, {\"id\": \"mistral/mistral-medium-3.5\", \"name\": \"Mistral Medium 3.5\"}, {\"id\": \"mistral/magistral-medium\", \"name\": \"Magistral Medium\"}, {\"id\": \"mistral/magistral-small\", \"name\": \"Magistral Small\"}, {\"id\": \"mistral/codestral-2\", \"name\": \"Codestral 2\"}, {\"id\": \"mistral/devstral-2\", \"name\": \"Devstral 2\"}, {\"id\": \"mistral/mistral-small-4\", \"name\": \"Mistral Small 4\"}, {\"id\": \"mistral/ministral-8b\", \"name\": \"Ministral 8B\"}, {\"id\": \"mistral/pixtral-large\", \"name\": \"Pixtral Large\"}, {\"id\": \"mistral/mistral-ocr\", \"name\": \"Mistral OCR\"}]}, {\"id\": \"xai\", \"name\": \"xAI\", \"models\": [{\"id\": \"xai/grok-5\", \"name\": \"Grok 5\"}, {\"id\": \"xai/grok-4.2\", \"name\": \"Grok 4.2\"}, {\"id\": \"xai/grok-4.1\", \"name\": \"Grok 4.1\"}, {\"id\": \"xai/grok-4-fast\", \"name\": \"Grok 4 Fast\"}, {\"id\": \"xai/grok-4-heavy\", \"name\": \"Grok 4 Heavy\"}, {\"id\": \"xai/grok-4\", \"name\": \"Grok 4\"}, {\"id\": \"xai/grok-code-fast\", \"name\": \"Grok Code Fast\"}, {\"id\": \"xai/grok-3\", \"name\": \"Grok 3\"}, {\"id\": \"xai/grok-3-mini\", \"name\": \"Grok 3 Mini\"}]}, {\"id\": \"qwen\", \"name\": \"Qwen\", \"models\": [{\"id\": \"qwen/qwen-3.5-max\", \"name\": \"Qwen 3.5 Max\"}, {\"id\": \"qwen/qwen-3.5-plus\", \"name\": \"Qwen 3.5 Plus\"}, {\"id\": \"qwen/qwen-3.5-flash\", \"name\": \"Qwen 3.5 Flash\"}, {\"id\": \"qwen/qwen-3.5-coder\", \"name\": \"Qwen 3.5 Coder\"}, {\"id\": \"qwen/qwen-3.5-vl\", \"name\": \"Qwen 3.5 VL\"}, {\"id\": \"qwen/qwen-3-235b\", \"name\": \"Qwen 3 235B\"}, {\"id\": \"qwen/qwen-3-32b\", \"name\": \"Qwen 3 32B\"}, {\"id\": \"qwen/qwen-3-omni\", \"name\": \"Qwen 3 Omni\"}, {\"id\": \"qwen/qwq-32b\", \"name\": \"QwQ 32B\"}]}, {\"id\": \"groq\", \"name\": \"Groq\", \"models\": [{\"id\": \"groq/llama-4-scout\", \"name\": \"Llama 4 Scout\"}, {\"id\": \"groq/llama-4-maverick\", \"name\": \"Llama 4 Maverick\"}, {\"id\": \"groq/kimi-k2\", \"name\": \"Kimi K2\"}, {\"id\": \"groq/gpt-oss-120b\", \"name\": \"GPT-OSS 120B\"}, {\"id\": \"groq/gpt-oss-20b\", \"name\": \"GPT-OSS 20B\"}, {\"id\": \"groq/qwen-3-32b\", \"name\": \"Qwen 3 32B\"}, {\"id\": \"groq/llama-3.3-70b\", \"name\": \"Llama 3.3 70B\"}, {\"id\": \"groq/llama-3.1-8b\", \"name\": \"Llama 3.1 8B\"}, {\"id\": \"groq/gemma-2-9b\", \"name\": \"Gemma 2 9B\"}]}, {\"id\": \"cohere\", \"name\": \"Cohere\", \"models\": [{\"id\": \"cohere/command-a\", \"name\": \"Command A\"}, {\"id\": \"cohere/command-a-reasoning\", \"name\": \"Command A Reasoning\"}, {\"id\": \"cohere/command-a-vision\", \"name\": \"Command A Vision\"}, {\"id\": \"cohere/command-r+\", \"name\": \"Command R+\"}, {\"id\": \"cohere/command-r\", \"name\": \"Command R\"}, {\"id\": \"cohere/command-r7b\", \"name\": \"Command R7B\"}, {\"id\": \"cohere/embed-v4\", \"name\": \"Embed v4\"}, {\"id\": \"cohere/rerank-v3.5\", \"name\": \"Rerank v3.5\"}, {\"id\": \"cohere/aya-expanse-32b\", \"name\": \"Aya Expanse 32B\"}]}, {\"id\": \"moonshot\", \"name\": \"Moonshot\", \"models\": [{\"id\": \"moonshot/kimi-k2.5\", \"name\": \"Kimi K2.5\"}, {\"id\": \"moonshot/kimi-k2-thinking\", \"name\": \"Kimi K2 Thinking\"}, {\"id\": \"moonshot/kimi-k2\", \"name\": \"Kimi K2\"}, {\"id\": \"moonshot/kimi-k1.5\", \"name\": \"Kimi K1.5\"}, {\"id\": \"moonshot/kimi-vl\", \"name\": \"Kimi VL\"}, {\"id\": \"moonshot/kimi-dev-72b\", \"name\": \"Kimi Dev 72B\"}, {\"id\": \"moonshot/moonshot-v1-128k\", \"name\": \"Moonshot v1 128K\"}, {\"id\": \"moonshot/moonshot-v1-32k\", \"name\": \"Moonshot v1 32K\"}]}, {\"id\": \"zhipu\", \"name\": \"Zhipu\", \"models\": [{\"id\": \"zhipu/glm-5\", \"name\": \"GLM 5\"}, {\"id\": \"zhipu/glm-4.6\", \"name\": \"GLM 4.6\"}, {\"id\": \"zhipu/glm-4.5\", \"name\": \"GLM 4.5\"}, {\"id\": \"zhipu/glm-4.5-air\", \"name\": \"GLM 4.5 Air\"}, {\"id\": \"zhipu/glm-4.5v\", \"name\": \"GLM 4.5V\"}, {\"id\": \"zhipu/glm-4-plus\", \"name\": \"GLM 4 Plus\"}, {\"id\": \"zhipu/glm-4-flash\", \"name\": \"GLM 4 Flash\"}, {\"id\": \"zhipu/cogview-4\", \"name\": \"CogView 4\"}, {\"id\": \"zhipu/codegeex-4\", \"name\": \"CodeGeeX 4\"}]}, {\"id\": \"amazon\", \"name\": \"Amazon\", \"models\": [{\"id\": \"amazon/nova-premier\", \"name\": \"Nova Premier\"}, {\"id\": \"amazon/nova-pro\", \"name\": \"Nova Pro\"}, {\"id\": \"amazon/nova-lite\", \"name\": \"Nova Lite\"}, {\"id\": \"amazon/nova-micro\", \"name\": \"Nova Micro\"}, {\"id\": \"amazon/nova-canvas\", \"name\": \"Nova Canvas\"}, {\"id\": \"amazon/nova-reel\", \"name\": \"Nova Reel\"}, {\"id\": \"amazon/nova-sonic\", \"name\": \"Nova Sonic\"}, {\"id\": \"amazon/titan-text-premier\", \"name\": \"Titan Text Premier\"}, {\"id\": \"amazon/titan-embed-v2\", \"name\": \"Titan Embed v2\"}]}];\nexport function ComposerModelPicker({value,onChange,effort:controlledEffort,onEffortChange,providers=COMPOSER_MODEL_PROVIDERS,disabled=false}:{value:string;onChange:(value:string)=>void;effort?:number;onEffortChange?:(value:number)=>void;providers?:ComposerModelProvider[];disabled?:boolean}){\n const {direction,locale}=useDirection();const [localEffort,setLocalEffort]=useState(1),effort=controlledEffort??localEffort,initial=providers.find(p=>p.models.some(m=>m.id===value)),[providerId,setProviderId]=useState(initial?.id||providers[0]?.id||''),[query,setQuery]=useState(''),[effortOpen,setEffortOpen]=useState(false),search=useRef(null),effortAnchor=useRef(null),name=useId();\n const provider=providers.find(p=>p.id===providerId)||providers[0]||{id:'empty',name:'No providers',models:[]},current=providers.flatMap(p=>p.models).find(m=>m.id===value),efforts=['Low','Medium','High','XHigh','Max','Ultra'],matches=query.trim()?providers.flatMap(p=>p.models.filter(m=>(m.name+' '+p.name).toLowerCase().includes(query.toLowerCase())).map(model=>({provider:p,model}))):provider.models.map(model=>({provider,model}));\n const changeEffort=(next:number)=>{setLocalEffort(next);onEffortChange?.(next)};useEffect(()=>{if(disabled)setEffortOpen(false)},[disabled]);\n return {current?.name||value}} disabled={disabled}>{close=>
{if(event.key==='/'&&!(event.target as HTMLElement).matches('input:not([type=radio]),textarea')){event.preventDefault();event.stopPropagation();search.current?.focus()}}}>

Models

Illustrative reference catalog · no model service connected

{providers.map((item,index)=>)}
setQuery(event.target.value)}/>
{matches.map(entry=>
{value===entry.model.id&&}
)}
{!matches.length&&

No models match this search.

}
Effort · {efforts[Math.min(5,Math.max(0,effort))]}{efforts.map((label,index)=>)}
Faster{efforts[Math.min(5,Math.max(0,effort))]}Smarter
};\n}\nexport function ComposerStatusBar({branch,project,mode,context,onBranchChange,onProjectChange,onModeChange,onContextChange,disabled=false}:{branch:string;project:string;mode:string;context:number;onBranchChange:(value:string)=>void;onProjectChange:(value:string)=>void;onModeChange:(value:string)=>void;onContextChange:(value:number)=>void;disabled?:boolean}){\n const picker=(label:string,value:string,items:string[],change:(value:string)=>void)=>{label==='Branch'?:label==='Project'?:}{value}} disabled={disabled}>{close=>

{label}

{items.map(item=>)}
};\n return
{picker('Branch',branch,['Main','Design review','Release preview'],onBranchChange)}{picker('Project',project,['helios-ui','component-library','local-example'],onProjectChange)}{picker('Agent mode',mode,['Agent','Ask','Plan'],onModeChange)}{context}%} disabled={disabled}>{()=> }
;\n}\n\nexport type ComposerMessage={id:string;text:string;model:string;permission:string;files:string[];attachments:File[];effort?:number;branch?:string;project?:string;agentMode?:string};\nexport type ComposerProps={state?:FamilyProps['state'];onRetry?:()=>void;disabled?:boolean;onSend?:(message:ComposerMessage)=>void;showAttachments?:boolean;showPanel?:boolean;showLocalMessages?:boolean;simulateAttachments?:boolean;working?:boolean;loadingLight?:boolean;onStop?:()=>void;placeholder?:string;value?:string;onValueChange?:(value:string)=>void;permission?:string;onPermissionChange?:(value:string)=>void;model?:string;onModelChange?:(value:string)=>void;effort?:number;onEffortChange?:(value:number)=>void;providers?:ComposerModelProvider[];attachments?:ComposerAttachment[];onRemoveAttachment?:(id:string)=>void;onAttachmentsChange?:(attachments:ComposerAttachment[])=>void;uploadDuration?:number;uploadGap?:number;status?:ReactNode;inputRef?:React.Ref;minRows?:number;maxRows?:number;defaultPermission?:string;learnMoreHref?:string;onLearnMore?:()=>void;onSubmit?:(text:string)=>void;onUploadComplete?:(attachment:ComposerAttachment)=>void;onAllUploaded?:()=>void};\nfunction ComposerSurface({loadingLight,children,...props}:React.HTMLAttributes&{loadingLight?:boolean}){const card=
{children}
;return loadingLight?
{card}
:card;}\nexport function Composer({state='ready',onRetry,disabled=false,onSend,showAttachments=false,showPanel=false,showLocalMessages=true,simulateAttachments=false,working:givenWorking=false,loadingLight=false,onStop,placeholder='Hi, what do you need today?',value,onValueChange,permission:controlledPermission,onPermissionChange,model:controlledModel,onModelChange,effort:controlledEffort,onEffortChange,providers=COMPOSER_MODEL_PROVIDERS,attachments:externalAttachments,onRemoveAttachment,onAttachmentsChange,uploadDuration=1100,uploadGap=240,status:statusSlot,inputRef,minRows,maxRows=10,defaultPermission='Auto',learnMoreHref,onLearnMore,onSubmit,onUploadComplete,onAllUploaded}:ComposerProps){\n const working=givenWorking||state==='loading';\n const [localDraft,setLocalDraft]=useState(''),draft=value??localDraft,[localModel,setLocalModel]=useState('Helios Fast'),model=controlledModel??localModel,[localPermission,setLocalPermission]=useState(defaultPermission),permission=controlledPermission??localPermission,[localEffort,setLocalEffort]=useState(1),effort=controlledEffort??localEffort,[files,setFiles]=useState([]),[messages,setMessages]=useState([]),[status,setStatus]=useState(''),[context,setContext]=useState(57),[branch,setBranch]=useState('Main'),[project,setProject]=useState('helios-ui'),[mode,setMode]=useState('Agent'),[attachmentOpen,setAttachmentOpen]=useState(showAttachments),[previews,setPreviews]=useState<{name:string;url:string}[]>([]),[progress,setProgress]=useState>({}),[voiceActive,setVoiceActive]=useState(false),input=useRef(null),textarea=useRef(null),recognition=useRef(null),id=useId();\n const rows=Math.max(1,minRows??(showPanel||showAttachments?3:1)),maxLines=Math.max(rows,maxRows);\n const resize=()=>{const element=textarea.current;if(!element)return;const style=getComputedStyle(element),line=parseFloat(style.lineHeight)||20,extra=parseFloat(style.paddingTop)+parseFloat(style.paddingBottom)+parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth);element.style.height='auto';element.style.minHeight=`${line*rows+extra}px`;element.style.maxHeight=`${line*maxLines+extra}px`;element.style.height=`${Math.min(line*maxLines+extra,Math.max(line*rows+extra,element.scrollHeight+parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth)))}px`;element.style.overflowY=element.scrollHeight>line*maxLines+extra?'auto':'hidden';if(!element.value){element.scrollLeft=0;element.scrollTop=0}};\n useEffect(()=>{resize();window.addEventListener('resize',resize);return()=>window.removeEventListener('resize',resize)},[draft,rows,maxLines]);\n const fileId=(file:File)=>`${file.name}:${file.size}:${file.lastModified}`;\n const changeDraft=(next:string)=>{setLocalDraft(next);onValueChange?.(next)};\n const imageFiles=[...new Map([...files,...(externalAttachments?.flatMap(item=>item.file?[item.file]:[])||[])].filter(file=>file.type.startsWith('image/')).map(file=>[fileId(file),file])).values()],imageKey=imageFiles.map(fileId).join('|');\n useEffect(()=>{const next=imageFiles.map(file=>({name:fileId(file),url:URL.createObjectURL(file)}));setPreviews(next);return()=>next.forEach(item=>URL.revokeObjectURL(item.url))},[imageKey]);\n useEffect(()=>()=>recognition.current?.abort(),[]);\n useEffect(()=>{if(state==='empty')setMessages([])},[state]);\n const kindOf=(file:File):ComposerAttachmentKind=>file.type.startsWith('image/')?'image':file.type.startsWith('video/')?'video':/\\.(csv|xlsx?|ods)$/i.test(file.name)?'spreadsheet':/\\.(pptx?|key|odp)$/i.test(file.name)?'presentation':/\\.(tsx?|jsx?|json|css|html|py|java|md)$/i.test(file.name)?'code':'document';\n const attachments=externalAttachments?.map(item=>({...item,src:item.src||(item.file?previews.find(preview=>preview.name===fileId(item.file!))?.url:undefined),...(simulateAttachments&&item.progress===0?{progress:progress[item.id]??0}:{})}))??files.map(file=>({id:fileId(file),name:file.name,kind:kindOf(file),src:previews.find(item=>item.name===fileId(file))?.url,progress:progress[fileId(file)]??0,file}));\n const pending=externalAttachments?undefined:files.find(file=>(progress[fileId(file)]??0)<100),pendingId=externalAttachments?(simulateAttachments?attachments.find(item=>externalAttachments.find(source=>source.id===item.id)?.progress===0&&(item.progress??100)<100)?.id||'':''):pending?fileId(pending):'';\n useEffect(()=>{if(!pendingId)return;const interval=45,increment=100*interval/Math.max(100,uploadDuration);let timer:ReturnType|undefined;const delay=setTimeout(()=>{timer=setInterval(()=>setProgress(old=>({...old,[pendingId]:Math.min(100,(old[pendingId]??0)+increment)})),interval)},completedIds.current.size?Math.max(0,uploadGap):0);return()=>{clearTimeout(delay);clearInterval(timer)}},[pendingId,uploadDuration,uploadGap]);\n const completedIds=useRef(new Set()),allCompleted=useRef(false);\n useEffect(()=>{for(const item of attachments){if(item.progress===100&&!completedIds.current.has(item.id)){completedIds.current.add(item.id);onUploadComplete?.(item)}}const complete=attachments.length>0&&attachments.every(item=>item.progress===undefined||item.progress>=100);if(complete&&!allCompleted.current){allCompleted.current=true;setStatus(current=>/^Preparing (?:remaining )?local attachments\\./.test(current)?'All local attachments are ready. No remote upload was performed.':current);onAllUploaded?.()}if(!complete)allCompleted.current=false},[attachments,onUploadComplete,onAllUploaded]);\n const addFiles=(incoming:File[])=>{if(disabled||working)return;const errors:string[]=[],accepted=incoming.filter(file=>{if(file.size>10*1024*1024){errors.push(`${file.name} exceeds 10 MB.`);return false}if(file.type&&!(/^(image\\/(png|jpeg|webp|gif|svg\\+xml)|video\\/(mp4|webm|quicktime)|text\\/.+|application\\/(pdf|json|javascript|msword|vnd\\..+))$/i.test(file.type)||file.type==='application/octet-stream'&&/\\.(tsx?|jsx?|json|css|html|py|java|md)$/i.test(file.name))){errors.push(`${file.name} has an unsupported MIME type.`);return false}if(!/\\.(png|jpe?g|webp|gif|svg|pdf|txt|md|csv|docx?|xlsx?|pptx?|key|tsx?|jsx?|json|css|html|py|java|mp4|webm|mov)$/i.test(file.name)){errors.push(`${file.name} is not a supported attachment type.`);return false}return true});const merged=[...files];accepted.forEach(file=>{if(!merged.some(item=>fileId(item)===fileId(file)))merged.push(file)});if(merged.length>8)errors.push('Up to 8 attachments fit this local example.');setFiles(merged.slice(0,8));if(externalAttachments)onAttachmentsChange?.([...externalAttachments,...accepted.map(file=>({id:fileId(file),name:file.name,kind:kindOf(file),file,...(simulateAttachments?{progress:0}:{})}))].slice(0,8));setStatus(errors.join(' ')||'Preparing local attachments. No remote upload is running.');setAttachmentOpen(false)};\n const remove=(attachmentId:string)=>{const remaining=attachments.filter(item=>item.id!==attachmentId);setStatus(remaining.some(item=>item.progress!==undefined&&item.progress<100)?'Preparing remaining local attachments. No remote upload is running.':remaining.length?'Remaining local attachments are ready. No remote upload was performed.':'Attachment removed locally. No remote upload was performed.');if(externalAttachments){onRemoveAttachment?.(attachmentId);onAttachmentsChange?.(externalAttachments.filter(item=>item.id!==attachmentId));}else {setFiles(old=>old.filter(file=>fileId(file)!==attachmentId));setProgress(old=>{const next={...old};delete next[attachmentId];return next});completedIds.current.delete(attachmentId)}};\n const submit=()=>{if(disabled||working||!draft.trim())return;const message:ComposerMessage={id:String(Date.now()),text:draft.trim(),model,permission,files:attachments.map(item=>item.name),attachments:attachments.flatMap(item=>item.file?[item.file]:[]),effort,branch,project,agentMode:mode};if(showLocalMessages)setMessages(old=>[...old,message]);changeDraft('');setStatus('Added to this local example. No AI or external service was contacted.');onSend?.(message);onSubmit?.(message.text)};\n const statusBar=;\n const renderedStatus=statusSlot===undefined?statusBar:statusSlot;\n return
\n {showPanel&&renderedStatus&&
{renderedStatus}
}\n {state==='empty'&&!messages.length&&

Start a local conversation. Your draft stays editable.

}\n {state==='error'&&
Message could not complete

Your draft is preserved. No provider request is running.

{onRetry&&}
}\n {if(!disabled&&!working){event.preventDefault();event.dataTransfer.dropEffect='copy'}}} onDrop={event=>{event.preventDefault();addFiles(Array.from(event.dataTransfer.files))}}>\n {attachments.length>0&&}\n {attachmentOpen&&
Images, documents, spreadsheets, presentations, code and video · 10 MB each
}\n {addFiles(Array.from(event.target.files||[]));event.target.value=''}}/>\n