blsmedia/bot
2
0
Fork 0
Code Activity

fix(dashboard): 🩹 typebot buttons menu

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-29 12:44:56 +01:00
parent 1c5bd06657
commit fc1d654772
12 changed files with 160 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/builder/components/board/graph/BlockNode/BlockNode.tsx
View File

@ -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 && (
<StepsList
blockId={block.id}
steps={filterTable(block.stepIds, typebot?.steps)}
/>
)}
{typebot && <StepsList blockId={block.id} stepIds={block.stepIds} />}
</Stack>
)}
</ContextMenu>

5
apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
View File

@ -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

22
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/StepNodeContent.tsx
View File

@ -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 ? (

28
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/StepNodeContentWithVariable.tsx Normal file
View File

@ -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>
)
}

26
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/TextBubbleNodeContent.tsx Normal file
View File

@ -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),
}}
/>
)
}

75
apps/builder/components/board/graph/BlockNode/StepsList.tsx
View File

@ -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) {
createStep(blockId, draggedStepType, expandedPlaceholderIndex)
setDraggedStepType(undefined)
}
if (draggedStep) {
createStep(blockId, draggedStep, expandedPlaceholderIndex)
setDraggedStep(undefined)
}
if (!draggedStep && !draggedStepType) return
createStep(
blockId,
draggedStep || draggedStepType,
expandedPlaceholderIndex
)
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) => (
<Stack key={stepId} spacing={1}>
<StepNode
key={stepId}
step={steps.byId[stepId]}
isConnectable={steps.allIds.length - 1 === idx}
onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
onMouseMoveBottomOfElement={() => {
handleMouseOnBottomOfStep(idx)
}}
onMouseDown={handleStepMouseDown}
/>
<Flex
h={
showSortPlaceholders && expandedPlaceholderIndex === idx + 1
? '50px'
: '2px'
}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
</Stack>
))}
{typebot &&
stepIds.map((stepId, idx) => (
<Stack key={stepId} spacing={1}>
<StepNode
key={stepId}
step={typebot?.steps.byId[stepId]}
isConnectable={stepIds.length - 1 === idx}
onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
onMouseMoveBottomOfElement={() => {
handleMouseOnBottomOfStep(idx)
}}
onMouseDown={handleStepMouseDown}
/>
<Flex
h={
showSortPlaceholders && expandedPlaceholderIndex === idx + 1
? '50px'
: '2px'
}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
</Stack>
))}
{draggedStep && draggedStep.blockId === blockId && (
<Portal>
<StepNodeOverlay

2
apps/builder/components/dashboard/FolderContent.tsx
View File

@ -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'

3
apps/builder/components/dashboard/FolderContent/MoreButton.tsx
View File

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

19
apps/builder/components/dashboard/FolderContent/TypebotButton.tsx
View File

@ -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
color="red"
onClick={(e) => {
e.stopPropagation()
onDeleteOpen()
}}
>
<MenuItem color="red" onClick={handleDeleteClick}>
Delete
</MenuItem>
</MoreButton>

2
apps/builder/contexts/TypebotContext/TypebotContext.tsx
View File

@ -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

45
apps/builder/contexts/TypebotContext/actions/steps.ts
View File

@ -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 =
typeof step === 'string'
? parseNewStep(step, blockId)
: { ...step, blockId }
const newStep = parseNewStep(type, 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

18
apps/builder/services/utils.ts
View File

@ -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
})
}