@snapcall/stream-ui 1.26.1 → 1.27.0

package/dist/stream-ui.js

@@ -1,12 +1,12 @@
 var $jQDcL$reactjsxruntime = require("react/jsx-runtime");
 var $jQDcL$reactdomclient = require("react-dom/client");
 var $jQDcL$bowser = require("bowser");
+var $jQDcL$tanstackreactquery = require("@tanstack/react-query");
 var $jQDcL$reacthottoast = require("react-hot-toast");
 var $jQDcL$styledcomponents = require("styled-components");
 var $jQDcL$react = require("react");
 var $jQDcL$snapcalldesignsystem = require("@snapcall/design-system");
 require("inobounce");
-var $jQDcL$reactquery = require("react-query");
 var $jQDcL$reacti18next = require("react-i18next");
 var $jQDcL$i18next = require("i18next");
 var $jQDcL$reactstately = require("react-stately");
@@ -36,6 +36,7 @@ $parcel$export(module.exports, "streamUI", () => $e68207026aca356b$export$3f9491
 
 
 
+
 // https://github.com/voodoocreation/ts-deepmerge/blob/master/src/index.ts
 const $6b4cf4c12c735fdf$var$isObject = (obj)=>{
     if (typeof obj === "object" && obj !== null) {
@@ -1076,18 +1077,45 @@ class $93041e14f6aa3f24$export$22ddc20344c01547 {
 
 
 
+const $96c060f28b764056$export$8a48322ecc4782be = async (url, streamToken, file)=>{
+    const searchParams = new URLSearchParams({
+        filename: file
+    });
+    const result = await fetch(`${url}/public/streams/${streamToken}/temporary-assets?${searchParams}`, {
+        method: "get",
+        headers: {
+            "Content-Type": "application/json"
+        }
+    }).then((response)=>response.json());
+    return result;
+};
+const $96c060f28b764056$export$df987b50509121ea = async (url, streamToken, file)=>{
+    const searchParams = new URLSearchParams({
+        filename: file
+    });
+    const result = await fetch(`${url}/public/streams/${streamToken}/temporary-assets?${searchParams}`, {
+        method: "delete",
+        headers: {
+            "Content-Type": "application/json"
+        }
+    }).then((response)=>response.json());
+    return result;
+};
+
+
 
 var $7f16567c4f721486$require$Buffer = $jQDcL$buffer.Buffer;
-const $7f16567c4f721486$export$bfc52a1c1f84ba66 = async (apiUrl, { token: token, base64Image: base64Image, session_id: session_id, user_id: user_id, peer_id: peer_id, stepToken: stepToken })=>{
-    const filename = `${(0, $jQDcL$uuid.v4)()}.jpeg`;
+const $7f16567c4f721486$export$bfc52a1c1f84ba66 = async (apiUrl, { token: token, base64Image: base64Image })=>{
+    const file = `${(0, $jQDcL$uuid.v4)()}.jpeg`;
     const uploadBody = $7f16567c4f721486$require$Buffer.from(String(base64Image).replace(/^data:image\/\w+;base64,/, ""), "base64");
-    const { url: url, headers: headers } = await fetch(`${apiUrl}/streams/${token}/snapshot`, {
+    const { url: url, headers: headers, filename: filename } = await fetch(`${apiUrl}/public/streams/${token}/events/upload`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            filename: filename,
+            type: "image",
+            filename: file,
             contentLength: uploadBody.length
         })
     }).then((res)=>res.json());
@@ -1100,22 +1128,10 @@ const $7f16567c4f721486$export$bfc52a1c1f84ba66 = async (apiUrl, { token: token,
         },
         body: uploadBody
     });
-    const event = await fetch(`${apiUrl}/public/streams/${token}/snapshot-event`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-            stepToken: stepToken,
-            filename: filename,
-            peer_id: peer_id,
-            session_id: session_id,
-            user_id: user_id
-        })
-    }).then((res)=>res.json());
+    const { url: assetUrl } = await (0, $96c060f28b764056$export$8a48322ecc4782be)(apiUrl, token, filename);
     return {
-        url: event.url,
-        assetId: event.id
+        filename: filename,
+        url: assetUrl
     };
 };
 
@@ -1141,7 +1157,9 @@ const $3898fb88b880f5ba$export$de363e709c412c8a = (fn, wait = 300)=>{
 };
 
 
-const $e28f3021384abb82$export$deda6dde1c58aa97 = async (apiUrl, { file: file, token: token, stepToken: stepToken, sessionId: sessionId, userId: userId, peerId: peerId })=>{
+
+
+const $987c962fd22b0c93$export$6ad2c48011488f7 = async (apiUrl, { file: file, token: token })=>{
     if (!file) throw new Error(`Missing file on "${file}"`);
     const upload = await fetch(`${apiUrl}/public/streams/${token}/events/upload`, {
         method: "POST",
@@ -1163,23 +1181,27 @@ const $e28f3021384abb82$export$deda6dde1c58aa97 = async (apiUrl, { file: file, t
         },
         body: file
     });
+    const { url: assetUrl } = await (0, $96c060f28b764056$export$8a48322ecc4782be)(apiUrl, token, filename);
     if (!uploadResponse.ok) throw new Error("Upload failed");
-    const type = file.type.split("/")[0];
-    const eventRequest = await fetch(`${apiUrl}/public/streams/${token}/events`, {
+    return {
+        filename: filename,
+        url: assetUrl
+    };
+};
+
+
+const $54d9e0891cb8e108$export$c30017717ce2168e = async (apiUrl, token, asset)=>{
+    const event = await fetch(`${apiUrl}/public/streams/${token}/events/batch`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            filename: filename,
-            type: type,
-            stepToken: stepToken,
-            session_id: sessionId,
-            user_id: userId,
-            peer_id: peerId
+            medias: asset
         })
     });
-    return eventRequest.json();
+    if (event.ok) return event.json();
+    throw new Error(` request failed ${event.status} `);
 };
 
 
@@ -1187,6 +1209,7 @@ const $1dedebd5ff3002eb$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae0
 const $1dedebd5ff3002eb$export$103bedf43ba882db = {
     WEBRTC_FAILED: "WRTC1",
     WEBRTC_RECOVER_ERROR: "WRTC2",
+    WEBRTC_BAD_STATE_ERROR: "WRTC3",
     CREATE_TRANSPORT_FAILED: "TRANS1",
     CONSUME_ERROR: "CONS1",
     SOCKET_LOST: "SOCK1",
@@ -1437,12 +1460,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.company = company;
             this.permissions = permissions;
             this.defaultPublicPage = defaultPublicPage;
-            if (recordings?.headless === true || recordings?.video === true) permissions.push("record_video_on_demand");
             this.plan = name;
             const searchParams = new URLSearchParams({
                 peerId: this.peerId,
                 clientId: this.clientId,
-                roomId: room
+                roomId: room,
+                events: "0"
             });
             if (options.authKey) searchParams.append("authKey", options.authKey);
             const recorderPath = this.joinOptions.recorder ? "/recorder" : "";
@@ -2327,7 +2350,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         };
         if (capabilities.focusMode) // https://github.com/w3c/mediacapture-image/blob/main/implementation-status.md
         try {
-            track.applyConstraints({
+            await track.applyConstraints({
                 advanced: [
                     {
                         focusMode: "continuous"
@@ -2524,26 +2547,28 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     async saveCapture(base64Image) {
         return (0, $7f16567c4f721486$export$bfc52a1c1f84ba66)(this.config.apiUrl, {
             token: this.roomId,
-            base64Image: base64Image,
-            peer_id: this.peerId,
-            user_id: this.agentIdentity?.id,
-            stepToken: this.stepToken
+            base64Image: base64Image
         });
     }
-    async uploadEvent(file) {
-        return (0, $e28f3021384abb82$export$deda6dde1c58aa97)(this.config.apiUrl, {
+    async uploadAsset(file) {
+        return (0, $987c962fd22b0c93$export$6ad2c48011488f7)(this.config.apiUrl, {
             token: this.roomId,
-            file: file,
-            peerId: this.peerId,
-            userId: this.agentIdentity?.id,
-            stepToken: this.stepToken
+            file: file
         });
     }
-    async deleteCapture(assetId) {
-        const res = await this.protoo?.request("deleteCapture", {
-            assetId: assetId
+    createEvents(assets) {
+        const baseEvent = {
+            peer_id: this.peerId,
+            user_id: this.agentIdentity?.id,
+            stepToken: this.stepToken
+        };
+        const events = assets.map((asset)=>{
+            return {
+                ...asset,
+                ...baseEvent
+            };
         });
-        return res;
+        return (0, $54d9e0891cb8e108$export$c30017717ce2168e)(this.config.apiUrl, this.roomId, events);
     }
     async captureVideo(videoElement) {
         if (this.permissions.find((permission)=>permission === "instant_picture")) {
@@ -2849,7 +2874,25 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         return this.permissions;
     }
     async startRecord() {
-        await this.protoo?.request("startRecord");
+        if (this.micProducer?.rtpSender?.transport?.iceTransport.state !== "connected") try {
+            this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.WEBRTC_BAD_STATE_ERROR);
+            const stats = await this.micProducer?.getStats();
+            const dump = {};
+            stats?.forEach((value, key)=>{
+                dump[key] = value;
+            });
+            $jQDcL$sentrybrowser.captureMessage("Start record in bad state", {
+                contexts: {
+                    data: {
+                        producerState: this.micProducer?.rtpSender?.transport?.iceTransport?.state,
+                        dump: JSON.stringify(dump)
+                    }
+                }
+            });
+        } catch (err) {
+            $jQDcL$sentrybrowser.captureException(err);
+        }
+        await this.protoo?.request("startRecord", this.micProducer?.rtpSender?.transport?.iceTransport.state);
     }
     async stopRecord() {
         await this.protoo?.request("stopRecord");
@@ -2866,6 +2909,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         if (!this.protoo) throw new Error("not connected");
         return this.protoo?.request("waitingRequests");
     }
+    readAsset(file) {
+        return (0, $96c060f28b764056$export$8a48322ecc4782be)(this.config.apiUrl, this.roomId, file);
+    }
+    deleteAsset(file) {
+        return (0, $96c060f28b764056$export$df987b50509121ea)(this.config.apiUrl, this.roomId, file);
+    }
 }
 
 
@@ -10380,7 +10429,7 @@ const $3d1bfd8f074b99b1$var$feedbackRatings = [
 const $3d1bfd8f074b99b1$var$EndView = ({ state: state })=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
     const { setStreamState: setStreamState, options: options } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
-    const sendSessionFeedback = (0, $jQDcL$reactquery.useMutation)({
+    const sendSessionFeedback = (0, $jQDcL$tanstackreactquery.useMutation)({
         mutationFn: ({ rate: rate })=>{
             const { roomId: roomId, peerId: peerId } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
             return fetch(`${options.apiUrl}/public/streams/${roomId}/feedback`, {
@@ -10396,7 +10445,7 @@ const $3d1bfd8f074b99b1$var$EndView = ({ state: state })=>{
         }
     });
     const showFeedback = (state === "ended" || state === "terminated") && !options.apiKey;
-    const feedbackSent = sendSessionFeedback.isLoading || sendSessionFeedback.isSuccess || sendSessionFeedback.isError;
+    const feedbackSent = sendSessionFeedback.isPending || sendSessionFeedback.isSuccess || sendSessionFeedback.isError;
     const statesData = {
         ended: {
             title: t("endView.callLeft"),
@@ -11376,21 +11425,21 @@ const $ccbd73eb953b0bd0$export$b3fd96a52c80b3af = ()=>{
             try {
                 let url;
                 let thumbnailUrl;
-                let id;
+                let filename;
                 if (type === "image") {
                     const dataUrl = await $ccbd73eb953b0bd0$var$fileToDataUrl(file);
                     const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(dataUrl);
                     url = data.url;
-                    id = data.assetId;
+                    filename = data.filename;
                 } else {
-                    const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).uploadEvent(file);
+                    const data = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).uploadAsset(file);
                     url = data.url;
-                    id = data.id;
+                    filename = data.filename;
                     if (type === "video") thumbnailUrl = await $ccbd73eb953b0bd0$var$generateVideoThumbnail(file);
-                    if (!url || !id) throw new Error("upload failed");
+                    if (!url || !filename) throw new Error("upload failed");
                 }
                 addAsset({
-                    id: id,
+                    filename: filename,
                     mode: mode,
                     url: url,
                     thumbnailUrl: thumbnailUrl || url,
@@ -11634,7 +11683,7 @@ const $cf45aa5122d1e9ea$export$6aa26f5ebe6471fc = ({ kind: kind, includeDefault:
         });
         return filteredDevices;
     };
-    return (0, $jQDcL$reactquery.useQuery)({
+    return (0, $jQDcL$tanstackreactquery.useQuery)({
         queryKey: [
             "mediaDevices",
             kind || "all",
@@ -11651,7 +11700,7 @@ const $cf45aa5122d1e9ea$export$6aa26f5ebe6471fc = ({ kind: kind, includeDefault:
 
 
 const $c1f57aebcca9b882$export$9f1846b6ccad1893 = ()=>{
-    return (0, $jQDcL$reactquery.useQuery)({
+    return (0, $jQDcL$tanstackreactquery.useQuery)({
         queryKey: [
             "devicesState"
         ],
@@ -11666,8 +11715,8 @@ const $c1f57aebcca9b882$export$9f1846b6ccad1893 = ()=>{
 
 
 const $e10783d7d081fd73$export$20144d37f30919ab = ()=>{
-    const queryClient = (0, $jQDcL$reactquery.useQueryClient)();
-    return (0, $jQDcL$reactquery.useMutation)({
+    const queryClient = (0, $jQDcL$tanstackreactquery.useQueryClient)();
+    return (0, $jQDcL$tanstackreactquery.useMutation)({
         mutationFn: (device)=>{
             if (device.kind === "audioinput") return (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).switchMicrophone(device.deviceId);
             else if (device.kind === "videoinput") return (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).switchWebcam({
@@ -11676,9 +11725,11 @@ const $e10783d7d081fd73$export$20144d37f30919ab = ()=>{
             else if (device.kind === "audiooutput") throw new Error("Audio output not supported");
             throw new Error("Unsupported device info");
         },
-        onSettled: ()=>queryClient.invalidateQueries([
-                "devicesState"
-            ])
+        onSettled: ()=>queryClient.invalidateQueries({
+                queryKey: [
+                    "devicesState"
+                ]
+            })
     });
 };
 
@@ -11733,7 +11784,7 @@ const $8229feab219a258c$export$15073df9b5e6c63e = (constraints)=>{
     }, [
         constraints.audio
     ]);
-    const query = (0, $jQDcL$reactquery.useQuery)({
+    const query = (0, $jQDcL$tanstackreactquery.useQuery)({
         queryKey: [
             constraints
         ],
@@ -11835,7 +11886,7 @@ const $8dc2b756952b64e5$export$75b44b566abc4e9c = ()=>{
                         className: "bg-gray-50",
                         id: "microphone",
                         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectValue), {
-                            children: updateDevice.isLoading ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
+                            children: updateDevice.isPending ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
                                 children: updateDevice.variables?.label
                             }) : undefined
                         })
@@ -11895,7 +11946,7 @@ const $2736f94642df39f3$export$40214e6b2a12030d = ()=>{
                         id: "camera",
                         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectValue), {
                             placeholder: "/",
-                            children: updateDevice.isLoading ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
+                            children: updateDevice.isPending ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
                                 children: updateDevice.variables?.label
                             }) : undefined
                         })
@@ -12372,7 +12423,6 @@ const $c6c03cb1324fb0c3$export$e9b744e15e8fe06f = ()=>{
 
 
 
-
 const $ad0f2e3b2245bd2e$export$f56b3b5841ad32ae = ({ state: state, mode: mode, url: url })=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Dialog), {
@@ -12605,7 +12655,7 @@ const $ed315b68f9410130$export$d70ec5859ea7c9bc = ({ asset: asset, canRemove: ca
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c9fb579e7fb951f$export$520a0918a6dd04fd), {
                 state: assetDeleteModalState,
-                onDelete: ()=>removeAsset(asset.id)
+                onDelete: ()=>removeAsset(asset.filename)
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
                 className: "flex items-center gap-2.5 p-2 border border-gray-200 rounded-lg",
@@ -12646,7 +12696,7 @@ const $ed315b68f9410130$export$d70ec5859ea7c9bc = ({ asset: asset, canRemove: ca
                         })
                     })
                 ]
-            }, asset.id),
+            }, asset.filename),
             asset.mode !== "photo" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $c42fbc742adf8306$export$1ea93f9eface5983), {
                 duration: asset.duration,
                 averageAudioLevel: asset.averageAudioLevel
@@ -12657,17 +12707,120 @@ const $ed315b68f9410130$export$d70ec5859ea7c9bc = ({ asset: asset, canRemove: ca
 
 
 
+
+
+const $8a7a24ac08dbc187$var$getStoredAssets = async ()=>{
+    try {
+        const storedAssets = JSON.parse(localStorage.getItem("snapcall_assets") || "[]");
+        const assets = await Promise.all(storedAssets.map(async (storedAsset)=>{
+            try {
+                let { url: url, thumbnailUrl: thumbnailUrl } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).readAsset(storedAsset.filename);
+                if (url) {
+                    if (storedAsset.mode === "photo") thumbnailUrl = url;
+                    return {
+                        ...storedAsset,
+                        url: url,
+                        thumbnailUrl: thumbnailUrl
+                    };
+                }
+            } catch (error) {
+                $8a7a24ac08dbc187$export$df987b50509121ea(storedAsset.filename);
+            }
+        }));
+        return assets.filter((asset)=>Boolean(asset?.filename));
+    } catch (err) {}
+    return [];
+};
+const $8a7a24ac08dbc187$export$cfdbe7fcc2578443 = (asset)=>{
+    try {
+        const storedAsset = JSON.parse(localStorage.getItem("snapcall_assets") || "[]");
+        storedAsset.push({
+            ...asset,
+            url: undefined,
+            thumbnailUrl: null
+        });
+        localStorage.setItem("snapcall_assets", JSON.stringify(storedAsset));
+    } catch (err) {}
+};
+const $8a7a24ac08dbc187$export$df987b50509121ea = (filename)=>{
+    try {
+        const storedAsset = JSON.parse(localStorage.getItem("snapcall_assets") || "[]");
+        localStorage.setItem("snapcall_assets", JSON.stringify(storedAsset.filter((asset)=>{
+            return asset.filename !== filename;
+        })));
+    } catch (err) {}
+};
+const $8a7a24ac08dbc187$export$931d641a2a152cf = ()=>{
+    const storedAssets = (0, $jQDcL$tanstackreactquery.useQuery)({
+        queryKey: [
+            "stored-assets"
+        ],
+        queryFn: ()=>$8a7a24ac08dbc187$var$getStoredAssets(),
+        retry: false,
+        refetchOnMount: false,
+        refetchOnReconnect: false,
+        refetchOnWindowFocus: false,
+        staleTime: Infinity
+    });
+    return storedAssets;
+};
+
+
+
+
+const $e399416dd32d3252$var$eventTypes = {
+    screen: "screenshare",
+    photo: "image",
+    video: "video",
+    audio: "audio"
+};
 const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
     const { assets: assets, incomingAsset: incomingAsset } = (0, $098350f721a0bb52$export$2174f25d572f9f31)();
-    const [sent, setSent] = (0, $jQDcL$react.useState)(false);
+    const sendMutation = (0, $jQDcL$tanstackreactquery.useMutation)({
+        mutationFn: async ()=>{
+            try {
+                const events = assets.map((asset)=>{
+                    return {
+                        filename: asset.filename,
+                        type: $e399416dd32d3252$var$eventTypes[asset.mode]
+                    };
+                });
+                const results = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).createEvents(events);
+                let errors = results.filter((result)=>{
+                    if (result?.success) {
+                        (0, $8a7a24ac08dbc187$export$df987b50509121ea)(result.filename);
+                        return false;
+                    }
+                    return true;
+                });
+                if (errors.length > 0) {
+                    reportError({
+                        code: "CRE_EV_1",
+                        error: "failed to create assets"
+                    });
+                    throw new Error("some media not saved");
+                }
+                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).release();
+                return results;
+            } catch (error) {
+                reportError({
+                    code: "CRE_EV_1",
+                    error: "failed to create assets"
+                });
+                console.log(error);
+                throw error;
+            }
+        }
+    });
+    const reportError = (0, $8dfcca373a03b9e8$export$5a5695b638d078e7)();
     const isMedium = window.matchMedia("(min-width: 768px)").matches;
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $9277d94be7423d29$export$56d72fe406945300), {
         type: isMedium ? "dialog" : "sheet",
-        showClose: !sent,
+        showClose: !sendMutation.isSuccess,
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $9277d94be7423d29$export$e943710ec76a9465), {
-            open: sent ? true : state.isOpen,
-            onOpenChange: sent ? ()=>{} : state.setOpen,
+            open: sendMutation.isSuccess ? true : state.isOpen,
+            onOpenChange: sendMutation.isSuccess ? ()=>{} : state.setOpen,
             children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $9277d94be7423d29$export$4cf67c05c32f37ce), {
                 className: "w-full max-h-[90vh] overflow-auto",
                 children: [
@@ -12675,7 +12828,7 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                         children: [
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $9277d94be7423d29$export$5e9fc1357420b7eb), {
                                 className: "text-left flex items-center gap-2",
-                                children: sent ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                                children: sendMutation.isSuccess ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
                                     children: [
                                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.CheckCircleIcon), {
                                             size: 18,
@@ -12690,7 +12843,7 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                                     count: assets.length
                                 })
                             }),
-                            sent && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $9277d94be7423d29$export$51c201eb88940e0f), {
+                            sendMutation.isSuccess && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $9277d94be7423d29$export$51c201eb88940e0f), {
                                 children: t("recorder.clipSubmissionDescription")
                             })
                         ]
@@ -12700,8 +12853,8 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                         children: [
                             assets.map((asset)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ed315b68f9410130$export$d70ec5859ea7c9bc), {
                                     asset: asset,
-                                    canRemove: !sent
-                                }, asset.id)),
+                                    canRemove: !sendMutation.isSuccess
+                                }, asset.filename)),
                             incomingAsset && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
                                 className: "flex items-center justify-center p-2 border border-gray-200 rounded-lg",
                                 children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SpinnerIcon), {
@@ -12709,10 +12862,10 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                                     className: "text-blue-700 animate-spin"
                                 })
                             }),
-                            !sent && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
                                 className: "mt-1",
                                 variant: "secondary",
-                                onClick: state.close,
+                                onClick: sendMutation.isSuccess ? ()=>window.location.reload() : state.close,
                                 children: [
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.PlusCircleIcon), {
                                         size: 18
@@ -12723,14 +12876,16 @@ const $e399416dd32d3252$export$c01bb29adf88f117 = ({ state: state })=>{
                             })
                         ]
                     }),
-                    !sent && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
+                    !sendMutation.isSuccess && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
                         className: "w-full",
                         onClick: ()=>{
-                            setSent(true);
-                            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).release();
+                            sendMutation.mutate();
                         },
                         children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Send3Icon), {
+                            sendMutation.isPending ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SpinnerIcon), {
+                                size: 24,
+                                className: "text-blue-700 animate-spin"
+                            }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Send3Icon), {
                                 size: 18,
                                 className: "text-white"
                             }),
@@ -12913,9 +13068,9 @@ const $e86e3e83467d5bba$export$f9da3144ae2525a3 = ()=>{
             openAssetsModal();
             try {
                 const image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
-                const { url: url, assetId: assetId } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(image);
+                const { url: url, filename: filename } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(image);
                 addAsset({
-                    id: assetId,
+                    filename: filename,
                     mode: "photo",
                     url: url,
                     thumbnailUrl: url,
@@ -13248,12 +13403,12 @@ const $8add04fa81adf378$export$b916fa2db97921a4 = ({ state: state, flow: flow, c
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogContent), {
             className: "w-[334px] md:w-[334px] rounded-xl max-h-screen overflow-y-auto",
             children: [
-                flow.steps?.[0]?.image_url ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                flow.steps?.[0]?.config?.image_url ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
                     className: "relative rounded-xl",
                     children: [
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
                             className: "w-full h-[200px] object-cover rounded-[inherit]",
-                            src: flow.steps?.[0]?.image_url,
+                            src: flow.steps?.[0]?.config?.image_url,
                             alt: ""
                         }),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
@@ -13302,7 +13457,7 @@ const $8add04fa81adf378$export$b916fa2db97921a4 = ({ state: state, flow: flow, c
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
                     className: "text-sm text-gray-700 whitespace-pre-line",
-                    children: flow.steps?.[0]?.translation?.description || flow.steps?.[0]?.description
+                    children: flow.steps?.[0]?.translation?.description || flow.steps?.[0]?.config?.description
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogFooter), {
                     children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
@@ -13430,6 +13585,7 @@ const $ae4a316f3f6b930e$export$54c6bcb39df9c9b9 = ({ state: state, flow: flow })
 
 
 
+
 const $3753c01d669182c5$var$browser = (0, ($parcel$interopDefault($jQDcL$bowser))).parse(window.navigator.userAgent);
 const $3753c01d669182c5$export$336a011955157f9a = ()=>{
     const { clientInitResult: clientInitResult, recorderOptions: recorderOptions } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
@@ -13440,10 +13596,10 @@ const $3753c01d669182c5$export$336a011955157f9a = ()=>{
     const videoRef = (0, $jQDcL$react.useRef)(null);
     const assetsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
     const flowV0ModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
-        defaultOpen: Boolean(clientInitResult.flowV0)
+        defaultOpen: Boolean(clientInitResult.flowV0 && !clientInitResult.flow)
     });
     const flowModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
-        defaultOpen: clientInitResult.flow && !clientInitResult.flowV0
+        defaultOpen: Boolean(clientInitResult.flow)
     });
     const switchToMobileModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
         defaultOpen: $3753c01d669182c5$var$browser.platform.type === "desktop" && !clientInitResult.flow && !clientInitResult.flowV0
@@ -13453,16 +13609,31 @@ const $3753c01d669182c5$export$336a011955157f9a = ()=>{
     const devicesState = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getDevicesState();
     const hasVideo = devicesState.camera.enabled || devicesState.screenshare.enabled;
     const addAsset = (0, $jQDcL$react.useCallback)((asset)=>{
+        (0, $8a7a24ac08dbc187$export$cfdbe7fcc2578443)(asset);
         setAssets((currentAssets)=>[
                 ...currentAssets,
                 asset
             ]);
         setIncomingAsset(null);
     }, []);
-    const removeAsset = async (assetId)=>{
+    const storedAssets = (0, $8a7a24ac08dbc187$export$931d641a2a152cf)();
+    (0, $jQDcL$react.useEffect)(()=>{
+        storedAssets.data?.forEach((storedAsset)=>{
+            try {
+                setAssets((currentAssets)=>[
+                        ...currentAssets,
+                        storedAsset
+                    ]);
+            } catch (error) {}
+        });
+    }, [
+        storedAssets.data
+    ]);
+    const removeAsset = async (filename)=>{
         try {
-            await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).deleteCapture(assetId);
-            setAssets((currentAssets)=>currentAssets.filter((asset)=>asset.id !== assetId));
+            (0, $8a7a24ac08dbc187$export$df987b50509121ea)(filename);
+            await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).deleteAsset(filename);
+            setAssets((currentAssets)=>currentAssets.filter((asset)=>asset.filename !== filename));
         } catch (error) {
             reportError({
                 code: "DEL_CAP_1",
@@ -13471,17 +13642,26 @@ const $3753c01d669182c5$export$336a011955157f9a = ()=>{
         }
     };
     (0, $jQDcL$react.useEffect)(()=>{
-        const onRecordStopped = (event)=>{
-            const { url: url, assetId: assetId } = event.detail;
+        const onRecordStopped = async (event)=>{
             setIsRecording(false);
-            if (incomingAsset) {
+            const { filename: filename, durationMs: durationMs, sizeInBytes: sizeInBytes, success: success } = event.detail;
+            const { url: url } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).readAsset(filename);
+            const durationSec = durationMs ? Math.round(durationMs / 1000) : undefined;
+            console.log("onRecordStopped", `size: ${sizeInBytes} bytes`, `duration: ${durationSec} sec`);
+            if (!success || sizeInBytes === 0) {
+                setIncomingAsset(null);
+                reportError({
+                    code: "REC_4",
+                    error: "error in the recording chain"
+                });
+            } else if (incomingAsset) {
                 const averageAudioLevel = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).audioLevel?.stopAverageAnalysis();
                 addAsset({
-                    id: assetId,
+                    filename: filename,
                     mode: incomingAsset.mode,
                     url: url,
                     thumbnailUrl: incomingAsset.thumbnailUrl,
-                    duration: Math.round((Date.now() - incomingAsset.createdAt) / 1000),
+                    duration: durationSec,
                     averageAudioLevel: averageAudioLevel || 0,
                     createdAt: incomingAsset.createdAt
                 });
@@ -13493,6 +13673,7 @@ const $3753c01d669182c5$export$336a011955157f9a = ()=>{
         };
     }, [
         addAsset,
+        reportError,
         incomingAsset
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
@@ -13607,7 +13788,6 @@ const $7ce296d839195d38$export$669f6ea7d267feaf = ()=>{
 
 
 
-
 const $4b42d15ba6792d99$export$8d6498a96ae0e73f = ({ className: className, type: type, state: state, onClick: onClick })=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
     const iconEl = type === "camera" ? state === "on" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VideoRecorderIcon), {}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VideoRecorderOffIcon), {}) : state === "on" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Microphone1Icon), {}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.MicrophoneOff1Icon), {});
@@ -13874,9 +14054,11 @@ const $317aa81f07421dfd$var$GreetingView = ()=>{
             name: ""
         }
     });
-    const publicPage = (0, $jQDcL$reactquery.useQuery)([
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token
-    ], ()=>(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getPublicPage((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token || ""), {
+    const publicPage = (0, $jQDcL$tanstackreactquery.useQuery)({
+        queryKey: [
+            "public-page"
+        ],
+        queryFn: ()=>(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getPublicPage((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token || ""),
         enabled: Boolean((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token),
         staleTime: Infinity
     });
@@ -14328,8 +14510,8 @@ const $151f85d85248cda3$var$Bold = ({ children: children })=>/*#__PURE__*/ (0, $
     });
 const $151f85d85248cda3$export$ed71079a84f20635 = ()=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
-    const queryClient = (0, $jQDcL$reactquery.useQueryClient)();
-    const waitingRequests = (0, $jQDcL$reactquery.useQuery)({
+    const queryClient = (0, $jQDcL$tanstackreactquery.useQueryClient)();
+    const waitingRequests = (0, $jQDcL$tanstackreactquery.useQuery)({
         queryKey: [
             "waitingRequests"
         ],
@@ -14337,21 +14519,25 @@ const $151f85d85248cda3$export$ed71079a84f20635 = ()=>{
         retry: false,
         refetchOnWindowFocus: false
     });
-    const acceptWaitingRequest = (0, $jQDcL$reactquery.useMutation)({
+    const acceptWaitingRequest = (0, $jQDcL$tanstackreactquery.useMutation)({
         mutationFn: (id)=>(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).acceptAccessRequest(id),
-        onSettled: ()=>queryClient.invalidateQueries([
-                "waitingRequests"
-            ])
+        onSettled: ()=>queryClient.invalidateQueries({
+                queryKey: [
+                    "waitingRequests"
+                ]
+            })
     });
-    const denyWaitingRequest = (0, $jQDcL$reactquery.useMutation)({
+    const denyWaitingRequest = (0, $jQDcL$tanstackreactquery.useMutation)({
         mutationFn: (id)=>(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).denyAccessRequest(id),
-        onSettled: ()=>queryClient.invalidateQueries([
-                "waitingRequests"
-            ])
+        onSettled: ()=>queryClient.invalidateQueries({
+                queryKey: [
+                    "waitingRequests"
+                ]
+            })
     });
     const hasWaitingRequests = (waitingRequests.data?.length || 0) > 0;
     const firstWaitingRequest = waitingRequests.data?.[0];
-    const isProcessingWaitingRequest = acceptWaitingRequest.isLoading || denyWaitingRequest.isLoading;
+    const isProcessingWaitingRequest = acceptWaitingRequest.isPending || denyWaitingRequest.isPending;
     (0, $jQDcL$react.useEffect)(()=>{
         const onAccessRequest = (event)=>{
             queryClient.setQueryData([
@@ -14438,9 +14624,22 @@ const $151f85d85248cda3$export$ed71079a84f20635 = ()=>{
 };
 
 
+
+const $b686c3f1638d755f$export$6bd92120cafe6ad8 = (options = {})=>{
+    return (0, $jQDcL$tanstackreactquery.useQuery)({
+        queryKey: [
+            "dashboard-session"
+        ],
+        queryFn: ()=>fetch(`${"https://app.snapcall.io"}/api/user`, {
+                credentials: "include"
+            }).then((response)=>response.json()),
+        ...options
+    });
+};
+
+
 const $ee8cb448c2c74888$var$currentTheme = (0, $9295e87e6b93e693$export$3bfd0d5209a8006a)();
 const $ee8cb448c2c74888$var$currentLanguage = (0, $393bda1b33846dfc$export$604ba5624273df44)();
-const $ee8cb448c2c74888$var$queryClient = new (0, $jQDcL$reactquery.QueryClient)();
 let $ee8cb448c2c74888$var$timestampCriticalError = -1;
 const $ee8cb448c2c74888$var$endViewStates = [
     "ended",
@@ -14448,8 +14647,9 @@ const $ee8cb448c2c74888$var$endViewStates = [
     "expired",
     "full"
 ];
-const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
+const $ee8cb448c2c74888$var$StreamUI = ({ options: baseOptions })=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
+    const [options, setOptions] = (0, $jQDcL$react.useState)(baseOptions);
     const [selfPeerId, setSelfPeerId] = (0, $jQDcL$react.useState)(undefined);
     const streamUIContainerRef = (0, $jQDcL$react.useRef)(null);
     const videosContainerRef = (0, $jQDcL$react.useRef)(null);
@@ -14481,6 +14681,14 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
     const [recorderOptions, setRecorderOptions] = (0, $jQDcL$react.useState)(options.recorder);
     const [clientInitResult, setClientInitResult] = (0, $jQDcL$react.useState)({});
     const isFirstRender = (0, $67040444b405b263$export$5964c316e853650f)();
+    const dashboardSession = (0, $b686c3f1638d755f$export$6bd92120cafe6ad8)({
+        enabled: !options.disableSessionFetching,
+        staleTime: Infinity,
+        retry: false,
+        refetchOnMount: false,
+        refetchOnReconnect: false,
+        refetchOnWindowFocus: false
+    });
     const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
     const styledTheme = theme === "dark" ? (0, $9295e87e6b93e693$export$3e936a8db52a10a0) : (0, $9295e87e6b93e693$export$f30cb9bc4f736419);
     const onWebcamUpdate = (event)=>{
@@ -14711,102 +14919,131 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
         recorderOptions,
         t
     ]);
+    const initClient = (uiOptions)=>{
+        if (uiOptions.token) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).init(uiOptions.token, {
+            languageCode: uiOptions.language,
+            flowToken: uiOptions.flowToken,
+            recorder: uiOptions.recorder?.enabled,
+            apiKey: uiOptions.apiKey,
+            email: uiOptions.email,
+            profile: uiOptions.profile,
+            authKey: uiOptions.authKey
+        }).catch((err)=>console.error(err));
+        else setStreamState("expired");
+    };
     (0, $jQDcL$react.useEffect)(()=>{
-        if (isFirstRender) {
-            if (options.token) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).init(options.token, {
-                languageCode: options.language,
-                flowToken: options.flowToken,
-                recorder: options.recorder?.enabled,
-                apiKey: options.apiKey,
-                email: options.email,
-                profile: options.profile,
-                authKey: options.authKey
-            }).catch((err)=>console.error(err));
-            else setStreamState("expired");
-        }
+        if (isFirstRender && options.disableSessionFetching) initClient(options);
     }, [
         options,
         isFirstRender
     ]);
-    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactquery.QueryClientProvider), {
-        client: $ee8cb448c2c74888$var$queryClient,
-        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8b39f32976a7698a$export$2e2bcd8739ae039).Provider, {
-            value: {
-                videoRecording: videoRecording,
-                setVideoRecording: setVideoRecording,
-                headless: Boolean(options.headless),
-                plan: plan,
-                permissions: permissions,
-                selfPeerId: selfPeerId,
-                streamUIContainerRef: streamUIContainerRef,
-                videosContainerRef: videosContainerRef,
-                remoteTilesContainerRef: remoteTilesContainerRef,
-                streamState: streamState,
-                setStreamState: setStreamState,
-                isQuickConnectPopupVisible: isQuickConnectPopupVisible,
-                setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible,
-                isSettingsMenuVisible: isSettingsMenuVisible,
-                setIsSettingsMenuVisible: setIsSettingsMenuVisible,
-                isYoutubePopupVisible: isYoutubePopupVisible,
-                setIsYoutubePopupVisible: setIsYoutubePopupVisible,
-                isLinksharePopupVisible: isLinksharePopupVisible,
-                setIsLinksharePopupVisible: setIsLinksharePopupVisible,
-                isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
-                setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
-                isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
-                setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
-                isRecordingStartPopupOpen: isRecordingStartPopupOpen,
-                setRecordingStartPopupOpen: setRecordingStartPopupOpen,
-                theme: theme,
-                setTheme: setTheme,
-                language: language,
-                setLanguage: setLanguage,
-                options: options,
-                profile: profile,
-                muted: muted,
-                streaming: streaming,
-                screensharing: screensharing,
-                isAgent: isAgent,
-                userInteractionTriggered: userInteractionTriggered,
-                orientation: orientation,
-                clientInitResult: clientInitResult,
-                recorderOptions: recorderOptions
-            },
-            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$styledcomponents.ThemeProvider), {
-                theme: styledTheme,
-                children: [
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e3bb2c5d0e5b45b5$export$20f257fc407da7a3), {}),
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e41262de25602ed2$export$2e2bcd8739ae039), {}),
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6), {
-                        ref: streamUIContainerRef,
-                        children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e66cc5db58913155$export$2e2bcd8739ae039), {}),
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Toaster), {
-                                duration: 3000,
-                                className: "gap-2"
-                            }),
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5dcd9e6925c7037c$export$2e2bcd8739ae039), {}),
-                            isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $77862aeb490f36a3$export$2e2bcd8739ae039), {
-                                close: ()=>{
-                                    setUserInteractionTriggered(true);
-                                    setBlockedDevicesPopupOpen(false);
-                                }
-                            }),
-                            streamState === "loading" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7ce296d839195d38$export$669f6ea7d267feaf), {}) : streamState === "greeting" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $317aa81f07421dfd$export$2e2bcd8739ae039), {}) : streamState === "recorder" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3753c01d669182c5$export$336a011955157f9a), {}) : streamState === "streaming" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $3f6e908c45fcc5b3$export$74636703cfe1eecf), {
-                                children: [
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $151f85d85248cda3$export$ed71079a84f20635), {}),
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e1930b467e7d8845$export$2e2bcd8739ae039), {}),
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $88b23a8428e67b66$export$2e2bcd8739ae039), {}),
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a21b2aa064cb6c32$export$2e2bcd8739ae039), {}),
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f509eaff0d9c05a$export$2e2bcd8739ae039), {})
-                                ]
-                            }) : $ee8cb448c2c74888$var$endViewStates.includes(streamState) ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3d1bfd8f074b99b1$export$2e2bcd8739ae039), {
-                                state: streamState
-                            }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7ce296d839195d38$export$669f6ea7d267feaf), {})
-                        ]
-                    })
-                ]
-            })
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (dashboardSession.isSuccess || dashboardSession.isError) {
+            const newOptions = {
+                ...options,
+                apiKey: dashboardSession.data?.apiKey || options.apiKey,
+                controls: {
+                    ...options.controls,
+                    camera: {
+                        ...options.controls?.camera,
+                        enabled: dashboardSession.data?.settings?.stream?.cameraEnabled ?? options.controls?.camera?.enabled
+                    },
+                    microphone: {
+                        ...options.controls?.microphone,
+                        enabled: dashboardSession.data?.settings?.stream?.microphoneEnabled ?? options.controls?.microphone?.enabled
+                    }
+                },
+                profile: {
+                    name: dashboardSession.data?.name || options.profile?.name,
+                    image: dashboardSession.data?.settings?.avatar_url || options.profile?.image
+                }
+            };
+            setOptions(newOptions);
+            if (dashboardSession.data?.settings?.language) setLanguage(dashboardSession.data.settings.language);
+            initClient(newOptions);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        dashboardSession.data,
+        dashboardSession.isSuccess,
+        dashboardSession.isError
+    ]);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8b39f32976a7698a$export$2e2bcd8739ae039).Provider, {
+        value: {
+            videoRecording: videoRecording,
+            setVideoRecording: setVideoRecording,
+            headless: Boolean(options.headless),
+            plan: plan,
+            permissions: permissions,
+            selfPeerId: selfPeerId,
+            streamUIContainerRef: streamUIContainerRef,
+            videosContainerRef: videosContainerRef,
+            remoteTilesContainerRef: remoteTilesContainerRef,
+            streamState: streamState,
+            setStreamState: setStreamState,
+            isQuickConnectPopupVisible: isQuickConnectPopupVisible,
+            setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible,
+            isSettingsMenuVisible: isSettingsMenuVisible,
+            setIsSettingsMenuVisible: setIsSettingsMenuVisible,
+            isYoutubePopupVisible: isYoutubePopupVisible,
+            setIsYoutubePopupVisible: setIsYoutubePopupVisible,
+            isLinksharePopupVisible: isLinksharePopupVisible,
+            setIsLinksharePopupVisible: setIsLinksharePopupVisible,
+            isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
+            setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
+            isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
+            setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
+            isRecordingStartPopupOpen: isRecordingStartPopupOpen,
+            setRecordingStartPopupOpen: setRecordingStartPopupOpen,
+            theme: theme,
+            setTheme: setTheme,
+            language: language,
+            setLanguage: setLanguage,
+            options: options,
+            profile: profile,
+            muted: muted,
+            streaming: streaming,
+            screensharing: screensharing,
+            isAgent: isAgent,
+            userInteractionTriggered: userInteractionTriggered,
+            orientation: orientation,
+            clientInitResult: clientInitResult,
+            recorderOptions: recorderOptions
+        },
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$styledcomponents.ThemeProvider), {
+            theme: styledTheme,
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e3bb2c5d0e5b45b5$export$20f257fc407da7a3), {}),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e41262de25602ed2$export$2e2bcd8739ae039), {}),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6), {
+                    ref: streamUIContainerRef,
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e66cc5db58913155$export$2e2bcd8739ae039), {}),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Toaster), {
+                            duration: 3000,
+                            className: "gap-2"
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5dcd9e6925c7037c$export$2e2bcd8739ae039), {}),
+                        isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $77862aeb490f36a3$export$2e2bcd8739ae039), {
+                            close: ()=>{
+                                setUserInteractionTriggered(true);
+                                setBlockedDevicesPopupOpen(false);
+                            }
+                        }),
+                        streamState === "loading" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7ce296d839195d38$export$669f6ea7d267feaf), {}) : streamState === "greeting" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $317aa81f07421dfd$export$2e2bcd8739ae039), {}) : streamState === "recorder" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3753c01d669182c5$export$336a011955157f9a), {}) : streamState === "streaming" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $3f6e908c45fcc5b3$export$74636703cfe1eecf), {
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $151f85d85248cda3$export$ed71079a84f20635), {}),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e1930b467e7d8845$export$2e2bcd8739ae039), {}),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $88b23a8428e67b66$export$2e2bcd8739ae039), {}),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a21b2aa064cb6c32$export$2e2bcd8739ae039), {}),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f509eaff0d9c05a$export$2e2bcd8739ae039), {})
+                            ]
+                        }) : $ee8cb448c2c74888$var$endViewStates.includes(streamState) ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3d1bfd8f074b99b1$export$2e2bcd8739ae039), {
+                            state: streamState
+                        }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7ce296d839195d38$export$669f6ea7d267feaf), {})
+                    ]
+                })
+            ]
         })
     });
 };
@@ -14828,6 +15065,7 @@ $9833f4335ab609cd$exports = "*, :before, :after {\n  box-sizing: border-box;\n
 
 
 const $e68207026aca356b$var$browser = (0, ($parcel$interopDefault($jQDcL$bowser))).parse(window.navigator.userAgent);
+const $e68207026aca356b$var$queryClient = new (0, $jQDcL$tanstackreactquery.QueryClient)();
 const $e68207026aca356b$var$defaultOptions = {
     headless: false,
     recorder: {
@@ -14924,8 +15162,11 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
                     rel: "stylesheet",
                     href: "https://rsms.me/inter/inter.css"
                 }),
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
-                    options: mergedOptions
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$tanstackreactquery.QueryClientProvider), {
+                    client: $e68207026aca356b$var$queryClient,
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
+                        options: mergedOptions
+                    })
                 })
             ]
         }));