MessageInput

Caja para escribir y enviar un mensaje, con botón de adjuntar opcional.

Cuándo usarlo

Props. placeholder, onSend(texto), onAttach, sendLabel, disabled. Enter envía y Mayús+Enter salta de línea. El botón Enviar se desactiva con el campo vacío.

Detalles. Envía el texto sin espacios a los lados. Con un método de entrada (IME) a medias, Enter confirma la palabra y no envía. attachLabel cambia el nombre accesible del botón de adjuntar.

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`placeholder`	`string`	`Escribe un mensaje`	También es el nombre accesible del campo si no pasas `aria-label`.
`onSend`	`((text: string) => void)`	—	Recibe el texto sin espacios a los lados. Enter envía y Mayús+Enter salta de línea.
`onAttach`	`(() => void)`	—	Con esta prop aparece el botón de adjuntar.
`sendLabel`	`string`	`Enviar`
`attachLabel`	`string`	`Adjuntar archivo`	Nombre accesible del botón de adjuntar.
`disabled`	`boolean`	—
`aria-label`	`string`	—
`className`	`string`	—

Código

import { MessageInput } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<MessageInput placeholder="Pregunta a Emptor…" onSend={enviar} />
		</>
	);
}

---
import { MessageInput } from "@jotis-me/react";
---

<MessageInput client:load placeholder="Pregunta a Emptor…" onSend={enviar} />

onSend es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.