Interfaces de IA y editor de texto
Las piezas de una interfaz de asistente salen del chat del asistente de AMSET, que las usa a diario: la caja de entrada, los mensajes, el razonamiento, las llamadas a herramientas, el registro de lo que hace un agente, los ficheros que genera y el selector de modelo. Son 16, sin dependencias, con un CSS por componente y todo dicho con texto además de con color.
Los componentes
Adjunto
Attachment
Aprobar una acción del agente
AgentApprovalDialog
Buscar en la conversación
FindBar
Consumo de IA
AIUsageDashboard
Editor de plantillas
PromptTemplateEditor
Entrada de prompt
PromptInput
Flujo de un agente
AgentWorkflowEditor
Llamada a herramienta
ToolCall
Mensaje de chat
ChatMessage
Razonamiento
Reasoning
Registro de actividad
ActivityLog
Selector de motor
ModelSelector
Sugerencias
Suggestions
Tarjeta de artefacto
ArtifactCard
Uso y coste
UsageBadge
Visor de imagen
ImageViewer
PromptInputcrece con el texto hasta un tope, envía con Intro y baja de línea con Mayús+Intro (sin enviar mientras se compone con un IME), recupera lo último con la flecha arriba y admite ficheros pegados, arrastrados o elegidos. ConbusyModesse puede seguir escribiendo mientras responde: añadir al turno, parar y corregir o encolar.ChatMessagetrae copiar, regenerar y editar en la misma burbuja, y acciones propias.ActivityLogsigue el final solo si ya estabas abajo y junta los eventos repetidos; congroup, un historial de varias tareas.FindBarbusca dentro de una conversación larga, donde el buscador del navegador no ve lo que no se ha cargado.ArtifactFrameaísla el HTML que genera un asistente consandbox="allow-scripts", nunca conallow-same-origin.
Editor de texto enriquecido
El editor de texto de la biblioteca es RichTextEditor, de @amset/ui/rich-text: propio, sin dependencias de terceros, con revisión, historial de versiones y fórmulas. Tiene su propia página, con demos. La barra, RichTextToolbar, también se puede usar sola con el motor de edición que ya tengas; esto es lo que habla con ella:
| Sentido | Prop | Qué lleva |
|---|---|---|
| editor → barra | state | Lo que hay puesto donde está el cursor (active), lo que no se puede usar ahora (unavailable) y el enlace del cursor (link). |
| barra → editor | onCommand | La orden: 'bold', 'heading2', 'bulletList', 'undo', 'clearFormatting'… |
| barra → editor | onLinkChange | { href, newTab } ya comprobado, o null para quitarlo. |
| barra → editor | onImageInsert | { src, alt } ya comprobado; alt solo va vacío si la imagen se marca como decorativa. |
| aplicación → barra | shortcuts | Los atajos del editor (Mod+B), que la barra anuncia y enseña en su ayuda. Los escucha el editor, no la barra. |
- Una sola parada del tabulador para toda la barra, flechas entre botones y memoria del foco al volver.
- Cada formato es un
ToggleButtonconaria-pressed; pulsarlo con el ratón no le quita el foco al editor, así que la selección se queda donde estaba. - Los paneles de enlace e imagen solo se montan al abrirlos y no son un
<form>: la barra vale dentro del formulario de tu aplicación. - Las direcciones se comprueban con
normalizeLinkHrefynormalizeImageSrc(lista blanca de esquemas: unjavascript:o undata:no pasan). La barra no limpia lo que guarda el editor: ese HTML se sanea en el servidor antes de guardarlo o pintarlo.