✨ Add audio clips option on text input block

Closes #157

apps/builder/playwright.config.ts

@@ -31,6 +31,13 @@ export default defineConfig({
     locale: 'en-US',
     baseURL: process.env.NEXTAUTH_URL,
     storageState: './src/test/storageState.json',
+    permissions: ['microphone'],
+    launchOptions: {
+      args: [
+        '--use-fake-ui-for-media-stream',
+        '--use-fake-device-for-media-stream',
+      ],
+    },
   },
   projects: [
     {

apps/builder/src/features/blocks/inputs/textInput/components/TextInputNodeContent.tsx

@@ -16,6 +16,10 @@ export const TextInputNodeContent = ({ options }: Props) => {
     typebot &&
     options?.attachments?.isEnabled &&
     options?.attachments.saveVariableId
+  const audioClipVariableId =
+    typebot &&
+    options?.audioClip?.isEnabled &&
+    options?.audioClip.saveVariableId
   if (options?.variableId)
     return (
       <Stack w="calc(100% - 25px)">
@@ -29,6 +33,12 @@ export const TextInputNodeContent = ({ options }: Props) => {
             variableId={attachmentVariableId}
           />
         )}
+        {audioClipVariableId && (
+          <SetVariableLabel
+            variables={typebot.variables}
+            variableId={audioClipVariableId}
+          />
+        )}
       </Stack>
     )
   return (
@@ -43,6 +53,12 @@ export const TextInputNodeContent = ({ options }: Props) => {
           variableId={attachmentVariableId}
         />
       )}
+      {audioClipVariableId && (
+        <SetVariableLabel
+          variables={typebot.variables}
+          variableId={audioClipVariableId}
+        />
+      )}
     </Stack>
   )
 }

apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx

@@ -49,6 +49,26 @@ export const TextInputSettings = ({ options, onOptionsChange }: Props) => {
       attachments: { ...options?.attachments, visibility },
     })
 
+  const updateAudioClipEnabled = (isEnabled: boolean) =>
+    onOptionsChange({
+      ...options,
+      audioClip: { ...options?.audioClip, isEnabled },
+    })
+
+  const updateAudioClipSaveVariableId = (variable?: Pick<Variable, 'id'>) =>
+    onOptionsChange({
+      ...options,
+      audioClip: { ...options?.audioClip, saveVariableId: variable?.id },
+    })
+
+  const updateAudioClipVisibility = (
+    visibility: (typeof fileVisibilityOptions)[number]
+  ) =>
+    onOptionsChange({
+      ...options,
+      audioClip: { ...options?.audioClip, visibility },
+    })
+
   return (
     <Stack spacing={4}>
       <SwitchWithLabel
@@ -71,6 +91,34 @@ export const TextInputSettings = ({ options, onOptionsChange }: Props) => {
         }
         onChange={updateButtonLabel}
       />
+      <SwitchWithRelatedSettings
+        label={'Allow audio clip'}
+        initialValue={
+          options?.audioClip?.isEnabled ??
+          defaultTextInputOptions.audioClip.isEnabled
+        }
+        onCheckChange={updateAudioClipEnabled}
+      >
+        <Stack>
+          <FormLabel mb="0" htmlFor="variable">
+            Save the URL in a variable:
+          </FormLabel>
+          <VariableSearchInput
+            initialVariableId={options?.audioClip?.saveVariableId}
+            onSelectVariable={updateAudioClipSaveVariableId}
+          />
+        </Stack>
+        <DropdownList
+          label="Visibility:"
+          moreInfoTooltip='This setting determines who can see the uploaded files. "Public" means that anyone who has the link can see the files. "Private" means that only a members of this workspace can see the files.'
+          currentItem={
+            options?.audioClip?.visibility ??
+            defaultTextInputOptions.audioClip.visibility
+          }
+          onItemSelect={updateAudioClipVisibility}
+          items={fileVisibilityOptions}
+        />
+      </SwitchWithRelatedSettings>
       <SwitchWithRelatedSettings
         label={'Allow attachments'}
         initialValue={

apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts

@@ -39,7 +39,7 @@ test.describe.parallel('Text input block', () => {
     await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
   })
 
-  test('hey boy', async ({ page }) => {
+  test('attachments should work', async ({ page }) => {
     const typebotId = createId()
     await createTypebots([
       {
@@ -82,4 +82,31 @@ test.describe.parallel('Text input block', () => {
     ).toBeVisible()
     await expect(page.getByText('Help me with these')).toBeVisible()
   })
+
+  test('audio clips should work', async ({ page }) => {
+    const typebotId = createId()
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultGroupWithBlock({
+          type: InputBlockType.TEXT,
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+
+    await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
+    await page.getByText('Allow audio clip').click()
+    await page.locator('[data-testid="variables-input"]').first().click()
+    await page.getByText('var1').click()
+    await page.getByRole('button', { name: 'Test' }).click()
+    await page.getByRole('button', { name: 'Record voice' }).click()
+    await page.waitForTimeout(1000)
+    await page.getByRole('button', { name: 'Send' }).click()
+    await expect(page.locator('audio')).toHaveAttribute(
+      'src',
+      /http:\/\/localhost:9000/
+    )
+  })
 })