From 907cad805031e75161dd2dc83b1f962769208a84 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 21 Feb 2023 08:28:36 +0100
Subject: [PATCH] :bug: Improve bot libs mount in prod env

---
 apps/docs/openapi/chat/_spec_.json            | 36 ++++++++++++-------
 packages/js/package.json                      |  5 ++-
 packages/js/src/components/Bot.tsx            | 14 +++++---
 .../ConversationContainer.tsx                 |  4 +--
 .../bubble/components/BubbleButton.tsx        |  3 +-
 .../src/features/popup/components/Popup.tsx   |  3 +-
 packages/js/src/types.ts                      |  6 ++++
 packages/react/package.json                   |  2 +-
 packages/react/src/Bubble.tsx                 | 31 ++++++++--------
 packages/react/src/Popup.tsx                  | 28 ++++++++-------
 pnpm-lock.yaml                                | 17 +--------
 11 files changed, 78 insertions(+), 71 deletions(-)

diff --git a/apps/docs/openapi/chat/_spec_.json b/apps/docs/openapi/chat/_spec_.json
index d7be5cc50..14aaf2de5 100644
--- a/apps/docs/openapi/chat/_spec_.json
+++ b/apps/docs/openapi/chat/_spec_.json
@@ -335,7 +335,12 @@
                                                                             "type": "string"
                                                                           },
                                                                           "height": {
-                                                                            "type": "number"
+                                                                            "anyOf": [
+                                                                              {
+                                                                                "type": "number"
+                                                                              },
+                                                                              {}
+                                                                            ]
                                                                           }
                                                                         },
                                                                         "required": [
@@ -3386,19 +3391,26 @@
                                     ]
                                   },
                                   "content": {
-                                    "type": "object",
-                                    "properties": {
-                                      "url": {
-                                        "type": "string"
+                                    "allOf": [
+                                      {
+                                        "type": "object",
+                                        "properties": {
+                                          "url": {
+                                            "type": "string"
+                                          }
+                                        },
+                                        "additionalProperties": false
                                       },
-                                      "height": {
-                                        "type": "number"
+                                      {
+                                        "type": "object",
+                                        "properties": {
+                                          "height": {
+                                            "type": "number"
+                                          }
+                                        },
+                                        "additionalProperties": false
                                       }
-                                    },
-                                    "required": [
-                                      "height"
-                                    ],
-                                    "additionalProperties": false
+                                    ]
                                   }
                                 },
                                 "required": [
diff --git a/packages/js/package.json b/packages/js/package.json
index e9cc032c9..45e0db4f7 100644
--- a/packages/js/package.json
+++ b/packages/js/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "rollup --watch --config rollup.config.js",
-    "build": "rollup --config rollup.config.js && rm -rf dist/dts",
+    "build": "rollup --config rollup.config.js",
     "lint": "eslint --fix \"src/**/*.ts*\""
   },
   "license": "MIT",
@@ -31,7 +31,6 @@
     "postcss": "8.4.21",
     "react": "18.2.0",
     "rollup": "3.12.0",
-    "rollup-plugin-dts": "5.1.1",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-typescript-paths": "^1.4.0",
     "tailwindcss": "3.2.4",
diff --git a/packages/js/src/components/Bot.tsx b/packages/js/src/components/Bot.tsx
index 5f2294e36..a391ea0f4 100644
--- a/packages/js/src/components/Bot.tsx
+++ b/packages/js/src/components/Bot.tsx
@@ -3,9 +3,8 @@ import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { injectCustomHeadCode, isNotEmpty } from 'utils'
 import { getInitialChatReplyQuery } from '@/queries/getInitialChatReplyQuery'
 import { ConversationContainer } from './ConversationContainer'
-import type { ChatReply, StartParams } from 'models'
 import { setIsMobile } from '@/utils/isMobileSignal'
-import { BotContext, InitialChatReply } from '@/types'
+import { BotContext, InitialChatReply, OutgoingLog } from '@/types'
 import { ErrorMessage } from './ErrorMessage'
 import {
   getExistingResultIdFromSession,
@@ -13,13 +12,18 @@ import {
 } from '@/utils/sessionStorage'
 import { setCssVariablesValue } from '@/utils/setCssVariablesValue'
 
-export type BotProps = StartParams & {
+export type BotProps = {
+  typebot: string | any
+  isPreview?: boolean
+  resultId?: string
+  startGroupId?: string
+  prefilledVariables?: Record<string, unknown>
   apiHost?: string
   onNewInputBlock?: (ids: { id: string; groupId: string }) => void
   onAnswer?: (answer: { message: string; blockId: string }) => void
   onInit?: () => void
   onEnd?: () => void
-  onNewLogs?: (logs: ChatReply['logs']) => void
+  onNewLogs?: (logs: OutgoingLog[]) => void
 }
 
 export const Bot = (props: BotProps & { class?: string }) => {
@@ -138,7 +142,7 @@ type BotContentProps = {
   onNewInputBlock?: (block: { id: string; groupId: string }) => void
   onAnswer?: (answer: { message: string; blockId: string }) => void
   onEnd?: () => void
-  onNewLogs?: (logs: ChatReply['logs']) => void
+  onNewLogs?: (logs: OutgoingLog[]) => void
 }
 
 const BotContent = (props: BotContentProps) => {
diff --git a/packages/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/js/src/components/ConversationContainer/ConversationContainer.tsx
index 3768f5d8e..15b166c8b 100644
--- a/packages/js/src/components/ConversationContainer/ConversationContainer.tsx
+++ b/packages/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -2,7 +2,7 @@ import type { ChatReply, Theme } from 'models'
 import { createEffect, createSignal, For, Show } from 'solid-js'
 import { sendMessageQuery } from '@/queries/sendMessageQuery'
 import { ChatChunk } from './ChatChunk'
-import { BotContext, InitialChatReply } from '@/types'
+import { BotContext, InitialChatReply, OutgoingLog } from '@/types'
 import { isNotDefined } from 'utils'
 import { executeClientSideAction } from '@/utils/executeClientSideActions'
 import { LoadingChunk } from './LoadingChunk'
@@ -38,7 +38,7 @@ type Props = {
   onNewInputBlock?: (ids: { id: string; groupId: string }) => void
   onAnswer?: (answer: { message: string; blockId: string }) => void
   onEnd?: () => void
-  onNewLogs?: (logs: ChatReply['logs']) => void
+  onNewLogs?: (logs: OutgoingLog[]) => void
 }
 
 export const ConversationContainer = (props: Props) => {
diff --git a/packages/js/src/features/bubble/components/BubbleButton.tsx b/packages/js/src/features/bubble/components/BubbleButton.tsx
index ef49be52c..e3a22f535 100644
--- a/packages/js/src/features/bubble/components/BubbleButton.tsx
+++ b/packages/js/src/features/bubble/components/BubbleButton.tsx
@@ -13,8 +13,7 @@ const defaultIconColor = 'white'
 export const BubbleButton = (props: Props) => {
   return (
     <button
-      // eslint-disable-next-line solid/reactivity
-      onClick={props.toggleBot}
+      onClick={() => props.toggleBot()}
       class={
         'absolute bottom-4 right-4 shadow-md w-12 h-12 rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in'
       }
diff --git a/packages/js/src/features/popup/components/Popup.tsx b/packages/js/src/features/popup/components/Popup.tsx
index 7d81cad15..0980696be 100644
--- a/packages/js/src/features/popup/components/Popup.tsx
+++ b/packages/js/src/features/popup/components/Popup.tsx
@@ -39,10 +39,11 @@ export const Popup = (props: PopupProps) => {
 
   const [isBotOpened, setIsBotOpened] = createSignal(
     // eslint-disable-next-line solid/reactivity
-    popupProps.isOpen ?? popupProps.defaultOpen ?? false
+    popupProps.isOpen ?? false
   )
 
   onMount(() => {
+    if (popupProps.defaultOpen) openBot()
     window.addEventListener('message', processIncomingEvent)
     const autoShowDelay = popupProps.autoShowDelay
     if (isDefined(autoShowDelay)) {
diff --git a/packages/js/src/types.ts b/packages/js/src/types.ts
index f59f0285d..7c35f8801 100644
--- a/packages/js/src/types.ts
+++ b/packages/js/src/types.ts
@@ -16,3 +16,9 @@ export type InitialChatReply = ChatReply & {
   typebot: NonNullable<ChatReply['typebot']>
   sessionId: NonNullable<ChatReply['sessionId']>
 }
+
+export type OutgoingLog = {
+  status: string
+  description: string
+  details?: unknown
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 4a0704939..34c67606a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/react/src/Bubble.tsx b/packages/react/src/Bubble.tsx
index 24d3b54cb..19a9d3713 100644
--- a/packages/react/src/Bubble.tsx
+++ b/packages/react/src/Bubble.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { BubbleProps } from '@typebot.io/js'
 
 type Props = BubbleProps
@@ -18,33 +18,32 @@ type BubbleElement = HTMLElement & Props
 
 export const Bubble = (props: Props) => {
   const ref = useRef<BubbleElement | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
 
   useEffect(() => {
     ;(async () => {
       await import('@typebot.io/js/dist/web')
-      initBubble()
+      setIsInitialized(true)
     })()
-    return () => {
-      ref.current?.remove()
-    }
   }, [])
 
-  useEffect(() => {
-    updateProps(ref.current, props)
-  }, [props])
-
-  const updateProps = (element: BubbleElement | null, props: Props) => {
-    if (!element) return
-    Object.assign(element, props)
-  }
-
-  const initBubble = async () => {
+  const attachBubbleToDom = useCallback((props: Props) => {
     const bubbleElement = document.createElement(
       'typebot-bubble'
     ) as BubbleElement
-    if (ref.current) return
     ref.current = bubbleElement
+    injectPropsToElement(ref.current, props)
     document.body.append(ref.current)
+  }, [])
+
+  useEffect(() => {
+    if (!isInitialized) return
+    if (!ref.current) attachBubbleToDom(props)
+    injectPropsToElement(ref.current as BubbleElement, props)
+  }, [attachBubbleToDom, isInitialized, props])
+
+  const injectPropsToElement = (element: BubbleElement, props: Props) => {
+    Object.assign(element, props)
   }
 
   return null
diff --git a/packages/react/src/Popup.tsx b/packages/react/src/Popup.tsx
index 9bd36341e..bfd7d9097 100644
--- a/packages/react/src/Popup.tsx
+++ b/packages/react/src/Popup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { PopupProps } from '@typebot.io/js'
 
 type Props = PopupProps
@@ -18,31 +18,33 @@ type PopupElement = HTMLElement & Props
 
 export const Popup = (props: Props) => {
   const ref = useRef<PopupElement | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
 
   useEffect(() => {
     ;(async () => {
       await import('@typebot.io/js/dist/web')
-      initPopup()
+      setIsInitialized(true)
     })()
     return () => {
       ref.current?.remove()
     }
   }, [])
 
-  useEffect(() => {
-    updateProps(ref.current, props)
-  }, [props])
-
-  const updateProps = (element: PopupElement | null, props: Props) => {
-    if (!element) return
-    Object.assign(element, props)
-  }
-
-  const initPopup = async () => {
+  const attachPopupToDom = useCallback((props: Props) => {
     const popupElement = document.createElement('typebot-popup') as PopupElement
-    if (ref.current) return
     ref.current = popupElement
+    injectPropsToElement(ref.current, props)
     document.body.append(ref.current)
+  }, [])
+
+  useEffect(() => {
+    if (!isInitialized) return
+    if (!ref.current) attachPopupToDom(props)
+    injectPropsToElement(ref.current as PopupElement, props)
+  }, [attachPopupToDom, isInitialized, props])
+
+  const injectPropsToElement = (element: PopupElement, props: Props) => {
+    Object.assign(element, props)
   }
 
   return null
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47d4bb514..d41e6a68d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -593,7 +593,6 @@ importers:
       postcss: 8.4.21
       react: 18.2.0
       rollup: 3.12.0
-      rollup-plugin-dts: 5.1.1
       rollup-plugin-postcss: 4.0.2
       rollup-plugin-typescript-paths: ^1.4.0
       solid-element: 1.6.3
@@ -620,7 +619,6 @@ importers:
       postcss: 8.4.21
       react: 18.2.0
       rollup: 3.12.0
-      rollup-plugin-dts: 5.1.1_tkwgik6422u3whqaozmypsnvni
       rollup-plugin-postcss: 4.0.2_postcss@8.4.21
       rollup-plugin-typescript-paths: 1.4.0_typescript@4.9.4
       tailwindcss: 3.2.4_postcss@8.4.21
@@ -14431,6 +14429,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.14
+    dev: false
 
   /make-dir/3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -17690,20 +17689,6 @@ packages:
       inherits: 2.0.4
     dev: false
 
-  /rollup-plugin-dts/5.1.1_tkwgik6422u3whqaozmypsnvni:
-    resolution: {integrity: sha512-zpgo52XmnLg8w4k3MScinFHZK1+ro6r7uVe34fJ0Ee8AM45FvgvTuvfWWaRgIpA4pQ1BHJuu2ospncZhkcJVeA==}
-    engines: {node: '>=v14'}
-    peerDependencies:
-      rollup: ^3.0.0
-      typescript: ^4.1
-    dependencies:
-      magic-string: 0.27.0
-      rollup: 3.12.0
-      typescript: 4.9.4
-    optionalDependencies:
-      '@babel/code-frame': 7.18.6
-    dev: true
-
   /rollup-plugin-postcss/4.0.2_postcss@8.4.21:
     resolution: {integrity: sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==}
     engines: {node: '>=10'}