feat(engine): ✨ Link typebot step

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx

@@ -21,6 +21,7 @@ import { ConfigureContent } from './contents/ConfigureContent'
 import { ImageBubbleContent } from './contents/ImageBubbleContent'
 import { PlaceholderContent } from './contents/PlaceholderContent'
 import { SendEmailContent } from './contents/SendEmailContent'
+import { TypebotLinkContent } from './contents/TypebotLinkContent'
 import { ZapierContent } from './contents/ZapierContent'
 
 type Props = {
@@ -87,6 +88,8 @@ export const StepNodeContent = ({ step, indices }: Props) => {
         />
       )
     }
+    case LogicStepType.TYPEBOT_LINK:
+      return <TypebotLinkContent step={step} />
 
     case IntegrationStepType.GOOGLE_SHEETS: {
       return (

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/TypebotLinkContent.tsx

@@ -0,0 +1,40 @@
+import { TypebotLinkStep } from 'models'
+import React from 'react'
+import { Tag, Text } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { byId } from 'utils'
+
+type Props = {
+  step: TypebotLinkStep
+}
+
+export const TypebotLinkContent = ({ step }: Props) => {
+  const { linkedTypebots, typebot } = useTypebot()
+  const isCurrentTypebot = typebot && step.options.typebotId === typebot.id
+  const linkedTypebot = isCurrentTypebot
+    ? typebot
+    : linkedTypebots?.find(byId(step.options.typebotId))
+  const blockTitle = linkedTypebot?.blocks.find(
+    byId(step.options.blockId)
+  )?.title
+  if (!step.options.typebotId) return <Text color="gray.500">Configure...</Text>
+  return (
+    <Text>
+      Jump{' '}
+      {blockTitle ? (
+        <>
+          to <Tag>{blockTitle}</Tag>
+        </>
+      ) : (
+        <></>
+      )}{' '}
+      {!isCurrentTypebot ? (
+        <>
+          in <Tag colorScheme="blue">{linkedTypebot?.name}</Tag>
+        </>
+      ) : (
+        <></>
+      )}
+    </Text>
+  )
+}