Web calls

npm install @talqing/sdk

// lib/talqing.ts — imported by browser code
import { TalqingClient } from "@talqing/sdk";

export const talqing = new TalqingClient({
  baseUrl: "https://your-app.example.com/talqing",
  credentials: "include",
});

"use client";
import { useEffect, useMemo, useState } from "react";
import {
  TalqingSessionProvider,
  useTalqingAgent,
  useTalqingConnection,
  useTalqingMessages,
  useTalqingSession,
} from "@talqing/sdk/browser";
import { talqing } from "./lib/talqing";

const AGENT_ID = "9f1c0a3e-4b21-4f7a-9c6d-2a5b8e13d704";

export function TalkToUs({ userId }: { userId: string }) {
  // Nothing LiveKit exists until the person asks for a call: mounting the
  // session is what mints the token, so rendering it early would file a call
  // nobody placed. Each call gets its own number, and that number is the `key`
  // below — a second call is a second mount, never a restart of the first.
  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} userId={userId} onLeave={() => setInCall(false)} />;
}

function CallSession({ userId, onLeave }: { userId: string; onLeave: () => void }) {
  // Referentially stable: the hook rebuilds its token source whenever
  // `callOptions` changes identity, and an object literal is a new identity on
  // every render.
  const callOptions = useMemo(
    () => ({ contact_key: userId, userdata: { name: "Priya", plan: "gold" } }),
    [userId],
  );

  const session = useTalqingSession({ client: talqing, agentId: AGENT_ID, callOptions });

  useEffect(() => {
    // The token is minted inside start(), so an API refusal — an unpublished
    // agent, a workspace out of credits, a view-only role — arrives here.
    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 { isConnected, end } = useTalqingConnection();
  const { state } = useTalqingAgent();
  const { messages } = useTalqingMessages();

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

import { TalqingVideoTrack, useTalqingAvatarTrack } from "@talqing/sdk/browser";

function AvatarStage() {
  const track = useTalqingAvatarTrack();
  if (!track) return <p>Avatar joining…</p>;
  return <TalqingVideoTrack track={track} className="avatar" />;
}