⚡ (chat) Improve chat API compatibility with preview mode

apps/docs/openapi/introduction.md

@@ -21,8 +21,18 @@ The Chat API allows you to execute (chat) with a typebot.
 
 ### How to find my `typebotId`
 
+If you'd like to execute the typebot in preview mode, you will need to provide the ID of the building typebot available in the editor URL:
+
 <img
   src="/img/api/typebotId.png"
   width="900"
   alt="Get typebot ID"
 />
+
+For published typebot execution, you need to provide the public typebot ID available here:
+
+<img
+  src="/img/api/publicId.png"
+  width="900"
+  alt="Get typebot ID"
+/>

apps/viewer/src/components/TypebotPageV2.tsx

@@ -1,78 +1,31 @@
-import { getInitialChatReplyQuery } from '@/queries/getInitialChatReplyQuery'
-import {
-  getExistingResultFromSession,
-  setResultInSession,
-} from '@/utils/sessionStorage'
 import { Standard } from '@typebot.io/react'
-import { BackgroundType, InitialChatReply, Typebot } from 'models'
+import { BackgroundType, Typebot } from 'models'
 import { useRouter } from 'next/router'
-import { useCallback, useEffect, useState } from 'react'
-import { ErrorPage } from './ErrorPage'
 import { SEO } from './Seo'
 
 export type TypebotPageV2Props = {
   url: string
   typebot: Pick<
     Typebot,
-    'settings' | 'theme' | 'id' | 'name' | 'isClosed' | 'isArchived'
+    'settings' | 'theme' | 'name' | 'isClosed' | 'isArchived' | 'publicId'
   >
 }
 
-let hasInitializedChat = false
-
 export const TypebotPageV2 = ({ url, typebot }: TypebotPageV2Props) => {
   const { asPath, push } = useRouter()
-  const [initialChatReply, setInitialChatReply] = useState<InitialChatReply>()
-  const [error, setError] = useState<Error | undefined>(undefined)
 
   const background = typebot.theme.general.background
 
-  const clearQueryParamsIfNecessary = useCallback(() => {
+  const clearQueryParamsIfNecessary = () => {
     const hasQueryParams = asPath.includes('?')
     if (
       !hasQueryParams ||
       !(typebot.settings.general.isHideQueryParamsEnabled ?? true)
     )
       return
     push(asPath.split('?')[0], undefined, { shallow: true })
-  }, [asPath, push, typebot.settings.general.isHideQueryParamsEnabled])
-
-  useEffect(() => {
-    console.log(open)
-    clearQueryParamsIfNecessary()
-  }, [clearQueryParamsIfNecessary])
-
-  useEffect(() => {
-    if (hasInitializedChat) return
-    hasInitializedChat = true
-    const prefilledVariables = extractPrefilledVariables()
-    const existingResultId = getExistingResultFromSession() ?? undefined
-
-    getInitialChatReplyQuery({
-      typebotId: typebot.id,
-      resultId:
-        typebot.settings.general.isNewResultOnRefreshEnabled ?? false
-          ? undefined
-          : existingResultId,
-      prefilledVariables,
-    }).then(({ data, error }) => {
-      if (error && 'code' in error && error.code === 'FORBIDDEN') {
-        setError(new Error('This bot is now closed.'))
-        return
-      }
-      if (!data) return setError(new Error("Couldn't initiate the chat"))
-      setInitialChatReply(data)
-      setResultInSession(data.resultId)
-    })
-  }, [
-    initialChatReply,
-    typebot.id,
-    typebot.settings.general.isNewResultOnRefreshEnabled,
-  ])
-
-  if (error) {
-    return <ErrorPage error={error} />
   }
+
   return (
     <div
       style={{
@@ -89,20 +42,12 @@ export const TypebotPageV2 = ({ url, typebot }: TypebotPageV2Props) => {
         typebotName={typebot.name}
         metadata={typebot.settings.metadata}
       />
-      {initialChatReply && (
-        <Standard typebotId={typebot.id} initialChatReply={initialChatReply} />
+      {typebot.publicId && (
+        <Standard
+          typebot={typebot.publicId}
+          onInit={clearQueryParamsIfNecessary}
+        />
       )}
     </div>
   )
 }
-
-const extractPrefilledVariables = () => {
-  const urlParams = new URLSearchParams(location.search)
-
-  const prefilledVariables: { [key: string]: string } = {}
-  urlParams.forEach((value, key) => {
-    prefilledVariables[key] = value
-  })
-
-  return prefilledVariables
-}

apps/viewer/src/features/blocks/inputs/buttons/api/utils/validateButtonInput.ts

@@ -3,4 +3,9 @@ import { ChoiceInputBlock } from 'models'
 export const validateButtonInput = (
   buttonBlock: ChoiceInputBlock,
   input: string
-) => buttonBlock.items.some((item) => item.content === input)
+) =>
+  input
+    .split(',')
+    .every((value) =>
+      buttonBlock.items.some((item) => item.content === value.trim())
+    )