Primitivas

Esta página es para el camino totalmente a medida. Si quieres el widget ya hecho, quédate en <Support />. Si vas a construir tu propia interfaz de soporte, estas primitivas son las piezas que hay debajo.

Para una implementación completa, usa el código del widget como base y trae solo las primitivas que necesites.

Las primitivas son piezas de interfaz headless. Dentro del entorno del widget pueden leer el estado del proveedor, pero fuera de él debes pasarles el estado, los manejadores y los datos de forma explícita.

Usa esta página cuando

• Support y los slots ya no te bastan
• quieres controlar el contenedor, la maquetación y el modelo de interacción del soporte
• prefieres piezas reutilizables en vez de copiar un widget monolítico

Importación

Usa importaciones con nombre desde el punto de entrada específico de primitivas. Así los empaquetadores pueden eliminar el código de línea de tiempo, opiniones, markdown y entrada que no renderices.

Copiarimport { Trigger, Window } from "@fluxolat/react/primitives";

El espacio de nombres Primitives del paquete raíz sigue siendo compatible, pero puede arrastrar un grafo de primitivas mucho mayor cuando se observa en tiempo de ejecución.

El ejemplo más pequeño que funciona

Copiarimport { Trigger } from "@fluxolat/react/primitives";
import { useState } from "react";
 
function CustomWidget() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <>
      <Trigger
        isOpen={isOpen}
        isTyping={false}
        onToggleOpen={() => setIsOpen((value) => !value)}
        unreadCount={0}
      >
        {({ isOpen }) => (
          <span>{isOpen ? "Close support" : "Open support"}</span>
        )}
      </Trigger>
 
      {isOpen ? (
        <div className="fixed bottom-20 right-4 w-96 border bg-white shadow-xl">
          <button onClick={() => setIsOpen(false)} type="button">
            Close
          </button>
          <p>Custom support content</p>
        </div>
      ) : null}
    </>
  );
}

Trigger no necesita proveedor si le pasas isOpen, onToggleOpen, unreadCount y, opcionalmente, isTyping. Window está pensado para el runtime del widget y debe quedarse dentro de SupportProvider o Support.Root.

Copiarimport { Window } from "@fluxolat/react/primitives";
import { useSupportConfig } from "@fluxolat/react/support-config";
 
function RuntimeWindow() {
  const { isOpen } = useSupportConfig();
 
  return (
    <Window>
      {({ close }) =>
        isOpen ? (
          <div className="fixed bottom-20 right-4 w-96 border bg-white shadow-xl">
            <button onClick={close} type="button">
              Close
            </button>
            <p>Custom support content</p>
          </div>
        ) : null
      }
    </Window>
  );
}

Piezas habituales

Este es un conjunto inicial seleccionado, no el catálogo completo de exportaciones. Consulta las declaraciones de tipos de @fluxolat/react/primitives de la versión que instales.

Estructura y navegación

• Primitives.Trigger
• Primitives.Window
• Primitives.Router
• Primitives.Config

Interfaz de conversación

• Primitives.ConversationTimeline
• Primitives.TimelineItem
• Primitives.TimelineItemGroup
• Primitives.ToolActivityRow

Entrada y retroalimentación

• Primitives.MultimodalInput
• Primitives.FileInput
• Primitives.FeedbackCommentInput
• Primitives.FeedbackRatingSelector
• Primitives.FeedbackTopicSelect

Piezas de presentación compartidas

• Primitives.Avatar
• Primitives.DaySeparator
• Primitives.TypingIndicator
• Primitives.Button

Responsabilidades de accesibilidad

Headless significa que la experiencia de usuario es cosa tuya. Una estructura lista para producción debe ofrecer:

• un disparador con nombre accesible y un área de al menos 44 por 44 píxeles CSS
• semántica de diálogo o de región complementaria acorde a la maquetación
• foco inicial, recorrido de teclado contenido, gestión de Escape y devolución del foco
• estados de foco visibles, etiquetas y errores en cada campo, y cambios de estado anunciados
• tamaños adaptables, compatibilidad con el zoom y comportamiento con movimiento reducido

El ejemplo mínimo solo demuestra el estado y unas importaciones concretas. Usa el código fuente de Support que se publica como referencia para estos detalles de interacción.

Cuándo parar aquí

• la versión headless ya funciona y lo único que te falta son los hooks o los tipos compartidos
• sigues queriendo el estado, la navegación y las APIs de mensajes de Fluxo bajo tu propia interfaz

Siguiente paso

• Avanzado para el camino totalmente personalizado y el punto de partida en código fuente
• Referencia de hooks para controlar el estado, el visitante y la navegación
• Referencia de tipos para los modelos de datos compartidos que hay detrás de los primitivos