⚡ (js) Add placement option for bubble embed

Allows you to place the bubble embed on the bottom left corner
of your site

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ThemeSettings.tsx

@@ -4,17 +4,24 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
+  Button,
   HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
   Stack,
   Text,
 } from '@chakra-ui/react'
 import { BubbleProps } from '@typebot.io/js'
 import {
+  BubbleTheme,
   ButtonTheme,
   PreviewMessageTheme,
 } from '@typebot.io/js/dist/features/bubble/types'
 import { ButtonThemeSettings } from './ButtonThemeSettings'
 import { PreviewMessageThemeSettings } from './PreviewMessageThemeSettings'
+import { ChevronDownIcon } from '@/components/icons'
 
 type Props = {
   isPreviewMessageEnabled: boolean
@@ -41,6 +48,13 @@ export const ThemeSettings = ({
     })
   }
 
+  const updatePlacement = (placement: BubbleTheme['placement']) => {
+    onChange({
+      ...theme,
+      placement,
+    })
+  }
+
   return (
     <Accordion allowMultiple>
       <AccordionItem>
@@ -51,6 +65,22 @@ export const ThemeSettings = ({
           <AccordionIcon />
         </AccordionButton>
         <AccordionPanel as={Stack} pb={4} spacing={4} px="0">
+          <HStack justify="space-between">
+            <Text>Placement</Text>
+            <Menu>
+              <MenuButton as={Button} size="sm" rightIcon={<ChevronDownIcon />}>
+                {theme?.placement ?? 'right'}
+              </MenuButton>
+              <MenuList>
+                <MenuItem onClick={() => updatePlacement('right')}>
+                  right
+                </MenuItem>
+                <MenuItem onClick={() => updatePlacement('left')}>
+                  left
+                </MenuItem>
+              </MenuList>
+            </Menu>
+          </HStack>
           <ButtonThemeSettings
             buttonTheme={theme?.button}
             onChange={updateButtonTheme}

apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts

@@ -72,7 +72,8 @@ const parseBubbleTheme = (theme: BubbleProps['theme']): string => {
   const buttonThemeLine = parseButtonTheme(button)
   const previewMessageThemeLine = parsePreviewMessageTheme(previewMessage)
   const chatWindowThemeLine = parseChatWindowTheme(theme.chatWindow)
-  const line = `theme: {${buttonThemeLine}${previewMessageThemeLine}${chatWindowThemeLine}},`
+  const placementLine = parseStringParam('placement', theme.placement, 'right')
+  const line = `theme: {${placementLine}${buttonThemeLine}${previewMessageThemeLine}${chatWindowThemeLine}},`
   if (line === 'theme: {},') return ''
   return line
 }

apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts

@@ -6,8 +6,15 @@ import { Typebot } from '@typebot.io/schemas'
 import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import packageJson from '../../../../../../../../packages/embeds/js/package.json'
 
-export const parseStringParam = (fieldName: string, fieldValue?: string) =>
-  fieldValue ? `${fieldName}: "${fieldValue}",` : ``
+export const parseStringParam = (
+  fieldName: string,
+  fieldValue?: string,
+  defaultValue?: string
+) => {
+  if (!fieldValue) return ''
+  if (isDefined(defaultValue) && fieldValue === defaultValue) return ''
+  return `${fieldName}: "${fieldValue}",`
+}
 
 export const parseNumberOrBoolParam = (
   fieldName: string,