@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.
- package/CHANGELOG.md +21 -0
- package/build/api-fetch/index.d.ts +7 -0
- package/build/api-fetch/index.js +6 -0
- package/build/ask-question/index.d.ts +2 -2
- package/build/ask-question/index.js +1 -1
- package/build/audio-transcription/index.d.ts +12 -0
- package/build/audio-transcription/index.js +51 -0
- package/build/components/ai-control/index.d.ts +7 -6
- package/build/components/ai-control/index.js +6 -6
- package/build/components/ai-control/message.d.ts +10 -0
- package/build/components/ai-control/message.js +15 -2
- package/build/components/ai-status-indicator/index.d.ts +1 -1
- package/build/components/audio-duration-display/index.d.ts +3 -2
- package/build/components/audio-duration-display/index.js +3 -14
- package/build/components/audio-duration-display/lib/media.d.ts +13 -14
- package/build/components/audio-duration-display/lib/media.js +7 -32
- package/build/components/index.d.ts +4 -4
- package/build/components/index.js +4 -4
- package/build/data-flow/context.d.ts +9 -6
- package/build/data-flow/context.js +1 -1
- package/build/data-flow/index.d.ts +3 -3
- package/build/data-flow/index.js +3 -3
- package/build/data-flow/use-ai-context.d.ts +3 -3
- package/build/data-flow/use-ai-context.js +3 -3
- package/build/data-flow/with-ai-assistant-data.js +2 -2
- package/build/hooks/use-ai-suggestions/index.d.ts +4 -4
- package/build/hooks/use-ai-suggestions/index.js +2 -2
- package/build/hooks/use-audio-transcription/index.d.ts +28 -0
- package/build/hooks/use-audio-transcription/index.js +56 -0
- package/build/hooks/use-media-recording/index.d.ts +34 -12
- package/build/hooks/use-media-recording/index.js +116 -41
- package/build/hooks/use-transcription-post-processing/index.d.ts +30 -0
- package/build/hooks/use-transcription-post-processing/index.js +84 -0
- package/build/icons/index.d.ts +7 -7
- package/build/icons/index.js +7 -7
- package/build/icons/mic.js +2 -2
- package/build/icons/player-pause.js +1 -1
- package/build/index.d.ts +12 -9
- package/build/index.js +12 -9
- package/build/jwt/index.js +4 -1
- package/build/suggestions-event-source/index.d.ts +1 -1
- package/build/suggestions-event-source/index.js +3 -3
- package/build/types.d.ts +9 -2
- package/build/types.js +4 -0
- package/package.json +5 -5
- package/src/api-fetch/index.ts +13 -0
- package/src/ask-question/index.ts +2 -2
- package/src/audio-transcription/index.ts +75 -0
- package/src/components/ai-control/index.tsx +12 -16
- package/src/components/ai-control/message.tsx +34 -2
- package/src/components/ai-control/style.scss +6 -0
- package/src/components/ai-status-indicator/index.tsx +1 -1
- package/src/components/audio-duration-display/index.tsx +6 -17
- package/src/components/audio-duration-display/lib/media.ts +17 -40
- package/src/components/index.ts +8 -4
- package/src/data-flow/context.tsx +7 -8
- package/src/data-flow/index.ts +3 -3
- package/src/data-flow/use-ai-context.ts +6 -6
- package/src/data-flow/with-ai-assistant-data.tsx +2 -2
- package/src/hooks/use-ai-suggestions/index.ts +6 -6
- package/src/hooks/use-audio-transcription/index.ts +95 -0
- package/src/hooks/use-media-recording/Readme.md +2 -2
- package/src/hooks/use-media-recording/index.ts +179 -59
- package/src/hooks/use-transcription-post-processing/index.ts +135 -0
- package/src/icons/index.ts +7 -7
- package/src/icons/mic.tsx +14 -16
- package/src/icons/player-pause.tsx +5 -5
- package/src/index.ts +12 -9
- package/src/jwt/index.ts +4 -1
- package/src/suggestions-event-source/index.ts +4 -4
- 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
|
|
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:
|
|
9
|
+
state: RecordingState;
|
|
10
10
|
/**
|
|
11
11
|
* The recorded blob
|
|
12
12
|
*/
|
|
13
13
|
blob: Blob | null;
|
|
14
14
|
/**
|
|
15
|
-
* The
|
|
15
|
+
* The error message
|
|
16
16
|
*/
|
|
17
|
-
|
|
17
|
+
error: string | null;
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* The duration of the recorded audio
|
|
20
20
|
*/
|
|
21
|
-
|
|
21
|
+
duration: number;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* The audio analyser node
|
|
24
24
|
*/
|
|
25
|
-
|
|
25
|
+
analyser?: AnalyserNode;
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* The error handler
|
|
28
28
|
*/
|
|
29
|
-
|
|
29
|
+
onError: (err: string | Error) => void;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* The processing handler
|
|
32
32
|
*/
|
|
33
|
-
|
|
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('
|
|
65
|
-
|
|
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
|
-
//
|
|
195
|
+
// Remove listeners and clear the recorded chunks
|
|
98
196
|
useEffect(() => {
|
|
99
|
-
|
|
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
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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
|
+
}
|
package/build/icons/index.d.ts
CHANGED
|
@@ -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';
|
package/build/icons/index.js
CHANGED
|
@@ -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';
|
package/build/icons/mic.js
CHANGED
|
@@ -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,
|
|
6
|
-
const mic = (_jsxs(SVG, { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/SVG", children: [_jsx(
|
|
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: "
|
|
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
|
|
5
|
-
export { default as
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
9
|
-
export * from './
|
|
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';
|
package/build/jwt/index.js
CHANGED
|
@@ -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
|