✨ (theme) Add theme templates

Allows you to save your themes and select a theme from Typebot's gallery

Closes #275

packages/embeds/js/src/components/Bot.tsx

@@ -159,21 +159,31 @@ const BotContent = (props: BotContentProps) => {
   })
 
   const injectCustomFont = () => {
+    const existingFont = document.getElementById('bot-font')
+    if (
+      existingFont
+        ?.getAttribute('href')
+        ?.includes(
+          props.initialChatReply.typebot?.theme?.general?.font ?? 'Open Sans'
+        )
+    )
+      return
     const font = document.createElement('link')
     font.href = `https://fonts.googleapis.com/css2?family=${
       props.initialChatReply.typebot?.theme?.general?.font ?? 'Open Sans'
     }:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');')`
     font.rel = 'stylesheet'
+    font.id = 'bot-font'
     document.head.appendChild(font)
   }
 
   onMount(() => {
-    injectCustomFont()
     if (!botContainer) return
     resizeObserver.observe(botContainer)
   })
 
   createEffect(() => {
+    injectCustomFont()
     if (!botContainer) return
     setCssVariablesValue(props.initialChatReply.typebot.theme, botContainer)
   })
@@ -187,7 +197,7 @@ const BotContent = (props: BotContentProps) => {
     <div
       ref={botContainer}
       class={
-        'relative flex w-full h-full text-base overflow-hidden bg-cover flex-col items-center typebot-container ' +
+        'relative flex w-full h-full text-base overflow-hidden bg-cover bg-center flex-col items-center typebot-container ' +
         props.class
       }
     >

packages/embeds/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx

@@ -62,8 +62,8 @@ export const ChoiceForm = (props: Props) => {
               </button>
               {props.inputIndex === 0 && props.block.items.length === 1 && (
                 <span class="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">
-                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full brightness-225 opacity-75" />
-                  <span class="relative inline-flex rounded-full h-3 w-3 brightness-200" />
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full brightness-200 opacity-75" />
+                  <span class="relative inline-flex rounded-full h-3 w-3 brightness-150" />
                 </span>
               )}
             </span>

packages/embeds/js/src/utils/setCssVariablesValue.ts

@@ -134,6 +134,8 @@ const setTypebotBackground = (
   background: Background,
   documentStyle: CSSStyleDeclaration
 ) => {
+  documentStyle.setProperty(cssVariableNames.general.bgImage, null)
+  documentStyle.setProperty(cssVariableNames.general.bgColor, null)
   documentStyle.setProperty(
     background?.type === BackgroundType.IMAGE
       ? cssVariableNames.general.bgImage