⚡ (bot) Use ky for queries in bot to improve reliability

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
@@ -15,6 +15,7 @@
     "@stripe/stripe-js": "1.54.1",
     "@udecode/plate-common": "21.1.5",
     "dompurify": "3.0.6",
+    "ky": "^1.1.3",
     "marked": "9.0.3",
     "solid-element": "1.7.1",
     "solid-js": "1.7.8"

packages/embeds/js/src/components/Bot.tsx

@@ -16,6 +16,7 @@ import { InputBlock } from '@typebot.io/schemas'
 import { StartFrom } from '@typebot.io/schemas'
 import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
 import { clsx } from 'clsx'
+import { HTTPError } from 'ky'
 
 export type BotProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -52,7 +53,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
       typeof props.typebot === 'string' ? props.typebot : undefined
     const isPreview =
       typeof props.typebot !== 'string' || (props.isPreview ?? false)
-    const { data, error, response } = await startChatQuery({
+    const { data, error } = await startChatQuery({
       stripeRedirectStatus: urlParams.get('redirect_status') ?? undefined,
       typebot: props.typebot,
       apiHost: props.apiHost,
@@ -66,24 +67,42 @@ export const Bot = (props: BotProps & { class?: string }) => {
       },
       startFrom: props.startFrom,
     })
-    if (error && 'code' in error && typeof error.code === 'string') {
+    if (error instanceof HTTPError) {
       if (isPreview) {
         return setError(
-          new Error('An error occurred while loading the bot.', {
+          new Error(`An error occurred while loading the bot.`, {
-            cause: error.message,
+            cause: {
+              status: error.response.status,
+              body: await error.response.json(),
+            },
           })
         )
       }
-      if (['BAD_REQUEST', 'FORBIDDEN'].includes(error.code))
+      if (error.response.status === 400 || error.response.status === 403)
         return setError(new Error('This bot is now closed.'))
-      if (error.code === 'NOT_FOUND')
+      if (error.response.status === 404)
         return setError(new Error("The bot you're looking for doesn't exist."))
+      return setError(
+        new Error(
+          `Error! Couldn't initiate the chat. (${error.response.statusText})`
+        )
+      )
     }
 
     if (!data) {
-      if (error) console.error(error)
+      if (error) {
-      console.error({ data, error, response })
+        console.error(error)
-      return setError(new Error("Error! Couldn't initiate the chat."))
+        if (isPreview) {
+          return setError(
+            new Error(`Error! Could not reach server. Check your connection.`, {
+              cause: error,
+            })
+          )
+        }
+      }
+      return setError(
+        new Error('Error! Could not reach server. Check your connection.')
+      )
     }
 
     if (data.resultId && typebotIdFromProps)

packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -31,6 +31,7 @@ import {
 } from '@/utils/formattedMessagesSignal'
 import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
 import { saveClientLogsQuery } from '@/queries/saveClientLogsQuery'
+import { HTTPError } from 'ky'
 
 const parseDynamicTheme = (
   initialTheme: Theme,
@@ -173,7 +174,13 @@ export const ConversationContainer = (props: Props) => {
       const errorLogs = [
         {
           description: 'Failed to send the reply',
-          details: error,
+          details:
+            error instanceof HTTPError
+              ? {
+                  status: error.response.status,
+                  body: await error.response.json(),
+                }
+              : error,
           status: 'error',
         },
       ]

packages/embeds/js/src/components/ErrorMessage.tsx

@@ -5,7 +5,7 @@ export const ErrorMessage = (props: Props) => {
   return (
     <div class="h-full flex justify-center items-center flex-col">
       <p class="text-2xl text-center">{props.error.message}</p>
-      <p class="text-center">{props.error.cause as string}</p>
+      <pre>{JSON.stringify(props.error.cause, null, 2) as string}</pre>
     </div>
   )
 }

packages/embeds/js/src/queries/continueChatQuery.ts

@@ -1,8 +1,9 @@
 import { guessApiHost } from '@/utils/guessApiHost'
-import { isNotEmpty, sendRequest } from '@typebot.io/lib'
+import { isNotEmpty } from '@typebot.io/lib'
 import { ContinueChatResponse } from '@typebot.io/schemas'
+import ky from 'ky'
 
-export const continueChatQuery = ({
+export const continueChatQuery = async ({
   apiHost,
   message,
   sessionId,
@@ -10,13 +11,24 @@ export const continueChatQuery = ({
   apiHost?: string
   message: string | undefined
   sessionId: string
-}) =>
+}) => {
-  sendRequest<ContinueChatResponse>({
+  try {
-    method: 'POST',
+    const data = await ky
-    url: `${
+      .post(
-      isNotEmpty(apiHost) ? apiHost : guessApiHost()
+        `${
-    }/api/v1/sessions/${sessionId}/continueChat`,
+          isNotEmpty(apiHost) ? apiHost : guessApiHost()
-    body: {
+        }/api/v1/sessions/${sessionId}/continueChat`,
-      message,
+        {
-    },
+          json: {
-  })
+            message,
+          },
+          timeout: false,
+        }
+      )
+      .json<ContinueChatResponse>()
+
+    return { data }
+  } catch (error) {
+    return { error }
+  }
+}

packages/embeds/js/src/queries/getOpenAiStreamerQuery.ts

@@ -1,33 +0,0 @@
-import { guessApiHost } from '@/utils/guessApiHost'
-import { isNotEmpty } from '@typebot.io/lib'
-
-export const getOpenAiStreamerQuery =
-  ({ apiHost, sessionId }: { apiHost?: string; sessionId: string }) =>
-  async (
-    messages: {
-      content?: string | undefined
-      role?: 'system' | 'user' | 'assistant' | undefined
-    }[]
-  ) => {
-    const response = await fetch(
-      `${
-        isNotEmpty(apiHost) ? apiHost : guessApiHost()
-      }/api/integrations/openai/streamer`,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          sessionId,
-          messages,
-        }),
-      }
-    )
-    if (!response.ok) {
-      throw new Error(response.statusText)
-    }
-
-    const data = response.body
-    return data
-  }

packages/embeds/js/src/queries/saveClientLogsQuery.ts

@@ -1,8 +1,9 @@
 import { guessApiHost } from '@/utils/guessApiHost'
 import type { ChatLog } from '@typebot.io/schemas'
-import { isNotEmpty, sendRequest } from '@typebot.io/lib'
+import { isNotEmpty } from '@typebot.io/lib'
+import ky from 'ky'
 
-export const saveClientLogsQuery = ({
+export const saveClientLogsQuery = async ({
   apiHost,
   sessionId,
   clientLogs,
@@ -10,13 +11,19 @@ export const saveClientLogsQuery = ({
   apiHost?: string
   sessionId: string
   clientLogs: ChatLog[]
-}) =>
+}) => {
-  sendRequest({
+  try {
-    method: 'POST',
+    await ky.post(
-    url: `${
+      `${
-      isNotEmpty(apiHost) ? apiHost : guessApiHost()
+        isNotEmpty(apiHost) ? apiHost : guessApiHost()
-    }/api/v1/sessions/${sessionId}/clientLogs`,
+      }/api/v1/sessions/${sessionId}/clientLogs`,
-    body: {
+      {
-      clientLogs,
+        json: {
-    },
+          clientLogs,
-  })
+        },
+      }
+    )
+  } catch (e) {
+    console.log(e)
+  }
+}

packages/embeds/js/src/queries/startChatQuery.ts

@@ -1,6 +1,6 @@
 import { BotContext, InitialChatReply } from '@/types'
 import { guessApiHost } from '@/utils/guessApiHost'
-import { isNotDefined, isNotEmpty, sendRequest } from '@typebot.io/lib'
+import { isNotDefined, isNotEmpty } from '@typebot.io/lib'
 import {
   getPaymentInProgressInStorage,
   removePaymentInProgressFromStorage,
@@ -10,6 +10,18 @@ import {
   StartFrom,
   StartPreviewChatInput,
 } from '@typebot.io/schemas'
+import ky from 'ky'
+
+type Props = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  typebot: string | any
+  stripeRedirectStatus?: string
+  apiHost?: string
+  startFrom?: StartFrom
+  isPreview: boolean
+  prefilledVariables?: Record<string, unknown>
+  resultId?: string
+}
 
 export async function startChatQuery({
   typebot,
@@ -19,16 +31,7 @@ export async function startChatQuery({
   resultId,
   stripeRedirectStatus,
   startFrom,
-}: {
+}: Props) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  typebot: string | any
-  stripeRedirectStatus?: string
-  apiHost?: string
-  startFrom?: StartFrom
-  isPreview: boolean
-  prefilledVariables?: Record<string, unknown>
-  resultId?: string
-}) {
   if (isNotDefined(typebot))
     throw new Error('Typebot ID is required to get initial messages')
 
@@ -41,67 +44,75 @@ export async function startChatQuery({
     : undefined
   if (paymentInProgressState) {
     removePaymentInProgressFromStorage()
-    const { data, error, response } = await sendRequest<InitialChatReply>({
+
-      method: 'POST',
+    try {
-      url: `${isNotEmpty(apiHost) ? apiHost : guessApiHost()}/api/v1/sessions/${
+      const data = await ky
-        paymentInProgressState.sessionId
+        .post(
-      }/continueChat`,
+          `${isNotEmpty(apiHost) ? apiHost : guessApiHost()}/api/v1/sessions/${
-      body: {
+            paymentInProgressState.sessionId
-        message: paymentInProgressState
+          }/continueChat`,
-          ? stripeRedirectStatus === 'failed'
+          {
-            ? 'fail'
+            json: {
-            : 'Success'
+              message: paymentInProgressState
-          : undefined,
+                ? stripeRedirectStatus === 'failed'
-      },
+                  ? 'fail'
-    })
+                  : 'Success'
-    return {
+                : undefined,
-      data: data
+            },
-        ? {
+            timeout: false,
-            ...data,
-            ...(paymentInProgressState
-              ? { typebot: paymentInProgressState.typebot }
-              : {}),
           }
-        : undefined,
+        )
-      error,
+        .json<InitialChatReply>()
-      response,
+
+      return { data }
+    } catch (error) {
+      return { error }
     }
   }
   const typebotId = typeof typebot === 'string' ? typebot : typebot.id
   if (isPreview) {
-    const { data, error, response } = await sendRequest<InitialChatReply>({
+    try {
-      method: 'POST',
+      const data = await ky
-      url: `${
+        .post(
-        isNotEmpty(apiHost) ? apiHost : guessApiHost()
+          `${
-      }/api/v1/typebots/${typebotId}/preview/startChat`,
+            isNotEmpty(apiHost) ? apiHost : guessApiHost()
-      body: {
+          }/api/v1/typebots/${typebotId}/preview/startChat`,
-        isStreamEnabled: true,
+          {
-        startFrom,
+            json: {
-        typebot,
+              isStreamEnabled: true,
-      } satisfies Omit<StartPreviewChatInput, 'typebotId'>,
+              startFrom,
-    })
+              typebot,
-    return {
+            } satisfies Omit<StartPreviewChatInput, 'typebotId'>,
-      data,
+            timeout: false,
-      error,
+          }
-      response,
+        )
+        .json<InitialChatReply>()
+
+      return { data }
+    } catch (error) {
+      return { error }
     }
   }
 
-  const { data, error, response } = await sendRequest<InitialChatReply>({
+  try {
-    method: 'POST',
+    const data = await ky
-    url: `${
+      .post(
-      isNotEmpty(apiHost) ? apiHost : guessApiHost()
+        `${
-    }/api/v1/typebots/${typebotId}/startChat`,
+          isNotEmpty(apiHost) ? apiHost : guessApiHost()
-    body: {
+        }/api/v1/typebots/${typebotId}/startChat`,
-      isStreamEnabled: true,
+        {
-      prefilledVariables,
+          json: {
-      resultId,
+            isStreamEnabled: true,
-    } satisfies Omit<StartChatInput, 'publicId'>,
+            prefilledVariables,
-  })
+            resultId,
+          } satisfies Omit<StartChatInput, 'publicId'>,
+          timeout: false,
+        }
+      )
+      .json<InitialChatReply>()
 
-  return {
+    return { data }
-    data,
+  } catch (error) {
-    error,
+    return { error }
-    response,
   }
 }

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

pnpm-lock.yaml

@@ -956,6 +956,9 @@ importers:
       dompurify:
         specifier: 3.0.6
         version: 3.0.6
+      ky:
+        specifier: ^1.1.3
+        version: 1.1.3
       marked:
         specifier: 9.0.3
         version: 9.0.3
@@ -17743,6 +17746,11 @@ packages:
     resolution: {integrity: sha512-RTSoaUAfLvpR357vWzAz/50Q/BmHfmE6ETSWfutT0AJiw10e6CmcdYRQJlLRd95B53D0Y2aD1jSxD3V3ySF+PA==}
     dev: true
 
+  /ky@1.1.3:
+    resolution: {integrity: sha512-t7q8sJfazzHbfYxiCtuLIH4P+pWoCgunDll17O/GBZBqMt2vHjGSx5HzSxhOc2BDEg3YN/EmeA7VKrHnwuWDag==}
+    engines: {node: '>=18'}
+    dev: false
+
   /language-subtag-registry@0.3.22:
     resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
     dev: false