"use client" import * as React from "react" import { Input as InputPrimitive } from "@base-ui/react/input" import type { BaseUIEvent } from "@base-ui/react/types" import { ArrowUp02Icon, Loading03Icon } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { Kbd } from "@/components/ui/kbd" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" import { Button } from "@/registry/aiellie/ui/button" import { TooltipIconButton } from "@/registry/aiellie/ui/tooltip-icon-button" interface ComposerContextValue { value: string setValue: (value: string) => void streaming: boolean disabled: boolean onStop?: () => void } const ComposerContext = React.createContext(null) function useComposer() { const context = React.useContext(ComposerContext) if (!context) { throw new Error("Composer parts must be placed inside .") } return context } function Composer({ value: valueProp, defaultValue = "", onValueChange, onSend, onStop, streaming = false, disabled = false, className, ...props }: Omit, "defaultValue" | "onSubmit"> & { value?: string defaultValue?: string onValueChange?: (value: string) => void onSend?: (message: string) => void onStop?: () => void streaming?: boolean disabled?: boolean }) { const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue) const value = valueProp ?? uncontrolledValue function setValue(next: string) { if (valueProp === undefined) setUncontrolledValue(next) onValueChange?.(next) } function send(event: React.FormEvent) { event.preventDefault() const message = value.trim() if (!message || streaming || disabled) return onSend?.(message) setValue("") } return (

) } function ComposerField({ onMouseDown, className, ...props }: React.ComponentProps<"div">) { function focusInput(event: React.MouseEvent) { onMouseDown?.(event) if (event.defaultPrevented || event.target !== event.currentTarget) return event.preventDefault() event.currentTarget .querySelector("[data-slot=composer-input]") ?.focus() } return (

) } function ComposerInput({ rows = 1, disabled, onKeyDown, className, ...props }: Omit< InputPrimitive.Props, "render" | "value" | "defaultValue" | "onValueChange" > & { rows?: number }) { const composer = useComposer() function handleKeyDown( event: BaseUIEvent> ) { onKeyDown?.(event) if (event.defaultPrevented) return if (event.key === "Escape" && composer.streaming && composer.onStop) { event.preventDefault() composer.onStop() return } const composing = event.nativeEvent.isComposing || event.keyCode === 229 if (event.key !== "Enter" || event.shiftKey || event.altKey || composing) { return } const chord = event.metaKey || event.ctrlKey if (!chord && window.matchMedia("(pointer: coarse)").matches) return event.preventDefault() event.currentTarget.form?.requestSubmit() } return ( } value={composer.value} onValueChange={composer.setValue} disabled={composer.disabled || disabled} onKeyDown={handleKeyDown} className={cn( "block field-sizing-content max-h-40 min-h-8 w-full min-w-0 flex-1 resize-none bg-transparent py-1.5 ps-2.5 pe-1 text-sm leading-5 text-foreground outline-none", "placeholder:text-muted-foreground/70", "data-disabled:pointer-events-none data-disabled:opacity-50", className )} {...props} /> ) } function ComposerAction({ side = "top", disabled, className, ...props }: React.ComponentProps) { const composer = useComposer() return ( ) } const iconSwap = "col-start-1 row-start-1 transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none" const iconSwapIn = "scale-100 opacity-100 blur-none" const iconSwapOut = "scale-[0.25] opacity-0 blur-[4px]" function ComposerSubmit({ sendLabel = "Send", stopLabel = "Stop", side = "top", disabled, onClick, className, ...props }: Omit, "children" | "type"> & { sendLabel?: string stopLabel?: string side?: React.ComponentProps["side"] }) { const composer = useComposer() const stoppable = composer.streaming && !!composer.onStop const waiting = composer.streaming && !composer.onStop const empty = composer.value.trim() === "" return ( { onClick?.(event) if (stoppable && !event.defaultPrevented) composer.onStop?.() }} className={cn( "rounded-lg data-disabled:pointer-events-none data-disabled:not-data-streaming:opacity-50", className )} {...props} /> } > {waiting ? ( ) : ( )} {stoppable ? stopLabel : sendLabel} {stoppable ? stopLabel : sendLabel} {stoppable ? "Esc" : "↵"} ) } export { Composer, ComposerAction, ComposerField, ComposerInput, ComposerSubmit, }

Composer

01Preview

02Installation