4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3fe6,"use client" import * as React from "react" import { ArrowBigUpIcon, ArrowUpIcon, CornerDownLeftIcon, MicIcon, PlusIcon, SquareIcon, } from "lucide-react" import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, } from "@/components/ui/input-group" import { Kbd, KbdGroup } from "@/components/ui/kbd" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" export type ComposerSubmit = { text: string files?: File[] } export type ComposerStatus = "ready" | "submitted" | "streaming" | "error" /** * Enter in the field (fine pointer / keyboard only): * - `submit` — Enter sends (default). Shift+Enter inserts a newline. * - `focus-send` — first Enter focuses the send button; Enter on send submits. * After submit, focus returns to the field so Enter cannot immediately stop. * Touch / coarse pointers: Enter always inserts a newline; send via the button. */ export type ComposerEnterKeyBehavior = "submit" | "focus-send" export type ComposerSlotProps = { disabled: boolean busy: boolean } export type ComposerProps = { value?: string defaultValue?: string onValueChange?: (value: string) => void onSubmit?: (message: ComposerSubmit) => void /** Map from useChat().status — drives send vs stop */ status?: ComposerStatus onStop?: () => void enterKeyBehavior?: ComposerEnterKeyBehavior placeholder?: string disabled?: boolean className?: string /** Host-owned purpose mode control (Ask / Plan / Debug, etc.) */ modeSlot?: React.ReactNode | ((props: ComposerSlotProps) => React.ReactNode) /** Visual mic slot — host wires STT (e.g. SpeechInput in docs) */ micSlot?: React.ReactNode | ((props: ComposerSlotProps) => React.ReactNode) /** Replace the default + attach control */ attachSlot?: React.ReactNode | ((props: ComposerSlotProps) => React.ReactNode) accept?: string multiple?: boolean onFilesChange?: (files: File[]) => void /** Enable Mod action shortcuts (attach / mode / dictation). Default true. Field Enter / Shift+Enter / Mod+Enter send behavior is separate. */ shortcuts?: boolean /** * Show Kbd shortcut tooltips on attach / mode / mic / send. * Default true. Only applies when `shortcuts` is also enabled — * set `shortcutTooltips={false}` to keep bindings without hover hints. */ shortcutTooltips?: boolean } export const COMPOSER_SHORTCUTS = { attach: "Mod+Shift+A", mode: "Mod+Shift+O", dictation: "Mod+Shift+D", send: "Mod+Enter", } as const /** Dispatched on the composer root for Mod+Shift+O — mode slots should cycle + expand. */ export const COMPOSER_MODE_SHORTCUT_EVENT = "composer:mode-shortcut" const CIRCLE_BTN = "size-8 shrink-0 rounded-full p-0 shadow-none [&_svg:not([class*='size-'])]:size-4" function isBusy(status: ComposerStatus | undefined) { return status === "submitted" || status === "streaming" } function resolveSlot( slot: ComposerProps["modeSlot"], props: ComposerSlotProps, ) { if (typeof slot === "function") return slot(props) return slot } function isMod(event: KeyboardEvent | React.KeyboardEvent) { return event.metaKey || event.ctrlKey } function readModKey(): "⌘" | "Ctrl" { const apple = /Mac|iPhone|iPad|iPod/.test(navigator.platform) || /Mac OS|Macintosh/.test(navigator.userAgent) return apple ? "⌘" : "Ctrl" } function useModKey() { return React.useSyncExternalStore( () => () => {}, readModKey, () => "Ctrl" as const, ) } /** True for mouse/trackpad hover devices — false on touch / coarse pointers. */ function useFinePointerHover() { return React.useSyncExternalStore( (onStoreChange) => { const mq = window.matchMedia("(hover: hover) and (pointer: fine)") mq.addEventListener("change", onStoreChange) return () => mq.removeEventListener("change", onStoreChange) }, () => window.matchMedia("(hover: hover) and (pointer: fine)").matches, () => false, ) } function formatShortcutLabel(shortcut: string, modKey: string) { return shortcut .split("+") .map((part) => (part === "Mod" ? modKey : part)) .join("+") } function ShortcutKey({ part }: { part: string }) { if (part === "Shift") { return ( ) } if (part === "Enter") { return ( ) } return {part} } export function ComposerShortcutKbd({ shortcut, modKey, className, }: { shortcut: string modKey: string className?: string }) { const parts = shortcut .split("+") .map((part) => (part === "Mod" ? modKey : part)) return ( {parts.map((part, index) => ( ))} ) } function ShortcutTooltip({ enabled, label, shortcut, modKey, children, }: { enabled: boolean label: string shortcut: string modKey: string children: React.ReactElement }) { const [open, setOpen] = React.useState(false) if (!enabled) return children return ( setOpen(false)} onClick={() => setOpen(false)} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") setOpen(false) }} /> {label} ) } function DefaultMicButton({ disabled }: { disabled?: boolean }) { return ( ) } export function Composer({ value: valueProp, defaultValue = "", onValueChange, onSubmit, status = "ready", onStop, enterKeyBehavior = "submit", placeholder = "Ask anything…", disabled = false, className, modeSlot, micSlot, attachSlot, accept, multiple = true, onFilesChange, shortcuts = true, shortcutTooltips = true, }: ComposerProps) { const modKey = useModKey() const finePointer = useFinePointerHover() const shortcutsActive = shortcuts && finePointer const showShortcutTooltips = shortcutsActive && shortcutTooltips const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue) const isControlled = valueProp != null const value = isControlled ? valueProp : uncontrolledValue const [files, setFiles] = React.useState([]) const rootRef = React.useRef(null) const textareaRef = React.useRef(null) const fileInputRef = React.useRef(null) const sendButtonRef = React.useRef(null) const busy = isBusy(status) const canSubmit = !disabled && !busy && (value.trim().length > 0 || files.length > 0) const slotProps: ComposerSlotProps = { disabled: disabled || busy, busy } function setValue(next: string) { if (!isControlled) setUncontrolledValue(next) onValueChange?.(next) } function setSelectedFiles(next: File[]) { setFiles(next) onFilesChange?.(next) } function clearAfterSubmit() { setValue("") setSelectedFiles([]) if (fileInputRef.current) fileInputRef.current.value = "" } function blurSendAfterSubmit() { sendButtonRef.current?.blur() textareaRef.current?.focus() } function submit() { if (!canSubmit) return onSubmit?.({ text: value.trim(), files: files.length > 0 ? files : undefined, }) clearAfterSubmit() blurSendAfterSubmit() } function handlePrimaryAction() { if (busy) { onStop?.() return } submit() } function openFilePicker() { if (disabled || busy) return fileInputRef.current?.click() } function activateAction(action: "attach" | "mode" | "dictation" | "send") { if (disabled) return if (action === "attach") { openFilePicker() return } if (action === "send") { handlePrimaryAction() return } if (action === "mode") { rootRef.current?.dispatchEvent( new CustomEvent(COMPOSER_MODE_SHORTCUT_EVENT, { bubbles: true }), ) return } const root = rootRef.current if (!root) return // Prefer the real control — wrapper spans from tooltips also carry the attr. const target = root.querySelector( `button[data-composer-action="${action}"]`, ) ?? root.querySelector(`[data-composer-action="${action}"]`) if (!target) return if (target instanceof HTMLButtonElement) { target.click() return } target.querySelector("button")?.click() } function handleEnterKey(event: React.KeyboardEvent) { if (event.nativeEvent.isComposing) return // Touch / coarse: Enter inserts a newline; send only via the button. if (!finePointer) return if (isMod(event) && event.key === "Enter") { event.preventDefault() if (busy) { onStop?.() return } submit() return } if (event.key !== "Enter") return if (event.shiftKey) { return } event.preventDefault() if (busy) { onStop?.() return } if (enterKeyBehavior === "focus-send") { sendButtonRef.current?.focus() return } submit() } React.useEffect(() => { if (!shortcutsActive) return function onKeyDown(event: KeyboardEvent) { if (event.defaultPrevented || event.isComposing) return if (!rootRef.current) return const active = document.activeElement const inside = active instanceof Node && rootRef.current.contains(active) if (!inside) return if (!isMod(event) || event.altKey) return if (event.shiftKey && event.key.toLowerCase() === "a") { event.preventDefault() activateAction("attach") return } if (event.shiftKey && event.key.toLowerCase() === "o") { if (event.repeat) return event.preventDefault() activateAction("mode") return } if (event.shiftKey && event.key.toLowerCase() === "d") { event.preventDefault() activateAction("dictation") return } if (event.key === "Enter") { event.preventDefault() activateAction("send") } } window.addEventListener("keydown", onKeyDown, true) return () => window.removeEventListener("keydown", onKeyDown, true) }, [shortcutsActive, disabled, busy, canSubmit, status]) const resolvedMode = resolveSlot(modeSlot, slotProps) const resolvedMic = micSlot === undefined ? ( ) : ( resolveSlot(micSlot, slotProps) ) const defaultAttachButton = ( ) const primaryLabel = busy ? "Stop generating" : "Send message" const primaryDisabled = disabled || (!busy && !canSubmit) const sendShortcut = formatShortcutLabel(COMPOSER_SHORTCUTS.send, modKey) const ariaKeyshortcuts = finePointer ? `Enter ${sendShortcut} Shift+Enter` : undefined const sendControl = ( {busy ? ( ) : ( )} ) return (

{files.length > 0 ? (

{files.length} file{files.length === 1 ? "" : "s"} attached

) : null} { const list = event.currentTarget.files setSelectedFiles(list ? Array.from(list) : []) }} /> setValue(event.currentTarget.value)} onKeyDown={handleEnterKey} />

{attachSlot === undefined ? ( {defaultAttachButton} ) : ( resolveSlot(attachSlot, slotProps) )}

{resolvedMode != null ? (

{resolvedMode}

) : null}

{resolvedMic != null ? ( {resolvedMic} ) : null} {primaryDisabled ? ( {sendControl} ) : ( sendControl )}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@layish","registryDependencies":["input-group","button","input","textarea","tooltip","kbd"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/new-york/blocks/composer/composer.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]