🐛 Make sure files are not broken in preview if visibility is Private

Closes #1788

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/components/bubbles/GuestBubble.tsx

@@ -67,7 +67,7 @@ const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
           >
             {(attachment, idx) => (
               <img
-                src={attachment.url}
+                src={attachment.blobUrl ?? attachment.url}
                 alt={`Attached image ${idx() + 1}`}
                 class={clsx(
                   'typebot-guest-bubble-image-attachment cursor-pointer',
@@ -75,7 +75,9 @@ const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
                     attachment.type.startsWith('image')
                   ).length > 1 && 'max-w-[90%]'
                 )}
-                onClick={() => setClickedImageSrc(attachment.url)}
+                onClick={() =>
+                  setClickedImageSrc(attachment.blobUrl ?? attachment.url)
+                }
               />
             )}
           </For>
@@ -132,7 +134,7 @@ const AudioGuestBubble = (props: { answer: RecordingInputSubmitContent }) => {
         class="p-2 w-full whitespace-pre-wrap typebot-guest-bubble flex flex-col"
         data-testid="guest-bubble"
       >
-        <audio controls src={props.answer.url} />
+        <audio controls src={props.answer.blobUrl ?? props.answer.url} />
       </div>
     </div>
   )

packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx

@@ -83,7 +83,13 @@ export const FileUploadForm = (props: Props) => {
           props.block.options?.labels?.success?.single ??
           defaultFileInputOptions.labels.success.single,
         value: urls[0] ? encodeUrl(urls[0].url) : '',
-        attachments: [{ type: file.type, url: urls[0]!.url }],
+        attachments: [
+          {
+            type: file.type,
+            url: urls[0]!.url,
+            blobUrl: URL.createObjectURL(file),
+          },
+        ],
       })
     toaster.create({ description: 'An error occured while uploading the file' })
   }
@@ -121,7 +127,16 @@ export const FileUploadForm = (props: Props) => {
         .filter(isDefined)
         .map(({ url }) => encodeUrl(url))
         .join(', '),
-      attachments: urls.filter(isDefined),
+      attachments: urls
+        .map((urls, index) =>
+          urls
+            ? {
+                ...urls,
+                blobUrl: URL.createObjectURL(selectedFiles()[index]),
+              }
+            : null
+        )
+        .filter(isDefined),
     })
   }
 

packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -75,7 +75,16 @@ export const TextInput = (props: Props) => {
           })),
           onUploadProgress: setUploadProgress,
         })
-        attachments = urls?.filter(isDefined)
+        attachments = urls
+          ?.map((urls, index) =>
+            urls
+              ? {
+                  ...urls,
+                  blobUrl: URL.createObjectURL(selectedFiles()[index]),
+                }
+              : null
+          )
+          .filter(isDefined)
       }
       props.onSubmit({
         type: 'text',
@@ -219,6 +228,7 @@ export const TextInput = (props: Props) => {
       props.onSubmit({
         type: 'recording',
         url: urls[0],
+        blobUrl: URL.createObjectURL(audioFile),
       })
     }
     mediaRecorder.start()

packages/embeds/js/src/types.ts

@@ -30,6 +30,7 @@ export type ChatChunk = Pick<
 export type Attachment = {
   type: string
   url: string
+  blobUrl?: string
 }
 
 export type TextInputSubmitContent = {
@@ -42,6 +43,7 @@ export type TextInputSubmitContent = {
 export type RecordingInputSubmitContent = {
   type: 'recording'
   url: string
+  blobUrl?: string
 }
 
 export type InputSubmitContent =

packages/embeds/js/src/utils/persist.ts

@@ -23,7 +23,23 @@ export function persist<T>(
   const storage = parseRememberUserStorage(
     params.storage || defaultSettings.general.rememberUser.storage
   )
-  const serialize: (data: T) => string = JSON.stringify.bind(JSON)
+  const serialize: (data: T) => string = (data: T) => {
+    const clonedData = JSON.parse(JSON.stringify(data))
+
+    if ('blobUrl' in clonedData) {
+      clonedData.blobUrl = undefined
+    }
+
+    if ('attachments' in clonedData && Array.isArray(clonedData.attachments)) {
+      clonedData.attachments.forEach((attachment: any) => {
+        if (attachment && 'blobUrl' in attachment) {
+          attachment.blobUrl = undefined
+        }
+      })
+    }
+
+    return JSON.stringify(clonedData)
+  }
   const deserialize: (data: string) => T = JSON.parse.bind(JSON)
   const init = storage.getItem(params.key)
   const set =

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "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.3.13",
+  "version": "0.3.14",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",