50: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"] 51: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"] 52:T31ee,"use client"; import type { FC, ReactNode } from "react"; import { useCallback, useEffect, useRef, useState } from "react"; import { ArrowUp02Icon, HugeiconsIcon, PlusSignIcon, ToolsIcon, } from "@/components/icons"; import { cn } from "@/lib/utils"; import { FilePreview, type UploadedFile, } from "@/registry/new-york/ui/file-preview"; import { SlashCommandDropdown, type SlashCommandMatch, type Tool, } from "@/registry/new-york/ui/slash-command-dropdown"; // Re-export types for convenience export type { Tool, SlashCommandMatch, UploadedFile }; export interface ComposerContextOption { id: string; label: string; icon?: ReactNode; description?: string; onClick?: () => void; } export interface ComposerProps { /** Placeholder text for the input */ placeholder?: string; /** Callback when message is submitted */ onSubmit?: (message: string, files?: UploadedFile[]) => void; /** Callback when input value changes */ onChange?: (value: string) => void; /** Whether the composer is disabled */ disabled?: boolean; /** Whether to show the tools button */ showToolsButton?: boolean; /** Callback when a tool is selected from slash command dropdown */ onToolSelect?: (tool: Tool) => void; /** Available tools for the slash command dropdown */ tools?: Tool[]; /** Callback when attach button is clicked (if no context options) */ onAttachClick?: () => void; /** Context options for the plus button dropdown */ contextOptions?: ComposerContextOption[]; /** Whether to auto-focus the input */ autoFocus?: boolean; /** Maximum rows for the textarea */ maxRows?: number; /** Initial value */ defaultValue?: string; /** Controlled value */ value?: string; /** Additional className for the container */ className?: string; /** Attached files to display */ attachedFiles?: UploadedFile[]; /** Callback to remove an attached file */ onRemoveFile?: (id: string) => void; /** Whether the composer is in loading state */ isLoading?: boolean; } // Primary color matching GAIA: #00bbff const PRIMARY_COLOR = "#00bbff"; export const Composer: FC = ({ placeholder = "What can I do for you today?", onSubmit, onChange, disabled = false, showToolsButton = true, onToolSelect, tools = [], onAttachClick, contextOptions, autoFocus = false, maxRows = 8, defaultValue = "", value, className, attachedFiles = [], onRemoveFile, isLoading = false, }) => { const [inputValue, setInputValue] = useState(defaultValue); const [isToolsDropdownOpen, setIsToolsDropdownOpen] = useState(false); const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); const [selectedCategory, setSelectedCategory] = useState("all"); const selectedToolIndex = 0; // Currently no keyboard navigation, always start at 0 const textareaRef = useRef(null); const composerRef = useRef(null); // Use controlled or uncontrolled value const currentValue = value !== undefined ? value : inputValue; // Handle input change const handleInputChange = useCallback( (e: React.ChangeEvent) => { const newValue = e.target.value; if (value === undefined) { setInputValue(newValue); } onChange?.(newValue); }, [onChange, value], ); // Auto-resize textarea // biome-ignore lint/correctness/useExhaustiveDependencies: currentValue triggers resize when content changes useEffect(() => { const textarea = textareaRef.current; if (!textarea) return; textarea.style.height = "auto"; const lineHeight = 24; const maxHeight = lineHeight * maxRows; const newHeight = Math.min(textarea.scrollHeight, maxHeight); textarea.style.height = `${newHeight}px`; }, [currentValue, maxRows]); // Handle form submit const handleSubmit = useCallback( (e?: React.FormEvent) => { e?.preventDefault(); if (isLoading) return; if (currentValue.trim() || attachedFiles.length > 0) { onSubmit?.(currentValue, attachedFiles); if (value === undefined) { setInputValue(""); } } }, [currentValue, attachedFiles, onSubmit, value, isLoading], ); // Handle key down const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey && !disabled && !isLoading) { e.preventDefault(); handleSubmit(); } if (e.key === "Escape") { setIsToolsDropdownOpen(false); setIsContextMenuOpen(false); } }, [handleSubmit, disabled, isLoading], ); // Handle tools button click const handleToolsClick = useCallback(() => { if (isLoading) return; setIsToolsDropdownOpen(!isToolsDropdownOpen); setIsContextMenuOpen(false); }, [isToolsDropdownOpen, isLoading]); // Handle context menu click const handleContextClick = useCallback(() => { if (isLoading) return; if (contextOptions && contextOptions.length > 0) { setIsContextMenuOpen(!isContextMenuOpen); setIsToolsDropdownOpen(false); } else { onAttachClick?.(); } }, [contextOptions, isContextMenuOpen, onAttachClick, isLoading]); // Handle tool selection const handleToolSelect = useCallback( (match: SlashCommandMatch) => { onToolSelect?.(match.tool); setIsToolsDropdownOpen(false); }, [onToolSelect], ); // Close dropdowns when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { const target = event.target as Element; if ( !composerRef.current?.contains(target) && !target.closest(".slash-command-dropdown") ) { setIsToolsDropdownOpen(false); setIsContextMenuOpen(false); } }; document.addEventListener("click", handleClickOutside); return () => document.removeEventListener("click", handleClickOutside); }, []); // Focus input on mount if autoFocus is true useEffect(() => { if (autoFocus && textareaRef.current) { textareaRef.current.focus(); } }, [autoFocus]); // Convert tools to matches for dropdown const toolMatches: SlashCommandMatch[] = tools.map((tool) => ({ tool, score: 1, })); // Get unique categories const categories = ["all", ...new Set(tools.map((t) => t.category))]; const canSubmit = currentValue.trim() || attachedFiles.length > 0; return (

{/* Main Composer Container - light mode friendly */}

{/* Slash Command Dropdown - positioned above composer */} {showToolsButton && tools.length > 0 && isToolsDropdownOpen && (

setIsToolsDropdownOpen(false)} position={{ left: 0, width: undefined }} isVisible={true} openedViaButton={true} selectedCategory={selectedCategory} categories={categories} onCategoryChange={setSelectedCategory} className="relative w-full" style={{ position: "relative" }} />

)} {/* Attached Files Preview - using FilePreview component */} {/* Textarea Input */}

{/* Hint for slash commands */}
						<div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1 text-xs text-zinc-400 dark:text-zinc-500 pointer-events-none">
							<kbd className="rounded bg-zinc-200 dark:bg-zinc-700 px-1.5 py-0.5 text-[10px] font-medium text-zinc-500 dark:text-zinc-400">
								/
							</kbd>
							<span>for tools</span>
						</div>
					</div>
				</form>

{/* Toolbar */}
				<div className="flex items-center justify-between px-2 pt-1">
					<div className="flex items-center gap-1">
						{/* Add Context / Attach Button */}
						<div className="relative">
							<button
								type="button"
								onClick={handleContextClick}
								disabled={disabled || isLoading}
								className={cn(
									"group relative flex h-9 w-9 items-center justify-center rounded-full cursor-pointer",
									// Light mode colors
									"bg-zinc-200 dark:bg-zinc-700 transition-colors",
									"hover:bg-zinc-300 dark:hover:bg-zinc-600/90",
									"disabled:cursor-wait disabled:opacity-70",
									isContextMenuOpen && "bg-zinc-300 dark:bg-zinc-600",
								)}
								aria-label="Add context or attach files"
							>
								<HugeiconsIcon
									icon={PlusSignIcon}
									size={23}
									className="text-zinc-500 dark:text-zinc-400"
								/>
							</button>

{/* Context Menu Dropdown */}
							{isContextMenuOpen && contextOptions && (
								<div className="absolute bottom-full left-0 mb-2 min-w-[200px] rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-1 shadow-xl overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2 duration-150">
									{contextOptions.map((option) => (
										<button
											key={option.id}
											type="button"
											onClick={() => {
												option.onClick?.();
												setIsContextMenuOpen(false);
											}}
											className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-zinc-900 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
										>
											{option.icon && (
												<span
													className="flex-shrink-0"
													style={{ color: PRIMARY_COLOR }}
												>
													{option.icon}
												</span>
											)}
											<div className="flex flex-col">
												<span>{option.label}</span>
												{option.description && (
													<span className="text-xs text-zinc-500 dark:text-zinc-400">
														{option.description}
													</span>
												)}
											</div>
										</button>
									))}
								</div>
							)}
						</div>

{/* Tools Button */}
						{showToolsButton && (
							<button
								type="button"
								onClick={handleToolsClick}
								disabled={disabled || isLoading}
								className={cn(
									"group relative flex h-9 w-9 items-center justify-center rounded-full cursor-pointer",
									// Light mode colors
									"bg-zinc-200 dark:bg-zinc-700 text-zinc-500 dark:text-zinc-400 transition-colors",
									"hover:bg-zinc-300 dark:hover:bg-zinc-600/90",
									"disabled:cursor-wait disabled:opacity-70",
									// Active state
									isToolsDropdownOpen &&
										"bg-[#00bbff]/20 text-[#00bbff] hover:bg-[#00bbff]/30 dark:hover:bg-[#00bbff]/40",
								)}
								aria-label="Browse all tools"
							>
								<HugeiconsIcon icon={ToolsIcon} size={23} />
								{isToolsDropdownOpen && (
									<span
										className="absolute top-0 right-0 h-2 w-2 rounded-full transition"
										style={{ backgroundColor: PRIMARY_COLOR }}
										aria-hidden="true"
									/>
								)}
							</button>
						)}
					</div>

{/* Send Button */}
					<button
						type="button"
						onClick={() => handleSubmit()}
						disabled={disabled || isLoading || !canSubmit}
						className={cn(
							"flex h-9 w-9 min-w-9 max-w-9 items-center justify-center rounded-full transition-colors cursor-pointer",
							"disabled:cursor-not-allowed",
							// Enabled state - primary color background
							canSubmit && "bg-[#00bbff] text-white hover:bg-[#00a3e0]",
							// Disabled state - visible gray background that contrasts with composer
							!canSubmit &&
								"bg-zinc-200 dark:bg-zinc-700 text-zinc-400 dark:text-zinc-500",
						)}
						aria-label="Send message"
					>
						<HugeiconsIcon icon={ArrowUp02Icon} size={20} />
					</button>
				</div>
			</div>
		</div>
	);
};

export default Composer;
4f:["$","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,["$","$L50",null,{"namespace":"@gaia","registryDependencies":["icons","file-preview","slash-command-dropdown"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/ui/composer.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>