-
-
0
- }
- >
-
-
-
-
- {(message) => (
-
- )}
-
+
0}>
+
+
0
+ }
+ >
+
+
+
+
+
+ {(message) => (
+
+ )}
+
+
+
{props.input && displayedMessageIndex() === props.messages.length && (
@@ -159,30 +161,49 @@ const Input = (props: {
onSubmit={onSubmit}
/>
-
-
-
-
-
+
+ {(block) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
)
}
+
+const isButtonsBlock = (
+ block: ChatReply['input']
+): ChoiceInputBlock | undefined =>
+ block?.type === InputBlockType.CHOICE ? block : undefined
diff --git a/packages/embeds/js/src/components/icons/CloseIcon.tsx b/packages/embeds/js/src/components/icons/CloseIcon.tsx
new file mode 100644
index 0000000000..93827df09f
--- /dev/null
+++ b/packages/embeds/js/src/components/icons/CloseIcon.tsx
@@ -0,0 +1,17 @@
+import { JSX } from 'solid-js/jsx-runtime'
+
+export const CloseIcon = (props: JSX.SvgSVGAttributes) => (
+
+)
diff --git a/packages/embeds/js/src/components/inputs/SearchInput.tsx b/packages/embeds/js/src/components/inputs/SearchInput.tsx
new file mode 100644
index 0000000000..55457b46a8
--- /dev/null
+++ b/packages/embeds/js/src/components/inputs/SearchInput.tsx
@@ -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, '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 (
+
+ changeValue(e.currentTarget.value)}
+ {...others}
+ />
+ 0}>
+
+
+
+ )
+}
diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx
index 95f162f180..351bbe86b0 100644
--- a/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx
@@ -72,13 +72,11 @@ export const MultipleChoicesForm = (props: Props) => {
)}
-
- {selectedIndices().length > 0 && (
-
- {props.options?.buttonLabel ?? 'Send'}
-
- )}
-
+ {selectedIndices().length > 0 && (
+
+ {props.options?.buttonLabel ?? 'Send'}
+
+ )}
)
}
diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableButtons.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableButtons.tsx
new file mode 100644
index 0000000000..6067a3100a
--- /dev/null
+++ b/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableButtons.tsx
@@ -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 (
+
+
+ setFilteredItems(props.defaultItems)}
+ />
+
+
+
+
+ {(item, index) => (
+
+
+ {props.inputIndex === 0 && props.defaultItems.length === 1 && (
+
+
+
+
+ )}
+
+ )}
+
+
+
+ )
+}
diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableMultipleChoicesForm.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableMultipleChoicesForm.tsx
new file mode 100644
index 0000000000..bc362aa861
--- /dev/null
+++ b/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableMultipleChoicesForm.tsx
@@ -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
([])
+
+ 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 (
+
+ )
+}
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 18eb409911..daec988378 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -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",
diff --git a/packages/schemas/features/blocks/inputs/choice.ts b/packages/schemas/features/blocks/inputs/choice.ts
index 6402fa7a48..933e3f0acf 100644
--- a/packages/schemas/features/blocks/inputs/choice.ts
+++ b/packages/schemas/features/blocks/inputs/choice.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(