diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json index ec334c626..9eabc85ca 100644 --- a/packages/embeds/js/package.json +++ b/packages/embeds/js/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/js", - "version": "0.3.9", + "version": "0.3.10", "description": "Javascript library to display typebots on your website", "type": "module", "main": "dist/index.js", diff --git a/packages/embeds/js/rollup.config.js b/packages/embeds/js/rollup.config.js index a7d857da6..1ae8900db 100644 --- a/packages/embeds/js/rollup.config.js +++ b/packages/embeds/js/rollup.config.js @@ -21,7 +21,6 @@ const indexConfig = { output: { file: 'dist/index.js', format: 'es', - sourcemap: true, }, onwarn, watch: { @@ -64,7 +63,6 @@ const configs = [ output: { file: 'dist/web.js', format: 'es', - sourcemap: true, }, }, ] diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx index c392f7ac9..8534862f2 100644 --- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx +++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx @@ -41,7 +41,9 @@ export const TextInput = (props: Props) => { { fileIndex: number; progress: number } | undefined >(undefined) const [isDraggingOver, setIsDraggingOver] = createSignal(false) - const [isRecording, setIsRecording] = createSignal(false) + const [recordingStatus, setRecordingStatus] = createSignal< + 'started' | 'asking' | 'stopped' + >('stopped') let inputRef: HTMLInputElement | HTMLTextAreaElement | undefined let mediaRecorder: MediaRecorder | undefined let recordedChunks: Blob[] = [] @@ -52,7 +54,7 @@ export const TextInput = (props: Props) => { inputRef?.value !== '' && inputRef?.reportValidity() const submit = async () => { - if (isRecording() && mediaRecorder) { + if (recordingStatus() === 'started' && mediaRecorder) { mediaRecorder.stop() return } @@ -157,17 +159,17 @@ export const TextInput = (props: Props) => { } const recordVoice = () => { - setIsRecording(true) + setRecordingStatus('asking') } - const handleRecordingStart = (stream: MediaStream) => { + const handleRecordingConfirmed = (stream: MediaStream) => { mediaRecorder = new MediaRecorder(stream) mediaRecorder.ondataavailable = (event) => { if (event.data.size === 0) return recordedChunks.push(event.data) } mediaRecorder.onstop = async () => { - if (!isRecording() || recordedChunks.length === 0) return + if (recordingStatus() !== 'started' || recordedChunks.length === 0) return const audioFile = new File( recordedChunks, `rec-${props.block.id}-${Date.now()}.mp3`, @@ -200,11 +202,12 @@ export const TextInput = (props: Props) => { }) } mediaRecorder.start() + setRecordingStatus('started') } const handleRecordingAbort = () => { - setIsRecording(false) mediaRecorder?.stop() + setRecordingStatus('stopped') mediaRecorder = undefined recordedChunks = [] } @@ -227,12 +230,12 @@ export const TextInput = (props: Props) => { )} > - +
{ diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx index fcb2b9613..4cfe85323 100644 --- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx +++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx @@ -13,10 +13,10 @@ let offset = 0 const initBarsHeightPercent = 10 type Props = { - isRecording: boolean + recordingStatus: 'asking' | 'started' | 'stopped' buttonsTheme: NonNullable['buttons'] onAbortRecording: () => void - onRecordingStart: (stream: MediaStream) => void + onRecordingConfirmed: (stream: MediaStream) => void } export const VoiceRecorder = (props: Props) => { @@ -89,7 +89,7 @@ export const VoiceRecorder = (props: Props) => { stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - props.onRecordingStart(stream) + props.onRecordingConfirmed(stream) audioContext = new AudioContext() volumeNode = await loadVolumeProcessorWorklet(audioContext) @@ -126,9 +126,9 @@ export const VoiceRecorder = (props: Props) => { } createEffect(() => { - if (props.isRecording) { + if (props.recordingStatus === 'asking') { startRecording() - } else { + } else if (props.recordingStatus === 'stopped') { stopRecording() } }) @@ -141,7 +141,9 @@ export const VoiceRecorder = (props: Props) => {