@ominiflow/sdk-react

Bindings React oficiais para o SDK TypeScript do OmniFlow. O pacote entrega OmniFlowProvider, hooks idiomáticos com TanStack Query e componentes opt-in para inbox rápido.

Instalação

npm install @ominiflow/sdk @ominiflow/sdk-react @tanstack/react-query
# ou
bun add @ominiflow/sdk @ominiflow/sdk-react @tanstack/react-query

Quick Start

import { OmniFlowProvider, MessageList, Composer, useSendMessage } from '@ominiflow/sdk-react';

function ConversationPanel() {
  const sendMessage = useSendMessage();

  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <MessageList conversationId="conv_123" />
      <Composer
        onSend={(text) =>
          sendMessage.mutateAsync({
            to: '+5511999999999',
            channel: 'whatsapp_official',
            content: { type: 'text', text },
          })
        }
      />
    </div>
  );
}

export function App() {
  return (
    <OmniFlowProvider config={{ jwt: 'jwt_emitido_pelo_backend', baseUrl: 'https://api.omniflow.com.br' }}>
      <ConversationPanel />
    </OmniFlowProvider>
  );
}

Provider

O OmniFlowProvider aceita um client já instanciado ou config do @ominiflow/sdk.

<OmniFlowProvider config={{ jwt: 'jwt_frontend', baseUrl: 'https://api.omniflow.com.br' }}>
  <App />
</OmniFlowProvider>

<OmniFlowProvider config={{ apiKey: 'omf_live_...' }}>
  <App />
</OmniFlowProvider>

<OmniFlowProvider
  config={{
    oauth: { clientId: 'client_123', clientSecret: 'secret_123' },
    baseUrl: 'https://api.omniflow.com.br',
  }}
>
  <App />
</OmniFlowProvider>

Hooks

useOmniFlow()

Retorna a instância do OmniFlow provida pelo contexto.

useConversations(filters?)

Executa client.conversations.list(filters) com query key namespaced.

useMessages(conversationId, options?)

Executa paginação cursor de mensagens com useInfiniteQuery.

useSendMessage()

Envia mensagens de texto/imagem/template com optimistic update quando conversationId é informado.

Componentes

<MessageList conversationId={...} />

• renderiza mensagens da conversa
• busca próxima página ao rolar para o topo
• placeholder de estado vazio

<Composer onSend={...} />

• textarea com envio por Enter
• emoji picker simples
• seletor de anexo opcional