stopConversation() doesn't stop the conversation?

[alist]

retell-client-js-sdk@^1.3.2

I refresh the page instead.

Ref: https://discord.com/channels/1186424376300679209/1222558901753483295

import { RetellWebClient } from 'retell-client-js-sdk';

function WebCall() {
  let retellWebClient = new RetellWebClient();
  const [isCallActive, setIsCallActive] = useState(false);

  retellWebClient.on(ClientEventNames.conversationEnded, ({ code, reason }) => {
    console.log('Conversation ended with code "%d" and reason "%s"', code, reason);
    setIsCallActive(false);
  });

  retellWebClient.on(ClientEventNames.error, error => {
    console.error('Conversation error occurred', error);
    setIsCallActive(false);
  });

  async function toggleCall() {
    if (isCallActive) {
      retellWebClient.stopConversation();
      // stop doesn't work, so refresh the page instead
      window.location.reload();
    } else {
      // ... start the call
    }
  }

[venkat-arvo]

@alist I faced the same exact issue. In my case, I didn't have one of "stream" or "buffer" npm packages installed (I don't remember which one now). Adding them to the project resolved the issue.

[rj-rajpal]

Hey I am facing the same issue, but I working with next. And I have both "buffer" and "stream" installed.

[weijia-yu]

Thanks for reporting the issue and we will take a look at the issue and get back to you soon!

[arthur-vonq]

I am facing the same issue with next + retell-client-js-sdk@1.3.3

[weijia-yu]

@arthur-vonq Was your issue solved by installing stream or buffer?

[arthur-vonq]

unfortunatelly I tried installing those, but it did not work. take a look:

"node": "v20.11.0"
"next": "12.3.4"
"react": "^18.2.0"
"react-dom": "^18.2.0"
"retell-client-js-sdk": "^1.3.3"
"buffer": "^6.0.3"
"stream": "^0.0.2"

[arthur-vonq]

@rj-rajpal Have you managed to make it work? I have the same situation as you

[ayush-saha-56]

retellInstance.stopConversation(); doesn't work.

const getCallInitDetails = () => {
    return bot9API
      .post(`/api/retell/start-call`, { agent_id: AGENT_ID })
      .then((res) => res.data)
      .catch((err) => {
        console.error(err);
      });
  };

  const handleStartCall = (payload) => {
    setHasCallStarted(true);
    setCallStatus("Calling...");
    getCallInitDetails().then((data) => {
      setCallStatus("Ringing...");
      retellInstance
        .startConversation({
          callId: data.call_id,
          sampleRate: data.sample_rate,
          enableUpdate: true,
        })
        .then(() => {
          setCallStatus("Say hello");
        });
    });
  };

  const handleEndCall = () => {
    //   doesnt work
    retellInstance.stopConversation();
    setHasCallStarted(false);
    setCallStatus("");
  };

[arthur-vonq]

@ayush-saha-56 where are you instantiating the Retell client? I think you cannot instantiate it inside a react component otherwise it meses up with the life cycle. That was the problem happening with me at least..

[ayush-saha-56]

Yes. I was instantiating the Retell client inside a component.

Instantiating it outside solves the end call case. It seems to be a lifecycle mess up that creates this issue.

[alist]

Yeah awesome find @arthur-vonq !!!! You saved us.

For everyone else, here is the solution!

'use client';
import { RetellWebClient } from 'retell-client-js-sdk';
const retellWebClient = new RetellWebClient();
export default function RetellCallMVC({
   await retellWebClient.startConversation(...);
   return <UserInterface/>;
})

with this sort of setup

    retellWebClient.stopConversation();

now works and also multiple calls are possible