@automattic/jetpack-ai-client 0.6.1 → 0.8.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 (71) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/build/api-fetch/index.d.ts +7 -0
  3. package/build/api-fetch/index.js +6 -0
  4. package/build/ask-question/index.d.ts +2 -2
  5. package/build/ask-question/index.js +1 -1
  6. package/build/audio-transcription/index.d.ts +12 -0
  7. package/build/audio-transcription/index.js +51 -0
  8. package/build/components/ai-control/index.d.ts +7 -6
  9. package/build/components/ai-control/index.js +6 -6
  10. package/build/components/ai-control/message.d.ts +10 -0
  11. package/build/components/ai-control/message.js +15 -2
  12. package/build/components/ai-status-indicator/index.d.ts +1 -1
  13. package/build/components/audio-duration-display/index.d.ts +3 -2
  14. package/build/components/audio-duration-display/index.js +3 -14
  15. package/build/components/audio-duration-display/lib/media.d.ts +13 -14
  16. package/build/components/audio-duration-display/lib/media.js +7 -32
  17. package/build/components/index.d.ts +4 -4
  18. package/build/components/index.js +4 -4
  19. package/build/data-flow/context.d.ts +9 -6
  20. package/build/data-flow/context.js +1 -1
  21. package/build/data-flow/index.d.ts +3 -3
  22. package/build/data-flow/index.js +3 -3
  23. package/build/data-flow/use-ai-context.d.ts +3 -3
  24. package/build/data-flow/use-ai-context.js +3 -3
  25. package/build/data-flow/with-ai-assistant-data.js +2 -2
  26. package/build/hooks/use-ai-suggestions/index.d.ts +4 -4
  27. package/build/hooks/use-ai-suggestions/index.js +2 -2
  28. package/build/hooks/use-audio-transcription/index.d.ts +28 -0
  29. package/build/hooks/use-audio-transcription/index.js +56 -0
  30. package/build/hooks/use-media-recording/index.d.ts +34 -12
  31. package/build/hooks/use-media-recording/index.js +116 -41
  32. package/build/hooks/use-transcription-post-processing/index.d.ts +30 -0
  33. package/build/hooks/use-transcription-post-processing/index.js +84 -0
  34. package/build/icons/index.d.ts +7 -7
  35. package/build/icons/index.js +7 -7
  36. package/build/icons/mic.js +2 -2
  37. package/build/icons/player-pause.js +1 -1
  38. package/build/index.d.ts +12 -9
  39. package/build/index.js +12 -9
  40. package/build/jwt/index.js +4 -1
  41. package/build/suggestions-event-source/index.d.ts +1 -1
  42. package/build/suggestions-event-source/index.js +3 -3
  43. package/build/types.d.ts +9 -2
  44. package/build/types.js +4 -0
  45. package/package.json +5 -5
  46. package/src/api-fetch/index.ts +13 -0
  47. package/src/ask-question/index.ts +2 -2
  48. package/src/audio-transcription/index.ts +75 -0
  49. package/src/components/ai-control/index.tsx +12 -16
  50. package/src/components/ai-control/message.tsx +34 -2
  51. package/src/components/ai-control/style.scss +6 -0
  52. package/src/components/ai-status-indicator/index.tsx +1 -1
  53. package/src/components/audio-duration-display/index.tsx +6 -17
  54. package/src/components/audio-duration-display/lib/media.ts +17 -40
  55. package/src/components/index.ts +8 -4
  56. package/src/data-flow/context.tsx +7 -8
  57. package/src/data-flow/index.ts +3 -3
  58. package/src/data-flow/use-ai-context.ts +6 -6
  59. package/src/data-flow/with-ai-assistant-data.tsx +2 -2
  60. package/src/hooks/use-ai-suggestions/index.ts +6 -6
  61. package/src/hooks/use-audio-transcription/index.ts +95 -0
  62. package/src/hooks/use-media-recording/Readme.md +2 -2
  63. package/src/hooks/use-media-recording/index.ts +179 -59
  64. package/src/hooks/use-transcription-post-processing/index.ts +135 -0
  65. package/src/icons/index.ts +7 -7
  66. package/src/icons/mic.tsx +14 -16
  67. package/src/icons/player-pause.tsx +5 -5
  68. package/src/index.ts +12 -9
  69. package/src/jwt/index.ts +4 -1
  70. package/src/suggestions-event-source/index.ts +4 -4
  71. package/src/types.ts +29 -2
@@ -0,0 +1,56 @@
1
+ /**
2
+ * External dependencies
3
+ */
4
+ import { useCallback, useState } from '@wordpress/element';
5
+ import debugFactory from 'debug';
6
+ /**
7
+ * Internal dependencies
8
+ */
9
+ import transcribeAudio from '../../audio-transcription/index.js';
10
+ const debug = debugFactory('jetpack-ai-client:use-audio-transcription');
11
+ /**
12
+ * A hook to handle audio transcription.
13
+ *
14
+ * @param {string} feature - The feature name that is calling the transcription.
15
+ * @returns {UseAudioTranscriptionReturn} - Object with properties to get the transcription data.
16
+ */
17
+ export default function useAudioTranscription({ feature, onReady, onError, }) {
18
+ const [transcriptionResult, setTranscriptionResult] = useState('');
19
+ const [transcriptionError, setTranscriptionError] = useState('');
20
+ const [isTranscribingAudio, setIsTranscribingAudio] = useState(false);
21
+ const handleAudioTranscription = useCallback((audio) => {
22
+ debug('Transcribing audio');
23
+ /**
24
+ * Reset the transcription result and error.
25
+ */
26
+ setTranscriptionResult('');
27
+ setTranscriptionError('');
28
+ setIsTranscribingAudio(true);
29
+ /**
30
+ * Call the audio transcription library.
31
+ */
32
+ const promise = transcribeAudio(audio, feature)
33
+ .then(transcriptionText => {
34
+ if (promise.canceled) {
35
+ return;
36
+ }
37
+ setTranscriptionResult(transcriptionText);
38
+ onReady?.(transcriptionText);
39
+ })
40
+ .catch(error => {
41
+ if (promise.canceled) {
42
+ return;
43
+ }
44
+ setTranscriptionError(error.message);
45
+ onError?.(error.message);
46
+ })
47
+ .finally(() => setIsTranscribingAudio(false));
48
+ return promise;
49
+ }, [transcribeAudio, setTranscriptionResult, setTranscriptionError, setIsTranscribingAudio]);
50
+ return {
51
+ transcriptionResult,
52
+ isTranscribingAudio,
53
+ transcriptionError,
54
+ transcribeAudio: handleAudioTranscription,
55
+ };
56
+ }
@@ -1,4 +1,4 @@
1
- type RecordingStateProp = 'inactive' | 'recording' | 'paused';
1
+ export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
2
2
  type UseMediaRecordingProps = {
3
3
  onDone?: (blob: Blob) => void;
4
4
  };
@@ -6,31 +6,53 @@ type UseMediaRecordingReturn = {
6
6
  /**
7
7
  * The current recording state
8
8
  */
9
- state: RecordingStateProp;
9
+ state: RecordingState;
10
10
  /**
11
11
  * The recorded blob
12
12
  */
13
13
  blob: Blob | null;
14
14
  /**
15
- * The recorded blob url
15
+ * The error message
16
16
  */
17
- url: string | null;
17
+ error: string | null;
18
18
  /**
19
- * `start` recording handler
19
+ * The duration of the recorded audio
20
20
  */
21
- start: (timeslice?: number) => void;
21
+ duration: number;
22
22
  /**
23
- * `pause` recording handler
23
+ * The audio analyser node
24
24
  */
25
- pause: () => void;
25
+ analyser?: AnalyserNode;
26
26
  /**
27
- * `resume` recording handler
27
+ * The error handler
28
28
  */
29
- resume: () => void;
29
+ onError: (err: string | Error) => void;
30
30
  /**
31
- * `stop` recording handler
31
+ * The processing handler
32
32
  */
33
- stop: () => void;
33
+ onProcessing: () => void;
34
+ controls: {
35
+ /**
36
+ * `start` recording handler
37
+ */
38
+ start: (timeslice?: number) => void;
39
+ /**
40
+ * `pause` recording handler
41
+ */
42
+ pause: () => void;
43
+ /**
44
+ * `resume` recording handler
45
+ */
46
+ resume: () => void;
47
+ /**
48
+ * `stop` recording handler
49
+ */
50
+ stop: () => void;
51
+ /**
52
+ * `reset` recording handler
53
+ */
54
+ reset: () => void;
55
+ };
34
56
  };
35
57
  /**
36
58
  * react custom hook to handle media recording.
@@ -11,12 +11,20 @@ import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
11
11
  export default function useMediaRecording({ onDone, } = {}) {
12
12
  // Reference to the media recorder instance
13
13
  const mediaRecordRef = useRef(null);
14
- // Recording state: `inactive`, `recording`, `paused`
14
+ // Recording state: `inactive`, `recording`, `paused`, `processing`, `error`
15
15
  const [state, setState] = useState('inactive');
16
+ // reference to the paused state to be used in the `onDataAvailable` event listener,
17
+ // as the `mediaRecordRef.current.state` is already `inactive` when the recorder is stopped,
18
+ // and the event listener does not react to state changes
19
+ const isPaused = useRef(false);
20
+ const recordStartTimestamp = useRef(0);
21
+ const [duration, setDuration] = useState(0);
16
22
  // The recorded blob
17
23
  const [blob, setBlob] = useState(null);
18
24
  // Store the recorded chunks
19
25
  const recordedChunks = useRef([]).current;
26
+ const [error, setError] = useState(null);
27
+ const analyser = useRef(null);
20
28
  /**
21
29
  * Get the recorded blob.
22
30
  *
@@ -29,25 +37,103 @@ export default function useMediaRecording({ onDone, } = {}) {
29
37
  }
30
38
  // `start` recording handler
31
39
  const start = useCallback((timeslice) => {
40
+ clearData();
32
41
  if (!timeslice) {
33
42
  return mediaRecordRef?.current?.start();
34
43
  }
35
44
  if (timeslice < 100) {
36
45
  timeslice = 100; // set minimum timeslice to 100ms
37
46
  }
47
+ // Record the start time
48
+ recordStartTimestamp.current = Date.now();
38
49
  mediaRecordRef?.current?.start(timeslice);
39
50
  }, []);
40
51
  // `pause` recording handler
41
52
  const pause = useCallback(() => {
53
+ isPaused.current = true;
42
54
  mediaRecordRef?.current?.pause();
55
+ // Calculate the duration of the recorded audio from the start time
56
+ setDuration(currentDuration => currentDuration + Date.now() - recordStartTimestamp.current);
43
57
  }, []);
44
58
  // `resume` recording handler
45
59
  const resume = useCallback(() => {
60
+ isPaused.current = false;
46
61
  mediaRecordRef?.current?.resume();
62
+ // Record the start time
63
+ recordStartTimestamp.current = Date.now();
47
64
  }, []);
48
65
  // `stop` recording handler
49
66
  const stop = useCallback(() => {
50
67
  mediaRecordRef?.current?.stop();
68
+ if (state === 'recording') {
69
+ // Calculate the duration of the recorded audio from the start time
70
+ setDuration(currentDuration => currentDuration + Date.now() - recordStartTimestamp.current);
71
+ }
72
+ }, []);
73
+ // clears the recording state
74
+ const clearData = useCallback(() => {
75
+ recordedChunks.length = 0;
76
+ setBlob(null);
77
+ setError(null);
78
+ setDuration(0);
79
+ isPaused.current = false;
80
+ recordStartTimestamp.current = 0;
81
+ }, []);
82
+ // removes the event listeners
83
+ const clearListeners = useCallback(() => {
84
+ /*
85
+ * mediaRecordRef is not defined when
86
+ * the getUserMedia API is not supported,
87
+ * or when the user has not granted access
88
+ */
89
+ if (!mediaRecordRef?.current) {
90
+ return;
91
+ }
92
+ mediaRecordRef.current.removeEventListener('start', onStartListener);
93
+ mediaRecordRef.current.removeEventListener('stop', onStopListener);
94
+ mediaRecordRef.current.removeEventListener('pause', onPauseListener);
95
+ mediaRecordRef.current.removeEventListener('resume', onResumeListener);
96
+ mediaRecordRef.current.removeEventListener('dataavailable', onDataAvailableListener);
97
+ mediaRecordRef.current = null;
98
+ }, []);
99
+ // resets the recording state, initializing the media recorder instance
100
+ const reset = useCallback(() => {
101
+ setState('inactive');
102
+ clearData();
103
+ clearListeners();
104
+ // Check if the getUserMedia API is supported
105
+ if (!navigator.mediaDevices?.getUserMedia) {
106
+ return;
107
+ }
108
+ const audioCtx = new AudioContext();
109
+ analyser.current = audioCtx.createAnalyser();
110
+ const constraints = { audio: true };
111
+ navigator.mediaDevices
112
+ .getUserMedia(constraints)
113
+ .then(stream => {
114
+ const source = audioCtx.createMediaStreamSource(stream);
115
+ source.connect(analyser.current);
116
+ mediaRecordRef.current = new MediaRecorder(stream);
117
+ mediaRecordRef.current.addEventListener('start', onStartListener);
118
+ mediaRecordRef.current.addEventListener('stop', onStopListener);
119
+ mediaRecordRef.current.addEventListener('pause', onPauseListener);
120
+ mediaRecordRef.current.addEventListener('resume', onResumeListener);
121
+ mediaRecordRef.current.addEventListener('dataavailable', onDataAvailableListener);
122
+ })
123
+ .catch(err => {
124
+ // @todo: handle error
125
+ throw err;
126
+ });
127
+ }, []);
128
+ // stops the recording and sets the error state
129
+ const onError = useCallback((err) => {
130
+ stop();
131
+ setError(typeof err === 'string' ? err : err.message);
132
+ setState('error');
133
+ }, []);
134
+ // manually set the state to `processing` for the file upload case
135
+ const onProcessing = useCallback(() => {
136
+ setState('processing');
51
137
  }, []);
52
138
  /**
53
139
  * `start` event listener for the media recorder instance.
@@ -57,12 +143,14 @@ export default function useMediaRecording({ onDone, } = {}) {
57
143
  }
58
144
  /**
59
145
  * `stop` event listener for the media recorder instance.
146
+ * Happens after the last `dataavailable` event.
60
147
  *
61
148
  * @returns {void}
62
149
  */
63
150
  function onStopListener() {
64
- setState('inactive');
65
- onDone?.(getBlob());
151
+ setState('processing');
152
+ const lastBlob = getBlob();
153
+ onDone?.(lastBlob);
66
154
  // Clear the recorded chunks
67
155
  recordedChunks.length = 0;
68
156
  }
@@ -93,51 +181,38 @@ export default function useMediaRecording({ onDone, } = {}) {
93
181
  recordedChunks.push(data);
94
182
  // Create and store the Blob for the recorded chunks
95
183
  setBlob(getBlob());
184
+ // If the recorder was paused, it is the last data available event, so we do not update the duration
185
+ if (!isPaused.current) {
186
+ setDuration(currentDuration => {
187
+ const now = Date.now();
188
+ const difference = now - recordStartTimestamp.current;
189
+ // Update the start time
190
+ recordStartTimestamp.current = now;
191
+ return currentDuration + difference;
192
+ });
193
+ }
96
194
  }
97
- // Create media recorder instance
195
+ // Remove listeners and clear the recorded chunks
98
196
  useEffect(() => {
99
- // Check if the getUserMedia API is supported
100
- if (!navigator.mediaDevices?.getUserMedia) {
101
- return;
102
- }
103
- const constraints = { audio: true };
104
- navigator.mediaDevices
105
- .getUserMedia(constraints)
106
- .then(stream => {
107
- mediaRecordRef.current = new MediaRecorder(stream);
108
- mediaRecordRef.current.addEventListener('start', onStartListener);
109
- mediaRecordRef.current.addEventListener('stop', onStopListener);
110
- mediaRecordRef.current.addEventListener('pause', onPauseListener);
111
- mediaRecordRef.current.addEventListener('resume', onResumeListener);
112
- mediaRecordRef.current.addEventListener('dataavailable', onDataAvailableListener);
113
- })
114
- .catch(err => {
115
- // @todo: handle error
116
- throw err;
117
- });
197
+ reset();
118
198
  return () => {
119
- /*
120
- * mediaRecordRef is not defined when
121
- * the getUserMedia API is not supported,
122
- * or when the user has not granted access
123
- */
124
- if (!mediaRecordRef?.current) {
125
- return;
126
- }
127
- mediaRecordRef.current.removeEventListener('start', onStartListener);
128
- mediaRecordRef.current.removeEventListener('stop', onStopListener);
129
- mediaRecordRef.current.removeEventListener('pause', onPauseListener);
130
- mediaRecordRef.current.removeEventListener('resume', onResumeListener);
131
- mediaRecordRef.current.removeEventListener('dataavailable', onDataAvailableListener);
199
+ clearListeners();
132
200
  };
133
201
  }, []);
134
202
  return {
135
203
  state,
136
204
  blob,
137
- url: blob ? URL.createObjectURL(blob) : null,
138
- start,
139
- pause,
140
- resume,
141
- stop,
205
+ error,
206
+ duration,
207
+ analyser: analyser.current,
208
+ onError,
209
+ onProcessing,
210
+ controls: {
211
+ start,
212
+ pause,
213
+ resume,
214
+ stop,
215
+ reset,
216
+ },
142
217
  };
143
218
  }
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Post-processing types.
3
+ */
4
+ export declare const TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT = "voice-to-content-simple-draft";
5
+ export type PostProcessingAction = typeof TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT;
6
+ /**
7
+ * The return value for the transcription post-processing hook.
8
+ */
9
+ export type UseTranscriptionPostProcessingReturn = {
10
+ postProcessingResult: string;
11
+ isProcessingTranscription: boolean;
12
+ postProcessingError: string;
13
+ processTranscription: (action: PostProcessingAction, transcription: string) => void;
14
+ };
15
+ /**
16
+ * The props for the transcription post-processing hook.
17
+ */
18
+ export type UseTranscriptionPostProcessingProps = {
19
+ feature: string;
20
+ onReady?: (postProcessingResult: string) => void;
21
+ onError?: (error: string) => void;
22
+ onUpdate?: (currentPostProcessingResult: string) => void;
23
+ };
24
+ /**
25
+ * A hook to handle transcription post-processing.
26
+ *
27
+ * @param {string} feature - The feature name that is calling the post-processing actions.
28
+ * @returns {UseTranscriptionPostProcessingReturn} - Object with properties to get the post-processing results.
29
+ */
30
+ export default function useTranscriptionPostProcessing({ feature, onReady, onError, onUpdate, }: UseTranscriptionPostProcessingProps): UseTranscriptionPostProcessingReturn;
@@ -0,0 +1,84 @@
1
+ /**
2
+ * External dependencies
3
+ */
4
+ import { useCallback, useState } from '@wordpress/element';
5
+ import debugFactory from 'debug';
6
+ /**
7
+ * Internal dependencies
8
+ */
9
+ import useAiSuggestions from '../use-ai-suggestions/index.js';
10
+ const debug = debugFactory('jetpack-ai-client:use-transcription-post-processing');
11
+ /**
12
+ * Post-processing types.
13
+ */
14
+ export const TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT = 'voice-to-content-simple-draft';
15
+ /**
16
+ * A hook to handle transcription post-processing.
17
+ *
18
+ * @param {string} feature - The feature name that is calling the post-processing actions.
19
+ * @returns {UseTranscriptionPostProcessingReturn} - Object with properties to get the post-processing results.
20
+ */
21
+ export default function useTranscriptionPostProcessing({ feature, onReady, onError, onUpdate, }) {
22
+ const [postProcessingResult, setPostProcessingResult] = useState('');
23
+ const [postProcessingError, setPostProcessingError] = useState('');
24
+ const [isProcessingTranscription, setIsProcessingTranscription] = useState(false);
25
+ /**
26
+ * Set-up the useAiSuggestions hook.
27
+ */
28
+ const handleOnSuggestion = useCallback((suggestion) => {
29
+ setPostProcessingResult(suggestion);
30
+ onUpdate?.(suggestion);
31
+ }, [setPostProcessingResult, onUpdate]);
32
+ const handleOnDone = useCallback((result) => {
33
+ setPostProcessingResult(result);
34
+ onUpdate?.(result);
35
+ onReady?.(result);
36
+ }, [setPostProcessingResult, onUpdate, onReady]);
37
+ const handleOnError = useCallback((errorData) => {
38
+ setPostProcessingError(errorData.message);
39
+ onError?.(errorData.message);
40
+ }, [setPostProcessingError, onError]);
41
+ const { request } = useAiSuggestions({
42
+ autoRequest: false,
43
+ onSuggestion: handleOnSuggestion,
44
+ onDone: handleOnDone,
45
+ onError: handleOnError,
46
+ });
47
+ const handleTranscriptionPostProcessing = useCallback((action, transcription) => {
48
+ debug('Post-processing transcription');
49
+ /**
50
+ * Reset the transcription result and error.
51
+ */
52
+ setPostProcessingResult('');
53
+ setPostProcessingError('');
54
+ setIsProcessingTranscription(true);
55
+ /**
56
+ * Build the prompt to call the suggestion hook.
57
+ */
58
+ const messages = [
59
+ {
60
+ role: 'jetpack-ai',
61
+ context: {
62
+ type: action,
63
+ content: transcription,
64
+ },
65
+ },
66
+ ];
67
+ /**
68
+ * Call the suggestion hook using the message.
69
+ */
70
+ request(messages, { feature });
71
+ }, [
72
+ setPostProcessingResult,
73
+ setPostProcessingError,
74
+ setIsProcessingTranscription,
75
+ request,
76
+ feature,
77
+ ]);
78
+ return {
79
+ postProcessingResult,
80
+ isProcessingTranscription,
81
+ postProcessingError,
82
+ processTranscription: handleTranscriptionPostProcessing,
83
+ };
84
+ }
@@ -1,7 +1,7 @@
1
- export { default as aiAssistantIcon } from './ai-assistant';
2
- export { default as micIcon } from './mic';
3
- export { default as origamiPlaneIcon } from './origami-plane';
4
- export { default as playerPlayIcon } from './player-play';
5
- export { default as playerStopIcon } from './player-stop';
6
- export { default as playerPauseIcon } from './player-pause';
7
- export { default as speakToneIcon } from './speak-tone';
1
+ export { default as aiAssistantIcon } from './ai-assistant.js';
2
+ export { default as micIcon } from './mic.js';
3
+ export { default as origamiPlaneIcon } from './origami-plane.js';
4
+ export { default as playerPlayIcon } from './player-play.js';
5
+ export { default as playerStopIcon } from './player-stop.js';
6
+ export { default as playerPauseIcon } from './player-pause.js';
7
+ export { default as speakToneIcon } from './speak-tone.js';
@@ -1,7 +1,7 @@
1
- export { default as aiAssistantIcon } from './ai-assistant';
2
- export { default as micIcon } from './mic';
3
- export { default as origamiPlaneIcon } from './origami-plane';
4
- export { default as playerPlayIcon } from './player-play';
5
- export { default as playerStopIcon } from './player-stop';
6
- export { default as playerPauseIcon } from './player-pause';
7
- export { default as speakToneIcon } from './speak-tone';
1
+ export { default as aiAssistantIcon } from './ai-assistant.js';
2
+ export { default as micIcon } from './mic.js';
3
+ export { default as origamiPlaneIcon } from './origami-plane.js';
4
+ export { default as playerPlayIcon } from './player-play.js';
5
+ export { default as playerStopIcon } from './player-stop.js';
6
+ export { default as playerPauseIcon } from './player-pause.js';
7
+ export { default as speakToneIcon } from './speak-tone.js';
@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  /**
3
3
  * External dependencies
4
4
  */
5
- import { SVG, Rect, Line, Path } from '@wordpress/components';
6
- const mic = (_jsxs(SVG, { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/SVG", children: [_jsx(Rect, { x: "8.75", y: "2.75", width: "6.5", height: "11.5", rx: "3.25", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx(Line, { x1: "12", y1: "17", x2: "12", y2: "21", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx(Path, { d: "M18 11C18 11.7879 17.8448 12.5681 17.5433 13.2961C17.2417 14.0241 16.7998 14.6855 16.2426 15.2426C15.6855 15.7998 15.0241 16.2418 14.2961 16.5433C13.5681 16.8448 12.7879 17 12 17C11.2121 17 10.4319 16.8448 9.7039 16.5433C8.97595 16.2417 8.31451 15.7998 7.75736 15.2426C7.20021 14.6855 6.75825 14.0241 6.45672 13.2961C6.15519 12.5681 6 11.7879 6 11", stroke: "currentColor", strokeWidth: "1.5", fill: "none" })] }));
5
+ import { SVG, Rect, Path } from '@wordpress/components';
6
+ const mic = (_jsxs(SVG, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/SVG", children: [_jsx(Path, { d: "M12 4.75C11.0479 4.75 10.1052 4.93753 9.22554 5.30187C8.34593 5.66622 7.5467 6.20025 6.87348 6.87348C6.20025 7.5467 5.66622 8.34593 5.30187 9.22554C4.93753 10.1052 4.75 11.0479 4.75 12C4.75 12.9521 4.93753 13.8948 5.30187 14.7745C5.66622 15.6541 6.20025 16.4533 6.87348 17.1265C7.5467 17.7997 8.34593 18.3338 9.22554 18.6981C10.1052 19.0625 11.0479 19.25 12 19.25C13.9228 19.25 15.7669 18.4862 17.1265 17.1265C18.4862 15.7669 19.25 13.9228 19.25 12C19.25 10.0772 18.4862 8.23312 17.1265 6.87348C15.7669 5.51384 13.9228 4.75 12 4.75ZM3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12Z", fill: "#008710" }), _jsx(Rect, { x: "10.5", y: "8.25", width: "3", height: "4.875", rx: "1.5", fill: "#008710" }), _jsx(Path, { d: "M15 11.25C15 11.644 14.9224 12.0341 14.7716 12.3981C14.6209 12.762 14.3999 13.0927 14.1213 13.3713C13.8427 13.6499 13.512 13.8709 13.1481 14.0216C12.7841 14.1724 12.394 14.25 12 14.25C11.606 14.25 11.2159 14.1724 10.8519 14.0216C10.488 13.8709 10.1573 13.6499 9.87868 13.3713C9.6001 13.0927 9.37913 12.762 9.22836 12.3981C9.0776 12.0341 9 11.644 9 11.25", stroke: "#008710", strokeWidth: "1.125", strokeLinecap: "round" }), _jsx(Path, { d: "M11.4375 15.75C11.4375 16.0607 11.6893 16.3125 12 16.3125C12.3107 16.3125 12.5625 16.0607 12.5625 15.75L11.4375 15.75ZM11.4375 14.25L11.4375 15.75L12.5625 15.75L12.5625 14.25L11.4375 14.25Z", fill: "#008710" })] }));
7
7
  export default mic;
@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  * External dependencies
4
4
  */
5
5
  import { SVG, Path, Rect } from '@wordpress/components';
6
- const playerPause = (_jsxs(SVG, { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(Path, { d: "M16 6.33325C14.7306 6.33325 13.4736 6.58329 12.3007 7.06908C11.1279 7.55488 10.0623 8.26692 9.16464 9.16455C8.26701 10.0622 7.55497 11.1278 7.06917 12.3006C6.58338 13.4735 6.33334 14.7305 6.33334 15.9999C6.33334 17.2694 6.58338 18.5264 7.06917 19.6992C7.55497 20.872 8.26701 21.9377 9.16464 22.8353C10.0623 23.7329 11.1279 24.445 12.3007 24.9308C13.4736 25.4165 14.7306 25.6666 16 25.6666C18.5638 25.6666 21.0225 24.6481 22.8354 22.8353C24.6482 21.0224 25.6667 18.5637 25.6667 15.9999C25.6667 13.4362 24.6482 10.9774 22.8354 9.16455C21.0225 7.3517 18.5638 6.33325 16 6.33325ZM4.33334 15.9999C4.33334 12.9057 5.56251 9.93826 7.75043 7.75034C9.93836 5.56242 12.9058 4.33325 16 4.33325C19.0942 4.33325 22.0617 5.56242 24.2496 7.75034C26.4375 9.93826 27.6667 12.9057 27.6667 15.9999C27.6667 19.0941 26.4375 22.0616 24.2496 24.2495C22.0617 26.4374 19.0942 27.6666 16 27.6666C12.9058 27.6666 9.93836 26.4374 7.75043 24.2495C5.56251 22.0616 4.33334 19.0941 4.33334 15.9999Z", fill: "currentColor" }), _jsx(Rect, { x: "17", y: "12", width: "3", height: "8", fill: "currentColor" }), _jsx(Rect, { x: "12", y: "12", width: "3", height: "8", fill: "currentColor" })] }));
6
+ const playerPause = (_jsxs(SVG, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/SVG", children: [_jsx(Path, { d: "M12 4.75C11.0479 4.75 10.1052 4.93753 9.22554 5.30187C8.34593 5.66622 7.5467 6.20025 6.87348 6.87348C6.20025 7.5467 5.66622 8.34593 5.30187 9.22554C4.93753 10.1052 4.75 11.0479 4.75 12C4.75 12.9521 4.93753 13.8948 5.30187 14.7745C5.66622 15.6541 6.20025 16.4533 6.87348 17.1265C7.5467 17.7997 8.34593 18.3338 9.22554 18.6981C10.1052 19.0625 11.0479 19.25 12 19.25C13.9228 19.25 15.7669 18.4862 17.1265 17.1265C18.4862 15.7669 19.25 13.9228 19.25 12C19.25 10.0772 18.4862 8.23312 17.1265 6.87348C15.7669 5.51384 13.9228 4.75 12 4.75ZM3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12Z", fill: "#008710" }), _jsx(Rect, { x: "12.75", y: "9", width: "2.25", height: "6", fill: "#008710" }), _jsx(Rect, { x: "9", y: "9", width: "2.25", height: "6", fill: "#008710" })] }));
7
7
  export default playerPause;
package/build/index.d.ts CHANGED
@@ -1,9 +1,12 @@
1
- export { default as requestJwt } from './jwt';
2
- export { default as SuggestionsEventSource } from './suggestions-event-source';
3
- export { default as askQuestion } from './ask-question';
4
- export { default as useAiSuggestions } from './hooks/use-ai-suggestions';
5
- export { default as useMediaRecording } from './hooks/use-media-recording';
6
- export * from './icons';
7
- export * from './components';
8
- export * from './data-flow';
9
- export * from './types';
1
+ export { default as requestJwt } from './jwt/index.js';
2
+ export { default as SuggestionsEventSource } from './suggestions-event-source/index.js';
3
+ export { default as askQuestion } from './ask-question/index.js';
4
+ export { default as transcribeAudio } from './audio-transcription/index.js';
5
+ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js';
6
+ export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
7
+ export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
8
+ export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
9
+ export * from './icons/index.js';
10
+ export * from './components/index.js';
11
+ export * from './data-flow/index.js';
12
+ export * from './types.js';
package/build/index.js CHANGED
@@ -1,27 +1,30 @@
1
1
  /*
2
2
  * Core library exports
3
3
  */
4
- export { default as requestJwt } from './jwt';
5
- export { default as SuggestionsEventSource } from './suggestions-event-source';
6
- export { default as askQuestion } from './ask-question';
4
+ export { default as requestJwt } from './jwt/index.js';
5
+ export { default as SuggestionsEventSource } from './suggestions-event-source/index.js';
6
+ export { default as askQuestion } from './ask-question/index.js';
7
+ export { default as transcribeAudio } from './audio-transcription/index.js';
7
8
  /*
8
9
  * Hooks
9
10
  */
10
- export { default as useAiSuggestions } from './hooks/use-ai-suggestions';
11
- export { default as useMediaRecording } from './hooks/use-media-recording';
11
+ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js';
12
+ export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
13
+ export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
14
+ export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
12
15
  /*
13
16
  * Components: Icons
14
17
  */
15
- export * from './icons';
18
+ export * from './icons/index.js';
16
19
  /*
17
20
  * Components
18
21
  */
19
- export * from './components';
22
+ export * from './components/index.js';
20
23
  /*
21
24
  * Contexts
22
25
  */
23
- export * from './data-flow';
26
+ export * from './data-flow/index.js';
24
27
  /*
25
28
  * Types
26
29
  */
27
- export * from './types';
30
+ export * from './types.js';
@@ -2,8 +2,11 @@
2
2
  * External dependencies
3
3
  */
4
4
  import { isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
5
- import apiFetch from '@wordpress/api-fetch';
6
5
  import debugFactory from 'debug';
6
+ /**
7
+ * Internal dependencies
8
+ */
9
+ import apiFetch from '../api-fetch/index.js';
7
10
  const debug = debugFactory('jetpack-ai-client:jwt');
8
11
  const JWT_TOKEN_ID = 'jetpack-ai-jwt';
9
12
  const JWT_TOKEN_EXPIRATION_TIME = 2 * 60 * 1000; // 2 minutes
@@ -2,7 +2,7 @@
2
2
  * External dependencies
3
3
  */
4
4
  import { EventSourceMessage } from '@microsoft/fetch-event-source';
5
- import type { AiModelTypeProp, PromptProp } from '../types';
5
+ import type { AiModelTypeProp, PromptProp } from '../types.js';
6
6
  type SuggestionsEventSourceConstructorArgs = {
7
7
  url?: string;
8
8
  question: PromptProp;
@@ -6,12 +6,12 @@ import debugFactory from 'debug';
6
6
  /**
7
7
  * Internal dependencies
8
8
  */
9
- import { getErrorData } from '../hooks/use-ai-suggestions';
10
- import requestJwt from '../jwt';
9
+ import { getErrorData } from '../hooks/use-ai-suggestions/index.js';
10
+ import requestJwt from '../jwt/index.js';
11
11
  /*
12
12
  * Types & constants
13
13
  */
14
- import { ERROR_CONTEXT_TOO_LARGE, ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_RESPONSE, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, } from '../types';
14
+ import { ERROR_CONTEXT_TOO_LARGE, ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_RESPONSE, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, } from '../types.js';
15
15
  const debug = debugFactory('jetpack-ai-client:suggestions-event-source');
16
16
  /**
17
17
  * SuggestionsEventSource is a wrapper around EvenTarget that emits