Advanced Configuration

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

function App() {
  const authManager = useMemo(
    () =>
      new SukiAuthManager({
        partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your partner ID
        partnerToken: "YOUR_JWT_HERE", // Replace with your partner token
        providerName: "John Doe", // Replace with your provider's name
        providerOrgId: "1234", // Replace with your provider's organization ID
        providerId: "1234567890", // Replace with the provider's ID
        providerSpecialty: "FAMILY_MEDICINE", // Replace with the provider's specialty
        environment: "production",
        loginOnInitialize: true,
      }),
    [],
  );

  const { init, isInitialized } = useSuki();

  useEffect(() => {
    if (!isInitialized) {
      init({
        authManager,
        theme: {
          primary: "#0066cc", // Replace with your primary color
          background: "#ffffff", // Replace with your background color
        },
      });
    }
  }, [init, isInitialized, authManager]);

  // ... rest of the application
}

import { useState } from "react";

// In your main App component...
const [encounter, setEncounter] = useState(encounters[0]); // encounters is your array of data

return (
  <>
    {/* Buttons to demonstrate switching the encounter context */}
    <button onClick={() => setEncounter(encounters[0])}>
      Load Encounter 1
    </button>
    <button onClick={() => setEncounter(encounters[1])}>
      Load Encounter 2
    </button>

    {/* Pass the currently selected encounter to the component */}
    <SukiAssistant encounter={encounter} {...otherProps} />
  </>
);

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

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

// 1. SukiProvider must wrap the root of your application
function Root() {
  return (
    <SukiProvider>
      <App />
    </SukiProvider>
  );
}

// 2. The main application component handles initialization and state
function App() {
  const authManager = useMemo(
    () =>
      new SukiAuthManager({
        partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your actual partner ID
        partnerToken: "YOUR_JWT_HERE", // Replace with your actual partner token
        providerName: "John doe",
        providerOrgId: "1234",
        providerId: "1234567890", // Replace with the provider's ID
        providerSpecialty: "FAMILY_MEDICINE", // Replace with the provider's specialty
        environment: "production",
        loginOnInitialize: true,
      }),
    [],
  );

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

  useEffect(() => {
    if (!isInitialized) {
      init({
        authManager,
        theme: {
          primary: "#0066cc",
          background: "#ffffff",
        },
      });
    }
  }, [init, isInitialized, authManager]);

  // Define ambient options for note generation
  const ambientOptions = {
    sections: [
      { loinc: "51847-2", isPBNSection: true }, // Assessment and Plan
      { loinc: "10164-2" }, // History of Present Illness
      { loinc: "10187-3" }, // Review of Systems
    ],
    diagnoses: { // New in v2.1.2
      values: [
        {
          codes: [
            {
              code: "I10",
              description: "Essential hypertension",
              type: "ICD10",
            },
          ],
          diagnosisNote: "Hypertension",
        },
      ],
    },
  };

  return (
    <>
      <h3>Select an Encounter:</h3>
      <button onClick={() => setEncounter(encounters[0])}>
        Load John Smith
      </button>
      <button onClick={() => setEncounter(encounters[1])}>
        Load Sarah Johnson
      </button>
      <hr />
      <AdvancedSDKComponent
        encounter={encounter}
        ambientOptions={ambientOptions}
      />
    </>
  );
}

// 3. This component renders and manages the SukiAssistant UI
function AdvancedSDKComponent({ encounter, ambientOptions }) {
  const [isVisible, setIsVisible] = useState(true);

  // Define UI options to customize the interface
  const uiOptions = {
    showCloseButton: true,
    showStartAmbientButton: true,
    showCreateEmptyNoteButton: false,
    sectionEditing: {
      enableDictation: true,
      enableCopy: false,
    },
  };

  // Define event handlers to react to SDK events
  const handleNoteSubmit = (data) => {
    console.log("Note submitted successfully:", data.noteId);
    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}
    />
  );
}