💄 Improve picture choice description UI

apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx

@@ -33,7 +33,7 @@ export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
       />
       <SwitchWithLabel
         label="With time?"
-        initialValue={options.isRange}
+        initialValue={options.hasTime}
         onCheckChange={handleHasTimeChange}
       />
       {options.isRange && (

apps/docs/docs/editor/blocks/integrations/google-sheets.mdx

@@ -14,6 +14,10 @@ In order to properly work, your spreadsheet must have its first row as a header
   alt="Google Analytics block"
 />
 
+## How to add the submission date to my row?
+
+For this, you will need to set a new variable with the value "Today" before the Google Sheets block. Then you can simply use this variable in the Google Sheets block.
+
 ## Troubleshooting
 
 The Google sheets block didn't insert or update a row but was supposed to? Make sure to check the [logs](/editor/results). If you still can't figure out what went wrong, shoot me a message using the chat button directly in the tool 👍

apps/docs/docs/embed/html-javascript.md

@@ -12,7 +12,7 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected].9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
 
   Typebot.initStandard({
     typebot: 'my-typebot',
@@ -32,7 +32,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected].9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',
@@ -66,6 +66,36 @@ You can bind these commands on a button element, for example:
 <button onclick="Typebot.open()">Contact us</button>
 ```
 
+### Multiple bots
+
+If you have different bots on the same page you will have to make them distinct with an additional `id` prop:
+
+```html
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
+
+  Typebot.initStandard({
+    id: 'bot1'
+    typebot: 'my-typebot',
+  })
+
+  Typebot.initStandard({
+    id: 'bot2'
+    typebot: 'my-typebot-2',
+  })
+</script>
+
+<typebot-standard
+  id="bot1"
+  style="width: 100%; height: 600px; "
+></typebot-standard>
+...
+<typebot-standard
+  id="bot2"
+  style="width: 100%; height: 600px; "
+></typebot-standard>
+```
+
 ## Bubble
 
 You can get the bubble HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
@@ -74,7 +104,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected].9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',

packages/embeds/js/README.md

@@ -34,7 +34,7 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected].9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
 
   Typebot.initStandard({
     typebot: 'my-typebot',
@@ -54,7 +54,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected].9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',
@@ -96,7 +96,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected].9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',

packages/embeds/js/package.json

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

packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx

@@ -120,22 +120,27 @@ export const MultiplePictureChoice = (props: Props) => {
                   'flex gap-3 py-2 flex-shrink-0' +
                   (isEmpty(item.title) && isEmpty(item.description)
                     ? ' justify-center'
-                    : ' pl-4')
+                    : ' px-3')
                 }
               >
                 <Checkbox
                   isChecked={selectedItemIds().some(
                     (selectedItemId) => selectedItemId === item.id
                   )}
-                  class={item.title || item.description ? 'mt-1' : undefined}
+                  class={
+                    'flex-shrink-0' +
+                    (item.title || item.description ? ' mt-1' : undefined)
+                  }
                 />
                 <Show when={item.title || item.description}>
                   <div class="flex flex-col gap-1 ">
                     <Show when={item.title}>
                       <span class="font-semibold">{item.title}</span>
                     </Show>
                     <Show when={item.description}>
-                      <span class="text-sm">{item.description}</span>
+                      <span class="text-sm whitespace-pre-wrap text-left">
+                        {item.description}
+                      </span>
                     </Show>
                   </div>
                 </Show>
@@ -186,9 +191,10 @@ export const MultiplePictureChoice = (props: Props) => {
                     (selectedItemId) => selectedItemId === selectedItem.id
                   )}
                   class={
-                    selectedItem.title || selectedItem.description
-                      ? 'mt-1'
-                      : undefined
+                    'flex-shrink-0' +
+                    (selectedItem.title || selectedItem.description
+                      ? ' mt-1'
+                      : undefined)
                   }
                 />
                 <Show when={selectedItem.title || selectedItem.description}>
@@ -197,7 +203,9 @@ export const MultiplePictureChoice = (props: Props) => {
                       <span class="font-semibold">{selectedItem.title}</span>
                     </Show>
                     <Show when={selectedItem.description}>
-                      <span class="text-sm">{selectedItem.description}</span>
+                      <span class="text-sm whitespace-pre-wrap text-left">
+                        {selectedItem.description}
+                      </span>
                     </Show>
                   </div>
                 </Show>

packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx

@@ -69,7 +69,7 @@ export const SinglePictureChoice = (props: Props) => {
               on:click={handleClick(index())}
               data-itemid={item.id}
               class={
-                'flex flex-col typebot-picture-button focus:outline-none filter hover:brightness-90 active:brightness-75 justify-between ' +
+                'flex flex-col typebot-picture-button focus:outline-none filter hover:brightness-90 active:brightness-75 justify-between  ' +
                 (isSvgSrc(item.pictureSrc) ? 'has-svg' : '')
               }
             >
@@ -87,7 +87,9 @@ export const SinglePictureChoice = (props: Props) => {
                 }
               >
                 <span class="font-semibold">{item.title}</span>
-                <span class="text-sm">{item.description}</span>
+                <span class="text-sm whitespace-pre-wrap text-left">
+                  {item.description}
+                </span>
               </div>
             </button>
           )}

packages/embeds/react/package.json

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