Build Headless Ambient Recorder

// Headless Web SDK Ambient recorder tutorial (React, Beta)
// Copy this file into a React app, replace YOUR_* placeholders, then render <App />.
// Flow: PlatformClient → PlatformClientProvider(client) → useAuth → useAmbient create → useAmbientSession

import { useEffect, useState } from "react";
import {
  PlatformClient,
  PlatformClientProvider,
  useAuth,
  useAmbient,
  useAmbientSession,
} from "@suki-sdk/platform-react";

// sessionStatus values: "created" | "submitted" | "completed" | "cancelled"
// Track recording vs paused in local state (those are not sessionStatus values).

// 1) One shared client for the app lifetime (module scope, not inside a component).
const client = new PlatformClient({
  env: "staging",
  enableDebug: true,
  logLevel: "error",
});

function App() {
  return (
    // Pass the same client into the provider so all hooks share it.
    <PlatformClientProvider client={client}>
      <HeadlessAmbientRecorder />
    </PlatformClientProvider>
  );
}

function HeadlessAmbientRecorder() {
  const [sessionId, setSessionId] = useState(null);

  // 2) Sign in under the provider. When autoRegister is true, provider* fields are required.
  //    Use specialty enum tokens (for example FAMILY_MEDICINE), not display names.
  const { isLoggedIn, isPending: authPending, error: authError } = useAuth({
    partnerId: "YOUR_PARTNER_ID", // Required: from partner onboarding
    partnerToken: "YOUR_PARTNER_TOKEN", // Required
    autoRegister: true,
    loginOnMount: true,
    providerName: "Dr. Jane Smith", // Example only — replace with the provider's full name
    providerOrgId: "YOUR_ORG_ID", // Required when autoRegister is true
    providerSpecialty: "FAMILY_MEDICINE", // Example specialty token — replace with yours
  });

  // 3) Create an ambient session only after login, and only once.
  const {
    ambientSessionId,
    session: { create, isSuccess: sessionCreated, error: sessionError },
  } = useAmbient();

  useEffect(() => {
    if (isLoggedIn && !sessionCreated) {
      create();
    }
  }, [isLoggedIn, sessionCreated, create]);

  useEffect(() => {
    // Wait for isSuccess before passing ambientSessionId into useAmbientSession.
    if (sessionCreated && ambientSessionId) {
      setSessionId(ambientSessionId);
    }
  }, [sessionCreated, ambientSessionId]);

  if (authPending) return <p>Signing in...</p>;
  if (authError) return <p role="alert">{authError.message}</p>;
  if (!isLoggedIn) return <p>Sign in required</p>;
  if (sessionError) return <p role="alert">{sessionError.message}</p>;
  if (!sessionId) return <p>Creating ambient session...</p>;

  return <Recorder sessionId={sessionId} />;
}

function Recorder({ sessionId }) {
  // 4) Control recording for the session returned by useAmbient.
  const { start, pause, resume, submit, sessionStatus, setSessionContext } =
    useAmbientSession({ ambientSessionId: sessionId });
  // sessionStatus does not include "recording" or "paused". Track those locally.
  const [phase, setPhase] = useState<"idle" | "recording" | "paused">("idle");

  async function handleStart() {
    await start();
    setPhase("recording");
    // Call setSessionContext after start() and before submit() for better notes.
    await setSessionContext({
      // Example session context only — replace with real patient / visit metadata
      patient: { dob: "1980-01-15", sex: "M" },
      provider: { specialty: "FAMILY_MEDICINE", role: "Attending Physician" },
      visit: {
        visit_type: "Follow-up",
        encounter_type: "Office Visit",
        reason_for_visit: "Medication review",
      },
    });
  }

  async function handlePause() {
    await pause();
    setPhase("paused");
  }

  async function handleResume() {
    await resume();
    setPhase("recording");
  }

  return (
    <div>
      <p>Status: {sessionStatus}</p>
      {sessionStatus === "created" && phase === "idle" && (
        <button type="button" onClick={handleStart}>
          Start
        </button>
      )}
      {sessionStatus === "created" && phase === "recording" && (
        <>
          <button type="button" onClick={handlePause}>
            Pause
          </button>
          <button type="button" onClick={submit}>
            Submit
          </button>
        </>
      )}
      {sessionStatus === "created" && phase === "paused" && (
        <>
          <button type="button" onClick={handleResume}>
            Resume
          </button>
          <button type="button" onClick={submit}>
            Submit
          </button>
        </>
      )}
    </div>
  );
}

export default App;