⚗️ Implement chat API

apps/viewer/src/features/blocks/integrations/webhook/api/index.ts

@@ -0,0 +1 @@
+export * from './utils'

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

@@ -0,0 +1,276 @@
+import { ExecuteIntegrationResponse } from '@/features/chat'
+import { saveErrorLog, saveSuccessLog } from '@/features/logs/api'
+import { parseVariables, updateVariables } from '@/features/variables'
+import prisma from '@/lib/prisma'
+import {
+  WebhookBlock,
+  ZapierBlock,
+  MakeComBlock,
+  PabblyConnectBlock,
+  VariableWithUnknowValue,
+  SessionState,
+  Webhook,
+  Typebot,
+  Variable,
+  WebhookResponse,
+  WebhookOptions,
+  defaultWebhookAttributes,
+  HttpMethod,
+  ResultValues,
+  PublicTypebot,
+  KeyValue,
+} from 'models'
+import { stringify } from 'qs'
+import { byId, omit, parseAnswers } from 'utils'
+import got, { Method, Headers, HTTPError } from 'got'
+import { getResultValues } from '@/features/results/api'
+import { getLinkedTypebots } from '@/features/blocks/logic/typebotLink/api'
+import { parseSampleResult } from './parseSampleResult'
+
+export const executeWebhookBlock = async (
+  state: SessionState,
+  block: WebhookBlock | ZapierBlock | MakeComBlock | PabblyConnectBlock
+): Promise<ExecuteIntegrationResponse> => {
+  const { typebot, result } = state
+  const webhook = (await prisma.webhook.findUnique({
+    where: { id: block.webhookId },
+  })) as Webhook | null
+  if (!webhook) {
+    await saveErrorLog({
+      resultId: result.id,
+      message: `Couldn't find webhook`,
+    })
+    return { outgoingEdgeId: block.outgoingEdgeId }
+  }
+  const preparedWebhook = prepareWebhookAttributes(webhook, block.options)
+  const resultValues = await getResultValues(result.id)
+  if (!resultValues) return { outgoingEdgeId: block.outgoingEdgeId }
+  const webhookResponse = await executeWebhook(typebot)(
+    preparedWebhook,
+    typebot.variables,
+    block.groupId,
+    resultValues,
+    result.id
+  )
+  const status = webhookResponse.statusCode.toString()
+  const isError = status.startsWith('4') || status.startsWith('5')
+
+  if (isError) {
+    await saveErrorLog({
+      resultId: result.id,
+      message: `Webhook returned error: ${webhookResponse.data}`,
+      details: JSON.stringify(webhookResponse.data, null, 2).substring(0, 1000),
+    })
+  } else {
+    await saveSuccessLog({
+      resultId: result.id,
+      message: `Webhook returned success: ${webhookResponse.data}`,
+      details: JSON.stringify(webhookResponse.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(webhookResponse)
+      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 }
+}
+
+const prepareWebhookAttributes = (
+  webhook: Webhook,
+  options: WebhookOptions
+): Webhook => {
+  if (options.isAdvancedConfig === false) {
+    return { ...webhook, body: '{{state}}', ...defaultWebhookAttributes }
+  } else if (options.isCustomBody === false) {
+    return { ...webhook, body: '{{state}}' }
+  }
+  return webhook
+}
+
+const checkIfBodyIsAVariable = (body: string) => /^{{.+}}$/.test(body)
+
+export const executeWebhook =
+  (typebot: SessionState['typebot']) =>
+  async (
+    webhook: Webhook,
+    variables: Variable[],
+    groupId: string,
+    resultValues: ResultValues,
+    resultId: string
+  ): Promise<WebhookResponse> => {
+    if (!webhook.url || !webhook.method)
+      return {
+        statusCode: 400,
+        data: { message: `Webhook doesn't have url or method` },
+      }
+    const basicAuth: { username?: string; password?: string } = {}
+    const basicAuthHeaderIdx = webhook.headers.findIndex(
+      (h) =>
+        h.key?.toLowerCase() === 'authorization' &&
+        h.value?.toLowerCase()?.includes('basic')
+    )
+    const isUsernamePasswordBasicAuth =
+      basicAuthHeaderIdx !== -1 &&
+      webhook.headers[basicAuthHeaderIdx].value?.includes(':')
+    if (isUsernamePasswordBasicAuth) {
+      const [username, password] =
+        webhook.headers[basicAuthHeaderIdx].value?.slice(6).split(':') ?? []
+      basicAuth.username = username
+      basicAuth.password = password
+      webhook.headers.splice(basicAuthHeaderIdx, 1)
+    }
+    const headers = convertKeyValueTableToObject(webhook.headers, variables) as
+      | Headers
+      | undefined
+    const queryParams = stringify(
+      convertKeyValueTableToObject(webhook.queryParams, variables)
+    )
+    const contentType = headers ? headers['Content-Type'] : undefined
+    const linkedTypebots = await getLinkedTypebots(typebot)
+
+    const bodyContent = await getBodyContent(
+      typebot,
+      linkedTypebots
+    )({
+      body: webhook.body,
+      resultValues,
+      groupId,
+    })
+    const { data: body, isJson } =
+      bodyContent && webhook.method !== HttpMethod.GET
+        ? safeJsonParse(
+            parseVariables(variables, {
+              escapeForJson: !checkIfBodyIsAVariable(bodyContent),
+            })(bodyContent)
+          )
+        : { data: undefined, isJson: false }
+
+    const request = {
+      url: parseVariables(variables)(
+        webhook.url + (queryParams !== '' ? `?${queryParams}` : '')
+      ),
+      method: webhook.method as Method,
+      headers,
+      ...basicAuth,
+      json:
+        contentType !== 'x-www-form-urlencoded' && body && isJson
+          ? body
+          : undefined,
+      form: contentType === 'x-www-form-urlencoded' && body ? body : undefined,
+      body: body && !isJson ? body : undefined,
+    }
+    try {
+      const response = await got(request.url, omit(request, 'url'))
+      await saveSuccessLog({
+        resultId,
+        message: 'Webhook successfuly executed.',
+        details: {
+          statusCode: response.statusCode,
+          request,
+          response: safeJsonParse(response.body).data,
+        },
+      })
+      return {
+        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,
+          message: 'Webhook returned an error',
+          details: {
+            request,
+            response,
+          },
+        })
+        return response
+      }
+      const response = {
+        statusCode: 500,
+        data: { message: `Error from Typebot server: ${error}` },
+      }
+      console.error(error)
+      await saveErrorLog({
+        resultId,
+        message: 'Webhook failed to execute',
+        details: {
+          request,
+          response,
+        },
+      })
+      return response
+    }
+  }
+
+const getBodyContent =
+  (
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>,
+    linkedTypebots: (Typebot | PublicTypebot)[]
+  ) =>
+  async ({
+    body,
+    resultValues,
+    groupId,
+  }: {
+    body?: string | null
+    resultValues?: ResultValues
+    groupId: string
+  }): Promise<string | undefined> => {
+    if (!body) return
+    return body === '{{state}}'
+      ? JSON.stringify(
+          resultValues
+            ? parseAnswers(typebot, linkedTypebots)(resultValues)
+            : await parseSampleResult(typebot, linkedTypebots)(groupId)
+        )
+      : body
+  }
+
+const convertKeyValueTableToObject = (
+  keyValues: KeyValue[] | undefined,
+  variables: Variable[]
+) => {
+  if (!keyValues) return
+  return keyValues.reduce((object, item) => {
+    if (!item.key) return {}
+    return {
+      ...object,
+      [item.key]: parseVariables(variables)(item.value ?? ''),
+    }
+  }, {})
+}
+
+const safeJsonParse = (json: string): { data: any; isJson: boolean } => {
+  try {
+    return { data: JSON.parse(json), isJson: true }
+  } catch (err) {
+    return { data: json, isJson: false }
+  }
+}

apps/viewer/src/features/blocks/integrations/webhook/api/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './executeWebhookBlock'
+export * from './parseSampleResult'

apps/viewer/src/features/blocks/integrations/webhook/api/utils/parseSampleResult.ts

@@ -0,0 +1,192 @@
+import {
+  InputBlock,
+  InputBlockType,
+  LogicBlockType,
+  PublicTypebot,
+  ResultHeaderCell,
+  Block,
+  Typebot,
+  TypebotLinkBlock,
+} from 'models'
+import { isInputBlock, byId, parseResultHeader, isNotDefined } from 'utils'
+
+export const parseSampleResult =
+  (
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>,
+    linkedTypebots: (Typebot | PublicTypebot)[]
+  ) =>
+  async (
+    currentGroupId: string
+  ): Promise<Record<string, string | boolean | undefined>> => {
+    const header = parseResultHeader(typebot, linkedTypebots)
+    const linkedInputBlocks = await extractLinkedInputBlocks(
+      typebot,
+      linkedTypebots
+    )(currentGroupId)
+
+    return {
+      message: 'This is a sample result, it has been generated ⬇️',
+      'Submitted at': new Date().toISOString(),
+      ...parseResultSample(linkedInputBlocks, header),
+    }
+  }
+
+const extractLinkedInputBlocks =
+  (
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>,
+    linkedTypebots: (Typebot | PublicTypebot)[]
+  ) =>
+  async (
+    currentGroupId?: string,
+    direction: 'backward' | 'forward' = 'backward'
+  ): Promise<InputBlock[]> => {
+    const previousLinkedTypebotBlocks = walkEdgesAndExtract(
+      'linkedBot',
+      direction,
+      typebot
+    )({
+      groupId: currentGroupId,
+    }) as TypebotLinkBlock[]
+
+    const linkedBotInputs =
+      previousLinkedTypebotBlocks.length > 0
+        ? await Promise.all(
+            previousLinkedTypebotBlocks.map((linkedBot) =>
+              extractLinkedInputBlocks(
+                linkedTypebots.find((t) =>
+                  'typebotId' in t
+                    ? t.typebotId === linkedBot.options.typebotId
+                    : t.id === linkedBot.options.typebotId
+                ) as Typebot | PublicTypebot,
+                linkedTypebots
+              )(linkedBot.options.groupId, 'forward')
+            )
+          )
+        : []
+
+    return (
+      walkEdgesAndExtract(
+        'input',
+        direction,
+        typebot
+      )({
+        groupId: currentGroupId,
+      }) as InputBlock[]
+    ).concat(linkedBotInputs.flatMap((l) => l))
+  }
+
+const parseResultSample = (
+  inputBlocks: InputBlock[],
+  headerCells: ResultHeaderCell[]
+) =>
+  headerCells.reduce<Record<string, string | boolean | undefined>>(
+    (resultSample, cell) => {
+      const inputBlock = inputBlocks.find((inputBlock) =>
+        cell.blocks?.some((block) => block.id === inputBlock.id)
+      )
+      if (isNotDefined(inputBlock)) {
+        if (cell.variableIds)
+          return {
+            ...resultSample,
+            [cell.label]: 'content',
+          }
+        return resultSample
+      }
+      const value = getSampleValue(inputBlock)
+      return {
+        ...resultSample,
+        [cell.label]: value,
+      }
+    },
+    {}
+  )
+
+const getSampleValue = (block: InputBlock) => {
+  switch (block.type) {
+    case InputBlockType.CHOICE:
+      return block.options.isMultipleChoice
+        ? block.items.map((i) => i.content).join(', ')
+        : block.items[0]?.content ?? 'Item'
+    case InputBlockType.DATE:
+      return new Date().toUTCString()
+    case InputBlockType.EMAIL:
+      return 'test@email.com'
+    case InputBlockType.NUMBER:
+      return '20'
+    case InputBlockType.PHONE:
+      return '+33665566773'
+    case InputBlockType.TEXT:
+      return 'answer value'
+    case InputBlockType.URL:
+      return 'https://test.com'
+  }
+}
+
+const walkEdgesAndExtract =
+  (
+    type: 'input' | 'linkedBot',
+    direction: 'backward' | 'forward',
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>
+  ) =>
+  ({ groupId }: { groupId?: string }): Block[] => {
+    const currentGroupId =
+      groupId ??
+      (typebot.groups.find((b) => b.blocks[0].type === 'start')?.id as string)
+    const blocksInGroup = extractBlocksInGroup(
+      type,
+      typebot
+    )({
+      groupId: currentGroupId,
+    })
+    const otherGroupIds = getGroupIds(typebot, direction)(currentGroupId)
+    return [
+      ...blocksInGroup,
+      ...otherGroupIds.flatMap((groupId) =>
+        extractBlocksInGroup(type, typebot)({ groupId })
+      ),
+    ]
+  }
+
+const getGroupIds =
+  (
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>,
+    direction: 'backward' | 'forward',
+    existingGroupIds?: string[]
+  ) =>
+  (groupId: string): string[] => {
+    const groups = typebot.edges.reduce<string[]>((groupIds, edge) => {
+      if (direction === 'forward')
+        return (!existingGroupIds ||
+          !existingGroupIds?.includes(edge.to.groupId)) &&
+          edge.from.groupId === groupId
+          ? [...groupIds, edge.to.groupId]
+          : groupIds
+      return (!existingGroupIds ||
+        !existingGroupIds.includes(edge.from.groupId)) &&
+        edge.to.groupId === groupId
+        ? [...groupIds, edge.from.groupId]
+        : groupIds
+    }, [])
+    const newGroups = [...(existingGroupIds ?? []), ...groups]
+    return groups.concat(
+      groups.flatMap(getGroupIds(typebot, direction, newGroups))
+    )
+  }
+
+const extractBlocksInGroup =
+  (
+    type: 'input' | 'linkedBot',
+    typebot: Pick<Typebot | PublicTypebot, 'groups' | 'variables' | 'edges'>
+  ) =>
+  ({ groupId, blockId }: { groupId: string; blockId?: string }) => {
+    const currentGroup = typebot.groups.find(byId(groupId))
+    if (!currentGroup) return []
+    const blocks: Block[] = []
+    for (const block of currentGroup.blocks) {
+      if (block.id === blockId) break
+      if (type === 'input' && isInputBlock(block)) blocks.push(block)
+      if (type === 'linkedBot' && block.type === LogicBlockType.TYPEBOT_LINK)
+        blocks.push(block)
+    }
+    return blocks
+  }

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

@@ -0,0 +1,198 @@
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import { HttpMethod, Typebot } from 'models'
+import {
+  createWebhook,
+  deleteTypebots,
+  deleteWebhooks,
+  importTypebotInDatabase,
+} from 'utils/playwright/databaseActions'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import { apiToken } from 'utils/playwright/databaseSetup'
+import { getTestAsset } from '@/test/utils/playwright'
+
+test.describe('Bot', () => {
+  const typebotId = cuid()
+
+  test.beforeEach(async () => {
+    await importTypebotInDatabase(getTestAsset('typebots/webhook.json'), {
+      id: typebotId,
+      publicId: `${typebotId}-public`,
+    })
+
+    await createWebhook(typebotId, {
+      id: 'failing-webhook',
+      url: 'http://localhost:3001/api/mock/fail',
+      method: HttpMethod.POST,
+    })
+
+    await createWebhook(typebotId, {
+      id: 'partial-body-webhook',
+      url: 'http://localhost:3000/api/mock/webhook-easy-config',
+      method: HttpMethod.POST,
+      body: `{
+        "name": "{{Name}}",
+        "age": {{Age}},
+        "gender": "{{Gender}}"
+      }`,
+    })
+
+    await createWebhook(typebotId, {
+      id: 'full-body-webhook',
+      url: 'http://localhost:3000/api/mock/webhook-easy-config',
+      method: HttpMethod.POST,
+      body: `{{Full body}}`,
+    })
+  })
+
+  test.afterEach(async () => {
+    await deleteTypebots([typebotId])
+    await deleteWebhooks([
+      'failing-webhook',
+      'partial-body-webhook',
+      'full-body-webhook',
+    ])
+  })
+
+  test('should execute webhooks properly', async ({ page }) => {
+    await page.goto(`/${typebotId}-public`)
+    await typebotViewer(page).locator('text=Send failing webhook').click()
+    await typebotViewer(page)
+      .locator('[placeholder="Type a name..."]')
+      .fill('John')
+    await typebotViewer(page).locator('text="Send"').click()
+    await typebotViewer(page)
+      .locator('[placeholder="Type an age..."]')
+      .fill('30')
+    await typebotViewer(page).locator('text="Send"').click()
+    await typebotViewer(page).locator('text="Male"').click()
+    await expect(
+      typebotViewer(page).getByText('{"name":"John","age":25,"gender":"male"}')
+    ).toBeVisible()
+    await expect(
+      typebotViewer(page).getByText('{"name":"John","age":30,"gender":"Male"}')
+    ).toBeVisible()
+    await page.goto(`http://localhost:3000/typebots/${typebotId}/results`)
+    await page.click('text="See logs"')
+    await expect(
+      page.locator('text="Webhook successfuly executed." >> nth=1')
+    ).toBeVisible()
+    await expect(page.locator('text="Webhook returned an error"')).toBeVisible()
+  })
+})
+
+test.describe('API', () => {
+  const typebotId = 'webhook-flow'
+
+  test.beforeAll(async () => {
+    try {
+      await importTypebotInDatabase(getTestAsset('typebots/api.json'), {
+        id: typebotId,
+      })
+      await createWebhook(typebotId)
+    } catch (err) {
+      console.log(err)
+    }
+  })
+
+  test('can list typebots', async ({ request }) => {
+    expect((await request.get(`/api/typebots`)).status()).toBe(401)
+    const response = await request.get(`/api/typebots`, {
+      headers: { Authorization: `Bearer ${apiToken}` },
+    })
+    const { typebots } = (await response.json()) as { typebots: Typebot[] }
+    expect(typebots.length).toBeGreaterThanOrEqual(1)
+    expect(typebots.find((typebot) => typebot.id === typebotId)).toMatchObject({
+      id: typebotId,
+      publishedTypebotId: null,
+      name: 'My typebot',
+    })
+  })
+
+  test('can get webhook blocks', async ({ request }) => {
+    expect(
+      (await request.get(`/api/typebots/${typebotId}/webhookBlocks`)).status()
+    ).toBe(401)
+    const response = await request.get(
+      `/api/typebots/${typebotId}/webhookBlocks`,
+      {
+        headers: { Authorization: `Bearer ${apiToken}` },
+      }
+    )
+    const { blocks } = await response.json()
+    expect(blocks).toHaveLength(1)
+    expect(blocks[0]).toEqual({
+      blockId: 'webhookBlock',
+      name: 'Webhook > webhookBlock',
+    })
+  })
+
+  test('can subscribe webhook', async ({ request }) => {
+    expect(
+      (
+        await request.post(
+          `/api/typebots/${typebotId}/blocks/webhookBlock/subscribeWebhook`,
+          { data: { url: 'https://test.com' } }
+        )
+      ).status()
+    ).toBe(401)
+    const response = await request.post(
+      `/api/typebots/${typebotId}/blocks/webhookBlock/subscribeWebhook`,
+      {
+        headers: {
+          Authorization: `Bearer ${apiToken}`,
+        },
+        data: { url: 'https://test.com' },
+      }
+    )
+    const body = await response.json()
+    expect(body).toEqual({
+      message: 'success',
+    })
+  })
+
+  test('can unsubscribe webhook', async ({ request }) => {
+    expect(
+      (
+        await request.post(
+          `/api/typebots/${typebotId}/blocks/webhookBlock/unsubscribeWebhook`
+        )
+      ).status()
+    ).toBe(401)
+    const response = await request.post(
+      `/api/typebots/${typebotId}/blocks/webhookBlock/unsubscribeWebhook`,
+      {
+        headers: { Authorization: `Bearer ${apiToken}` },
+      }
+    )
+    const body = await response.json()
+    expect(body).toEqual({
+      message: 'success',
+    })
+  })
+
+  test('can get a sample result', async ({ request }) => {
+    expect(
+      (
+        await request.get(
+          `/api/typebots/${typebotId}/blocks/webhookBlock/sampleResult`
+        )
+      ).status()
+    ).toBe(401)
+    const response = await request.get(
+      `/api/typebots/${typebotId}/blocks/webhookBlock/sampleResult`,
+      {
+        headers: { Authorization: `Bearer ${apiToken}` },
+      }
+    )
+    const data = await response.json()
+    expect(data).toMatchObject({
+      message: 'This is a sample result, it has been generated ⬇️',
+      Welcome: 'Hi!',
+      Email: 'test@email.com',
+      Name: 'answer value',
+      Services: 'Website dev, Content Marketing, Social Media, UI / UX Design',
+      'Additional information': 'answer value',
+    })
+  })
+})