⚡ (s3) Improve storage management and type safety

Closes #756

apps/builder/src/features/theme/components/ThemeSideMenu.tsx

@@ -125,6 +125,7 @@ export const ThemeSideMenu = () => {
           <AccordionPanel pb={4}>
             {typebot && (
               <ChatThemeSettings
+                workspaceId={typebot.workspaceId}
                 typebotId={typebot.id}
                 chatTheme={typebot.theme.chat}
                 onChatThemeChange={updateChatTheme}

apps/builder/src/features/theme/components/chat/AvatarForm.tsx

@@ -17,9 +17,10 @@ import {
 import { ImageUploadContent } from '@/components/ImageUploadContent'
 import { DefaultAvatar } from '../DefaultAvatar'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
+import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
 
 type Props = {
-  uploadFilePath: string
+  uploadFileProps: FilePathUploadProps
   title: string
   avatarProps?: AvatarProps
   isDefaultCheck?: boolean
@@ -27,7 +28,7 @@ type Props = {
 }
 
 export const AvatarForm = ({
-  uploadFilePath,
+  uploadFileProps,
   title,
   avatarProps,
   isDefaultCheck = false,
@@ -90,7 +91,7 @@ export const AvatarForm = ({
                   w="500px"
                 >
                   <ImageUploadContent
-                    filePath={uploadFilePath}
+                    uploadFileProps={uploadFileProps}
                     defaultUrl={avatarProps?.url}
                     imageSize="thumb"
                     onSubmit={handleImageUrl}

apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx

@@ -19,12 +19,14 @@ import { HostBubbles } from './HostBubbles'
 import { InputsTheme } from './InputsTheme'
 
 type Props = {
+  workspaceId: string
   typebotId: string
   chatTheme: ChatTheme
   onChatThemeChange: (chatTheme: ChatTheme) => void
 }
 
 export const ChatThemeSettings = ({
+  workspaceId,
   typebotId,
   chatTheme,
   onChatThemeChange,
@@ -46,14 +48,22 @@ export const ChatThemeSettings = ({
   return (
     <Stack spacing={6}>
       <AvatarForm
-        uploadFilePath={`typebots/${typebotId}/hostAvatar`}
+        uploadFileProps={{
+          workspaceId,
+          typebotId,
+          fileName: 'hostAvatar',
+        }}
         title="Bot avatar"
         avatarProps={chatTheme.hostAvatar}
         isDefaultCheck
         onAvatarChange={handleHostAvatarChange}
       />
       <AvatarForm
-        uploadFilePath={`typebots/${typebotId}/guestAvatar`}
+        uploadFileProps={{
+          workspaceId,
+          typebotId,
+          fileName: 'guestAvatar',
+        }}
         title="User avatar"
         avatarProps={chatTheme.guestAvatar}
         onAvatarChange={handleGuestAvatarChange}

apps/builder/src/features/theme/components/general/BackgroundContent.tsx

@@ -42,6 +42,7 @@ export const BackgroundContent = ({
         </Flex>
       )
     case BackgroundType.IMAGE:
+      if (!typebot) return null
       return (
         <Popover isLazy placement="top">
           <PopoverTrigger>
@@ -63,7 +64,11 @@ export const BackgroundContent = ({
           <Portal>
             <PopoverContent p="4" w="500px">
               <ImageUploadContent
-                filePath={`typebots/${typebot?.id}/background`}
+                uploadFileProps={{
+                  workspaceId: typebot.workspaceId,
+                  typebotId: typebot.id,
+                  fileName: 'background',
+                }}
                 defaultUrl={background.content}
                 onSubmit={handleContentChange}
                 excludedTabs={['giphy', 'icon']}
@@ -72,7 +77,5 @@ export const BackgroundContent = ({
           </Portal>
         </Popover>
       )
-    default:
-      return <></>
   }
 }