Composer

1"use client";
2 
3import type { FC, ReactNode } from "react";
4import { useCallback, useEffect, useRef, useState } from "react";
5import {
6	ArrowUp02Icon,
7	HugeiconsIcon,
8	PlusSignIcon,
9	ToolsIcon,
10} from "@/components/icons";
11import { cn } from "@/lib/utils";
12import {
13	FilePreview,
14	type UploadedFile,
15} from "@/registry/new-york/ui/file-preview";
16import {
17	SlashCommandDropdown,
18	type SlashCommandMatch,
19	type Tool,
20} from "@/registry/new-york/ui/slash-command-dropdown";
21 
22// Re-export types for convenience
23export type { Tool, SlashCommandMatch, UploadedFile };
24 
25export interface ComposerContextOption {
26	id: string;
27	label: string;
28	icon?: ReactNode;
29	description?: string;
30	onClick?: () => void;
31}
32 
33export interface ComposerProps {
34	/** Placeholder text for the input */
35	placeholder?: string;
36	/** Callback when message is submitted */
37	onSubmit?: (message: string, files?: UploadedFile[]) => void;
38	/** Callback when input value changes */
39	onChange?: (value: string) => void;
40	/** Whether the composer is disabled */
41	disabled?: boolean;
42	/** Whether to show the tools button */
43	showToolsButton?: boolean;
44	/** Callback when a tool is selected from slash command dropdown */
45	onToolSelect?: (tool: Tool) => void;
46	/** Available tools for the slash command dropdown */
47	tools?: Tool[];
48	/** Callback when attach button is clicked (if no context options) */
49	onAttachClick?: () => void;
50	/** Context options for the plus button dropdown */
51	contextOptions?: ComposerContextOption[];
52	/** Whether to auto-focus the input */
53	autoFocus?: boolean;
54	/** Maximum rows for the textarea */
55	maxRows?: number;
56	/** Initial value */
57	defaultValue?: string;
58	/** Controlled value */
59	value?: string;
60	/** Additional className for the container */
61	className?: string;
62	/** Attached files to display */
63	attachedFiles?: UploadedFile[];
64	/** Callback to remove an attached file */
65	onRemoveFile?: (id: string) => void;
66	/** Whether the composer is in loading state */
67	isLoading?: boolean;
68}
69 
70// Primary color matching GAIA: #00bbff
71const PRIMARY_COLOR = "#00bbff";
72 
73export const Composer: FC<ComposerProps> = ({
74	placeholder = "What can I do for you today?",
75	onSubmit,
76	onChange,
77	disabled = false,
78	showToolsButton = true,
79	onToolSelect,
80	tools = [],
81	onAttachClick,
82	contextOptions,
83	autoFocus = false,
84	maxRows = 8,
85	defaultValue = "",
86	value,
87	className,
88	attachedFiles = [],
89	onRemoveFile,
90	isLoading = false,
91}) => {
92	const [inputValue, setInputValue] = useState(defaultValue);
93// … truncated