⚡ (webhook) Add client execution option

apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx

@@ -30,6 +30,7 @@ import { getDeepKeys } from '../helpers/getDeepKeys'
 import { QueryParamsInputs, HeadersInputs } from './KeyValueInputs'
 import { DataVariableInputs } from './ResponseMappingInputs'
 import { VariableForTestInputs } from './VariableForTestInputs'
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
 
 type Props = {
   blockId: string
@@ -52,32 +53,31 @@ export const WebhookAdvancedConfigForm = ({
   const [responseKeys, setResponseKeys] = useState<string[]>([])
   const { showToast } = useToast()
 
-  const handleMethodChange = (method: HttpMethod) =>
+  const updateMethod = (method: HttpMethod) =>
     onWebhookChange({ ...webhook, method })
 
-  const handleQueryParamsChange = (queryParams: KeyValue[]) =>
+  const updateQueryParams = (queryParams: KeyValue[]) =>
     onWebhookChange({ ...webhook, queryParams })
 
-  const handleHeadersChange = (headers: KeyValue[]) =>
+  const updateHeaders = (headers: KeyValue[]) =>
     onWebhookChange({ ...webhook, headers })
 
-  const handleBodyChange = (body: string) =>
-    onWebhookChange({ ...webhook, body })
+  const updateBody = (body: string) => onWebhookChange({ ...webhook, body })
 
-  const handleVariablesChange = (variablesForTest: VariableForTest[]) =>
+  const updateVariablesForTest = (variablesForTest: VariableForTest[]) =>
     onOptionsChange({ ...options, variablesForTest })
 
-  const handleResponseMappingChange = (
+  const updateResponseVariableMapping = (
     responseVariableMapping: ResponseVariableMapping[]
   ) => onOptionsChange({ ...options, responseVariableMapping })
 
-  const handleAdvancedConfigChange = (isAdvancedConfig: boolean) =>
+  const updateAdvancedConfig = (isAdvancedConfig: boolean) =>
     onOptionsChange({ ...options, isAdvancedConfig })
 
-  const handleBodyFormStateChange = (isCustomBody: boolean) =>
+  const updateIsCustomBody = (isCustomBody: boolean) =>
     onOptionsChange({ ...options, isCustomBody })
 
-  const handleTestRequestClick = async () => {
+  const executeTestRequest = async () => {
     if (!typebot || !webhook) return
     setIsTestResponseLoading(true)
     await Promise.all([updateWebhook(webhook.id, webhook), save()])
@@ -96,6 +96,9 @@ export const WebhookAdvancedConfigForm = ({
     setIsTestResponseLoading(false)
   }
 
+  const updateIsExecutedOnClient = (isExecutedOnClient: boolean) =>
+    onOptionsChange({ ...options, isExecutedOnClient })
+
   const ResponseMappingInputs = useMemo(
     () =>
       function Component(props: TableListItemProps<ResponseVariableMapping>) {
@@ -106,93 +109,96 @@ export const WebhookAdvancedConfigForm = ({
 
   return (
     <>
-      <SwitchWithLabel
+      <SwitchWithRelatedSettings
         label="Advanced configuration"
         initialValue={options.isAdvancedConfig ?? true}
-        onCheckChange={handleAdvancedConfigChange}
-      />
-      {(options.isAdvancedConfig ?? true) && (
-        <>
-          <HStack justify="space-between">
-            <Text>Method:</Text>
-            <DropdownList
-              currentItem={webhook.method as HttpMethod}
-              onItemSelect={handleMethodChange}
-              items={Object.values(HttpMethod)}
-            />
-          </HStack>
-          <Accordion allowMultiple>
-            <AccordionItem>
-              <AccordionButton justifyContent="space-between">
-                Query params
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel pt="4">
-                <TableList<KeyValue>
-                  initialItems={webhook.queryParams}
-                  onItemsChange={handleQueryParamsChange}
-                  Item={QueryParamsInputs}
-                  addLabel="Add a param"
+        onCheckChange={updateAdvancedConfig}
+      >
+        <SwitchWithLabel
+          label="Execute on client"
+          moreInfoContent="If enabled, the webhook will be executed on the client. It means it will be executed in the browser of your visitor. Make sure to enable CORS and do not expose sensitive data."
+          initialValue={options.isExecutedOnClient ?? false}
+          onCheckChange={updateIsExecutedOnClient}
+        />
+        <HStack justify="space-between">
+          <Text>Method:</Text>
+          <DropdownList
+            currentItem={webhook.method as HttpMethod}
+            onItemSelect={updateMethod}
+            items={Object.values(HttpMethod)}
+          />
+        </HStack>
+        <Accordion allowMultiple>
+          <AccordionItem>
+            <AccordionButton justifyContent="space-between">
+              Query params
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel pt="4">
+              <TableList<KeyValue>
+                initialItems={webhook.queryParams}
+                onItemsChange={updateQueryParams}
+                Item={QueryParamsInputs}
+                addLabel="Add a param"
+              />
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton justifyContent="space-between">
+              Headers
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel pt="4">
+              <TableList<KeyValue>
+                initialItems={webhook.headers}
+                onItemsChange={updateHeaders}
+                Item={HeadersInputs}
+                addLabel="Add a value"
+              />
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton justifyContent="space-between">
+              Body
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel py={4} as={Stack} spacing="6">
+              <SwitchWithLabel
+                label="Custom body"
+                initialValue={options.isCustomBody ?? true}
+                onCheckChange={updateIsCustomBody}
+              />
+              {(options.isCustomBody ?? true) && (
+                <CodeEditor
+                  defaultValue={webhook.body ?? ''}
+                  lang="json"
+                  onChange={updateBody}
+                  debounceTimeout={0}
                 />
-              </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionButton justifyContent="space-between">
-                Headers
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel pt="4">
-                <TableList<KeyValue>
-                  initialItems={webhook.headers}
-                  onItemsChange={handleHeadersChange}
-                  Item={HeadersInputs}
-                  addLabel="Add a value"
-                />
-              </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionButton justifyContent="space-between">
-                Body
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel py={4} as={Stack} spacing="6">
-                <SwitchWithLabel
-                  label="Custom body"
-                  initialValue={options.isCustomBody ?? true}
-                  onCheckChange={handleBodyFormStateChange}
-                />
-                {(options.isCustomBody ?? true) && (
-                  <CodeEditor
-                    defaultValue={webhook.body ?? ''}
-                    lang="json"
-                    onChange={handleBodyChange}
-                    debounceTimeout={0}
-                  />
-                )}
-              </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionButton justifyContent="space-between">
-                Variable values for test
-                <AccordionIcon />
-              </AccordionButton>
-              <AccordionPanel pt="4">
-                <TableList<VariableForTest>
-                  initialItems={
-                    options?.variablesForTest ?? { byId: {}, allIds: [] }
-                  }
-                  onItemsChange={handleVariablesChange}
-                  Item={VariableForTestInputs}
-                  addLabel="Add an entry"
-                />
-              </AccordionPanel>
-            </AccordionItem>
-          </Accordion>
-        </>
-      )}
+              )}
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton justifyContent="space-between">
+              Variable values for test
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel pt="4">
+              <TableList<VariableForTest>
+                initialItems={
+                  options?.variablesForTest ?? { byId: {}, allIds: [] }
+                }
+                onItemsChange={updateVariablesForTest}
+                Item={VariableForTestInputs}
+                addLabel="Add an entry"
+              />
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </SwitchWithRelatedSettings>
       {webhook.url && (
         <Button
-          onClick={handleTestRequestClick}
+          onClick={executeTestRequest}
           colorScheme="blue"
           isLoading={isTestResponseLoading}
         >
@@ -211,7 +217,7 @@ export const WebhookAdvancedConfigForm = ({
           <AccordionPanel pt="4">
             <TableList<ResponseVariableMapping>
               initialItems={options.responseVariableMapping}
-              onItemsChange={handleResponseMappingChange}
+              onItemsChange={updateResponseVariableMapping}
               Item={ResponseMappingInputs}
               addLabel="Add an entry"
             />

apps/viewer/src/features/blocks/integrations/chatwoot/executeChatwootBlock.ts

@@ -71,8 +71,7 @@ if (window.$chatwoot) {
 
 export const executeChatwootBlock = (
   { typebot, result }: SessionState,
-  block: ChatwootBlock,
-  lastBubbleBlockId?: string
+  block: ChatwootBlock
 ): ExecuteIntegrationResponse => {
   const chatwootCode =
     block.options.task === 'Close widget'
@@ -88,7 +87,6 @@ export const executeChatwootBlock = (
     outgoingEdgeId: block.outgoingEdgeId,
     clientSideActions: [
       {
-        lastBubbleBlockId,
         chatwoot: {
           scriptToExecute: {
             content: parseVariables(typebot.variables, { fieldToParse: 'id' })(

apps/viewer/src/features/blocks/integrations/googleAnalytics/executeGoogleAnalyticsBlock.ts

@@ -5,8 +5,7 @@ import { GoogleAnalyticsBlock, SessionState } from '@typebot.io/schemas'
 
 export const executeGoogleAnalyticsBlock = (
   { typebot: { variables } }: SessionState,
-  block: GoogleAnalyticsBlock,
-  lastBubbleBlockId?: string
+  block: GoogleAnalyticsBlock
 ): ExecuteIntegrationResponse => {
   const googleAnalytics = deepParseVariables(variables)(block.options)
   return {
@@ -19,7 +18,6 @@ export const executeGoogleAnalyticsBlock = (
             ? Number(googleAnalytics.value)
             : undefined,
         },
-        lastBubbleBlockId,
       },
     ],
   }

apps/viewer/src/features/blocks/integrations/webhook/executeWebhookBlock.ts

@@ -4,7 +4,6 @@ import {
   ZapierBlock,
   MakeComBlock,
   PabblyConnectBlock,
-  VariableWithUnknowValue,
   SessionState,
   Webhook,
   Typebot,
@@ -17,17 +16,23 @@ import {
   KeyValue,
   ReplyLog,
   ResultInSession,
+  ExecutableWebhook,
 } from '@typebot.io/schemas'
 import { stringify } from 'qs'
-import { byId, omit } from '@typebot.io/lib'
+import { omit } from '@typebot.io/lib'
 import { parseAnswers } from '@typebot.io/lib/results'
-import got, { Method, Headers, HTTPError } from 'got'
+import got, { Method, HTTPError, OptionsInit } from 'got'
 import { parseSampleResult } from './parseSampleResult'
 import { ExecuteIntegrationResponse } from '@/features/chat/types'
 import { saveErrorLog } from '@/features/logs/saveErrorLog'
 import { saveSuccessLog } from '@/features/logs/saveSuccessLog'
-import { updateVariables } from '@/features/variables/updateVariables'
 import { parseVariables } from '@/features/variables/parseVariables'
+import { resumeWebhookExecution } from './resumeWebhookExecution'
+
+type ParsedWebhook = ExecutableWebhook & {
+  basicAuth: { username?: string; password?: string }
+  isJson: boolean
+}
 
 export const executeWebhookBlock = async (
   state: SessionState,
@@ -51,70 +56,34 @@ export const executeWebhookBlock = async (
     return { outgoingEdgeId: block.outgoingEdgeId, logs: [log] }
   }
   const preparedWebhook = prepareWebhookAttributes(webhook, block.options)
-  const webhookResponse = await executeWebhook({ typebot })(
-    preparedWebhook,
-    typebot.variables,
+  const parsedWebhook = await parseWebhookAttributes(
+    typebot,
     block.groupId,
     result
-  )
-  const status = webhookResponse.statusCode.toString()
-  const isError = status.startsWith('4') || status.startsWith('5')
-
-  if (isError) {
+  )(preparedWebhook)
+  if (!parsedWebhook) {
     log = {
       status: 'error',
-      description: `Webhook returned error: ${webhookResponse.data}`,
-      details: JSON.stringify(webhookResponse.data, null, 2).substring(0, 1000),
+      description: `Couldn't parse webhook attributes`,
     }
     result &&
       (await saveErrorLog({
         resultId: result.id,
         message: log.description,
-        details: log.details,
-      }))
-  } else {
-    log = {
-      status: 'success',
-      description: `Webhook executed successfully!`,
-      details: JSON.stringify(webhookResponse.data, null, 2).substring(0, 1000),
-    }
-    result &&
-      (await saveSuccessLog({
-        resultId: result.id,
-        message: log.description,
-        details: JSON.stringify(webhookResponse.data, null, 2).substring(
-          0,
-          1000
-        ),
       }))
+    return { outgoingEdgeId: block.outgoingEdgeId, logs: [log] }
   }
-
-  const newVariables = block.options.responseVariableMapping.reduce<
-    VariableWithUnknowValue[]
-  >((newVariables, varMapping) => {
-    if (!varMapping?.bodyPath || !varMapping.variableId) return newVariables
-    const existingVariable = typebot.variables.find(byId(varMapping.variableId))
-    if (!existingVariable) return newVariables
-    const func = Function(
-      'data',
-      `return data.${parseVariables(typebot.variables)(varMapping?.bodyPath)}`
-    )
-    try {
-      const value: unknown = func(webhookResponse)
-      return [...newVariables, { ...existingVariable, value }]
-    } catch (err) {
-      return newVariables
-    }
-  }, [])
-  if (newVariables.length > 0) {
-    const newSessionState = await updateVariables(state)(newVariables)
+  if (block.options.isExecutedOnClient)
     return {
       outgoingEdgeId: block.outgoingEdgeId,
-      newSessionState,
+      clientSideActions: [
+        {
+          webhookToExecute: parsedWebhook,
+        },
+      ],
     }
-  }
-
-  return { outgoingEdgeId: block.outgoingEdgeId, logs: log ? [log] : undefined }
+  const webhookResponse = await executeWebhook(parsedWebhook, result)
+  return resumeWebhookExecution(state, block)(webhookResponse)
 }
 
 const prepareWebhookAttributes = (
@@ -131,19 +100,15 @@ const prepareWebhookAttributes = (
 
 const checkIfBodyIsAVariable = (body: string) => /^{{.+}}$/.test(body)
 
-export const executeWebhook =
-  ({ typebot }: Pick<SessionState, 'typebot'>) =>
-  async (
-    webhook: Webhook,
-    variables: Variable[],
+const parseWebhookAttributes =
+  (
+    typebot: SessionState['typebot'],
     groupId: string,
     result: ResultInSession
-  ): Promise<WebhookResponse> => {
-    if (!webhook.url || !webhook.method)
-      return {
-        statusCode: 400,
-        data: { message: `Webhook doesn't have url or method` },
-      }
+  ) =>
+  async (webhook: Webhook): Promise<ParsedWebhook | undefined> => {
+    if (!webhook.url || !webhook.method) return
+    const { variables } = typebot
     const basicAuth: { username?: string; password?: string } = {}
     const basicAuthHeaderIdx = webhook.headers.findIndex(
       (h) =>
@@ -161,13 +126,11 @@ export const executeWebhook =
       webhook.headers.splice(basicAuthHeaderIdx, 1)
     }
     const headers = convertKeyValueTableToObject(webhook.headers, variables) as
-      | Headers
+      | ExecutableWebhook['headers']
       | undefined
     const queryParams = stringify(
       convertKeyValueTableToObject(webhook.queryParams, variables)
     )
-    const contentType = headers ? headers['Content-Type'] : undefined
-
     const bodyContent = await getBodyContent(
       typebot,
       []
@@ -186,62 +149,62 @@ export const executeWebhook =
           )
         : { data: undefined, isJson: false }
 
-    const request = {
+    return {
       url: parseVariables(variables)(
         webhook.url + (queryParams !== '' ? `?${queryParams}` : '')
       ),
-      method: webhook.method as Method,
+      basicAuth,
+      method: webhook.method,
       headers,
-      ...basicAuth,
-      json:
-        !contentType?.includes('x-www-form-urlencoded') && body && isJson
-          ? body
-          : undefined,
-      form:
-        contentType?.includes('x-www-form-urlencoded') && body
-          ? body
-          : undefined,
-      body: body && !isJson ? body : undefined,
+      body,
+      isJson,
     }
-    try {
-      const response = await got(request.url, omit(request, 'url'))
-      await saveSuccessLog({
-        resultId: result.id,
-        message: 'Webhook successfuly executed.',
-        details: {
-          statusCode: response.statusCode,
-          request,
-          response: safeJsonParse(response.body).data,
-        },
-      })
-      return {
+  }
+
+export const executeWebhook = async (
+  webhook: ParsedWebhook,
+  result: ResultInSession
+): Promise<WebhookResponse> => {
+  const { headers, url, method, basicAuth, body, isJson } = webhook
+  const contentType = headers ? headers['Content-Type'] : undefined
+
+  const request = {
+    url,
+    method: method as Method,
+    headers,
+    ...(basicAuth ?? {}),
+    json:
+      !contentType?.includes('x-www-form-urlencoded') && body && isJson
+        ? body
+        : undefined,
+    form:
+      contentType?.includes('x-www-form-urlencoded') && body ? body : undefined,
+    body: body && !isJson ? (body as string) : undefined,
+  } satisfies OptionsInit
+  try {
+    const response = await got(request.url, omit(request, 'url'))
+    await saveSuccessLog({
+      resultId: result.id,
+      message: 'Webhook successfuly executed.',
+      details: {
         statusCode: response.statusCode,
-        data: safeJsonParse(response.body).data,
-      }
-    } catch (error) {
-      if (error instanceof HTTPError) {
-        const response = {
-          statusCode: error.response.statusCode,
-          data: safeJsonParse(error.response.body as string).data,
-        }
-        await saveErrorLog({
-          resultId: result.id,
-          message: 'Webhook returned an error',
-          details: {
-            request,
-            response,
-          },
-        })
-        return response
-      }
+        request,
+        response: safeJsonParse(response.body).data,
+      },
+    })
+    return {
+      statusCode: response.statusCode,
+      data: safeJsonParse(response.body).data,
+    }
+  } catch (error) {
+    if (error instanceof HTTPError) {
       const response = {
-        statusCode: 500,
-        data: { message: `Error from Typebot server: ${error}` },
+        statusCode: error.response.statusCode,
+        data: safeJsonParse(error.response.body as string).data,
       }
-      console.error(error)
       await saveErrorLog({
         resultId: result.id,
-        message: 'Webhook failed to execute',
+        message: 'Webhook returned an error',
         details: {
           request,
           response,
@@ -249,7 +212,22 @@ export const executeWebhook =
       })
       return response
     }
+    const response = {
+      statusCode: 500,
+      data: { message: `Error from Typebot server: ${error}` },
+    }
+    console.error(error)
+    await saveErrorLog({
+      resultId: result.id,
+      message: 'Webhook failed to execute',
+      details: {
+        request,
+        response,
+      },
+    })
+    return response
   }
+}
 
 const getBodyContent =
   (

apps/viewer/src/features/blocks/integrations/webhook/resumeWebhookExecution.ts

@@ -0,0 +1,87 @@
+import { ExecuteIntegrationResponse } from '@/features/chat/types'
+import { saveErrorLog } from '@/features/logs/saveErrorLog'
+import { saveSuccessLog } from '@/features/logs/saveSuccessLog'
+import { parseVariables } from '@/features/variables/parseVariables'
+import { updateVariables } from '@/features/variables/updateVariables'
+import { byId } from '@typebot.io/lib'
+import {
+  MakeComBlock,
+  PabblyConnectBlock,
+  VariableWithUnknowValue,
+  WebhookBlock,
+  ZapierBlock,
+} from '@typebot.io/schemas'
+import { ReplyLog, SessionState } from '@typebot.io/schemas/features/chat'
+
+export const resumeWebhookExecution =
+  (
+    state: SessionState,
+    block: WebhookBlock | ZapierBlock | MakeComBlock | PabblyConnectBlock
+  ) =>
+  async (response: {
+    statusCode: number
+    data?: unknown
+  }): Promise<ExecuteIntegrationResponse> => {
+    const { typebot, result } = state
+    let log: ReplyLog | undefined
+    const status = response.statusCode.toString()
+    const isError = status.startsWith('4') || status.startsWith('5')
+
+    if (isError) {
+      log = {
+        status: 'error',
+        description: `Webhook returned error: ${response.data}`,
+        details: JSON.stringify(response.data, null, 2).substring(0, 1000),
+      }
+      result &&
+        (await saveErrorLog({
+          resultId: result.id,
+          message: log.description,
+          details: log.details,
+        }))
+    } else {
+      log = {
+        status: 'success',
+        description: `Webhook executed successfully!`,
+        details: JSON.stringify(response.data, null, 2).substring(0, 1000),
+      }
+      result &&
+        (await saveSuccessLog({
+          resultId: result.id,
+          message: log.description,
+          details: JSON.stringify(response.data, null, 2).substring(0, 1000),
+        }))
+    }
+
+    const newVariables = block.options.responseVariableMapping.reduce<
+      VariableWithUnknowValue[]
+    >((newVariables, varMapping) => {
+      if (!varMapping?.bodyPath || !varMapping.variableId) return newVariables
+      const existingVariable = typebot.variables.find(
+        byId(varMapping.variableId)
+      )
+      if (!existingVariable) return newVariables
+      const func = Function(
+        'data',
+        `return data.${parseVariables(typebot.variables)(varMapping?.bodyPath)}`
+      )
+      try {
+        const value: unknown = func(response)
+        return [...newVariables, { ...existingVariable, value }]
+      } catch (err) {
+        return newVariables
+      }
+    }, [])
+    if (newVariables.length > 0) {
+      const newSessionState = await updateVariables(state)(newVariables)
+      return {
+        outgoingEdgeId: block.outgoingEdgeId,
+        newSessionState,
+      }
+    }
+
+    return {
+      outgoingEdgeId: block.outgoingEdgeId,
+      logs: log ? [log] : undefined,
+    }
+  }

apps/viewer/src/features/blocks/logic/redirect/executeRedirect.ts

@@ -5,15 +5,13 @@ import { ExecuteLogicResponse } from '@/features/chat/types'
 
 export const executeRedirect = (
   { typebot: { variables } }: SessionState,
-  block: RedirectBlock,
-  lastBubbleBlockId?: string
+  block: RedirectBlock
 ): ExecuteLogicResponse => {
   if (!block.options?.url) return { outgoingEdgeId: block.outgoingEdgeId }
   const formattedUrl = sanitizeUrl(parseVariables(variables)(block.options.url))
   return {
     clientSideActions: [
       {
-        lastBubbleBlockId,
         redirect: { url: formattedUrl, isNewTab: block.options.isNewTab },
       },
     ],

apps/viewer/src/features/blocks/logic/script/executeScript.ts

@@ -6,8 +6,7 @@ import { ScriptBlock, SessionState, Variable } from '@typebot.io/schemas'
 
 export const executeScript = (
   { typebot: { variables } }: SessionState,
-  block: ScriptBlock,
-  lastBubbleBlockId?: string
+  block: ScriptBlock
 ): ExecuteLogicResponse => {
   if (!block.options.content) return { outgoingEdgeId: block.outgoingEdgeId }
 
@@ -21,7 +20,6 @@ export const executeScript = (
     clientSideActions: [
       {
         scriptToExecute: scriptToExecute,
-        lastBubbleBlockId,
       },
     ],
   }

apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts

@@ -8,8 +8,7 @@ import { parseScriptToExecuteClientSideAction } from '../script/executeScript'
 
 export const executeSetVariable = async (
   state: SessionState,
-  block: SetVariableBlock,
-  lastBubbleBlockId?: string
+  block: SetVariableBlock
 ): Promise<ExecuteLogicResponse> => {
   const { variables } = state.typebot
   if (!block.options?.variableId)
@@ -28,7 +27,6 @@ export const executeSetVariable = async (
           setVariable: {
             scriptToExecute,
           },
-          lastBubbleBlockId,
         },
       ],
     }

apps/viewer/src/features/blocks/logic/wait/executeWait.ts

@@ -4,8 +4,7 @@ import { SessionState, WaitBlock } from '@typebot.io/schemas'
 
 export const executeWait = async (
   { typebot: { variables } }: SessionState,
-  block: WaitBlock,
-  lastBubbleBlockId?: string
+  block: WaitBlock
 ): Promise<ExecuteLogicResponse> => {
   if (!block.options.secondsToWaitFor)
     return { outgoingEdgeId: block.outgoingEdgeId }
@@ -19,7 +18,6 @@ export const executeWait = async (
       ? [
           {
             wait: { secondsToWaitFor: parsedSecondsToWaitFor },
-            lastBubbleBlockId,
           },
         ]
       : undefined,

apps/viewer/src/features/chat/helpers/continueBotFlow.ts

@@ -14,6 +14,7 @@ import {
   ResultInSession,
   SessionState,
   SetVariableBlock,
+  WebhookBlock,
 } from '@typebot.io/schemas'
 import { isInputBlock, isNotDefined, byId, isDefined } from '@typebot.io/lib'
 import { executeGroup } from './executeGroup'
@@ -26,6 +27,7 @@ import { updateVariables } from '@/features/variables/updateVariables'
 import { parseVariables } from '@/features/variables/parseVariables'
 import { OpenAIBlock } from '@typebot.io/schemas/features/blocks/integrations/openai'
 import { resumeChatCompletion } from '@/features/blocks/integrations/openai/resumeChatCompletion'
+import { resumeWebhookExecution } from '@/features/blocks/integrations/webhook/resumeWebhookExecution'
 
 export const continueBotFlow =
   (state: SessionState) =>
@@ -60,6 +62,12 @@ export const continueBotFlow =
         }
         newSessionState = await updateVariables(state)([newVariable])
       }
+    } else if (reply && block.type === IntegrationBlockType.WEBHOOK) {
+      const result = await resumeWebhookExecution(
+        state,
+        block
+      )(JSON.parse(reply))
+      if (result.newSessionState) newSessionState = result.newSessionState
     } else if (
       isDefined(reply) &&
       block.type === IntegrationBlockType.OPEN_AI &&
@@ -250,7 +258,7 @@ const computeStorageUsed = async (reply: string) => {
 const getOutgoingEdgeId =
   ({ typebot: { variables } }: Pick<SessionState, 'typebot'>) =>
   (
-    block: InputBlock | SetVariableBlock | OpenAIBlock,
+    block: InputBlock | SetVariableBlock | OpenAIBlock | WebhookBlock,
     reply: string | null
   ) => {
     if (

apps/viewer/src/features/chat/helpers/executeGroup.ts

@@ -67,9 +67,9 @@ export const executeGroup =
           logs,
         }
       const executionResponse = isLogicBlock(block)
-        ? await executeLogic(newSessionState, lastBubbleBlockId)(block)
+        ? await executeLogic(newSessionState)(block)
         : isIntegrationBlock(block)
-        ? await executeIntegration(newSessionState, lastBubbleBlockId)(block)
+        ? await executeIntegration(newSessionState)(block)
         : null
 
       if (!executionResponse) continue
@@ -83,12 +83,17 @@ export const executeGroup =
       ) {
         clientSideActions = [
           ...(clientSideActions ?? []),
-          ...executionResponse.clientSideActions,
+          ...executionResponse.clientSideActions.map((action) => ({
+            ...action,
+            lastBubbleBlockId,
+          })),
         ]
         if (
           executionResponse.clientSideActions?.find(
             (action) =>
-              'setVariable' in action || 'streamOpenAiChatCompletion' in action
+              'setVariable' in action ||
+              'streamOpenAiChatCompletion' in action ||
+              'webhookToExecute' in action
           )
         ) {
           return {

apps/viewer/src/features/chat/helpers/executeIntegration.ts

@@ -12,15 +12,15 @@ import {
 import { ExecuteIntegrationResponse } from '../types'
 
 export const executeIntegration =
-  (state: SessionState, lastBubbleBlockId?: string) =>
+  (state: SessionState) =>
   async (block: IntegrationBlock): Promise<ExecuteIntegrationResponse> => {
     switch (block.type) {
       case IntegrationBlockType.GOOGLE_SHEETS:
         return executeGoogleSheetBlock(state, block)
       case IntegrationBlockType.CHATWOOT:
-        return executeChatwootBlock(state, block, lastBubbleBlockId)
+        return executeChatwootBlock(state, block)
       case IntegrationBlockType.GOOGLE_ANALYTICS:
-        return executeGoogleAnalyticsBlock(state, block, lastBubbleBlockId)
+        return executeGoogleAnalyticsBlock(state, block)
       case IntegrationBlockType.EMAIL:
         return executeSendEmailBlock(state, block)
       case IntegrationBlockType.WEBHOOK:

apps/viewer/src/features/chat/helpers/executeLogic.ts

@@ -10,21 +10,21 @@ import { executeTypebotLink } from '@/features/blocks/logic/typebotLink/executeT
 import { executeAbTest } from '@/features/blocks/logic/abTest/executeAbTest'
 
 export const executeLogic =
-  (state: SessionState, lastBubbleBlockId?: string) =>
+  (state: SessionState) =>
   async (block: LogicBlock): Promise<ExecuteLogicResponse> => {
     switch (block.type) {
       case LogicBlockType.SET_VARIABLE:
-        return executeSetVariable(state, block, lastBubbleBlockId)
+        return executeSetVariable(state, block)
       case LogicBlockType.CONDITION:
         return executeCondition(state, block)
       case LogicBlockType.REDIRECT:
-        return executeRedirect(state, block, lastBubbleBlockId)
+        return executeRedirect(state, block)
       case LogicBlockType.SCRIPT:
-        return executeScript(state, block, lastBubbleBlockId)
+        return executeScript(state, block)
       case LogicBlockType.TYPEBOT_LINK:
         return executeTypebotLink(state, block)
       case LogicBlockType.WAIT:
-        return executeWait(state, block, lastBubbleBlockId)
+        return executeWait(state, block)
       case LogicBlockType.JUMP:
         return executeJumpBlock(state, block.options)
       case LogicBlockType.AB_TEST:

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
     "eslint-plugin-solid": "0.12.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
-    "rollup": "3.23.0",
+    "rollup": "3.20.2",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-typescript-paths": "1.4.0",
     "tailwindcss": "3.3.2",

packages/embeds/js/src/features/blocks/integrations/openai/streamChat.ts

@@ -0,0 +1,32 @@
+import { getOpenAiStreamerQuery } from '@/queries/getOpenAiStreamerQuery'
+import { ClientSideActionContext } from '@/types'
+
+export const streamChat =
+  (context: ClientSideActionContext) =>
+  async (
+    messages: {
+      content?: string | undefined
+      role?: 'system' | 'user' | 'assistant' | undefined
+    }[],
+    { onStreamedMessage }: { onStreamedMessage?: (message: string) => void }
+  ) => {
+    const data = await getOpenAiStreamerQuery(context)(messages)
+
+    if (!data) {
+      return
+    }
+
+    const reader = data.getReader()
+    const decoder = new TextDecoder()
+    let done = false
+
+    let message = ''
+    while (!done) {
+      const { value, done: doneReading } = await reader.read()
+      done = doneReading
+      const chunkValue = decoder.decode(value)
+      message += chunkValue
+      onStreamedMessage?.(message)
+    }
+    return message
+  }

packages/embeds/js/src/features/blocks/integrations/webhook/executeWebhook.ts

@@ -0,0 +1,23 @@
+import { ExecutableWebhook } from '@typebot.io/schemas'
+
+export const executeWebhook = async (
+  webhookToExecute: ExecutableWebhook
+): Promise<string> => {
+  const { url, method, body, headers } = webhookToExecute
+  try {
+    const response = await fetch(url, {
+      method,
+      body: method !== 'GET' && body ? JSON.stringify(body) : undefined,
+      headers,
+    })
+    const statusCode = response.status
+    const data = await response.json()
+    return JSON.stringify({ statusCode, data })
+  } catch (error) {
+    console.error(error)
+    return JSON.stringify({
+      statusCode: 500,
+      data: 'An error occured while executing the webhook on the client',
+    })
+  }
+}

packages/embeds/js/src/types.ts

@@ -22,3 +22,8 @@ export type OutgoingLog = {
   description: string
   details?: unknown
 }
+
+export type ClientSideActionContext = {
+  apiHost?: string
+  sessionId: string
+}

packages/embeds/js/src/utils/executeClientSideActions.ts

@@ -1,17 +1,14 @@
 import { executeChatwoot } from '@/features/blocks/integrations/chatwoot'
 import { executeGoogleAnalyticsBlock } from '@/features/blocks/integrations/googleAnalytics/utils/executeGoogleAnalytics'
+import { streamChat } from '@/features/blocks/integrations/openai/streamChat'
 import { executeRedirect } from '@/features/blocks/logic/redirect'
 import { executeScript } from '@/features/blocks/logic/script/executeScript'
 import { executeSetVariable } from '@/features/blocks/logic/setVariable/executeSetVariable'
 import { executeWait } from '@/features/blocks/logic/wait/utils/executeWait'
-import { getOpenAiStreamerQuery } from '@/queries/getOpenAiStreamerQuery'
+import { executeWebhook } from '@/features/blocks/integrations/webhook/executeWebhook'
+import { ClientSideActionContext } from '@/types'
 import type { ChatReply } from '@typebot.io/schemas'
 
-type ClientSideActionContext = {
-  apiHost?: string
-  sessionId: string
-}
-
 export const executeClientSideAction = async (
   clientSideAction: NonNullable<ChatReply['clientSideActions']>[0],
   context: ClientSideActionContext,
@@ -44,34 +41,8 @@ export const executeClientSideAction = async (
     )
     return { replyToSend: text }
   }
-}
-
-const streamChat =
-  (context: ClientSideActionContext) =>
-  async (
-    messages: {
-      content?: string | undefined
-      role?: 'system' | 'user' | 'assistant' | undefined
-    }[],
-    { onStreamedMessage }: { onStreamedMessage?: (message: string) => void }
-  ) => {
-    const data = await getOpenAiStreamerQuery(context)(messages)
-
-    if (!data) {
-      return
-    }
-
-    const reader = data.getReader()
-    const decoder = new TextDecoder()
-    let done = false
-
-    let message = ''
-    while (!done) {
-      const { value, done: doneReading } = await reader.read()
-      done = doneReading
-      const chunkValue = decoder.decode(value)
-      message += chunkValue
-      onStreamedMessage?.(message)
-    }
-    return message
+  if ('webhookToExecute' in clientSideAction) {
+    const response = await executeWebhook(clientSideAction.webhookToExecute)
+    return { replyToSend: response }
   }
+}

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
     "eslint-config-custom": "workspace:*",
     "@typebot.io/schemas": "workspace:*",
     "react": "18.2.0",
-    "rollup": "3.23.0",
+    "rollup": "3.20.2",
     "rollup-plugin-typescript-paths": "1.4.0",
     "@typebot.io/tsconfig": "workspace:*",
     "tslib": "2.5.2",

packages/schemas/features/blocks/integrations/webhook.ts

@@ -19,6 +19,7 @@ export const webhookOptionsSchema = z.object({
   responseVariableMapping: z.array(responseVariableMappingSchema),
   isAdvancedConfig: z.boolean().optional(),
   isCustomBody: z.boolean().optional(),
+  isExecutedOnClient: z.boolean().optional(),
 })
 
 export const webhookBlockSchema = blockBaseSchema.merge(

packages/schemas/features/chat.ts

@@ -18,6 +18,7 @@ import { answerSchema } from './answer'
 import { BubbleBlockType } from './blocks/bubbles/enums'
 import { inputBlockSchemas } from './blocks/schemas'
 import { chatCompletionMessageSchema } from './blocks/integrations/openai'
+import { executableWebhookSchema } from './webhooks'
 
 const typebotInSessionStateSchema = publicTypebotSchema.pick({
   id: true,
@@ -237,6 +238,11 @@ const clientSideActionSchema = z
           }),
         })
       )
+      .or(
+        z.object({
+          webhookToExecute: executableWebhookSchema,
+        })
+      )
   )
 
 export const chatReplySchema = z.object({

packages/schemas/features/webhooks.ts

@@ -1,4 +1,5 @@
 import { Webhook as WebhookFromPrisma } from '@typebot.io/prisma'
+import { z } from 'zod'
 
 export enum HttpMethod {
   POST = 'POST',
@@ -36,3 +37,12 @@ export const defaultWebhookAttributes: Omit<
   headers: [],
   queryParams: [],
 }
+
+export const executableWebhookSchema = z.object({
+  url: z.string(),
+  headers: z.record(z.string()).optional(),
+  body: z.unknown().optional(),
+  method: z.nativeEnum(HttpMethod).optional(),
+})
+
+export type ExecutableWebhook = z.infer<typeof executableWebhookSchema>

pnpm-lock.yaml

@@ -825,16 +825,16 @@ importers:
         version: 7.21.5(@babel/core@7.21.8)
       '@rollup/plugin-babel':
         specifier: 6.0.3
-        version: 6.0.3(@babel/core@7.21.8)(rollup@3.23.0)
+        version: 6.0.3(@babel/core@7.21.8)(rollup@3.20.2)
       '@rollup/plugin-node-resolve':
         specifier: 15.0.2
-        version: 15.0.2(rollup@3.23.0)
+        version: 15.0.2(rollup@3.20.2)
       '@rollup/plugin-terser':
         specifier: 0.4.3
-        version: 0.4.3(rollup@3.23.0)
+        version: 0.4.3(rollup@3.20.2)
       '@rollup/plugin-typescript':
         specifier: 11.1.1
-        version: 11.1.1(rollup@3.23.0)(tslib@2.5.2)(typescript@5.0.4)
+        version: 11.1.1(rollup@3.20.2)(tslib@2.5.2)(typescript@5.0.4)
       '@typebot.io/lib':
         specifier: workspace:*
         version: link:../../lib
@@ -866,8 +866,8 @@ importers:
         specifier: 18.2.0
         version: 18.2.0
       rollup:
-        specifier: 3.23.0
-        version: 3.23.0
+        specifier: 3.20.2
+        version: 3.20.2
       rollup-plugin-postcss:
         specifier: 4.0.2
         version: 4.0.2(postcss@8.4.23)
@@ -895,16 +895,16 @@ importers:
         version: 7.21.5(@babel/core@7.21.8)
       '@rollup/plugin-babel':
         specifier: 6.0.3
-        version: 6.0.3(@babel/core@7.21.8)(rollup@3.23.0)
+        version: 6.0.3(@babel/core@7.21.8)(rollup@3.20.2)
       '@rollup/plugin-node-resolve':
         specifier: 15.0.2
-        version: 15.0.2(rollup@3.23.0)
+        version: 15.0.2(rollup@3.20.2)
       '@rollup/plugin-terser':
         specifier: 0.4.3
-        version: 0.4.3(rollup@3.23.0)
+        version: 0.4.3(rollup@3.20.2)
       '@rollup/plugin-typescript':
         specifier: 11.1.1
-        version: 11.1.1(rollup@3.23.0)(tslib@2.5.2)(typescript@5.0.4)
+        version: 11.1.1(rollup@3.20.2)(tslib@2.5.2)(typescript@5.0.4)
       '@typebot.io/js':
         specifier: workspace:*
         version: link:../js
@@ -936,8 +936,8 @@ importers:
         specifier: 18.2.0
         version: 18.2.0
       rollup:
-        specifier: 3.23.0
-        version: 3.23.0
+        specifier: 3.20.2
+        version: 3.20.2
       rollup-plugin-typescript-paths:
         specifier: 1.4.0
         version: 1.4.0(typescript@5.0.4)
@@ -7675,7 +7675,7 @@ packages:
       reselect: 4.1.7
     dev: false
 
-  /@rollup/plugin-babel@6.0.3(@babel/core@7.21.8)(rollup@3.23.0):
+  /@rollup/plugin-babel@6.0.3(@babel/core@7.21.8)(rollup@3.20.2):
     resolution: {integrity: sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -7690,8 +7690,8 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-module-imports': 7.18.6
-      '@rollup/pluginutils': 5.0.2(rollup@3.23.0)
-      rollup: 3.23.0
+      '@rollup/pluginutils': 5.0.2(rollup@3.20.2)
+      rollup: 3.20.2
     dev: true
 
   /@rollup/plugin-commonjs@24.0.0(rollup@2.78.0):
@@ -7712,7 +7712,7 @@ packages:
       rollup: 2.78.0
     dev: false
 
-  /@rollup/plugin-node-resolve@15.0.2(rollup@3.23.0):
+  /@rollup/plugin-node-resolve@15.0.2(rollup@3.20.2):
     resolution: {integrity: sha512-Y35fRGUjC3FaurG722uhUuG8YHOJRJQbI6/CkbRkdPotSpDj9NtIN85z1zrcyDcCQIW4qp5mgG72U+gJ0TAFEg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -7721,16 +7721,16 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.23.0)
+      '@rollup/pluginutils': 5.0.2(rollup@3.20.2)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
       is-module: 1.0.0
       resolve: 1.22.1
-      rollup: 3.23.0
+      rollup: 3.20.2
     dev: true
 
-  /@rollup/plugin-terser@0.4.3(rollup@3.23.0):
+  /@rollup/plugin-terser@0.4.3(rollup@3.20.2):
     resolution: {integrity: sha512-EF0oejTMtkyhrkwCdg0HJ0IpkcaVg1MMSf2olHb2Jp+1mnLM04OhjpJWGma4HobiDTF0WCyViWuvadyE9ch2XA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -7739,13 +7739,13 @@ packages:
       rollup:
         optional: true
     dependencies:
-      rollup: 3.23.0
+      rollup: 3.20.2
       serialize-javascript: 6.0.1
       smob: 1.1.1
       terser: 5.17.6
     dev: true
 
-  /@rollup/plugin-typescript@11.1.1(rollup@3.23.0)(tslib@2.5.2)(typescript@5.0.4):
+  /@rollup/plugin-typescript@11.1.1(rollup@3.20.2)(tslib@2.5.2)(typescript@5.0.4):
     resolution: {integrity: sha512-Ioir+x5Bejv72Lx2Zbz3/qGg7tvGbxQZALCLoJaGrkNXak/19+vKgKYJYM3i/fJxvsb23I9FuFQ8CUBEfsmBRg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -7758,9 +7758,9 @@ packages:
       tslib:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.23.0)
+      '@rollup/pluginutils': 5.0.2(rollup@3.20.2)
       resolve: 1.22.2
-      rollup: 3.23.0
+      rollup: 3.20.2
       tslib: 2.5.2
       typescript: 5.0.4
     dev: true
@@ -7780,7 +7780,7 @@ packages:
       rollup: 2.78.0
     dev: false
 
-  /@rollup/pluginutils@5.0.2(rollup@3.23.0):
+  /@rollup/pluginutils@5.0.2(rollup@3.20.2):
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -7792,7 +7792,7 @@ packages:
       '@types/estree': 1.0.0
       estree-walker: 2.0.2
       picomatch: 2.3.1
-      rollup: 3.23.0
+      rollup: 3.20.2
     dev: true
 
   /@rushstack/eslint-patch@1.2.0:
@@ -19451,8 +19451,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rollup@3.23.0:
-    resolution: {integrity: sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==}
+  /rollup@3.20.2:
+    resolution: {integrity: sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -21642,7 +21642,7 @@ packages:
       esbuild: 0.17.12
       postcss: 8.4.23
       resolve: 1.22.2
-      rollup: 3.23.0
+      rollup: 3.20.2
     optionalDependencies:
       fsevents: 2.3.2
     dev: false