blsmedia/bot
2
0
Fork 0
Code Activity

💄 Improve picture choice description UI

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-06-01 10:29:02 +02:00
parent 537b9fe6ce
commit b6e5002a56
8 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/embeds/js/README.md
View File

@@ -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',

2
packages/embeds/js/package.json
View File

@@ -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",

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

@@ -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>

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

@@ -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>
)}

2
packages/embeds/react/package.json
View File

@@ -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",