Primitivas

Esta página é para o caminho totalmente sob medida. Se você quer o widget pronto, fique em <Support />. Se vai construir a sua própria interface de suporte, estas primitivas são as peças que ficam por baixo.

Para uma implementação completa, use o código do widget como base e traga apenas as primitivas de que precisa.

As primitivas são peças de interface headless. Dentro do ambiente do widget elas conseguem ler o estado do provedor, mas fora dele você deve passar o estado, os manipuladores e os dados de forma explícita.

Use esta página quando

• o Support e os slots já não bastam
• você quer controlar o contêiner, o layout e o modelo de interação do suporte
• prefere peças reutilizáveis em vez de copiar um widget monolítico

Importação

Use importações nomeadas do ponto de entrada específico de primitivas. Assim os empacotadores conseguem remover o código de linha do tempo, feedback, markdown e entrada que você não renderiza.

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

O namespace Primitives do pacote raiz continua compatível, mas pode arrastar um grafo de primitivas bem maior quando é observado em tempo de execução.

O menor exemplo 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 dispensa provider quando você passa isOpen, onToggleOpen, unreadCount e, opcionalmente, isTyping. Window foi feito para o runtime do widget e deve permanecer dentro de SupportProvider ou 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>
  );
}

Peças comuns

Este é um conjunto inicial selecionado, não o catálogo completo de exportações. Consulte as declarações de tipos de @fluxolat/react/primitives da versão que você instalar.

Estrutura e navegação

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

Interface de conversa

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

Entrada e feedback

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

Peças de exibição compartilhadas

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

Responsabilidades de acessibilidade

Headless significa que a experiência do usuário é responsabilidade sua. Uma estrutura pronta para produção precisa oferecer:

• um gatilho com nome acessível e uma área de no mínimo 44 por 44 pixels CSS
• semântica de diálogo ou de região complementar adequada ao layout
• foco inicial, percurso de teclado contido, tratamento de Escape e devolução do foco
• estados de foco visíveis, rótulos e erros em cada campo, e mudanças de estado anunciadas
• tamanhos responsivos, suporte a zoom e comportamento com movimento reduzido

O exemplo mínimo demonstra apenas o estado e algumas importações pontuais. Use o código-fonte do Support publicado como referência para esses detalhes de interação.

Quando parar por aqui

• a versão headless já funciona e o que falta são apenas os hooks ou os tipos compartilhados
• você ainda quer o estado, a navegação e as APIs de mensagens do Fluxo sob a sua própria interface

Próximo passo

• Avançado para o caminho totalmente personalizado e o ponto de partida em código-fonte
• Referência de hooks para controlar o estado, o visitante e a navegação
• Referência de tipos para os modelos de dados compartilhados por trás dos primitivos