🐛 (dify) Fix Dify error when inputs are empty

apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx

@@ -23,6 +23,7 @@ import { ForgedBlockDefinition, ForgedBlock } from '@typebot.io/forge-schemas'
 import { PrimitiveList } from '@/components/PrimitiveList'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
+import { getZodInnerSchema } from '../../helpers/getZodInnerSchema'
 
 const mdComponents = {
   a: ({ href, children }) => (
@@ -57,16 +58,14 @@ export const ZodFieldLayout = ({
   propName?: string
   onDataChange: (val: any) => void
 }) => {
-  const layout = schema._def.layout as ZodLayoutMetadata<ZodTypeAny> | undefined
-  const type = schema._def.innerType
-    ? schema._def.innerType._def.typeName
-    : schema._def.typeName
+  const innerSchema = getZodInnerSchema(schema)
+  const layout = innerSchema._def.layout
 
-  switch (type) {
+  switch (innerSchema._def.typeName) {
     case 'ZodObject':
       return (
         <ZodObjectLayout
-          schema={schema as z.ZodObject<any>}
+          schema={innerSchema as z.ZodObject<any>}
           data={data}
           onDataChange={onDataChange}
           isInAccordion={isInAccordion}
@@ -77,10 +76,12 @@ export const ZodFieldLayout = ({
     case 'ZodDiscriminatedUnion': {
       return (
         <ZodDiscriminatedUnionLayout
-          discriminant={schema._def.discriminator}
+          discriminant={innerSchema._def.discriminator}
           data={data}
-          schema={schema as z.ZodDiscriminatedUnion<string, z.ZodObject<any>[]>}
-          dropdownPlaceholder={`Select a ${schema._def.discriminator}`}
+          schema={
+            innerSchema as z.ZodDiscriminatedUnion<string, z.ZodObject<any>[]>
+          }
+          dropdownPlaceholder={`Select a ${innerSchema._def.discriminator}`}
           onDataChange={onDataChange}
         />
       )
@@ -99,7 +100,7 @@ export const ZodFieldLayout = ({
               <AccordionPanel as={Stack} pt="4">
                 <ZodArrayContent
                   data={data}
-                  schema={schema}
+                  schema={innerSchema}
                   blockDef={blockDef}
                   blockOptions={blockOptions}
                   layout={layout}
@@ -113,7 +114,7 @@ export const ZodFieldLayout = ({
       return (
         <ZodArrayContent
           data={data}
-          schema={schema}
+          schema={innerSchema}
           blockDef={blockDef}
           blockOptions={blockOptions}
           layout={layout}
@@ -126,7 +127,7 @@ export const ZodFieldLayout = ({
         <DropdownList
           currentItem={data ?? layout?.defaultValue}
           onItemSelect={onDataChange}
-          items={schema._def.innerType._def.values}
+          items={innerSchema._def.values}
           label={layout?.label}
           helperText={
             layout?.helperText ? (
@@ -295,7 +296,7 @@ const ZodArrayContent = ({
   isInAccordion?: boolean
   onDataChange: (val: any) => void
 }) => {
-  const type = schema._def.innerType._def.type._def.innerType?._def.typeName
+  const type = schema._def.type._def.innerType?._def.typeName
   if (type === 'ZodString' || type === 'ZodNumber' || type === 'ZodEnum')
     return (
       <Stack spacing={0}>
@@ -310,7 +311,7 @@ const ZodArrayContent = ({
           >
             {({ item, onItemChange }) => (
               <ZodFieldLayout
-                schema={schema._def.innerType._def.type}
+                schema={schema._def.type}
                 data={item}
                 blockDef={blockDef}
                 blockOptions={blockOptions}
@@ -335,7 +336,7 @@ const ZodArrayContent = ({
       {({ item, onItemChange }) => (
         <Stack p="4" rounded="md" flex="1" borderWidth="1px" maxW="100%">
           <ZodFieldLayout
-            schema={schema._def.innerType._def.type}
+            schema={schema._def.type}
             blockDef={blockDef}
             blockOptions={blockOptions}
             data={item}

apps/builder/src/features/forge/components/zodLayouts/ZodObjectLayout.tsx

@@ -14,6 +14,7 @@ import { ReactNode } from 'react'
 import { ZodTypeAny } from 'zod'
 import { ZodFieldLayout } from './ZodFieldLayout'
 import { ForgedBlockDefinition, ForgedBlock } from '@typebot.io/forge-schemas'
+import { getZodInnerSchema } from '../../helpers/getZodInnerSchema'
 
 export const ZodObjectLayout = ({
   schema,
@@ -38,7 +39,7 @@ export const ZodObjectLayout = ({
   }>(
     (nodes, key, index) => {
       if (ignoreKeys?.includes(key)) return nodes
-      const keySchema = schema.shape[key]
+      const keySchema = getZodInnerSchema(schema.shape[key])
       const layout = keySchema._def.layout as
         | ZodLayoutMetadata<ZodTypeAny>
         | undefined
@@ -46,7 +47,7 @@ export const ZodObjectLayout = ({
         layout &&
         layout.accordion &&
         !isInAccordion &&
-        keySchema._def.innerType._def.typeName !== 'ZodArray'
+        keySchema._def.typeName !== 'ZodArray'
       ) {
         if (nodes.accordionsCreated.includes(layout.accordion)) return nodes
         const accordionKeys = getObjectKeysWithSameAccordionAttr(

apps/builder/src/features/forge/helpers/getZodInnerSchema.ts

@@ -0,0 +1,18 @@
+import { z } from '@typebot.io/forge/zod'
+
+export const getZodInnerSchema = (schema: z.ZodTypeAny): z.ZodTypeAny => {
+  if (schema._def.typeName === 'ZodEffects')
+    return getZodInnerSchema(schema._def.schema)
+  if (schema._def.typeName === 'ZodOptional') {
+    const innerSchema = getZodInnerSchema(schema._def.innerType)
+    return {
+      ...innerSchema,
+      _def: {
+        ...innerSchema._def,
+        layout: schema._def.layout,
+      },
+    } as z.ZodTypeAny
+  }
+
+  return schema
+}

apps/docs/deploy/whatsapp/overview.mdx

@@ -20,6 +20,7 @@ WhatsApp environment have some limitations that you need to keep in mind when bu
 
 - GIF and SVG image files are not supported. They won't be displayed.
 - Buttons content can't be longer than 20 characters. If the content is longer, it will be truncated.
+- WhatsApp only allows to display 3 buttons at a time. So we work around that by adding "..." messages to display more buttons.
 - Incompatible blocks, if present, they will be skipped:
 
   - Payment input block