fix(dashboard): 🩹 typebot buttons menu

apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx

@@ -44,7 +44,7 @@ export const StepNode = ({
   const { query } = useRouter()
   const { setConnectingIds, connectingIds, openedStepId, setOpenedStepId } =
     useGraph()
-  const { moveStep } = useTypebot()
+  const { detachStepFromBlock } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
   const [mouseDownEvent, setMouseDownEvent] =
     useState<{ absolute: Coordinates; relative: Coordinates }>()
@@ -116,8 +116,9 @@ export const StepNode = ({
       onMouseDown &&
       (event.movementX > 0 || event.movementY > 0)
     if (isMovingAndIsMouseDown && step.type !== 'start') {
+      console.log(step)
       onMouseDown(mouseDownEvent, step)
-      moveStep(step.id)
+      detachStepFromBlock(step.id)
       setMouseDownEvent(undefined)
     }
     const element = event.currentTarget as HTMLDivElement

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/StepNodeContent.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Text } from '@chakra-ui/react'
+import { Box, Image, Text } from '@chakra-ui/react'
 import {
   Step,
   StartStep,
@@ -7,9 +7,12 @@ import {
   LogicStepType,
   IntegrationStepType,
 } from 'models'
+import { isInputStep } from 'utils'
 import { ChoiceItemsList } from '../ChoiceInputStepNode/ChoiceItemsList'
 import { ConditionNodeContent } from './ConditionNodeContent'
 import { SetVariableNodeContent } from './SetVariableNodeContent'
+import { StepNodeContentWithVariable } from './StepNodeContentWithVariable'
+import { TextBubbleNodeContent } from './TextBubbleNodeContent'
 import { VideoStepNodeContent } from './VideoStepNodeContent'
 import { WebhookContent } from './WebhookContent'
 
@@ -18,21 +21,12 @@ type Props = {
   isConnectable?: boolean
 }
 export const StepNodeContent = ({ step }: Props) => {
+  if (isInputStep(step) && step.options.variableId) {
+    return <StepNodeContentWithVariable step={step} />
+  }
   switch (step.type) {
     case BubbleStepType.TEXT: {
-      return (
-        <Flex
-          flexDir={'column'}
-          opacity={step.content.html === '' ? '0.5' : '1'}
-          className="slate-html-container"
-          dangerouslySetInnerHTML={{
-            __html:
-              step.content.html === ''
-                ? `<p>Click to edit...</p>`
-                : step.content.html,
-          }}
-        />
-      )
+      return <TextBubbleNodeContent step={step} />
     }
     case BubbleStepType.IMAGE: {
       return !step.content?.url ? (

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/StepNodeContentWithVariable.tsx

@@ -0,0 +1,28 @@
+import { InputStep } from 'models'
+import { chakra, Text } from '@chakra-ui/react'
+import React from 'react'
+import { useTypebot } from 'contexts/TypebotContext'
+
+type Props = {
+  step: InputStep
+}
+
+export const StepNodeContentWithVariable = ({ step }: Props) => {
+  const { typebot } = useTypebot()
+  const variableName =
+    typebot?.variables.byId[step.options.variableId as string].name
+  return (
+    <Text>
+      Collect{' '}
+      <chakra.span
+        bgColor="orange.400"
+        color="white"
+        rounded="md"
+        py="0.5"
+        px="1"
+      >
+        {variableName}
+      </chakra.span>
+    </Text>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/TextBubbleNodeContent.tsx

@@ -0,0 +1,26 @@
+import { Flex } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { TextBubbleStep } from 'models'
+import React from 'react'
+import { parseVariableHighlight } from 'services/utils'
+
+type Props = {
+  step: TextBubbleStep
+}
+
+export const TextBubbleNodeContent = ({ step }: Props) => {
+  const { typebot } = useTypebot()
+  return (
+    <Flex
+      flexDir={'column'}
+      opacity={step.content.html === '' ? '0.5' : '1'}
+      className="slate-html-container"
+      dangerouslySetInnerHTML={{
+        __html:
+          step.content.html === ''
+            ? `<p>Click to edit...</p>`
+            : parseVariableHighlight(step.content.html, typebot),
+      }}
+    />
+  )
+}