Baptiste Arnaud
@ -12,13 +12,15 @@ type Props = {
|
||||
}
|
||||
|
||||
export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
|
||||
const handleIsMultipleChange = (isMultipleChoice: boolean) =>
|
||||
const updateIsMultiple = (isMultipleChoice: boolean) =>
|
||||
options && onOptionsChange({ ...options, isMultipleChoice })
|
||||
const handleButtonLabelChange = (buttonLabel: string) =>
|
||||
const updateIsSearchable = (isSearchable: boolean) =>
|
||||
options && onOptionsChange({ ...options, isSearchable })
|
||||
const updateButtonLabel = (buttonLabel: string) =>
|
||||
options && onOptionsChange({ ...options, buttonLabel })
|
||||
const handleVariableChange = (variable?: Variable) =>
|
||||
const updateSaveVariable = (variable?: Variable) =>
|
||||
options && onOptionsChange({ ...options, variableId: variable?.id })
|
||||
const handleDynamicVariableChange = (variable?: Variable) =>
|
||||
const updateDynamicDataVariable = (variable?: Variable) =>
|
||||
options && onOptionsChange({ ...options, dynamicVariableId: variable?.id })
|
||||
|
||||
return (
|
||||
@ -26,18 +28,23 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
|
||||
<SwitchWithLabel
|
||||
label="Multiple choice?"
|
||||
initialValue={options?.isMultipleChoice ?? false}
|
||||
onCheckChange={handleIsMultipleChange}
|
||||
onCheckChange={updateIsMultiple}
|
||||
/>
|
||||
<SwitchWithLabel
|
||||
label="Is searchable?"
|
||||
initialValue={options?.isSearchable ?? false}
|
||||
onCheckChange={updateIsSearchable}
|
||||
/>
|
||||
{options?.isMultipleChoice && (
|
||||
<TextInput
|
||||
label="Button label:"
|
||||
defaultValue={options?.buttonLabel ?? 'Send'}
|
||||
onChange={handleButtonLabelChange}
|
||||
onChange={updateButtonLabel}
|
||||
/>
|
||||
)}
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Dynamic items from variable:{' '}
|
||||
Dynamic data:{' '}
|
||||
<MoreInfoTooltip>
|
||||
If defined, buttons will be dynamically displayed based on what the
|
||||
variable contains.
|
||||
@ -45,7 +52,7 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
|
||||
</FormLabel>
|
||||
<VariableSearchInput
|
||||
initialVariableId={options?.dynamicVariableId}
|
||||
onSelectVariable={handleDynamicVariableChange}
|
||||
onSelectVariable={updateDynamicDataVariable}
|
||||
/>
|
||||
</FormControl>
|
||||
<Stack>
|
||||
@ -54,7 +61,7 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
|
||||
</FormLabel>
|
||||
<VariableSearchInput
|
||||
initialVariableId={options?.variableId}
|
||||
onSelectVariable={handleVariableChange}
|
||||
onSelectVariable={updateSaveVariable}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
@ -295,6 +295,54 @@
|
||||
"data"
|
||||
],
|
||||
"additionalProperties": false
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"userId": {
|
||||
"type": "string"
|
||||
},
|
||||
"workspaceId": {
|
||||
"type": "string"
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"Workspace limit reached"
|
||||
]
|
||||
},
|
||||
"data": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"chatsLimit": {
|
||||
"type": "number"
|
||||
},
|
||||
"storageLimit": {
|
||||
"type": "number"
|
||||
},
|
||||
"totalChatsUsed": {
|
||||
"type": "number"
|
||||
},
|
||||
"totalStorageUsed": {
|
||||
"type": "number"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"chatsLimit",
|
||||
"storageLimit",
|
||||
"totalChatsUsed",
|
||||
"totalStorageUsed"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"userId",
|
||||
"workspaceId",
|
||||
"name",
|
||||
"data"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -798,6 +846,9 @@
|
||||
},
|
||||
"dynamicVariableId": {
|
||||
"type": "string"
|
||||
},
|
||||
"isSearchable": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
@ -1743,6 +1794,121 @@
|
||||
"options"
|
||||
],
|
||||
"additionalProperties": false
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"groupId": {
|
||||
"type": "string"
|
||||
},
|
||||
"outgoingEdgeId": {
|
||||
"type": "string"
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"AB test"
|
||||
]
|
||||
},
|
||||
"items": {
|
||||
"type": "array",
|
||||
"minItems": 2,
|
||||
"maxItems": 2,
|
||||
"items": [
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"blockId": {
|
||||
"type": "string"
|
||||
},
|
||||
"outgoingEdgeId": {
|
||||
"type": "string"
|
||||
},
|
||||
"type": {
|
||||
"type": "number",
|
||||
"enum": [
|
||||
2
|
||||
]
|
||||
},
|
||||
"path": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"a"
|
||||
]
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"id",
|
||||
"blockId",
|
||||
"type",
|
||||
"path"
|
||||
],
|
||||
"additionalProperties": false
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"blockId": {
|
||||
"type": "string"
|
||||
},
|
||||
"outgoingEdgeId": {
|
||||
"type": "string"
|
||||
},
|
||||
"type": {
|
||||
"type": "number",
|
||||
"enum": [
|
||||
2
|
||||
]
|
||||
},
|
||||
"path": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"b"
|
||||
]
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"id",
|
||||
"blockId",
|
||||
"type",
|
||||
"path"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"aPercent": {
|
||||
"type": "number",
|
||||
"minimum": 0,
|
||||
"maximum": 100
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"aPercent"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"id",
|
||||
"groupId",
|
||||
"type",
|
||||
"items",
|
||||
"options"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -3075,6 +3241,9 @@
|
||||
"customSeatsLimit": {
|
||||
"type": "number",
|
||||
"nullable": true
|
||||
},
|
||||
"isQuarantined": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
@ -3093,7 +3262,8 @@
|
||||
"storageLimitSecondEmailSentAt",
|
||||
"customChatsLimit",
|
||||
"customStorageLimit",
|
||||
"customSeatsLimit"
|
||||
"customSeatsLimit",
|
||||
"isQuarantined"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
@ -3216,6 +3386,9 @@
|
||||
"customSeatsLimit": {
|
||||
"type": "number",
|
||||
"nullable": true
|
||||
},
|
||||
"isQuarantined": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
@ -3234,7 +3407,8 @@
|
||||
"storageLimitSecondEmailSentAt",
|
||||
"customChatsLimit",
|
||||
"customStorageLimit",
|
||||
"customSeatsLimit"
|
||||
"customSeatsLimit",
|
||||
"isQuarantined"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
@ -3374,6 +3548,9 @@
|
||||
"customSeatsLimit": {
|
||||
"type": "number",
|
||||
"nullable": true
|
||||
},
|
||||
"isQuarantined": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
@ -3392,7 +3569,8 @@
|
||||
"storageLimitSecondEmailSentAt",
|
||||
"customChatsLimit",
|
||||
"customStorageLimit",
|
||||
"customSeatsLimit"
|
||||
"customSeatsLimit",
|
||||
"isQuarantined"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
@ -4642,6 +4820,9 @@
|
||||
"customSeatsLimit": {
|
||||
"type": "number",
|
||||
"nullable": true
|
||||
},
|
||||
"isQuarantined": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
@ -4660,7 +4841,8 @@
|
||||
"storageLimitSecondEmailSentAt",
|
||||
"customChatsLimit",
|
||||
"customStorageLimit",
|
||||
"customSeatsLimit"
|
||||
"customSeatsLimit",
|
||||
"isQuarantined"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
|
||||
@ -459,6 +459,9 @@
|
||||
},
|
||||
"dynamicVariableId": {
|
||||
"type": "string"
|
||||
},
|
||||
"isSearchable": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
@ -1404,6 +1407,121 @@
|
||||
"options"
|
||||
],
|
||||
"additionalProperties": false
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"groupId": {
|
||||
"type": "string"
|
||||
},
|
||||
"outgoingEdgeId": {
|
||||
"type": "string"
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"AB test"
|
||||
]
|
||||
},
|
||||
"items": {
|
||||
"type": "array",
|
||||
"minItems": 2,
|
||||
"maxItems": 2,
|
||||
"items": [
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"blockId": {
|
||||
"type": "string"
|
||||
},
|
||||
"outgoingEdgeId": {
|
||||
"type": "string"
|
||||
},
|
||||
"type": {
|
||||
"type": "number",
|
||||
"enum": [
|
||||
2
|
||||
]
|
||||
},
|
||||
"path": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"a"
|
||||
]
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"id",
|
||||
"blockId",
|
||||
"type",
|
||||
"path"
|
||||
],
|
||||
"additionalProperties": false
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"blockId": {
|
||||
"type": "string"
|
||||
},
|
||||
"outgoingEdgeId": {
|
||||
"type": "string"
|
||||
},
|
||||
"type": {
|
||||
"type": "number",
|
||||
"enum": [
|
||||
2
|
||||
]
|
||||
},
|
||||
"path": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"b"
|
||||
]
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"id",
|
||||
"blockId",
|
||||
"type",
|
||||
"path"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"aPercent": {
|
||||
"type": "number",
|
||||
"minimum": 0,
|
||||
"maximum": 100
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"aPercent"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"id",
|
||||
"groupId",
|
||||
"type",
|
||||
"items",
|
||||
"options"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -3182,6 +3300,9 @@
|
||||
},
|
||||
"dynamicVariableId": {
|
||||
"type": "string"
|
||||
},
|
||||
"isSearchable": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@typebot.io/js",
|
||||
"version": "0.0.40",
|
||||
"version": "0.0.41",
|
||||
"description": "Javascript library to display typebots on your website",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -286,3 +286,14 @@ textarea {
|
||||
.typebot-popup-blocked-toast {
|
||||
border-radius: var(--typebot-border-radius);
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
@ -47,38 +47,42 @@ export const ChatChunk = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div class="flex flex-col w-full min-w-0 gap-2">
|
||||
<div class={'flex' + (isMobile() ? ' gap-1' : ' gap-2')}>
|
||||
<Show
|
||||
when={
|
||||
props.theme.chat.hostAvatar?.isEnabled && props.messages.length > 0
|
||||
}
|
||||
>
|
||||
<AvatarSideContainer
|
||||
hostAvatarSrc={props.theme.chat.hostAvatar?.url}
|
||||
hideAvatar={props.hideAvatar}
|
||||
/>
|
||||
</Show>
|
||||
<div
|
||||
class="flex flex-col flex-1 gap-2"
|
||||
style={{
|
||||
'margin-right': props.theme.chat.guestAvatar?.isEnabled
|
||||
? isMobile()
|
||||
? '32px'
|
||||
: '48px'
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
|
||||
{(message) => (
|
||||
<HostBubble
|
||||
message={message}
|
||||
typingEmulation={props.settings.typingEmulation}
|
||||
onTransitionEnd={displayNextMessage}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
<Show when={props.messages.length > 0}>
|
||||
<div class={'flex' + (isMobile() ? ' gap-1' : ' gap-2')}>
|
||||
<Show
|
||||
when={
|
||||
props.theme.chat.hostAvatar?.isEnabled &&
|
||||
props.messages.length > 0
|
||||
}
|
||||
>
|
||||
<AvatarSideContainer
|
||||
hostAvatarSrc={props.theme.chat.hostAvatar?.url}
|
||||
hideAvatar={props.hideAvatar}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<div
|
||||
class="flex flex-col flex-1 gap-2"
|
||||
style={{
|
||||
'margin-right': props.theme.chat.guestAvatar?.isEnabled
|
||||
? isMobile()
|
||||
? '32px'
|
||||
: '48px'
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
|
||||
{(message) => (
|
||||
<HostBubble
|
||||
message={message}
|
||||
typingEmulation={props.settings.typingEmulation}
|
||||
onTransitionEnd={displayNextMessage}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
{props.input && displayedMessageIndex() === props.messages.length && (
|
||||
<InputChatBlock
|
||||
block={props.input}
|
||||
|
||||
@ -30,6 +30,8 @@ import { isMobile } from '@/utils/isMobileSignal'
|
||||
import { PaymentForm } from '@/features/blocks/inputs/payment'
|
||||
import { MultipleChoicesForm } from '@/features/blocks/inputs/buttons/components/MultipleChoicesForm'
|
||||
import { Buttons } from '@/features/blocks/inputs/buttons/components/Buttons'
|
||||
import { SearchableButtons } from '@/features/blocks/inputs/buttons/components/SearchableButtons'
|
||||
import { SearchableMultipleChoicesForm } from '@/features/blocks/inputs/buttons/components/SearchableMultipleChoicesForm'
|
||||
|
||||
type Props = {
|
||||
block: NonNullable<ChatReply['input']>
|
||||
@ -159,30 +161,49 @@ const Input = (props: {
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</Match>
|
||||
<Match
|
||||
when={
|
||||
props.block.type === InputBlockType.CHOICE &&
|
||||
props.block.options.isMultipleChoice
|
||||
}
|
||||
>
|
||||
<MultipleChoicesForm
|
||||
inputIndex={props.inputIndex}
|
||||
items={(props.block as ChoiceInputBlock).items}
|
||||
options={props.block.options as ChoiceInputBlock['options']}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</Match>
|
||||
<Match
|
||||
when={
|
||||
props.block.type === InputBlockType.CHOICE &&
|
||||
!props.block.options.isMultipleChoice
|
||||
}
|
||||
>
|
||||
<Buttons
|
||||
inputIndex={props.inputIndex}
|
||||
items={(props.block as ChoiceInputBlock).items}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
<Match when={isButtonsBlock(props.block)} keyed>
|
||||
{(block) => (
|
||||
<Switch>
|
||||
<Match when={!block.options.isMultipleChoice}>
|
||||
<Switch>
|
||||
<Match when={block.options.isSearchable}>
|
||||
<SearchableButtons
|
||||
inputIndex={props.inputIndex}
|
||||
defaultItems={block.items}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</Match>
|
||||
<Match when={!block.options.isSearchable}>
|
||||
<Buttons
|
||||
inputIndex={props.inputIndex}
|
||||
items={block.items}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Match>
|
||||
<Match when={block.options.isMultipleChoice}>
|
||||
<Switch>
|
||||
<Match when={block.options.isSearchable}>
|
||||
<SearchableMultipleChoicesForm
|
||||
inputIndex={props.inputIndex}
|
||||
defaultItems={block.items}
|
||||
options={block.options}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</Match>
|
||||
<Match when={!block.options.isSearchable}>
|
||||
<MultipleChoicesForm
|
||||
inputIndex={props.inputIndex}
|
||||
items={block.items}
|
||||
options={block.options}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Match>
|
||||
</Switch>
|
||||
)}
|
||||
</Match>
|
||||
<Match when={props.block.type === InputBlockType.RATING}>
|
||||
<RatingForm
|
||||
@ -214,3 +235,8 @@ const Input = (props: {
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
|
||||
const isButtonsBlock = (
|
||||
block: ChatReply['input']
|
||||
): ChoiceInputBlock | undefined =>
|
||||
block?.type === InputBlockType.CHOICE ? block : undefined
|
||||
|
||||
17
packages/embeds/js/src/components/icons/CloseIcon.tsx
Normal file
17
packages/embeds/js/src/components/icons/CloseIcon.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { JSX } from 'solid-js/jsx-runtime'
|
||||
|
||||
export const CloseIcon = (props: JSX.SvgSVGAttributes<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2px"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
)
|
||||
43
packages/embeds/js/src/components/inputs/SearchInput.tsx
Normal file
43
packages/embeds/js/src/components/inputs/SearchInput.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { Show, createSignal, splitProps } from 'solid-js'
|
||||
import { JSX } from 'solid-js/jsx-runtime'
|
||||
import { CloseIcon } from '../icons/CloseIcon'
|
||||
|
||||
type Props = {
|
||||
ref: HTMLInputElement | undefined
|
||||
onInput: (value: string) => void
|
||||
onClear: () => void
|
||||
} & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onInput'>
|
||||
|
||||
export const SearchInput = (props: Props) => {
|
||||
const [value, setValue] = createSignal('')
|
||||
const [local, others] = splitProps(props, ['onInput', 'ref'])
|
||||
|
||||
const changeValue = (value: string) => {
|
||||
setValue(value)
|
||||
local.onInput(value)
|
||||
}
|
||||
|
||||
const clearValue = () => {
|
||||
setValue('')
|
||||
props.onClear()
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex justify-between items-center gap-2 w-full pr-4">
|
||||
<input
|
||||
ref={props.ref}
|
||||
class="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input"
|
||||
type="text"
|
||||
style={{ 'font-size': '16px' }}
|
||||
value={value()}
|
||||
onInput={(e) => changeValue(e.currentTarget.value)}
|
||||
{...others}
|
||||
/>
|
||||
<Show when={value().length > 0}>
|
||||
<button class="w-5 h-5" on:click={clearValue}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -72,13 +72,11 @@ export const MultipleChoicesForm = (props: Props) => {
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<div class="flex">
|
||||
{selectedIndices().length > 0 && (
|
||||
<SendButton disableIcon>
|
||||
{props.options?.buttonLabel ?? 'Send'}
|
||||
</SendButton>
|
||||
)}
|
||||
</div>
|
||||
{selectedIndices().length > 0 && (
|
||||
<SendButton disableIcon>
|
||||
{props.options?.buttonLabel ?? 'Send'}
|
||||
</SendButton>
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
import { Button } from '@/components/Button'
|
||||
import { SearchInput } from '@/components/inputs/SearchInput'
|
||||
import { InputSubmitContent } from '@/types'
|
||||
import { isMobile } from '@/utils/isMobileSignal'
|
||||
import type { ChoiceInputBlock } from '@typebot.io/schemas'
|
||||
import { For, createSignal, onMount } from 'solid-js'
|
||||
|
||||
type Props = {
|
||||
inputIndex: number
|
||||
defaultItems: ChoiceInputBlock['items']
|
||||
onSubmit: (value: InputSubmitContent) => void
|
||||
}
|
||||
|
||||
export const SearchableButtons = (props: Props) => {
|
||||
let inputRef: HTMLInputElement | undefined
|
||||
const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
|
||||
|
||||
onMount(() => {
|
||||
if (!isMobile() && inputRef) inputRef.focus()
|
||||
})
|
||||
|
||||
// eslint-disable-next-line solid/reactivity
|
||||
const handleClick = (itemIndex: number) => () =>
|
||||
props.onSubmit({ value: filteredItems()[itemIndex].content ?? '' })
|
||||
|
||||
const filterItems = (inputValue: string) => {
|
||||
setFilteredItems(
|
||||
props.defaultItems.filter((item) =>
|
||||
item.content?.toLowerCase().includes((inputValue ?? '').toLowerCase())
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<div class="flex items-end typebot-input w-full">
|
||||
<SearchInput
|
||||
ref={inputRef}
|
||||
onInput={filterItems}
|
||||
placeholder="Filter the options..."
|
||||
onClear={() => setFilteredItems(props.defaultItems)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-end gap-2 overflow-y-scroll max-h-80 rounded-md hide-scrollbar">
|
||||
<For each={filteredItems()}>
|
||||
{(item, index) => (
|
||||
<span class={'relative' + (isMobile() ? ' w-full' : '')}>
|
||||
<Button
|
||||
on:click={handleClick(index())}
|
||||
data-itemid={item.id}
|
||||
class="w-full"
|
||||
>
|
||||
{item.content}
|
||||
</Button>
|
||||
{props.inputIndex === 0 && props.defaultItems.length === 1 && (
|
||||
<span class="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full brightness-200 opacity-75" />
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 brightness-150" />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,131 @@
|
||||
import { SendButton } from '@/components/SendButton'
|
||||
import { InputSubmitContent } from '@/types'
|
||||
import { isMobile } from '@/utils/isMobileSignal'
|
||||
import type { ChoiceInputBlock } from '@typebot.io/schemas'
|
||||
import { createSignal, For } from 'solid-js'
|
||||
import { Checkbox } from './Checkbox'
|
||||
import { SearchInput } from '@/components/inputs/SearchInput'
|
||||
|
||||
type Props = {
|
||||
inputIndex: number
|
||||
defaultItems: ChoiceInputBlock['items']
|
||||
options: ChoiceInputBlock['options']
|
||||
onSubmit: (value: InputSubmitContent) => void
|
||||
}
|
||||
|
||||
export const SearchableMultipleChoicesForm = (props: Props) => {
|
||||
let inputRef: HTMLInputElement | undefined
|
||||
const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
|
||||
const [selectedItemIds, setSelectedItemIds] = createSignal<string[]>([])
|
||||
|
||||
const handleClick = (itemId: string) => {
|
||||
toggleSelectedItemId(itemId)
|
||||
}
|
||||
|
||||
const toggleSelectedItemId = (itemId: string) => {
|
||||
const existingIndex = selectedItemIds().indexOf(itemId)
|
||||
if (existingIndex !== -1) {
|
||||
setSelectedItemIds((selectedItemIds) =>
|
||||
selectedItemIds.filter((selectedItemId) => selectedItemId !== itemId)
|
||||
)
|
||||
} else {
|
||||
setSelectedItemIds((selectedIndices) => [...selectedIndices, itemId])
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = () =>
|
||||
props.onSubmit({
|
||||
value: props.defaultItems
|
||||
.filter((item) => selectedItemIds().includes(item.id))
|
||||
.join(', '),
|
||||
})
|
||||
|
||||
const filterItems = (inputValue: string) => {
|
||||
setFilteredItems(
|
||||
props.defaultItems.filter((item) =>
|
||||
item.content?.toLowerCase().includes((inputValue ?? '').toLowerCase())
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form class="flex flex-col items-end gap-2 w-full" onSubmit={handleSubmit}>
|
||||
<div class="flex items-end typebot-input w-full">
|
||||
<SearchInput
|
||||
ref={inputRef}
|
||||
onInput={filterItems}
|
||||
placeholder="Filter the options..."
|
||||
onClear={() => setFilteredItems(props.defaultItems)}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end gap-2 overflow-y-scroll max-h-80 rounded-md hide-scrollbar">
|
||||
<For each={filteredItems()}>
|
||||
{(item) => (
|
||||
<span class={'relative' + (isMobile() ? ' w-full' : '')}>
|
||||
<div
|
||||
role="checkbox"
|
||||
aria-checked={selectedItemIds().some(
|
||||
(selectedItemId) => selectedItemId === item.id
|
||||
)}
|
||||
on:click={() => handleClick(item.id)}
|
||||
class={
|
||||
'w-full py-2 px-4 font-semibold focus:outline-none cursor-pointer select-none typebot-selectable' +
|
||||
(selectedItemIds().some(
|
||||
(selectedItemId) => selectedItemId === item.id
|
||||
)
|
||||
? ' selected'
|
||||
: '')
|
||||
}
|
||||
data-itemid={item.id}
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox
|
||||
isChecked={selectedItemIds().some(
|
||||
(selectedItemId) => selectedItemId === item.id
|
||||
)}
|
||||
/>
|
||||
<span>{item.content}</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
<For
|
||||
each={selectedItemIds().filter((selectedItemId) =>
|
||||
filteredItems().every((item) => item.id !== selectedItemId)
|
||||
)}
|
||||
>
|
||||
{(selectedItemId) => (
|
||||
<span class={'relative' + (isMobile() ? ' w-full' : '')}>
|
||||
<div
|
||||
role="checkbox"
|
||||
aria-checked
|
||||
on:click={() => handleClick(selectedItemId)}
|
||||
class={
|
||||
'w-full py-2 px-4 font-semibold focus:outline-none cursor-pointer select-none typebot-selectable selected'
|
||||
}
|
||||
data-itemid={selectedItemId}
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox isChecked />
|
||||
<span>
|
||||
{
|
||||
props.defaultItems.find(
|
||||
(item) => item.id === selectedItemId
|
||||
)?.content
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
{selectedItemIds().length > 0 && (
|
||||
<SendButton disableIcon>
|
||||
{props.options?.buttonLabel ?? 'Send'}
|
||||
</SendButton>
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@typebot.io/react",
|
||||
"version": "0.0.40",
|
||||
"version": "0.0.41",
|
||||
"description": "React library to display typebots on your website",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
|
||||
@ -10,12 +10,14 @@ export const choiceInputOptionsSchema = optionBaseSchema.merge(
|
||||
isMultipleChoice: z.boolean(),
|
||||
buttonLabel: z.string(),
|
||||
dynamicVariableId: z.string().optional(),
|
||||
isSearchable: z.boolean().optional(),
|
||||
})
|
||||
)
|
||||
|
||||
export const defaultChoiceInputOptions: ChoiceInputOptions = {
|
||||
buttonLabel: defaultButtonLabel,
|
||||
isMultipleChoice: false,
|
||||
isSearchable: false,
|
||||
}
|
||||
|
||||
export const buttonItemSchema = itemBaseSchema.merge(
|
||||
|
||||
Reference in New Issue
Block a user