⚡ (typebotLink) Better typebot link with merge option

Closes #675

apps/builder/src/features/blocks/logic/typebotLink/api/getLinkedTypebots.ts

@@ -65,7 +65,8 @@ export const getLinkedTypebots = authenticatedProcedure
           (typebotIds, block) =>
             block.type === LogicBlockType.TYPEBOT_LINK &&
             isDefined(block.options.typebotId) &&
-            !typebotIds.includes(block.options.typebotId)
+            !typebotIds.includes(block.options.typebotId) &&
+            block.options.mergeResults !== false
               ? [...typebotIds, block.options.typebotId]
               : typebotIds,
           []

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm.tsx

@@ -1,10 +1,11 @@
 import { Stack } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { TypebotLinkOptions } from '@typebot.io/schemas'
-import { byId } from '@typebot.io/lib'
 import { GroupsDropdown } from './GroupsDropdown'
 import { TypebotsDropdown } from './TypebotsDropdown'
-import { useEffect, useState } from 'react'
+import { trpc } from '@/lib/trpc'
+import { isNotEmpty } from '@typebot.io/lib'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 
 type Props = {
   options: TypebotLinkOptions
@@ -12,21 +13,30 @@ type Props = {
 }
 
 export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
-  const { linkedTypebots, typebot, save } = useTypebot()
-  const [linkedTypebotId, setLinkedTypebotId] = useState(options.typebotId)
+  const { typebot } = useTypebot()
 
   const handleTypebotIdChange = async (
     typebotId: string | 'current' | undefined
-  ) => onOptionsChange({ ...options, typebotId })
+  ) => onOptionsChange({ ...options, typebotId, groupId: undefined })
+
+  const { data: linkedTypebotData } = trpc.typebot.getTypebot.useQuery(
+    {
+      typebotId: options.typebotId as string,
+    },
+    {
+      enabled: isNotEmpty(options.typebotId) && options.typebotId !== 'current',
+    }
+  )
 
   const handleGroupIdChange = (groupId: string | undefined) =>
     onOptionsChange({ ...options, groupId })
 
-  useEffect(() => {
-    if (linkedTypebotId === options.typebotId) return
-    setLinkedTypebotId(options.typebotId)
-    save().then()
-  }, [linkedTypebotId, options.typebotId, save])
+  const updateMergeResults = (mergeResults: boolean) =>
+    onOptionsChange({ ...options, mergeResults })
+
+  const isCurrentTypebotSelected =
+    (typebot && options.typebotId === typebot.id) ||
+    options.typebotId === 'current'
 
   return (
     <Stack>
@@ -40,22 +50,30 @@ export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
       )}
       {options.typebotId && (
         <GroupsDropdown
+          key={options.typebotId}
           groups={
-            typebot &&
-            (options.typebotId === typebot.id ||
-              options.typebotId === 'current')
+            typebot && isCurrentTypebotSelected
               ? typebot.groups
-              : linkedTypebots?.find(byId(options.typebotId))?.groups ?? []
+              : linkedTypebotData?.typebot?.groups ?? []
           }
           groupId={options.groupId}
           onGroupIdSelected={handleGroupIdChange}
           isLoading={
-            linkedTypebots === undefined &&
+            linkedTypebotData?.typebot === undefined &&
+            options.typebotId !== 'current' &&
             typebot &&
             typebot.id !== options.typebotId
           }
         />
       )}
+      {!isCurrentTypebotSelected && (
+        <SwitchWithLabel
+          label="Merge answers"
+          moreInfoContent="If enabled, the answers collected in the linked typebot will be merged with the results of the current typebot."
+          initialValue={options.mergeResults ?? true}
+          onCheckChange={updateMergeResults}
+        />
+      )}
     </Stack>
   )
 }

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkNode.tsx

@@ -2,24 +2,36 @@ import { TypebotLinkBlock } from '@typebot.io/schemas'
 import React from 'react'
 import { Tag, Text } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { byId } from '@typebot.io/lib'
+import { byId, isNotEmpty } from '@typebot.io/lib'
+import { trpc } from '@/lib/trpc'
 
 type Props = {
   block: TypebotLinkBlock
 }
 
 export const TypebotLinkNode = ({ block }: Props) => {
-  const { linkedTypebots, typebot } = useTypebot()
+  const { typebot } = useTypebot()
+
+  const { data: linkedTypebotData } = trpc.typebot.getTypebot.useQuery(
+    {
+      typebotId: block.options.typebotId as string,
+    },
+    {
+      enabled:
+        isNotEmpty(block.options.typebotId) &&
+        block.options.typebotId !== 'current',
+    }
+  )
+
   const isCurrentTypebot =
     typebot &&
     (block.options.typebotId === typebot.id ||
       block.options.typebotId === 'current')
-  const linkedTypebot = isCurrentTypebot
-    ? typebot
-    : linkedTypebots?.find(byId(block.options.typebotId))
+  const linkedTypebot = isCurrentTypebot ? typebot : linkedTypebotData?.typebot
   const blockTitle = linkedTypebot?.groups.find(
     byId(block.options.groupId)
   )?.title
+
   if (!block.options.typebotId)
     return <Text color="gray.500">Configure...</Text>
   return (

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotsDropdown.tsx

@@ -61,7 +61,17 @@ export const TypebotsDropdown = ({
           aria-label="Navigate to typebot"
           icon={<ExternalLinkIcon />}
           as={Link}
-          href={`/typebots/${typebotId}/edit?parentId=${query.typebotId}`}
+          href={{
+            pathname: '/typebots/[typebotId]/edit',
+            query: {
+              typebotId,
+              parentId: query.parentId
+                ? Array.isArray(query.parentId)
+                  ? query.parentId.concat(query.typebotId?.toString() ?? '')
+                  : [query.parentId, query.typebotId?.toString() ?? '']
+                : query.typebotId ?? [],
+            },
+          }}
         />
       )}
     </HStack>