♻️ Improve file upload management

Closes #138

apps/builder/components/theme/ChatSettings/AvatarForm.tsx

@@ -17,6 +17,7 @@ import { ImageUploadContent } from 'components/shared/ImageUploadContent'
 import { DefaultAvatar } from 'assets/DefaultAvatar'
 
 type Props = {
+  uploadFilePath: string
   title: string
   avatarProps?: AvatarProps
   isDefaultCheck?: boolean
@@ -24,6 +25,7 @@ type Props = {
 }
 
 export const AvatarForm = ({
+  uploadFilePath,
   title,
   avatarProps,
   isDefaultCheck = false,
@@ -71,7 +73,8 @@ export const AvatarForm = ({
             <Portal>
               <PopoverContent p="4">
                 <ImageUploadContent
-                  url={avatarProps?.url}
+                  filePath={uploadFilePath}
+                  defaultUrl={avatarProps?.url}
                   onSubmit={handleImageUrl}
                 />
               </PopoverContent>

apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx

@@ -8,11 +8,16 @@ import { HostBubbles } from './HostBubbles'
 import { InputsTheme } from './InputsTheme'
 
 type Props = {
+  typebotId: string
   chatTheme: ChatTheme
   onChatThemeChange: (chatTheme: ChatTheme) => void
 }
 
-export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => {
+export const ChatThemeSettings = ({
+  typebotId,
+  chatTheme,
+  onChatThemeChange,
+}: Props) => {
   const handleHostBubblesChange = (hostBubbles: ContainerColors) =>
     onChatThemeChange({ ...chatTheme, hostBubbles })
   const handleGuestBubblesChange = (guestBubbles: ContainerColors) =>
@@ -30,12 +35,14 @@ export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => {
   return (
     <Stack spacing={6}>
       <AvatarForm
+        uploadFilePath={`typebots/${typebotId}/hostAvatar`}
         title="Bot avatar"
         avatarProps={chatTheme.hostAvatar}
         isDefaultCheck
         onAvatarChange={handleHostAvatarChange}
       />
       <AvatarForm
+        uploadFilePath={`typebots/${typebotId}/guestAvatar`}
         title="User avatar"
         avatarProps={chatTheme.guestAvatar}
         onAvatarChange={handleGuestAvatarChange}

apps/builder/components/theme/ThemeSideMenu.tsx

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