Skip to component
GGamma

Message composer

A chat composer with attachments, character count, pending send, and retry.

New
0 / 2000

Enter sends. Shift+Enter adds a line. Attachments stay local until you send.

Live previewUse keyboard to interact

Implementation

1"use client";2 3import {4  useId,5  useRef,6  useState,7  type ChangeEvent,8  type FormEvent,9  type HTMLAttributes,10} from "react";11import { Paperclip, Send, X } from "lucide-react";12 13export type MessageComposerProps = Omit<14  HTMLAttributes<HTMLFormElement>,15  "onSubmit" | "defaultValue" | "children"16> & {17  label?: string;18  placeholder?: string;19  value?: string;20  defaultValue?: string;21  onValueChange?: (value: string) => void;22  onSubmit?: (value: string, attachments: File[]) => void | Promise<void>;23  onAttach?: (files: File[]) => void;24  accept?: string;25  maxLength?: number;26  maxFiles?: number;27  allowAttachments?: boolean;28  disabled?: boolean;