React SDK

npm install @talqing/react

yarn add @talqing/react @talqing/client @talqing/sdk livekit-client @livekit/components-react

function useTalqingSession(options: TalqingSessionOptions): TalqingSession;

type TalqingSessionOptions = { roomOptions?: RoomOptions } & (
  | { token: TalqingCallCredentials }
  | { fetchToken: () => Promise<TalqingCallCredentials> }
  | { client: TalqingClient; agentId: string | null; callOptions?: TalqingCallOptions }
);

import { useEffect } from "react";
import { TalqingSessionProvider, useTalqingSession } from "@talqing/react";

function CallSession() {
  const session = useTalqingSession({
    fetchToken: async () => {
      const response = await fetch("/api/talqing-token", { method: "POST" });
      return await response.json(); // { server_url, participant_token }
    },
  });

  useEffect(() => {
    void session.start();
    return () => void session.end();
  }, []);

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

function TalqingSessionProvider(props: {
  session: TalqingSession;
  children: React.ReactNode;
  audio?: boolean; // default true
}): JSX.Element;

function useTalqingConnection(): {
  isConnected: boolean;
  connectionState: ConnectionState;
  room: Room;
  start: (options?: SessionConnectOptions) => Promise<void>;
  end: () => Promise<void>;
};

function createTalqingTokenSource(
  fetchToken: () => Promise<TalqingCallCredentials>,
): TokenSourceFixed;

const TALQING_AUDIO_CAPTURE_DEFAULTS = {
  echoCancellation: true,
  noiseSuppression: true,
  autoGainControl: true,
};

function useTalqingImages(room: Room | null | undefined): {
  send: (file: File) => Promise<TalqingSentImage>;
  sent: TalqingSentImage[];
  clear: () => void;
};

const { room } = useTalqingConnection();
const images = useTalqingImages(room);

<input
  type="file"
  accept="image/jpeg,image/png,image/webp"
  onChange={(e) => e.target.files?.[0] && void images.send(e.target.files[0])}
/>;

function useTalqingScreenShare(): {
  enabled: boolean;  // a screen is being shared
  pending: boolean;  // picker open or track publishing
  start: () => Promise<unknown>;  // call from a click
  stop: () => Promise<unknown>;
};

const screen = useTalqingScreenShare();

<button onClick={() => void screen.start()} disabled={screen.pending}>
  {screen.enabled ? "Stop sharing" : "Share my screen"}
</button>;

function useTalqingRpcHandlers(handlers: TalqingRpcHandlers, enabled?: boolean): void;

type TalqingRpcHandlers = Record<string, (data: TalqingRpcInvocation) => string | Promise<string>>;
interface TalqingRpcInvocation { payload: string; responseTimeout?: number; callerIdentity?: string }

const handlers = useMemo(() => ({
  show_product: async ({ payload }: TalqingRpcInvocation) => {
    const { sku } = JSON.parse(payload) as { sku: string };
    setHighlighted(sku);
    return JSON.stringify({ shown: true });
  },
}), []);
useTalqingRpcHandlers(handlers);

function useTalqingFrontendRpcs(enabled?: boolean): {
  actions: Record<string, { payload?: JsonValue; at: number }>;
  clear: () => void;
};

class TalqingRpcError extends Error {
  constructor(code: number, message: string, data?: string);
}

function useTalqingAvatarTrack(): TrackReference | undefined;

const track = useTalqingAvatarTrack();
return track ? <VideoTrack trackRef={track} className="rounded-xl" /> : null;

import { TalqingChat } from "@talqing/client";

const chat = new TalqingChat({
  fetchToken: async () => (await fetch("/api/chat-token", { method: "POST" })).json(),
});

const { events, result } = chat.send("Where is my order?");
for await (const event of events) {
  if (event.event === "assistant.delta") render(event.text);
}
const turn = await result; // TalqingChatTurn

import { ConnectionQuality, RoomEvent } from "livekit-client";

const { room } = useTalqingConnection();
useEffect(() => {
  const onQuality = (quality: ConnectionQuality) => setBars(quality);
  room.on(RoomEvent.ConnectionQualityChanged, onQuality);
  return () => void room.off(RoomEvent.ConnectionQualityChanged, onQuality);
}, [room]);