🐛 New sendMessage version for the new parser

Make sure old client still communicate with old parser

apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts

@@ -142,8 +142,8 @@ test.describe.parallel('Google sheets integration', () => {
       .locator('input[placeholder="Type your email..."]')
       .press('Enter')
     await expect(
-      page.locator('typebot-standard').locator('text=Your name is:')
-    ).toHaveText(`Your name is: Georges2 Last name`)
+      page.locator('typebot-standard').locator('text=Georges2')
+    ).toBeVisible()
   })
 })
 

apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx

@@ -62,7 +62,7 @@ export const ApiPreviewInstructions = (props: StackProps) => {
               lang={'shell'}
               value={`${parseApiHost(
                 typebot?.customDomain
-              )}/api/v1/sendMessage`}
+              )}/api/v2/sendMessage`}
             />
             <Text>with the following JSON body:</Text>
             <CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
@@ -82,7 +82,7 @@ export const ApiPreviewInstructions = (props: StackProps) => {
               lang={'shell'}
               value={`${parseApiHost(
                 typebot?.customDomain
-              )}/api/v1/sendMessage`}
+              )}/api/v2/sendMessage`}
             />
             <Text>With the following JSON body:</Text>
             <CodeEditor isReadOnly lang={'json'} value={replyBody} />

apps/builder/src/features/publish/components/embeds/modals/ApiModal.tsx

@@ -61,7 +61,7 @@ export const ApiModal = ({
                   lang={'shell'}
                   value={`${parseApiHost(
                     typebot?.customDomain
-                  )}/api/v1/sendMessage`}
+                  )}/api/v2/sendMessage`}
                 />
                 <Text>with the following JSON body:</Text>
                 <CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
@@ -81,7 +81,7 @@ export const ApiModal = ({
                   lang={'shell'}
                   value={`${parseApiHost(
                     typebot?.customDomain
-                  )}/api/v1/sendMessage`}
+                  )}/api/v2/sendMessage`}
                 />
                 <Text>With the following JSON body:</Text>
                 <CodeEditor isReadOnly lang={'json'} value={replyBody} />

apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts

@@ -43,7 +43,7 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => {
 }
 
 export const typebotImportCode = isCloudProdInstance()
-  ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'`
+  ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'`
   : `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@${packageJson.version}/dist/web.js'`
 
 export const parseInlineScript = (script: string) =>

apps/builder/src/features/whatsapp/startWhatsAppPreview.ts

@@ -91,6 +91,7 @@ export const startWhatsAppPreview = authenticatedProcedure
 
       const { newSessionState, messages, input, clientSideActions, logs } =
         await startSession({
+          version: 2,
           message: undefined,
           startParams: {
             isOnlyRegistering: !canSendDirectMessagesToUser,

apps/docs/docs/embed/html-javascript.md

@@ -12,7 +12,7 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
 
   Typebot.initStandard({
     typebot: 'my-typebot',
@@ -32,7 +32,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',
@@ -72,7 +72,7 @@ If you have different bots on the same page you will have to make them distinct
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
 
   Typebot.initStandard({
     id: 'bot1'
@@ -104,7 +104,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',

apps/docs/docs/embed/webflow.md

@@ -22,7 +22,7 @@ It should look like:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',

apps/docs/openapi/chat/_spec_.json

@@ -2,17 +2,17 @@
   "openapi": "3.0.3",
   "info": {
     "title": "Chat API",
-    "version": "1.0.0"
+    "version": "2.0.0"
   },
   "servers": [
     {
-      "url": "https://typebot.io/api/v1"
+      "url": "https://typebot.io/api/v2"
     }
   ],
   "paths": {
     "/sendMessage": {
       "post": {
-        "operationId": "sendMessage",
+        "operationId": "sendMessageV2",
         "summary": "Send a message",
         "description": "To initiate a chat, do not provide a `sessionId` nor a `message`.\n\nContinue the conversation by providing the `sessionId` and the `message` that should answer the previous question.\n\nSet the `isPreview` option to `true` to chat with the non-published version of the typebot.",
         "requestBody": {

apps/viewer/src/features/chat/api/sendMessage.ts → apps/viewer/src/features/chat/api/sendMessageV1.ts

@@ -12,7 +12,7 @@ import { continueBotFlow } from '@typebot.io/bot-engine/continueBotFlow'
 import { parseDynamicTheme } from '@typebot.io/bot-engine/parseDynamicTheme'
 import { isDefined } from '@typebot.io/lib/utils'
 
-export const sendMessage = publicProcedure
+export const sendMessageV1 = publicProcedure
   .meta({
     openapi: {
       method: 'POST',
@@ -57,7 +57,12 @@ export const sendMessage = publicProcedure
           logs,
           clientSideActions,
           newSessionState,
-        } = await startSession({ startParams, userId: user?.id, message })
+        } = await startSession({
+          version: 1,
+          startParams,
+          userId: user?.id,
+          message,
+        })
 
         const allLogs = clientLogs ? [...(logs ?? []), ...clientLogs] : logs
 
@@ -98,7 +103,7 @@ export const sendMessage = publicProcedure
           newSessionState,
           logs,
           lastMessageNewFormat,
-        } = await continueBotFlow(session.state)(message)
+        } = await continueBotFlow(message, { version: 1, state: session.state })
 
         const allLogs = clientLogs ? [...(logs ?? []), ...clientLogs] : logs
 

apps/viewer/src/features/chat/api/sendMessageV2.ts

@@ -0,0 +1,131 @@
+import { publicProcedure } from '@/helpers/server/trpc'
+import {
+  chatReplySchema,
+  sendMessageInputSchema,
+} from '@typebot.io/schemas/features/chat/schema'
+import { TRPCError } from '@trpc/server'
+import { getSession } from '@typebot.io/bot-engine/queries/getSession'
+import { startSession } from '@typebot.io/bot-engine/startSession'
+import { saveStateToDatabase } from '@typebot.io/bot-engine/saveStateToDatabase'
+import { restartSession } from '@typebot.io/bot-engine/queries/restartSession'
+import { continueBotFlow } from '@typebot.io/bot-engine/continueBotFlow'
+import { parseDynamicTheme } from '@typebot.io/bot-engine/parseDynamicTheme'
+import { isDefined } from '@typebot.io/lib/utils'
+
+export const sendMessageV2 = publicProcedure
+  .meta({
+    openapi: {
+      method: 'POST',
+      path: '/sendMessage',
+      summary: 'Send a message',
+      description:
+        'To initiate a chat, do not provide a `sessionId` nor a `message`.\n\nContinue the conversation by providing the `sessionId` and the `message` that should answer the previous question.\n\nSet the `isPreview` option to `true` to chat with the non-published version of the typebot.',
+    },
+  })
+  .input(sendMessageInputSchema)
+  .output(chatReplySchema)
+  .mutation(
+    async ({
+      input: { sessionId, message, startParams, clientLogs },
+      ctx: { user },
+    }) => {
+      const session = sessionId ? await getSession(sessionId) : null
+
+      const isSessionExpired =
+        session &&
+        isDefined(session.state.expiryTimeout) &&
+        session.updatedAt.getTime() + session.state.expiryTimeout < Date.now()
+
+      if (isSessionExpired)
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Session expired. You need to start a new session.',
+        })
+
+      if (!session) {
+        if (!startParams)
+          throw new TRPCError({
+            code: 'BAD_REQUEST',
+            message: 'Missing startParams',
+          })
+        const {
+          typebot,
+          messages,
+          input,
+          resultId,
+          dynamicTheme,
+          logs,
+          clientSideActions,
+          newSessionState,
+        } = await startSession({
+          version: 2,
+          startParams,
+          userId: user?.id,
+          message,
+        })
+
+        const allLogs = clientLogs ? [...(logs ?? []), ...clientLogs] : logs
+
+        const session = startParams?.isOnlyRegistering
+          ? await restartSession({
+              state: newSessionState,
+            })
+          : await saveStateToDatabase({
+              session: {
+                state: newSessionState,
+              },
+              input,
+              logs: allLogs,
+              clientSideActions,
+            })
+
+        return {
+          sessionId: session.id,
+          typebot: typebot
+            ? {
+                id: typebot.id,
+                theme: typebot.theme,
+                settings: typebot.settings,
+              }
+            : undefined,
+          messages,
+          input,
+          resultId,
+          dynamicTheme,
+          logs,
+          clientSideActions,
+        }
+      } else {
+        const {
+          messages,
+          input,
+          clientSideActions,
+          newSessionState,
+          logs,
+          lastMessageNewFormat,
+        } = await continueBotFlow(message, { version: 2, state: session.state })
+
+        const allLogs = clientLogs ? [...(logs ?? []), ...clientLogs] : logs
+
+        if (newSessionState)
+          await saveStateToDatabase({
+            session: {
+              id: session.id,
+              state: newSessionState,
+            },
+            input,
+            logs: allLogs,
+            clientSideActions,
+          })
+
+        return {
+          messages,
+          input,
+          clientSideActions,
+          dynamicTheme: parseDynamicTheme(newSessionState),
+          logs,
+          lastMessageNewFormat,
+        }
+      }
+    }
+  )

apps/viewer/src/helpers/server/generateOpenApi.ts

@@ -1,11 +1,11 @@
 import { generateOpenApiDocument } from 'trpc-openapi'
 import { writeFileSync } from 'fs'
-import { appRouter } from './routers/v1/_app'
+import { appRouter } from './routers/appRouterV2'
 
 const openApiDocument = generateOpenApiDocument(appRouter, {
   title: 'Chat API',
-  version: '1.0.0',
-  baseUrl: 'https://typebot.io/api/v1',
+  version: '2.0.0',
+  baseUrl: 'https://typebot.io/api/v2',
   docsUrl: 'https://docs.typebot.io/api',
 })
 

apps/viewer/src/helpers/server/routers/v1/_app.ts → apps/viewer/src/helpers/server/routers/appRouterV1.ts

@@ -1,12 +1,12 @@
-import { sendMessage } from '@/features/chat/api/sendMessage'
+import { sendMessageV1 } from '@/features/chat/api/sendMessageV1'
 import { whatsAppRouter } from '@/features/whatsapp/api/router'
-import { router } from '../../trpc'
+import { router } from '../trpc'
 import { updateTypebotInSession } from '@/features/chat/api/updateTypebotInSession'
 import { getUploadUrl } from '@/features/fileUpload/api/deprecated/getUploadUrl'
 import { generateUploadUrl } from '@/features/fileUpload/api/generateUploadUrl'
 
 export const appRouter = router({
-  sendMessage,
+  sendMessageV1,
   getUploadUrl,
   generateUploadUrl,
   updateTypebotInSession,

apps/viewer/src/helpers/server/routers/appRouterV2.ts

@@ -0,0 +1,16 @@
+import { sendMessageV2 } from '@/features/chat/api/sendMessageV2'
+import { whatsAppRouter } from '@/features/whatsapp/api/router'
+import { router } from '../trpc'
+import { updateTypebotInSession } from '@/features/chat/api/updateTypebotInSession'
+import { getUploadUrl } from '@/features/fileUpload/api/deprecated/getUploadUrl'
+import { generateUploadUrl } from '@/features/fileUpload/api/generateUploadUrl'
+
+export const appRouter = router({
+  sendMessageV2,
+  getUploadUrl,
+  generateUploadUrl,
+  updateTypebotInSession,
+  whatsAppRouter,
+})
+
+export type AppRouter = typeof appRouter

apps/viewer/src/pages/api/v1/[...trpc].ts

@@ -1,4 +1,4 @@
-import { appRouter } from '@/helpers/server/routers/v1/_app'
+import { appRouter } from '@/helpers/server/routers/appRouterV1'
 import { captureException } from '@sentry/nextjs'
 import { createOpenApiNextHandler } from 'trpc-openapi'
 import cors from 'nextjs-cors'

apps/viewer/src/pages/api/v2/[...trpc].ts

@@ -0,0 +1,23 @@
+import { appRouter } from '@/helpers/server/routers/appRouterV2'
+import { captureException } from '@sentry/nextjs'
+import { createOpenApiNextHandler } from 'trpc-openapi'
+import cors from 'nextjs-cors'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { createContext } from '@/helpers/server/context'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  await cors(req, res)
+
+  return createOpenApiNextHandler({
+    router: appRouter,
+    createContext,
+    onError({ error }) {
+      if (error.code === 'INTERNAL_SERVER_ERROR') {
+        captureException(error)
+        console.error('Something went wrong', error)
+      }
+    },
+  })(req, res)
+}
+
+export default handler