🐛 (webhook) Fix variable list parsing in custom body

Closes #687

apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx

@@ -186,9 +186,7 @@ export const WebhookAdvancedConfigForm = ({
             </AccordionButton>
             <AccordionPanel pt="4">
               <TableList<VariableForTest>
-                initialItems={
-                  options?.variablesForTest ?? { byId: {}, allIds: [] }
-                }
+                initialItems={options?.variablesForTest ?? []}
                 onItemsChange={updateVariablesForTest}
                 Item={VariableForTestInputs}
                 addLabel="Add an entry"

apps/builder/src/features/blocks/integrations/webhook/helpers/convertVariablesForTestToVariables.ts

@@ -1,3 +1,5 @@
+import { safeStringify } from '@typebot.io/lib/safeStringify'
+import { isDefined } from '@typebot.io/lib/utils'
 import { Variable, VariableForTest } from '@typebot.io/schemas'
 
 export const convertVariablesForTestToVariables = (
@@ -13,7 +15,19 @@ export const convertVariablesForTestToVariables = (
         const variable = variables.find(
           (v) => v.id === variableForTest.variableId
         ) as Variable
-        return { ...variable, value: variableForTest.value }
+        return { ...variable, value: parseVariableValue(variableForTest.value) }
       }, {}),
   ]
 }
+
+const parseVariableValue = (value: string | undefined): string | string[] => {
+  if (!value) return ''
+  try {
+    const parsedValue = JSON.parse(value)
+    if (Array.isArray(parsedValue))
+      return parsedValue.map(safeStringify).filter(isDefined)
+    return safeStringify(parsedValue) ?? value
+  } catch (error) {
+    return value
+  }
+}

apps/viewer/src/features/chat/helpers/continueBotFlow.ts

@@ -55,10 +55,10 @@ export const continueBotFlow =
       const existingVariable = state.typebot.variables.find(
         byId(block.options.variableId)
       )
-      if (existingVariable) {
+      if (existingVariable && reply) {
         const newVariable = {
           ...existingVariable,
-          value: reply,
+          value: safeJsonParse(reply),
         }
         newSessionState = updateVariables(state)([newVariable])
       }
@@ -318,3 +318,11 @@ export const isReplyValid = (inputValue: string, block: Block): boolean => {
 
 export const canSkip = (inputType: InputBlockType) =>
   inputType === InputBlockType.FILE
+
+export const safeJsonParse = (value: string): unknown => {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return value
+  }
+}

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

@@ -1,6 +1,6 @@
 import { isDefined } from '@typebot.io/lib'
 import { Variable, VariableWithValue } from '@typebot.io/schemas'
-import { safeStringify } from './safeStringify'
+import { safeStringify } from '@typebot.io/lib/safeStringify'
 
 export type ParseVariablesOptions = {
   fieldToParse?: 'value' | 'id'
@@ -42,7 +42,9 @@ export const parseVariables =
         if (options.escapeForJson)
           return (
             dollarSign +
-            jsonParse(typeof value !== 'string' ? JSON.stringify(value) : value)
+            (typeof value === 'string'
+              ? jsonParse(value)
+              : JSON.stringify(value))
           )
         const parsedValue =
           dollarSign +

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

@@ -1,5 +1,5 @@
 import { StartParams, Variable } from '@typebot.io/schemas'
-import { safeStringify } from './safeStringify'
+import { safeStringify } from '@typebot.io/lib/safeStringify'
 
 export const prefillVariables = (
   variables: Variable[],

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

@@ -5,7 +5,7 @@ import {
   VariableWithValue,
   Variable,
 } from '@typebot.io/schemas'
-import { safeStringify } from './safeStringify'
+import { safeStringify } from '@typebot.io/lib/safeStringify'
 
 export const updateVariables =
   (state: SessionState) =>

packages/embeds/js/src/features/blocks/logic/setVariable/executeSetVariable.ts

@@ -1,5 +1,5 @@
-import { isNotDefined } from '@typebot.io/lib'
 import type { ScriptToExecute } from '@typebot.io/schemas'
+import { safeStringify } from '@typebot.io/lib/safeStringify'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
@@ -15,23 +15,12 @@ export const executeSetVariable = async ({
     )
     const replyToSend = await func(...args.map((arg) => arg.value))
     return {
-      replyToSend: safeStringify(replyToSend),
+      replyToSend: safeStringify(replyToSend) ?? undefined,
     }
   } catch (err) {
     console.error(err)
     return {
-      replyToSend: safeStringify(content),
+      replyToSend: safeStringify(content) ?? undefined,
     }
   }
 }
-
-export const safeStringify = (val: unknown): string | undefined => {
-  if (isNotDefined(val)) return
-  if (typeof val === 'string') return val
-  try {
-    return JSON.stringify(val)
-  } catch {
-    console.warn('Failed to safely stringify variable value', val)
-    return
-  }
-}

apps/viewer/src/features/variables/safeStringify.ts → packages/lib/safeStringify.ts

@@ -1,4 +1,4 @@
-import { isNotDefined } from '@typebot.io/lib'
+import { isNotDefined } from './utils'
 
 export const safeStringify = (val: unknown): string | null => {
   if (isNotDefined(val)) return null