Chat

Superficie conversacional para operar el sistema junto a la UI clásica. Solo pinta el chat: el módulo cablea el modelo, GraphQL y permisos.

Preview principal

CHAT · AIUXlive · sin red

Modo demo local — sin red. Enter envía · Shift+Enter nueva línea.

Asistenteahora

Puedo ayudarte a filtrar tickets, abrir ajustes o explicar una factura. ¿Qué necesitas?

Thread + Message + Composer · Enter envía · app cablea el modelo

Piezas

Componibles. Misma marca en cualquier módulo.

ANATOMÍA

Chat

Marco (borde, altura). Contiene Thread + Composer.

ChatThread

Log accesible (`role="log"`), empty slot, auto-scroll.

ChatMessage

Roles user / assistant / system · status streaming | error · actions.

ChatComposer

Textarea + enviar. `onSend(text)` — sin fetch dentro del DS.

En la librería vs en el módulo

Librería (`Chat*`)	Módulo / app
Thread, Message, Composer	Llamadas al LLM / agente
Estados visuales (streaming, error)	Tools, RAG, historial
Tema, a11y, Enter/Shift+Enter	Qué hace `onSend`

Uso

import { useState } from "react";
import { Chat, ChatThread, ChatMessage, ChatComposer } from "devsoftec-ui";

function Asistente() {
  const [items, setItems] = useState<{ role: "user" | "assistant"; text: string }[]>([]);

  return (
    <Chat>
      <ChatThread>
        {items.map((m, i) => (
          <ChatMessage key={i} role={m.role}>{m.text}</ChatMessage>
        ))}
      </ChatThread>
      <ChatComposer
        onSend={async (text) => {
          setItems((prev) => [...prev, { role: "user", text }]);
          // aquí tu fetch / bus de comandos
          const reply = await callAgent(text);
          setItems((prev) => [...prev, { role: "assistant", text: reply }]);
        }}
      />
    </Chat>
  );
}

Props

`Chat`

Contenedor. children = Thread + Composer (u otras franjas).

`ChatThread`

Prop	Tipo	Default	Descripción
`empty`	`ReactNode`	—	Vacío (p. ej. EmptyState)
`autoScroll`	`boolean`	`true`	Scroll al último mensaje
`children`	`ReactNode`	—	Lista de `ChatMessage`

`ChatMessage`

Prop	Tipo	Default	Descripción
`role`	`user \| assistant \| system`	—	Rol
`name`	`string`	i18n	Nombre
`avatarSrc` / `avatar`	`string` / `ReactNode`	—	Avatar
`timestamp`	`ReactNode`	—	Hora
`status`	`sent \| streaming \| error`	`sent`	Estado
`actions`	`ReactNode`	—	Copiar, regenerar…
`children`	`ReactNode`	—	Cuerpo

`ChatComposer`

Prop	Tipo	Default	Descripción
`onSend`	`(text: string) => void`	—	Envío (texto trim)
`value` / `onChange`	controlado	—	Opcional
`loading`	`boolean`	`false`	Botón loading
`disabled`	`boolean`	`false`	Bloquea input
`leading`	`ReactNode`	—	Acciones extra
`placeholder`	`string`	i18n	Placeholder

Comportamiento

Sin red dentro del DS
Composer: Enter envía · Shift+Enter nueva línea
Thread: role="log" + aria-live="polite"
Acciones de riesgo → siguen siendo AlertDialog en la UI clásica