feat(bot): ✨ Support variables in buttons

packages/bot-engine/src/components/ChatGroup/ChatBlock/InputChatBlock.tsx

@@ -13,7 +13,11 @@ import { PaymentForm } from './inputs/PaymentForm'
 import { RatingForm } from './inputs/RatingForm'
 import { FileUploadForm } from './inputs/FileUploadForm'
 
-export type InputSubmitContent = { label?: string; value: string }
+export type InputSubmitContent = {
+  label?: string
+  value: string
+  itemId?: string
+}
 
 export const InputChatBlock = ({
   block,
@@ -40,7 +44,7 @@ export const InputChatBlock = ({
       ? variableId && typebot.variables.find(byId(variableId))?.value
       : undefined
 
-  const handleSubmit = async ({ label, value }: InputSubmitContent) => {
+  const handleSubmit = async ({ label, value, itemId }: InputSubmitContent) => {
     setAnswer(label ?? value)
     const isRetry = !isInputValid(value, block.type)
     if (!isRetry && addAnswer)
@@ -50,7 +54,7 @@ export const InputChatBlock = ({
         content: value,
         variableId: variableId ?? null,
       })
-    if (!isEditting) onTransitionEnd({ label, value }, isRetry)
+    if (!isEditting) onTransitionEnd({ label, value, itemId }, isRetry)
     setIsEditting(false)
   }
 

packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/ChoiceForm.tsx

@@ -1,6 +1,8 @@
 import { useAnswers } from 'contexts/AnswersContext'
+import { useTypebot } from 'contexts/TypebotContext'
 import { ChoiceInputBlock } from 'models'
 import React, { useState } from 'react'
+import { parseVariables } from 'services/variable'
 import { InputSubmitContent } from '../InputChatBlock'
 import { SendButton } from './SendButton'
 
@@ -10,13 +12,20 @@ type ChoiceFormProps = {
 }
 
 export const ChoiceForm = ({ block, onSubmit }: ChoiceFormProps) => {
+  const {
+    typebot: { variables },
+  } = useTypebot()
   const { resultValues } = useAnswers()
   const [selectedIndices, setSelectedIndices] = useState<number[]>([])
 
   const handleClick = (itemIndex: number) => (e: React.MouseEvent) => {
     e.preventDefault()
     if (block.options?.isMultipleChoice) toggleSelectedItemIndex(itemIndex)
-    else onSubmit({ value: block.items[itemIndex].content ?? '' })
+    else
+      onSubmit({
+        value: parseVariables(variables)(block.items[itemIndex].content),
+        itemId: block.items[itemIndex].id,
+      })
   }
 
   const toggleSelectedItemIndex = (itemIndex: number) => {
@@ -32,7 +41,9 @@ export const ChoiceForm = ({ block, onSubmit }: ChoiceFormProps) => {
   const handleSubmit = () =>
     onSubmit({
       value: selectedIndices
-        .map((itemIndex) => block.items[itemIndex].content)
+        .map((itemIndex) =>
+          parseVariables(variables)(block.items[itemIndex].content)
+        )
         .join(', '),
     })
 
@@ -59,7 +70,7 @@ export const ChoiceForm = ({ block, onSubmit }: ChoiceFormProps) => {
               data-testid="button"
               data-itemid={item.id}
             >
-              {item.content}
+              {parseVariables(variables)(item.content)}
             </button>
             {isUniqueFirstButton && (
               <span className="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">

packages/bot-engine/src/components/ChatGroup/ChatGroup.tsx

@@ -10,6 +10,7 @@ import {
   isInputBlock,
   isIntegrationBlock,
   isLogicBlock,
+  byId,
 } from 'utils'
 import { executeLogic } from 'services/logic'
 import { executeIntegration } from 'services/integration'
@@ -187,7 +188,7 @@ export const ChatGroup = ({
         isChoiceInput(currentBlock) && !currentBlock.options.isMultipleChoice
       if (isSingleChoiceBlock) {
         const nextEdgeId = currentBlock.items.find(
-          (i) => i.content === answerContent?.value
+          byId(answerContent?.itemId)
         )?.outgoingEdgeId
         if (nextEdgeId) return onGroupEnd({ edgeId: nextEdgeId })
       }