🚸 Improve audio clip status change and feedback

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",

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,
     },
   },
 ]

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) => {
         )}
       >
         <VoiceRecorder
-          isRecording={isRecording()}
+          recordingStatus={recordingStatus()}
           buttonsTheme={props.context.typebot.theme.chat?.buttons}
-          onRecordingStart={handleRecordingStart}
+          onRecordingConfirmed={handleRecordingConfirmed}
           onAbortRecording={handleRecordingAbort}
         />
-        <Show when={!isRecording()}>
+        <Show when={recordingStatus() !== 'started'}>
           <Show when={selectedFiles().length}>
             <div
               class="p-2 flex gap-2 border-gray-100 overflow-auto"
@@ -304,7 +307,7 @@ export const TextInput = (props: Props) => {
         <Match
           when={
             !inputValue() &&
-            !isRecording() &&
+            recordingStatus() !== 'started' &&
             props.block.options?.audioClip?.isEnabled
           }
         >

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<Theme['chat']>['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) => {
     <div
       class={clsx(
         'w-full gap-2 items-center transition-opacity px-2 typebot-recorder',
-        props.isRecording ? 'opacity-1 flex' : 'opacity-0 hidden'
+        props.recordingStatus === 'started'
+          ? 'opacity-1 flex'
+          : 'opacity-0 hidden'
       )}
     >
       <button

packages/embeds/js/tsconfig.json

@@ -16,7 +16,6 @@
     "outDir": "dist",
     "noEmit": false,
     "emitDeclarationOnly": true,
-    "noEmitOnError": true,
+    "noEmitOnError": true
-    "sourceMap": true
   }
 }

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/nextjs/rollup.config.js

@@ -16,7 +16,6 @@ const indexConfig = {
   output: {
     dir: './dist',
     format: 'es',
-    sourcemap: true,
   },
   external: ['next/dynamic.js', 'react', 'react/jsx-runtime'],
   watch: {

packages/embeds/nextjs/tsconfig.json

@@ -11,7 +11,6 @@
     "declarationMap": true,
     "noEmit": false,
     "emitDeclarationOnly": true,
-    "noEmitOnError": true,
+    "noEmitOnError": true
-    "sourceMap": true
   }
 }

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/rollup.config.js

@@ -16,7 +16,6 @@ const indexConfig = {
   output: {
     file: './dist/index.js',
     format: 'es',
-    sourcemap: true,
   },
   external: ['react', 'react/jsx-runtime'],
   watch: {

packages/embeds/react/tsconfig.json

@@ -11,7 +11,6 @@
     "declarationMap": true,
     "noEmit": false,
     "emitDeclarationOnly": true,
-    "noEmitOnError": true,
+    "noEmitOnError": true
-    "sourceMap": true
   }
 }