Web calls

npm install @talqing/react

"use client";
import { useCallback, useEffect, useState } from "react";
import {
  TalqingSessionProvider,
  useAgent,
  useSessionMessages,
  useTalqingConnection,
  useTalqingSession,
} from "@talqing/react";

export function TalkToUs() {
  // Mounting a session mints a token, so mount it only when the person clicks.
  // A new `key` per call: a second call is a second mount, never a restart.
  const [call, setCall] = useState(0);
  const [inCall, setInCall] = useState(false);

  if (!inCall) {
    return (
      <button onClick={() => { setCall((n) => n + 1); setInCall(true); }}>
        Talk to us
      </button>
    );
  }
  return <CallSession key={call} onLeave={() => setInCall(false)} />;
}

function CallSession({ onLeave }: { onLeave: () => void }) {
  const fetchToken = useCallback(async () => {
    const response = await fetch("/api/talqing-token", { method: "POST" });
    if (!response.ok) throw new Error("could not start the call");
    return await response.json();
  }, []);

  const session = useTalqingSession({ fetchToken });

  useEffect(() => {
    // Token refusals (unpublished agent, no credits) reject start().
    session.start().catch((error: unknown) => {
      console.error(error);
      onLeave();
    });
    return () => void session.end();
    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount and unmount only
  }, []);

  return (
    <TalqingSessionProvider session={session}>
      <CallUI onLeave={onLeave} />
    </TalqingSessionProvider>
  );
}

function CallUI({ onLeave }: { onLeave: () => void }) {
  const { end } = useTalqingConnection();
  const agent = useAgent();
  const { messages } = useSessionMessages();

  return (
    <div>
      <p>agent: {agent.state}</p>
      <ul>
        {messages.map((m) => (
          <li key={m.id}>
            <strong>{m.from?.isLocal ? "You" : "Agent"}</strong> {m.message}
          </li>
        ))}
      </ul>
      <button onClick={() => { void end(); onLeave(); }}>End call</button>
    </div>
  );
}

curl -sS -X POST https://api.talqing.com/v1/calls/5b0e2c8a-3f41-4d7e-9a62-c18f7d40b2e9/resume \
  -H "Authorization: Bearer $TALQING_API_KEY"