ChatInput
Caja de envío que crece con el texto: Enter envía, Shift+Enter salta de línea.
Usar
import { ChatInput } from "@unozero-ai/ui/react";
<ChatInput></ChatInput>Enviar
La caja guarda su propio texto: no necesita value ni onChange. Al pulsar Enter o el botón emite uz-send (en React, onSend) con el texto en e.detail.value y se vacía sola; añadirlo al hilo te toca a ti. Shift+Enter salta de línea. Escribe y envía.
El botón no se activa con la caja vacía o con solo espacios, y la caja crece hasta 5 líneas (maxRows) antes de hacer scroll. Nuevo en este kit: mientras un teclado de composición (japonés, chino, el dictado de algunos móviles) está armando una palabra, Enter confirma la palabra y no envía el mensaje a medias.
Adjuntos y plantillas
Los controles extra van como hijos con slot: start antes del texto (adjuntar), end entre el texto y el botón de envío (plantillas, micrófono) y above sobre la caja, para la vista previa de lo que se adjunta. Sustituyen a leftSlot, rightSlot y above del kit React. Con canSendEmpty se puede enviar un adjunto sin texto, como esta factura. Los controles son IconButton en ghost: el único relleno de la caja es el de enviar (la Regla de una Sola Decisión).
Para escribir en la caja desde fuera, como hace el botón de plantilla, contrólala: value y onInput, que lee e.currentTarget.value. Si la controlas, vacía tu estado en onSend: el envoltorio vuelve a poner value en cada render y, si no, el texto enviado regresa a la caja.
Enviando
uz-send se puede cancelar: con e.preventDefault() el texto se queda en la caja y la vacías tú cuando el servidor confirme. Mientras tanto, disabled bloquea la caja y el botón muestra el spinner; así un doble Enter no lo manda dos veces. hint sustituye la pista de teclado y maxLength (por defecto 2000) fija el límite que cuenta el número de la derecha, que pasa a aviso y a error al acercarse. Pulsa enviar.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).