🚸 (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'

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}
         />