Web call features

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

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, too large, or the agent is not on the call yet.
            // The message is written for a person.
            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"}
            {(image.status === "failed" || image.status === "unknown") && image.error}
          </li>
        ))}
      </ul>
    </>
  );
}

import { useTalqingScreenShare } from "@talqing/react";

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

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

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 });
      },
      cancel_order: async () => {
        throw new TalqingRpcError(1403, "the customer declined");
      },
    }),
    [onNavigate],
  );
  useTalqingRpcHandlers(handlers);
  return null;
}

import { useTalqingAvatarTrack, VideoTrack } from "@talqing/react";

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