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) => {