fix(dashboard): 🩹 typebot buttons menu

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

@@ -10,7 +10,7 @@ import { Block } from 'models'
 import { useGraph } from 'contexts/GraphContext'
 import { useStepDnd } from 'contexts/StepDndContext'
 import { StepsList } from './StepsList'
-import { filterTable, isDefined } from 'utils'
+import { isDefined } from 'utils'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { ContextMenu } from 'components/shared/ContextMenu'
 import { BlockNodeContextMenu } from './BlockNodeContextMenu'
@@ -114,12 +114,7 @@ export const BlockNode = ({ block }: Props) => {
             />
             <EditableInput minW="0" px="1" />
           </Editable>
-          {typebot && (
+          {typebot && <StepsList blockId={block.id} stepIds={block.stepIds} />}
-            <StepsList
-              blockId={block.id}
-              steps={filterTable(block.stepIds, typebot?.steps)}
-            />
-          )}
         </Stack>
       )}
     </ContextMenu>

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 (
+      return <TextBubbleNodeContent step={step} />
-        <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,
-          }}
-        />
-      )
     }
     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),
+      }}
+    />
+  )
+}

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

@@ -1,5 +1,5 @@
 import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
-import { DraggableStep, Step, Table } from 'models'
+import { DraggableStep } from 'models'
 import { useStepDnd } from 'contexts/StepDndContext'
 import { Coordinates } from 'contexts/GraphContext'
 import { useMemo, useState } from 'react'
@@ -8,10 +8,10 @@ import { useTypebot } from 'contexts/TypebotContext'
 
 export const StepsList = ({
   blockId,
-  steps,
+  stepIds,
 }: {
   blockId: string
-  steps: Table<Step>
+  stepIds: string[]
 }) => {
   const {
     draggedStep,
@@ -21,7 +21,7 @@ export const StepsList = ({
     setDraggedStepType,
     setMouseOverBlockId,
   } = useStepDnd()
-  const { createStep } = useTypebot()
+  const { typebot, createStep } = useTypebot()
   const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
     number | undefined
   >()
@@ -59,14 +59,14 @@ export const StepsList = ({
     e.stopPropagation()
     setMouseOverBlockId(undefined)
     setExpandedPlaceholderIndex(undefined)
-    if (draggedStepType) {
+    if (!draggedStep && !draggedStepType) return
-      createStep(blockId, draggedStepType, expandedPlaceholderIndex)
+    createStep(
-      setDraggedStepType(undefined)
+      blockId,
-    }
+      draggedStep || draggedStepType,
-    if (draggedStep) {
+      expandedPlaceholderIndex
-      createStep(blockId, draggedStep, expandedPlaceholderIndex)
+    )
-      setDraggedStep(undefined)
+    setDraggedStep(undefined)
-    }
+    setDraggedStepType(undefined)
   }
 
   const handleStepMouseDown = (
@@ -107,31 +107,32 @@ export const StepsList = ({
         rounded="lg"
         transition={showSortPlaceholders ? 'height 200ms' : 'none'}
       />
-      {steps.allIds.map((stepId, idx) => (
+      {typebot &&
-        <Stack key={stepId} spacing={1}>
+        stepIds.map((stepId, idx) => (
-          <StepNode
+          <Stack key={stepId} spacing={1}>
-            key={stepId}
+            <StepNode
-            step={steps.byId[stepId]}
+              key={stepId}
-            isConnectable={steps.allIds.length - 1 === idx}
+              step={typebot?.steps.byId[stepId]}
-            onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
+              isConnectable={stepIds.length - 1 === idx}
-            onMouseMoveBottomOfElement={() => {
+              onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
-              handleMouseOnBottomOfStep(idx)
+              onMouseMoveBottomOfElement={() => {
-            }}
+                handleMouseOnBottomOfStep(idx)
-            onMouseDown={handleStepMouseDown}
+              }}
-          />
+              onMouseDown={handleStepMouseDown}
-          <Flex
+            />
-            h={
+            <Flex
-              showSortPlaceholders && expandedPlaceholderIndex === idx + 1
+              h={
-                ? '50px'
+                showSortPlaceholders && expandedPlaceholderIndex === idx + 1
-                : '2px'
+                  ? '50px'
-            }
+                  : '2px'
-            bgColor={'gray.300'}
+              }
-            visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+              bgColor={'gray.300'}
-            rounded="lg"
+              visibility={showSortPlaceholders ? 'visible' : 'hidden'}
-            transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+              rounded="lg"
-          />
+              transition={showSortPlaceholders ? 'height 200ms' : 'none'}
-        </Stack>
+            />
-      ))}
+          </Stack>
+        ))}
       {draggedStep && draggedStep.blockId === blockId && (
         <Portal>
           <StepNodeOverlay

apps/builder/components/dashboard/FolderContent.tsx

@@ -14,7 +14,7 @@ import {
 import { FolderPlusIcon } from 'assets/icons'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
 import { Typebot } from 'models'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { createFolder, useFolders } from 'services/folders'
 import { patchTypebot, useTypebots } from 'services/typebots'
 import { BackButton } from './FolderContent/BackButton'

apps/builder/components/dashboard/FolderContent/MoreButton.tsx

@@ -16,8 +16,7 @@ export const MoreButton = ({ children, ...props }: Props) => {
       <MenuButton
         as={IconButton}
         icon={<MoreVerticalIcon />}
-        onMouseUp={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
-        onMouseDown={(e) => e.stopPropagation()}
         colorScheme="gray"
         variant="outline"
         size="sm"

apps/builder/components/dashboard/FolderContent/TypebotButton.tsx

@@ -18,6 +18,7 @@ import { GlobeIcon, GripIcon, ToolIcon } from 'assets/icons'
 import { deleteTypebot, duplicateTypebot } from 'services/typebots'
 import { Typebot } from 'models'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
+import { useDebounce } from 'use-debounce'
 
 type ChatbotCardProps = {
   typebot: Typebot
@@ -32,6 +33,7 @@ export const TypebotButton = ({
 }: ChatbotCardProps) => {
   const router = useRouter()
   const { draggedTypebot } = useTypebotDnd()
+  const [draggedTypebotDebounced] = useDebounce(draggedTypebot, 200)
   const {
     isOpen: isDeleteOpen,
     onOpen: onDeleteOpen,
@@ -44,7 +46,7 @@ export const TypebotButton = ({
   })
 
   const handleTypebotClick = () => {
-    if (draggedTypebot) return
+    if (draggedTypebotDebounced) return
     router.push(
       isMobile
         ? `/typebots/${typebot.id}/results/responses`
@@ -72,10 +74,15 @@ export const TypebotButton = ({
     if (createdTypebot) router.push(`/typebots/${createdTypebot?.id}`)
   }
 
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onDeleteOpen()
+  }
+
   return (
     <Button
       as={WrapItem}
-      onMouseUp={handleTypebotClick}
+      onClick={handleTypebotClick}
       display="flex"
       flexDir="column"
       variant="outline"
@@ -108,13 +115,7 @@ export const TypebotButton = ({
         aria-label={`Show ${typebot.name} menu`}
       >
         <MenuItem onClick={handleDuplicateClick}>Duplicate</MenuItem>
-        <MenuItem
+        <MenuItem color="red" onClick={handleDeleteClick}>
-          color="red"
-          onClick={(e) => {
-            e.stopPropagation()
-            onDeleteOpen()
-          }}
-        >
           Delete
         </MenuItem>
       </MoreButton>

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -32,7 +32,7 @@ import { edgesAction, EdgesActions } from './actions/edges'
 import { webhooksAction, WebhooksAction } from './actions/webhooks'
 import { useDebounce } from 'use-debounce'
 
-const autoSaveTimeout = 10000
+const autoSaveTimeout = 40000
 
 type UpdateTypebotPayload = Partial<{
   theme: Theme

apps/builder/contexts/TypebotContext/actions/steps.ts

@@ -17,23 +17,24 @@ import { deleteWebhookDraft } from './webhooks'
 export type StepsActions = {
   createStep: (
     blockId: string,
-    step: DraggableStep | DraggableStepType,
+    step?: DraggableStep | DraggableStepType,
     index?: number
   ) => void
   updateStep: (
     stepId: string,
     updates: Partial<Omit<Step, 'id' | 'type'>>
   ) => void
-  moveStep: (stepId: string) => void
+  detachStepFromBlock: (stepId: string) => void
   deleteStep: (stepId: string) => void
 }
 
 export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
   createStep: (
     blockId: string,
-    step: DraggableStep | DraggableStepType,
+    step?: DraggableStep | DraggableStepType,
     index?: number
   ) => {
+    if (!step) return
     setTypebot((typebot) => {
       createStepDraft(typebot, step, blockId, index)
       removeEmptyBlocks(typebot)
@@ -43,7 +44,7 @@ export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
     setTypebot((typebot) => {
       typebot.steps.byId[stepId] = { ...typebot.steps.byId[stepId], ...updates }
     }),
-  moveStep: (stepId: string) => {
+  detachStepFromBlock: (stepId: string) => {
     setTypebot((typebot) => {
       removeStepIdFromBlock(typebot, stepId)
     })
@@ -54,23 +55,13 @@ export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
       if (isChoiceInput(step)) deleteChoiceItemsInsideStep(typebot, step)
       if (isWebhookStep(step))
         deleteWebhookDraft(step.options?.webhookId)(typebot)
-      deleteAssociatedEdges(typebot, stepId)
+      deleteEdgeDraft(typebot, step.edgeId)
       removeStepIdFromBlock(typebot, stepId)
       deleteStepDraft(typebot, stepId)
     })
   },
 })
 
-const deleteAssociatedEdges = (
-  typebot: WritableDraft<Typebot>,
-  stepId: string
-) => {
-  typebot.edges.allIds.forEach((edgeId) => {
-    if (typebot.edges.byId[edgeId].from.stepId === stepId)
-      deleteEdgeDraft(typebot, edgeId)
-  })
-}
-
 const removeStepIdFromBlock = (
   typebot: WritableDraft<Typebot>,
   stepId: string
@@ -93,18 +84,32 @@ export const createStepDraft = (
   step: DraggableStep | DraggableStepType,
   blockId: string,
   index?: number
+) =>
+  typeof step === 'string'
+    ? createNewStep(typebot, step, blockId, index)
+    : moveStepToBlock(typebot, step, blockId, index)
+
+const createNewStep = (
+  typebot: WritableDraft<Typebot>,
+  type: DraggableStepType,
+  blockId: string,
+  index?: number
 ) => {
-  const newStep =
+  const newStep = parseNewStep(type, blockId)
-    typeof step === 'string'
-      ? parseNewStep(step, blockId)
-      : { ...step, blockId }
   typebot.steps.byId[newStep.id] = newStep
-  if (isChoiceInput(newStep) && newStep.options.itemIds.length === 0)
+  if (isChoiceInput(newStep))
     createChoiceItemDraft(typebot, { stepId: newStep.id })
   typebot.steps.allIds.push(newStep.id)
   typebot.blocks.byId[blockId].stepIds.splice(index ?? 0, 0, newStep.id)
 }
 
+const moveStepToBlock = (
+  typebot: WritableDraft<Typebot>,
+  step: DraggableStep,
+  blockId: string,
+  index?: number
+) => typebot.blocks.byId[blockId].stepIds.splice(index ?? 0, 0, step.id)
+
 const deleteChoiceItemsInsideStep = (
   typebot: WritableDraft<Typebot>,
   step: ChoiceInputStep

apps/builder/services/utils.ts

@@ -1,6 +1,6 @@
 import imageCompression from 'browser-image-compression'
 import { Parser } from 'htmlparser2'
-import { Step } from 'models'
+import { Step, Typebot } from 'models'
 
 export const fetcher = async (input: RequestInfo, init?: RequestInit) => {
   const res = await fetch(input, init)
@@ -99,3 +99,19 @@ export const removeUndefinedFields = <T>(obj: T): T =>
   )
 
 export const stepHasOptions = (step: Step) => 'options' in step
+
+export const parseVariableHighlight = (content: string, typebot?: Typebot) => {
+  if (!typebot) return content
+  const varNames = typebot.variables.allIds.map(
+    (varId) => typebot.variables.byId[varId].name
+  )
+  return content.replace(/\{\{(.*?)\}\}/g, (fullMatch, foundVar) => {
+    if (varNames.some((val) => foundVar.includes(val))) {
+      return `<span style="background-color:#ff8b1a; color:#ffffff; padding: 0.125rem 0.25rem; border-radius: 0.35rem">${fullMatch.replace(
+        /{{|}}/g,
+        ''
+      )}</span>`
+    }
+    return fullMatch
+  })
+}