@geoffai/elements 0.1.0

package/README.md

@@ -0,0 +1,81 @@
+# @geoffai/elements
+
+Reusable UI components for building AI chat interfaces. Framework-agnostic components with no AI SDK dependencies.
+
+## Installation
+
+```bash
+pnpm add @geoffai/elements
+```
+
+## Components
+
+### Chat Components
+
+- `ChatContainer` - Main chat container with flex layout
+- `ChatMessages` - Scrollable messages container with auto-scroll
+- `ChatScrollButton` - Floating scroll-to-bottom button
+- `ChatInputArea` - Container for the chat input area
+- `ChatEmptyState` - Empty state when no messages
+
+### Prompt Input
+
+- `PromptInput` - Form wrapper for input
+- `PromptInputTextarea` - Auto-resizing textarea with IME support
+- `PromptInputToolbar` - Toolbar container
+- `PromptInputTools` - Tool buttons group
+- `PromptInputButton` - Action button
+- `PromptInputSubmit` - Submit button with status icons
+- `PromptInputModelSelect` - Model selector dropdown
+
+### Message Components
+
+- `MessageContainer` - Message wrapper with role-based alignment
+- `MessageContent` - Content box with role-based styling
+- `MessageAvatar` - Avatar component
+- `MessageText` - Prose-styled text wrapper
+- `MessageGroup` - Groups multiple messages
+- `MessageTimestamp` - Timestamp display
+
+### Chain of Thought
+
+- `ChainOfThought` - Collapsible container
+- `ChainOfThoughtHeader` - Toggle header
+- `ChainOfThoughtContent` - Animated content
+- `ChainOfThoughtStep` - Step with status icon
+- `ChainOfThoughtSearchResults` - Results container
+- `ChainOfThoughtSearchResult` - Individual result
+
+### Thinking/Loading
+
+- `Shimmer` - Gradient text animation
+- `GeoffThinking` - Animated fibonacci spiral dots
+
+### Media
+
+- `ImageCard` - Image display for generated images
+- `ImageGrid` - Grid layout for multiple images
+- `MusicPlayer` - Audio player with waveform
+
+### UI Primitives
+
+- `Button` - Button with variants
+- `Textarea` - Text input
+- `Select` - Dropdown select
+- `Collapsible` - Collapsible container
+- `Avatar` - User avatar
+
+## Hooks
+
+- `useScrollToBottom` - Scroll management for chat
+
+## Types
+
+The package provides its own types that replace ai-sdk dependencies:
+
+- `ChatStatus` - 'idle' | 'submitted' | 'streaming' | 'error'
+- `Message` - Base message interface
+- `ChatHelpers` - Chat state and methods
+- `ToolInvocation` - Tool call data
+- `GeneratedImage` - Image generation result
+- `LanguageModelUsage` - Token usage stats

package/dist/components/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var E=require('react'),reactSlot=require('@radix-ui/react-slot'),classVarianceAuthority=require('class-variance-authority'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime'),s=require('@radix-ui/react-select'),lucideReact=require('lucide-react'),_=require('@radix-ui/react-collapsible'),L=require('@radix-ui/react-avatar'),reactUseControllableState=require('@radix-ui/react-use-controllable-state');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var E__namespace=/*#__PURE__*/_interopNamespace(E);var s__namespace=/*#__PURE__*/_interopNamespace(s);var ___namespace=/*#__PURE__*/_interopNamespace(_);var L__namespace=/*#__PURE__*/_interopNamespace(L);function r(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function ue(e){let t=Math.floor(e/60),o=Math.floor(e%60);return `${t}:${o.toString().padStart(2,"0")}`}var Ee=classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),N=E__namespace.forwardRef(({className:e,variant:t,size:o,asChild:n=false,...a},p)=>jsxRuntime.jsx(n?reactSlot.Slot:"button",{className:r(Ee({variant:t,size:o,className:e})),ref:p,...a}));N.displayName="Button";var te=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("textarea",{className:r("flex min-h-[45px] w-full rounded-md border border-input bg-background px-3 py-2 md:text-xl text-lg ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",e),ref:o,...t}));te.displayName="Textarea";var fe=s__namespace.Root,Ct=s__namespace.Group,ge=s__namespace.Value,oe=E__namespace.forwardRef(({className:e,children:t,...o},n)=>jsxRuntime.jsxs(s__namespace.Trigger,{ref:n,className:r("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",e),...o,children:[t,jsxRuntime.jsx(s__namespace.Icon,{asChild:true,children:jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4 opacity-50"})})]}));oe.displayName=s__namespace.Trigger.displayName;var he=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(s__namespace.ScrollUpButton,{ref:o,className:r("flex cursor-default items-center justify-center py-1",e),...t,children:jsxRuntime.jsx(lucideReact.ChevronUp,{className:"h-4 w-4"})}));he.displayName=s__namespace.ScrollUpButton.displayName;var xe=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(s__namespace.ScrollDownButton,{ref:o,className:r("flex cursor-default items-center justify-center py-1",e),...t,children:jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4"})}));xe.displayName=s__namespace.ScrollDownButton.displayName;var re=E__namespace.forwardRef(({className:e,children:t,position:o="popper",...n},a)=>jsxRuntime.jsx(s__namespace.Portal,{children:jsxRuntime.jsxs(s__namespace.Content,{ref:a,className:r("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",o==="popper"&&"data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1",e),position:o,...n,children:[jsxRuntime.jsx(he,{}),jsxRuntime.jsx(s__namespace.Viewport,{className:r("p-2",o==="popper"&&"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),children:t}),jsxRuntime.jsx(xe,{})]})}));re.displayName=s__namespace.Content.displayName;var He=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(s__namespace.Label,{ref:o,className:r("py-1.5 pr-2 pl-8 font-semibold text-sm",e),...t}));He.displayName=s__namespace.Label.displayName;var ne=E__namespace.forwardRef(({className:e,children:t,...o},n)=>jsxRuntime.jsxs(s__namespace.Item,{ref:n,className:r("relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-3 text-sm outline-hidden transition-colors hover:bg-muted/50 focus:bg-muted data-disabled:pointer-events-none data-[state=checked]:bg-muted data-disabled:opacity-50",e),...o,children:[jsxRuntime.jsx("span",{className:"absolute right-3 flex h-4 w-4 items-center justify-center",children:jsxRuntime.jsx(s__namespace.ItemIndicator,{children:jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4 text-foreground"})})}),jsxRuntime.jsx(s__namespace.ItemText,{children:t})]}));ne.displayName=s__namespace.Item.displayName;var De=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(s__namespace.Separator,{ref:o,className:r("-mx-1 my-1 h-px bg-muted",e),...t}));De.displayName=s__namespace.Separator.displayName;var M=___namespace.Root,k=___namespace.CollapsibleTrigger,A=___namespace.CollapsibleContent;var se=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(L__namespace.Root,{ref:o,className:r("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",e),...t}));se.displayName=L__namespace.Root.displayName;var ie=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(L__namespace.Image,{ref:o,className:r("aspect-square h-full w-full",e),...t}));ie.displayName=L__namespace.Image.displayName;var J=E__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(J,{ref:o,className:r("flex h-full w-full items-center justify-center rounded-full bg-muted",e),...t}));J.displayName=L__namespace.Fallback.displayName;var ze=classVarianceAuthority.cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground"}},defaultVariants:{variant:"default"}});function Ce({className:e,variant:t,...o}){return jsxRuntime.jsx("div",{className:r(ze({variant:t}),e),...o})}function Ge(e={}){let{threshold:t=100,smooth:o=true}=e,n=E.useRef(null),a=E.useRef(null),[p,l]=E.useState(true),i=E.useCallback(()=>{if(!n.current)return;let{scrollTop:d,scrollHeight:T,clientHeight:$}=n.current;l(d+$>=T-t);},[t]);E.useEffect(()=>{let d=n.current;if(d)return d.addEventListener("scroll",i),i(),()=>{d.removeEventListener("scroll",i);}},[i]);let c=E.useCallback((d=o?"smooth":"instant")=>{n.current&&n.current.scrollTo({top:n.current.scrollHeight,behavior:d});},[o]),v=E.useCallback(()=>{l(true);},[]),m=E.useCallback(()=>{l(false);},[]);return {containerRef:n,endRef:a,isAtBottom:p,scrollToBottom:c,onViewportEnter:v,onViewportLeave:m}}var Rt=E.memo(({children:e,className:t})=>jsxRuntime.jsx("div",{className:r("flex h-full flex-col",t),children:e}));Rt.displayName="ChatContainer";var wt=E.memo(({children:e,status:t,className:o,maxWidth:n="4xl",onScrollChange:a})=>{let{containerRef:p,endRef:l,isAtBottom:i,scrollToBottom:c}=Ge();return E.useEffect(()=>{t==="submitted"&&requestAnimationFrame(()=>{c("smooth");});},[t,c]),E.useEffect(()=>{a?.(i);},[i,a]),jsxRuntime.jsx("div",{ref:p,className:r("-webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-scroll",o),style:{overflowAnchor:"none"},children:jsxRuntime.jsx("div",{className:r("mx-auto flex min-w-0 flex-col gap-4 md:gap-6",`max-w-${n}`),children:jsxRuntime.jsxs("div",{className:"flex flex-col gap-4 px-2 py-4 md:gap-6",children:[e,jsxRuntime.jsx("div",{ref:l,className:"min-h-[24px] min-w-[24px] shrink-0"})]})})})});wt.displayName="ChatMessages";var It=E.memo(({visible:e,onClick:t,className:o})=>e?jsxRuntime.jsx(N,{variant:"outline",size:"icon",className:r("-translate-x-1/2 absolute bottom-40 left-1/2 z-10 rounded-full border bg-background p-2 shadow-lg transition-colors hover:bg-muted",o),onClick:t,type:"button","aria-label":"Scroll to bottom",children:jsxRuntime.jsx(lucideReact.ArrowDownIcon,{className:"size-4"})}):null);It.displayName="ChatScrollButton";var Mt=E.memo(({children:e,className:t})=>jsxRuntime.jsx("div",{className:r("shrink-0 border-t bg-background p-4",t),children:e}));Mt.displayName="ChatInputArea";var kt=E.memo(({children:e,className:t})=>jsxRuntime.jsx("div",{className:r("flex flex-1 items-center justify-center",t),children:e}));kt.displayName="ChatEmptyState";var Bt=E.memo(({className:e,role:t="user",children:o,...n})=>jsxRuntime.jsx("div",{className:r("flex w-full gap-3",t==="user"?"flex-row-reverse":"flex-row",e),"data-role":t,...n,children:o}));Bt.displayName="MessageContainer";var Et=E.memo(({className:e,role:t="user",children:o,...n})=>jsxRuntime.jsx("div",{className:r("rounded-2xl px-4 py-3 max-w-[85%]",t==="user"?"bg-primary text-white":"bg-muted text-white",e),...n,children:o}));Et.displayName="MessageContent";var Lt=E.memo(({role:e="user",src:t,fallback:o,className:n})=>jsxRuntime.jsxs(se,{className:r("size-8 shrink-0",n),children:[t&&jsxRuntime.jsx(ie,{src:t,alt:e}),jsxRuntime.jsx(J,{children:o??(e==="user"?"U":"A")})]}));Lt.displayName="MessageAvatar";var Ot=E.memo(({className:e,children:t,...o})=>jsxRuntime.jsx("div",{className:r("prose prose-sm dark:prose-invert max-w-none",e),...o,children:t}));Ot.displayName="MessageText";var Ht=E.memo(({className:e,children:t,...o})=>jsxRuntime.jsx("div",{className:r("flex flex-col gap-4",e),...o,children:t}));Ht.displayName="MessageGroup";var Dt=E.memo(({className:e,date:t,children:o,...n})=>jsxRuntime.jsx("span",{className:r("text-xs text-muted-foreground",e),...n,children:o??t?.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit"})}));Dt.displayName="MessageTimestamp";var Or=({className:e,...t})=>jsxRuntime.jsx("form",{className:r("w-full overflow-hidden rounded-2xl border bg-background shadow-xs",e),...t}),Hr=({onChange:e,onKeyDown:t,className:o,placeholder:n="What would you like to know?",minHeight:a=48,maxHeight:p=164,disableAutoResize:l=false,resizeOnNewLinesOnly:i=false,...c})=>{let v=m=>{if(t?.(m),!m.defaultPrevented&&m.key==="Enter"){if(m.nativeEvent.isComposing||m.shiftKey)return;m.preventDefault();let d=m.currentTarget.form;d&&d.requestSubmit();}};return jsxRuntime.jsx(te,{className:r("w-full resize-none rounded-none border-none p-3 shadow-none outline-hidden ring-0",l||i?"field-sizing-fixed":"field-sizing-content max-h-[6lh]","bg-transparent dark:bg-transparent","focus-visible:ring-0",o),name:"message",onChange:m=>{e?.(m);},onKeyDown:v,placeholder:n,...c})},Dr=({className:e,...t})=>jsxRuntime.jsx("div",{className:r("flex items-center justify-between p-1",e),...t}),zr=({className:e,...t})=>jsxRuntime.jsx("div",{className:r("flex items-center gap-1","[&_button:first-child]:rounded-bl-xl",e),...t}),Vr=({variant:e="ghost",className:t,size:o,...n})=>{let a=o??E.Children.count(n.children)>1?"default":"icon";return jsxRuntime.jsx(N,{className:r("shrink-0 gap-1.5 rounded-lg",e==="ghost"&&"text-muted-foreground",a==="default"&&"px-3",t),size:a,type:"button",variant:e,...n})},Gr=({className:e,variant:t="default",size:o="icon",status:n,children:a,...p})=>{let l=jsxRuntime.jsx(lucideReact.SendIcon,{className:"size-4"});return n==="submitted"?l=jsxRuntime.jsx(lucideReact.Loader2Icon,{className:"size-4 animate-spin"}):n==="streaming"?l=jsxRuntime.jsx(lucideReact.SquareIcon,{className:"size-4"}):n==="error"&&(l=jsxRuntime.jsx(lucideReact.XIcon,{className:"size-4"})),jsxRuntime.jsx(N,{className:r("gap-1.5 rounded-lg",e),size:o,type:"submit",variant:t,...p,children:a??l})},$r=e=>jsxRuntime.jsx(fe,{...e}),Ur=({className:e,...t})=>jsxRuntime.jsx(oe,{className:r("border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors","hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground","h-auto px-2 py-1.5",e),...t}),Wr=({className:e,...t})=>jsxRuntime.jsx(re,{className:r(e),...t}),_r=({className:e,...t})=>jsxRuntime.jsx(ne,{className:r(e),...t}),Fr=({className:e,...t})=>jsxRuntime.jsx(ge,{className:r(e),...t});var Ue=E.createContext(null),Jt=()=>{let e=E.useContext(Ue);if(!e)throw new Error("ChainOfThought components must be used within ChainOfThought");return e},Yt=E.memo(({className:e,open:t,defaultOpen:o=true,onOpenChange:n,children:a,...p})=>{let[l,i]=reactUseControllableState.useControllableState({prop:t,defaultProp:o,onChange:n});return jsxRuntime.jsx(Ue.Provider,{value:{isOpen:l??true,setIsOpen:i},children:jsxRuntime.jsx(M,{className:r("not-prose border rounded-lg p-4",e),onOpenChange:i,open:l,...p,children:a})})}),Qt=E.memo(({className:e,children:t,...o})=>{let{isOpen:n}=Jt();return jsxRuntime.jsxs(k,{className:r("flex w-full items-center justify-between text-sm font-medium transition-colors hover:text-foreground",e),...o,children:[t??"Chain of Thought",jsxRuntime.jsx(lucideReact.ChevronDownIcon,{className:r("size-4 text-muted-foreground transition-transform",n?"rotate-180":"rotate-0")})]})}),eo=E.memo(({className:e,children:t,...o})=>jsxRuntime.jsx(A,{className:r("mt-4 space-y-3","data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",e),...o,children:t})),to=E.memo(({icon:e,label:t,description:o,status:n="complete",children:a,className:p})=>{let l=n==="complete"?lucideReact.CheckCircleIcon:n==="active"?lucideReact.CircleDotIcon:lucideReact.CircleIcon,i=n==="complete"?"text-green-500":n==="active"?"text-blue-500":"text-muted-foreground",c=e??l;return jsxRuntime.jsxs("div",{className:r("flex gap-3",p),children:[jsxRuntime.jsx("div",{className:"flex-shrink-0 mt-0.5",children:jsxRuntime.jsx(c,{className:r("size-4",i)})}),jsxRuntime.jsxs("div",{className:"flex-1 space-y-1",children:[jsxRuntime.jsx("div",{className:"text-sm font-medium",children:t}),o&&jsxRuntime.jsx("div",{className:"text-xs text-muted-foreground",children:o}),a&&jsxRuntime.jsx("div",{className:"mt-2",children:a})]})]})}),oo=E.memo(({children:e,className:t})=>jsxRuntime.jsx("div",{className:r("space-y-2 mt-2",t),children:e})),ro=E.memo(({children:e,className:t})=>jsxRuntime.jsx("div",{className:r("text-xs bg-muted/50 rounded p-2 border",t),children:e}));Yt.displayName="ChainOfThought";Qt.displayName="ChainOfThoughtHeader";eo.displayName="ChainOfThoughtContent";to.displayName="ChainOfThoughtStep";oo.displayName="ChainOfThoughtSearchResults";ro.displayName="ChainOfThoughtSearchResult";function no({children:e,duration:t=1,active:o=true,className:n}){return o?jsxRuntime.jsx("span",{className:r("inline-block bg-clip-text text-transparent","bg-gradient-to-r from-zinc-400 via-white to-zinc-400","bg-[length:200%_100%]","animate-shimmer",n),style:{animationDuration:`${t}s`},children:e}):jsxRuntime.jsx("span",{className:n,children:e})}var z={xs:{size:30,dotRadius:2,numDots:15},sm:{size:30,dotRadius:1.5,numDots:15},lg:{size:30,dotRadius:1.5,numDots:15},xl:{size:200,dotRadius:3,numDots:100}};function ao({isActive:e,className:t="",size:o="sm",color:n="#a855f7"}){let a=E.useRef(null),p=E.useRef(null);return E.useEffect(()=>{if(!a.current)return;let l=z[o].numDots,i=z[o].size,c=z[o].dotRadius,v=2,m=1.5,d=Math.PI*(3-Math.sqrt(5)),T=i/2,$=T-v-c,w="http://www.w3.org/2000/svg";a.current.innerHTML="";let h=document.createElementNS(w,"svg");h.setAttribute("width",i.toString()),h.setAttribute("height",i.toString()),h.setAttribute("viewBox",`0 0 ${i} ${i}`),h.style.width="100%",h.style.height="100%",h.style.maxWidth=`${z[o].size}px`,h.style.maxHeight=`${z[o].size}px`,a.current.appendChild(h),p.current=h;for(let H=0;H<l;H++){let I=H+.5,U=I/l,X=Math.sqrt(U)*$,Z=I*d,Q=T+X*Math.cos(Z),ee=T+X*Math.sin(Z),y=document.createElementNS(w,"circle");y.setAttribute("cx",Q.toString()),y.setAttribute("cy",ee.toString()),y.setAttribute("r",c.toString()),y.style.fill=n,y.style.opacity="0.6",h.appendChild(y);let P=document.createElementNS(w,"animate");P.setAttribute("attributeName","r"),P.setAttribute("values",`${c*.5};${c*1.5};${c*.5}`),P.setAttribute("dur",`${m}s`),P.setAttribute("begin",`${U*m}s`),P.setAttribute("repeatCount","indefinite"),P.setAttribute("calcMode","spline"),P.setAttribute("keySplines","0.4 0 0.6 1;0.4 0 0.6 1"),y.appendChild(P);let b=document.createElementNS(w,"animate");b.setAttribute("attributeName","opacity"),b.setAttribute("values","0.3;1;0.3"),b.setAttribute("dur",`${m}s`),b.setAttribute("begin",`${U*m}s`),b.setAttribute("repeatCount","indefinite"),b.setAttribute("calcMode","spline"),b.setAttribute("keySplines","0.4 0 0.6 1;0.4 0 0.6 1"),y.appendChild(b);}},[o,n]),E.useEffect(()=>{if(!p.current)return;p.current.querySelectorAll("animate").forEach(i=>{e?i.beginElement():i.endElement();});},[e]),jsxRuntime.jsx("div",{ref:a,className:`flex items-center justify-center ${t}`,style:{width:`${z[o].size}px`,height:`${z[o].size}px`,background:"transparent"}})}var Ne=E.memo(({base64:e,uint8Array:t,mediaType:o,className:n,alt:a="Generated image",onClick:p})=>{let l=`data:${o};base64,${e}`;return jsxRuntime.jsx("img",{src:l,alt:a,onClick:p,className:r("h-auto max-w-full overflow-hidden rounded-md",p&&"cursor-pointer hover:opacity-90 transition-opacity",n)})});Ne.displayName="ImageCard";var Ke=E.memo(({images:e,className:t,onImageClick:o})=>jsxRuntime.jsx("div",{className:r("grid grid-cols-2 gap-2 md:grid-cols-3",t),children:e.map((n,a)=>jsxRuntime.jsx(Ne,{...n,onClick:()=>o?.(n,a)},a))}));Ke.displayName="ImageGrid";var Ze=E.memo(({audioUrl:e,title:t="Untitled",imageUrl:o,videoUrl:n,duration:a,tags:p,likeCount:l=0,isLiked:i=false,onLike:c,showWaveform:v=false,showTitle:m=true,showPlayButton:d=true,className:T="",waveColor:$="#666666",progressColor:w="#ffffff",height:h=60,maxWidth:H="100%",onPlay:I,onPause:U,onEnded:X,onTimeUpdate:Z,onError:Q,autoPlay:ee=false})=>{let[y,P]=E.useState(false),[b,rt]=E.useState(i),[Ie,Me]=E.useState(0),[j,nt]=E.useState(0),[at,ke]=E.useState(true),[st,it]=E.useState(null),W=E.useRef(null),ce=E.useRef(null);E.useEffect(()=>{let u=new Audio(e);return W.current=u,u.addEventListener("loadedmetadata",()=>{nt(u.duration),ke(false);}),u.addEventListener("timeupdate",()=>{Me(u.currentTime),Z?.(u.currentTime,u.duration);}),u.addEventListener("ended",()=>{P(false),X?.();}),u.addEventListener("error",me=>{let de=new Error("Failed to load audio");it(de.message),ke(false),Q?.(de);}),ee&&u.play().catch(()=>{}),()=>{u.pause(),u.src="";}},[e,ee,X,Q,Z]);let lt=E.useCallback(()=>{W.current&&(y?(W.current.pause(),P(false),U?.()):W.current.play().then(()=>{P(true),I?.();}).catch(u=>{console.error("Failed to play:",u);}));},[y,U,I]),pt=E.useCallback(u=>{if(!ce.current||!W.current)return;let me=ce.current.getBoundingClientRect(),Ae=(u.clientX-me.left)/me.width*j;W.current.currentTime=Ae,Me(Ae);},[j]),ct=E.useCallback(()=>{rt(!b),c?.();},[b,c]),mt=j>0?Ie/j*100:0;return st?jsxRuntime.jsx("div",{className:r("rounded-lg bg-muted p-4 text-sm text-muted-foreground",T),children:"Failed to load audio"}):jsxRuntime.jsxs("div",{className:r("relative overflow-hidden rounded-xl bg-black/90",T),style:{maxWidth:H,height:h},children:[n?jsxRuntime.jsx("video",{src:n,className:"absolute inset-0 h-full w-full object-cover opacity-30",autoPlay:true,muted:true,loop:true,playsInline:true}):o?jsxRuntime.jsx("img",{src:o,alt:"",className:"absolute inset-0 h-full w-full object-cover opacity-30"}):null,jsxRuntime.jsxs("div",{className:"relative flex h-full items-center gap-3 px-3",children:[d&&jsxRuntime.jsx(N,{variant:"ghost",size:"icon",onClick:lt,disabled:at,className:"shrink-0 text-white hover:bg-white/20",children:y?jsxRuntime.jsx(lucideReact.Pause,{className:"size-5"}):jsxRuntime.jsx(lucideReact.Play,{className:"size-5"})}),jsxRuntime.jsxs("div",{className:"flex flex-1 flex-col gap-1 min-w-0",children:[m&&jsxRuntime.jsx("div",{className:"truncate text-sm font-medium text-white",children:t}),jsxRuntime.jsx("div",{ref:ce,onClick:pt,className:"h-1 w-full cursor-pointer rounded-full bg-white/20",children:jsxRuntime.jsx("div",{className:"h-full rounded-full bg-white transition-all",style:{width:`${mt}%`}})}),jsxRuntime.jsxs("div",{className:"flex justify-between text-xs text-white/60",children:[jsxRuntime.jsx("span",{children:ue(Ie)}),jsxRuntime.jsx("span",{children:ue(j)})]})]}),c&&jsxRuntime.jsx(N,{variant:"ghost",size:"icon",onClick:ct,className:r("shrink-0 hover:bg-white/20",b?"text-red-500":"text-white"),children:jsxRuntime.jsx(lucideReact.Heart,{className:r("size-4",b&&"fill-current")})})]})]})});Ze.displayName="MusicPlayer";var Mn=({className:e,...t})=>jsxRuntime.jsx(M,{className:r("not-prose mb-4 w-full rounded-md border",e),...t}),bo=e=>{let t={"input-streaming":"Pending","input-available":"Running","output-available":"Completed","output-error":"Error"};return jsxRuntime.jsxs(Ce,{className:"flex items-center gap-1 rounded-full text-xs",variant:"secondary",children:[{"input-streaming":jsxRuntime.jsx(lucideReact.CircleIcon,{className:"size-4"}),"input-available":jsxRuntime.jsx(lucideReact.ClockIcon,{className:"size-4 animate-pulse"}),"output-available":jsxRuntime.jsx(lucideReact.CheckCircleIcon,{className:"size-4 text-green-600"}),"output-error":jsxRuntime.jsx(lucideReact.XCircleIcon,{className:"size-4 text-red-600"})}[e],jsxRuntime.jsx("span",{children:t[e]})]})},kn=({className:e,toolName:t,state:o,...n})=>jsxRuntime.jsxs(k,{className:r("group flex w-full min-w-0 items-center justify-between gap-2 p-3",e),...n,children:[jsxRuntime.jsxs("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:[jsxRuntime.jsx(lucideReact.WrenchIcon,{className:"size-4 shrink-0 text-muted-foreground"}),jsxRuntime.jsx("span",{className:"truncate font-medium text-sm",children:t})]}),jsxRuntime.jsxs("div",{className:"flex shrink-0 items-center gap-2",children:[bo(o),jsxRuntime.jsx(lucideReact.ChevronDownIcon,{className:"size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"})]})]}),An=({className:e,...t})=>jsxRuntime.jsx(A,{className:r("data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",e),...t}),Bn=({className:e,input:t,...o})=>jsxRuntime.jsxs("div",{className:r("space-y-2 overflow-hidden p-4",e),...o,children:[jsxRuntime.jsx("h4",{className:"font-medium text-muted-foreground text-xs uppercase tracking-wide",children:"Parameters"}),jsxRuntime.jsx("div",{className:"rounded-md bg-muted/50",children:jsxRuntime.jsx("pre",{className:"overflow-x-auto p-3 font-mono text-xs",children:JSON.stringify(t,null,2)})})]}),En=({className:e,output:t,errorText:o,...n})=>t||o?jsxRuntime.jsxs("div",{className:r("space-y-2 p-4",e),...n,children:[jsxRuntime.jsx("h4",{className:"font-medium text-muted-foreground text-xs uppercase tracking-wide",children:o?"Error":"Result"}),jsxRuntime.jsxs("div",{className:r("overflow-x-auto rounded-md text-xs [&_table]:w-full",o?"bg-destructive/10 p-3 text-destructive":"bg-muted/50 text-foreground"),children:[o&&jsxRuntime.jsx("div",{children:o}),t&&jsxRuntime.jsx("div",{children:t})]})]}):null;var et=E.createContext(null),No=()=>{let e=E.useContext(et);if(!e)throw new Error("Reasoning components must be used within Reasoning");return e},So=500,To=1e3,Ro=E.memo(({className:e,isStreaming:t=false,open:o,defaultOpen:n=true,onOpenChange:a,duration:p,children:l,...i})=>{let[c,v]=reactUseControllableState.useControllableState({prop:o,defaultProp:n,onChange:a}),[m,d]=reactUseControllableState.useControllableState({prop:p,defaultProp:0}),[T,$]=E.useState(false),[w,h]=E.useState(null);E.useEffect(()=>{t?w===null&&h(Date.now()):w!==null&&(d(Math.round((Date.now()-w)/To)),h(null));},[t,w,d]),E.useEffect(()=>{if(n&&!t&&c&&!T){let I=setTimeout(()=>{v(false),$(true);},So);return ()=>clearTimeout(I)}},[t,c,n,v,T]);let H=I=>{v(I);};return jsxRuntime.jsx(et.Provider,{value:{isStreaming:t,isOpen:c??false,setIsOpen:v,duration:m??0},children:jsxRuntime.jsx(M,{className:r("not-prose",e),onOpenChange:H,open:c,...i,children:l})})}),wo=E.memo(({className:e,children:t,...o})=>{let{isStreaming:n,isOpen:a,duration:p}=No();return jsxRuntime.jsx(k,{className:r("flex items-center gap-1.5 text-muted-foreground text-lg transition-colors hover:text-foreground",e),...o,children:t??jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[n||p===0?jsxRuntime.jsx("p",{children:"Thinking..."}):jsxRuntime.jsxs("p",{children:["Thought for ",p,"s"]}),jsxRuntime.jsx(lucideReact.ChevronDownIcon,{className:r("size-3 text-muted-foreground transition-transform",a?"rotate-180":"rotate-0")})]})})}),Io=E.memo(({className:e,children:t,...o})=>jsxRuntime.jsx(A,{className:r("mt-2 text-muted-foreground text-xs","data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",e),...o,children:jsxRuntime.jsx("div",{className:"prose prose-sm dark:prose-invert max-w-none",children:t})}));Ro.displayName="Reasoning";wo.displayName="ReasoningTrigger";Io.displayName="ReasoningContent";var tt=E.createContext({code:""}),Kn=({code:e,language:t,showLineNumbers:o=false,className:n,children:a,...p})=>{let l=e.split(`
+`);return jsxRuntime.jsx(tt.Provider,{value:{code:e},children:jsxRuntime.jsxs("div",{className:r("relative w-full overflow-hidden rounded-md border bg-muted/50",n),...p,children:[t&&jsxRuntime.jsx("div",{className:"flex items-center justify-between border-b bg-muted/30 px-4 py-2",children:jsxRuntime.jsx("span",{className:"font-mono text-muted-foreground text-xs",children:t})}),jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.jsx("pre",{className:"overflow-x-auto p-4",children:jsxRuntime.jsx("code",{className:"font-mono text-sm",children:o?l.map((i,c)=>jsxRuntime.jsxs("div",{className:"flex",children:[jsxRuntime.jsx("span",{className:"mr-4 inline-block w-8 select-none text-right text-muted-foreground",children:c+1}),jsxRuntime.jsx("span",{children:i})]},c)):e})}),a&&jsxRuntime.jsx("div",{className:"absolute top-2 right-2 flex items-center gap-2",children:a})]})]})})},Xn=({onCopy:e,onError:t,timeout:o=2e3,children:n,className:a,...p})=>{let[l,i]=E.useState(false),{code:c}=E.useContext(tt),v=async()=>{if(typeof window>"u"||!navigator.clipboard?.writeText){t?.(new Error("Clipboard API not available"));return}try{await navigator.clipboard.writeText(c),i(!0),e?.(),setTimeout(()=>i(!1),o);}catch(d){t?.(d);}},m=l?lucideReact.CheckIcon:lucideReact.CopyIcon;return jsxRuntime.jsx(N,{className:r("shrink-0",a),onClick:v,size:"icon",type:"button",variant:"ghost",...p,children:n??jsxRuntime.jsx(m,{size:14})})},Zn=({className:e,children:t,...o})=>jsxRuntime.jsx("div",{className:r("flex items-center justify-between border-b bg-muted/30 px-4 py-2",e),...o,children:t}),jn=({className:e,children:t,...o})=>jsxRuntime.jsx("span",{className:r("font-mono text-muted-foreground text-xs",e),...o,children:t});var oa=({className:e,...t})=>jsxRuntime.jsx(M,{className:r("not-prose mb-4 text-primary text-xs",e),...t}),ra=({className:e,count:t,children:o,...n})=>jsxRuntime.jsx(k,{className:r("flex items-center gap-2",e),...n,children:o??jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("p",{className:"font-medium",children:["Used ",t," sources"]}),jsxRuntime.jsx(lucideReact.ChevronDownIcon,{className:"size-4"})]})}),na=({className:e,...t})=>jsxRuntime.jsx(A,{className:r("mt-3 flex w-fit flex-col gap-2","data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",e),...t}),Do=({href:e,title:t,children:o,className:n,...a})=>jsxRuntime.jsx("a",{className:r("flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors",n),href:e,rel:"noreferrer",target:"_blank",...a,children:o??jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(lucideReact.BookIcon,{className:"size-4 shrink-0"}),jsxRuntime.jsx("span",{className:"block font-medium truncate",children:t})]})}),aa=({sources:e,className:t,...o})=>jsxRuntime.jsx("div",{className:r("space-y-2",t),...o,children:e.map((n,a)=>jsxRuntime.jsx(Do,{href:n.url,title:n.title},a))});exports.Avatar=se;exports.AvatarFallback=J;exports.AvatarImage=ie;exports.Badge=Ce;exports.Button=N;exports.ChainOfThought=Yt;exports.ChainOfThoughtContent=eo;exports.ChainOfThoughtHeader=Qt;exports.ChainOfThoughtSearchResult=ro;exports.ChainOfThoughtSearchResults=oo;exports.ChainOfThoughtStep=to;exports.ChatContainer=Rt;exports.ChatEmptyState=kt;exports.ChatInputArea=Mt;exports.ChatMessages=wt;exports.ChatScrollButton=It;exports.CodeBlock=Kn;exports.CodeBlockCopyButton=Xn;exports.CodeBlockHeader=Zn;exports.CodeBlockLanguage=jn;exports.Collapsible=M;exports.CollapsibleContent=A;exports.CollapsibleTrigger=k;exports.GeoffThinking=ao;exports.ImageCard=Ne;exports.ImageGrid=Ke;exports.MessageAvatar=Lt;exports.MessageContainer=Bt;exports.MessageContent=Et;exports.MessageGroup=Ht;exports.MessageText=Ot;exports.MessageTimestamp=Dt;exports.MusicPlayer=Ze;exports.PromptInput=Or;exports.PromptInputButton=Vr;exports.PromptInputModelSelect=$r;exports.PromptInputModelSelectContent=Wr;exports.PromptInputModelSelectItem=_r;exports.PromptInputModelSelectTrigger=Ur;exports.PromptInputModelSelectValue=Fr;exports.PromptInputSubmit=Gr;exports.PromptInputTextarea=Hr;exports.PromptInputToolbar=Dr;exports.PromptInputTools=zr;exports.Reasoning=Ro;exports.ReasoningContent=Io;exports.ReasoningTrigger=wo;exports.Select=fe;exports.SelectContent=re;exports.SelectGroup=Ct;exports.SelectItem=ne;exports.SelectLabel=He;exports.SelectScrollDownButton=xe;exports.SelectScrollUpButton=he;exports.SelectSeparator=De;exports.SelectTrigger=oe;exports.SelectValue=ge;exports.Shimmer=no;exports.Source=Do;exports.SourceList=aa;exports.Sources=oa;exports.SourcesContent=na;exports.SourcesTrigger=ra;exports.Textarea=te;exports.Tool=Mn;exports.ToolContent=An;exports.ToolHeader=kn;exports.ToolInput=Bn;exports.ToolOutput=En;exports.badgeVariants=ze;exports.buttonVariants=Ee;exports.useReasoning=No;

package/dist/components/index.d.cts

@@ -0,0 +1,382 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import { ReactNode, HTMLAttributes, ComponentProps } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChatStatus, MessageRole, ChainOfThoughtStepStatus, GeneratedImage, ToolState } from '../types/index.cjs';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface ChatContainerProps {
+    /** Child elements (messages, input, etc.) */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Main chat container with flex layout
+ */
+declare const ChatContainer: React$1.MemoExoticComponent<({ children, className, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+interface ChatMessagesProps {
+    /** Message elements to render */
+    children: ReactNode;
+    /** Current chat status */
+    status?: ChatStatus;
+    /** Additional CSS classes */
+    className?: string;
+    /** Maximum width for content */
+    maxWidth?: string;
+    /** Called when scroll position changes */
+    onScrollChange?: (isAtBottom: boolean) => void;
+}
+/**
+ * Scrollable messages container with auto-scroll behavior
+ */
+declare const ChatMessages: React$1.MemoExoticComponent<({ children, status, className, maxWidth, onScrollChange, }: ChatMessagesProps) => react_jsx_runtime.JSX.Element>;
+interface ChatScrollButtonProps {
+    /** Whether the button should be visible */
+    visible: boolean;
+    /** Click handler */
+    onClick: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Floating scroll-to-bottom button
+ */
+declare const ChatScrollButton: React$1.MemoExoticComponent<({ visible, onClick, className, }: ChatScrollButtonProps) => react_jsx_runtime.JSX.Element | null>;
+interface ChatInputAreaProps {
+    /** Input component */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Container for the chat input area
+ */
+declare const ChatInputArea: React$1.MemoExoticComponent<({ children, className, }: ChatInputAreaProps) => react_jsx_runtime.JSX.Element>;
+interface ChatEmptyStateProps {
+    /** Content to show when chat is empty */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Empty state component for when there are no messages
+ */
+declare const ChatEmptyState: React$1.MemoExoticComponent<({ children, className, }: ChatEmptyStateProps) => react_jsx_runtime.JSX.Element>;
+
+type MessageContainerProps = HTMLAttributes<HTMLDivElement> & {
+    role?: MessageRole;
+};
+/**
+ * Container for a message, handles role-based alignment
+ */
+declare const MessageContainer: React$1.MemoExoticComponent<({ className, role, children, ...props }: MessageContainerProps) => react_jsx_runtime.JSX.Element>;
+type MessageContentProps = HTMLAttributes<HTMLDivElement> & {
+    role?: MessageRole;
+};
+/**
+ * Content wrapper for a message with role-based styling
+ */
+declare const MessageContent: React$1.MemoExoticComponent<({ className, role, children, ...props }: MessageContentProps) => react_jsx_runtime.JSX.Element>;
+type MessageAvatarProps = {
+    role?: MessageRole;
+    src?: string;
+    fallback?: ReactNode;
+    className?: string;
+};
+/**
+ * Avatar for a message, supports role-based defaults
+ */
+declare const MessageAvatar: React$1.MemoExoticComponent<({ role, src, fallback, className }: MessageAvatarProps) => react_jsx_runtime.JSX.Element>;
+type MessageTextProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Text content wrapper with prose styling
+ */
+declare const MessageText: React$1.MemoExoticComponent<({ className, children, ...props }: MessageTextProps) => react_jsx_runtime.JSX.Element>;
+type MessageGroupProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Groups multiple messages together
+ */
+declare const MessageGroup: React$1.MemoExoticComponent<({ className, children, ...props }: MessageGroupProps) => react_jsx_runtime.JSX.Element>;
+type MessageTimestampProps = HTMLAttributes<HTMLSpanElement> & {
+    date?: Date;
+};
+/**
+ * Timestamp display for messages
+ */
+declare const MessageTimestamp: React$1.MemoExoticComponent<({ className, date, children, ...props }: MessageTimestampProps) => react_jsx_runtime.JSX.Element>;
+
+type PromptInputProps = HTMLAttributes<HTMLFormElement>;
+declare const PromptInput: ({ className, ...props }: PromptInputProps) => react_jsx_runtime.JSX.Element;
+type PromptInputTextareaProps = ComponentProps<typeof Textarea> & {
+    minHeight?: number;
+    maxHeight?: number;
+    disableAutoResize?: boolean;
+    resizeOnNewLinesOnly?: boolean;
+};
+declare const PromptInputTextarea: ({ onChange, onKeyDown, className, placeholder, minHeight, maxHeight, disableAutoResize, resizeOnNewLinesOnly, ...props }: PromptInputTextareaProps) => react_jsx_runtime.JSX.Element;
+type PromptInputToolbarProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputToolbar: ({ className, ...props }: PromptInputToolbarProps) => react_jsx_runtime.JSX.Element;
+type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+declare const PromptInputTools: ({ className, ...props }: PromptInputToolsProps) => react_jsx_runtime.JSX.Element;
+type PromptInputButtonProps = ComponentProps<typeof Button>;
+declare const PromptInputButton: ({ variant, className, size, ...props }: PromptInputButtonProps) => react_jsx_runtime.JSX.Element;
+type PromptInputSubmitProps = ComponentProps<typeof Button> & {
+    status?: ChatStatus;
+};
+declare const PromptInputSubmit: ({ className, variant, size, status, children, ...props }: PromptInputSubmitProps) => react_jsx_runtime.JSX.Element;
+type PromptInputModelSelectProps = ComponentProps<typeof Select>;
+declare const PromptInputModelSelect: (props: PromptInputModelSelectProps) => react_jsx_runtime.JSX.Element;
+type PromptInputModelSelectTriggerProps = ComponentProps<typeof SelectTrigger>;
+declare const PromptInputModelSelectTrigger: ({ className, ...props }: PromptInputModelSelectTriggerProps) => react_jsx_runtime.JSX.Element;
+type PromptInputModelSelectContentProps = ComponentProps<typeof SelectContent>;
+declare const PromptInputModelSelectContent: ({ className, ...props }: PromptInputModelSelectContentProps) => react_jsx_runtime.JSX.Element;
+type PromptInputModelSelectItemProps = ComponentProps<typeof SelectItem>;
+declare const PromptInputModelSelectItem: ({ className, ...props }: PromptInputModelSelectItemProps) => react_jsx_runtime.JSX.Element;
+type PromptInputModelSelectValueProps = ComponentProps<typeof SelectValue>;
+declare const PromptInputModelSelectValue: ({ className, ...props }: PromptInputModelSelectValueProps) => react_jsx_runtime.JSX.Element;
+
+type ChainOfThoughtProps = ComponentProps<typeof Collapsible> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const ChainOfThought: React$1.MemoExoticComponent<({ className, open, defaultOpen, onOpenChange, children, ...props }: ChainOfThoughtProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger> & {
+    children?: ReactNode;
+};
+declare const ChainOfThoughtHeader: React$1.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtHeaderProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ChainOfThoughtContent: React$1.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtStepProps = {
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    label: ReactNode;
+    description?: string;
+    status?: ChainOfThoughtStepStatus;
+    children?: ReactNode;
+    className?: string;
+};
+declare const ChainOfThoughtStep: React$1.MemoExoticComponent<({ icon: CustomIcon, label, description, status, children, className, }: ChainOfThoughtStepProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtSearchResultsProps = {
+    children: ReactNode;
+    className?: string;
+};
+declare const ChainOfThoughtSearchResults: React$1.MemoExoticComponent<({ children, className }: ChainOfThoughtSearchResultsProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtSearchResultProps = {
+    children: ReactNode;
+    className?: string;
+};
+declare const ChainOfThoughtSearchResult: React$1.MemoExoticComponent<({ children, className }: ChainOfThoughtSearchResultProps) => react_jsx_runtime.JSX.Element>;
+
+interface ShimmerProps {
+    children: React.ReactNode;
+    /** Duration of one shimmer cycle in seconds */
+    duration?: number;
+    /** Whether the shimmer is active */
+    active?: boolean;
+    className?: string;
+}
+/**
+ * Shimmer component for text that shows a gradient animation.
+ * Used to indicate loading or processing states.
+ */
+declare function Shimmer({ children, duration, active, className, }: ShimmerProps): react_jsx_runtime.JSX.Element;
+
+interface ThinkingProps {
+    /** Whether the animation is currently active */
+    isActive: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Size preset: 'xs' | 'sm' | 'lg' | 'xl' */
+    size?: 'xs' | 'sm' | 'lg' | 'xl';
+    /** Custom color for the dots (default: purple-500) */
+    color?: string;
+}
+/**
+ * GeoffThinking component displays an animated thinking indicator
+ * using a fibonacci spiral pattern of pulsing dots.
+ */
+declare function GeoffThinking({ isActive, className, size, color, }: ThinkingProps): react_jsx_runtime.JSX.Element;
+
+type ImageCardProps = GeneratedImage & {
+    className?: string;
+    alt?: string;
+    onClick?: () => void;
+};
+/**
+ * Image card component for displaying generated images
+ * Supports base64 and data URL sources
+ */
+declare const ImageCard: React$1.MemoExoticComponent<({ base64, uint8Array: _uint8Array, mediaType, className, alt, onClick, }: ImageCardProps) => react_jsx_runtime.JSX.Element>;
+type ImageGridProps = {
+    images: GeneratedImage[];
+    className?: string;
+    onImageClick?: (image: GeneratedImage, index: number) => void;
+};
+/**
+ * Grid layout for displaying multiple images
+ */
+declare const ImageGrid: React$1.MemoExoticComponent<({ images, className, onImageClick, }: ImageGridProps) => react_jsx_runtime.JSX.Element>;
+
+interface MusicPlayerProps {
+    /** Audio URL to play */
+    audioUrl: string;
+    /** Title of the track */
+    title?: string;
+    /** Cover image URL */
+    imageUrl?: string;
+    /** Video background URL (optional) */
+    videoUrl?: string;
+    /** Track duration string */
+    duration?: string;
+    /** Tags for the track */
+    tags?: string;
+    likeCount?: number;
+    isLiked?: boolean;
+    onLike?: () => void;
+    showWaveform?: boolean;
+    showTitle?: boolean;
+    showPlayButton?: boolean;
+    className?: string;
+    waveColor?: string;
+    progressColor?: string;
+    height?: number;
+    maxWidth?: string;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number, duration: number) => void;
+    onError?: (error: Error) => void;
+    autoPlay?: boolean;
+}
+/**
+ * Minimal music player component with optional waveform visualization
+ * Uses HTML5 audio with optional WaveSurfer.js integration
+ */
+declare const MusicPlayer: React$1.MemoExoticComponent<({ audioUrl, title, imageUrl, videoUrl, duration: durationProp, tags, likeCount, isLiked: initialIsLiked, onLike, showWaveform, showTitle, showPlayButton, className, waveColor, progressColor, height, maxWidth, onPlay, onPause, onEnded, onTimeUpdate, onError, autoPlay, }: MusicPlayerProps) => react_jsx_runtime.JSX.Element>;
+
+type ToolProps = ComponentProps<typeof Collapsible>;
+declare const Tool: ({ className, ...props }: ToolProps) => react_jsx_runtime.JSX.Element;
+type ToolHeaderProps = ComponentProps<typeof CollapsibleTrigger> & {
+    toolName: string;
+    state: ToolState;
+};
+declare const ToolHeader: ({ className, toolName, state, ...props }: ToolHeaderProps) => react_jsx_runtime.JSX.Element;
+type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ToolContent: ({ className, ...props }: ToolContentProps) => react_jsx_runtime.JSX.Element;
+type ToolInputProps = ComponentProps<'div'> & {
+    input: Record<string, unknown>;
+};
+declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => react_jsx_runtime.JSX.Element;
+type ToolOutputProps = ComponentProps<'div'> & {
+    output?: ReactNode;
+    errorText?: string;
+};
+declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => react_jsx_runtime.JSX.Element | null;
+
+type ReasoningContextValue = {
+    isStreaming: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    duration: number;
+};
+declare const useReasoning: () => ReasoningContextValue;
+type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+declare const Reasoning: React$1.MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const ReasoningTrigger: React$1.MemoExoticComponent<({ className, children, ...props }: ReasoningTriggerProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+    children: ReactNode;
+};
+declare const ReasoningContent: React$1.MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => react_jsx_runtime.JSX.Element>;
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    children?: ReactNode;
+};
+/**
+ * A simple code block component with copy functionality.
+ * For syntax highlighting, wrap this component with your preferred
+ * syntax highlighter (e.g., react-syntax-highlighter, prism-react-renderer, shiki).
+ */
+declare const CodeBlock: ({ code, language, showLineNumbers, className, children, ...props }: CodeBlockProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const CodeBlockCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: CodeBlockCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const CodeBlockHeader: ({ className, children, ...props }: CodeBlockHeaderProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageProps = HTMLAttributes<HTMLSpanElement>;
+declare const CodeBlockLanguage: ({ className, children, ...props }: CodeBlockLanguageProps) => react_jsx_runtime.JSX.Element;
+
+type SourcesProps = ComponentProps<typeof Collapsible>;
+declare const Sources: ({ className, ...props }: SourcesProps) => react_jsx_runtime.JSX.Element;
+type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+};
+declare const SourcesTrigger: ({ className, count, children, ...props }: SourcesTriggerProps) => react_jsx_runtime.JSX.Element;
+type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const SourcesContent: ({ className, ...props }: SourcesContentProps) => react_jsx_runtime.JSX.Element;
+type SourceProps = ComponentProps<'a'>;
+declare const Source: ({ href, title, children, className, ...props }: SourceProps) => react_jsx_runtime.JSX.Element;
+type SourceListProps = ComponentProps<'div'> & {
+    sources: Array<{
+        url: string;
+        title: string;
+    }>;
+};
+declare const SourceList: ({ sources, className, ...props }: SourceListProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, ChainOfThought, ChainOfThoughtContent, type ChainOfThoughtContentProps, ChainOfThoughtHeader, type ChainOfThoughtHeaderProps, type ChainOfThoughtProps, ChainOfThoughtSearchResult, type ChainOfThoughtSearchResultProps, ChainOfThoughtSearchResults, type ChainOfThoughtSearchResultsProps, ChainOfThoughtStep, type ChainOfThoughtStepProps, ChatContainer, type ChatContainerProps, ChatEmptyState, type ChatEmptyStateProps, ChatInputArea, type ChatInputAreaProps, ChatMessages, type ChatMessagesProps, ChatScrollButton, type ChatScrollButtonProps, CodeBlock, CodeBlockCopyButton, type CodeBlockCopyButtonProps, CodeBlockHeader, type CodeBlockHeaderProps, CodeBlockLanguage, type CodeBlockLanguageProps, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, GeoffThinking, ImageCard, type ImageCardProps, ImageGrid, type ImageGridProps, MessageAvatar, type MessageAvatarProps, MessageContainer, type MessageContainerProps, MessageContent, type MessageContentProps, MessageGroup, type MessageGroupProps, MessageText, type MessageTextProps, MessageTimestamp, type MessageTimestampProps, MusicPlayer, type MusicPlayerProps, PromptInput, PromptInputButton, type PromptInputButtonProps, PromptInputModelSelect, PromptInputModelSelectContent, type PromptInputModelSelectContentProps, PromptInputModelSelectItem, type PromptInputModelSelectItemProps, type PromptInputModelSelectProps, PromptInputModelSelectTrigger, type PromptInputModelSelectTriggerProps, PromptInputModelSelectValue, type PromptInputModelSelectValueProps, type PromptInputProps, PromptInputSubmit, type PromptInputSubmitProps, PromptInputTextarea, type PromptInputTextareaProps, PromptInputToolbar, type PromptInputToolbarProps, PromptInputTools, type PromptInputToolsProps, Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Shimmer, type ShimmerProps, Source, SourceList, type SourceListProps, type SourceProps, Sources, SourcesContent, type SourcesContentProps, type SourcesProps, SourcesTrigger, type SourcesTriggerProps, Textarea, type ThinkingProps, Tool, ToolContent, type ToolContentProps, ToolHeader, type ToolHeaderProps, ToolInput, type ToolInputProps, ToolOutput, type ToolOutputProps, type ToolProps, badgeVariants, buttonVariants, useReasoning };