🚸 (typebotLink) Add icon in typebots dropdown

apps/builder/src/components/SearchableDropdown.tsx

@@ -11,14 +11,14 @@ import {
   HStack,
 } from '@chakra-ui/react'
 import { Variable } from 'models'
-import { useState, useRef, useEffect, ChangeEvent } from 'react'
+import { useState, useRef, useEffect, ChangeEvent, ReactNode } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { env, isDefined } from 'utils'
 import { VariablesButton } from '@/features/variables'
 
 type Props = {
   selectedItem?: string
-  items: string[]
+  items: (string | { label: ReactNode; value: string })[]
   debounceTimeout?: number
   withVariableButton?: boolean
   onValueChange?: (value: string) => void
@@ -43,7 +43,9 @@ export const SearchableDropdown = ({
   const [filteredItems, setFilteredItems] = useState([
     ...items
       .filter((item) =>
-        item.toLowerCase().includes((selectedItem ?? '').toLowerCase())
+        (typeof item === 'string' ? item : item.value)
+          .toLowerCase()
+          .includes((selectedItem ?? '').toLowerCase())
       )
       .slice(0, 50),
   ])
@@ -67,7 +69,9 @@ export const SearchableDropdown = ({
     setFilteredItems([
       ...items
         .filter((item) =>
-          item.toLowerCase().includes((selectedItem ?? '').toLowerCase())
+          (typeof item === 'string' ? item : item.value)
+            .toLowerCase()
+            .includes((selectedItem ?? '').toLowerCase())
         )
         .slice(0, 50),
     ])
@@ -91,7 +95,9 @@ export const SearchableDropdown = ({
     setFilteredItems([
       ...items
         .filter((item) =>
-          item.toLowerCase().includes((inputValue ?? '').toLowerCase())
+          (typeof item === 'string' ? item : item.value)
+            .toLowerCase()
+            .includes((inputValue ?? '').toLowerCase())
         )
         .slice(0, 50),
     ])
@@ -134,7 +140,8 @@ export const SearchableDropdown = ({
     if (inputRef.current?.selectionStart)
       setCarretPosition(inputRef.current.selectionStart)
     if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
-      handleItemClick(filteredItems[keyboardFocusIndex])()
+      const item = filteredItems[keyboardFocusIndex]
+      handleItemClick(typeof item === 'string' ? item : item.value)()
       return setKeyboardFocusIndex(undefined)
     }
     if (e.key === 'ArrowDown') {
@@ -200,7 +207,9 @@ export const SearchableDropdown = ({
                     ref={(el) => (itemsRef.current[idx] = el)}
                     minH="40px"
                     key={idx}
-                    onClick={handleItemClick(item)}
+                    onClick={handleItemClick(
+                      typeof item === 'string' ? item : item.value
+                    )}
                     fontSize="16px"
                     fontWeight="normal"
                     rounded="none"
@@ -212,7 +221,7 @@ export const SearchableDropdown = ({
                     }
                     justifyContent="flex-start"
                   >
-                    {item}
+                    {typeof item === 'string' ? item : item.label}
                   </Button>
                 )
               })}

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotLinkForm.tsx

@@ -10,10 +10,7 @@ type Props = {
   onOptionsChange: (options: TypebotLinkOptions) => void
 }
 
-export const TypebotLinkSettingsForm = ({
+export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
-  options,
-  onOptionsChange,
-}: Props) => {
   const { linkedTypebots, typebot } = useTypebot()
 
   const handleTypebotIdChange = (typebotId: string | 'current') =>

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotsDropdown.tsx

@@ -1,4 +1,4 @@
-import { HStack, IconButton, Input } from '@chakra-ui/react'
+import { HStack, IconButton, Input, Text } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
 import { useToast } from '@/hooks/useToast'
 import Link from 'next/link'
@@ -7,6 +7,7 @@ import { useMemo } from 'react'
 import { byId } from 'utils'
 import { useTypebots } from '@/features/dashboard'
 import { SearchableDropdown } from '@/components/SearchableDropdown'
+import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
 
 type Props = {
   typebotId?: string | 'current'
@@ -46,7 +47,25 @@ export const TypebotsDropdown = ({
         selectedItem={
           typebotId === 'current' ? 'Current typebot' : currentTypebot?.name
         }
-        items={['Current typebot', ...(typebots ?? []).map((t) => t.name)]}
+        items={[
+          {
+            label: 'Current typebot',
+            value: 'Current typebot',
+          },
+          ...(typebots ?? []).map((typebot) => ({
+            value: typebot.name,
+            label: (
+              <HStack as="span" spacing="2">
+                <EmojiOrImageIcon
+                  icon={typebot.icon}
+                  boxSize="18px"
+                  emojiFontSize="18px"
+                />
+                <Text>{typebot.name}</Text>
+              </HStack>
+            ),
+          })),
+        ]}
         onValueChange={handleTypebotSelect}
         placeholder={'Select a typebot'}
       />

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/index.tsx

@@ -0,0 +1 @@
+export { TypebotLinkForm } from './TypebotLinkForm'

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkNode.tsx

@@ -8,7 +8,7 @@ type Props = {
   block: TypebotLinkBlock
 }
 
-export const TypebotLinkContent = ({ block }: Props) => {
+export const TypebotLinkNode = ({ block }: Props) => {
   const { linkedTypebots, typebot } = useTypebot()
   const isCurrentTypebot =
     typebot &&

apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/index.tsx

@@ -1 +0,0 @@
-export { TypebotLinkSettingsForm } from './TypebotLinkSettingsForm'

apps/builder/src/features/blocks/logic/typebotLink/components/index.ts

@@ -0,0 +1,3 @@
+export * from './TypebotLinkNode'
+export * from './TypebotLinkIcon'
+export * from './TypebotLinkForm'

apps/builder/src/features/blocks/logic/typebotLink/index.ts

@@ -1,3 +1 @@
-export { TypebotLinkSettingsForm } from './components/TypebotLinkSettingsForm'
+export * from './components'
-export { TypebotLinkContent } from './components/TypebotLinkContent'
-export { TypebotLinkIcon } from './components/TypebotLinkIcon'

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx

@@ -29,7 +29,7 @@ import { WithVariableContent } from './WithVariableContent'
 import { PaymentInputContent } from '@/features/blocks/inputs/payment'
 import { RatingInputContent } from '@/features/blocks/inputs/rating'
 import { FileInputContent } from '@/features/blocks/inputs/fileUpload'
-import { TypebotLinkContent } from '@/features/blocks/logic/typebotLink'
+import { TypebotLinkNode } from '@/features/blocks/logic/typebotLink'
 import { GoogleSheetsNodeContent } from '@/features/blocks/integrations/googleSheets'
 import { GoogleAnalyticsNodeContent } from '@/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeContent'
 import { ZapierContent } from '@/features/blocks/integrations/zapier'
@@ -117,7 +117,7 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
       )
     }
     case LogicBlockType.TYPEBOT_LINK:
-      return <TypebotLinkContent block={block} />
+      return <TypebotLinkNode block={block} />
 
     case IntegrationBlockType.GOOGLE_SHEETS: {
       return (

apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -34,7 +34,7 @@ import { ZapierSettings } from '@/features/blocks/integrations/zapier'
 import { CodeSettings } from '@/features/blocks/logic/code'
 import { RedirectSettings } from '@/features/blocks/logic/redirect'
 import { SetVariableSettings } from '@/features/blocks/logic/setVariable'
-import { TypebotLinkSettingsForm } from '@/features/blocks/logic/typebotLink'
+import { TypebotLinkForm } from '@/features/blocks/logic/typebotLink'
 import { ButtonsOptionsForm } from '@/features/blocks/inputs/buttons'
 import { ChatwootSettingsForm } from '@/features/blocks/integrations/chatwoot'
 
@@ -200,7 +200,7 @@ export const BlockSettings = ({
     }
     case LogicBlockType.TYPEBOT_LINK: {
       return (
-        <TypebotLinkSettingsForm
+        <TypebotLinkForm
           options={block.options}
           onOptionsChange={handleOptionsChange}
         />