Build Dictation into a Chart Field

// Dictation SDK chart field tutorial (React, Beta)
// Copy this file into a React app, replace YOUR_* placeholders, then render <App />.
// Flow: DictationClient once → DictationProvider → in-field <Dictation> with rootElement + callbacks

import { useEffect, useMemo, useRef, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { DictationClient } from "@suki-sdk/dictation";
import { DictationProvider, Dictation } from "@suki-sdk/dictation-react";

function App() {
  return <ChartNoteWithDictation />;
}

function ChartNoteWithDictation() {
  // 1) Build auth + client once. Creating a new client per render tears down the iframe.
  const client = useMemo(() => {
    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // Required: from partner onboarding
      partnerToken: "YOUR_PARTNER_TOKEN", // Required
      environment: "staging", // "staging" | "production"
      loginOnInitialize: true,
      autoRegister: false, // Optional (default false); when true, provider fields below are often required
      providerId: "YOUR_PROVIDER_ID", // Replace with your provider ID
      providerName: "Dr. Jane Smith", // Example only — replace with the provider's full name
      providerOrgId: "YOUR_ORG_ID",
    });
    return new DictationClient({ authManager });
  }, []);

  const dictationRootRef = useRef(null);
  const [dictationRoot, setDictationRoot] = useState(null);
  const [notes, setNotes] = useState("");
  const [dictationActive, setDictationActive] = useState(false);

  // 2) Capture the wrapper DOM node so rootElement is ready before Dictation mounts.
  useEffect(() => {
    setDictationRoot(dictationRootRef.current);
  }, []);

  return (
    // 3) Every <Dictation> must sit under DictationProvider with the shared client.
    <DictationProvider client={client}>
      <label htmlFor="clinical-notes">Clinical notes</label>
      {/* 4) Wrapper layout: rootElement needs real width/height for the hosted iframe */}
      <div
        ref={dictationRootRef}
        id="clinical-notes-dictation-root"
        style={{ position: "relative", minHeight: 120 }}
      >
        <textarea
          id="clinical-notes" // Example field id — use any stable id; must match fieldId
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          rows={8}
        />
      </div>
      <button type="button" onClick={() => setDictationActive((v) => !v)}>
        {dictationActive ? "Stop dictation" : "Start dictation"}
      </button>
      {/* 5) Mount in-field dictation only while this field should own the session */}
      {dictationActive && dictationRoot && (
        <Dictation
          fieldId="clinical-notes" // Example — must match the textarea id above
          mode="in-field"
          rootElement={dictationRoot}
          initialText={notes} // Seed the session with current field text
          onSubmit={({ text }) => {
            // onSubmit is required for a good UX; commit transcript, then unmount
            setNotes(text);
            setDictationActive(false);
          }}
          onCancel={() => setDictationActive(false)}
          onDraft={({ text }) => {
            // Optional: persist unstaged text if the user leaves without submit
            console.log("Draft text:", text);
          }}
        />
      )}
    </DictationProvider>
  );
}

export default App;