✨ Introducing The Forge (#1072)

The Forge allows anyone to easily create their own Typebot Block.

Closes #380

apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx

@@ -210,7 +210,7 @@ export const BlockNode = ({
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
               onClick={handleClick}
-              data-testid={`block`}
+              data-testid={`block ${block.id}`}
               w="full"
               className="prevent-group-drag"
             >
@@ -234,11 +234,7 @@ export const BlockNode = ({
                 w="full"
                 transition="border-color 0.2s"
               >
-                <BlockIcon
-                  type={block.type}
-                  mt="1"
-                  data-testid={`${block.id}-icon`}
-                />
+                <BlockIcon type={block.type} mt=".25rem" />
                 {typebot?.groups[indices.groupIndex].id && (
                   <BlockNodeContent
                     block={block}

apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx

@@ -3,7 +3,6 @@ import { WaitNodeContent } from '@/features/blocks/logic/wait/components/WaitNod
 import { ScriptNodeContent } from '@/features/blocks/logic/script/components/ScriptNodeContent'
 import { ButtonsBlockNode } from '@/features/blocks/inputs/buttons/components/ButtonsBlockNode'
 import { JumpNodeBody } from '@/features/blocks/logic/jump/components/JumpNodeBody'
-import { OpenAINodeBody } from '@/features/blocks/integrations/openai/components/OpenAINodeBody'
 import { AudioBubbleNode } from '@/features/blocks/bubbles/audio/components/AudioBubbleNode'
 import { EmbedBubbleContent } from '@/features/blocks/bubbles/embed/components/EmbedBubbleContent'
 import { ImageBubbleContent } from '@/features/blocks/bubbles/image/components/ImageBubbleContent'
@@ -38,6 +37,8 @@ import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/con
 import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
 import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
 import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
+import { ForgedBlockNodeContent } from '@/features/forge/components/ForgedBlockNodeContent'
+import { OpenAINodeBody } from '@/features/blocks/integrations/openai/components/OpenAINodeBody'
 
 type Props = {
   block: BlockV6
@@ -153,5 +154,8 @@ export const BlockNodeContent = ({
     case IntegrationBlockType.ZEMANTIC_AI: {
       return <ZemanticAiNodeBody options={block.options} />
     }
+    default: {
+      return <ForgedBlockNodeContent block={block} />
+    }
   }
 }

apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx

@@ -8,6 +8,7 @@ import {
 } from '@chakra-ui/react'
 import { BlockWithOptions } from '@typebot.io/schemas'
 import { getHelpDocUrl } from '@/features/graph/helpers/getHelpDocUrl'
+import { useForgedBlock } from '@/features/forge/hooks/useForgedBlock'
 
 type Props = {
   blockType: BlockWithOptions['type']
@@ -15,7 +16,8 @@ type Props = {
 }
 
 export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
-  const helpDocUrl = getHelpDocUrl(blockType)
+  const { blockDef } = useForgedBlock(blockType)
+  const helpDocUrl = getHelpDocUrl(blockType, blockDef)
   return (
     <HStack
       rounded="md"
@@ -34,17 +36,19 @@ export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
         onClick={onExpandClick}
         size="xs"
       />
-      <Button
-        as={Link}
-        leftIcon={<BuoyIcon />}
-        borderLeftRadius="none"
-        size="xs"
-        variant="ghost"
-        href={helpDocUrl}
-        isExternal
-      >
-        Help
-      </Button>
+      {helpDocUrl && (
+        <Button
+          as={Link}
+          leftIcon={<BuoyIcon />}
+          borderLeftRadius="none"
+          size="xs"
+          variant="ghost"
+          href={helpDocUrl}
+          isExternal
+        >
+          Help
+        </Button>
+      )}
     </HStack>
   )
 }

apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx

@@ -16,7 +16,6 @@ import { ScriptSettings } from '@/features/blocks/logic/script/components/Script
 import { JumpSettings } from '@/features/blocks/logic/jump/components/JumpSettings'
 import { MakeComSettings } from '@/features/blocks/integrations/makeCom/components/MakeComSettings'
 import { PabblyConnectSettings } from '@/features/blocks/integrations/pabbly/components/PabblyConnectSettings'
-import { OpenAISettings } from '@/features/blocks/integrations/openai/components/OpenAISettings'
 import { ButtonsBlockSettings } from '@/features/blocks/inputs/buttons/components/ButtonsBlockSettings'
 import { FileInputSettings } from '@/features/blocks/inputs/fileUpload/components/FileInputSettings'
 import { PaymentSettings } from '@/features/blocks/inputs/payment/components/PaymentSettings'
@@ -44,6 +43,8 @@ import { ZemanticAiSettings } from '@/features/blocks/integrations/zemanticAi/Ze
 import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
 import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
 import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
+import { ForgedBlockSettings } from '../../../../forge/components/ForgedBlockSettings'
+import { OpenAISettings } from '@/features/blocks/integrations/openai/components/OpenAISettings'
 
 type Props = {
   block: BlockWithOptions
@@ -323,5 +324,10 @@ export const BlockSettings = ({
     }
     case LogicBlockType.CONDITION:
       return null
+    default: {
+      return (
+        <ForgedBlockSettings block={block} onOptionsChange={updateOptions} />
+      )
+    }
   }
 }

apps/builder/src/features/graph/helpers/getHelpDocUrl.ts

@@ -1,9 +1,13 @@
+import { ForgedBlockDefinition } from '@typebot.io/forge-schemas'
 import { BlockWithOptions } from '@typebot.io/schemas'
 import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
 import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
 import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
 
-export const getHelpDocUrl = (blockType: BlockWithOptions['type']): string => {
+export const getHelpDocUrl = (
+  blockType: BlockWithOptions['type'],
+  blockDef?: ForgedBlockDefinition
+): string | undefined => {
   switch (blockType) {
     case LogicBlockType.TYPEBOT_LINK:
       return 'https://docs.typebot.io/editor/blocks/logic/typebot-link'
@@ -65,5 +69,7 @@ export const getHelpDocUrl = (blockType: BlockWithOptions['type']): string => {
       return 'https://docs.typebot.io/editor/blocks/integrations/zemantic-ai'
     case LogicBlockType.CONDITION:
       return 'https://docs.typebot.io/editor/blocks/logic/condition'
+    default:
+      return blockDef?.docsUrl
   }
 }