Control Visibility

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

function ComponentWithCloseButton() {
const authManager = useMemo(
() =>
  new SukiAuthManager({
    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
    environment: "production",
    loginOnInitialize: true,
    providerId: "1234567890", // Replace with the provider's ID
    providerName: "John doe", // Replace with the full name of the provider
    providerOrgId: "1234", // Replace with the provider's organization ID
    providerSpecialty: "FAMILY_MEDICINE", // Replace with the provider's specialty
  }),
[],
);

const { init, isInitialized } = useSuki();
const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
if (!isInitialized) {
  init({ authManager });
}
}, [init, isInitialized, authManager]);

const encounter = {
identifier: "encounter-789",
patient: {
  identifier: "patient-101",
  name: {
    use: "usual",
    family: "Johnson",
    given: ["Sarah", "Marie"],
    suffix: ["MD"],
  },
  birthDate: "1985-03-20",
  gender: "female",
},
};

const uiOptions = { showCloseButton: true };

const ambientOptions = {
sections: [
  {
    loinc: "51847-2", // Assessment and Plan
    isPBNSection: true,
  },
  {
    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",
    },
  ],
},
visitType: "ESTABLISHED_PATIENT", // New in v2.2.0
encounterType: "AMBULATORY",
providerRole: "PRIMARY/ATTENDING",
reasonForVisit: "Follow-up for hypertension",
chiefComplaint: "Headache",
};

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}
  onClose={handleClose}
  onNoteSubmit={(data) => {
    console.log(data);
  }}
/>
);
}