Patient Summary In Web SDK

import { useEffect, useMemo, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";

function PatientChart({ visit }) {
  const authManager = useMemo(
    () =>
      new SukiAuthManager({
        partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your Partner ID
        partnerToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", // Replace with your Partner Token
        providerName: "John Doe",
        providerOrgId: "1234",
        providerSpecialty: "FAMILY_MEDICINE",
        environment: "production", // Use "staging" while testing
        loginOnInitialize: true,
        providerId: "1234567890",
      }),
    [],
  );

  const { init, isInitialized, on } = useSuki();

  // Build the encounter from the active visit in your EHR.
  // encounter.identifier = FHIR encounter id = CKG fhir_encounter_id
  // encounter.practitionerFhirId = FHIR practitioner id = CKG fhir_practitioner_id
  const [encounter, setEncounter] = useState(() => ({
    identifier: visit.fhirEncounterId, // FHIR encounter id (UUID)
    practitionerFhirId: visit.fhirPractitionerId, // FHIR practitioner id
    patient: {
      identifier: visit.patientId,
      name: {
        use: "official",
        family: visit.familyName,
        given: [visit.givenName],
        suffix: [],
      },
      birthDate: visit.birthDate,
      gender: visit.gender,
    },
  }));

  useEffect(() => {
    if (!isInitialized) {
  // Pass encounter at init so generation can run at login.
      init({
        authManager,
        encounter,
      });
    }
  }, [authManager, encounter, init, isInitialized]);

  useEffect(() => {
    const unsubscribeReady = on("ready", () => {
      console.log("Web SDK ready");
    });

    return () => {
      unsubscribeReady();
    };
  }, [on]);

  // Same practitioner: update the encounter when the clinician opens
  // another appointment. SukiAssistant calls setEncounter for you.
  // Keep practitionerFhirId from initialize. Do not change the encounter
  // while an ambient session is in progress.
  useEffect(() => {
    if (!isInitialized) return;
    setEncounter((current) => ({
      identifier: visit.fhirEncounterId,
      practitionerFhirId: current.practitionerFhirId,
      patient: {
        identifier: visit.patientId,
        name: {
          use: "official",
          family: visit.familyName,
          given: [visit.givenName],
          suffix: [],
        },
        birthDate: visit.birthDate,
        gender: visit.gender,
      },
    }));
  }, [isInitialized, visit]);

  if (!isInitialized) {
    return <div>Initializing Suki...</div>;
  }

  // Pass encounter on SukiAssistant so the profile can load the summary.
  // A new object is fine. Keep identifier, practitionerFhirId, and patient
  // the same as at init.
  return <SukiAssistant encounter={encounter} />;
}

export function App({ visit }) {
  // Different practitioner: remount the provider so init runs again with
  // the new practitionerFhirId. A key on SukiAssistant alone does not
  // generate again.
  return (
    <SukiProvider key={visit.fhirPractitionerId}>
      <div id="suki-root" style={{ height: 640, width: 360 }}>
        <PatientChart visit={visit} />
      </div>
    </SukiProvider>
  );
}