⚡ (webhook) Add client execution option

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",