🦴 Add theme page backbone

packages/bot-engine/src/components/ConversationContainer.tsx

@@ -3,6 +3,8 @@ import { PublicTypebot } from '..'
 
 import { Block } from '..'
 import { ChatBlock } from './ChatBlock/ChatBlock'
+import { useFrame } from 'react-frame-component'
+import { setCssVariablesValue } from '../services/theme'
 
 export const ConversationContainer = ({
   typebot,
@@ -11,6 +13,7 @@ export const ConversationContainer = ({
   typebot: PublicTypebot
   onNewBlockVisisble: (blockId: string) => void
 }) => {
+  const { document: frameDocument } = useFrame()
   const [displayedBlocks, setDisplayedBlocks] = useState<Block[]>([])
 
   const [isConversationEnded, setIsConversationEnded] = useState(false)
@@ -28,6 +31,10 @@ export const ConversationContainer = ({
     if (firstBlockId) displayNextBlock(firstBlockId)
   }, [])
 
+  useEffect(() => {
+    setCssVariablesValue(typebot.theme, frameDocument.body.style)
+  }, [typebot.theme, frameDocument])
+
   return (
     <div
       className="overflow-y-scroll w-full lg:w-3/4 min-h-full rounded lg:px-5 px-3 pt-10 relative scrollable-container typebot-chat-view"

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { PublicTypebot } from '../models'
+import React, { useMemo } from 'react'
+import { BackgroundType, PublicTypebot } from '../models'
 import { TypebotContext } from '../contexts/TypebotContext'
 import Frame from 'react-frame-component'
 //@ts-ignore
@@ -9,25 +9,47 @@ import { ResultContext } from '../contexts/ResultsContext'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot
-  onNewBlockVisisble: (blockId: string) => void
+  onNewBlockVisisble?: (blockId: string) => void
 }
 export const TypebotViewer = ({
   typebot,
   onNewBlockVisisble,
 }: TypebotViewerProps) => {
+  const containerBgColor = useMemo(
+    () =>
+      typebot.theme.general.background.type === BackgroundType.COLOR
+        ? typebot.theme.general.background.content
+        : 'transparent',
+    [typebot.theme.general.background]
+  )
+  const handleNewBlockVisible = (blockId: string) => {
+    if (onNewBlockVisisble) onNewBlockVisisble(blockId)
+  }
+
   return (
     <Frame
       id="typebot-iframe"
       head={<style>{style}</style>}
       style={{ width: '100%' }}
     >
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `@import url('https://fonts.googleapis.com/css2?family=${typebot.theme.general.font}:wght@300;400;600&display=swap');`,
+        }}
+      />
       <TypebotContext typebot={typebot}>
         <ResultContext typebotId={typebot.id}>
-          <div className="flex text-base overflow-hidden bg-cover h-screen w-screen typebot-container flex-col items-center">
+          <div
+            className="flex text-base overflow-hidden bg-cover h-screen w-screen flex-col items-center typebot-container"
+            style={{
+              // We set this as inline style to avoid color flashing (due to SSR)
+              backgroundColor: containerBgColor,
+            }}
+          >
             <div className="flex w-full h-full justify-center">
               <ConversationContainer
                 typebot={typebot}
-                onNewBlockVisisble={onNewBlockVisisble}
+                onNewBlockVisisble={handleNewBlockVisible}
               />
             </div>
           </div>