✨ Add picture choice block

Closes #476

apps/viewer/src/features/blocks/inputs/pictureChoice/injectVariableValuesInPictureChoiceBlock.ts

@@ -0,0 +1,55 @@
+import {
+  SessionState,
+  VariableWithValue,
+  ItemType,
+  PictureChoiceBlock,
+} from '@typebot.io/schemas'
+import { isDefined } from '@typebot.io/lib'
+import { deepParseVariables } from '@/features/variables/deepParseVariable'
+
+export const injectVariableValuesInPictureChoiceBlock =
+  (variables: SessionState['typebot']['variables']) =>
+  (block: PictureChoiceBlock): PictureChoiceBlock => {
+    if (
+      block.options.dynamicItems?.isEnabled &&
+      block.options.dynamicItems.pictureSrcsVariableId
+    ) {
+      const pictureSrcsVariable = variables.find(
+        (variable) =>
+          variable.id === block.options.dynamicItems?.pictureSrcsVariableId &&
+          isDefined(variable.value)
+      ) as VariableWithValue | undefined
+      if (!pictureSrcsVariable || typeof pictureSrcsVariable.value === 'string')
+        return block
+      const titlesVariable = block.options.dynamicItems.titlesVariableId
+        ? (variables.find(
+            (variable) =>
+              variable.id === block.options.dynamicItems?.titlesVariableId &&
+              isDefined(variable.value)
+          ) as VariableWithValue | undefined)
+        : undefined
+      const descriptionsVariable = block.options.dynamicItems
+        .descriptionsVariableId
+        ? (variables.find(
+            (variable) =>
+              variable.id ===
+                block.options.dynamicItems?.descriptionsVariableId &&
+              isDefined(variable.value)
+          ) as VariableWithValue | undefined)
+        : undefined
+      return {
+        ...block,
+        items: pictureSrcsVariable.value
+          .filter(isDefined)
+          .map((pictureSrc, idx) => ({
+            id: idx.toString(),
+            type: ItemType.PICTURE_CHOICE,
+            blockId: block.id,
+            pictureSrc,
+            title: titlesVariable?.value?.[idx] ?? '',
+            description: descriptionsVariable?.value?.[idx] ?? '',
+          })),
+      }
+    }
+    return deepParseVariables(variables)(block)
+  }

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

@@ -21,6 +21,7 @@ import { executeIntegration } from './executeIntegration'
 import { injectVariableValuesInButtonsInputBlock } from '@/features/blocks/inputs/buttons/injectVariableValuesInButtonsInputBlock'
 import { deepParseVariables } from '@/features/variables/deepParseVariable'
 import { computePaymentInputRuntimeOptions } from '@/features/blocks/inputs/payment/computePaymentInputRuntimeOptions'
+import { injectVariableValuesInPictureChoiceBlock } from '@/features/blocks/inputs/pictureChoice/injectVariableValuesInPictureChoiceBlock'
 
 export const executeGroup =
   (
@@ -185,6 +186,11 @@ const injectVariablesValueInBlock =
           block
         )
       }
+      case InputBlockType.PICTURE_CHOICE: {
+        return injectVariableValuesInPictureChoiceBlock(
+          state.typebot.variables
+        )(block)
+      }
       default: {
         return deepParseVariables(state.typebot.variables)({
           ...block,