🚸 (typebotLink) Add icon in typebots dropdown

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

@@ -10,10 +10,7 @@ type Props = {
   onOptionsChange: (options: TypebotLinkOptions) => void
 }
 
-export const TypebotLinkSettingsForm = ({
-  options,
-  onOptionsChange,
-}: Props) => {
+export const TypebotLinkForm = ({ 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 { TypebotLinkContent } from './components/TypebotLinkContent'
-export { TypebotLinkIcon } from './components/TypebotLinkIcon'
+export * from './components'