⚡ (chat) Improve chat API compatibility with preview mode

packages/js/src/components/Bot.tsx

@@ -1,83 +1,128 @@
 import { LiteBadge } from './LiteBadge'
-import { createSignal, onCleanup, onMount, Show } from 'solid-js'
-import {
-  getViewerUrl,
-  injectCustomHeadCode,
-  isDefined,
-  isNotEmpty,
-} from 'utils'
+import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { getViewerUrl, injectCustomHeadCode, isEmpty, isNotEmpty } from 'utils'
 import { getInitialChatReplyQuery } from '@/queries/getInitialChatReplyQuery'
 import { ConversationContainer } from './ConversationContainer'
 import css from '../assets/index.css'
-import { InitialChatReply, StartParams } from 'models'
+import { StartParams } from 'models'
 import { setIsMobile } from '@/utils/isMobileSignal'
-import { BotContext } from '@/types'
+import { BotContext, InitialChatReply } from '@/types'
+import { ErrorMessage } from './ErrorMessage'
+import {
+  getExistingResultIdFromSession,
+  setResultInSession,
+} from '@/utils/sessionStorage'
+import { setCssVariablesValue } from '@/utils/setCssVariablesValue'
 
 export type BotProps = StartParams & {
-  initialChatReply?: InitialChatReply
   apiHost?: string
+  onNewInputBlock?: (ids: { id: string; groupId: string }) => void
+  onAnswer?: (answer: { message: string; blockId: string }) => void
+  onInit?: () => void
+  onEnd?: () => void
 }
 
 export const Bot = (props: BotProps) => {
   const [initialChatReply, setInitialChatReply] = createSignal<
     InitialChatReply | undefined
-  >(props.initialChatReply)
+  >()
+  const [error, setError] = createSignal<Error | undefined>(
+    // eslint-disable-next-line solid/reactivity
+    isEmpty(isEmpty(props.apiHost) ? getViewerUrl() : props.apiHost)
+      ? new Error('process.env.NEXT_PUBLIC_VIEWER_URL is missing in env')
+      : undefined
+  )
+
+  const initializeBot = async () => {
+    const urlParams = new URLSearchParams(location.search)
+    props.onInit?.()
+    const prefilledVariables: { [key: string]: string } = {}
+    urlParams.forEach((value, key) => {
+      prefilledVariables[key] = value
+    })
+    const { data, error } = await getInitialChatReplyQuery({
+      typebot: props.typebot,
+      apiHost: props.apiHost,
+      isPreview: props.isPreview ?? false,
+      resultId: isNotEmpty(props.resultId)
+        ? props.resultId
+        : getExistingResultIdFromSession(),
+      startGroupId: props.startGroupId,
+      prefilledVariables: {
+        ...prefilledVariables,
+        ...props.prefilledVariables,
+      },
+    })
+    if (error && 'code' in error && typeof error.code === 'string') {
+      if (['BAD_REQUEST', 'FORBIDDEN'].includes(error.code))
+        setError(new Error('This bot is now closed.'))
+      if (error.code === 'NOT_FOUND') setError(new Error('Typebot not found.'))
+      return
+    }
+
+    if (!data) return setError(new Error("Couldn't initiate the chat"))
+
+    if (data.resultId) setResultInSession(data.resultId)
+    setInitialChatReply(data)
+
+    if (data.input?.id && props.onNewInputBlock)
+      props.onNewInputBlock({
+        id: data.input.id,
+        groupId: data.input.groupId,
+      })
+    const customHeadCode = data.typebot.settings.metadata.customHeadCode
+    if (customHeadCode) injectCustomHeadCode(customHeadCode)
+  }
 
   onMount(() => {
-    if (!props.typebotId) return
-    const initialChatReplyValue = initialChatReply()
-    if (isDefined(initialChatReplyValue)) {
-      const customHeadCode =
-        initialChatReplyValue.typebot.settings.metadata.customHeadCode
-      if (customHeadCode) injectCustomHeadCode(customHeadCode)
-    } else {
-      const urlParams = new URLSearchParams(location.search)
-      const prefilledVariables: { [key: string]: string } = {}
-      urlParams.forEach((value, key) => {
-        prefilledVariables[key] = value
-      })
-      getInitialChatReplyQuery({
-        typebotId: props.typebotId,
-        apiHost: props.apiHost,
-        isPreview: props.isPreview ?? false,
-        resultId: props.resultId,
-        prefilledVariables: {
-          ...prefilledVariables,
-          ...props.prefilledVariables,
-        },
-      }).then((initialChatReply) => {
-        setInitialChatReply(initialChatReply)
-      })
-    }
+    initializeBot().then()
   })
 
   return (
-    <Show
-      when={isNotEmpty(props.apiHost ?? getViewerUrl())}
-      fallback={() => (
-        <p>process.env.NEXT_PUBLIC_VIEWER_URL is missing in env</p>
-      )}
-    >
+    <>
+      <style>{css}</style>
+      <Show when={error()} keyed>
+        {(error) => <ErrorMessage error={error} />}
+      </Show>
       <Show when={initialChatReply()} keyed>
         {(initialChatReply) => (
           <BotContent
-            initialChatReply={initialChatReply}
+            initialChatReply={{
+              ...initialChatReply,
+              typebot: {
+                ...initialChatReply.typebot,
+                settings:
+                  typeof props.typebot === 'string'
+                    ? initialChatReply.typebot?.settings
+                    : props.typebot?.settings,
+                theme:
+                  typeof props.typebot === 'string'
+                    ? initialChatReply.typebot?.theme
+                    : props.typebot?.theme,
+              },
+            }}
             context={{
               apiHost: props.apiHost,
               isPreview: props.isPreview ?? false,
-              typebotId: props.typebotId as string,
+              typebotId: initialChatReply.typebot.id,
               resultId: initialChatReply.resultId,
             }}
+            onNewInputBlock={props.onNewInputBlock}
+            onAnswer={props.onAnswer}
+            onEnd={props.onEnd}
           />
         )}
       </Show>
-    </Show>
+    </>
   )
 }
 
 type BotContentProps = {
   initialChatReply: InitialChatReply
   context: BotContext
+  onNewInputBlock?: (ids: { id: string; groupId: string }) => void
+  onAnswer?: (answer: { message: string; blockId: string }) => void
+  onEnd?: () => void
 }
 
 const BotContent = (props: BotContentProps) => {
@@ -98,38 +143,39 @@ const BotContent = (props: BotContentProps) => {
 
   onMount(() => {
     injectCustomFont()
-    if (botContainer) {
-      resizeObserver.observe(botContainer)
-    }
+    if (!botContainer) return
+    resizeObserver.observe(botContainer)
+  })
+
+  createEffect(() => {
+    if (!botContainer) return
+    setCssVariablesValue(props.initialChatReply.typebot.theme, botContainer)
   })
 
   onCleanup(() => {
-    if (botContainer) {
-      resizeObserver.unobserve(botContainer)
-    }
+    if (!botContainer) return
+    resizeObserver.unobserve(botContainer)
   })
 
   return (
-    <>
-      <style>{css}</style>
-      <div
-        ref={botContainer}
-        class="flex w-full h-full text-base overflow-hidden bg-cover flex-col items-center typebot-container"
-      >
-        <div class="flex w-full h-full justify-center">
-          <ConversationContainer
-            context={props.context}
-            initialChatReply={props.initialChatReply}
-          />
-        </div>
-        <Show
-          when={
-            props.initialChatReply.typebot.settings.general.isBrandingEnabled
-          }
-        >
-          <LiteBadge botContainer={botContainer} />
-        </Show>
+    <div
+      ref={botContainer}
+      class="relative flex w-full h-full text-base overflow-hidden bg-cover flex-col items-center typebot-container"
+    >
+      <div class="flex w-full h-full justify-center">
+        <ConversationContainer
+          context={props.context}
+          initialChatReply={props.initialChatReply}
+          onNewInputBlock={props.onNewInputBlock}
+          onAnswer={props.onAnswer}
+          onEnd={props.onEnd}
+        />
       </div>
-    </>
+      <Show
+        when={props.initialChatReply.typebot.settings.general.isBrandingEnabled}
+      >
+        <LiteBadge botContainer={botContainer} />
+      </Show>
+    </div>
   )
 }