Sam 69104 mic badge (#1)

Author: ashercoren

vim--ai-scribe--react/package-lock.json

@@ -24,7 +24,7 @@
     "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.2.0",
     "tailwind-merge": "^2.5.2",
-    "vim-os-js-browser": "^2.0.1"
+    "vim-os-js-browser": "^2.0.6"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240821.1",

vim--ai-scribe--react/package.json

@@ -1,26 +1,20 @@
-import { type Dispatch, type SetStateAction } from "react";
-import { User, Mic } from "lucide-react";
+import { Mic, User } from "lucide-react";
 import { Button } from "../../atoms/Button";
-import { Input } from "../../atoms/Input";
-import { useVimOsContext } from "@/providers/VimOSContext";
-import { buildName } from "../ai-scribe-demo/buildName";
+import { useProviderName } from "@/vimOs/useProviderName";
 
 export const RecordingTab = ({
   patientName,
-  setPatientName,
   simulateRecording,
 }: {
   patientName: string;
-  setPatientName: Dispatch<SetStateAction<string>>;
   simulateRecording: () => void;
 }) => {
-  const vimOS = useVimOsContext();
-  const username = buildName(vimOS) || ""
+  const providerName = useProviderName();
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-col items-center justify-between">
-        <div>{username}</div>
+      <div className="flex flex-col items-center justify-between space-y-2">
+        <div>Hi there, {providerName}</div>
         <div className="flex items-center space-x-2">
           <User className="h-5 w-5 text-gray-500" />
           <h2 className="text-lg font-semibold text-gray-900">
@@ -29,12 +23,8 @@ export const RecordingTab = ({
         </div>
       </div>
 
-      <div className="max-w-xl mx-auto">
-        <Input
-          value={patientName}
-          onChange={setPatientName}
-          placeholder="Enter patient name"
-        />
+      <div className="flex flex-col items-center">
+        <div>{patientName}</div>
 
         <Button
           onClick={simulateRecording}
@@ -43,7 +33,7 @@ export const RecordingTab = ({
           className="mt-4 py-4"
         >
           <Mic className="h-5 w-5 mr-2" />
-          Start Recording
+          {patientName ? "Start Recording" : "Waiting for patient"}
         </Button>
       </div>
     </div>

vim--ai-scribe--react/src/components/organisms/RecordingTab/RecordingTab.tsx

@@ -1,22 +1,22 @@
-import { useState } from "react";
-import { useUpdateEncounter } from "@/vimOs/useUpdateEncounter";
 import { NavigationBar } from "@/components/molecules/NavigationBar";
 import { useNoteFormContext } from "@/providers/NoteFormContext";
+import { useVimOsContext } from "@/providers/VimOSContext";
+import { useUpdateEncounter } from "@/vimOs/useUpdateEncounter";
+import { useState } from "react";
+import { NotesTab } from "../notes-tab/NotesTab";
 import { RecordingPanel } from "../recording-panel/RecordingPanel";
-import { MEDICAL_KEYWORDS } from "./keywords.mock";
-import { useRecorder } from "./useRecorder";
 import { RecordingTab } from "../RecordingTab/RecordingTab";
-import { ProcessingTab } from "./ProcessingTab";
+import { AppHeader } from "./AppHeader";
 import {
   DiagnosisCodesModal,
   type DiagnosisCodesList,
 } from "./DiagnosisCodesModal";
+import { MEDICAL_KEYWORDS } from "./keywords.mock";
 import type { Note } from "./Note.interface";
+import { ProcessingTab } from "./ProcessingTab";
+import { usePatientName } from "../../../vimOs/usePatientName";
+import { useRecorder } from "./useRecorder";
 import { UserTab } from "./UserTab";
-import { AppHeader } from "./AppHeader";
-import { useVimOsContext } from "@/providers/VimOSContext";
-import { NotesTab } from "../notes-tab/NotesTab";
-import { buildName } from "./buildName";
 
 const RECORDING_RESULT = {
   subjective:
@@ -69,9 +69,8 @@ export const AiScribeDemo = () => {
   const vimOS = useVimOsContext();
   const [activeTab, setActiveTab] = useState<TabType>("record");
   const [notes, setNotes] = useState<Note[]>([]);
-  const [patientName, setPatientName] = useState<string>(
-    () => buildName(vimOS) || ""
-  );
+  const patientName = usePatientName();
+  const [visitedPatient, setVisitedPatient] = useState<string | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [selectedKeyword, setSelectedKeyword] = useState<string | null>(null);
   const { watch, reset } = useNoteFormContext();
@@ -108,6 +107,7 @@ export const AiScribeDemo = () => {
 
   const handleEndVisit = () => {
     stopRecording();
+    setVisitedPatient(patientName);
     setIsProcessing(true);
 
     setTimeout(() => {
@@ -191,7 +191,6 @@ export const AiScribeDemo = () => {
           {activeTab === "record" && !isRecording && !isProcessing && (
             <RecordingTab
               patientName={patientName}
-              setPatientName={setPatientName}
               simulateRecording={simulateRecording}
             />
           )}
@@ -209,17 +208,13 @@ export const AiScribeDemo = () => {
 
           {activeTab === "notes" && (
             <NotesTab
-              patientName={patientName}
+              patientName={visitedPatient}
               handleFullEhrUpdate={handleFullEhrUpdate}
               renderHighlightedText={renderHighlightedText}
             />
           )}
 
-          {activeTab === "user" && (
-            <UserTab
-              notes={notes}
-            />
-          )}
+          {activeTab === "user" && <UserTab notes={notes} />}
         </div>
 
         {selectedKeyword && (

vim--ai-scribe--react/src/components/organisms/ai-scribe-demo/AiScribeDemo.tsx

@@ -1,9 +1,13 @@
+import { useCallback } from "react";
 import { useState, useEffect } from "react";
+import { useVimOsContext } from "@/providers/VimOSContext";
 
 export const useRecorder = () => {
+  const [stream, setStream] = useState<MediaStream | null>(null);
   const [isPaused, setIsPaused] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
   const [recordingTime, setRecordingTime] = useState(0);
+  const vimOS = useVimOsContext();
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -15,17 +19,32 @@ export const useRecorder = () => {
     return () => clearInterval(interval);
   }, [isRecording, isPaused]);
 
-  const simulateRecording = () => {
-    setIsRecording(true);
-    setIsPaused(false);
-    setRecordingTime(0);
-  };
+  const simulateRecording = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      setStream(stream);
+      // Show the VimOS microphone badge to indicate active recording
+      vimOS?.hub?.microphoneBadge?.show?.();
+      setIsRecording(true);
+      setIsPaused(false);
+      setRecordingTime(0);
+    } catch {
+      // Hide the badge if access is denied or an error occurs
+      vimOS?.hub?.microphoneBadge?.hide?.();
+      console.error("Microphone access denied or error occurred.");
+    }
+  }, [vimOS]);
 
-  const stopRecording = () => {
+  const stopRecording = useCallback(() => {
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
+    }
     setIsRecording(false);
     setIsPaused(false);
     setRecordingTime(0);
-  };
+    // Hide the VimOS microphone badge when recording stops
+    vimOS?.hub?.microphoneBadge?.hide?.();
+  }, [vimOS, stream]);
 
   return {
     isPaused,

vim--ai-scribe--react/src/components/organisms/ai-scribe-demo/buildName.ts

@@ -11,7 +11,7 @@ export const NotesTab = ({
   handleFullEhrUpdate,
   renderHighlightedText,
 }: {
-  patientName: string;
+  patientName: string | null;
   handleFullEhrUpdate: () => Promise<void>;
   renderHighlightedText: (text: string) => JSX.Element;
 }) => {
@@ -29,8 +29,9 @@ export const NotesTab = ({
   return (
     <>
       <div className="flex flex-col justify-between items-center gap-2">
-        <h2 className="text-3xl font-bold text-gray-800">
-          {patientName || "Patient Name"}
+        <h2 className="text-2xl text-gray-800">
+          Notes for{" "}
+          <span className="font-bold">{patientName || "Patient Name"}</span>
         </h2>
         <div className="flex items-center space-x-4">
           <Button
@@ -40,7 +41,7 @@ export const NotesTab = ({
           >
             Transcription
           </Button>
-          <Button onClick={() => handleFullEhrUpdate()}>Push all to EHR</Button>
+          <Button onClick={handleFullEhrUpdate}>Push all to EHR</Button>
         </div>
         <div className="text-sm text-gray-500">Note saved automatically</div>
       </div>

vim--ai-scribe--react/src/components/organisms/ai-scribe-demo/useRecorder.ts

@@ -46,7 +46,7 @@ export const RecordingPanel = ({
       </Button>
 
       <a
-        href="#"
+        href="https://docs.getvim.com/"
         className="text-green-600 hover:text-green-800 underline mt-4"
       >
         How do I tell my patient about AI Scribe?

vim--ai-scribe--react/src/components/organisms/notes-tab/NotesTab.tsx

@@ -0,0 +1,28 @@
+import { useVimOsContext } from "@/providers/VimOSContext";
+import { EHR } from "vim-os-js-browser/types";
+import { useEffect, useState } from "react";
+
+/**
+ * Securely fetches the current user's first and last name using the VimOS SDK session context.
+ * Does not expose sensitive error details. Only returns first and last name.
+ *
+ * @returns { providerName, loading }
+ */
+export function usePatientName() {
+  const vimOS = useVimOsContext();
+  const [patientName, setPatientName] = useState("");
+  useEffect(() => {
+    const onPatientChange = (patient: EHR.Patient | undefined) => {
+      setPatientName(
+        [patient?.demographics?.firstName, patient?.demographics?.lastName]
+          .filter(Boolean)
+          .join(" ")
+      );
+    };
+    vimOS.ehr.subscribe("patient", onPatientChange);
+
+    return () => vimOS.ehr.unsubscribe("patient", onPatientChange);
+  }, [vimOS.ehr]);
+
+  return patientName;
+}

vim--ai-scribe--react/src/components/organisms/recording-panel/RecordingPanel.tsx

@@ -0,0 +1,14 @@
+import { useVimOsContext } from "@/providers/VimOSContext";
+
+/**
+ * Securely fetches the current user's first and last name using the VimOS SDK session context.
+ * Does not expose sensitive error details. Only returns first and last name.
+ *
+ * @returns { providerName, loading }
+ */
+export function useProviderName() {
+  const vimOS = useVimOsContext();
+
+  const { firstName, lastName } = vimOS.sessionContext.user.demographics || {};
+  return [firstName, lastName].filter(Boolean).join(" ");
+}