Web call features

import { useTalqingConnection, useTalqingImages } from "@talqing/sdk/browser";

function AttachPhoto() {
  const { room } = useTalqingConnection();
  const { send, sent } = useTalqingImages(room);

  return (
    <>
      <input
        type="file"
        accept="image/jpeg,image/png,image/webp"
        onChange={async (event) => {
          const file = event.target.files?.[0];
          if (!file) return;
          try {
            await send(file);
          } catch (error: unknown) {
            // Wrong type, over 10 MB, undecodable, or the agent is not on the
            // call yet. The message is written for a person — show it as-is.
            alert(error instanceof Error ? error.message : "That image could not be sent");
          }
        }}
      />
      <ul>
        {sent.map((image) => (
          <li key={image.streamId}>
            <img src={image.previewUrl} alt={image.name} width={120} />
            {image.status === "sending" && "Sending…"}
            {image.status === "sent" && "Delivered — the agent sees it on your next turn"}
            {(image.status === "failed" || image.status === "unknown") && image.error}
          </li>
        ))}
      </ul>
    </>
  );
}

import { useTalqingScreenShare } from "@talqing/sdk/browser";

function ShareScreenButton() {
  const { enabled, pending, start, stop } = useTalqingScreenShare();
  return (
    <button disabled={pending} onClick={() => void (enabled ? stop() : start())}>
      {enabled ? "Stop sharing" : "Share screen"}
    </button>
  );
}

import { useEffect } from "react";
import { useTalqingUserdata } from "@talqing/sdk/browser";

function CartWatcher({ cartTotal }: { cartTotal: number }) {
  const userdata = useTalqingUserdata();

  useEffect(() => {
    // Fire and forget: the agent reads it on its next turn.
    void userdata.set({ cart_total: cartTotal });
  }, [cartTotal, userdata]);

  return null;
}

import { useMemo } from "react";
import { TalqingRpcError, useTalqingRpcHandlers } from "@talqing/sdk/browser";

function AgentActions({ onNavigate }: { onNavigate: (href: string) => void }) {
  const handlers = useMemo(
    () => ({
      open_page: async ({ payload }: { payload: string }) => {
        const { href } = JSON.parse(payload) as { href: string };
        onNavigate(href);
        return JSON.stringify({ ok: true });
      },
      read_form: async () => {
        const input = document.querySelector<HTMLInputElement>("#email");
        return JSON.stringify({ email: input ? input.value : null });
      },
      cancel_order: async () => {
        // Anything you throw becomes an RPC error the tool can branch on.
        throw new TalqingRpcError(1403, "the customer declined");
      },
    }),
    [onNavigate],
  );

  useTalqingRpcHandlers(handlers);
  return null;
}

const { actions, clear } = useTalqingFrontendRpcs();
// actions["show_offer"] === { payload: { … }, at: 1735689600000 }

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" />;
}

import {
  useTalqingAgent,
  useTalqingConnection,
  useTalqingMessages,
} from "@talqing/sdk/browser";