{"_id":"@callixbrasil/client-sdk-react","_rev":"6-7616c9637a4ee600e33591dd61849879","name":"@callixbrasil/client-sdk-react","dist-tags":{"latest":"1.1.0"},"versions":{"0.0.8":{"name":"@callixbrasil/client-sdk-react","version":"0.0.8","keywords":["callix","sdk","react","hooks","voip","webrtc","softphone","call-center","telephony","contact-center"],"author":{"url":"https://callix.com.br","name":"Callix","email":"suporte@callix.com.br"},"license":"UNLICENSED","_id":"@callixbrasil/client-sdk-react@0.0.8","maintainers":[{"name":"callix-dev","email":"dev@callix.com.br"}],"homepage":"https://github.com/callixbrasil/callix-sdk/tree/main/packages/client-sdk-react#readme","bugs":{"url":"https://github.com/callixbrasil/callix-sdk/issues"},"dist":{"shasum":"1d1ece4d1ef1596f4945f7f6261b3f4aa486ce56","tarball":"https://registry.npmjs.org/@callixbrasil/client-sdk-react/-/client-sdk-react-0.0.8.tgz","fileCount":4,"integrity":"sha512-TbVCxBEIDePBPwD3bZ9l2q0YWJkMrB29bwQJ22GSeYaeWYn0Gja9iJ5LDWu6x1N4mmenhL335R1jgewfhD3vzA==","signatures":[{"sig":"MEYCIQCN3KRe1ODSIfgdwbghlJ+w0N6Oe7eIkv/O21uOPfAyhAIhAOIlEhA463zombrXqlchko9tp4Q+sgw/GfW3SVGBb2T5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22034},"main":"index.js","_from":"file:callixbrasil-client-sdk-react-0.0.8.tgz","types":"index.d.ts","scripts":{},"_npmUser":{"name":"callix-dev","email":"dev@callix.com.br"},"_resolved":"/tmp/01b71492deef64da41369591044f4e20/callixbrasil-client-sdk-react-0.0.8.tgz","_integrity":"sha512-TbVCxBEIDePBPwD3bZ9l2q0YWJkMrB29bwQJ22GSeYaeWYn0Gja9iJ5LDWu6x1N4mmenhL335R1jgewfhD3vzA==","repository":{"url":"git+https://github.com/callixbrasil/callix-sdk.git","type":"git","directory":"packages/client-sdk-react"},"_npmVersion":"10.9.8","description":"Componentes em React para o SDK cliente da Callix","directories":{},"_nodeVersion":"22.22.3","dependencies":{"bunshi":"^2.1.5","@callixbrasil/client-sdk":"^0.0.7"},"publishConfig":{"access":"public","directory":"dist"},"_hasShrinkwrap":false,"devDependencies":{},"peerDependencies":{"react":"^19","react-dom":"^19","@callixbrasil/client-sdk":"^0.0.7"},"_npmOperationalInternal":{"tmp":"tmp/client-sdk-react_0.0.8_1780367830920_0.9673185016403834","host":"s3://npm-registry-packages-npm-production"}},"0.0.9":{"name":"@callixbrasil/client-sdk-react","version":"0.0.9","keywords":["callix","sdk","react","hooks","voip","webrtc","softphone","call-center","telephony","contact-center"],"author":"Callix (https://callix.com.br)","license":"UNLICENSED","_id":"@callixbrasil/client-sdk-react@0.0.9","maintainers":[{"name":"danielsarsi","email":"danielsarsi@gmail.com"},{"name":"callix-dev","email":"dev@callix.com.br"}],"homepage":"https://github.com/callixbrasil/callix-sdk/tree/main/packages/client-sdk-react#readme","bugs":{"url":"https://github.com/callixbrasil/callix-sdk/issues"},"dist":{"shasum":"080c563c190f4ee31b0cdf2bd1485a0d78d8e883","tarball":"https://registry.npmjs.org/@callixbrasil/client-sdk-react/-/client-sdk-react-0.0.9.tgz","fileCount":4,"integrity":"sha512-A5i9e+1u7alJRQ2c68WJxhgHhRdQIawwBWfh1HA2tzMoWcQRdjtgFYIEnPB8wSC1kE7ftWmy7Lc89jQmTuJgTw==","signatures":[{"sig":"MEYCIQDA9wJ3j9rpDexleu5Jolwv71RGKHaGlAQjB1ST0lwI9wIhAJPaY8kPXIa5Upm1QWmzrrBEqVchbxksbpSYc+71vCG+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22034},"main":"index.js","types":"index.d.ts","scripts":{},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:2bda8c63-571f-4dbe-9611-a098806d9b91"}},"repository":{"url":"git+https://github.com/callixbrasil/callix-sdk.git","type":"git","directory":"packages/client-sdk-react"},"description":"Componentes em React para o SDK cliente da Callix","directories":{},"_nodeVersion":"24.17.0","dependencies":{"bunshi":"^2.1.5","@callixbrasil/client-sdk":"^0.0.8"},"publishConfig":{"access":"public","directory":"dist"},"_hasShrinkwrap":false,"devDependencies":{},"peerDependencies":{"react":"^19","react-dom":"^19","@callixbrasil/client-sdk":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/client-sdk-react_0.0.9_1782442237734_0.8620034757504043","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@callixbrasil/client-sdk-react","version":"1.0.0","keywords":["callix","sdk","react","hooks","voip","webrtc","softphone","call-center","telephony","contact-center"],"author":"Callix (https://callix.com.br)","license":"UNLICENSED","_id":"@callixbrasil/client-sdk-react@1.0.0","maintainers":[{"name":"danielsarsi","email":"danielsarsi@gmail.com"},{"name":"callix-dev","email":"dev@callix.com.br"}],"homepage":"https://github.com/callixbrasil/callix-sdk/tree/main/packages/client-sdk-react#readme","bugs":{"url":"https://github.com/callixbrasil/callix-sdk/issues"},"dist":{"shasum":"7fe4957ac34684beb84f7986f8c361a4368667a4","tarball":"https://registry.npmjs.org/@callixbrasil/client-sdk-react/-/client-sdk-react-1.0.0.tgz","fileCount":4,"integrity":"sha512-/OZNFIrsuQM0poCKv+hMs9sbLCdKooSFFf9I5L+eqH0POaK4Rb9r+OSDmKeH16a2PKjJuRb6RrX0js1Jpebmqg==","signatures":[{"sig":"MEYCIQD1JTw6BXXjYRxlwatVcO2AM4hTiHLbQMH4NDPj3KaEBQIhAJ3wbWvlPQHpw3KaVCpV78PVS48MAw9UnZpRwihwohG5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22034},"main":"index.js","types":"index.d.ts","scripts":{},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:2bda8c63-571f-4dbe-9611-a098806d9b91"}},"repository":{"url":"git+https://github.com/callixbrasil/callix-sdk.git","type":"git","directory":"packages/client-sdk-react"},"description":"Componentes em React para o SDK cliente da Callix","directories":{},"_nodeVersion":"24.18.0","dependencies":{"bunshi":"^2.1.5","@callixbrasil/client-sdk":"^1.0.0"},"publishConfig":{"access":"public","directory":"dist"},"_hasShrinkwrap":false,"devDependencies":{},"peerDependencies":{"react":"^19","react-dom":"^19","@callixbrasil/client-sdk":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/client-sdk-react_1.0.0_1785770810461_0.17613007482361853","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@callixbrasil/client-sdk-react","version":"1.0.1","keywords":["callix","sdk","react","hooks","voip","webrtc","softphone","call-center","telephony","contact-center"],"author":"Callix (https://callix.com.br)","license":"UNLICENSED","_id":"@callixbrasil/client-sdk-react@1.0.1","maintainers":[{"name":"danielsarsi","email":"danielsarsi@gmail.com"},{"name":"callix-dev","email":"dev@callix.com.br"}],"homepage":"https://github.com/callixbrasil/callix-sdk/tree/main/packages/client-sdk-react#readme","bugs":{"url":"https://github.com/callixbrasil/callix-sdk/issues"},"dist":{"shasum":"bd1579ac67d36bb91b32b94cecd130368dc616cb","tarball":"https://registry.npmjs.org/@callixbrasil/client-sdk-react/-/client-sdk-react-1.0.1.tgz","fileCount":4,"integrity":"sha512-gRQZrwdMg+JyFTlUas1W1uAc4xd3vAhh7BG0ueT73D+ZYDe1iVaCODdd1BVtL/dTCLvNThOwkWOy3pcWBv/NpQ==","signatures":[{"sig":"MEUCIFRXKCVxpkMB/rh/JLV9S5awKI1oFvLP9nQ7JdJ9QCHLAiEAnA9PKgIfmDNlyXAhvyXwncPebWiAgSxEnat5hIeM53I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22394},"main":"index.js","types":"index.d.ts","scripts":{},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:2bda8c63-571f-4dbe-9611-a098806d9b91"}},"repository":{"url":"git+https://github.com/callixbrasil/callix-sdk.git","type":"git","directory":"packages/client-sdk-react"},"description":"Componentes em React para o SDK cliente da Callix","directories":{},"_nodeVersion":"24.18.0","dependencies":{"bunshi":"^2.1.5","@callixbrasil/client-sdk":"^1.0.1"},"publishConfig":{"access":"public","directory":"dist"},"_hasShrinkwrap":false,"devDependencies":{},"peerDependencies":{"react":"^19","react-dom":"^19","@callixbrasil/client-sdk":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/client-sdk-react_1.0.1_1785936059336_0.8960782220494949","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@callixbrasil/client-sdk-react","version":"1.1.0","description":"Componentes em React para o SDK cliente da Callix","keywords":["callix","sdk","react","hooks","voip","webrtc","softphone","call-center","telephony","contact-center"],"license":"SEE LICENSE IN LICENSE.md","author":"Callix (https://callix.com.br)","homepage":"https://github.com/callixbrasil/callix-sdk/tree/main/packages/client-sdk-react#readme","repository":{"type":"git","url":"git+https://github.com/callixbrasil/callix-sdk.git","directory":"packages/client-sdk-react"},"bugs":{"url":"https://github.com/callixbrasil/callix-sdk/issues"},"main":"index.js","dependencies":{"bunshi":"^2.1.5","@callixbrasil/client-sdk":"^1.1.0"},"peerDependencies":{"react":"^19","react-dom":"^19","@callixbrasil/client-sdk":"^1.1.0"},"publishConfig":{"access":"public"},"types":"index.d.ts","_nodeVersion":"24.19.0","_id":"@callixbrasil/client-sdk-react@1.1.0","dist":{"integrity":"sha512-kwKef6o/xnaPM5+I1Av5RoBVT0ZMJlsvJSjw0/atdF0qU6XM7cMrBoUu8LinZk8k6pSAhacAhL/krZBXAMhN7g==","shasum":"4d2c60cd5f353442aba6b81b98d7cf958c04d650","tarball":"https://registry.npmjs.org/@callixbrasil/client-sdk-react/-/client-sdk-react-1.1.0.tgz","fileCount":5,"unpackedSize":23519,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFRAhoxnhWNYFUcUc0KnGSfLzVwIT8wB9vEFL8Q0Xe4PAiBT6929T0Tl+bMAaxzNs6t+CT4SWgaznrMrEhbBDzGdqQ=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:2bda8c63-571f-4dbe-9611-a098806d9b91"}},"directories":{},"maintainers":[{"name":"danielsarsi","email":"danielsarsi@gmail.com"},{"name":"callix-dev","email":"dev@callix.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/client-sdk-react_1.1.0_1787088239719_0.3933752610510015"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-02T02:37:10.810Z","modified":"2026-08-18T21:24:00.062Z","0.0.8":"2026-06-02T02:37:11.053Z","0.0.9":"2026-06-26T02:50:37.873Z","1.0.0":"2026-08-03T15:26:50.612Z","1.0.1":"2026-08-05T13:20:59.496Z","1.1.0":"2026-08-18T21:23:59.868Z"},"bugs":{"url":"https://github.com/callixbrasil/callix-sdk/issues"},"author":"Callix (https://callix.com.br)","license":"SEE LICENSE IN LICENSE.md","homepage":"https://github.com/callixbrasil/callix-sdk/tree/main/packages/client-sdk-react#readme","keywords":["callix","sdk","react","hooks","voip","webrtc","softphone","call-center","telephony","contact-center"],"repository":{"type":"git","url":"git+https://github.com/callixbrasil/callix-sdk.git","directory":"packages/client-sdk-react"},"description":"Componentes em React para o SDK cliente da Callix","maintainers":[{"name":"danielsarsi","email":"danielsarsi@gmail.com"},{"name":"callix-dev","email":"dev@callix.com.br"}],"readme":"# Callix Client SDK React\n\nO `@callixbrasil/client-sdk-react` oferece componentes e hooks React para facilitar a integração\ncom o [`@callixbrasil/client-sdk`](https://www.npmjs.com/package/@callixbrasil/client-sdk) em\naplicações React.\n\n\n## Configuração do Provider\n\nO primeiro passo para utilizar o Client SDK React é configurar o `CallixClientProvider` no seu\naplicativo passando o domínio e o token de sessão do usuário (gerado com o\n[`@callixbrasil/server-sdk`](https://www.npmjs.com/package/@callixbrasil/server-sdk)):\n\n```tsx\nimport React, { useContext } from 'react';\nimport { AuthenticatedUserContext } from '@/contexts/AuthenticatedUserContext';\nimport { CallixClientProvider } from '@callixbrasil/client-sdk-react';\n\nexport default function App() {\n // Supondo que você tenha um contexto de usuário autenticado\n const { callixSessionToken } = useContext(AuthenticatedUserContext); \n\n return (\n \n {/* Conteúdo do seu aplicativo */}\n \n );\n}\n```\n\nCom esse provider configurado, você pode utilizar os hooks do Client SDK React para gerenciar\nchamadas e exibir o estado do operador de chamadas de qualquer componente filho.\n\n## Hooks Principais\n\nO `@callixbrasil/client-sdk-react` oferece diversos hooks para gerenciar chamadas:\n\n### useCallOperatorState\n\nEste hook fornece o estado atual do operador de chamadas, incluindo informações sobre chamadas\nativas, pausas e estado do sistema.\n\n```tsx\nimport { useCallOperatorState } from '@callixbrasil/client-sdk-react';\n\nfunction CallManager() {\n const callOperatorState = useCallOperatorState();\n\n if (callOperatorState.state === 'idle') {\n return
Aguardando chamadas...
;\n }\n\n if (callOperatorState.state === 'callRinging') {\n return
Chamada recebida!
;\n }\n\n if (callOperatorState.state === 'callInProgress') {\n return
Chamada em andamento
;\n }\n\n if (callOperatorState.state === 'afterCall') {\n return
Pós-atendimento
;\n }\n\n // Outros estados: 'starting', 'onBreak', 'startupError', 'manualCallFailed', 'offline'\n \n return null;\n}\n```\n\n### useCallOperatorStartupError\n\nEste hook fornece o motivo pelo qual a inicialização do operador de chamadas falhou (equivalente a\nconsultar o campo `error` do estado `startupError` de `useCallOperatorState`), permitindo exibir uma\nmensagem específica para cada caso:\n\n```tsx\nimport { useCallOperatorStartupError } from '@callixbrasil/client-sdk-react';\n\nfunction StartupErrorMessage() {\n const startupError = useCallOperatorStartupError();\n\n if (!startupError) {\n return null;\n }\n\n const messages = {\n missingAudioPermissions: 'Permita o acesso ao microfone para iniciar o atendimento.',\n maxUsersReached: 'Número máximo de usuários simultâneos contratado excedido.',\n userIsAlreadyConnectedOnAnotherDevice: 'Você já está disponível na tela de atendimento de outro lugar.',\n unknownError: 'Não foi possível iniciar o atendimento.',\n };\n\n return
{messages[startupError]}
;\n}\n```\n\n### useCallOperatorControls\n\n```tsx\nimport { useCallOperatorControls } from '@callixbrasil/client-sdk-react';\n\nfunction CallOperatorControls() {\n const { becomeAvailable, goOffline, finishAfterCall } = useCallOperatorControls();\n\n return (\n
\n \n \n \n
\n );\n}\n```\n\n### useCallOperatorCurrentCallControls\n\nEste hook fornece funções para controlar a chamada atual, como atender, rejeitar e desligar:\n\n```tsx\nimport { useCallOperatorCurrentCallControls } from '@callixbrasil/client-sdk-react';\n\nfunction CallButtons() {\n const { hangup } = useCallOperatorCurrentCallControls();\n\n return (\n
\n \n
\n );\n}\n```\n\nEssas funçôes de controle só executam quando há uma chamada ativa. Você pode verificar se existe\numa chamada ativa usando `useCallOperatorState`.\n\n### useCallOperatorCurrentCallInfo\n\nEste hook fornece informações detalhadas sobre a chamada atual como a campanha, lista e contato\nassociados:\n\n```tsx\nimport { useCallOperatorCurrentCallInfo } from '@callixbrasil/client-sdk-react';\n\nfunction CallInfoDisplay() {\n const callInfo = useCallOperatorCurrentCallInfo();\n\n if (!callInfo) {\n return null;\n }\n\n if (callInfo.type === 'campaign') {\n const { campaign, campaignList, campaignContact } = callInfo.info;\n \n return (\n
\n

Informações da Chamada

\n

Campanha: {campaign.name}

\n

Lista: {campaignList.name}

\n

Contato: {campaignContact?.phoneNumber}

\n
\n );\n }\n\n return null;\n}\n```\n\n### Controles de Áudio\n\nO SDK também fornece hooks para controlar o áudio da chamada:\n\n```tsx\nimport { \n useCallOperatorAudioInputMuted,\n useCallOperatorAudioOutputMuted,\n useCallOperatorAudioOutputVolume \n} from '@callixbrasil/client-sdk-react';\n\nfunction AudioControls() {\n // Controle do microfone\n const [inputMuted, setInputMuted] = useCallOperatorAudioInputMuted();\n \n // Controle do alto-falante\n const [outputMuted, setOutputMuted] = useCallOperatorAudioOutputMuted();\n \n // Controle do volume\n const [outputVolume, setOutputVolume] = useCallOperatorAudioOutputVolume();\n\n return (\n
\n \n \n \n \n setOutputVolume(parseFloat(e.target.value))} \n />\n
\n );\n}\n```\n\n## Exemplo Completo\n\nAbaixo está um exemplo completo de um componente que gerencia chamadas:\n\n```tsx\nimport { useCallOperatorState, useCallOperatorCurrentCallControls } from '@callixbrasil/client-sdk-react';\n\nexport function CallManager() {\n const { hangup } = useCallOperatorCurrentCallControls();\n const { becomeAvailable, finishAfterCall, goOffline } = useCallOperatorControls();\n \n const callInfo = useCallOperatorCurrentCallInfo();\n const callOperatorState = useCallOperatorState();\n\n if (!callOperatorState) {\n return null;\n }\n\n if (callOperatorState.state === 'starting') {\n return
Inicializando...
;\n }\n\n if (callOperatorState.state === 'idle') {\n return (\n
\n

Aguardando chamadas...

\n\n \n
\n );\n }\n\n if (callOperatorState.state === 'offline') {\n return (\n
\n

Operador offline

\n\n \n
\n );\n }\n\n if (callOperatorState.state === 'callInProgress') {\n return (\n
\n

Chamada em Andamento

\n \n {callInfo && callInfo.type === 'campaign' && (\n
\n

Informações da Chamada

\n

Campanha: {callInfo.info.campaign.name}

\n

Lista: {callInfo.info.campaignList.name}

\n

Número: {callInfo.info.campaignContact?.phoneNumber}

\n

Contato: {callInfo.info.campaignContact?.name}

\n
\n )}\n
\n );\n }\n\n if (callOperatorState.state === 'afterCall') {\n return (\n
\n

Pós-atendimento

\n\n \n
\n );\n }\n\n return null;\n}\n```\n","readmeFilename":""}