Callix Client SDK React

O @callixbrasil/client-sdk-react oferece componentes e hooks React para facilitar a integração com o @callixbrasil/client-sdk em aplicações React.

Configuração do Provider

O primeiro passo para utilizar o Client SDK React é configurar o CallixClientProvider no seu aplicativo passando o domínio e o token de sessão do usuário (gerado com o @callixbrasil/server-sdk):

import React, { useContext } from 'react';
import { AuthenticatedUserContext } from '@/contexts/AuthenticatedUserContext';
import { CallixClientProvider } from '@callixbrasil/client-sdk-react';

export default function App() {
  // Supondo que você tenha um contexto de usuário autenticado
  const { callixSessionToken } = useContext(AuthenticatedUserContext); 

  return (
    <CallixClientProvider
      domain={process.env.NEXT_PUBLIC_CALLIX_DOMAIN || ''}
      userSessionToken={callixSessionToken}
    >
      {/* Conteúdo do seu aplicativo */}
    </CallixClientProvider>
  );
}

Com esse provider configurado, você pode utilizar os hooks do Client SDK React para gerenciar chamadas e exibir o estado do operador de chamadas de qualquer componente filho.

Hooks Principais

O @callixbrasil/client-sdk-react oferece diversos hooks para gerenciar chamadas:

useCallOperatorState

Este hook fornece o estado atual do operador de chamadas, incluindo informações sobre chamadas ativas, pausas e estado do sistema.

import { useCallOperatorState } from '@callixbrasil/client-sdk-react';

function CallManager() {
  const callOperatorState = useCallOperatorState();

  if (callOperatorState.state === 'idle') {
    return <div>Aguardando chamadas...</div>;
  }

  if (callOperatorState.state === 'callRinging') {
    return <div>Chamada recebida!</div>;
  }

  if (callOperatorState.state === 'callInProgress') {
    return <div>Chamada em andamento</div>;
  }

  if (callOperatorState.state === 'afterCall') {
    return <div>Pós-atendimento</div>;
  }

  // Outros estados: 'starting', 'onBreak', 'startupError', 'manualCallFailed', 'offline'
  
  return null;
}

useCallOperatorStartupError

Este hook fornece o motivo pelo qual a inicialização do operador de chamadas falhou (equivalente a consultar o campo error do estado startupError de useCallOperatorState), permitindo exibir uma mensagem específica para cada caso:

import { useCallOperatorStartupError } from '@callixbrasil/client-sdk-react';

function StartupErrorMessage() {
  const startupError = useCallOperatorStartupError();

  if (!startupError) {
    return null;
  }

  const messages = {
    missingAudioPermissions: 'Permita o acesso ao microfone para iniciar o atendimento.',
    maxUsersReached: 'Número máximo de usuários simultâneos contratado excedido.',
    userIsAlreadyConnectedOnAnotherDevice: 'Você já está disponível na tela de atendimento de outro lugar.',
    unknownError: 'Não foi possível iniciar o atendimento.',
  };

  return <div>{messages[startupError]}</div>;
}

useCallOperatorControls

import { useCallOperatorControls } from '@callixbrasil/client-sdk-react';

function CallOperatorControls() {
  const { becomeAvailable, goOffline, finishAfterCall } = useCallOperatorControls();

  return (
    <div>
      <button onClick={becomeAvailable}>Ficar Disponível</button>
      <button onClick={goOffline}>Ficar Offline</button>
      <button onClick={finishAfterCall}>Finalizar Pós-atendimento</button>
    </div>
  );
}

useCallOperatorCurrentCallControls

Este hook fornece funções para controlar a chamada atual, como atender, rejeitar e desligar:

import { useCallOperatorCurrentCallControls } from '@callixbrasil/client-sdk-react';

function CallButtons() {
  const { hangup } = useCallOperatorCurrentCallControls();

  return (
    <div>
      <button onClick={() => hangup()}>Desligar Chamada</button>
    </div>
  );
}

Essas funçôes de controle só executam quando há uma chamada ativa. Você pode verificar se existe uma chamada ativa usando useCallOperatorState.

useCallOperatorCurrentCallInfo

Este hook fornece informações detalhadas sobre a chamada atual como a campanha, lista e contato associados:

import { useCallOperatorCurrentCallInfo } from '@callixbrasil/client-sdk-react';

function CallInfoDisplay() {
  const callInfo = useCallOperatorCurrentCallInfo();

  if (!callInfo) {
    return null;
  }

  if (callInfo.type === 'campaign') {
    const { campaign, campaignList, campaignContact } = callInfo.info;
    
    return (
      <div>
        <h3>Informações da Chamada</h3>
        <p>Campanha: {campaign.name}</p>
        <p>Lista: {campaignList.name}</p>
        <p>Contato: {campaignContact.label}</p>
        <p>Número: {campaignContact.phoneNumber}</p>
        <ul>
          {campaignContact.fields.map((field) => (
            <li key={field.code}>
              {field.name}: {field.value ?? ''}
            </li>
          ))}
        </ul>
      </div>
    );
  }

  return null;
}

Controles de Áudio

O SDK também fornece hooks para controlar o áudio da chamada:

import { 
  useCallOperatorAudioInputMuted,
  useCallOperatorAudioOutputMuted,
  useCallOperatorAudioOutputVolume 
} from '@callixbrasil/client-sdk-react';

function AudioControls() {
  // Controle do microfone
  const [inputMuted, setInputMuted] = useCallOperatorAudioInputMuted();
  
  // Controle do alto-falante
  const [outputMuted, setOutputMuted] = useCallOperatorAudioOutputMuted();
  
  // Controle do volume
  const [outputVolume, setOutputVolume] = useCallOperatorAudioOutputVolume();

  return (
    <div>
      <button onClick={() => setInputMuted(!inputMuted)}>
        {inputMuted ? 'Ativar Microfone' : 'Desativar Microfone'}
      </button>
      
      <button onClick={() => setOutputMuted(!outputMuted)}>
        {outputMuted ? 'Ativar Som' : 'Desativar Som'}
      </button>
      
      <input 
        type="range" 
        min="0" 
        max="1" 
        step="0.01" 
        value={outputVolume} 
        onChange={(e) => setOutputVolume(parseFloat(e.target.value))} 
      />
    </div>
  );
}

Exemplo Completo

Abaixo está um exemplo completo de um componente que gerencia chamadas:

import { useCallOperatorState, useCallOperatorCurrentCallControls } from '@callixbrasil/client-sdk-react';

export function CallManager() {
  const { hangup } = useCallOperatorCurrentCallControls();
  const { becomeAvailable, finishAfterCall, goOffline } = useCallOperatorControls();
  
  const callInfo = useCallOperatorCurrentCallInfo();
  const callOperatorState = useCallOperatorState();

  if (!callOperatorState) {
    return null;
  }

  if (callOperatorState.state === 'starting') {
    return <div>Inicializando...</div>;
  }

  if (callOperatorState.state === 'idle') {
    return (
      <div>
        <h2>Aguardando chamadas...</h2>

        <button onClick={goOffline}>Ficar Disponível</button>
      </div>
    );
  }

  if (callOperatorState.state === 'offline') {
    return (
      <div>
        <h2>Operador offline</h2>

        <button onClick={becomeAvailable}>Ficar Disponível</button>
      </div>
    );
  }

  if (callOperatorState.state === 'callInProgress') {
    return (
      <div>
        <h2>Chamada em Andamento</h2>
        <button onClick={() => hangup()}>Desligar</button>
        {callInfo && callInfo.type === 'campaign' && (
          <div>
            <h3>Informações da Chamada</h3>
            <p>Campanha: {callInfo.info.campaign.name}</p>
            <p>Lista: {callInfo.info.campaignList.name}</p>
            <p>Número: {callInfo.info.campaignContact?.phoneNumber}</p>
            <p>Contato: {callInfo.info.campaignContact?.label}</p>
          </div>
        )}
      </div>
    );
  }

  if (callOperatorState.state === 'afterCall') {
    return (
      <div>
        <h2>Pós-atendimento</h2>

        <button onClick={finishAfterCall}>
          Finalizar Pós-atendimento
        </button>
      </div>
    );
  }

  return null;
}