🐛 (js) Improve session remember behavior

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

apps/builder/public/templates/customer-support.json

@@ -441,7 +441,6 @@
       "hostAvatar": {
         "isEnabled": true
       },
-      "guestAvatar": { "isEnabled": false },
       "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
       "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
     },
@@ -451,7 +450,13 @@
     }
   },
   "settings": {
-    "general": { "isBrandingEnabled": true },
+    "general": {
+      "isBrandingEnabled": true,
+      "isInputPrefillEnabled": true,
+      "isResultSavingEnabled": true,
+      "isHideQueryParamsEnabled": true,
+      "isNewResultOnRefreshEnabled": true
+    },
     "metadata": {
       "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
     },

apps/builder/public/templates/digital-product-payment.json

@@ -467,7 +467,6 @@
       "hostAvatar": {
         "isEnabled": true
       },
-      "guestAvatar": { "isEnabled": false },
       "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
       "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
     },
@@ -480,6 +479,7 @@
     "general": {
       "isBrandingEnabled": true,
       "isInputPrefillEnabled": true,
+      "isResultSavingEnabled": true,
       "isHideQueryParamsEnabled": true,
       "isNewResultOnRefreshEnabled": true
     },

apps/builder/public/templates/faq.json

@@ -558,6 +558,7 @@
     "general": {
       "isBrandingEnabled": true,
       "isInputPrefillEnabled": true,
+      "isResultSavingEnabled": true,
       "isHideQueryParamsEnabled": true,
       "isNewResultOnRefreshEnabled": true
     },

apps/builder/public/templates/lead-gen.json

@@ -336,19 +336,25 @@
         "placeholderColor": "#9095A0"
       },
       "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
-      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
-      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" },
       "hostAvatar": {
         "isEnabled": true
-      }
+      },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
     },
     "general": {
       "font": "Open Sans",
       "background": { "type": "Color", "content": "#ffffff" }
     }
   },
   "settings": {
-    "general": { "isBrandingEnabled": true },
+    "general": {
+      "isBrandingEnabled": true,
+      "isInputPrefillEnabled": true,
+      "isResultSavingEnabled": true,
+      "isHideQueryParamsEnabled": true,
+      "isNewResultOnRefreshEnabled": true
+    },
     "metadata": {
       "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
     },

apps/builder/public/templates/lead-scoring.json

@@ -790,6 +790,8 @@
     "general": {
       "isBrandingEnabled": true,
       "isInputPrefillEnabled": true,
+      "isResultSavingEnabled": true,
+      "isHideQueryParamsEnabled": true,
       "isNewResultOnRefreshEnabled": true
     },
     "metadata": {

apps/builder/public/templates/onboarding.json

@@ -465,6 +465,8 @@
     "general": {
       "isBrandingEnabled": true,
       "isInputPrefillEnabled": true,
+      "isResultSavingEnabled": true,
+      "isHideQueryParamsEnabled": true,
       "isNewResultOnRefreshEnabled": true
     },
     "metadata": {

apps/builder/public/templates/quiz.json

@@ -959,6 +959,8 @@
     "general": {
       "isBrandingEnabled": true,
       "isInputPrefillEnabled": true,
+      "isResultSavingEnabled": true,
+      "isHideQueryParamsEnabled": true,
       "isNewResultOnRefreshEnabled": true
     },
     "metadata": {

apps/builder/src/features/blocks/integrations/webhook/webhook.spec.ts

@@ -89,7 +89,7 @@ test.describe('Builder', () => {
     await page.click('text=Save in variables')
     await page.click('text=Add an entry >> nth=-1')
     await page.click('input[placeholder="Select the data"]')
-    await page.click('text=data.map(item => item.name)')
+    await page.click('text=data.flatMap(item => item.name)')
   })
 })
 

apps/builder/src/features/editor/providers/TypebotProvider/TypebotProvider.tsx

@@ -235,9 +235,12 @@ export const TypebotProvider = ({
   )
 
   useEffect(() => {
-    Router.events.on('routeChangeStart', () => saveTypebot())
+    const handleSaveTypebot = () => {
+      saveTypebot()
+    }
+    Router.events.on('routeChangeStart', handleSaveTypebot)
     return () => {
-      Router.events.off('routeChangeStart', () => saveTypebot())
+      Router.events.off('routeChangeStart', handleSaveTypebot)
     }
   }, [saveTypebot])
 

apps/builder/src/features/settings/components/GeneralSettingsForm.tsx

@@ -88,7 +88,7 @@ export const GeneralSettingsForm = ({
             : true
         }
         onCheckChange={handleNewResultOnRefreshChange}
-        moreInfoContent="If the user refreshes the page, its existing results will be overwritten. Disable this if you want to create a new results every time the user refreshes the page."
+        moreInfoContent="If the user refreshes the page or opens the typebot again during the same session, his previous variables will be prefilled and his new answers will override the previous ones."
       />
       <SwitchWithLabel
         label="Hide query params on bot start"

apps/viewer/src/features/chat/api/procedures/sendMessageProcedure.ts

@@ -1,8 +1,9 @@
 import { checkChatsUsage } from '@/features/usage'
 import {
-  parsePrefilledVariables,
+  prefillVariables,
   deepParseVariable,
   parseVariables,
+  injectVariablesFromExistingResult,
 } from '@/features/variables'
 import prisma from '@/lib/prisma'
 import { publicProcedure } from '@/utils/server/trpc'
@@ -20,14 +21,15 @@ import {
   Theme,
   Typebot,
   Variable,
+  VariableWithValue,
 } from 'models'
 import {
   continueBotFlow,
   getSession,
   setResultAsCompleted,
   startBotFlow,
 } from '../utils'
-import { env, omit } from 'utils'
+import { env, isDefined, omit } from 'utils'
 
 export const sendMessageProcedure = publicProcedure
   .meta({
@@ -109,19 +111,24 @@ const startSession = async (startParams?: StartParams, userId?: string) => {
 
   const typebot = await getTypebot(startParams, userId)
 
-  const startVariables = startParams.prefilledVariables
-    ? parsePrefilledVariables(typebot.variables, startParams.prefilledVariables)
+  const prefilledVariables = startParams.prefilledVariables
+    ? prefillVariables(typebot.variables, startParams.prefilledVariables)
     : typebot.variables
 
   const result = await getResult({
     ...startParams,
     isPreview,
     typebot: typebot.id,
-    startVariables,
+    prefilledVariables,
     isNewResultOnRefreshEnabled:
       typebot.settings.general.isNewResultOnRefreshEnabled ?? false,
   })
 
+  const startVariables =
+    result && result.variables.length > 0
+      ? injectVariablesFromExistingResult(prefilledVariables, result.variables)
+      : prefilledVariables
+
   const initialState: SessionState = {
     typebot: {
       id: typebot.id,
@@ -293,35 +300,64 @@ const getResult = async ({
   typebot,
   isPreview,
   resultId,
-  startVariables,
+  prefilledVariables,
   isNewResultOnRefreshEnabled,
 }: Pick<StartParams, 'isPreview' | 'resultId' | 'typebot'> & {
-  startVariables: Variable[]
+  prefilledVariables: Variable[]
   isNewResultOnRefreshEnabled: boolean
 }) => {
-  if (isPreview || typeof typebot !== 'string') return undefined
-  const data = {
-    isCompleted: false,
-    typebotId: typebot,
-    variables: startVariables.filter((variable) => variable.value),
-  } satisfies Prisma.ResultUncheckedCreateInput
+  if (isPreview || typeof typebot !== 'string') return
   const select = {
     id: true,
     variables: true,
     hasStarted: true,
   } satisfies Prisma.ResultSelect
-  return (
+
+  const existingResult =
     resultId && !isNewResultOnRefreshEnabled
-      ? await prisma.result.update({
+      ? ((await prisma.result.findFirst({
           where: { id: resultId },
-          data,
-          select,
-        })
-      : await prisma.result.create({
-          data,
           select,
-        })
-  ) as Pick<Result, 'id' | 'variables' | 'hasStarted'>
+        })) as Pick<Result, 'id' | 'variables' | 'hasStarted'>)
+      : undefined
+
+  if (existingResult) {
+    const prefilledVariableWithValue = prefilledVariables.filter(
+      (prefilledVariable) => isDefined(prefilledVariable.value)
+    )
+    const updatedResult = {
+      variables: prefilledVariableWithValue.concat(
+        existingResult.variables.filter(
+          (resultVariable) =>
+            isDefined(resultVariable.value) &&
+            !prefilledVariableWithValue.some(
+              (prefilledVariable) =>
+                prefilledVariable.name === resultVariable.name
+            )
+        )
+      ) as VariableWithValue[],
+    }
+    await prisma.result.updateMany({
+      where: { id: existingResult.id },
+      data: updatedResult,
+    })
+    return {
+      id: existingResult.id,
+      variables: updatedResult.variables,
+      hasStarted: existingResult.hasStarted,
+    }
+  } else {
+    return (await prisma.result.create({
+      data: {
+        isCompleted: false,
+        typebotId: typebot,
+        variables: prefilledVariables.filter((variable) =>
+          isDefined(variable.value)
+        ),
+      },
+      select,
+    })) as Pick<Result, 'id' | 'variables' | 'hasStarted'>
+  }
 }
 
 const parseDynamicThemeInState = (theme: Theme) => {

apps/viewer/src/features/variables/utils.ts

@@ -1,5 +1,6 @@
 import prisma from '@/lib/prisma'
 import {
+  Result,
   SessionState,
   StartParams,
   Typebot,
@@ -119,7 +120,7 @@ export const deepParseVariable =
       return { ...newObj, [key]: currentValue }
     }, {} as T)
 
-export const parsePrefilledVariables = (
+export const prefillVariables = (
   variables: Typebot['variables'],
   prefilledVariables: NonNullable<StartParams['prefilledVariables']>
 ): Variable[] =>
@@ -132,6 +133,22 @@ export const parsePrefilledVariables = (
     }
   })
 
+export const injectVariablesFromExistingResult = (
+  variables: Typebot['variables'],
+  resultVariables: Result['variables']
+): Variable[] =>
+  variables.map((variable) => {
+    const resultVariable = resultVariables.find(
+      (resultVariable) =>
+        resultVariable.name === variable.name && !variable.value
+    )
+    if (!resultVariable) return variable
+    return {
+      ...variable,
+      value: resultVariable.value,
+    }
+  })
+
 export const updateVariables =
   (state: SessionState) =>
   async (newVariables: VariableWithUnknowValue[]): Promise<SessionState> => ({

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 */
   }

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",