diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index f34b671c4..7339c5164 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 b53d2704f..b0819c9b8 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) => (
{
attachment.type.startsWith('image')
).length > 1 && 'max-w-[90%]'
)}
- onClick={() => setClickedImageSrc(attachment.url)}
+ onClick={() =>
+ setClickedImageSrc(attachment.blobUrl ?? attachment.url)
+ }
/>
)}
@@ -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"
>
-
+
)
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 3603bbd06..bbad2dc9d 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 8d144c334..fd20941ed 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 5a7d899a5..58e4992d8 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 b4dd0ab3d..07260e349 100644
--- a/packages/embeds/js/src/utils/persist.ts
+++ b/packages/embeds/js/src/utils/persist.ts
@@ -23,7 +23,23 @@ export function persist(
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 9bd8a600c..1bec4c5fe 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 9727e43ee..615ef3af5 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",