scribe-widget 1.0.0

package/src/components/ResultsState.tsx

@@ -0,0 +1,27 @@
+import { GetSessionStatusResponse } from 'med-scribe-alliance-ts-sdk';
+
+interface ResultsStateProps {
+  result: GetSessionStatusResponse;
+  onNewRecording: () => void;
+}
+
+export function ResultsState({ result, onNewRecording }: ResultsStateProps) {
+  return (
+    <div className="results-state">
+      <div className="results-header">
+        <span className="results-title">Recording Complete</span>
+        <button className="new-recording-btn" onClick={onNewRecording}>
+          New Recording
+        </button>
+      </div>
+      <div className="results-content">
+        <div className="transcript-section">
+          <div className="section-title">Transcript</div>
+          <div className="transcript-text">
+            {result.transcript || 'No transcript available.'}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/hooks/useScribeSession.ts

@@ -0,0 +1,227 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { ScribeClient, GetSessionStatusResponse } from 'med-scribe-alliance-ts-sdk';
+import { WidgetState, ScribeWidgetConfig } from '../types';
+
+interface UseScribeSessionReturn {
+  state: WidgetState;
+  elapsedTime: number;
+  result: GetSessionStatusResponse | null;
+  errorMessage: string;
+  startRecording: () => Promise<void>;
+  pauseRecording: () => void;
+  resumeRecording: () => void;
+  stopRecording: () => Promise<void>;
+  reset: () => void;
+}
+
+export function useScribeSession(config: ScribeWidgetConfig): UseScribeSessionReturn {
+  const [state, setState] = useState<WidgetState>('idle');
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [result, setResult] = useState<GetSessionStatusResponse | null>(null);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const clientRef = useRef<ScribeClient | null>(null);
+  const timerRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number>(0);
+  const pausedTimeRef = useRef<number>(0);
+
+  const log = useCallback((...args: unknown[]) => {
+    if (config.debug) {
+      console.log('[EkaScribe]', ...args);
+    }
+  }, [config.debug]);
+
+  // Initialize SDK client only when baseUrl is provided
+  useEffect(() => {
+    if (!config.baseUrl) {
+      log('Skipping SDK init - no baseUrl provided');
+      return;
+    }
+
+    const initClient = async () => {
+      try {
+        clientRef.current = new ScribeClient({
+          apiKey: config.apiKey,
+          baseUrl: config.baseUrl,
+          debug: config.debug,
+        });
+        await clientRef.current.init();
+        log('SDK initialized');
+      } catch (error) {
+        log('Failed to initialize SDK', error);
+      }
+    };
+
+    initClient();
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [config.apiKey, config.baseUrl, config.debug, log]);
+
+  const startTimer = useCallback(() => {
+    timerRef.current = window.setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+      setElapsedTime(elapsed);
+    }, 1000);
+  }, []);
+
+  const stopTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const checkMicrophonePermission = async (): Promise<PermissionState> => {
+    try {
+      const result = await navigator.permissions.query({ name: 'microphone' as PermissionName });
+      return result.state;
+    } catch {
+      return 'prompt';
+    }
+  };
+
+  const requestMicrophonePermission = async (): Promise<boolean> => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach(track => track.stop());
+      return true;
+    } catch (error) {
+      log('Microphone permission denied', error);
+      return false;
+    }
+  };
+
+  const showError = useCallback((message: string) => {
+    setErrorMessage(message);
+    setState('error');
+  }, []);
+
+  const startRecording = useCallback(async () => {
+    const permission = await checkMicrophonePermission();
+
+    if (permission === 'denied') {
+      showError('Microphone access is blocked. Please enable it in your browser settings.');
+      return;
+    }
+
+    if (permission === 'prompt') {
+      setState('permission');
+      const granted = await requestMicrophonePermission();
+      if (!granted) {
+        showError('Microphone access is required to record.');
+        return;
+      }
+    }
+
+    if (!clientRef.current) {
+      showError('SDK not initialized. Please try again.');
+      return;
+    }
+
+    try {
+      setState('recording');
+
+      await clientRef.current.startRecording({
+        templates: config.templates || ['soap'],
+        languageHint: config.languageHint,
+      });
+
+      startTimeRef.current = Date.now();
+      pausedTimeRef.current = 0;
+      setElapsedTime(0);
+      startTimer();
+
+      log('Recording started');
+    } catch (error) {
+      log('Failed to start recording', error);
+      showError('Failed to start recording. Please try again.');
+    }
+  }, [config.templates, config.languageHint, log, showError, startTimer]);
+
+  const pauseRecording = useCallback(() => {
+    if (!clientRef.current) return;
+
+    clientRef.current.pauseRecording();
+    setState('paused');
+    pausedTimeRef.current = Date.now();
+    stopTimer();
+
+    log('Recording paused');
+  }, [log, stopTimer]);
+
+  const resumeRecording = useCallback(() => {
+    if (!clientRef.current) return;
+
+    clientRef.current.resumeRecording();
+    setState('recording');
+
+    if (pausedTimeRef.current) {
+      startTimeRef.current += Date.now() - pausedTimeRef.current;
+      pausedTimeRef.current = 0;
+    }
+
+    startTimer();
+
+    log('Recording resumed');
+  }, [log, startTimer]);
+
+  const stopRecording = useCallback(async () => {
+    if (!clientRef.current) return;
+
+    try {
+      stopTimer();
+      setState('processing');
+
+      log('Stopping recording...');
+      const endResponse = await clientRef.current.endRecording();
+      log('Recording ended', endResponse);
+
+      log('Polling for completion...');
+      const finalResult = await clientRef.current.pollForCompletion(undefined, {
+        maxAttempts: 60,
+        intervalMs: 2000,
+        onProgress: (status) => {
+          log('Status update:', status.status);
+        },
+      });
+
+      setResult(finalResult);
+      log('Final result:', finalResult);
+
+      setState('results');
+
+      if (config.onResult) {
+        config.onResult(finalResult);
+      }
+    } catch (error) {
+      log('Failed to stop recording', error);
+      showError('Failed to process recording. Please try again.');
+      if (config.onError && error instanceof Error) {
+        config.onError(error);
+      }
+    }
+  }, [config, log, showError, stopTimer]);
+
+  const reset = useCallback(() => {
+    setResult(null);
+    setErrorMessage('');
+    setElapsedTime(0);
+    setState('idle');
+  }, []);
+
+  return {
+    state,
+    elapsedTime,
+    result,
+    errorMessage,
+    startRecording,
+    pauseRecording,
+    resumeRecording,
+    stopRecording,
+    reset,
+  };
+}

package/src/index.tsx

@@ -0,0 +1,123 @@
+import { createRoot, Root } from 'react-dom/client';
+import { App } from './App';
+import { ScribeWidgetConfig } from './types';
+import widgetStyles from './styles/widget.css?inline';
+
+export type { ScribeWidgetConfig, WidgetState } from './types';
+
+class ScribeWidget {
+  private container: HTMLDivElement;
+  private shadowRoot: ShadowRoot;
+  private root: Root | null = null;
+  private config: ScribeWidgetConfig;
+  private visible: boolean = true;
+
+  constructor(config: ScribeWidgetConfig) {
+    this.config = {
+      templates: ['soap'],
+      languageHint: ['en'],
+      position: { bottom: 20, right: 20 },
+      ...config,
+    };
+
+    // Create container element
+    this.container = document.createElement('div');
+    this.container.id = 'eka-scribe-widget';
+
+    // Attach shadow DOM
+    this.shadowRoot = this.container.attachShadow({ mode: 'closed' });
+
+    // Inject styles
+    const styleEl = document.createElement('style');
+    styleEl.textContent = widgetStyles;
+    this.shadowRoot.appendChild(styleEl);
+
+    // Create React mount point
+    const mountPoint = document.createElement('div');
+    mountPoint.id = 'eka-scribe-root';
+    this.shadowRoot.appendChild(mountPoint);
+
+    // Create React root
+    this.root = createRoot(mountPoint);
+  }
+
+  private render(): void {
+    if (!this.root || !this.visible) return;
+
+    this.root.render(
+      <App
+        config={this.config}
+        onClose={() => this.hide()}
+      />
+    );
+  }
+
+  public mount(target?: HTMLElement | string): void {
+    const targetEl = typeof target === 'string'
+      ? document.querySelector(target)
+      : target || document.body;
+
+    if (targetEl) {
+      targetEl.appendChild(this.container);
+      this.render();
+    }
+  }
+
+  public unmount(): void {
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
+    this.container.remove();
+  }
+
+  public show(): void {
+    this.visible = true;
+    this.container.style.display = 'block';
+    this.render();
+  }
+
+  public hide(): void {
+    this.visible = false;
+    this.container.style.display = 'none';
+  }
+
+  public isVisible(): boolean {
+    return this.visible;
+  }
+}
+
+// Global initialization function for script tag usage
+let widgetInstance: ScribeWidget | null = null;
+
+function initEkaScribe(config: ScribeWidgetConfig): ScribeWidget {
+  if (widgetInstance) {
+    widgetInstance.unmount();
+  }
+  widgetInstance = new ScribeWidget(config);
+  widgetInstance.mount();
+  return widgetInstance;
+}
+
+function getEkaScribe(): ScribeWidget | null {
+  return widgetInstance;
+}
+
+// Expose to window for script tag usage
+if (typeof window !== 'undefined') {
+  (window as Window & { EkaScribe?: unknown }).EkaScribe = {
+    init: initEkaScribe,
+    getInstance: getEkaScribe,
+    Widget: ScribeWidget,
+  };
+}
+
+// Named exports for ES module usage
+export { ScribeWidget, initEkaScribe as init, getEkaScribe as getInstance };
+
+// Default export for module usage
+export default {
+  init: initEkaScribe,
+  getInstance: getEkaScribe,
+  Widget: ScribeWidget,
+};