scribe-widget 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scribe-widget",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "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

@@ -55,6 +55,12 @@ export function App({ config: initialConfig, onClose }: AppProps) {
     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 +104,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/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/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;