blsmedia/bot
2
0
Fork 0
Code Activity

🚸 Rename "webhook" block to "HTTP request"

Browse Source
This commit is contained in:
Baptiste Arnaud
2024-02-16 12:04:25 +01:00
parent 8d50dc9dfa
commit 33cbb2b254
35 changed files with 165 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx
View File

@ -1,8 +1,8 @@
import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
import { ExternalLinkIcon } from '@/components/icons'
import { MakeComBlock, Webhook } from '@typebot.io/schemas'
import { MakeComBlock, HttpRequest } from '@typebot.io/schemas'
import React from 'react'
import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
type Props = {
block: MakeComBlock
@ -13,7 +13,7 @@ export const MakeComSettings = ({
block: { id: blockId, options },
onOptionsChange,
}: Props) => {
const setLocalWebhook = async (newLocalWebhook: Webhook) => {
const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
onOptionsChange({
...options,
webhook: newLocalWebhook,
@ -42,7 +42,7 @@ export const MakeComSettings = ({
</Stack>
)}
</Alert>
<WebhookAdvancedConfigForm
<HttpRequestAdvancedConfigForm
blockId={blockId}
webhook={options?.webhook}
options={options}

8
apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectSettings.tsx
View File

@ -1,8 +1,8 @@
import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
import { ExternalLinkIcon } from '@/components/icons'
import { PabblyConnectBlock, Webhook } from '@typebot.io/schemas'
import { PabblyConnectBlock, HttpRequest } from '@typebot.io/schemas'
import React from 'react'
import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
import { TextInput } from '@/components/inputs'
type Props = {
@ -14,7 +14,7 @@ export const PabblyConnectSettings = ({
block: { id: blockId, options },
onOptionsChange,
}: Props) => {
const setLocalWebhook = async (newLocalWebhook: Webhook) => {
const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
onOptionsChange({
...options,
webhook: newLocalWebhook,
@ -54,7 +54,7 @@ export const PabblyConnectSettings = ({
withVariableButton={false}
debounceTimeout={0}
/>
<WebhookAdvancedConfigForm
<HttpRequestAdvancedConfigForm
blockId={blockId}
webhook={options?.webhook}
options={options}

4
apps/builder/src/features/blocks/integrations/webhook/api/subscribeWebhook.ts
View File

@ -2,7 +2,7 @@ import prisma from '@typebot.io/lib/prisma'
import { canWriteTypebots } from '@/helpers/databaseRules'
import { authenticatedProcedure } from '@/helpers/server/trpc'
import { TRPCError } from '@trpc/server'
import { Block, WebhookBlock, parseGroups } from '@typebot.io/schemas'
import { Block, HttpRequestBlock, parseGroups } from '@typebot.io/schemas'
import { byId, isWebhookBlock } from '@typebot.io/lib'
import { z } from 'zod'
@ -47,7 +47,7 @@ export const subscribeWebhook = authenticatedProcedure
const webhookBlock = groups
.flatMap<Block>((g) => g.blocks)
.find(byId(blockId)) as WebhookBlock | null
.find(byId(blockId)) as HttpRequestBlock | null
if (!webhookBlock || !isWebhookBlock(webhookBlock))
throw new TRPCError({

4
apps/builder/src/features/blocks/integrations/webhook/api/unsubscribeWebhook.ts
View File

@ -2,7 +2,7 @@ import prisma from '@typebot.io/lib/prisma'
import { canWriteTypebots } from '@/helpers/databaseRules'
import { authenticatedProcedure } from '@/helpers/server/trpc'
import { TRPCError } from '@trpc/server'
import { Block, WebhookBlock, parseGroups } from '@typebot.io/schemas'
import { Block, HttpRequestBlock, parseGroups } from '@typebot.io/schemas'
import { byId, isWebhookBlock } from '@typebot.io/lib'
import { z } from 'zod'
@ -46,7 +46,7 @@ export const unsubscribeWebhook = authenticatedProcedure
const webhookBlock = groups
.flatMap<Block>((g) => g.blocks)
.find(byId(blockId)) as WebhookBlock | null
.find(byId(blockId)) as HttpRequestBlock | null
if (!webhookBlock || !isWebhookBlock(webhookBlock))
throw new TRPCError({

14
apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx → apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestAdvancedConfigForm.tsx
View File

@ -19,8 +19,8 @@ import {
KeyValue,
VariableForTest,
ResponseVariableMapping,
Webhook,
WebhookBlock,
HttpRequest,
HttpRequestBlock,
} from '@typebot.io/schemas'
import { useState, useMemo } from 'react'
import { executeWebhook } from '../queries/executeWebhookQuery'
@ -41,13 +41,13 @@ import { NumberInput } from '@/components/inputs'
type Props = {
blockId: string
webhook: Webhook | undefined
options: WebhookBlock['options']
onWebhookChange: (webhook: Webhook) => void
onOptionsChange: (options: WebhookBlock['options']) => void
webhook: HttpRequest | undefined
options: HttpRequestBlock['options']
onWebhookChange: (webhook: HttpRequest) => void
onOptionsChange: (options: HttpRequestBlock['options']) => void
}
export const WebhookAdvancedConfigForm = ({
export const HttpRequestAdvancedConfigForm = ({
blockId,
webhook,
options,

4
apps/builder/src/features/blocks/integrations/webhook/components/WebhookContent.tsx → apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestContent.tsx
View File

@ -1,10 +1,10 @@
import { Stack, Text } from '@chakra-ui/react'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { WebhookBlock } from '@typebot.io/schemas'
import { HttpRequestBlock } from '@typebot.io/schemas'
import { SetVariableLabel } from '@/components/SetVariableLabel'
type Props = {
block: WebhookBlock
block: HttpRequestBlock
}
export const WebhookContent = ({ block: { options } }: Props) => {

5
apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestIcon.tsx Normal file
View File

@ -0,0 +1,5 @@
import { WebhookIcon } from '@/components/icons'
import { IconProps } from '@chakra-ui/react'
import React from 'react'
export const HttpRequestIcon = (props: IconProps) => <WebhookIcon {...props} />

16
apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings.tsx → apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestSettings.tsx
View File

@ -1,19 +1,19 @@
import React from 'react'
import { Stack } from '@chakra-ui/react'
import { Webhook, WebhookBlock } from '@typebot.io/schemas'
import { HttpRequest, HttpRequestBlock } from '@typebot.io/schemas'
import { TextInput } from '@/components/inputs'
import { WebhookAdvancedConfigForm } from './WebhookAdvancedConfigForm'
import { HttpRequestAdvancedConfigForm } from './HttpRequestAdvancedConfigForm'
type Props = {
block: WebhookBlock
onOptionsChange: (options: WebhookBlock['options']) => void
block: HttpRequestBlock
onOptionsChange: (options: HttpRequestBlock['options']) => void
}
export const WebhookSettings = ({
export const HttpRequestSettings = ({
block: { id: blockId, options },
onOptionsChange,
}: Props) => {
const setLocalWebhook = async (newLocalWebhook: Webhook) => {
const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
onOptionsChange({ ...options, webhook: newLocalWebhook })
}
@ -24,11 +24,11 @@ export const WebhookSettings = ({
return (
<Stack spacing={4}>
<TextInput
placeholder="Paste webhook URL..."
placeholder="Paste URL..."
defaultValue={options?.webhook?.url}
onChange={updateUrl}
/>
<WebhookAdvancedConfigForm
<HttpRequestAdvancedConfigForm
blockId={blockId}
webhook={options?.webhook}
options={options}

5
apps/builder/src/features/blocks/integrations/webhook/components/WebhookIcon.tsx
View File

@ -1,5 +0,0 @@
import { WebhookIcon as WebhookIco } from '@/components/icons'
import { IconProps } from '@chakra-ui/react'
import React from 'react'
export const WebhookIcon = (props: IconProps) => <WebhookIco {...props} />

4
apps/builder/src/features/blocks/integrations/webhook/queries/executeWebhookQuery.ts
View File

@ -1,4 +1,4 @@
import { Variable, WebhookResponse } from '@typebot.io/schemas'
import { Variable, HttpResponse } from '@typebot.io/schemas'
import { sendRequest } from '@typebot.io/lib'
import { env } from '@typebot.io/env'
@ -7,7 +7,7 @@ export const executeWebhook = (
variables: Variable[],
{ blockId }: { blockId: string }
) =>
sendRequest<WebhookResponse>({
sendRequest<HttpResponse>({
url: `${env.NEXT_PUBLIC_VIEWER_URL[0]}/api/typebots/${typebotId}/blocks/${blockId}/executeWebhook`,
method: 'POST',
body: {

10
apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx
View File

@ -1,19 +1,19 @@
import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
import { ExternalLinkIcon } from '@/components/icons'
import { Webhook, WebhookBlock, ZapierBlock } from '@typebot.io/schemas'
import { HttpRequest, HttpRequestBlock, ZapierBlock } from '@typebot.io/schemas'
import React from 'react'
import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
type Props = {
block: ZapierBlock
onOptionsChange: (options: WebhookBlock['options']) => void
onOptionsChange: (options: HttpRequestBlock['options']) => void
}
export const ZapierSettings = ({
block: { id: blockId, options },
onOptionsChange,
}: Props) => {
const setLocalWebhook = async (newLocalWebhook: Webhook) => {
const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
onOptionsChange({
...options,
webhook: newLocalWebhook,
@ -43,7 +43,7 @@ export const ZapierSettings = ({
</Stack>
)}
</Alert>
<WebhookAdvancedConfigForm
<HttpRequestAdvancedConfigForm
blockId={blockId}
webhook={options?.webhook}
options={options}

2
apps/builder/src/features/editor/components/BlockLabel.tsx
View File

@ -78,7 +78,7 @@ export const BlockLabel = ({ type }: Props): JSX.Element => {
<Text fontSize="sm">{t('editor.sidebarBlock.analytics.label')}</Text>
)
case IntegrationBlockType.WEBHOOK:
return <Text fontSize="sm">{t('editor.sidebarBlock.webhook.label')}</Text>
return <Text fontSize="sm">HTTP request</Text>
case IntegrationBlockType.ZAPIER:
return <Text fontSize="sm">{t('editor.sidebarBlock.zapier.label')}</Text>
case IntegrationBlockType.MAKE_COM:

1
apps/builder/src/features/editor/components/BlocksSideBar.tsx
View File

@ -30,6 +30,7 @@ import { useDebouncedCallback } from 'use-debounce'
const legacyIntegrationBlocks = [
IntegrationBlockType.OPEN_AI,
IntegrationBlockType.ZEMANTIC_AI,
IntegrationBlockType.WEBHOOK,
]
export const BlocksSideBar = () => {

4
apps/builder/src/features/editor/providers/typebotActions/blocks.ts
View File

@ -2,7 +2,7 @@ import {
Block,
Typebot,
BlockIndices,
Webhook,
HttpRequest,
BlockV6,
TypebotV6,
} from '@typebot.io/schemas'
@ -26,7 +26,7 @@ export type BlocksActions = {
}
export type WebhookCallBacks = {
onWebhookBlockCreated: (data: Partial<Webhook>) => void
onWebhookBlockCreated: (data: Partial<HttpRequest>) => void
onWebhookBlockDuplicated: (
existingWebhookId: string,
newWebhookId: string

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

@ -21,7 +21,7 @@ import { GoogleSheetsNodeContent } from '@/features/blocks/integrations/googleSh
import { MakeComContent } from '@/features/blocks/integrations/makeCom/components/MakeComContent'
import { PabblyConnectContent } from '@/features/blocks/integrations/pabbly/components/PabblyConnectContent'
import { SendEmailContent } from '@/features/blocks/integrations/sendEmail/components/SendEmailContent'
import { WebhookContent } from '@/features/blocks/integrations/webhook/components/WebhookContent'
import { WebhookContent } from '@/features/blocks/integrations/webhook/components/HttpRequestContent'
import { ZapierContent } from '@/features/blocks/integrations/zapier/components/ZapierContent'
import { RedirectNodeContent } from '@/features/blocks/logic/redirect/components/RedirectNodeContent'
import { SetVariableContent } from '@/features/blocks/logic/setVariable/components/SetVariableContent'

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

@ -23,7 +23,7 @@ import { RatingInputSettings } from '@/features/blocks/inputs/rating/components/
import { TextInputSettings } from '@/features/blocks/inputs/textInput/components/TextInputSettings'
import { GoogleAnalyticsSettings } from '@/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings'
import { SendEmailSettings } from '@/features/blocks/integrations/sendEmail/components/SendEmailSettings'
import { WebhookSettings } from '@/features/blocks/integrations/webhook/components/WebhookSettings'
import { HttpRequestSettings } from '@/features/blocks/integrations/webhook/components/HttpRequestSettings'
import { ZapierSettings } from '@/features/blocks/integrations/zapier/components/ZapierSettings'
import { RedirectSettings } from '@/features/blocks/logic/redirect/components/RedirectSettings'
import { SetVariableSettings } from '@/features/blocks/logic/setVariable/components/SetVariableSettings'
@ -288,7 +288,9 @@ export const BlockSettings = ({
)
}
case IntegrationBlockType.WEBHOOK: {
return <WebhookSettings block={block} onOptionsChange={updateOptions} />
return (
<HttpRequestSettings block={block} onOptionsChange={updateOptions} />
)
}
case IntegrationBlockType.EMAIL: {
return (

43
apps/docs/editor/blocks/integrations/webhook.mdx
View File

@ -1,34 +1,16 @@
---
title: Webhook / API Request
title: HTTP Request
---
import { LoomVideo } from '/snippets/loom-video.mdx'
The Webhook block allows you to either:
- Call a Webhook URL of a 3rd party service to send information from the bot.
- Make an API request to a 3rd party service to fetch information and use it in the bot.
## Call a Webhook URL
Your 3rd party service (Make.com, Zapier, etc) is giving you a Webhook URL.
You only have to paste this URL in the Webhook block and click on "Test the request". By default the 3rd party service will receive a snapshot of what the bot could send.
<Frame>
<img
src="/images/blocks/integrations/webhook/simple-post.png"
alt="Simple Webhook POST"
/>
</Frame>
You can also decide to customize the request sent to the 3rd party service.
The HTTP Request block allows you to send an HTTP request to a 3rd party service. This is useful to send information from the bot to another service or to fetch information from another service and use it in the bot.
## Make an API request and fetch data
This gets more technical as you'll need to know more about HTTP request parameters.
Lots of services offer an API. They also, most likely have an API documentation. Depending on the parameters you are giving the Webhook block, it should return different info from the 3rd party service.
Lots of services offer an API. They also, most likely have an API documentation. Depending on the parameters you are giving the HTTP request block, it should return different info from the 3rd party service.
## Custom body
@ -43,9 +25,9 @@ You can set a custom body with your collected variables. Here is a working examp
### Example with a dummy API: CREATE and GET
This video provides a step-by-step guide to successfully configure webhook blocks in Typebot.
This video provides a step-by-step guide to successfully configure HTTP request blocks in Typebot.
I demonstrate how to configure the webhook block, including the URL, method, and custom body. I also show you how to test the webhook call and save the newly created employee ID. Finally, I explain how to implement the find employee by ID endpoint and map the employee name to a variable.
I demonstrate how to configure the HTTP request block, including the URL, method, and custom body. I also show you how to test the request and save the newly created employee ID. Finally, I explain how to implement the find employee by ID endpoint and map the employee name to a variable.
<LoomVideo id="d9aef6a37e0c43759b31be7d69c4dd6d" />
@ -92,6 +74,21 @@ Possibilities are endless when it comes to API calls, you can litteraly call any
Feel free to ask the [community](https://typebot.io/discord) for help if you struggle setting up a Webhook block.
## Call a Webhook URL
Your 3rd party service (Make.com, Zapier, etc) is giving you a Webhook URL.
You only have to paste this URL in the Webhook block and click on "Test the request". By default the 3rd party service will receive a snapshot of what the bot could send.
<Frame>
<img
src="/images/blocks/integrations/webhook/simple-post.png"
alt="Simple Webhook POST"
/>
</Frame>
You can also decide to customize the request sent to the 3rd party service.
## Timeout
By default, the Webhook block will wait 10 seconds for the 3rd party service to respond. If it doesn't respond in time, the block will fail. You can customize this timeout value in the "Advanced params" section of your Webhook block settings.

18
apps/docs/openapi/builder.json
View File

@ -1977,7 +1977,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",
@ -6372,7 +6373,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",
@ -9818,7 +9820,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",
@ -18269,7 +18272,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",
@ -21840,7 +21844,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",
@ -24660,7 +24665,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",

6
apps/docs/openapi/viewer.json
View File

@ -5044,7 +5044,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",
@ -8791,7 +8792,8 @@
"type": "string",
"enum": [
"Webhook"
]
],
"description": "Legacy name for HTTP Request block"
},
"options": {
"type": "object",

10
apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/executeWebhook.ts
View File

@ -3,8 +3,8 @@ import {
ResultValues,
Typebot,
Variable,
Webhook,
WebhookResponse,
HttpRequest,
HttpResponse,
Block,
} from '@typebot.io/schemas'
import { NextApiRequest, NextApiResponse } from 'next'
@ -58,7 +58,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const typebot = (await prisma.typebot.findUnique({
where: { id: typebotId },
include: { webhooks: true },
})) as unknown as (Typebot & { webhooks: Webhook[] }) | null
})) as unknown as (Typebot & { webhooks: HttpRequest[] }) | null
if (!typebot) return notFound(res)
const block = typebot.groups
.flatMap<Block>((g) => g.blocks)
@ -106,7 +106,7 @@ export const executeWebhook =
isCustomBody,
timeout,
}: {
webhook: Webhook
webhook: HttpRequest
variables: Variable[]
groupId: string
resultValues?: ResultValues
@ -114,7 +114,7 @@ export const executeWebhook =
parentTypebotIds: string[]
isCustomBody?: boolean
timeout?: number
}): Promise<WebhookResponse> => {
}): Promise<HttpResponse> => {
if (!webhook.url)
return {
statusCode: 400,

4
apps/viewer/src/pages/api/typebots/[typebotId]/webhookBlocks.ts
View File

@ -1,6 +1,6 @@
import { authenticateUser } from '@/helpers/authenticateUser'
import prisma from '@typebot.io/lib/prisma'
import { Group, WebhookBlock } from '@typebot.io/schemas'
import { Group, HttpRequestBlock } from '@typebot.io/schemas'
import { NextApiRequest, NextApiResponse } from 'next'
import { isWebhookBlock } from '@typebot.io/lib'
import { methodNotAllowed } from '@typebot.io/lib/api'
@ -22,7 +22,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
>((emptyWebhookBlocks, group) => {
const blocks = group.blocks.filter((block) =>
isWebhookBlock(block)
) as WebhookBlock[]
) as HttpRequestBlock[]
return [
...emptyWebhookBlocks,
...blocks.map((b) => ({