npm - scribe-widget - Versions diffs - 1.0.0 - Mend

scribe-widget 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +230 -0
package/dist/scribe-widget.es.js +64563 -0
package/dist/scribe-widget.umd.js +80 -0
package/index.html +205 -0
package/package.json +26 -0
package/src/App.tsx +114 -0
package/src/components/ConfigState.tsx +68 -0
package/src/components/ErrorState.tsx +20 -0
package/src/components/FloatingPanel.tsx +83 -0
package/src/components/Icons.tsx +43 -0
package/src/components/IdleState.tsx +24 -0
package/src/components/PermissionState.tsx +22 -0
package/src/components/ProcessingState.tsx +8 -0
package/src/components/RecordingState.tsx +48 -0
package/src/components/ResultsState.tsx +27 -0
package/src/hooks/useScribeSession.ts +227 -0
package/src/index.tsx +123 -0
package/src/styles/widget.css +495 -0
package/src/types.ts +14 -0
package/src/vite-env.d.ts +6 -0
package/tsconfig.json +21 -0
package/vite.config.ts +27 -0

package/index.html ADDED Viewed

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Eka Scribe Widget Demo</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      margin: 0;
+      padding: 40px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    h1 {
+      color: white;
+      margin-bottom: 16px;
+    }
+    p {
+      color: rgba(255, 255, 255, 0.9);
+      line-height: 1.6;
+    }
+    .card {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      margin-top: 24px;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+    }
+    .card h2 {
+      margin-top: 0;
+      color: #1f2937;
+    }
+    .code-block {
+      background: #1f2937;
+      color: #e5e7eb;
+      padding: 16px;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .code-block .comment {
+      color: #6b7280;
+    }
+    .code-block .string {
+      color: #34d399;
+    }
+    .code-block .keyword {
+      color: #60a5fa;
+    }
+    .result-box {
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      padding: 16px;
+      margin-top: 16px;
+      min-height: 100px;
+    }
+    .result-box pre {
+      margin: 0;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 13px;
+    }
+    .config-form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .form-group label {
+      font-weight: 500;
+      color: #374151;
+      font-size: 14px;
+    }
+    .form-group input {
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      font-size: 14px;
+    }
+    .form-group input:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+    .btn {
+      background: #2563eb;
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .btn:hover {
+      background: #1d4ed8;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Eka Scribe Widget Demo</h1>
+    <p>
+      This is a demo page for the Eka Scribe floating panel widget.
+      The widget appears in the bottom-right corner and allows you to record audio for medical transcription.
+    </p>
+    <div class="card">
+      <h2>Configuration</h2>
+      <div class="config-form">
+        <div class="form-group">
+          <label for="apiKey">API Key</label>
+          <input type="text" id="apiKey" placeholder="Enter your API key" value="">
+        </div>
+        <div class="form-group">
+          <label for="baseUrl">Base URL</label>
+          <input type="text" id="baseUrl" placeholder="https://api.example.com" value="">
+        </div>
+        <button class="btn" onclick="initWidget()">Initialize Widget</button>
+      </div>
+    </div>
+    <div class="card">
+      <h2>Usage</h2>
+      <div class="code-block">
+<span class="comment">// Method 1: Script tag</span>
+&lt;script src="scribe-widget.umd.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  <span class="keyword">const</span> widget = EkaScribe.init({
+    apiKey: <span class="string">'your-api-key'</span>,
+    baseUrl: <span class="string">'https://api.example.com'</span>,
+    templates: [<span class="string">'soap'</span>],
+    debug: <span class="keyword">true</span>,
+    onResult: (result) => {
+      console.log(<span class="string">'Result:'</span>, result);
+    }
+  });
+&lt;/script&gt;
+<span class="comment">// Method 2: ES Module</span>
+<span class="keyword">import</span> EkaScribe <span class="keyword">from</span> <span class="string">'eka-scribe-widget'</span>;
+<span class="keyword">const</span> widget = EkaScribe.init({
+  apiKey: <span class="string">'your-api-key'</span>,
+  baseUrl: <span class="string">'https://api.example.com'</span>,
+});
+      </div>
+    </div>
+    <div class="card">
+      <h2>Results</h2>
+      <p style="color: #6b7280; font-size: 14px;">Recording results will appear here:</p>
+      <div class="result-box">
+        <pre id="resultOutput">No results yet. Start a recording to see results.</pre>
+      </div>
+    </div>
+  </div>
+  <script type="module">
+    import EkaScribe from './src/index.tsx';
+    window.initWidget = function() {
+      const apiKey = document.getElementById('apiKey').value;
+      const baseUrl = document.getElementById('baseUrl').value;
+      if (!baseUrl) {
+        alert('Please enter both API Key and Base URL');
+        return;
+      }
+      const widget = EkaScribe.init({
+        apiKey: apiKey,
+        baseUrl: baseUrl,
+        templates: ['eka_emr_template'],
+        languageHint: ['en-IN'],
+        debug: true,
+        onResult: (result) => {
+          document.getElementById('resultOutput').textContent = JSON.stringify(result, null, 2);
+        },
+        onError: (error) => {
+          document.getElementById('resultOutput').textContent = 'Error: ' + error.message;
+        }
+      });
+      console.log('Widget initialized:', widget);
+    }
+  </script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "scribe-widget",
+  "version": "1.0.0",
+  "description": "Floating panel widget for medical transcription using eka.scribe",
+  "main": "dist/scribe-widget.umd.js",
+  "module": "dist/scribe-widget.es.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "med-scribe-alliance-ts-sdk": "1.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.0"
+  }
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+import { useState, useMemo } from 'react';
+import { FloatingPanel } from './components/FloatingPanel';
+import { ConfigState } from './components/ConfigState';
+import { IdleState } from './components/IdleState';
+import { PermissionState } from './components/PermissionState';
+import { RecordingState } from './components/RecordingState';
+import { ProcessingState } from './components/ProcessingState';
+import { ResultsState } from './components/ResultsState';
+import { ErrorState } from './components/ErrorState';
+import { useScribeSession } from './hooks/useScribeSession';
+import { ScribeWidgetConfig } from './types';
+interface AppProps {
+  config: ScribeWidgetConfig;
+  onClose: () => void;
+}
+export function App({ config: initialConfig, onClose }: AppProps) {
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [credentials, setCredentials] = useState<{ apiKey: string; baseUrl: string } | null>(
+    initialConfig.baseUrl ? { apiKey: initialConfig.apiKey, baseUrl: initialConfig.baseUrl } : null
+  );
+  // Merge initial config with user-provided credentials
+  const config = useMemo<ScribeWidgetConfig>(() => {
+    if (!credentials) {
+      return initialConfig;
+    }
+    return {
+      ...initialConfig,
+      apiKey: credentials.apiKey,
+      baseUrl: credentials.baseUrl,
+    };
+  }, [initialConfig, credentials]);
+  const needsConfig = !credentials;
+  const {
+    state,
+    elapsedTime,
+    result,
+    errorMessage,
+    startRecording,
+    pauseRecording,
+    resumeRecording,
+    stopRecording,
+    reset,
+  } = useScribeSession(config);
+  if (isMinimized) {
+    return null;
+  }
+  const handleConfigSubmit = (apiKey: string, baseUrl: string) => {
+    setCredentials({ apiKey, baseUrl });
+  };
+  const renderContent = () => {
+    // Show config form if credentials not provided
+    if (needsConfig) {
+      return (
+        <ConfigState
+          onSubmit={handleConfigSubmit}
+          initialApiKey={initialConfig.apiKey || ''}
+          initialBaseUrl={initialConfig.baseUrl || ''}
+        />
+      );
+    }
+    switch (state) {
+      case 'idle':
+        return <IdleState onStartRecording={startRecording} />;
+      case 'permission':
+        return <PermissionState onRequestPermission={startRecording} />;
+      case 'recording':
+      case 'paused':
+        return (
+          <RecordingState
+            elapsedTime={elapsedTime}
+            isPaused={state === 'paused'}
+            onPause={pauseRecording}
+            onResume={resumeRecording}
+            onStop={stopRecording}
+          />
+        );
+      case 'processing':
+        return <ProcessingState />;
+      case 'results':
+        return result ? (
+          <ResultsState result={result} onNewRecording={reset} />
+        ) : null;
+      case 'error':
+        return <ErrorState message={errorMessage} onRetry={reset} />;
+      default:
+        return <IdleState onStartRecording={startRecording} />;
+    }
+  };
+  return (
+    <FloatingPanel
+      position={config.position}
+      onClose={onClose}
+      onMinimize={() => setIsMinimized(true)}
+    >
+      {renderContent()}
+    </FloatingPanel>
+  );
+}

package/src/components/ConfigState.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { LogoIcon } from './Icons';
+interface ConfigStateProps {
+  onSubmit: (apiKey: string, baseUrl: string) => void;
+  initialApiKey?: string;
+  initialBaseUrl?: string;
+}
+export function ConfigState({ onSubmit, initialApiKey = '', initialBaseUrl = '' }: ConfigStateProps) {
+  const [apiKey, setApiKey] = useState(initialApiKey);
+  const [baseUrl, setBaseUrl] = useState(initialBaseUrl);
+  const [error, setError] = useState('');
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!baseUrl.trim()) {
+      setError('Base URL is required');
+      return;
+    }
+    setError('');
+    onSubmit(apiKey.trim(), baseUrl.trim());
+  };
+  return (
+    <div className="config-state">
+      <div className="logo">
+        <div className="logo-icon">
+          <LogoIcon />
+        </div>
+        <span className="logo-text">eka.scribe</span>
+      </div>
+      <form className="config-form" onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="eka-api-key">API Key</label>
+          <input
+            id="eka-api-key"
+            type="text"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            placeholder="Enter your API key (optional)"
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="eka-base-url">Base URL</label>
+          <input
+            id="eka-base-url"
+            type="text"
+            value={baseUrl}
+            onChange={(e) => setBaseUrl(e.target.value)}
+            placeholder="https://api.eka.care"
+            required
+          />
+        </div>
+        {error && <p className="config-error">{error}</p>}
+        <button type="submit" className="config-submit-btn">
+          Continue
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/components/ErrorState.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import { ErrorIcon } from './Icons';
+interface ErrorStateProps {
+  message: string;
+  onRetry: () => void;
+}
+export function ErrorState({ message, onRetry }: ErrorStateProps) {
+  return (
+    <div className="error-state">
+      <div className="error-icon">
+        <ErrorIcon />
+      </div>
+      <p className="error-message">{message}</p>
+      <button className="retry-btn" onClick={onRetry}>
+        Try Again
+      </button>
+    </div>
+  );
+}

package/src/components/FloatingPanel.tsx ADDED Viewed

@@ -0,0 +1,83 @@
+import { useRef, useEffect, useCallback, ReactNode } from 'react';
+import { CloseIcon, MinimizeIcon } from './Icons';
+interface FloatingPanelProps {
+  children: ReactNode;
+  position?: { bottom?: number; right?: number; top?: number; left?: number };
+  onClose: () => void;
+  onMinimize: () => void;
+}
+export function FloatingPanel({ children, position, onClose, onMinimize }: FloatingPanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const isDraggingRef = useRef(false);
+  const startPosRef = useRef({ x: 0, y: 0, right: 20, bottom: 20 });
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('button')) return;
+    isDraggingRef.current = true;
+    const panel = panelRef.current;
+    if (panel) {
+      startPosRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+        right: parseInt(panel.style.right || '20'),
+        bottom: parseInt(panel.style.bottom || '20'),
+      };
+    }
+  }, []);
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDraggingRef.current || !panelRef.current) return;
+      const deltaX = startPosRef.current.x - e.clientX;
+      const deltaY = startPosRef.current.y - e.clientY;
+      panelRef.current.style.right = `${startPosRef.current.right + deltaX}px`;
+      panelRef.current.style.bottom = `${startPosRef.current.bottom + deltaY}px`;
+    };
+    const handleMouseUp = () => {
+      isDraggingRef.current = false;
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+  const panelStyle: React.CSSProperties = {
+    bottom: position?.bottom ?? 20,
+    right: position?.right ?? 20,
+    ...(position?.top !== undefined && { top: position.top, bottom: 'auto' }),
+    ...(position?.left !== undefined && { left: position.left, right: 'auto' }),
+  };
+  return (
+    <div ref={panelRef} className="scribe-panel" style={panelStyle}>
+      <div className="panel-header" onMouseDown={handleMouseDown}>
+        <div className="drag-handle">
+          <span /><span /><span />
+          <span /><span /><span />
+        </div>
+        <div className="header-actions">
+          <button className="header-btn" onClick={onMinimize} title="Minimize">
+            <MinimizeIcon />
+          </button>
+          <button className="header-btn" onClick={onClose} title="Close">
+            <CloseIcon />
+          </button>
+        </div>
+      </div>
+      <div className="panel-content">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/Icons.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+export const LogoIcon = () => (
+  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 4C9.37 4 4 9.37 4 16s5.37 12 12 12 12-5.37 12-12S22.63 4 16 4z" fill="#2563eb"/>
+    <path d="M16 8c-2.2 0-4 1.8-4 4v4c0 2.2 1.8 4 4 4s4-1.8 4-4v-4c0-2.2-1.8-4-4-4z" fill="white"/>
+    <path d="M22 16c0 3.3-2.7 6-6 6s-6-2.7-6-6H8c0 4.1 3.1 7.5 7 7.9V26h2v-2.1c3.9-.4 7-3.8 7-7.9h-2z" fill="white"/>
+  </svg>
+);
+export const MicIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+    <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+    <line x1="12" x2="12" y1="19" y2="22"/>
+  </svg>
+);
+export const CloseIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="18" y1="6" x2="6" y2="18"/>
+    <line x1="6" y1="6" x2="18" y2="18"/>
+  </svg>
+);
+export const MinimizeIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="3" width="18" height="18" rx="2"/>
+    <path d="M9 3v18"/>
+  </svg>
+);
+export const ErrorIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <line x1="12" y1="8" x2="12" y2="12"/>
+    <line x1="12" y1="16" x2="12.01" y2="16"/>
+  </svg>
+);
+export const ChatIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+  </svg>
+);

package/src/components/IdleState.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { LogoIcon, MicIcon } from './Icons';
+interface IdleStateProps {
+  onStartRecording: () => void;
+}
+export function IdleState({ onStartRecording }: IdleStateProps) {
+  return (
+    <div className="idle-state">
+      <div className="logo">
+        <div className="logo-icon">
+          <LogoIcon />
+        </div>
+        <span className="logo-text">eka.scribe</span>
+      </div>
+      <button className="start-btn" onClick={onStartRecording}>
+        Start Recording
+        <span className="mic-icon">
+          <MicIcon />
+        </span>
+      </button>
+    </div>
+  );
+}

package/src/components/PermissionState.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { MicIcon } from './Icons';
+interface PermissionStateProps {
+  onRequestPermission: () => void;
+}
+export function PermissionState({ onRequestPermission }: PermissionStateProps) {
+  return (
+    <div className="permission-state">
+      <div className="permission-icon">
+        <MicIcon />
+      </div>
+      <p className="permission-text">
+        Microphone access is required to record audio.<br />
+        Please allow access when prompted.
+      </p>
+      <button className="permission-btn" onClick={onRequestPermission}>
+        Allow Microphone
+      </button>
+    </div>
+  );
+}

package/src/components/ProcessingState.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+export function ProcessingState() {
+  return (
+    <div className="processing-state">
+      <div className="spinner" />
+      <p className="processing-text">Processing your recording...</p>
+    </div>
+  );
+}

package/src/components/RecordingState.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { ChatIcon } from './Icons';
+interface RecordingStateProps {
+  elapsedTime: number;
+  isPaused: boolean;
+  onPause: () => void;
+  onResume: () => void;
+  onStop: () => void;
+}
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+export function RecordingState({
+  elapsedTime,
+  isPaused,
+  onPause,
+  onResume,
+  onStop
+}: RecordingStateProps) {
+  return (
+    <div className="recording-state">
+      <div className="recording-indicator">
+        <div className={`recording-icon ${!isPaused ? 'active' : ''}`}>
+          <ChatIcon />
+        </div>
+        <span className="timer">{formatTime(elapsedTime)}</span>
+      </div>
+      <div className="recording-actions">
+        {isPaused ? (
+          <button className="resume-btn" onClick={onResume}>
+            Resume
+          </button>
+        ) : (
+          <button className="pause-btn" onClick={onPause}>
+            Pause
+          </button>
+        )}
+        <button className="stop-btn" onClick={onStop} title="Stop recording">
+          <div className="stop-icon" />
+        </button>
+      </div>
+    </div>
+  );
+}