⚡ (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.', {
-            cause: error.message,
+          new Error(`An error occurred while loading the bot.`, {
+            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)
-      console.error({ data, error, response })
-      return setError(new Error("Error! Couldn't initiate the chat."))
+      if (error) {
+        console.error(error)
+        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,22 +1,34 @@
 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,
 }: {
   apiHost?: string
   message: string | undefined
   sessionId: string
-}) =>
-  sendRequest<ContinueChatResponse>({
-    method: 'POST',
-    url: `${
-      isNotEmpty(apiHost) ? apiHost : guessApiHost()
-    }/api/v1/sessions/${sessionId}/continueChat`,
-    body: {
-      message,
-    },
-  })
+}) => {
+  try {
+    const data = await ky
+      .post(
+        `${
+          isNotEmpty(apiHost) ? apiHost : guessApiHost()
+        }/api/v1/sessions/${sessionId}/continueChat`,
+        {
+          json: {
+            message,
+          },
+          timeout: false,
+        }
+      )
+      .json<ContinueChatResponse>()
+
+    return { data }
+  } catch (error) {
+    return { error }
+  }
+}

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

@@ -1,22 +1,29 @@
 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,
 }: {
   apiHost?: string
   sessionId: string
   clientLogs: ChatLog[]
-}) =>
-  sendRequest({
-    method: 'POST',
-    url: `${
-      isNotEmpty(apiHost) ? apiHost : guessApiHost()
-    }/api/v1/sessions/${sessionId}/clientLogs`,
-    body: {
-      clientLogs,
-    },
-  })
+}) => {
+  try {
+    await ky.post(
+      `${
+        isNotEmpty(apiHost) ? apiHost : guessApiHost()
+      }/api/v1/sessions/${sessionId}/clientLogs`,
+      {
+        json: {
+          clientLogs,
+        },
+      }
+    )
+  } catch (e) {
+    console.log(e)
+  }
+}