diff --git a/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx b/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
new file mode 100644
index 0000000000..a1f1342304
--- /dev/null
+++ b/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
@@ -0,0 +1,50 @@
+import { BuoyIcon, ExpandIcon } from '@/components/icons'
+import {
+ Button,
+ HStack,
+ IconButton,
+ Link,
+ useColorModeValue,
+} from '@chakra-ui/react'
+import { BlockWithOptions } from '@typebot.io/schemas'
+import { getHelpDocUrl } from '@/features/graph/helpers/getHelpDocUrl'
+
+type Props = {
+ blockType: BlockWithOptions['type']
+ onExpandClick: () => void
+}
+
+export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
+ const helpDocUrl = getHelpDocUrl(blockType)
+ return (
+
+ }
+ borderRightWidth="1px"
+ borderRightRadius="none"
+ borderLeftRadius="none"
+ aria-label={'Duplicate group'}
+ variant="ghost"
+ onClick={onExpandClick}
+ size="xs"
+ />
+ }
+ borderLeftRadius="none"
+ size="xs"
+ variant="ghost"
+ href={helpDocUrl}
+ isExternal
+ >
+ Help
+
+
+ )
+}
diff --git a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
index 292124a6ab..04e3bdbe20 100644
--- a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
@@ -4,12 +4,11 @@ import {
PopoverBody,
useEventListener,
Portal,
- IconButton,
- HStack,
Stack,
useColorModeValue,
+ SlideFade,
+ Flex,
} from '@chakra-ui/react'
-import { ExpandIcon } from '@/components/icons'
import {
InputBlockType,
IntegrationBlockType,
@@ -18,8 +17,7 @@ import {
BlockOptions,
BlockWithOptions,
} from '@typebot.io/schemas'
-import { useRef } from 'react'
-import { HelpDocButton } from './HelpDocButton'
+import { useRef, useState } from 'react'
import { WaitSettings } from '@/features/blocks/logic/wait/components/WaitSettings'
import { ScriptSettings } from '@/features/blocks/logic/script/components/ScriptSettings'
import { JumpSettings } from '@/features/blocks/logic/jump/components/JumpSettings'
@@ -47,6 +45,7 @@ import { GoogleSheetsSettings } from '@/features/blocks/integrations/googleSheet
import { ChatwootSettings } from '@/features/blocks/integrations/chatwoot/components/ChatwootSettings'
import { AbTestSettings } from '@/features/blocks/logic/abTest/components/AbTestSettings'
import { PictureChoiceSettings } from '@/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings'
+import { SettingsHoverBar } from './SettingsHoverBar'
type Props = {
block: BlockWithOptions
@@ -55,6 +54,7 @@ type Props = {
}
export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
+ const [isHovering, setIsHovering] = useState(false)
const arrowColor = useColorModeValue('white', 'gray.800')
const ref = useRef(null)
const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
@@ -74,17 +74,26 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
maxH="400px"
ref={ref}
shadow="lg"
+ onMouseEnter={() => setIsHovering(true)}
+ onMouseLeave={() => setIsHovering(false)}
>
-
-
- }
- size="xs"
- onClick={onExpandClick}
- />
-
+
+
+
+
+
diff --git a/apps/builder/src/features/graph/components/nodes/block/HelpDocButton.tsx b/apps/builder/src/features/graph/helpers/getHelpDocUrl.ts
similarity index 83%
rename from apps/builder/src/features/graph/components/nodes/block/HelpDocButton.tsx
rename to apps/builder/src/features/graph/helpers/getHelpDocUrl.ts
index 2ef9015b47..83532e84b5 100644
--- a/apps/builder/src/features/graph/components/nodes/block/HelpDocButton.tsx
+++ b/apps/builder/src/features/graph/helpers/getHelpDocUrl.ts
@@ -1,36 +1,11 @@
-import { BuoyIcon } from '@/components/icons'
-import { Button, Link } from '@chakra-ui/react'
import {
BlockWithOptions,
InputBlockType,
IntegrationBlockType,
LogicBlockType,
} from '@typebot.io/schemas'
-import React from 'react'
-type HelpDocButtonProps = {
- blockType: BlockWithOptions['type']
-}
-
-export const HelpDocButton = ({ blockType }: HelpDocButtonProps) => {
- const helpDocUrl = getHelpDocUrl(blockType)
-
- if (helpDocUrl === null) return null
-
- return (
- }
- size="xs"
- href={helpDocUrl}
- isExternal
- >
- Help
-
- )
-}
-
-const getHelpDocUrl = (blockType: BlockWithOptions['type']): string => {
+export const getHelpDocUrl = (blockType: BlockWithOptions['type']): string => {
switch (blockType) {
case LogicBlockType.TYPEBOT_LINK:
return 'https://docs.typebot.io/editor/blocks/logic/typebot-link'