⚡ (s3) Improve storage management and type safety

Closes #756

apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts

@@ -4,6 +4,7 @@ import { parseDefaultGroupWithBlock } from '@typebot.io/lib/playwright/databaseH
 import { BubbleBlockType, defaultAudioBubbleContent } from '@typebot.io/schemas'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
+import { proWorkspaceId } from '@typebot.io/lib/playwright/databaseSetup'
 
 const audioSampleUrl =
   'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
@@ -30,11 +31,17 @@ test('should work as expected', async ({ page }) => {
   await page.setInputFiles('input[type="file"]', getTestAsset('sample.mp3'))
   await expect(page.locator('audio')).toHaveAttribute(
     'src',
-    RegExp(`/public/typebots/${typebotId}/blocks`, 'gm')
+    RegExp(
+      `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks`,
+      'gm'
+    )
   )
   await page.getByRole('button', { name: 'Preview', exact: true }).click()
   await expect(page.locator('audio')).toHaveAttribute(
     'src',
-    RegExp(`/public/typebots/${typebotId}/blocks`, 'gm')
+    RegExp(
+      `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks`,
+      'gm'
+    )
   )
 })

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

@@ -5,15 +5,16 @@ import { useState } from 'react'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { useScopedI18n } from '@/locales'
+import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
 
 type Props = {
-  fileUploadPath: string
+  uploadFileProps: FilePathUploadProps
   content: AudioBubbleContent
   onContentChange: (content: AudioBubbleContent) => void
 }
 
 export const AudioBubbleForm = ({
-  fileUploadPath,
+  uploadFileProps,
   content,
   onContentChange,
 }: Props) => {
@@ -49,7 +50,7 @@ export const AudioBubbleForm = ({
             <Flex justify="center" py="2">
               <UploadButton
                 fileType="audio"
-                filePath={fileUploadPath}
+                filePathProps={uploadFileProps}
                 onFileUploaded={updateUrl}
                 colorScheme="blue"
               >

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleSettings.tsx

@@ -1,6 +1,7 @@
 import { ImageUploadContent } from '@/components/ImageUploadContent'
 import { TextInput } from '@/components/inputs'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
+import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
 import { useScopedI18n } from '@/locales'
 import { Stack } from '@chakra-ui/react'
 import { isDefined, isNotEmpty } from '@typebot.io/lib'
@@ -8,13 +9,13 @@ import { ImageBubbleBlock } from '@typebot.io/schemas'
 import React, { useState } from 'react'
 
 type Props = {
-  typebotId: string
+  uploadFileProps: FilePathUploadProps
   block: ImageBubbleBlock
   onContentChange: (content: ImageBubbleBlock['content']) => void
 }
 
 export const ImageBubbleSettings = ({
-  typebotId,
+  uploadFileProps,
   block,
   onContentChange,
 }: Props) => {
@@ -53,7 +54,7 @@ export const ImageBubbleSettings = ({
   return (
     <Stack p="2" spacing={4}>
       <ImageUploadContent
-        filePath={`typebots/${typebotId}/blocks/${block.id}`}
+        uploadFileProps={uploadFileProps}
         defaultUrl={block.content?.url}
         onSubmit={updateImage}
       />

apps/builder/src/features/blocks/bubbles/image/image.spec.ts

@@ -4,6 +4,7 @@ import { parseDefaultGroupWithBlock } from '@typebot.io/lib/playwright/databaseH
 import { BubbleBlockType, defaultImageBubbleContent } from '@typebot.io/schemas'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
+import { proWorkspaceId } from '@typebot.io/lib/playwright/databaseSetup'
 
 const unsplashImageSrc =
   'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
@@ -29,7 +30,10 @@ test.describe.parallel('Image bubble block', () => {
       await page.setInputFiles('input[type="file"]', getTestAsset('avatar.jpg'))
       await expect(page.locator('img')).toHaveAttribute(
         'src',
-        new RegExp(`/public/typebots/${typebotId}/blocks/block2`, 'gm')
+        new RegExp(
+          `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks/block2`,
+          'gm'
+        )
       )
     })
 

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx

@@ -134,6 +134,7 @@ export const PictureChoiceItemNode = ({
           >
             {typebot && (
               <PictureChoiceItemSettings
+                workspaceId={typebot.workspaceId}
                 typebotId={typebot.id}
                 item={item}
                 blockId={

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx

@@ -16,6 +16,7 @@ import { ConditionForm } from '@/features/blocks/logic/condition/components/Cond
 import { Condition, LogicalOperator } from '@typebot.io/schemas'
 
 type Props = {
+  workspaceId: string
   typebotId: string
   blockId: string
   item: PictureChoiceItem
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export const PictureChoiceItemSettings = ({
+  workspaceId,
   typebotId,
   blockId,
   item,
@@ -69,7 +71,12 @@ export const PictureChoiceItemSettings = ({
               </PopoverTrigger>
               <PopoverContent p="4" w="500px">
                 <ImageUploadContent
-                  filePath={`typebots/${typebotId}/blocks/${blockId}/items/${item.id}`}
+                  uploadFileProps={{
+                    workspaceId,
+                    typebotId,
+                    blockId,
+                    itemId: item.id,
+                  }}
                   defaultUrl={item.pictureSrc}
                   onSubmit={(url) => {
                     updateImage(url)