From 75f9da0a4fe7937e07823ac46a8b449c89bf6eac Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 26 May 2023 09:20:22 +0200
Subject: [PATCH] :zap: (webhook) Add client execution option

---
 .../components/WebhookAdvancedConfigForm.tsx  | 192 ++++++++--------
 .../chatwoot/executeChatwootBlock.ts          |   4 +-
 .../executeGoogleAnalyticsBlock.ts            |   4 +-
 .../webhook/executeWebhookBlock.ts            | 206 ++++++++----------
 .../webhook/resumeWebhookExecution.ts         |  87 ++++++++
 .../blocks/logic/redirect/executeRedirect.ts  |   4 +-
 .../blocks/logic/script/executeScript.ts      |   4 +-
 .../logic/setVariable/executeSetVariable.ts   |   4 +-
 .../features/blocks/logic/wait/executeWait.ts |   4 +-
 .../features/chat/helpers/continueBotFlow.ts  |  10 +-
 .../src/features/chat/helpers/executeGroup.ts |  13 +-
 .../chat/helpers/executeIntegration.ts        |   6 +-
 .../src/features/chat/helpers/executeLogic.ts |  10 +-
 packages/embeds/js/package.json               |   4 +-
 .../blocks/integrations/openai/streamChat.ts  |  32 +++
 .../integrations/webhook/executeWebhook.ts    |  23 ++
 packages/embeds/js/src/types.ts               |   5 +
 .../js/src/utils/executeClientSideActions.ts  |  43 +---
 packages/embeds/react/package.json            |   4 +-
 .../features/blocks/integrations/webhook.ts   |   1 +
 packages/schemas/features/chat.ts             |   6 +
 packages/schemas/features/webhooks.ts         |  10 +
 pnpm-lock.yaml                                |  56 ++---
 23 files changed, 426 insertions(+), 306 deletions(-)
 create mode 100644 apps/viewer/src/features/blocks/integrations/webhook/resumeWebhookExecution.ts
 create mode 100644 packages/embeds/js/src/features/blocks/integrations/openai/streamChat.ts
 create mode 100644 packages/embeds/js/src/features/blocks/integrations/webhook/executeWebhook.ts

diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx
index 0b1f96246b..021b236940 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx
+++ b/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"
-                />
-              </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"
+        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">
-                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"
             />
diff --git a/apps/viewer/src/features/blocks/integrations/chatwoot/executeChatwootBlock.ts b/apps/viewer/src/features/blocks/integrations/chatwoot/executeChatwootBlock.ts
index c95b7547e3..2760cc5aa3 100644
--- a/apps/viewer/src/features/blocks/integrations/chatwoot/executeChatwootBlock.ts
+++ b/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' })(
diff --git a/apps/viewer/src/features/blocks/integrations/googleAnalytics/executeGoogleAnalyticsBlock.ts b/apps/viewer/src/features/blocks/integrations/googleAnalytics/executeGoogleAnalyticsBlock.ts
index 0bd5ce053d..595d5de251 100644
--- a/apps/viewer/src/features/blocks/integrations/googleAnalytics/executeGoogleAnalyticsBlock.ts
+++ b/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,
       },
     ],
   }
diff --git a/apps/viewer/src/features/blocks/integrations/webhook/executeWebhookBlock.ts b/apps/viewer/src/features/blocks/integrations/webhook/executeWebhookBlock.ts
index 3ba30aee8a..03646f631f 100644
--- a/apps/viewer/src/features/blocks/integrations/webhook/executeWebhookBlock.ts
+++ b/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 =
   (
diff --git a/apps/viewer/src/features/blocks/integrations/webhook/resumeWebhookExecution.ts b/apps/viewer/src/features/blocks/integrations/webhook/resumeWebhookExecution.ts
new file mode 100644
index 0000000000..d52cfdf606
--- /dev/null
+++ b/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,
+    }
+  }
diff --git a/apps/viewer/src/features/blocks/logic/redirect/executeRedirect.ts b/apps/viewer/src/features/blocks/logic/redirect/executeRedirect.ts
index a16b478d5b..1e676f845f 100644
--- a/apps/viewer/src/features/blocks/logic/redirect/executeRedirect.ts
+++ b/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 },
       },
     ],
diff --git a/apps/viewer/src/features/blocks/logic/script/executeScript.ts b/apps/viewer/src/features/blocks/logic/script/executeScript.ts
index 8bc20351b0..0adb36a8bc 100644
--- a/apps/viewer/src/features/blocks/logic/script/executeScript.ts
+++ b/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,
       },
     ],
   }
diff --git a/apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts b/apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts
index ec4d6b3d08..4dd5b55045 100644
--- a/apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts
+++ b/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,
         },
       ],
     }
diff --git a/apps/viewer/src/features/blocks/logic/wait/executeWait.ts b/apps/viewer/src/features/blocks/logic/wait/executeWait.ts
index f0976a8c63..ed8acf6d36 100644
--- a/apps/viewer/src/features/blocks/logic/wait/executeWait.ts
+++ b/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,
diff --git a/apps/viewer/src/features/chat/helpers/continueBotFlow.ts b/apps/viewer/src/features/chat/helpers/continueBotFlow.ts
index f8d565c9fd..2a4bd089f6 100644
--- a/apps/viewer/src/features/chat/helpers/continueBotFlow.ts
+++ b/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 (
diff --git a/apps/viewer/src/features/chat/helpers/executeGroup.ts b/apps/viewer/src/features/chat/helpers/executeGroup.ts
index a1dab14f94..71796a5f24 100644
--- a/apps/viewer/src/features/chat/helpers/executeGroup.ts
+++ b/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 {
diff --git a/apps/viewer/src/features/chat/helpers/executeIntegration.ts b/apps/viewer/src/features/chat/helpers/executeIntegration.ts
index 36e2028f01..9427295eca 100644
--- a/apps/viewer/src/features/chat/helpers/executeIntegration.ts
+++ b/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:
diff --git a/apps/viewer/src/features/chat/helpers/executeLogic.ts b/apps/viewer/src/features/chat/helpers/executeLogic.ts
index db002f0712..261fc6b20a 100644
--- a/apps/viewer/src/features/chat/helpers/executeLogic.ts
+++ b/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:
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index bd60adc42c..79756bc335 100644
--- a/packages/embeds/js/package.json
+++ b/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",
diff --git a/packages/embeds/js/src/features/blocks/integrations/openai/streamChat.ts b/packages/embeds/js/src/features/blocks/integrations/openai/streamChat.ts
new file mode 100644
index 0000000000..fd838d893b
--- /dev/null
+++ b/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
+  }
diff --git a/packages/embeds/js/src/features/blocks/integrations/webhook/executeWebhook.ts b/packages/embeds/js/src/features/blocks/integrations/webhook/executeWebhook.ts
new file mode 100644
index 0000000000..700e19b6cb
--- /dev/null
+++ b/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',
+    })
+  }
+}
diff --git a/packages/embeds/js/src/types.ts b/packages/embeds/js/src/types.ts
index dc25cd3841..eaf9ce5ae3 100644
--- a/packages/embeds/js/src/types.ts
+++ b/packages/embeds/js/src/types.ts
@@ -22,3 +22,8 @@ export type OutgoingLog = {
   description: string
   details?: unknown
 }
+
+export type ClientSideActionContext = {
+  apiHost?: string
+  sessionId: string
+}
diff --git a/packages/embeds/js/src/utils/executeClientSideActions.ts b/packages/embeds/js/src/utils/executeClientSideActions.ts
index 004fc3aeab..6f458151ae 100644
--- a/packages/embeds/js/src/utils/executeClientSideActions.ts
+++ b/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 }
   }
+}
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index d2278f8529..702bd1ef0b 100644
--- a/packages/embeds/react/package.json
+++ b/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",
diff --git a/packages/schemas/features/blocks/integrations/webhook.ts b/packages/schemas/features/blocks/integrations/webhook.ts
index f369c42761..e7df30162d 100644
--- a/packages/schemas/features/blocks/integrations/webhook.ts
+++ b/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(
diff --git a/packages/schemas/features/chat.ts b/packages/schemas/features/chat.ts
index 60626962df..7129273e61 100644
--- a/packages/schemas/features/chat.ts
+++ b/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({
diff --git a/packages/schemas/features/webhooks.ts b/packages/schemas/features/webhooks.ts
index 118c00ee5c..8685767d51 100644
--- a/packages/schemas/features/webhooks.ts
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af9ca23394..2708d7ca26 100644
--- a/pnpm-lock.yaml
+++ b/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