🐛 (chat) Enable prefilledVariables in preview mode

Also make list values compatible

apps/viewer/src/features/chat/api/startChatPreview.ts

@@ -29,6 +29,7 @@ export const startChatPreview = publicProcedure
         startFrom,
         typebotId,
         typebot: startTypebot,
+        prefilledVariables,
       },
       ctx: { user },
     }) => {
@@ -51,6 +52,7 @@ export const startChatPreview = publicProcedure
           typebotId,
           typebot: startTypebot,
           userId: user?.id,
+          prefilledVariables,
         },
         message,
       })

packages/bot-engine/startSession.ts

@@ -69,10 +69,9 @@ export const startSession = async ({
 > => {
   const typebot = await getTypebot(startParams)
 
-  const prefilledVariables =
+  const prefilledVariables = startParams.prefilledVariables
-    startParams.type === 'live' && startParams.prefilledVariables
+    ? prefillVariables(typebot.variables, startParams.prefilledVariables)
-      ? prefillVariables(typebot.variables, startParams.prefilledVariables)
+    : typebot.variables
-      : typebot.variables
 
   const result = await getResult({
     resultId: startParams.type === 'live' ? startParams.resultId : undefined,

packages/embeds/js/src/queries/startChatQuery.ts

@@ -82,6 +82,7 @@ export async function startChatQuery({
               isStreamEnabled: true,
               startFrom,
               typebot,
+              prefilledVariables,
             } satisfies Omit<StartPreviewChatInput, 'typebotId'>,
             timeout: false,
           }

packages/embeds/react/src/stories/assets/leadGenerationTypebot.ts

@@ -328,9 +328,11 @@ export const leadGenerationTypebot: StartTypebot = {
           id: 'clckrl870000y3b6sxyd24qwc',
           type: BubbleBlockType.TEXT,
           content: {
-            html: '<div>Hi {{Name}}!</div>',
+            html: '<div>Hi {{={{Name}}[0]=}}!</div>',
-            richText: [{ type: 'p', children: [{ text: 'Hi {{Name}}!' }] }],
+            richText: [
-            plainText: 'Hi {{Name}}!',
+              { type: 'p', children: [{ text: 'Hi {{={{Name}}[0]=}}!' }] },
+            ],
+            plainText: 'Hi {{={{Name}}[0]=}}!',
           },
           outgoingEdgeId: 'clckrlwmd00163b6sjlass4p8',
         },
@@ -443,7 +445,7 @@ export const leadGenerationTypebot: StartTypebot = {
     },
   },
   settings: {
-    general: { isBrandingEnabled: true },
+    general: { isBrandingEnabled: true, isInputPrefillEnabled: 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.',

packages/embeds/react/src/stories/bubble.stories.tsx

@@ -39,7 +39,7 @@ export const Default = () => {
         typebot={leadGenerationTypebot}
         apiHost="http://localhost:3001"
         prefilledVariables={{
-          Name: 'John',
+          Name: ['John'],
         }}
         previewMessage={{
           avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',

packages/schemas/features/chat/schema.ts

@@ -238,6 +238,18 @@ export const startPreviewChatInputSchema = z.object({
       'If set, it will override the typebot that is used to start the chat.'
     ),
   startFrom: startFromSchema.optional(),
+  prefilledVariables: z
+    .record(z.unknown())
+    .optional()
+    .describe(
+      '[More info about prefilled variables.](../../editor/variables#prefilled-variables)'
+    )
+    .openapi({
+      example: {
+        'First name': 'John',
+        Email: 'john@gmail.com',
+      },
+    }),
 })
 export type StartPreviewChatInput = z.infer<typeof startPreviewChatInputSchema>
 

packages/variables/prefillVariables.ts

@@ -10,6 +10,8 @@ export const prefillVariables = (
     if (!prefilledVariable) return variable
     return {
       ...variable,
-      value: safeStringify(prefilledVariable),
+      value: Array.isArray(prefilledVariable)
+        ? prefilledVariable.map(safeStringify)
+        : safeStringify(prefilledVariable),
     }
   })