⚡ (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,31 +41,38 @@ export const AudioBubbleForm = ({
           Embed link
         </Button>
       </HStack>
-      <Stack p="2">
+      <Stack p="2" spacing={4}>
-        {currentTab === 'upload' && (
+        <Stack>
-          <Flex justify="center" py="2">
+          {currentTab === 'upload' && (
-            <UploadButton
+            <Flex justify="center" py="2">
-              fileType="audio"
+              <UploadButton
-              filePath={fileUploadPath}
+                fileType="audio"
-              onFileUploaded={submit}
+                filePath={fileUploadPath}
-              colorScheme="blue"
+                onFileUploaded={updateUrl}
-            >
+                colorScheme="blue"
-              Choose a file
+              >
-            </UploadButton>
+                Choose a file
-          </Flex>
+              </UploadButton>
-        )}
+            </Flex>
-        {currentTab === 'link' && (
+          )}
-          <>
+          {currentTab === 'link' && (
-            <TextInput
+            <>
-              placeholder="Paste the audio file link..."
+              <TextInput
-              defaultValue={content.url ?? ''}
+                placeholder="Paste the audio file link..."
-              onChange={submit}
+                defaultValue={content.url ?? ''}
-            />
+                onChange={updateUrl}
-            <Text fontSize="sm" color="gray.400" textAlign="center">
+              />
-              Works with .MP3s and .WAVs
+              <Text fontSize="sm" color="gray.400" textAlign="center">
-            </Text>
+                Works with .MP3s and .WAVs
-          </>
+              </Text>
-        )}
+            </>
+          )}
+        </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}
+            src={props.content.url}
-            autoplay
+            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(