🐛 (chat) Make sure objects are deeply parsed with variables value

apps/viewer/src/features/blocks/integrations/googleAnalytics/api/utils/executeGoogleAnalyticsBlock.ts

@@ -1,5 +1,5 @@
 import { ExecuteIntegrationResponse } from '@/features/chat'
-import { parseVariablesInObject } from '@/features/variables'
+import { deepParseVariable } from '@/features/variables'
 import { GoogleAnalyticsBlock, SessionState } from 'models'
 
 export const executeGoogleAnalyticsBlock = (
@@ -8,6 +8,6 @@ export const executeGoogleAnalyticsBlock = (
 ): ExecuteIntegrationResponse => ({
   outgoingEdgeId: block.outgoingEdgeId,
   integrations: {
-    googleAnalytics: parseVariablesInObject(block.options, variables),
+    googleAnalytics: deepParseVariable(variables)(block.options),
   },
 })

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

@@ -1,10 +1,14 @@
 import { checkChatsUsage } from '@/features/usage'
-import { parsePrefilledVariables } from '@/features/variables'
+import {
+  parsePrefilledVariables,
+  deepParseVariable,
+} from '@/features/variables'
 import prisma from '@/lib/prisma'
 import { publicProcedure } from '@/utils/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { Prisma } from 'db'
 import {
+  ChatReply,
   chatReplySchema,
   ChatSession,
   PublicTypebot,
@@ -192,13 +196,13 @@ const startSession = async (startParams?: StartParams) => {
     resultId: result?.id,
     sessionId: session.id,
     typebot: {
-      theme: typebot.theme,
-      settings: typebot.settings,
+      settings: deepParseVariable(typebot.variables)(typebot.settings),
+      theme: deepParseVariable(typebot.variables)(typebot.theme),
     },
     messages,
     input,
     logic,
-  }
+  } satisfies ChatReply
 }
 
 const getResult = async ({

apps/viewer/src/features/chat/api/utils/executeGroup.ts

@@ -1,8 +1,5 @@
-import { parseVariables } from '@/features/variables'
+import { deepParseVariable } from '@/features/variables'
 import {
-  BubbleBlock,
-  BubbleBlockType,
-  ChatMessage,
   ChatReply,
   Group,
   InputBlock,
@@ -38,20 +35,22 @@ export const executeGroup =
       nextEdgeId = block.outgoingEdgeId
 
       if (isBubbleBlock(block)) {
-        messages.push(parseBubbleBlockContent(newSessionState)(block))
+        messages.push(
+          deepParseVariable(newSessionState.typebot.variables)(block)
+        )
         continue
       }
 
       if (isInputBlock(block))
         return {
           messages,
-          input: {
+          input: deepParseVariable(newSessionState.typebot.variables)({
             ...block,
             runtimeOptions: await computeRuntimeOptions(newSessionState)(block),
             prefilledValue: getPrefilledInputValue(
               newSessionState.typebot.variables
             )(block),
-          },
+          }),
           newSessionState: {
             ...newSessionState,
             currentBlock: {
@@ -102,34 +101,6 @@ const computeRuntimeOptions =
     }
   }
 
-const parseBubbleBlockContent =
-  ({ typebot: { variables } }: SessionState) =>
-  (block: BubbleBlock): ChatMessage => {
-    switch (block.type) {
-      case BubbleBlockType.TEXT: {
-        const plainText = parseVariables(variables)(block.content.plainText)
-        const html = parseVariables(variables)(block.content.html)
-        return { type: block.type, content: { plainText, html } }
-      }
-      case BubbleBlockType.IMAGE: {
-        const url = parseVariables(variables)(block.content.url)
-        return { type: block.type, content: { ...block.content, url } }
-      }
-      case BubbleBlockType.VIDEO: {
-        const url = parseVariables(variables)(block.content.url)
-        return { type: block.type, content: { ...block.content, url } }
-      }
-      case BubbleBlockType.AUDIO: {
-        const url = parseVariables(variables)(block.content.url)
-        return { type: block.type, content: { ...block.content, url } }
-      }
-      case BubbleBlockType.EMBED: {
-        const url = parseVariables(variables)(block.content.url)
-        return { type: block.type, content: { ...block.content, url } }
-      }
-    }
-  }
-
 const getPrefilledInputValue =
   (variables: SessionState['typebot']['variables']) => (block: InputBlock) => {
     return (

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

@@ -86,20 +86,31 @@ const jsonParse = (str: string) =>
     .replace(/"/g, `\\"`)
     .replace(/\\[^n"]/g, `\\\\ `)
 
-export const parseVariablesInObject = (
-  object: { [key: string]: string | number },
-  variables: Variable[]
-) =>
-  Object.keys(object).reduce((newObj, key) => {
-    const currentValue = object[key]
-    return {
-      ...newObj,
-      [key]:
-        typeof currentValue === 'string'
-          ? parseVariables(variables)(currentValue)
-          : currentValue,
-    }
-  }, {})
+export const deepParseVariable =
+  (variables: Variable[]) =>
+  <T extends Record<string, unknown>>(object: T): T =>
+    Object.keys(object).reduce<T>((newObj, key) => {
+      const currentValue = object[key]
+
+      if (typeof currentValue === 'string')
+        return { ...newObj, [key]: parseVariables(variables)(currentValue) }
+
+      if (currentValue instanceof Object && currentValue.constructor === Object)
+        return {
+          ...newObj,
+          [key]: deepParseVariable(variables)(
+            currentValue as Record<string, unknown>
+          ),
+        }
+
+      if (currentValue instanceof Array)
+        return {
+          ...newObj,
+          [key]: currentValue.map(deepParseVariable(variables)),
+        }
+
+      return { ...newObj, [key]: currentValue }
+    }, {} as T)
 
 export const parsePrefilledVariables = (
   variables: Typebot['variables'],

packages/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx

@@ -61,7 +61,7 @@ export const ChoiceForm = (props: Props) => {
               >
                 {item.content}
               </button>
-              {props.inputIndex === 0 && (
+              {props.inputIndex === 0 && props.block.items.length === 1 && (
                 <span class="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">
                   <span class="animate-ping absolute inline-flex h-full w-full rounded-full brightness-225 opacity-75" />
                   <span class="relative inline-flex rounded-full h-3 w-3 brightness-200" />