Chat Composer

Vista previa

Chat Composer es una entrada de texto enriquecido para redactar mensajes de chat con una acción de envío. Root es un <form> que gestiona el envío, Input es un <textarea> que crece automáticamente y envía al pulsar Enter (Shift+Enter inserta un salto de línea), y SendButton se deshabilita cuando está vacío.

#Uso

Compón Root, Input, SendButton y AttachButton.

import * as ChatComposer from "@solidiom/chat-composer"

function Composer() {
  return (
    <ChatComposer.Root>
      <ChatComposer.AttachButton>Adjuntar</ChatComposer.AttachButton>
      <ChatComposer.Input placeholder="Escribe un mensaje" />
      <ChatComposer.SendButton>Enviar</ChatComposer.SendButton>
    </ChatComposer.Root>
  )
}

#Instalación

Instala el paquete con pnpm add @solidiom/chat-composer. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes

chat-composer expone 4 partes:

• Root — data-part="root". Un <form> que gestiona el envío.
• Input — data-part="input". Un <textarea> que crece automáticamente y envía con Enter (Shift+Enter inserta un salto de línea).
• SendButton — data-part="sendbutton". Envía el mensaje redactado; se deshabilita cuando la entrada está vacía.
• AttachButton — data-part="attachbutton". Control para adjuntar contenido al mensaje.

#Estilos

chat-composer incluye los atributos data-scope="chat-composer" y data-part en cada parte para seleccionar estilos CSS o recetas.

#Teclado y comportamiento

#Composición

Chat Composer se compone como superficie de entrada dentro de diseños y flujos de chat, junto con primitivos de lista de mensajes.

#SSR e hidratación

Chat Composer renderiza las marcas de su formulario en el servidor y activa el envío, el crecimiento automático y los manejadores de teclado durante la hidratación.

solidiom add chat-composer