scribe-widget 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scribe-widget",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Floating panel widget for medical transcription using eka.scribe",
   "main": "dist/scribe-widget.umd.js",
   "module": "dist/scribe-widget.es.js",

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { FloatingPanel } from './components/FloatingPanel';
 import { ConfigState } from './components/ConfigState';
 import { IdleState } from './components/IdleState';
@@ -41,6 +41,7 @@ export function App({ config: initialConfig, onClose }: AppProps) {
     elapsedTime,
     result,
     errorMessage,
+    initializeSDK,
     startRecording,
     pauseRecording,
     resumeRecording,
@@ -49,12 +50,25 @@ export function App({ config: initialConfig, onClose }: AppProps) {
     reset,
   } = useScribeSession(config);
 
+  // Initialize SDK when credentials are set
+  useEffect(() => {
+    if (credentials?.baseUrl) {
+      initializeSDK();
+    }
+  }, [credentials, initializeSDK]);
+
   // Start new recording - goes back to config screen
   const handleStartNewRecording = useCallback(() => {
     reset();
     setCredentials(null);
   }, [reset]);
 
+  // Handle EMR selection
+  const handleSelectEMR = useCallback((emrId: string) => {
+    console.log('Selected EMR:', emrId);
+    // TODO: Handle EMR selection logic
+  }, []);
+
   if (isMinimized) {
     return null;
   }
@@ -98,7 +112,13 @@ export function App({ config: initialConfig, onClose }: AppProps) {
         return <ProcessingState />;
 
       case 'results':
-        return result ? <ResultsState result={result} onNewRecording={handleStartNewRecording} /> : null;
+        return result ? (
+          <ResultsState
+            result={result}
+            onNewRecording={handleStartNewRecording}
+            onSelectEMR={handleSelectEMR}
+          />
+        ) : null;
 
       case 'polling_error':
         return (

package/src/components/EMRListState.tsx

@@ -0,0 +1,50 @@
+interface EMRListStateProps {
+  onSelectEMR: (emrId: string) => void;
+  onNewRecording: () => void;
+  onBack: () => void;
+}
+
+const EMR_LIST = [
+  { id: 'eka_emr', name: 'Eka EMR', description: 'Eka Care Electronic Medical Records' },
+  { id: 'open_emr', name: 'OpenEMR', description: 'Open-source Electronic Health Records' },
+  { id: 'open_mrs', name: 'OpenMRS', description: 'Open Medical Record System' },
+];
+
+export function EMRListState({ onSelectEMR, onNewRecording, onBack }: EMRListStateProps) {
+  return (
+    <div className="emr-list-state">
+      <div className="emr-list-header">
+        <button className="back-btn" onClick={onBack} title="Back">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M19 12H5M12 19l-7-7 7-7"/>
+          </svg>
+        </button>
+        <span className="emr-list-title">Integrated EMRs</span>
+      </div>
+
+      <div className="emr-list-content">
+        {EMR_LIST.map((emr) => (
+          <button
+            key={emr.id}
+            className="emr-item"
+            onClick={() => onSelectEMR(emr.id)}
+          >
+            <div className="emr-item-info">
+              <span className="emr-item-name">{emr.name}</span>
+              <span className="emr-item-desc">{emr.description}</span>
+            </div>
+            <svg className="emr-item-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9 18l6-6-6-6"/>
+            </svg>
+          </button>
+        ))}
+      </div>
+
+      <div className="emr-list-footer">
+        <button className="start-new-recording-btn" onClick={onNewRecording}>
+          Start New Recording
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/IdleState.tsx

@@ -11,7 +11,7 @@ export function IdleState({ onStartRecording }: IdleStateProps) {
         <div className="logo-icon">
           <LogoIcon />
         </div>
-        <span className="logo-text">eka.scribe</span>
+        <span className="logo-text">scribe</span>
       </div>
       <button className="start-btn" onClick={onStartRecording}>
         Start Recording

package/src/components/ResultsState.tsx

@@ -1,11 +1,19 @@
 import { GetSessionStatusResponse } from 'med-scribe-alliance-ts-sdk';
 
+const EMR_LIST = [
+  { id: 'eka_emr', name: 'Eka EMR', description: 'Eka Care Electronic Medical Records' },
+  { id: 'open_emr', name: 'OpenEMR', description: 'Open-source Electronic Health Records' },
+  { id: 'open_mrs', name: 'OpenMRS', description: 'Open Medical Record System' },
+];
+
 interface ResultsStateProps {
   result: GetSessionStatusResponse;
   onNewRecording: () => void;
+  onSelectEMR: (emrId: string) => void;
 }
 
-export function ResultsState({ result, onNewRecording }: ResultsStateProps) {
+export function ResultsState({ result, onNewRecording, onSelectEMR }: ResultsStateProps) {
+  console.log('prescription result - WIDGET', result);
   return (
     <div className="results-state">
       <div className="results-header">
@@ -17,8 +25,27 @@ export function ResultsState({ result, onNewRecording }: ResultsStateProps) {
       <div className="results-content">
         <div className="transcript-section">
           <div className="section-title">Transcript</div>
-          <div className="transcript-text">
-            {result.transcript || 'No transcript available.'}
+          <div className="transcript-text">{result.transcript || 'No transcript available.'}</div>
+        </div>
+
+        <div className="emr-section">
+          <div className="section-title">Integrated EMRs</div>
+          <div className="emr-list-inline">
+            {EMR_LIST.map((emr) => (
+              <button
+                key={emr.id}
+                className="emr-item"
+                onClick={() => onSelectEMR(emr.id)}
+              >
+                <div className="emr-item-info">
+                  <span className="emr-item-name">{emr.name}</span>
+                  <span className="emr-item-desc">{emr.description}</span>
+                </div>
+                <svg className="emr-item-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M9 18l6-6-6-6"/>
+                </svg>
+              </button>
+            ))}
           </div>
         </div>
       </div>

package/src/hooks/useScribeSession.ts

@@ -7,6 +7,7 @@ interface UseScribeSessionReturn {
   elapsedTime: number;
   result: GetSessionStatusResponse | null;
   errorMessage: string;
+  initializeSDK: () => Promise<void>;
   startRecording: () => Promise<void>;
   pauseRecording: () => void;
   resumeRecording: () => void;
@@ -35,36 +36,35 @@ export function useScribeSession(config: ScribeWidgetConfig): UseScribeSessionRe
     [config.debug]
   );
 
-  // Initialize SDK client only when baseUrl is provided
-  useEffect(() => {
+  // Initialize SDK client - can be called explicitly
+  const initializeSDK = useCallback(async () => {
     if (!config.baseUrl) {
       log('Skipping SDK init - no baseUrl provided');
       return;
     }
 
-    const initClient = async () => {
-      try {
-        // Use getInstance instead of new ScribeClient
-        clientRef.current = ScribeClient.getInstance({
-          accessToken: config.accessToken,
-          baseUrl: config.baseUrl,
-          debug: config.debug,
-        });
-        await clientRef.current.init();
-        log('SDK initialized');
-      } catch (error) {
-        log('Failed to initialize SDK', error);
-      }
-    };
-
-    initClient();
+    try {
+      // Use getInstance instead of new ScribeClient
+      clientRef.current = ScribeClient.getInstance({
+        accessToken: config.accessToken,
+        baseUrl: config.baseUrl,
+        debug: config.debug,
+      });
+      await clientRef.current.init();
+      log('SDK initialized');
+    } catch (error) {
+      log('Failed to initialize SDK', error);
+    }
+  }, [config.accessToken, config.baseUrl, config.debug, log]);
 
+  // Cleanup timer on unmount
+  useEffect(() => {
     return () => {
       if (timerRef.current) {
         clearInterval(timerRef.current);
       }
     };
-  }, [config.accessToken, config.baseUrl, config.debug, log]);
+  }, []);
 
   const startTimer = useCallback(() => {
     timerRef.current = window.setInterval(() => {
@@ -253,6 +253,7 @@ export function useScribeSession(config: ScribeWidgetConfig): UseScribeSessionRe
     elapsedTime,
     result,
     errorMessage,
+    initializeSDK,
     startRecording,
     pauseRecording,
     resumeRecording,

package/src/styles/widget.css

@@ -18,7 +18,8 @@
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
   z-index: 2147483647;
   overflow: hidden;
-  min-width: 320px;
+  width: 380px;
+  max-width: calc(100vw - 40px);
 }
 
 .panel-header {
@@ -545,3 +546,132 @@
   background: #f3f4f6;
   color: #374151;
 }
+
+/* EMR Section (inline on results) */
+.emr-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.emr-list-inline {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* EMR List State */
+.emr-list-state {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.emr-list-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.back-btn:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.back-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.emr-list-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.emr-list-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.emr-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: left;
+}
+
+.emr-item:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.emr-item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.emr-item-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.emr-item-desc {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.emr-item-arrow {
+  width: 20px;
+  height: 20px;
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+.emr-list-footer {
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.start-new-recording-btn {
+  width: 100%;
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.start-new-recording-btn:hover {
+  background: #1d4ed8;
+}

package/src/types.ts

@@ -8,7 +8,8 @@ export type WidgetState =
   | 'processing'
   | 'results'
   | 'error'
-  | 'polling_error';
+  | 'polling_error'
+  | 'emr_list';
 
 export interface ScribeWidgetConfig {
   accessToken?: string;