✨ (buttons) Add searchable choices

Closes #473
2023-04-26 17:54:00 +02:00
parent 124f350aa2
commit 5b4a6c523d
14 changed files with 687 additions and 77 deletions
--- a/packages/embeds/js/src/assets/index.css
+++ b/packages/embeds/js/src/assets/index.css
@ -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 */
+}
--- a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
+++ b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
@ -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}
--- a/packages/embeds/js/src/components/InputChatBlock.tsx
+++ b/packages/embeds/js/src/components/InputChatBlock.tsx
@ -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
--- a/packages/embeds/js/src/components/icons/CloseIcon.tsx
+++ 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<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>
+)
--- a/packages/embeds/js/src/components/inputs/SearchInput.tsx
+++ 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<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>
+  )
+}
--- 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) => {
          )}
        </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>
  )
 }
--- a/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableButtons.tsx
+++ 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 (
+    <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>
+  )
+}
--- a/packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableMultipleChoicesForm.tsx
+++ 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<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>
+  )
+}