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
  1. package/README.md +230 -0
  2. package/dist/scribe-widget.es.js +64563 -0
  3. package/dist/scribe-widget.umd.js +80 -0
  4. package/index.html +205 -0
  5. package/package.json +26 -0
  6. package/src/App.tsx +114 -0
  7. package/src/components/ConfigState.tsx +68 -0
  8. package/src/components/ErrorState.tsx +20 -0
  9. package/src/components/FloatingPanel.tsx +83 -0
  10. package/src/components/Icons.tsx +43 -0
  11. package/src/components/IdleState.tsx +24 -0
  12. package/src/components/PermissionState.tsx +22 -0
  13. package/src/components/ProcessingState.tsx +8 -0
  14. package/src/components/RecordingState.tsx +48 -0
  15. package/src/components/ResultsState.tsx +27 -0
  16. package/src/hooks/useScribeSession.ts +227 -0
  17. package/src/index.tsx +123 -0
  18. package/src/styles/widget.css +495 -0
  19. package/src/types.ts +14 -0
  20. package/src/vite-env.d.ts +6 -0
  21. package/tsconfig.json +21 -0
  22. package/vite.config.ts +27 -0
package/README.md ADDED
@@ -0,0 +1,230 @@
1
+ # Eka Scribe Widget
2
+
3
+ A floating panel widget for medical transcription using the eka.scribe SDK. This widget can be embedded into any website as a Shadow DOM component, providing complete style isolation.
4
+
5
+ ## What is this?
6
+
7
+ Eka Scribe Widget is a **drop-in recording widget** that:
8
+
9
+ 1. **Records audio** from the user's microphone
10
+ 2. **Transcribes** the recording using the med-scribe-alliance SDK
11
+ 3. **Returns structured data** (transcript, SOAP notes, etc.) via callbacks
12
+
13
+ The widget handles:
14
+ - Microphone permission requests
15
+ - Recording controls (start, pause, resume, stop)
16
+ - Timer display during recording
17
+ - Processing state with loading indicator
18
+ - Results display with transcript
19
+ - Error handling
20
+
21
+ ## Features
22
+
23
+ - **Shadow DOM isolation** - Styles don't leak in or out
24
+ - **Draggable panel** - Users can reposition the widget
25
+ - **Built-in configuration UI** - If no API credentials are provided, the widget shows a form to enter them
26
+ - **Responsive states** - Idle, Recording, Paused, Processing, Results, Error
27
+ - **Callbacks** - Get notified when recording completes or errors occur
28
+
29
+ ## Installation
30
+
31
+ ### Option 1: Script Tag (Recommended for quick integration)
32
+
33
+ ```html
34
+ <script src="https://your-cdn.com/scribe-widget.umd.js"></script>
35
+ <script>
36
+ // With API credentials (widget starts in idle state)
37
+ const widget = EkaScribe.init({
38
+ apiKey: 'your-api-key',
39
+ baseUrl: 'https://api.eka.care',
40
+ onResult: (result) => {
41
+ console.log('Transcript:', result.transcript);
42
+ }
43
+ });
44
+
45
+ // Without API credentials (widget shows config form)
46
+ const widget = EkaScribe.init({
47
+ onResult: (result) => {
48
+ console.log('Transcript:', result.transcript);
49
+ }
50
+ });
51
+ </script>
52
+ ```
53
+
54
+ ### Option 2: ES Module
55
+
56
+ ```javascript
57
+ import EkaScribe from 'eka-scribe-widget';
58
+
59
+ const widget = EkaScribe.init({
60
+ apiKey: 'your-api-key',
61
+ baseUrl: 'https://api.eka.care',
62
+ templates: ['soap'],
63
+ onResult: (result) => {
64
+ console.log(result);
65
+ }
66
+ });
67
+ ```
68
+
69
+ ## Configuration Options
70
+
71
+ | Option | Type | Default | Description |
72
+ |--------|------|---------|-------------|
73
+ | `apiKey` | string | - | API key for authentication (optional - can be entered in widget) |
74
+ | `baseUrl` | string | - | Base URL of the scribe API (optional - can be entered in widget) |
75
+ | `templates` | string[] | `['soap']` | Templates to use for transcription |
76
+ | `languageHint` | string[] | `['en']` | Language hints for transcription |
77
+ | `position` | object | `{ bottom: 20, right: 20 }` | Widget position on screen |
78
+ | `onResult` | function | - | Callback when transcription completes |
79
+ | `onError` | function | - | Callback when an error occurs |
80
+ | `debug` | boolean | `false` | Enable debug logging |
81
+
82
+ ## Widget Methods
83
+
84
+ ```javascript
85
+ const widget = EkaScribe.init(config);
86
+
87
+ // Show/hide the widget
88
+ widget.show();
89
+ widget.hide();
90
+
91
+ // Check visibility
92
+ widget.isVisible(); // returns boolean
93
+
94
+ // Remove widget from DOM
95
+ widget.unmount();
96
+
97
+ // Get the current widget instance
98
+ const instance = EkaScribe.getInstance();
99
+ ```
100
+
101
+ ## Widget States
102
+
103
+ 1. **Config** - Shown when no API credentials provided. User enters apiKey and baseUrl.
104
+ 2. **Idle** - Initial state with "Start Recording" button
105
+ 3. **Permission** - Requesting microphone access
106
+ 4. **Recording** - Active recording with timer, pause, and stop buttons
107
+ 5. **Paused** - Recording paused, can resume or stop
108
+ 6. **Processing** - Recording stopped, waiting for transcription
109
+ 7. **Results** - Shows transcript with option to start new recording
110
+ 8. **Error** - Shows error message with retry button
111
+
112
+ ## Usage Examples
113
+
114
+ ### Basic Integration (No Pre-configured Credentials)
115
+
116
+ ```html
117
+ <!DOCTYPE html>
118
+ <html>
119
+ <head>
120
+ <title>My App</title>
121
+ </head>
122
+ <body>
123
+ <h1>My Healthcare App</h1>
124
+
125
+ <!-- Widget appears as floating panel -->
126
+ <script src="scribe-widget.umd.js"></script>
127
+ <script>
128
+ // Widget will show config form first
129
+ EkaScribe.init({
130
+ debug: true,
131
+ onResult: (result) => {
132
+ // Do something with the result
133
+ document.getElementById('notes').value = result.transcript;
134
+ }
135
+ });
136
+ </script>
137
+ </body>
138
+ </html>
139
+ ```
140
+
141
+ ### Pre-configured Integration
142
+
143
+ ```html
144
+ <script src="scribe-widget.umd.js"></script>
145
+ <script>
146
+ // Widget starts ready to record
147
+ EkaScribe.init({
148
+ apiKey: 'abc123',
149
+ baseUrl: 'https://api.eka.care',
150
+ templates: ['eka_emr_template'],
151
+ languageHint: ['en-IN'],
152
+ onResult: (result) => {
153
+ console.log('Full result:', result);
154
+ },
155
+ onError: (error) => {
156
+ console.error('Recording failed:', error);
157
+ }
158
+ });
159
+ </script>
160
+ ```
161
+
162
+ ### Custom Position
163
+
164
+ ```javascript
165
+ EkaScribe.init({
166
+ apiKey: 'your-key',
167
+ baseUrl: 'https://api.eka.care',
168
+ position: {
169
+ top: 20, // or bottom
170
+ left: 20 // or right
171
+ }
172
+ });
173
+ ```
174
+
175
+ ## Development
176
+
177
+ ```bash
178
+ # Install dependencies
179
+ npm install
180
+
181
+ # Start dev server
182
+ npm run dev
183
+
184
+ # Build for production
185
+ npm run build
186
+
187
+ # Type check
188
+ npm run typecheck
189
+ ```
190
+
191
+ ## Build Output
192
+
193
+ - `dist/scribe-widget.umd.js` - UMD bundle for script tags
194
+ - `dist/scribe-widget.es.js` - ES module for bundlers
195
+
196
+ ## Architecture
197
+
198
+ ```
199
+ src/
200
+ ├── index.tsx # Entry point, Shadow DOM wrapper, global API
201
+ ├── App.tsx # Main component with state routing
202
+ ├── types.ts # TypeScript interfaces
203
+ ├── components/
204
+ │ ├── FloatingPanel.tsx # Draggable container with header
205
+ │ ├── ConfigState.tsx # API credential form
206
+ │ ├── IdleState.tsx # Start recording button
207
+ │ ├── RecordingState.tsx # Timer + controls
208
+ │ ├── ProcessingState.tsx# Loading spinner
209
+ │ ├── ResultsState.tsx # Transcript display
210
+ │ ├── ErrorState.tsx # Error display
211
+ │ └── Icons.tsx # SVG icons
212
+ ├── hooks/
213
+ │ └── useScribeSession.ts# SDK integration & state management
214
+ └── styles/
215
+ └── widget.css # All widget styles
216
+ ```
217
+
218
+ ## How It Works
219
+
220
+ 1. **Injection**: When `EkaScribe.init()` is called, it creates a `<div>` and attaches a Shadow DOM to isolate styles.
221
+
222
+ 2. **React Rendering**: The React app renders inside the Shadow DOM with all styles injected.
223
+
224
+ 3. **SDK Integration**: The `useScribeSession` hook manages the med-scribe-alliance SDK:
225
+ - Initializes the client
226
+ - Handles recording start/pause/resume/stop
227
+ - Polls for completion after recording ends
228
+ - Returns transcription results
229
+
230
+ 4. **Callbacks**: Results are passed back via the `onResult` callback, allowing the host page to use the data.