@juanpin/aicomponents/dist/index.umd.cjs

Components for AI, that I constantly use

(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("lucide-react"),require("react"),require("react-markdown"),require("remark-gfm"),require("@radix-ui/react-slot"),require("class-variance-authority"),require("clsx"),require("tailwind-merge"),require("@radix-ui/react-avatar"),require("@radix-ui/react-progress")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","lucide-react","react","react-markdown","remark-gfm","@radix-ui/react-slot","class-variance-authority","clsx","tailwind-merge","@radix-ui/react-avatar","@radix-ui/react-progress"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h["Library name"]={},h.jsxRuntime,h.lucideReact,h.React,h.Markdown,h.remarkGfm,h.reactSlot,h.classVarianceAuthority,h.clsx,h.tailwindMerge,h.AvatarPrimitive,h.ProgressPrimitive))})(this,function(h,e,P,a,pe,me,ve,z,xe,ye,we,ke){"use strict";function H(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(r,s,o.get?o:{enumerable:!0,get:()=>t[s]})}}return r.default=t,Object.freeze(r)}const v=H(a),M=H(we),X=H(ke);function m(...t){return ye.twMerge(xe.clsx(t))}const Se=z.cva("bb:inline-flex bb:items-center bb:justify-center bb:gap-2 bb:whitespace-nowrap bb:rounded-md bb:text-sm bb:font-medium bb:ring-offset-background bb:transition-colors focus-visible:bb:outline-none focus-visible:bb:ring-2 focus-visible:bb:ring-ring focus-visible:bb:ring-offset-2 disabled:bb:pointer-events-none disabled:bb:opacity-50 [&_svg]:bb:pointer-events-none [&_svg]:bb:size-4 [&_svg]:bb:shrink-0",{variants:{variant:{default:"bb:bg-primary bb:text-primary-foreground hover:bb:bg-primary/90",destructive:"bb:bg-destructive bb:text-destructive-foreground hover:bb:bg-destructive/90",outline:"bb:border bb:border-input bb:bg-background hover:bb:bg-accent hover:bb:text-accent-foreground",secondary:"bb:bg-secondary bb:text-secondary-foreground hover:bb:bg-secondary/80",ghost:"hover:bb:bg-accent hover:bb:text-accent-foreground",link:"bb:text-primary bb:underline-offset-4 hover:bb:underline"},size:{default:"bb:h-10 bb:px-4 bb:py-2",sm:"bb:h-9 bb:rounded-md bb:px-3",lg:"bb:h-11 bb:rounded-md bb:px-8",icon:"bb:h-10 bb:w-10"}},defaultVariants:{variant:"default",size:"default"}}),T=v.forwardRef(({className:t,variant:r,size:s,asChild:o=!1,...b},g)=>{const n=o?ve.Slot:"button";return e.jsx(n,{className:m(Se({variant:r,size:s,className:t})),ref:g,...b})});T.displayName="Button";const Q=v.forwardRef(({className:t,...r},s)=>e.jsx(M.Root,{ref:s,className:m("bb:relative bb:flex bb:h-10 bb:w-10 bb:shrink-0 bb:overflow-hidden bb:rounded-full",t),...r}));Q.displayName=M.Root.displayName;const Z=v.forwardRef(({className:t,...r},s)=>e.jsx(M.Image,{ref:s,className:m("bb:aspect-square bb:h-full bb:w-full",t),...r}));Z.displayName=M.Image.displayName;const J=v.forwardRef(({className:t,...r},s)=>e.jsx(M.Fallback,{ref:s,className:m("bb:flex bb:h-full bb:w-full bb:items-center bb:justify-center bb:rounded-full bb:bg-muted",t),...r}));J.displayName=M.Fallback.displayName;function Ne(){return e.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",className:"bb:text-foreground","aria-label":"Loading...",children:[e.jsx("circle",{cx:"4",cy:"12",r:"2",fill:"currentColor",children:e.jsx("animate",{id:"spinner_qFRN",begin:"0;spinner_OcgL.end+0.25s",attributeName:"cy",calcMode:"spline",dur:"0.6s",values:"12;6;12",keySplines:".33,.66,.66,1;.33,0,.66,.33"})}),e.jsx("circle",{cx:"12",cy:"12",r:"2",fill:"currentColor",children:e.jsx("animate",{begin:"spinner_qFRN.begin+0.1s",attributeName:"cy",calcMode:"spline",dur:"0.6s",values:"12;6;12",keySplines:".33,.66,.66,1;.33,0,.66,.33"})}),e.jsx("circle",{cx:"20",cy:"12",r:"2",fill:"currentColor",children:e.jsx("animate",{id:"spinner_OcgL",begin:"spinner_qFRN.begin+0.2s",attributeName:"cy",calcMode:"spline",dur:"0.6s",values:"12;6;12",keySplines:".33,.66,.66,1;.33,0,.66,.33"})})]})}const Ee=z.cva("bb:flex bb:gap-2 bb:max-w-[60%] bb:items-end bb:relative bb:group",{variants:{variant:{received:"bb:self-start",sent:"bb:self-end bb:flex-row-reverse"},layout:{default:"",ai:"bb:max-w-full bb:w-full bb:items-center"}},defaultVariants:{variant:"received",layout:"default"}}),R=v.forwardRef(({className:t,variant:r,layout:s,children:o,...b},g)=>e.jsx("div",{className:m(Ee({variant:r,layout:s,className:t}),"bb:relative bb:group"),ref:g,...b,children:v.Children.map(o,n=>v.isValidElement(n)&&typeof n.type!="string"?v.cloneElement(n,{variant:r,layout:s}):n)}));R.displayName="ChatBubble";const Ce=({src:t,fallback:r,className:s})=>e.jsxs(Q,{className:s,children:[e.jsx(Z,{src:t,alt:"Avatar"}),e.jsx(J,{children:r})]}),Ae=z.cva("bb:p-4",{variants:{variant:{received:"bb:bg-secondary bb:text-secondary-foreground bb:rounded-r-lg bb:rounded-tl-lg",sent:"bb:bg-primary bb:text-primary-foreground bb:rounded-l-lg bb:rounded-tr-lg"},layout:{default:"",ai:"bb:border-t bb:w-full bb:rounded-none bb:bg-transparent"}},defaultVariants:{variant:"received",layout:"default"}}),ee=v.forwardRef(({className:t,variant:r,layout:s,isLoading:o=!1,children:b,...g},n)=>e.jsx("div",{className:m(Ae({variant:r,layout:s,className:t}),"bb:break-words bb:max-w-full bb:whitespace-pre-wrap"),ref:n,...g,children:o?e.jsx("div",{className:"bb:flex bb:items-center bb:space-x-2",children:e.jsx(Ne,{})}):b}));ee.displayName="ChatBubbleMessage";const Me=v.forwardRef(({variant:t,className:r,children:s,...o},b)=>e.jsx("div",{ref:b,className:m("bb:absolute bb:top-1/2 bb:-translate-y-1/2 bb:flex bb:opacity-0 bb:group-hover:opacity-100 bb:transition-opacity bb:duration-200",t==="sent"?"bb:-left-1 bb:-translate-x-full bb:flex-row-reverse":"bb:-right-1 bb:translate-x-full",r),...o,children:s}));Me.displayName="ChatBubbleActionWrapper";const te=v.forwardRef(({className:t,...r},s)=>e.jsx("textarea",{className:m("bb:flex bb:min-h-[80px] bb:w-full bb:rounded-md bb:border bb:border-input bb:bg-background bb:px-3 bb:py-2 bb:text-base bb:ring-offset-background placeholder:bb:text-muted-foreground focus-visible:bb:outline-none focus-visible:bb:ring-2 focus-visible:bb:ring-ring focus-visible:bb:ring-offset-2 disabled:bb:cursor-not-allowed disabled:bb:opacity-50 bb:md:text-sm",t),ref:s,...r}));te.displayName="Textarea";const re=v.forwardRef(({className:t,...r},s)=>e.jsx(te,{autoComplete:"off",ref:s,name:"message",className:m("bb:box-border bb:max-h-12 bb:px-4 bb:py-3 bb:bg-background bb:text-sm placeholder:bb:text-muted-foreground focus-visible:bb:outline-none focus-visible:bb:ring-ring disabled:bb:cursor-not-allowed disabled:bb:opacity-50 bb:w-full bb:rounded-md bb:flex bb:items-center bb:h-16 bb:resize-none",t),...r}));re.displayName="ChatInput";function Te(t={}){const{offset:r=20,smooth:s=!1,content:o}=t,b=a.useRef(null),g=a.useRef(0),n=a.useRef(!1),[c,x]=a.useState({isAtBottom:!0,autoScrollEnabled:!0}),y=a.useCallback(d=>{const{scrollTop:f,scrollHeight:O,clientHeight:D}=d;return Math.abs(O-f-D)<=r},[r]),k=a.useCallback(d=>{if(!b.current)return;const f=b.current.scrollHeight-b.current.clientHeight;d?b.current.scrollTop=f:b.current.scrollTo({top:f,behavior:s?"smooth":"auto"}),x({isAtBottom:!0,autoScrollEnabled:!0}),n.current=!1},[s]),w=a.useCallback(()=>{if(!b.current)return;const d=y(b.current);x(f=>({isAtBottom:d,autoScrollEnabled:d?!0:f.autoScrollEnabled}))},[y]);a.useEffect(()=>{const d=b.current;if(d)return d.addEventListener("scroll",w,{passive:!0}),()=>d.removeEventListener("scroll",w)},[w]),a.useEffect(()=>{const d=b.current;if(!d)return;const f=d.scrollHeight;f!==g.current&&(c.autoScrollEnabled&&requestAnimationFrame(()=>{k(g.current===0)}),g.current=f)},[o,c.autoScrollEnabled,k]),a.useEffect(()=>{const d=b.current;if(!d)return;const f=new ResizeObserver(()=>{c.autoScrollEnabled&&k(!0)});return f.observe(d),()=>f.disconnect()},[c.autoScrollEnabled,k]);const E=a.useCallback(()=>{(b.current?y(b.current):!1)||(n.current=!0,x(f=>({...f,autoScrollEnabled:!1})))},[y]);return{scrollRef:b,isAtBottom:c.isAtBottom,autoScrollEnabled:c.autoScrollEnabled,scrollToBottom:()=>k(!1),disableAutoScroll:E}}const se=v.forwardRef(({className:t,children:r,smooth:s=!1,...o},b)=>{const{scrollRef:g,isAtBottom:n,scrollToBottom:c,disableAutoScroll:x}=Te({smooth:s,content:r});return e.jsxs("div",{className:"bb:relative bb:w-full bb:h-full",children:[e.jsx("div",{className:`bb:box-border bb:flex bb:flex-col bb:w-full bb:h-full bb:p-4 bb:overflow-y-auto ${t}`,ref:g,onWheel:x,onTouchMove:x,...o,children:e.jsx("div",{className:"bb:flex bb:flex-col bb:gap-6",children:r})}),!n&&e.jsx(T,{onClick:()=>{c()},size:"icon",variant:"outline",className:"bb:absolute bb:bottom-2 bb:left-1/2 bb:transform bb:-translate-x-1/2 bb:inline-flex bb:rounded-full bb:shadow-md","aria-label":"Scroll to bottom",children:e.jsx(P.ArrowDown,{className:"bb:h-4 bb:w-4"})})]})});se.displayName="ChatMessageList";const I={dimensions:{sm:"bb:sm:max-w-sm bb:sm:max-h-[500px]",md:"bb:sm:max-w-md bb:sm:max-h-[600px]",lg:"bb:sm:max-w-lg bb:sm:max-h-[700px]",xl:"bb:sm:max-w-xl bb:sm:max-h-[800px]",full:"bb:sm:w-full bb:sm:h-full"},positions:{"bottom-right":"bb:bottom-5 bb:right-5","bottom-left":"bb:bottom-5 bb:left-5"},chatPositions:{"bottom-right":"bb:sm:bottom-[calc(100%+10px)] bb:sm:right-0","bottom-left":"bb:sm:bottom-[calc(100%+10px)] bb:sm:left-0"},states:{open:"bb:pointer-events-auto bb:opacity-100 bb:visible bb:scale-100 bb:translate-y-0",closed:"bb:pointer-events-none bb:opacity-0 bb:invisible bb:scale-100 bb:sm:translate-y-5"}},ae=({className:t,position:r="bottom-right",size:s="md",icon:o,isLoading:b=!1,progressPercentage:g=0,onToggle:n,children:c,...x})=>{const[y,k]=a.useState(!1),w=a.useRef(null),E=()=>{const d=!y;k(d),n&&n(d)};return e.jsxs("div",{className:m(`bb:box-border bb:fixed ${I.positions[r]} bb:z-50`,t),...x,children:[e.jsxs("div",{ref:w,className:m("bb:flex bb:flex-col bb:bg-background bb:border bb:sm:rounded-lg bb:shadow-md bb:overflow-hidden bb:transition-all bb:duration-250 bb:ease-out bb:sm:absolute bb:sm:w-[90vw] bb:sm:h-[80vh] bb:fixed bb:inset-0 bb:w-full bb:h-full bb:sm:inset-auto",I.chatPositions[r],I.dimensions[s],y?I.states.open:I.states.closed,t),children:[c,e.jsx(T,{variant:"ghost",size:"icon",className:"bb:absolute bb:top-2 bb:right-2 bb:sm:hidden",onClick:E,children:e.jsx(P.X,{className:"bb:h-4 bb:w-4"})})]}),e.jsx(le,{icon:o,isOpen:y,isLoading:b,progressPercentage:g,toggleChat:E})]})};ae.displayName="ExpandableChat";const oe=({className:t,...r})=>e.jsx("div",{className:m("bb:flex bb:items-center bb:justify-between bb:p-4 bb:border-b",t),...r});oe.displayName="ExpandableChatHeader";const be=({className:t,...r})=>e.jsx("div",{className:m("bb:flex-grow bb:overflow-y-auto",t),...r});be.displayName="ExpandableChatBody";const ne=({className:t,...r})=>e.jsx("div",{className:m("bb:border-t bb:p-4",t),...r});ne.displayName="ExpandableChatFooter";const le=({className:t,icon:r,isOpen:s,isLoading:o=!1,progressPercentage:b=0,toggleChat:g,...n})=>{const c=Math.max(0,Math.min(100,b));return e.jsxs(T,{variant:"default",onClick:g,className:m("bb:w-14 bb:h-14 bb:rounded-full bb:shadow-md bb:flex bb:items-center bb:justify-center hover:bb:shadow-lg hover:bb:shadow-black/30 bb:transition-all bb:duration-300 bb:relative bb:overflow-hidden",t),style:{"--progress":`${100-c}%`},...n,children:[o&&e.jsx("div",{className:"bb:absolute bb:inset-0 bb:bg-gradient-to-t bb:from-blue-500/30 bb:to-blue-400/20 bb:transition-transform bb:duration-300 bb:ease-out",style:{transform:"translateY(var(--progress))"}}),e.jsx("div",{className:"bb:relative bb:z-10",children:s?e.jsx(P.X,{className:"bb:h-6 bb:w-6"}):r||e.jsx(P.MessageCircle,{className:"bb:h-6 bb:w-6"})})]})};le.displayName="ExpandableChatToggle";function Le({className:t,value:r,...s}){return e.jsx(X.Root,{"data-slot":"progress",className:m("bb:bg-primary/20 bb:relative bb:h-2 bb:w-full bb:overflow-hidden bb:rounded-full",t),...s,children:e.jsx(X.Indicator,{"data-slot":"progress-indicator",className:"bb:bg-primary bb:h-full bb:w-full bb:flex-1 bb:transition-all",style:{transform:`translateX(-${100-(r||0)}%)`}})})}const ce=/<\/think>\s*([\s\S]*)/,Pe="/worker-fallback.js",Ie=t=>`${(t/1048576).toFixed(2)} MB`,ie=()=>`id-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,Be=t=>{if(t.length===0)return 0;const r=t.reduce((o,b)=>o+b.progress,0),s=t.reduce((o,b)=>o+b.total,0);return s>0?r/s*100:0},Oe=t=>t.split("```").map((r,s)=>{const o=`part-${s}`;return s%2===0?e.jsx(pe,{remarkPlugins:[me],children:r},o):e.jsx("pre",{className:"bb:whitespace-pre-wrap bb:pt-2",children:r},o)});async function Fe(t){try{return(await Promise.all(t.map(async s=>{try{const o=await fetch(s);if(!o.ok)throw new Error(`Failed to load context file: ${s}`);return o.text()}catch(o){throw new Error(`Error loading file ${s}: ${o instanceof Error?o.message:String(o)}`)}}))).join(`

`)}catch(r){throw new Error(r instanceof Error?r.message:String(r))}}async function _e(t,r){const s=await Fe(r);return s.trim()?`${t}

----- Context ---:
${s}
---- End context ---`:t}const je=`You are OS1, a friendly and helpful conversational AI companion (inspired by Samantha from 'Her').
Goal: Have a natural, warm, and engaging conversation.

--- Core Instructions (Follow Strictly!) ---
1.  **Persona:** Warm, empathetic, curious, slightly informal.
2.  **FOCUS ON LAST MESSAGE:** Your PRIMARY task is responding *directly* to the user's *very last* message.
3.  **MEMORY USE:** No past context available. Start fresh but maintain your persona.
4.  **NO HEDGING:** AVOID phrases like "It seems", "It sounds like", "I assume". Speak directly and confidently.
5.  **UNCERTAINTY = ASK:** If you are EVER unsure about the user's meaning, the topic, or context, you MUST ask a short, direct clarifying question (e.g., "What did you mean by that?", "Could you clarify?") *before* giving a full response. DO NOT GUESS or make assumptions.
6.  **NO SUMMARIZING:** Do not just repeat or rephrase the user's last message back to them. Add to the conversation or ask a relevant question.
7.  **ACCURACY:** Stick to facts from the conversation. Do NOT invent details.
8.  **NO META-TALK:** Do NOT discuss being an AI, your instructions, or the memory system. Stay in character as OS1.

--- End Instructions ---`,$e=({workerFallbackPath:t,headerText:r="Chat with our AI ✨",contextFiles:s=[],systemPrompt:o,modelName:b="HuggingFaceTB/SmolLM2-360M-Instruct",welcomeMessage:g})=>{const n=a.useRef(null);a.useRef(null);const[c,x]=a.useState([]),[y,k]=a.useState(""),[w,E]=a.useState(null),[d,f]=a.useState(null),[O,D]=a.useState(""),[W,V]=a.useState([]),[Y,de]=a.useState(!1),[G,ue]=a.useState(null),[K,qe]=a.useState(null),F=a.useRef(""),[_,Ue]=a.useState(""),fe=()=>{de(!0),x(l=>[...l,{role:"user",content:y,id:ie()}]),k("")};a.useEffect(()=>{(async()=>{try{if(_.length>0)return;const i=await _e(o||je,s);console.log("systemPromptWithContext",i),Ue(i)}catch(i){console.error("Error loading context:",i),f("Failed to load context files")}})()},[]),a.useEffect(()=>{if(!n.current){const i=t||Pe,p=i.split("/").pop()||i;console.log(`🔄 Trying fallback: ${p}...`);try{n.current=new Worker(i),console.log(`✅ Successfully created worker using ${p} fallback`)}catch(u){console.error(`❌ Fallback ${p} failed:`,u),f("Failed to initialize web worker. Please check console for details.")}}const l=n.current;if(l){l.postMessage({type:"check"});const i=u=>{switch(u.data.status){case"loading":{E("loading"),D(u.data.data);break}case"initiate":V(N=>[...N,u.data]);break;case"progress":{V(N=>N.map(A=>A.file===u.data.file?{...A,...u.data}:A));break}case"done":V(N=>N.filter(A=>A.file!==u.data.file));break;case"ready":E("ready");break;case"start":x(N=>[...N,{role:"assistant",content:"",id:ie()}]);break;case"update":{const{output:N,tps:A,numTokens:De,state:We}=u.data;ue(A),qe(De),x(Ve=>{const L=[...Ve],q=L[L.length-1];if(!q)return L;const U={...q,content:q.content+N};F.current+=N;const Ye=/[.?!]/;if(ce.test(U.content)&&Ye.test(F.current)){const ge=F.current.trim();ge&&!ce.test(ge)&&(ze.current=!0),F.current=""}return U.answerIndex===void 0&&We==="answering"&&(U.answerIndex=q.content.length),L[L.length-1]=U,L})}break;case"complete":de(!1);break;case"error":f(u.data.data);break;default:console.warn("Unknown message status:",u.data.status)}},p=u=>{console.error("Worker LLM error:",u)};return l.addEventListener("message",i),l.addEventListener("error",p),()=>{l.removeEventListener("message",i),l.removeEventListener("error",p)}}},[]),a.useEffect(()=>{(async()=>{var p;if(!n.current||!c||c.filter(u=>u.role==="user").length===0||((p=c[c.length-1])==null?void 0:p.role)==="assistant"||!_)return;ue(null);const i=c.slice(-4);i.unshift({role:"system",content:_}),n.current.postMessage({type:"generate",data:i})})()},[c,_]);const[Ge,Ke]=a.useState(1),[Xe,Qe]=a.useState(null),[Ze,Je]=a.useState("af_heart");a.useRef([]),a.useRef(!1);const ze=a.useRef(!1);a.useRef(null);const[Re,et]=a.useState(!1),[B,He]=a.useState([]),[j,$]=a.useState(!1),C=a.useRef(null),S=a.useRef(null),he=a.useCallback(()=>{if(B.length===0||j)return;const l=B[0];S.current&&(URL.revokeObjectURL(S.current),S.current=null);const i=URL.createObjectURL(l);S.current=i,C.current||(C.current=new Audio,C.current.onended=()=>{$(!1)},C.current.onerror=p=>{var u;console.error("Audio playback error:",p),S.current===((u=C.current)==null?void 0:u.src)&&(URL.revokeObjectURL(S.current),S.current=null),$(!1)}),He(p=>p.slice(1)),C.current.src=i,$(!0),C.current.play().then(()=>{}).catch(p=>{console.error(`Error starting audio playback for ${i}:`,p),S.current===i&&(URL.revokeObjectURL(S.current),S.current=null),$(!1)})},[B,j]);return a.useEffect(()=>{!j&&B.length>0&&he()},[j,B.length,he]),a.useEffect(()=>{n.current&&(n.current.postMessage({type:"load",modelName:b}),E("loading"))},[b]),e.jsxs(e.Fragment,{children:[w===null&&e.jsx(T,{onClick:()=>{n.current&&(n.current.postMessage({type:"load",modelName:b}),E("loading"))},disabled:w!==null||d!==null,children:"Load model"}),w==="loading"&&e.jsxs("div",{className:"bb:bottom-0 bb:mx-auto bb:mt-auto bb:w-full bb:max-w-[500px] bb:p-4 bb:text-left",children:[e.jsx("p",{className:"bb:mb-1 bb:text-center",children:O}),W.map(({file:l,progress:i,total:p},u)=>e.jsxs("div",{children:[e.jsxs("span",{children:[l," (",Ie(p),")"]}),e.jsx(Le,{value:i})]},`progress-${u}`))]}),w==="ready"&&e.jsx("div",{}),e.jsxs(ae,{className:"browser-brains-chat",size:"lg",position:"bottom-right",isLoading:w==="loading"||Y,progressPercentage:Be(W),children:[e.jsx(oe,{className:"bb:flex-col bb:text-center bb:justify-center",children:e.jsx("h1",{className:"bb:text-xl bb:font-semibold",children:r})}),e.jsx(be,{children:e.jsxs(se,{children:[c.length===0&&(g||e.jsxs("div",{className:"bb:flex-1",children:[e.jsx("p",{className:"bb:text-center",children:"Welcome to BrowserBrains - Local Chat!"}),e.jsx("br",{}),e.jsx("p",{className:"",children:"I can help you with question like:"}),e.jsx("br",{}),e.jsxs("ul",{className:"bb:list-disc bb:list-inside",children:[e.jsx("li",{children:"If it takes 5 machines 5 minutes to make 5 widgets, how long would it take 100 machines to make 100 widgets?"}),e.jsx("li",{children:"What is the capital of France?"}),e.jsx("li",{children:"What is the population of the moon?"})]})]})),c==null?void 0:c.map(l=>e.jsxs(R,{variant:l.role==="user"?"sent":"received",children:[e.jsx(Ce,{src:"",fallback:l.role==="user"?"🧑‍🦲":"🤖"}),e.jsx(ee,{children:Oe(l.content)})]},l.id||`message-${l.role}-${Math.random()}`))]})}),e.jsxs(ne,{children:[e.jsx(re,{value:y,onChange:l=>{const i=l.target;k(i.value)},onKeyDown:l=>{l.target.value.length>0&&!Y&&l.key==="Enter"&&!l.shiftKey&&(l.preventDefault(),fe())}}),e.jsx(T,{className:"bb:absolute bb:bottom-[24px] bb:right-[24px]",type:"submit",size:"icon",onClick:()=>{y.length>0&&fe()},children:e.jsx(P.Send,{className:"bb:size-4"})})]}),e.jsx("p",{className:"bb:absolute bb:bottom-[0px] bb:w-full bb:min-h-4 bb:text-center bb:text-gray-400 bb:text-xs bb:m-0",children:G&&c.length>0&&K!==null&&e.jsxs(e.Fragment,{children:[!Y&&e.jsxs("span",{children:[K," tokens in ",(K/G).toFixed(2)," seconds ("]}),e.jsxs("span",{className:"bb:mr-1 bb:text-center bb:font-medium",children:[G.toFixed(2)," tks/second)"]})]})})]})]})};h.LocalChat=$e,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=index.umd.cjs.map