🐛 (js) Improve session remember behavior

Make sure it correctly retrieves saved variables and doesn't clash with other embedded typebots

packages/js/package.json

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

packages/js/src/components/Bot.tsx

@@ -43,13 +43,15 @@ export const Bot = (props: BotProps & { class?: string }) => {
     urlParams.forEach((value, key) => {
       prefilledVariables[key] = value
     })
+    const typebotIdFromProps =
+      typeof props.typebot === 'string' ? props.typebot : undefined
     const { data, error } = await getInitialChatReplyQuery({
       typebot: props.typebot,
       apiHost: props.apiHost,
       isPreview: props.isPreview ?? false,
       resultId: isNotEmpty(props.resultId)
         ? props.resultId
-        : getExistingResultIdFromSession(),
+        : getExistingResultIdFromSession(typebotIdFromProps),
       startGroupId: props.startGroupId,
       prefilledVariables: {
         ...prefilledVariables,
@@ -66,7 +68,8 @@ export const Bot = (props: BotProps & { class?: string }) => {
 
     if (!data) return setError(new Error("Error! Couldn't initiate the chat."))
 
-    if (data.resultId) setResultInSession(data.resultId)
+    if (data.resultId && typebotIdFromProps)
+      setResultInSession(typebotIdFromProps, data.resultId)
     setInitialChatReply(data)
     setCustomCss(data.typebot.theme.customCss ?? '')
 

packages/js/src/utils/sessionStorage.ts

@@ -1,16 +1,19 @@
 const sessionStorageKey = 'resultId'
 
-export const getExistingResultIdFromSession = () => {
+export const getExistingResultIdFromSession = (typebotId?: string) => {
+  if (!typebotId) return
   try {
-    return sessionStorage.getItem(sessionStorageKey) ?? undefined
+    return (
+      sessionStorage.getItem(`${sessionStorageKey}-${typebotId}`) ?? undefined
+    )
   } catch {
     /* empty */
   }
 }
 
-export const setResultInSession = (resultId: string) => {
+export const setResultInSession = (typebotId: string, resultId: string) => {
   try {
-    return sessionStorage.setItem(sessionStorageKey, resultId)
+    return sessionStorage.setItem(`${sessionStorageKey}-${typebotId}`, resultId)
   } catch {
     /* empty */
   }