Advanced configuration options allow you to customize the Suki Assistant SDK to better fit your application’s needs. This includes setting up ambient options, UI customization, and handling events.

import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";

const encounters = [
  {
    identifier: "6ec3920f-b0b1-499d-a4e9-889bf788e5ab",
    patient: {
      identifier: "905c2521-25eb-4324-9978-724636df3436",
      name: {
        use: "usual",
        family: "Smith",
        given: ["John"],
        suffix: [],
      },
      birthDate: "1980-01-15",
      gender: "male",
    },
  },
  {
    identifier: "qsc2393g-b0b1-499d-a4e9-983cq125g5op",
    patient: {
      identifier: "25eb905-1232-082132-aw12320do4r",
      name: {
        use: "usual",
        family: "Johnson",
        given: ["Sarah", "Marie"],
        suffix: ["MD"],
      },
      birthDate: "1985-03-20",
      gender: "female",
    },
  },
];

function Root() {
  return (
    <SukiProvider>
      <App />
    </SukiProvider>
  );
}

function App() {
  const { init } = useSuki();
  const [encounter, setEncounter] = useState(encounters[0]);

  useEffect(() => {
    init({
      partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your actual partner ID
      partnerToken:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30", // Replace with your actual partner token
      providerName: "John doe", // Replace with the full name of the provider
      providerOrgId: "1234", // Replace with the provider's organization ID
      theme: {
        primary: "#0066cc",
        background: "#ffffff",
      },
    });
  }, [init]);

  const ambientOptions = {
    sections: [
      {
        loinc: "51847-2", // Assessment and Plan
        isPBNSection: true,
      },
      {
        loinc: "10164-2", // History of Present Illness
      },
      {
        loinc: "10187-3", // Review of Systems
      },
    ],
  };

  return (
    <>
      <button onClick={() => setEncounter(encounters[0])}>
        Load Encounter 1
      </button>
      <button onClick={() => setEncounter(encounters[1])}>
        Load Encounter 2
      </button>
      <AdvancedSDKComponent
        encounter={encounter}
        ambientOptions={ambientOptions}
      />
    </>
  );
}

function AdvancedSDKComponent({ encounter, ambientOptions }) {
  const [isVisible, setIsVisible] = useState(true);

  const uiOptions = {
    showCloseButton: true,
    showStartAmbientButton: true,
    showCreateEmptyNoteButton: false,
    sectionEditing: {
      enableDictation: true,
      enableCopy: false,
    },
  };

  const handleNoteSubmit = (data) => {
    console.log("Note submitted successfully:", data.noteId);
    // Process note contents
    data.contents.forEach((section) => {
      console.log(`${section.title}: ${section.content}`);
    });
  };

  const handleClose = () => {
    setIsVisible(false);
    console.log("SDK closed by user");
  };

  if (!isVisible) {
    return <div>SDK has been closed</div>;
  }

  return (
    <SukiAssistant
      encounter={encounter}
      uiOptions={uiOptions}
      ambientOptions={ambientOptions}
      onNoteSubmit={handleNoteSubmit}
      onClose={handleClose}
    />
  );
}