From 3f15c262ec804013afe7f7bf20f01ccef0bc9d13 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 12 Sep 2024 21:29:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Make=20sure=20files=20are=20not?=
 =?UTF-8?q?=20broken=20in=20preview=20if=20visibility=20is=20Private?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #1788
---
 packages/embeds/js/package.json               |  2 +-
 .../js/src/components/bubbles/GuestBubble.tsx |  8 +++++---
 .../fileUpload/components/FileUploadForm.tsx  | 19 +++++++++++++++++--
 .../inputs/textInput/components/TextInput.tsx | 12 +++++++++++-
 packages/embeds/js/src/types.ts               |  2 ++
 packages/embeds/js/src/utils/persist.ts       | 18 +++++++++++++++++-
 packages/embeds/nextjs/package.json           |  2 +-
 packages/embeds/react/package.json            |  2 +-
 8 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index f34b671c49..7339c51644 100644
--- a/packages/embeds/js/package.json
+++ b/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",
diff --git a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
index b53d2704fa..b0819c9b8b 100644
--- a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
+++ b/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>
   )
diff --git a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
index 3603bbd061..bbad2dc9d1 100644
--- a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
+++ b/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),
     })
   }
 
diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
index 8d144c3342..fd20941ed1 100644
--- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
+++ b/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()
diff --git a/packages/embeds/js/src/types.ts b/packages/embeds/js/src/types.ts
index 5a7d899a5f..58e4992d83 100644
--- a/packages/embeds/js/src/types.ts
+++ b/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 =
diff --git a/packages/embeds/js/src/utils/persist.ts b/packages/embeds/js/src/utils/persist.ts
index b4dd0ab3d3..07260e3498 100644
--- a/packages/embeds/js/src/utils/persist.ts
+++ b/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 =
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 9bd8a600c0..1bec4c5fee 100644
--- a/packages/embeds/nextjs/package.json
+++ b/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",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 9727e43ee1..615ef3af5d 100644
--- a/packages/embeds/react/package.json
+++ b/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",