diff --git a/apps/builder/src/components/SearchableDropdown.tsx b/apps/builder/src/components/SearchableDropdown.tsx index 1abda5809..fd7f5979e 100644 --- a/apps/builder/src/components/SearchableDropdown.tsx +++ b/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} ) })} diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/GroupsDropdown.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/GroupsDropdown.tsx similarity index 100% rename from apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/GroupsDropdown.tsx rename to apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/GroupsDropdown.tsx diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotLinkSettingsForm.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotLinkForm.tsx similarity index 94% rename from apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotLinkSettingsForm.tsx rename to apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotLinkForm.tsx index 4b9f994eb..f54739d56 100644 --- a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotLinkSettingsForm.tsx +++ b/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') => diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotsDropdown.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotsDropdown.tsx similarity index 73% rename from apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotsDropdown.tsx rename to apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotsDropdown.tsx index fc8199052..671f174a3 100644 --- a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotsDropdown.tsx +++ b/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: ( + + + {typebot.name} + + ), + })), + ]} onValueChange={handleTypebotSelect} placeholder={'Select a typebot'} /> diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/index.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/index.tsx new file mode 100644 index 000000000..c8184363a --- /dev/null +++ b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/index.tsx @@ -0,0 +1 @@ +export { TypebotLinkForm } from './TypebotLinkForm' diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkContent.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkNode.tsx similarity index 94% rename from apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkContent.tsx rename to apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkNode.tsx index b6f41c790..8cc764c66 100644 --- a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkContent.tsx +++ b/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 && diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/index.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/index.tsx deleted file mode 100644 index 7f65a9504..000000000 --- a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { TypebotLinkSettingsForm } from './TypebotLinkSettingsForm' diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/index.ts b/apps/builder/src/features/blocks/logic/typebotLink/components/index.ts new file mode 100644 index 000000000..a6e900091 --- /dev/null +++ b/apps/builder/src/features/blocks/logic/typebotLink/components/index.ts @@ -0,0 +1,3 @@ +export * from './TypebotLinkNode' +export * from './TypebotLinkIcon' +export * from './TypebotLinkForm' diff --git a/apps/builder/src/features/blocks/logic/typebotLink/index.ts b/apps/builder/src/features/blocks/logic/typebotLink/index.ts index 53c47f202..cb64ac1b5 100644 --- a/apps/builder/src/features/blocks/logic/typebotLink/index.ts +++ b/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' diff --git a/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx b/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx index 6cefced67..7bffcb7be 100644 --- a/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx +++ b/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 + return case IntegrationBlockType.GOOGLE_SHEETS: { return ( diff --git a/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx b/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx index 3b9f94f08..03a7e8e74 100644 --- a/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx +++ b/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 ( -