dictate-button 0.2.0 → 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 (30) hide show
  1. package/README.md +18 -12
  2. package/dist/dictate-button.d.ts +1 -0
  3. package/dist/dictate-button.js +709 -0
  4. package/dist/dictate-button.styles.d.ts +1 -1
  5. package/dist/inject-exclusive.js +42 -0
  6. package/dist/inject-inclusive.js +42 -0
  7. package/package.json +21 -17
  8. package/.firebaserc +0 -5
  9. package/.prettierrc.mjs +0 -10
  10. package/404.html +0 -17
  11. package/dist/404.html +0 -17
  12. package/dist/dictate-button.cjs.js +0 -36
  13. package/dist/dictate-button.es.js +0 -682
  14. package/dist/inject-exclusive.cjs.js +0 -1
  15. package/dist/inject-exclusive.es.js +0 -35
  16. package/dist/inject-inclusive.cjs.js +0 -1
  17. package/dist/inject-inclusive.es.js +0 -35
  18. package/dist/inject.cjs.js +0 -1
  19. package/dist/inject.d.ts +0 -1
  20. package/dist/inject.es.js +0 -1
  21. package/firebase.json +0 -42
  22. package/pnpm-workspace.yaml +0 -2
  23. package/src/dictate-button.styles.ts +0 -36
  24. package/src/dictate-button.tsx +0 -240
  25. package/src/inject-exclusive.js +0 -76
  26. package/src/inject-inclusive.js +0 -76
  27. package/src/inject.js +0 -2
  28. package/tsconfig.json +0 -17
  29. package/vite-env.d.ts +0 -3
  30. package/vite.config.ts +0 -37
package/README.md CHANGED
@@ -24,8 +24,8 @@ Choose the auto-inject mode that best suits your needs:
24
24
 
25
25
  | Mode | Description | Scripts |
26
26
  |---|---|---|
27
- | Exclusive | Automatically injects the dictate button into any textarea or text input **with the `data-dictate-button-on` attribute**. | `inject-exclusive.es.js`, `inject-exclusive.cjs.js` |
28
- | Inclusive | Automatically injects the dictate button into any textarea or text input **without the `data-dictate-button-off` attribute**. | `inject-inclusive.es.js`, `inject-inclusive.cjs.js` |
27
+ | Exclusive | Enables for `textarea` and `input[type=text]` with the `data-dictate-button-on` attribute only. | `inject-exclusive.js` |
28
+ | Inclusive | Enables for all `textarea` and `input[type=text]` without the `data-dictate-button-off` attribute. | `inject-inclusive.js` |
29
29
 
30
30
  ### From CDN
31
31
 
@@ -34,8 +34,8 @@ Choose the auto-inject mode that best suits your needs:
34
34
  In your HTML `<head>` tag, add the following script tags:
35
35
 
36
36
  ```html
37
- <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.es.js"></script>
38
- <script type="module" crossorigin src="https://cdn.dictate-button.io/inject-exclusive.es.js"></script>
37
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.js"></script>
38
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/inject-exclusive.js"></script>
39
39
  ```
40
40
 
41
41
  Add the `data-dictate-button-on` attribute to any `textarea` or `input[type=text]` elements where you want the dictate button to appear:
@@ -50,8 +50,8 @@ Add the `data-dictate-button-on` attribute to any `textarea` or `input[type=text
50
50
  In your HTML `<head>` tag, add the following script tags:
51
51
 
52
52
  ```html
53
- <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.es.js"></script>
54
- <script type="module" crossorigin src="https://cdn.dictate-button.io/inject-inclusive.es.js"></script>
53
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.js"></script>
54
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/inject-inclusive.js"></script>
55
55
  ```
56
56
 
57
57
  All `textarea` and `input[type=text]` elements without the `data-dictate-button-off` attribute will be automatically enhanced with the dictate button by default.
@@ -68,9 +68,9 @@ To disable that for a specific field, add the `data-dictate-button-off` attribut
68
68
  Import the component and use it directly in your code:
69
69
 
70
70
  ```html
71
- <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.es.js"></script>
71
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.js"></script>
72
72
 
73
- <dictate-button size="24" api-endpoint="https://api.dictate-button.io/transcribe"></dictate-button>
73
+ <dictate-button size="24" api-endpoint="https://api.dictate-button.io/transcribe" language="en"></dictate-button>
74
74
  ```
75
75
 
76
76
  ### From NPM
@@ -86,8 +86,9 @@ import 'dictate-button'
86
86
  The auto-inject script:
87
87
 
88
88
  ```js
89
+ // For selected text fields (with data-dictate-button-on attribute):
89
90
  import 'dictate-button/inject-exclusive'
90
- // or
91
+ // or for all text fields (except those with data-dictate-button-off attribute):
91
92
  import 'dictate-button/inject-inclusive'
92
93
  ```
93
94
 
@@ -122,8 +123,9 @@ dictateButton.addEventListener('transcribing:finished', (event) => {
122
123
 
123
124
  | Attribute | Type | Default | Description |
124
125
  |---------------|---------|-----------------------------------------|----------------------------------------|
125
- | size | number | 24 | Size of the button in pixels |
126
+ | size | number | 30 | Size of the button in pixels |
126
127
  | apiEndpoint | string | https://api.dictate-button.io/transcribe| API endpoint for transcription service |
128
+ | language | string | (not set) | Optional language code (e.g., 'en', 'fr', 'de') which may speed up the transcription. |
127
129
  | theme | string | (inherits from page) | 'light' or 'dark' |
128
130
  | class | string | | Custom CSS class |
129
131
 
@@ -150,11 +152,15 @@ dictate-button::part(icon) {
150
152
 
151
153
  ## API Endpoint
152
154
 
153
- By default, dictate-button uses the `https://api.dictate-button.io/transcribe` endpoint for speech-to-text conversion. You can specify your own endpoint by setting the `apiEndpoint` attribute.
155
+ By default, dictate-button uses the `https://api.dictate-button.io/transcribe` endpoint for speech-to-text conversion.
156
+ You can specify your own endpoint by setting the `apiEndpoint` attribute.
154
157
 
155
158
  The API expects:
156
159
  - POST request
157
- - Audio data as a Blob (audio/webm format)
160
+ - Multipart form data with the following fields:
161
+ - `audio`: Audio data as a Blob (audio/webm format)
162
+ - `origin`: The origin of the website (automatically added)
163
+ - `language`: Optional language code (if provided as an attribute)
158
164
  - Response should be JSON with a `text` property containing the transcribed text
159
165
 
160
166
  ## Browser Compatibility
package/dist/dictate-button.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export interface DictateButtonProps {
2
2
  size?: number;
3
3
  apiEndpoint?: string;
4
+ language?: string;
4
5
  theme?: 'light' | 'dark';
5
6
  class?: string;
6
7
  }