⚡ (audio) Add autoplay switch in settings

apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx

@@ -3,21 +3,25 @@ import { AudioBubbleContent } from '@typebot.io/schemas'
 import { TextInput } from '@/components/inputs'
 import { useState } from 'react'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 
 type Props = {
   fileUploadPath: string
   content: AudioBubbleContent
-  onSubmit: (content: AudioBubbleContent) => void
+  onContentChange: (content: AudioBubbleContent) => void
 }
 
 export const AudioBubbleForm = ({
   fileUploadPath,
   content,
-  onSubmit,
+  onContentChange,
 }: Props) => {
   const [currentTab, setCurrentTab] = useState<'link' | 'upload'>('link')
 
-  const submit = (url: string) => onSubmit({ url })
+  const updateUrl = (url: string) => onContentChange({ ...content, url })
+
+  const updateAutoPlay = (isAutoplayEnabled: boolean) =>
+    onContentChange({ ...content, isAutoplayEnabled })
 
   return (
     <Stack>
@@ -37,13 +41,14 @@ export const AudioBubbleForm = ({
           Embed link
         </Button>
       </HStack>
-      <Stack p="2">
+      <Stack p="2" spacing={4}>
+        <Stack>
           {currentTab === 'upload' && (
             <Flex justify="center" py="2">
               <UploadButton
                 fileType="audio"
                 filePath={fileUploadPath}
-              onFileUploaded={submit}
+                onFileUploaded={updateUrl}
                 colorScheme="blue"
               >
                 Choose a file
@@ -55,7 +60,7 @@ export const AudioBubbleForm = ({
               <TextInput
                 placeholder="Paste the audio file link..."
                 defaultValue={content.url ?? ''}
-              onChange={submit}
+                onChange={updateUrl}
               />
               <Text fontSize="sm" color="gray.400" textAlign="center">
                 Works with .MP3s and .WAVs
@@ -63,6 +68,12 @@ export const AudioBubbleForm = ({
             </>
           )}
         </Stack>
+        <SwitchWithLabel
+          label={'Enable autoplay'}
+          initialValue={content.isAutoplayEnabled ?? true}
+          onCheckChange={updateAutoPlay}
+        />
+      </Stack>
     </Stack>
   )
 }

apps/builder/src/features/graph/components/nodes/block/MediaBubblePopoverContent.tsx

@@ -77,7 +77,7 @@ export const MediaBubbleContent = ({
         <AudioBubbleForm
           content={block.content}
           fileUploadPath={`typebots/${typebotId}/blocks/${block.id}`}
-          onSubmit={onContentChange}
+          onContentChange={onContentChange}
         />
       )
     }

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/components/Bot.tsx

@@ -74,7 +74,10 @@ export const Bot = (props: BotProps & { class?: string }) => {
         return setError(new Error("The bot you're looking for doesn't exist."))
     }
 
-    if (!data) return setError(new Error("Error! Couldn't initiate the chat."))
+    if (!data) {
+      if (error) console.error(error)
+      return setError(new Error("Error! Couldn't initiate the chat."))
+    }
 
     if (data.resultId && typebotIdFromProps)
       setResultInStorage(data.typebot.settings.general.rememberUser?.storage)(

packages/embeds/js/src/components/bubbles/HostBubble.tsx

@@ -55,7 +55,7 @@ export const HostBubble = (props: Props) => {
       </Match>
       <Match when={props.message.type === BubbleBlockType.AUDIO}>
         <AudioBubble
-          url={(props.message.content as AudioBubbleContent).url}
+          content={props.message.content as AudioBubbleContent}
           onTransitionEnd={onTransitionEnd}
         />
       </Match>

packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -4,7 +4,7 @@ import type { AudioBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
-  url: AudioBubbleContent['url']
+  content: AudioBubbleContent
   onTransitionEnd: (offsetTop?: number) => void
 }
 
@@ -50,8 +50,8 @@ export const AudioBubble = (props: Props) => {
           </div>
           <audio
             ref={audioElement}
-            src={props.url}
-            autoplay
+            src={props.content.url}
+            autoplay={props.content.isAutoplayEnabled ?? true}
             class={
               'z-10 text-fade-in ' +
               (isTyping() ? 'opacity-0' : 'opacity-100 m-2')

packages/embeds/nextjs/package.json

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

packages/embeds/react/package.json

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

packages/schemas/features/blocks/bubbles/audio.ts

@@ -4,6 +4,7 @@ import { BubbleBlockType } from './enums'
 
 export const audioBubbleContentSchema = z.object({
   url: z.string().optional(),
+  isAutoplayEnabled: z.boolean().optional(),
 })
 
 export const audioBubbleBlockSchema = blockBaseSchema.merge(