From b6e5002a5692368a15c526b1bd67572574a9ee0e Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 1 Jun 2023 10:29:02 +0200
Subject: [PATCH] :lipstick: Improve picture choice description UI

---
 .../date/components/DateInputSettings.tsx     |  2 +-
 .../blocks/integrations/google-sheets.mdx     |  4 +++
 apps/docs/docs/embed/html-javascript.md       | 36 +++++++++++++++++--
 packages/embeds/js/README.md                  |  6 ++--
 packages/embeds/js/package.json               |  2 +-
 .../pictureChoice/MultiplePictureChoice.tsx   | 22 ++++++++----
 .../pictureChoice/SinglePictureChoice.tsx     |  6 ++--
 packages/embeds/react/package.json            |  2 +-
 8 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx b/apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx
index 983d2d3a12..b3b22d68af 100644
--- a/apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx
+++ b/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 && (
diff --git a/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx b/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
index 5d4e61bcad..b93b97e143 100644
--- a/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
+++ b/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 👍
diff --git a/apps/docs/docs/embed/html-javascript.md b/apps/docs/docs/embed/html-javascript.md
index be2c8637a9..3babaf4edc 100644
--- a/apps/docs/docs/embed/html-javascript.md
+++ b/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/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/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/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/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/js@0.0/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/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',
diff --git a/packages/embeds/js/README.md b/packages/embeds/js/README.md
index 526bd5e380..fc4bb3d896 100644
--- a/packages/embeds/js/README.md
+++ b/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/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/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/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/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/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index f604bc3ea4..76165c1f3e 100644
--- a/packages/embeds/js/package.json
+++ b/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",
diff --git a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
index 3ff3badd9b..92ba4ece91 100644
--- a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
@@ -120,14 +120,17 @@ 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 ">
@@ -135,7 +138,9 @@ export const MultiplePictureChoice = (props: Props) => {
                       <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>
diff --git a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
index 113e48fe6e..b2a9a4cac6 100644
--- a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
+++ b/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>
           )}
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 08a7134b20..2a8a551430 100644
--- a/packages/embeds/react/package.json
+++ b/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",