♿ (js) Use px instead of rem to look good on any website

packages/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -61,7 +61,7 @@ export const ChatChunk = (props: Props) => {
             style={{
               'margin-right': props.theme.chat.guestAvatar?.isEnabled
                 ? '50px'
-                : '0.5rem',
+                : '8px',
             }}
           >
             <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>

packages/js/src/components/ConversationContainer/LoadingChunk.tsx

@@ -21,7 +21,7 @@ export const LoadingChunk = (props: Props) => (
           style={{
             'margin-right': props.theme.chat.guestAvatar?.isEnabled
               ? '50px'
-              : '0.5rem',
+              : '8px',
           }}
         >
           <LoadingBubble />

packages/js/src/components/bubbles/LoadingBubble.tsx

@@ -7,8 +7,8 @@ export const LoadingBubble = () => (
         <div
           class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
           style={{
-            width: '4rem',
+            width: '64px',
-            height: '2rem',
+            height: '32px',
           }}
           data-testid="host-bubble"
         >

packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -35,8 +35,8 @@ export const AudioBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() && <TypingBubble />}
@@ -47,7 +47,7 @@ export const AudioBubble = (props: Props) => {
               'z-10 text-fade-in m-2 ' +
               (isTyping() ? 'opacity-0' : 'opacity-100')
             }
-            style={{ height: isTyping() ? '2rem' : 'revert' }}
+            style={{ height: isTyping() ? '32px' : 'revert' }}
             autoplay
             controls
           />

packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx

@@ -36,8 +36,8 @@ export const EmbedBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() && <TypingBubble />}
@@ -50,7 +50,7 @@ export const EmbedBubble = (props: Props) => {
               (isTyping() ? 'opacity-0' : 'opacity-100')
             }
             style={{
-              height: isTyping() ? '2rem' : `${props.content.height}px`,
+              height: isTyping() ? '32px' : `${props.content.height}px`,
             }}
           />
         </div>

packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx

@@ -45,8 +45,8 @@ export const ImageBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() ? <TypingBubble /> : null}
@@ -60,8 +60,8 @@ export const ImageBubble = (props: Props) => {
                 (isTyping() ? 'opacity-0' : 'opacity-100')
               }
               style={{
-                'max-height': '32rem',
+                'max-height': '512px',
-                height: isTyping() ? '2rem' : 'auto',
+                height: isTyping() ? '32px' : 'auto',
               }}
               alt="Bubble image"
             />

packages/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx

@@ -53,8 +53,8 @@ export const TextBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
             style={{
-              width: isTyping() ? '4rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
             data-testid="host-bubble"
           >

packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -38,8 +38,8 @@ export const VideoBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() && <TypingBubble />}
@@ -72,7 +72,7 @@ const VideoContent = (props: VideoContentProps) => {
             (props.isTyping ? 'opacity-0' : 'opacity-100')
           }
           style={{
-            height: props.isTyping ? '2rem' : 'auto',
+            height: props.isTyping ? '32px' : 'auto',
             'max-height': window.navigator.vendor.match(/apple/i) ? '40vh' : '',
           }}
           autoplay
@@ -100,7 +100,7 @@ const VideoContent = (props: VideoContentProps) => {
             'w-full p-4 text-fade-in z-10 rounded-md ' +
             (props.isTyping ? 'opacity-0' : 'opacity-100')
           }
-          height={props.isTyping ? '2rem' : '200px'}
+          height={props.isTyping ? '32px' : '200px'}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen
         />

packages/js/src/features/blocks/inputs/date/components/DateForm.tsx

@@ -46,7 +46,7 @@ export const DateForm = (props: Props) => {
               <input
                 class="focus:outline-none flex-1 w-full text-input"
                 style={{
-                  'min-height': '2rem',
+                  'min-height': '32px',
                   'min-width': '100px',
                   'font-size': '16px',
                 }}
@@ -70,7 +70,7 @@ export const DateForm = (props: Props) => {
                 <input
                   class="focus:outline-none flex-1 w-full text-input ml-2"
                   style={{
-                    'min-height': '2rem',
+                    'min-height': '32px',
                     'min-width': '100px',
                     'font-size': '16px',
                   }}

packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx

@@ -40,7 +40,7 @@ export const EmailInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx

@@ -40,7 +40,7 @@ export const NumberInput = (props: NumberInputProps) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx

@@ -67,7 +67,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
       class={'flex items-end justify-between rounded-lg pr-2 typebot-input'}
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '400px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -41,7 +41,7 @@ export const TextInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': props.block.options.isLong ? undefined : '350px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx

@@ -46,7 +46,7 @@ export const UrlInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/tailwind.config.cjs

@@ -1,7 +1,45 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+function rem2px(input, fontSize = 16) {
+  if (input == null) {
+    return input
+  }
+  switch (typeof input) {
+    case 'object':
+      if (Array.isArray(input)) {
+        return input.map((val) => rem2px(val, fontSize))
+      }
+      // eslint-disable-next-line no-case-declarations
+      const ret = {}
+      for (const key in input) {
+        ret[key] = rem2px(input[key], fontSize)
+      }
+      return ret
+    case 'string':
+      return input.replace(
+        /(\d*\.?\d+)rem$/,
+        (_, val) => `${parseFloat(val) * fontSize}px`
+      )
+    case 'function':
+      return eval(
+        input
+          .toString()
+          .replace(
+            /(\d*\.?\d+)rem/g,
+            (_, val) => `${parseFloat(val) * fontSize}px`
+          )
+      )
+    default:
+      return input
+  }
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    ...rem2px(defaultTheme),
     extend: {
       keyframes: {
         'fade-in': {

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",