blsmedia/bot
2
0
Fork 0
Code Activity

♻️ Normalize data

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-06 09:40:56 +01:00
parent 6c1e0fd345
commit 9fa4c7dffa
114 changed files with 1545 additions and 1632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/builder/components/analytics/StatsCards.tsx
View File

@ -6,7 +6,7 @@ import {
StatLabel,
StatNumber,
} from '@chakra-ui/react'
import { Stats } from 'bot-engine'
import { Stats } from 'models'
import React from 'react'
export const StatsCards = ({

6
apps/builder/components/analytics/graph/AnalyticsGraph.tsx
View File

@ -3,7 +3,6 @@ import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
import React, { useMemo, useRef } from 'react'
import { AnswersCount } from 'services/analytics'
import { BlockNode } from './blocks/BlockNode'
import { StartBlockNode } from './blocks/StartBlockNode'
import { Edges } from './Edges'
const AnalyticsGraph = ({
@ -49,9 +48,8 @@ const AnalyticsGraph = ({
}}
>
<Edges answersCounts={answersCounts} />
{typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
{(typebot.blocks ?? []).map((block) => (
<BlockNode block={block} key={block.id} />
{typebot.blocks.allIds.map((blockId) => (
<BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
))}
</Flex>
</Flex>

5
apps/builder/components/analytics/graph/Edges/DropOffEdge.tsx
View File

@ -7,11 +7,12 @@ type Props = {
}
export const DropOffEdge = ({ blockId }: Props) => {
const { typebot } = useAnalyticsGraph()
const path = useMemo(() => {
if (!typebot) return
const block = (typebot?.blocks ?? []).find((b) => b.id === blockId)
const block = typebot.blocks.byId[blockId]
if (!block) return ''
return computeDropOffPath(block.graphCoordinates, block.steps.length - 1)
return computeDropOffPath(block.graphCoordinates, block.stepIds.length - 1)
}, [blockId, typebot])
return <path d={path} stroke={'#E53E3E'} strokeWidth="2px" fill="none" />

33
apps/builder/components/analytics/graph/Edges/Edge.tsx
View File

@ -1,5 +1,3 @@
import { Block } from 'bot-engine'
import { StepWithTarget } from 'components/board/graph/Edges/Edge'
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
import React, { useMemo } from 'react'
import {
@ -7,42 +5,37 @@ import {
computeFlowChartConnectorPath,
} from 'services/graph'
export const Edge = ({ step }: { step: StepWithTarget }) => {
type Props = { stepId: string }
export const Edge = ({ stepId }: Props) => {
const { typebot } = useAnalyticsGraph()
const { blocks, startBlock } = typebot ?? {}
const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
const targetBlock = blocks?.find(
(b) => b?.id === step.target.blockId
) as Block
if (!typebot) return {}
const step = typebot.steps.byId[stepId]
if (!step.target) return {}
const targetBlock = typebot.blocks.byId[step.target.blockId]
const targetStepIndex = step.target.stepId
? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
? targetBlock.stepIds.indexOf(step.target.stepId)
: undefined
const sourceBlock = typebot.blocks.byId[step.blockId]
return {
sourceBlock: [startBlock, ...(blocks ?? [])].find(
(b) => b?.id === step.blockId
),
sourceBlock,
targetBlock,
targetStepIndex,
}
}, [
blocks,
startBlock,
step.blockId,
step.target.blockId,
step.target.stepId,
])
}, [stepId, typebot])
const path = useMemo(() => {
if (!sourceBlock || !targetBlock) return ``
const anchorsPosition = getAnchorsPosition(
sourceBlock,
targetBlock,
sourceBlock.steps.findIndex((s) => s.id === step.id),
sourceBlock.stepIds.indexOf(stepId),
targetStepIndex
)
return computeFlowChartConnectorPath(anchorsPosition)
}, [sourceBlock, step.id, targetBlock, targetStepIndex])
}, [sourceBlock, stepId, targetBlock, targetStepIndex])
return (
<path

23
apps/builder/components/analytics/graph/Edges/Edges.tsx
View File

@ -1,8 +1,8 @@
import { chakra } from '@chakra-ui/system'
import { StepWithTarget } from 'components/board/graph/Edges/Edge'
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
import React, { useMemo } from 'react'
import { AnswersCount } from 'services/analytics'
import { isDefined } from 'utils'
import { DropOffBlock } from '../blocks/DropOffBlock'
import { DropOffEdge } from './DropOffEdge'
import { Edge } from './Edge'
@ -11,16 +11,13 @@ type Props = { answersCounts?: AnswersCount[] }
export const Edges = ({ answersCounts }: Props) => {
const { typebot } = useAnalyticsGraph()
const { blocks, startBlock } = typebot ?? {}
const stepsWithTarget: StepWithTarget[] = useMemo(() => {
if (!startBlock) return []
return [
...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
...((blocks ?? [])
.flatMap((b) => b.steps)
.filter((s) => s.target) as StepWithTarget[]),
]
}, [blocks, startBlock])
const stepIdsWithTarget: string[] = useMemo(() => {
if (!typebot) return []
return typebot.steps.allIds.filter((stepId) =>
isDefined(typebot.steps.byId[stepId].target)
)
}, [typebot])
return (
<>
@ -32,8 +29,8 @@ export const Edges = ({ answersCounts }: Props) => {
left="0"
top="0"
>
{stepsWithTarget.map((step) => (
<Edge key={step.id} step={step} />
{stepIdsWithTarget.map((stepId) => (
<Edge key={stepId} stepId={stepId} />
))}
<marker
id={'arrow'}

4
apps/builder/components/analytics/graph/blocks/BlockNode.tsx
View File

@ -6,9 +6,9 @@ import {
useEventListener,
} from '@chakra-ui/react'
import React, { useState } from 'react'
import { Block } from 'bot-engine'
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
import { StepsList } from './StepsList'
import { Block } from 'models'
type Props = {
block: Block
@ -56,7 +56,7 @@ export const BlockNode = ({ block }: Props) => {
<EditablePreview px="1" userSelect={'none'} />
<EditableInput minW="0" px="1" />
</Editable>
<StepsList blockId={block.id} steps={block.steps} />
<StepsList stepIds={block.stepIds} />
</Stack>
)
}

17
apps/builder/components/analytics/graph/blocks/DropOffBlock.tsx
View File

@ -1,5 +1,4 @@
import { Tag, Text, VStack } from '@chakra-ui/react'
import { Block } from 'bot-engine'
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
import React, { useMemo } from 'react'
import { AnswersCount } from 'services/analytics'
@ -21,13 +20,13 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
const { totalDroppedUser, dropOffRate } = useMemo(() => {
if (!typebot || totalAnswers === undefined)
return { previousTotal: undefined, dropOffRate: undefined }
const previousTotal = answersCounts
.filter(
(a) =>
[typebot.startBlock, ...typebot.blocks].find((b) =>
(b as Block).steps.find((s) => s.target?.blockId === blockId)
)?.id === a.blockId
const previousBlockIds = typebot.blocks.allIds.filter(() =>
typebot.steps.allIds.find(
(sId) => typebot.steps.byId[sId].target?.blockId === blockId
)
)
const previousTotal = answersCounts
.filter((a) => previousBlockIds.includes(a.blockId))
.reduce((prev, acc) => acc.totalAnswers + prev, 0)
if (previousTotal === 0)
return { previousTotal: undefined, dropOffRate: undefined }
@ -41,11 +40,11 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
const labelCoordinates = useMemo(() => {
if (!typebot) return { x: 0, y: 0 }
const sourceBlock = typebot?.blocks.find((b) => b.id === blockId)
const sourceBlock = typebot?.blocks.byId[blockId]
if (!sourceBlock) return
return computeSourceCoordinates(
sourceBlock?.graphCoordinates,
sourceBlock?.steps.length - 1
sourceBlock?.stepIds.length - 1
)
}, [blockId, typebot])

62
apps/builder/components/analytics/graph/blocks/StartBlockNode.tsx
View File

@ -1,62 +0,0 @@
import {
Editable,
EditableInput,
EditablePreview,
Stack,
useEventListener,
} from '@chakra-ui/react'
import React, { useState } from 'react'
import { StartBlock } from 'bot-engine'
import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
import { StepsList } from './StepsList'
type Props = {
block: StartBlock
}
export const StartBlockNode = ({ block }: Props) => {
const { updateBlockPosition } = useAnalyticsGraph()
const [isMouseDown, setIsMouseDown] = useState(false)
const handleMouseDown = () => {
setIsMouseDown(true)
}
const handleMouseUp = () => {
setIsMouseDown(false)
}
const handleMouseMove = (event: MouseEvent) => {
if (!isMouseDown) return
const { movementX, movementY } = event
updateBlockPosition(block.id, {
x: block.graphCoordinates.x + movementX,
y: block.graphCoordinates.y + movementY,
})
}
useEventListener('mousemove', handleMouseMove)
return (
<Stack
p="4"
rounded="lg"
bgColor="blue.50"
borderWidth="2px"
minW="300px"
transition="border 300ms"
pos="absolute"
style={{
transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
}}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
>
<Editable value={block.title} isDisabled>
<EditablePreview px="1" userSelect={'none'} />
<EditableInput minW="0" px="1" />
</Editable>
<StepsList blockId={block.id} steps={block.steps} />
</Stack>
)
}

17
apps/builder/components/analytics/graph/blocks/StepsList.tsx
View File

@ -1,19 +1,16 @@
import { Flex, Stack } from '@chakra-ui/react'
import { StartStep, Step } from 'bot-engine'
import { StepNodeOverlay } from 'components/board/graph/BlockNode/StepNode'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
export const StepsList = ({
steps,
}: {
blockId: string
steps: Step[] | [StartStep]
}) => {
export const StepsList = ({ stepIds }: { stepIds: string[] }) => {
const { typebot } = useTypebot()
return (
<Stack spacing={1} transition="none">
<Flex h={'2px'} bgColor={'gray.400'} visibility={'hidden'} rounded="lg" />
{steps.map((step) => (
<Stack key={step.id} spacing={1}>
<StepNodeOverlay key={step.id} step={step} />
{typebot &&
stepIds.map((stepId) => (
<Stack key={stepId} spacing={1}>
<StepNodeOverlay step={typebot?.steps.byId[stepId]} />
<Flex
h={'2px'}
bgColor={'gray.400'}

2
apps/builder/components/board/StepTypesList/StepCard.tsx
View File

@ -1,5 +1,5 @@
import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
import { StepType } from 'bot-engine'
import { StepType } from 'models'
import { useDnd } from 'contexts/DndContext'
import React, { useEffect, useState } from 'react'
import { StepIcon } from './StepIcon'

2
apps/builder/components/board/StepTypesList/StepIcon.tsx
View File

@ -1,5 +1,5 @@
import { ChatIcon, FlagIcon, TextIcon } from 'assets/icons'
import { StepType } from 'bot-engine'
import { StepType } from 'models'
import React from 'react'
type StepIconProps = { type: StepType }

2
apps/builder/components/board/StepTypesList/StepLabel.tsx
View File

@ -1,5 +1,5 @@
import { Text } from '@chakra-ui/react'
import { StepType } from 'bot-engine'
import { StepType } from 'models'
import React from 'react'
type Props = { type: StepType }

2
apps/builder/components/board/StepTypesList/StepTypesList.tsx
View File

@ -5,7 +5,7 @@ import {
SimpleGrid,
useEventListener,
} from '@chakra-ui/react'
import { StepType } from 'bot-engine'
import { StepType } from 'models'
import { useDnd } from 'contexts/DndContext'
import React, { useState } from 'react'
import { StepCard, StepCardOverlay } from './StepCard'

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

@ -6,12 +6,12 @@ import {
useEventListener,
} from '@chakra-ui/react'
import React, { useEffect, useMemo, useState } from 'react'
import { Block } from 'bot-engine'
import { Block } from 'models'
import { useGraph } from 'contexts/GraphContext'
import { useDnd } from 'contexts/DndContext'
import { StepsList } from './StepsList'
import { isDefined } from 'utils'
import { useTypebot } from 'contexts/TypebotContext'
import { filterTable, isDefined } from 'utils'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
import { BlockNodeContextMenu } from './BlockNodeContextMenu'
@ -21,7 +21,7 @@ type Props = {
export const BlockNode = ({ block }: Props) => {
const { connectingIds, setConnectingIds, previewingIds } = useGraph()
const { updateBlockPosition, addStepToBlock } = useTypebot()
const { typebot, updateBlock, createStep } = useTypebot()
const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =
useDnd()
const [isMouseDown, setIsMouseDown] = useState(false)
@ -55,9 +55,11 @@ export const BlockNode = ({ block }: Props) => {
if (!isMouseDown) return
const { movementX, movementY } = event
updateBlockPosition(block.id, {
updateBlock(block.id, {
graphCoordinates: {
x: block.graphCoordinates.x + movementX,
y: block.graphCoordinates.y + movementY,
},
})
}
@ -77,11 +79,11 @@ export const BlockNode = ({ block }: Props) => {
const handleStepDrop = (index: number) => {
setShowSortPlaceholders(false)
if (draggedStepType) {
addStepToBlock(block.id, draggedStepType, index)
createStep(block.id, draggedStepType, index)
setDraggedStepType(undefined)
}
if (draggedStep) {
addStepToBlock(block.id, draggedStep, index)
createStep(block.id, draggedStep, index)
setDraggedStep(undefined)
}
}
@ -119,12 +121,14 @@ export const BlockNode = ({ block }: Props) => {
/>
<EditableInput minW="0" px="1" />
</Editable>
{typebot && (
<StepsList
blockId={block.id}
steps={block.steps}
steps={filterTable(block.stepIds, typebot?.steps)}
showSortPlaceholders={showSortPlaceholders}
onMouseUp={handleStepDrop}
/>
)}
</Stack>
)}
</ContextMenu>

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

@ -1,13 +1,12 @@
import { MenuList, MenuItem } from '@chakra-ui/react'
import { TrashIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
export const BlockNodeContextMenu = ({ blockId }: { blockId: string }) => {
const { removeBlock } = useTypebot()
const { deleteBlock } = useTypebot()
const handleDeleteClick = () => deleteBlock(blockId)
const handleDeleteClick = () => {
removeBlock(blockId)
}
return (
<MenuList>
<MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>

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

@ -1,75 +0,0 @@
import {
Editable,
EditableInput,
EditablePreview,
Stack,
useEventListener,
} from '@chakra-ui/react'
import React, { useMemo, useState } from 'react'
import { StartBlock } from 'bot-engine'
import { StepNode } from './StepNode'
import { useTypebot } from 'contexts/TypebotContext'
import { useGraph } from 'contexts/GraphContext'
type Props = {
block: StartBlock
}
export const StartBlockNode = ({ block }: Props) => {
const { previewingIds } = useGraph()
const [isMouseDown, setIsMouseDown] = useState(false)
const [titleValue, setTitleValue] = useState(block.title)
const { updateBlockPosition } = useTypebot()
const isPreviewing = useMemo(
() => previewingIds.sourceId === block.id,
[block.id, previewingIds.sourceId]
)
const handleTitleChange = (title: string) => setTitleValue(title)
const handleMouseDown = () => {
setIsMouseDown(true)
}
const handleMouseUp = () => {
setIsMouseDown(false)
}
const handleMouseMove = (event: MouseEvent) => {
if (!isMouseDown) return
const { movementX, movementY } = event
updateBlockPosition(block.id, {
x: block.graphCoordinates.x + movementX,
y: block.graphCoordinates.y + movementY,
})
}
useEventListener('mousemove', handleMouseMove)
return (
<Stack
p="4"
rounded="lg"
bgColor="blue.50"
borderWidth="2px"
borderColor={isPreviewing ? 'blue.400' : 'gray.400'}
minW="300px"
transition="border 300ms"
pos="absolute"
style={{
transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
}}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
spacing="14px"
>
<Editable value={titleValue} onChange={handleTitleChange}>
<EditablePreview
_hover={{ bgColor: 'blue.100' }}
px="1"
userSelect={'none'}
/>
<EditableInput minW="0" px="1" />
</Editable>
<StepNode step={block.steps[0]} isConnectable={true} />
</Stack>
)
}

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

@ -1,19 +1,12 @@
import { MenuList, MenuItem } from '@chakra-ui/react'
import { TrashIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
export const StepNodeContextMenu = ({
blockId,
stepId,
}: {
blockId: string
stepId: string
}) => {
const { removeStepFromBlock } = useTypebot()
export const StepNodeContextMenu = ({ stepId }: { stepId: string }) => {
const { deleteStep } = useTypebot()
const handleDeleteClick = () => deleteStep(stepId)
const handleDeleteClick = () => {
removeStepFromBlock(blockId, stepId)
}
return (
<MenuList>
<MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>

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

@ -1,5 +1,5 @@
import { Flex, Text } from '@chakra-ui/react'
import { Step, StartStep, StepType } from 'bot-engine'
import { Step, StartStep, StepType } from 'models'
export const StepContent = (props: Step | StartStep) => {
switch (props.type) {

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

@ -1,6 +1,6 @@
import { Box, Flex, HStack, useEventListener } from '@chakra-ui/react'
import React, { useEffect, useMemo, useState } from 'react'
import { Block, StartStep, Step, StepType } from 'bot-engine'
import { Block, Step, StepType } from 'models'
import { SourceEndpoint } from './SourceEndpoint'
import { useGraph } from 'contexts/GraphContext'
import { StepIcon } from 'components/board/StepTypesList/StepIcon'
@ -8,7 +8,7 @@ import { isDefined } from 'utils'
import { Coordinates } from '@dnd-kit/core/dist/types'
import { TextEditor } from './TextEditor/TextEditor'
import { StepContent } from './StepContent'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
import { StepNodeContextMenu } from './RightClickMenu'
@ -19,7 +19,7 @@ export const StepNode = ({
onMouseMoveTopOfElement,
onMouseDown,
}: {
step: Step | StartStep
step: Step
isConnectable: boolean
onMouseMoveBottomOfElement?: () => void
onMouseMoveTopOfElement?: () => void
@ -29,8 +29,7 @@ export const StepNode = ({
) => void
}) => {
const { setConnectingIds, connectingIds } = useGraph()
const { removeStepFromBlock, typebot } = useTypebot()
const { blocks, startBlock } = typebot ?? {}
const { deleteStep, typebot } = useTypebot()
const [isConnecting, setIsConnecting] = useState(false)
const [mouseDownEvent, setMouseDownEvent] =
useState<{ absolute: Coordinates; relative: Coordinates }>()
@ -59,9 +58,8 @@ export const StepNode = ({
})
}
const handleConnectionDragStart = () => {
setConnectingIds({ blockId: step.blockId, stepId: step.id })
}
const handleConnectionDragStart = () =>
setConnectingIds({ source: { blockId: step.blockId, stepId: step.id } })
const handleMouseDown = (e: React.MouseEvent) => {
if (!onMouseDown) return
@ -95,7 +93,7 @@ export const StepNode = ({
(event.movementX > 0 || event.movementY > 0)
if (isMovingAndIsMouseDown) {
onMouseDown(mouseDownEvent, step as Step)
removeStepFromBlock(step.blockId, step.id)
deleteStep(step.id)
setMouseDownEvent(undefined)
}
const element = event.currentTarget as HTMLDivElement
@ -110,18 +108,15 @@ export const StepNode = ({
}
const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
const currentBlock = [startBlock, ...(blocks ?? [])].find(
(b) => b?.id === step.blockId
)
if (!typebot) return
const currentBlock = typebot.blocks?.byId[step.blockId]
const isDragginConnectorFromCurrentBlock =
connectingIds?.blockId === currentBlock?.id &&
connectingIds?.source.blockId === currentBlock?.id &&
connectingIds?.target?.blockId
const targetBlockId = isDragginConnectorFromCurrentBlock
? connectingIds.target?.blockId
: step.target?.blockId
const targetedBlock = targetBlockId
? (blocks ?? []).find((b) => b.id === targetBlockId)
: undefined
const targetedBlock = targetBlockId && typebot.blocks.byId[targetBlockId]
return targetedBlock
? targetedBlock.graphCoordinates.x <
(currentBlock as Block).graphCoordinates.x
@ -129,27 +124,24 @@ export const StepNode = ({
: 'right'
: undefined
}, [
blocks,
connectingIds?.blockId,
connectingIds?.target?.blockId,
typebot,
step.blockId,
step.target?.blockId,
startBlock,
connectingIds?.source.blockId,
connectingIds?.target?.blockId,
])
return step.type === StepType.TEXT &&
(isEditing ||
(isEditing === undefined && step.content.plainText === '')) ? (
<TextEditor
ids={{ stepId: step.id, blockId: step.blockId }}
stepId={step.id}
initialValue={step.content.richText}
onClose={handleCloseEditor}
/>
) : (
<ContextMenu<HTMLDivElement>
renderMenu={() => (
<StepNodeContextMenu blockId={step.blockId} stepId={step.id} />
)}
renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
>
{(ref, isOpened) => (
<Flex

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

@ -1,5 +1,5 @@
import { StackProps, HStack } from '@chakra-ui/react'
import { StartStep, Step } from 'bot-engine'
import { StartStep, Step } from 'models'
import { StepIcon } from 'components/board/StepTypesList/StepIcon'
import { StepContent } from './StepContent'

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

@ -9,20 +9,25 @@ import {
} from '@udecode/plate-core'
import { editorStyle, platePlugins } from 'libs/plate'
import { useDebounce } from 'use-debounce'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { createEditor } from 'slate'
import { ToolBar } from './ToolBar'
import { parseHtmlStringToPlainText } from 'services/utils'
import { TextStep } from 'models'
type TextEditorProps = {
ids: { stepId: string; blockId: string }
stepId: string
initialValue: TDescendant[]
onClose: () => void
}
export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
export const TextEditor = ({
initialValue,
stepId,
onClose,
}: TextEditorProps) => {
const editor = useMemo(
() => withPlate(createEditor(), { id: ids.stepId, plugins: platePlugins }),
() => withPlate(createEditor(), { id: stepId, plugins: platePlugins }),
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
)
@ -48,13 +53,13 @@ export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
const html = serializeHtml(editor, {
nodes: value,
})
updateStep(ids, {
updateStep(stepId, {
content: {
html,
richText: value,
plainText: parseHtmlStringToPlainText(html),
},
})
} as TextStep)
}
const handleMouseDown = (e: React.MouseEvent) => {
@ -72,7 +77,7 @@ export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
>
<ToolBar />
<Plate
id={ids.stepId}
id={stepId}
editableProps={{
style: editorStyle,
autoFocus: true,

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

@ -1,5 +1,5 @@
import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
import { StartStep, Step } from 'bot-engine'
import { Step, Table } from 'models'
import { useDnd } from 'contexts/DndContext'
import { Coordinates } from 'contexts/GraphContext'
import { useState } from 'react'
@ -12,7 +12,7 @@ export const StepsList = ({
onMouseUp,
}: {
blockId: string
steps: Step[] | [StartStep]
steps: Table<Step>
showSortPlaceholders: boolean
onMouseUp: (index: number) => void
}) => {
@ -88,12 +88,12 @@ export const StepsList = ({
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
{steps.map((step, idx) => (
<Stack key={step.id} spacing={1}>
{steps.allIds.map((stepId, idx) => (
<Stack key={stepId} spacing={1}>
<StepNode
key={step.id}
step={step}
isConnectable={steps.length - 1 === idx}
key={stepId}
step={steps.byId[stepId]}
isConnectable={steps.allIds.length - 1 === idx}
onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
onMouseMoveBottomOfElement={() => {
handleMouseOnBottomOfStep(idx)

32
apps/builder/components/board/graph/Edges/DrawingEdge.tsx
View File

@ -1,6 +1,5 @@
import { useEventListener } from '@chakra-ui/hooks'
import { Coordinates } from '@dnd-kit/core/dist/types'
import { Block } from 'bot-engine'
import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
import {
blockWidth,
@ -9,7 +8,7 @@ import {
stubLength,
useGraph,
} from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useMemo, useState } from 'react'
import {
computeFlowChartConnectorPath,
@ -19,34 +18,30 @@ import { roundCorners } from 'svg-round-corners'
export const DrawingEdge = () => {
const { graphPosition, setConnectingIds, connectingIds } = useGraph()
const { typebot, updateTarget } = useTypebot()
const { startBlock, blocks } = typebot ?? {}
const { typebot, updateStep } = useTypebot()
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
const sourceBlock = useMemo(
() =>
[startBlock, ...(blocks ?? [])].find(
(b) => b?.id === connectingIds?.blockId
),
() => connectingIds && typebot?.blocks.byId[connectingIds.source.blockId],
// eslint-disable-next-line react-hooks/exhaustive-deps
[connectingIds]
)
const path = useMemo(() => {
if (!sourceBlock) return ``
if (!sourceBlock || !typebot) return ``
if (connectingIds?.target) {
const targetedBlock = blocks?.find(
(b) => b.id === connectingIds.target?.blockId
) as Block
const targetedBlock = typebot?.blocks.byId[connectingIds.target.blockId]
const targetedStepIndex = connectingIds.target.stepId
? targetedBlock.steps.findIndex(
(s) => s.id === connectingIds.target?.stepId
? targetedBlock.stepIds.findIndex(
(stepId) => stepId === connectingIds.target?.stepId
)
: undefined
const anchorsPosition = getAnchorsPosition(
sourceBlock,
targetedBlock,
sourceBlock?.steps.findIndex((s) => s.id === connectingIds?.stepId),
sourceBlock?.stepIds.findIndex(
(stepId) => stepId === connectingIds?.source.stepId
),
targetedStepIndex
)
return computeFlowChartConnectorPath(anchorsPosition)
@ -54,7 +49,9 @@ export const DrawingEdge = () => {
return computeConnectingEdgePath(
sourceBlock?.graphCoordinates,
mousePosition,
sourceBlock.steps.findIndex((s) => s.id === connectingIds?.stepId)
sourceBlock.stepIds.findIndex(
(stepId) => stepId === connectingIds?.source.stepId
)
)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sourceBlock, mousePosition])
@ -67,7 +64,8 @@ export const DrawingEdge = () => {
}
useEventListener('mousemove', handleMouseMove)
useEventListener('mouseup', () => {
if (connectingIds?.target) updateTarget(connectingIds)
if (connectingIds?.target)
updateStep(connectingIds.source.stepId, { target: connectingIds.target })
setConnectingIds(null)
})

48
apps/builder/components/board/graph/Edges/Edge.tsx
View File

@ -1,6 +1,5 @@
import { Block, StartStep, Step, Target } from 'bot-engine'
import { Coordinates, useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useMemo } from 'react'
import {
getAnchorsPosition,
@ -14,58 +13,43 @@ export type AnchorsPositionProps = {
totalSegments: number
}
export type StepWithTarget = Omit<Step | StartStep, 'target'> & {
target: Target
}
export const Edge = ({ step }: { step: StepWithTarget }) => {
export const Edge = ({ stepId }: { stepId: string }) => {
const { typebot } = useTypebot()
const { previewingIds } = useGraph()
const step = typebot?.steps.byId[stepId]
const isPreviewing = useMemo(
() =>
previewingIds.sourceId === step.blockId &&
previewingIds.targetId === step.target.blockId,
[
previewingIds.sourceId,
previewingIds.targetId,
step.blockId,
step.target.blockId,
]
previewingIds.sourceId === step?.blockId &&
previewingIds.targetId === step?.target?.blockId,
[previewingIds.sourceId, previewingIds.targetId, step]
)
const { blocks, startBlock } = typebot ?? {}
const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
const targetBlock = blocks?.find(
(b) => b?.id === step.target.blockId
) as Block
if (!typebot) return {}
const step = typebot.steps.byId[stepId]
if (!step.target) return {}
const sourceBlock = typebot.blocks.byId[step.blockId]
const targetBlock = typebot.blocks.byId[step.target.blockId]
const targetStepIndex = step.target.stepId
? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
? targetBlock.stepIds.indexOf(step.target.stepId)
: undefined
return {
sourceBlock: [startBlock, ...(blocks ?? [])].find(
(b) => b?.id === step.blockId
),
sourceBlock,
targetBlock,
targetStepIndex,
}
}, [
blocks,
startBlock,
step.blockId,
step.target.blockId,
step.target.stepId,
])
}, [stepId, typebot])
const path = useMemo(() => {
if (!sourceBlock || !targetBlock) return ``
const anchorsPosition = getAnchorsPosition(
sourceBlock,
targetBlock,
sourceBlock.steps.findIndex((s) => s.id === step.id),
sourceBlock.stepIds.indexOf(stepId),
targetStepIndex
)
return computeFlowChartConnectorPath(anchorsPosition)
}, [sourceBlock, step.id, targetBlock, targetStepIndex])
}, [sourceBlock, stepId, targetBlock, targetStepIndex])
return (
<path

25
apps/builder/components/board/graph/Edges/Edges.tsx
View File

@ -1,21 +1,18 @@
import { chakra } from '@chakra-ui/system'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useMemo } from 'react'
import { isDefined } from 'utils'
import { DrawingEdge } from './DrawingEdge'
import { Edge, StepWithTarget } from './Edge'
import { Edge } from './Edge'
export const Edges = () => {
const { typebot } = useTypebot()
const { blocks, startBlock } = typebot ?? {}
const stepsWithTarget: StepWithTarget[] = useMemo(() => {
if (!startBlock) return []
return [
...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
...((blocks ?? [])
.flatMap((b) => b.steps)
.filter((s) => s.target) as StepWithTarget[]),
]
}, [blocks, startBlock])
const stepIdsWithTarget: string[] = useMemo(() => {
if (!typebot) return []
return typebot.steps.allIds.filter((stepId) =>
isDefined(typebot.steps.byId[stepId].target)
)
}, [typebot])
return (
<chakra.svg
@ -27,8 +24,8 @@ export const Edges = () => {
top="0"
>
<DrawingEdge />
{stepsWithTarget.map((step) => (
<Edge key={step.id} step={step} />
{stepIdsWithTarget.map((stepId) => (
<Edge key={stepId} stepId={stepId} />
))}
<marker
id={'arrow'}

16
apps/builder/components/board/graph/Graph.tsx
View File

@ -4,15 +4,15 @@ import { blockWidth, useGraph } from 'contexts/GraphContext'
import { BlockNode } from './BlockNode/BlockNode'
import { useDnd } from 'contexts/DndContext'
import { Edges } from './Edges'
import { useTypebot } from 'contexts/TypebotContext'
import { StartBlockNode } from './BlockNode/StartBlockNode'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
import { StepType } from 'models'
const Graph = ({ ...props }: FlexProps) => {
const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
useDnd()
const graphContainerRef = useRef<HTMLDivElement | null>(null)
const { addNewBlock, typebot } = useTypebot()
const { createBlock, typebot } = useTypebot()
const { graphPosition, setGraphPosition } = useGraph()
const transform = useMemo(
() =>
@ -41,11 +41,10 @@ const Graph = ({ ...props }: FlexProps) => {
const handleMouseUp = (e: MouseEvent) => {
if (!draggedStep && !draggedStepType) return
addNewBlock({
step: draggedStep,
type: draggedStepType,
createBlock({
x: e.clientX - graphPosition.x - blockWidth / 3,
y: e.clientY - graphPosition.y - 20 - headerHeight,
step: draggedStep ?? (draggedStepType as StepType),
})
setDraggedStep(undefined)
setDraggedStepType(undefined)
@ -71,9 +70,8 @@ const Graph = ({ ...props }: FlexProps) => {
>
<Edges />
{props.children}
{typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
{(typebot.blocks ?? []).map((block) => (
<BlockNode block={block} key={block.id} />
{typebot.blocks.allIds.map((blockId) => (
<BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
))}
</Flex>
</Flex>

2
apps/builder/components/board/preview/PreviewDrawer.tsx
View File

@ -12,7 +12,7 @@ import { TypebotViewer } from 'bot-engine'
import { headerHeight } from 'components/shared/TypebotHeader'
import { useEditor } from 'contexts/EditorContext'
import { useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useMemo, useState } from 'react'
import { parseTypebotToPublicTypebot } from 'services/publicTypebot'

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

@ -1,5 +1,5 @@
import { DashboardFolder } from '.prisma/client'
import { Typebot } from 'bot-engine'
import { Typebot } from 'models'
import {
Button,
Flex,

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

@ -16,7 +16,7 @@ import { MoreButton } from 'components/MoreButton'
import { ConfirmModal } from 'components/modals/ConfirmModal'
import { GlobeIcon, ToolIcon } from 'assets/icons'
import { deleteTypebot, duplicateTypebot } from 'services/typebots'
import { Typebot } from 'bot-engine'
import { Typebot } from 'models'
type ChatbotCardProps = {
typebot: Typebot

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

@ -1,6 +1,6 @@
import { Button, Flex, Text, VStack } from '@chakra-ui/react'
import { GlobeIcon, ToolIcon } from 'assets/icons'
import { Typebot } from 'bot-engine'
import { Typebot } from 'models'
type Props = {
typebot: Typebot

2
apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react/jsx-key */
import { Box, Checkbox, Flex } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useEffect, useMemo, useRef } from 'react'
import { Hooks, useFlexLayout, useRowSelect, useTable } from 'react-table'
import { parseSubmissionsColumns } from 'services/publicTypebot'

8
apps/builder/components/settings/SettingsContent.tsx
View File

@ -1,17 +1,17 @@
import { Flex, Stack } from '@chakra-ui/react'
import { TypingEmulationSettings } from 'bot-engine'
import { useTypebot } from 'contexts/TypebotContext'
import { TypingEmulationSettings } from 'models'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React from 'react'
import { TypingEmulation } from './TypingEmulation'
export const SettingsContent = () => {
const { typebot, updateSettings } = useTypebot()
const { typebot, updateTypebot } = useTypebot()
const handleTypingEmulationUpdate = (
typingEmulation: TypingEmulationSettings
) => {
if (!typebot) return
updateSettings({ ...typebot.settings, typingEmulation })
updateTypebot({ settings: { ...typebot.settings, typingEmulation } })
}
return (
<Flex h="full" w="full" justifyContent="center" align="flex-start">

2
apps/builder/components/settings/TypingEmulation.tsx
View File

@ -1,5 +1,5 @@
import { Flex, Stack, Switch, Text } from '@chakra-ui/react'
import { TypingEmulationSettings } from 'bot-engine'
import { TypingEmulationSettings } from 'models'
import React from 'react'
import { SmartNumberInput } from './SmartNumberInput'

6
apps/builder/components/share/ShareContent.tsx
View File

@ -1,15 +1,15 @@
import { Flex, Heading, Stack } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React from 'react'
import { parseDefaultPublicId } from 'services/typebots'
import { EditableUrl } from './EditableUrl'
export const ShareContent = () => {
const { typebot, updatePublicId } = useTypebot()
const { typebot, updateTypebot } = useTypebot()
const handlePublicIdChange = (publicId: string) => {
if (publicId === typebot?.publicId) return
updatePublicId(publicId)
updateTypebot({ publicId })
}
return (
<Flex h="full" w="full" justifyContent="center" align="flex-start">

2
apps/builder/components/shared/TypebotHeader/SaveButton.tsx
View File

@ -1,6 +1,6 @@
import { IconButton, Text, Tooltip } from '@chakra-ui/react'
import { CheckIcon, SaveIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React from 'react'
export const SaveButton = () => {

2
apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
View File

@ -2,7 +2,7 @@ import { Flex, HStack, Button, IconButton } from '@chakra-ui/react'
import { ChevronLeftIcon } from 'assets/icons'
import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
import { RightPanel, useEditor } from 'contexts/EditorContext'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { useRouter } from 'next/router'
import React from 'react'
import { PublishButton } from '../buttons/PublishButton'

2
apps/builder/components/shared/buttons/PublishButton.tsx
View File

@ -1,5 +1,5 @@
import { Button } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
export const PublishButton = () => {
const { isPublishing, isPublished, publishTypebot } = useTypebot()

2
apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundContent.tsx
View File

@ -1,5 +1,5 @@
import { Flex, Text } from '@chakra-ui/react'
import { Background, BackgroundType } from 'bot-engine'
import { Background, BackgroundType } from 'models'
import React from 'react'
import { ColorPicker } from '../ColorPicker'

2
apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundSelector.tsx
View File

@ -1,5 +1,5 @@
import { Stack, Text } from '@chakra-ui/react'
import { Background, BackgroundType } from 'bot-engine'
import { Background, BackgroundType } from 'models'
import { deepEqual } from 'fast-equals'
import React, { useEffect, useState } from 'react'
import { BackgroundContent } from './BackgroundContent'

2
apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx
View File

@ -6,7 +6,7 @@ import {
useRadioGroup,
UseRadioProps,
} from '@chakra-ui/react'
import { BackgroundType } from 'bot-engine'
import { BackgroundType } from 'models'
import { ReactNode } from 'react'
type Props = {

14
apps/builder/components/theme/GeneralContent/GeneralContent.tsx
View File

@ -8,28 +8,32 @@ import {
Stack,
} from '@chakra-ui/react'
import { PencilIcon } from 'assets/icons'
import { Background } from 'bot-engine'
import { useTypebot } from 'contexts/TypebotContext'
import { Background } from 'models'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React from 'react'
import { BackgroundSelector } from './BackgroundSelector'
import { FontSelector } from './FontSelector'
export const GeneralContent = () => {
const { typebot, updateTheme } = useTypebot()
const { typebot, updateTypebot } = useTypebot()
const handleSelectFont = (font: string) => {
if (!typebot) return
updateTheme({
updateTypebot({
theme: {
...typebot.theme,
general: { ...typebot.theme.general, font },
},
})
}
const handleBackgroundChange = (background: Background) => {
if (!typebot) return
updateTheme({
updateTypebot({
theme: {
...typebot.theme,
general: { ...typebot.theme.general, background },
},
})
}
return (

2
apps/builder/components/theme/ThemeContent.tsx
View File

@ -1,6 +1,6 @@
import { Flex } from '@chakra-ui/react'
import { TypebotViewer } from 'bot-engine'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useMemo } from 'react'
import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
import { SideMenu } from './SideMenu'

27
apps/builder/contexts/AnalyticsGraphProvider.tsx
View File

@ -1,4 +1,4 @@
import { Block, PublicTypebot } from 'bot-engine'
import { PublicTypebot } from 'models'
import {
createContext,
Dispatch,
@ -8,6 +8,7 @@ import {
useState,
} from 'react'
import { Coordinates } from './GraphContext'
import produce from 'immer'
type Position = Coordinates & { scale: number }
@ -35,30 +36,12 @@ export const AnalyticsGraphProvider = ({
const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
const updateBlocks = (blocks: Block[]) => {
if (!typebot) return
setTypebot({
...typebot,
blocks: [...blocks],
})
}
const updateBlockPosition = (blockId: string, newPosition: Coordinates) => {
if (!typebot) return
blockId === 'start-block'
? setTypebot({
...typebot,
startBlock: {
...typebot.startBlock,
graphCoordinates: newPosition,
},
setTypebot(
produce(typebot, (nextTypebot) => {
nextTypebot.blocks.byId[blockId].graphCoordinates = newPosition
})
: updateBlocks(
typebot.blocks.map((block) =>
block.id === blockId
? { ...block, graphCoordinates: newPosition }
: block
)
)
}

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

@ -1,4 +1,4 @@
import { Step, StepType } from 'bot-engine'
import { Step, StepType } from 'models'
import {
createContext,
Dispatch,

39
apps/builder/contexts/GraphContext.tsx
View File

@ -1,4 +1,4 @@
import { Block, Step, StepType, Target } from 'bot-engine'
import { Block, Step, Target } from 'models'
import {
createContext,
Dispatch,
@ -41,26 +41,22 @@ export type Node = Omit<Block, 'steps'> & {
})[]
}
export type NewBlockPayload = {
x: number
y: number
type?: StepType
step?: Step
}
const graphPositionDefaultValue = { x: 400, y: 100, scale: 1 }
type ConnectingIdsProps = {
source: { blockId: string; stepId: string }
target?: Target
} | null
type PreviewingIdsProps = { sourceId?: string; targetId?: string }
const graphContext = createContext<{
graphPosition: Position
setGraphPosition: Dispatch<SetStateAction<Position>>
connectingIds: { blockId: string; stepId: string; target?: Target } | null
setConnectingIds: Dispatch<
SetStateAction<{ blockId: string; stepId: string; target?: Target } | null>
>
previewingIds: { sourceId?: string; targetId?: string }
setPreviewingIds: Dispatch<
SetStateAction<{ sourceId?: string; targetId?: string }>
>
connectingIds: ConnectingIdsProps
setConnectingIds: Dispatch<SetStateAction<ConnectingIdsProps>>
previewingIds: PreviewingIdsProps
setPreviewingIds: Dispatch<SetStateAction<PreviewingIdsProps>>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
}>({
@ -70,15 +66,8 @@ const graphContext = createContext<{
export const GraphProvider = ({ children }: { children: ReactNode }) => {
const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
const [connectingIds, setConnectingIds] = useState<{
blockId: string
stepId: string
target?: Target
} | null>(null)
const [previewingIds, setPreviewingIds] = useState<{
sourceId?: string
targetId?: string
}>({})
const [connectingIds, setConnectingIds] = useState<ConnectingIdsProps>(null)
const [previewingIds, setPreviewingIds] = useState<PreviewingIdsProps>({})
return (
<graphContext.Provider

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

@ -1,402 +0,0 @@
import { useToast } from '@chakra-ui/react'
import {
Block,
PublicTypebot,
Settings,
Step,
StepType,
Target,
Theme,
Typebot,
} from 'bot-engine'
import { deepEqual } from 'fast-equals'
import { useRouter } from 'next/router'
import {
createContext,
ReactNode,
useContext,
useEffect,
useMemo,
useState,
} from 'react'
import {
createPublishedTypebot,
parseTypebotToPublicTypebot,
updatePublishedTypebot,
} from 'services/publicTypebot'
import {
checkIfPublished,
checkIfTypebotsAreEqual,
parseDefaultPublicId,
parseNewBlock,
parseNewStep,
updateTypebot,
} from 'services/typebots'
import {
fetcher,
insertItemInList,
omit,
preventUserFromRefreshing,
} from 'services/utils'
import useSWR from 'swr'
import { isDefined } from 'utils'
import { NewBlockPayload, Coordinates } from './GraphContext'
const typebotContext = createContext<{
typebot?: Typebot
publishedTypebot?: PublicTypebot
isPublished: boolean
isPublishing: boolean
hasUnsavedChanges: boolean
isSavingLoading: boolean
save: () => void
updateStep: (
ids: { stepId: string; blockId: string },
updates: Partial<Step>
) => void
addNewBlock: (props: NewBlockPayload) => void
updateBlockPosition: (blockId: string, newPositon: Coordinates) => void
removeBlock: (blockId: string) => void
addStepToBlock: (
blockId: string,
step: StepType | Step,
index: number
) => void
removeStepFromBlock: (blockId: string, stepId: string) => void
updateTarget: (connectingIds: {
blockId: string
stepId: string
target?: Target
}) => void
undo: () => void
updateTheme: (theme: Theme) => void
updateSettings: (settings: Settings) => void
updatePublicId: (publicId: string) => void
publishTypebot: () => void
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
}>({})
export const TypebotContext = ({
children,
typebotId,
}: {
children: ReactNode
typebotId?: string
}) => {
const router = useRouter()
const toast = useToast({
position: 'top-right',
status: 'error',
})
const [undoStack, setUndoStack] = useState<Typebot[]>([])
const { typebot, publishedTypebot, isLoading, mutate } = useFetchedTypebot({
typebotId,
onError: (error) =>
toast({
title: 'Error while fetching typebot',
description: error.message,
}),
})
const [localTypebot, setLocalTypebot] = useState<Typebot>()
const [localPublishedTypebot, setLocalPublishedTypebot] =
useState<PublicTypebot>()
const [isSavingLoading, setIsSavingLoading] = useState(false)
const [isPublishing, setIsPublishing] = useState(false)
const hasUnsavedChanges = useMemo(
() =>
isDefined(typebot) &&
isDefined(localTypebot) &&
!deepEqual(localTypebot, typebot),
[typebot, localTypebot]
)
const isPublished = useMemo(
() =>
isDefined(typebot) &&
isDefined(publishedTypebot) &&
checkIfPublished(typebot, publishedTypebot),
[typebot, publishedTypebot]
)
useEffect(() => {
if (!localTypebot || !typebot) return
if (!checkIfTypebotsAreEqual(localTypebot, typebot)) {
pushNewTypebotInUndoStack(localTypebot)
window.removeEventListener('beforeunload', preventUserFromRefreshing)
window.addEventListener('beforeunload', preventUserFromRefreshing)
} else {
window.removeEventListener('beforeunload', preventUserFromRefreshing)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [localTypebot])
useEffect(() => {
if (isLoading) return
if (!typebot) {
toast({ status: 'info', description: "Couldn't find typebot" })
router.replace('/typebots')
return
}
setLocalTypebot({ ...typebot })
if (publishedTypebot) setLocalPublishedTypebot({ ...publishedTypebot })
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading])
const pushNewTypebotInUndoStack = (typebot: Typebot) => {
setUndoStack([...undoStack, typebot])
}
const undo = () => {
const lastTypebot = [...undoStack].pop()
setUndoStack(undoStack.slice(0, -1))
setLocalTypebot(lastTypebot)
}
const saveTypebot = async () => {
if (!localTypebot) return
setIsSavingLoading(true)
const { error } = await updateTypebot(localTypebot.id, localTypebot)
setIsSavingLoading(false)
if (error) return toast({ title: error.name, description: error.message })
mutate({ typebot: localTypebot })
window.removeEventListener('beforeunload', preventUserFromRefreshing)
}
const updateBlocks = (blocks: Block[]) => {
if (!localTypebot) return
setLocalTypebot({
...localTypebot,
blocks: [...blocks],
})
}
const updateStep = (
{ blockId, stepId }: { blockId: string; stepId: string },
updates: Partial<Omit<Step, 'id' | 'type'>>
) => {
if (!localTypebot) return
setLocalTypebot({
...localTypebot,
blocks: localTypebot.blocks.map((block) =>
block.id === blockId
? {
...block,
steps: block.steps.map((step) =>
step.id === stepId ? { ...step, ...updates } : step
),
}
: block
),
})
}
const addNewBlock = ({ x, y, type, step }: NewBlockPayload) => {
if (!localTypebot) return
updateBlocks([
...localTypebot.blocks.filter((block) => block.steps.length > 0),
parseNewBlock({
step,
type,
totalBlocks: localTypebot.blocks.length,
initialCoordinates: {
x,
y,
},
}),
])
}
const updateBlockPosition = (blockId: string, newPosition: Coordinates) => {
if (!localTypebot) return
blockId === 'start-block'
? setLocalTypebot({
...localTypebot,
startBlock: {
...localTypebot.startBlock,
graphCoordinates: newPosition,
},
})
: updateBlocks(
localTypebot.blocks.map((block) =>
block.id === blockId
? { ...block, graphCoordinates: newPosition }
: block
)
)
}
const addStepToBlock = (
blockId: string,
step: StepType | Step,
index: number
) => {
if (!localTypebot) return
updateBlocks(
localTypebot.blocks
.map((block) =>
block.id === blockId
? {
...block,
steps: insertItemInList<Step>(
block.steps,
index,
typeof step === 'string'
? parseNewStep(step as StepType, block.id)
: { ...step, blockId: block.id }
),
}
: block
)
.filter((block) => block.steps.length > 0)
)
}
const removeStepFromBlock = (blockId: string, stepId: string) => {
if (!localTypebot) return
updateBlocks(
localTypebot.blocks.map((block) =>
block.id === blockId
? {
...block,
steps: [...block.steps.filter((step) => step.id !== stepId)],
}
: block
)
)
}
const updateTarget = ({
blockId,
stepId,
target,
}: {
blockId: string
stepId: string
target?: Target
}) => {
if (!localTypebot) return
blockId === 'start-block'
? setLocalTypebot({
...localTypebot,
startBlock: {
...localTypebot.startBlock,
steps: [{ ...localTypebot.startBlock.steps[0], target }],
},
})
: updateBlocks(
localTypebot.blocks.map((block) =>
block.id === blockId
? {
...block,
steps: [
...block.steps.map((step) =>
step.id === stepId ? { ...step, target } : step
),
],
}
: block
)
)
}
const removeBlock = (blockId: string) => {
if (!localTypebot) return
const blocks = [...localTypebot.blocks.filter((b) => b.id !== blockId)]
setLocalTypebot({ ...localTypebot, blocks })
}
const updateTheme = (theme: Theme) => {
if (!localTypebot) return
setLocalTypebot({ ...localTypebot, theme })
}
const updateSettings = (settings: Settings) => {
if (!localTypebot) return
setLocalTypebot({ ...localTypebot, settings })
}
const updatePublicId = (publicId: string) => {
if (!localTypebot) return
setLocalTypebot({ ...localTypebot, publicId })
}
const publishTypebot = async () => {
if (!localTypebot) return
if (!localPublishedTypebot) {
const newPublicId = parseDefaultPublicId(
localTypebot.name,
localTypebot.id
)
updatePublicId(newPublicId)
localTypebot.publicId = newPublicId
}
if (hasUnsavedChanges || !localPublishedTypebot) await saveTypebot()
setIsPublishing(true)
if (localPublishedTypebot) {
const { error } = await updatePublishedTypebot(
localPublishedTypebot.id,
omit(parseTypebotToPublicTypebot(localTypebot), 'id')
)
setIsPublishing(false)
if (error) return toast({ title: error.name, description: error.message })
} else {
const { error } = await createPublishedTypebot(
omit(parseTypebotToPublicTypebot(localTypebot), 'id')
)
setIsPublishing(false)
if (error) return toast({ title: error.name, description: error.message })
}
mutate({ typebot: localTypebot })
}
return (
<typebotContext.Provider
value={{
typebot: localTypebot,
publishedTypebot: localPublishedTypebot,
updateStep,
addNewBlock,
addStepToBlock,
updateTarget,
removeStepFromBlock,
updateBlockPosition,
hasUnsavedChanges,
isSavingLoading,
save: saveTypebot,
removeBlock,
undo,
updateTheme,
updateSettings,
updatePublicId,
publishTypebot,
isPublishing,
isPublished,
}}
>
{children}
</typebotContext.Provider>
)
}
export const useTypebot = () => useContext(typebotContext)
export const useFetchedTypebot = ({
typebotId,
onError,
}: {
typebotId?: string
onError: (error: Error) => void
}) => {
const { data, error, mutate } = useSWR<
{ typebot: Typebot; publishedTypebot?: PublicTypebot },
Error
>(typebotId ? `/api/typebots/${typebotId}` : null, fetcher)
if (error) onError(error)
return {
typebot: data?.typebot,
publishedTypebot: data?.publishedTypebot,
isLoading: !error && !data,
mutate,
}
}

232
apps/builder/contexts/TypebotContext/TypebotContext.tsx Normal file
View File

@ -0,0 +1,232 @@
import { useToast } from '@chakra-ui/react'
import { deepEqual } from 'fast-equals'
import { PublicTypebot, Settings, Theme, Typebot } from 'models'
import { useRouter } from 'next/router'
import {
createContext,
ReactNode,
useContext,
useEffect,
useMemo,
useState,
} from 'react'
import {
createPublishedTypebot,
parseTypebotToPublicTypebot,
updatePublishedTypebot,
} from 'services/publicTypebot'
import {
checkIfPublished,
checkIfTypebotsAreEqual,
parseDefaultPublicId,
updateTypebot,
} from 'services/typebots'
import { fetcher, omit, preventUserFromRefreshing } from 'services/utils'
import useSWR from 'swr'
import { isDefined } from 'utils'
import { BlocksActions, blocksActions } from './actions/blocks'
import { useImmer, Updater } from 'use-immer'
import { stepsAction, StepsActions } from './actions/steps'
type UpdateTypebotPayload = Partial<{
theme: Theme
settings: Settings
publicId: string
}>
const typebotContext = createContext<
{
typebot?: Typebot
publishedTypebot?: PublicTypebot
isPublished: boolean
isPublishing: boolean
hasUnsavedChanges: boolean
isSavingLoading: boolean
save: () => void
undo: () => void
updateTypebot: (updates: UpdateTypebotPayload) => void
publishTypebot: () => void
} & BlocksActions &
StepsActions
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
>({})
export const TypebotContext = ({
children,
typebotId,
}: {
children: ReactNode
typebotId?: string
}) => {
const router = useRouter()
const toast = useToast({
position: 'top-right',
status: 'error',
})
const [undoStack, setUndoStack] = useState<Typebot[]>([])
const { typebot, publishedTypebot, isLoading, mutate } = useFetchedTypebot({
typebotId,
onError: (error) =>
toast({
title: 'Error while fetching typebot',
description: error.message,
}),
})
const [localTypebot, setLocalTypebot] = useImmer<Typebot | undefined>(
undefined
)
const [localPublishedTypebot, setLocalPublishedTypebot] =
useState<PublicTypebot>()
const [isSavingLoading, setIsSavingLoading] = useState(false)
const [isPublishing, setIsPublishing] = useState(false)
const hasUnsavedChanges = useMemo(
() =>
isDefined(typebot) &&
isDefined(localTypebot) &&
!deepEqual(localTypebot, typebot),
[typebot, localTypebot]
)
const isPublished = useMemo(
() =>
isDefined(typebot) &&
isDefined(publishedTypebot) &&
checkIfPublished(typebot, publishedTypebot),
[typebot, publishedTypebot]
)
useEffect(() => {
if (!localTypebot || !typebot) return
if (!checkIfTypebotsAreEqual(localTypebot, typebot)) {
pushNewTypebotInUndoStack(localTypebot)
window.removeEventListener('beforeunload', preventUserFromRefreshing)
window.addEventListener('beforeunload', preventUserFromRefreshing)
} else {
window.removeEventListener('beforeunload', preventUserFromRefreshing)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [localTypebot])
useEffect(() => {
if (isLoading) return
if (!typebot) {
toast({ status: 'info', description: "Couldn't find typebot" })
router.replace('/typebots')
return
}
setLocalTypebot({ ...typebot })
if (publishedTypebot) setLocalPublishedTypebot({ ...publishedTypebot })
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading])
const pushNewTypebotInUndoStack = (typebot: Typebot) => {
setUndoStack([...undoStack, typebot])
}
const undo = () => {
const lastTypebot = [...undoStack].pop()
setUndoStack(undoStack.slice(0, -1))
setLocalTypebot(lastTypebot)
}
const saveTypebot = async (typebot?: Typebot) => {
if (!localTypebot) return
setIsSavingLoading(true)
const { error } = await updateTypebot(
typebot?.id ?? localTypebot.id,
typebot ?? localTypebot
)
setIsSavingLoading(false)
if (error) return toast({ title: error.name, description: error.message })
mutate({ typebot: typebot ?? localTypebot })
window.removeEventListener('beforeunload', preventUserFromRefreshing)
}
const updateLocalTypebot = ({
publicId,
settings,
theme,
}: UpdateTypebotPayload) => {
setLocalTypebot((typebot) => {
if (!typebot) return
if (publicId) typebot.publicId = publicId
if (settings) typebot.settings = settings
if (theme) typebot.theme = theme
})
}
const publishTypebot = async () => {
if (!localTypebot) return
const newLocalTypebot = { ...localTypebot }
if (!localPublishedTypebot) {
const newPublicId = parseDefaultPublicId(
localTypebot.name,
localTypebot.id
)
updateLocalTypebot({ publicId: newPublicId })
newLocalTypebot.publicId = newPublicId
}
if (hasUnsavedChanges || !localPublishedTypebot)
await saveTypebot(newLocalTypebot)
setIsPublishing(true)
if (localPublishedTypebot) {
const { error } = await updatePublishedTypebot(
localPublishedTypebot.id,
omit(parseTypebotToPublicTypebot(newLocalTypebot), 'id')
)
setIsPublishing(false)
if (error) return toast({ title: error.name, description: error.message })
} else {
const { data, error } = await createPublishedTypebot(
omit(parseTypebotToPublicTypebot(newLocalTypebot), 'id')
)
setLocalPublishedTypebot(data)
setIsPublishing(false)
if (error) return toast({ title: error.name, description: error.message })
}
mutate({ typebot: localTypebot })
}
return (
<typebotContext.Provider
value={{
typebot: localTypebot,
publishedTypebot: localPublishedTypebot,
hasUnsavedChanges,
isSavingLoading,
save: saveTypebot,
undo,
publishTypebot,
isPublishing,
isPublished,
updateTypebot: updateLocalTypebot,
...blocksActions(setLocalTypebot as Updater<Typebot>),
...stepsAction(setLocalTypebot as Updater<Typebot>),
}}
>
{children}
</typebotContext.Provider>
)
}
export const useTypebot = () => useContext(typebotContext)
export const useFetchedTypebot = ({
typebotId,
onError,
}: {
typebotId?: string
onError: (error: Error) => void
}) => {
const { data, error, mutate } = useSWR<
{ typebot: Typebot; publishedTypebot?: PublicTypebot },
Error
>(typebotId ? `/api/typebots/${typebotId}` : null, fetcher)
if (error) onError(error)
return {
typebot: data?.typebot,
publishedTypebot: data?.publishedTypebot,
isLoading: !error && !data,
mutate,
}
}

40
apps/builder/contexts/TypebotContext/actions/blocks.ts Normal file
View File

@ -0,0 +1,40 @@
import { Coordinates } from 'contexts/GraphContext'
import { Block, Step, StepType, Typebot } from 'models'
import { parseNewBlock } from 'services/typebots'
import { Updater } from 'use-immer'
import { createStepDraft, deleteStepDraft } from './steps'
export type BlocksActions = {
createBlock: (props: Coordinates & { step: StepType | Step }) => void
updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id'>>) => void
deleteBlock: (blockId: string) => void
}
export const blocksActions = (setTypebot: Updater<Typebot>): BlocksActions => ({
createBlock: ({ x, y, step }: Coordinates & { step: StepType | Step }) => {
setTypebot((typebot) => {
const newBlock = parseNewBlock({
totalBlocks: typebot.blocks.allIds.length,
initialCoordinates: { x, y },
})
typebot.blocks.byId[newBlock.id] = newBlock
typebot.blocks.allIds.push(newBlock.id)
createStepDraft(typebot, step, newBlock.id)
})
},
updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id'>>) =>
setTypebot((typebot) => {
typebot.blocks.byId[blockId] = {
...typebot.blocks.byId[blockId],
...updates,
}
}),
deleteBlock: (blockId: string) =>
setTypebot((typebot) => {
const block = typebot.blocks.byId[blockId]
block.stepIds.forEach((stepId) => deleteStepDraft(typebot, stepId))
delete typebot.blocks.byId[blockId]
const index = typebot.blocks.allIds.indexOf(blockId)
if (index !== -1) typebot.blocks.allIds.splice(index, 1)
}),
})

51
apps/builder/contexts/TypebotContext/actions/steps.ts Normal file
View File

@ -0,0 +1,51 @@
import { Step, StepType, Typebot } from 'models'
import { parseNewStep } from 'services/typebots'
import { Updater } from 'use-immer'
import { WritableDraft } from 'immer/dist/types/types-external'
export type StepsActions = {
createStep: (blockId: string, step: StepType | Step, index?: number) => void
updateStep: (
stepId: string,
updates: Partial<Omit<Step, 'id' | 'type'>>
) => void
deleteStep: (stepId: string) => void
}
export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
createStep: (blockId: string, step: StepType | Step, index?: number) => {
setTypebot((typebot) => {
createStepDraft(typebot, step, blockId, index)
})
},
updateStep: (stepId: string, updates: Partial<Omit<Step, 'id' | 'type'>>) =>
setTypebot((typebot) => {
typebot.steps.byId[stepId] = { ...typebot.steps.byId[stepId], ...updates }
}),
deleteStep: (stepId: string) => {
setTypebot((typebot) => {
deleteStepDraft(typebot, stepId)
})
},
})
export const deleteStepDraft = (
typebot: WritableDraft<Typebot>,
stepId: string
) => {
delete typebot.steps.byId[stepId]
const index = typebot.steps.allIds.indexOf(stepId)
if (index !== -1) typebot.steps.allIds.splice(index, 1)
}
export const createStepDraft = (
typebot: WritableDraft<Typebot>,
step: StepType | Step,
blockId: string,
index?: number
) => {
const newStep = typeof step === 'string' ? parseNewStep(step, blockId) : step
typebot.steps.byId[newStep.id] = newStep
typebot.steps.allIds.push(newStep.id)
typebot.blocks.byId[blockId].stepIds.splice(index ?? 0, 0, newStep.id)
}

1
apps/builder/contexts/TypebotContext/index.ts Normal file
View File

@ -0,0 +1 @@
export { TypebotContext } from './TypebotContext'

62
apps/builder/cypress/plugins/database.ts
View File

@ -1,5 +1,6 @@
import { parseNewTypebot, PublicTypebot, StepType, Typebot } from 'bot-engine'
import { PublicTypebot, StepType, Typebot } from 'models'
import { Plan, PrismaClient } from 'db'
import { parseTestTypebot } from './utils'
const prisma = new PrismaClient()
@ -34,51 +35,50 @@ const createFolders = () =>
})
const createTypebots = async () => {
const typebot2: Typebot = {
...(parseNewTypebot({
const typebot2 = {
...parseTestTypebot({
id: 'typebot2',
name: 'Typebot #2',
ownerId: 'test2',
folderId: null,
}) as Typebot),
id: 'typebot2',
startBlock: {
id: 'start-block',
steps: [
{
id: 'start-step',
blockId: 'start-block',
type: StepType.START,
label: 'Start',
target: { blockId: 'block1' },
},
],
graphCoordinates: { x: 0, y: 0 },
title: 'Start',
},
blocks: [
{
title: 'Block #1',
blocks: {
byId: {
block1: {
id: 'block1',
steps: [{ id: 'step1', type: StepType.TEXT_INPUT, blockId: 'block1' }],
title: 'Block #1',
stepIds: ['step1'],
graphCoordinates: { x: 200, y: 200 },
},
],
},
allIds: ['block1'],
},
steps: {
byId: {
step1: {
id: 'step1',
type: StepType.TEXT_INPUT,
blockId: 'block1',
},
},
allIds: ['step1'],
},
}),
}
await prisma.typebot.createMany({
data: [
{
...parseNewTypebot({
...parseTestTypebot({
id: 'typebot1',
name: 'Typebot #1',
ownerId: 'test2',
folderId: null,
blocks: { byId: {}, allIds: [] },
steps: { byId: {}, allIds: [] },
}),
id: 'typebot1',
},
typebot2,
],
] as any,
})
return prisma.publicTypebot.createMany({
data: [parseTypebotToPublicTypebot('publictypebot2', typebot2)],
data: [parseTypebotToPublicTypebot('publictypebot2', typebot2)] as any,
})
}
@ -118,8 +118,8 @@ const parseTypebotToPublicTypebot = (
): PublicTypebot => ({
id,
blocks: typebot.blocks,
steps: typebot.steps,
name: typebot.name,
startBlock: typebot.startBlock,
typebotId: typebot.id,
theme: typebot.theme,
settings: typebot.settings,

75
apps/builder/cypress/plugins/utils.ts Normal file
View File

@ -0,0 +1,75 @@
import {
Block,
StepType,
Theme,
BackgroundType,
Settings,
Typebot,
Table,
Step,
} from 'models'
export const parseTestTypebot = ({
id,
ownerId,
name,
blocks,
steps,
}: {
id: string
ownerId: string
name: string
blocks: Table<Block>
steps: Table<Step>
}): Typebot => {
const theme: Theme = {
general: {
font: 'Open Sans',
background: { type: BackgroundType.NONE, content: '#ffffff' },
},
}
const settings: Settings = {
typingEmulation: {
enabled: true,
speed: 300,
maxDelay: 1.5,
},
}
return {
id,
folderId: null,
name,
ownerId,
theme,
settings,
createdAt: new Date(),
blocks: {
byId: {
block0: {
id: 'block0',
title: 'Block #0',
stepIds: ['step0'],
graphCoordinates: { x: 0, y: 0 },
},
...blocks.byId,
},
allIds: ['block0', ...blocks.allIds],
},
steps: {
byId: {
step0: {
id: 'step0',
type: StepType.START,
blockId: 'block0',
label: 'Start',
target: { blockId: 'block1' },
},
...steps.byId,
},
allIds: ['step0', ...steps.allIds],
},
publicId: null,
publishedTypebotId: null,
updatedAt: new Date(),
}
}

13
apps/builder/cypress/tests/results.ts
View File

@ -2,15 +2,10 @@ import path from 'path'
import { parse } from 'papaparse'
describe('ResultsPage', () => {
before(() => {
cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
'getResults'
)
cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
'getResults'
)
})
beforeEach(() => {
cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
'getResults'
)
cy.task('seed')
cy.signOut()
})
@ -48,7 +43,7 @@ describe('ResultsPage', () => {
cy.findByText('content0').should('exist')
})
it.only('should correctly export selection in CSV', () => {
it('should correctly export selection in CSV', () => {
const downloadsFolder = Cypress.config('downloadsFolder')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot2/results')

4
apps/builder/layouts/results/AnalyticsContent.tsx
View File

@ -1,9 +1,9 @@
import { Flex, useToast } from '@chakra-ui/react'
import { Stats } from 'bot-engine'
import AnalyticsGraph from 'components/analytics/graph/AnalyticsGraph'
import { StatsCards } from 'components/analytics/StatsCards'
import { AnalyticsGraphProvider } from 'contexts/AnalyticsGraphProvider'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { Stats } from 'models'
import React from 'react'
import { useAnswersCount } from 'services/analytics'

2
apps/builder/layouts/results/ResultsContent.tsx
View File

@ -1,6 +1,6 @@
import { Button, Flex, HStack, Tag, useToast, Text } from '@chakra-ui/react'
import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
import { useTypebot } from 'contexts/TypebotContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { useRouter } from 'next/router'
import React, { useMemo } from 'react'
import { useStats } from 'services/analytics'

6
apps/builder/next.config.js
View File

@ -1,6 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withTM = require('next-transpile-modules')(['utils'])
module.exports = withTM({
reactStrictMode: true,
})

15
apps/builder/package.json
View File

@ -11,7 +11,7 @@
},
"dependencies": {
"@chakra-ui/css-reset": "^1.1.1",
"@chakra-ui/react": "^1.7.3",
"@chakra-ui/react": "^1.7.4",
"@dnd-kit/core": "^4.0.3",
"@dnd-kit/sortable": "^5.1.0",
"@emotion/react": "^11.7.1",
@ -24,13 +24,14 @@
"@udecode/plate-link": "^9.0.0",
"@udecode/plate-ui-link": "^9.0.0",
"@udecode/plate-ui-toolbar": "^9.0.0",
"aws-sdk": "^2.1048.0",
"aws-sdk": "^2.1051.0",
"bot-engine": "*",
"db": "*",
"fast-equals": "^2.0.4",
"focus-visible": "^5.2.0",
"framer-motion": "^4",
"htmlparser2": "^7.2.0",
"immer": "^9.0.7",
"kbar": "^0.1.0-beta.24",
"micro": "^9.3.4",
"micro-cors": "^0.1.1",
@ -45,7 +46,7 @@
"react-frame-component": "^5.2.1",
"react-table": "^7.7.0",
"short-uuid": "^4.2.0",
"slate": "^0.72.0",
"slate": "^0.72.3",
"slate-history": "^0.66.0",
"slate-hyperscript": "^0.67.0",
"slate-react": "^0.72.1",
@ -54,7 +55,9 @@
"svg-round-corners": "^0.3.0",
"swr": "^1.1.2",
"use-debounce": "^7.0.1",
"utils": "*"
"use-immer": "^0.6.0",
"utils": "*",
"models": "*"
},
"devDependencies": {
"@testing-library/cypress": "^8.0.2",
@ -63,10 +66,10 @@
"@types/nprogress": "^0.2.0",
"@types/papaparse": "^5.3.1",
"@types/qs": "^6.9.7",
"@types/react": "^17.0.37",
"@types/react": "^17.0.38",
"@types/react-table": "^7.7.9",
"@types/testing-library__cypress": "^5.0.9",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/eslint-plugin": "^5.9.0",
"cypress": "^9.2.0",
"cypress-file-upload": "^5.0.8",
"cypress-social-logins": "^1.13.0",

9
apps/builder/pages/api/typebots.ts
View File

@ -1,8 +1,8 @@
import { parseNewTypebot } from 'bot-engine'
import { User } from 'db'
import { Prisma, User } from 'db'
import prisma from 'libs/prisma'
import { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from 'next-auth/react'
import { parseNewTypebot } from 'services/typebots'
import { methodNotAllowed } from 'utils'
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
@ -26,7 +26,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
if (req.method === 'POST') {
const data = JSON.parse(req.body)
const typebot = await prisma.typebot.create({
data: parseNewTypebot({ ownerId: user.id, ...data }),
data: parseNewTypebot({
ownerId: user.id,
...data,
}) as Prisma.TypebotUncheckedCreateInput,
})
return res.send(typebot)
}

14
apps/builder/pages/api/typebots/[typebotId]/results/answers/count.ts
View File

@ -1,4 +1,4 @@
import { PublicTypebot } from 'bot-engine'
import { PublicTypebot } from 'models'
import { User } from 'db'
import prisma from 'libs/prisma'
import { NextApiRequest, NextApiResponse } from 'next'
@ -24,14 +24,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const answersCounts: { blockId: string; totalAnswers: number }[] =
await Promise.all(
(typebot.publishedTypebot as PublicTypebot).blocks.map(
async (block) => {
(
typebot.publishedTypebot as unknown as PublicTypebot
).blocks.allIds.map(async (blockId) => {
const totalAnswers = await prisma.answer.count({
where: { blockId: block.id },
where: { blockId },
})
return { blockId, totalAnswers }
})
return { blockId: block.id, totalAnswers }
}
)
)
return res.status(200).send({ answersCounts })
}

2
apps/builder/pages/api/typebots/[typebotId]/results/stats.ts
View File

@ -1,6 +1,6 @@
import { Stats } from 'bot-engine'
import { User } from 'db'
import prisma from 'libs/prisma'
import { Stats } from 'models'
import { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from 'next-auth/react'
import { methodNotAllowed } from 'utils'

2
apps/builder/pages/typebots/[id]/edit.tsx
View File

@ -3,7 +3,7 @@ import { Board } from 'components/board/Board'
import { Seo } from 'components/Seo'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import { EditorContext } from 'contexts/EditorContext'
import { TypebotContext } from 'contexts/TypebotContext'
import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
import { useRouter } from 'next/router'
import { KBarProvider } from 'kbar'
import React from 'react'

2
apps/builder/pages/typebots/[id]/results.tsx
View File

@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
import { ResultsContent } from 'layouts/results/ResultsContent'
import { Seo } from 'components/Seo'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import { TypebotContext } from 'contexts/TypebotContext'
import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
import { useRouter } from 'next/router'
import React from 'react'
import { UserContext } from 'contexts/UserContext'

2
apps/builder/pages/typebots/[id]/results/analytics.tsx
View File

@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
import { ResultsContent } from 'layouts/results/ResultsContent'
import { Seo } from 'components/Seo'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import { TypebotContext } from 'contexts/TypebotContext'
import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
import { useRouter } from 'next/router'
import React from 'react'
import { UserContext } from 'contexts/UserContext'

2
apps/builder/pages/typebots/[id]/settings.tsx
View File

@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
import { Seo } from 'components/Seo'
import { SettingsContent } from 'components/settings/SettingsContent'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import { TypebotContext } from 'contexts/TypebotContext'
import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
import { UserContext } from 'contexts/UserContext'
import { useRouter } from 'next/router'
import React from 'react'

2
apps/builder/pages/typebots/[id]/share.tsx
View File

@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
import { Seo } from 'components/Seo'
import { ShareContent } from 'components/share/ShareContent'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import { TypebotContext } from 'contexts/TypebotContext'
import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
import { UserContext } from 'contexts/UserContext'
import { useRouter } from 'next/router'
import React from 'react'

2
apps/builder/pages/typebots/[id]/theme.tsx
View File

@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
import { Seo } from 'components/Seo'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import { ThemeContent } from 'components/theme/ThemeContent'
import { TypebotContext } from 'contexts/TypebotContext'
import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
import { UserContext } from 'contexts/UserContext'
import { useRouter } from 'next/router'
import React from 'react'

2
apps/builder/services/analytics.ts
View File

@ -1,4 +1,4 @@
import { Stats } from 'bot-engine'
import { Stats } from 'models'
import useSWR from 'swr'
import { fetcher } from './utils'

4
apps/builder/services/graph.ts
View File

@ -1,5 +1,5 @@
import { Coordinates } from '@dnd-kit/core/dist/types'
import { Block, StartBlock } from 'bot-engine'
import { Block } from 'models'
import { AnchorsPositionProps } from 'components/board/graph/Edges/Edge'
import {
stubLength,
@ -143,7 +143,7 @@ const computeFiveSegments = (
}
export const getAnchorsPosition = (
sourceBlock: Block | StartBlock,
sourceBlock: Block,
targetBlock: Block,
sourceStepIndex: number,
targetStepIndex?: number

48
apps/builder/services/publicTypebot.tsx
View File

@ -1,11 +1,4 @@
import {
Block,
InputStep,
PublicTypebot,
Step,
StepType,
Typebot,
} from 'bot-engine'
import { InputStep, PublicTypebot, Step, StepType, Typebot } from 'models'
import { sendRequest } from './utils'
import shortId from 'short-uuid'
import { HStack, Text } from '@chakra-ui/react'
@ -17,8 +10,8 @@ export const parseTypebotToPublicTypebot = (
): PublicTypebot => ({
id: shortId.generate(),
blocks: typebot.blocks,
steps: typebot.steps,
name: typebot.name,
startBlock: typebot.startBlock,
typebotId: typebot.id,
theme: typebot.theme,
settings: typebot.settings,
@ -28,7 +21,7 @@ export const parseTypebotToPublicTypebot = (
export const createPublishedTypebot = async (
typebot: Omit<PublicTypebot, 'id'>
) =>
sendRequest({
sendRequest<PublicTypebot>({
url: `/api/publicTypebots`,
method: 'POST',
body: typebot,
@ -49,7 +42,10 @@ export const parseSubmissionsColumns = (
): {
Header: JSX.Element
accessor: string
}[] => [
}[] => {
console.log(typebot)
if (!typebot) return []
return [
{
Header: (
<HStack>
@ -59,22 +55,34 @@ export const parseSubmissionsColumns = (
),
accessor: 'createdAt',
},
...(typebot?.blocks ?? []).filter(blockContainsInput).map((block) => ({
...typebot.blocks.allIds
.filter((blockId) => typebot && blockContainsInput(typebot, blockId))
.map((blockId) => {
const block = typebot.blocks.byId[blockId]
const inputStepId = block.stepIds.find((stepId) =>
stepIsInput(typebot.steps.byId[stepId])
)
const inputStep = typebot.steps.byId[inputStepId as string]
return {
Header: (
<HStack>
<StepIcon
type={
block.steps.find((step) => step.target)?.type ?? StepType.TEXT_INPUT
}
/>
<StepIcon type={inputStep.type} />
<Text>{block.title}</Text>
</HStack>
),
accessor: block.id,
})),
accessor: blockId,
}
}),
]
}
const blockContainsInput = (block: Block) => block.steps.some(stepIsInput)
const blockContainsInput = (
typebot: PublicTypebot | Typebot,
blockId: string
) =>
typebot.blocks.byId[blockId].stepIds.some((stepId) =>
stepIsInput(typebot.steps.byId[stepId])
)
const stepIsInput = (step: Step): step is InputStep =>
step.type === StepType.TEXT_INPUT

2
apps/builder/services/results.ts
View File

@ -1,4 +1,4 @@
import { Result } from 'bot-engine'
import { Result } from 'models'
import useSWRInfinite from 'swr/infinite'
import { fetcher, sendRequest } from './utils'
import { stringify } from 'qs'

67
apps/builder/services/typebots.ts
View File

@ -5,9 +5,13 @@ import {
TextStep,
TextInputStep,
PublicTypebot,
} from 'bot-engine'
BackgroundType,
Settings,
StartStep,
Theme,
} from 'models'
import shortId from 'short-uuid'
import { Typebot } from 'bot-engine'
import { Typebot } from 'models'
import useSWR from 'swr'
import { fetcher, sendRequest, toKebabCase } from './utils'
import { deepEqual } from 'fast-equals'
@ -85,13 +89,9 @@ export const patchTypebot = async (id: string, typebot: Partial<Typebot>) =>
})
export const parseNewBlock = ({
type,
totalBlocks,
initialCoordinates,
step,
}: {
step?: Step
type?: StepType
totalBlocks: number
initialCoordinates: { x: number; y: number }
}): Block => {
@ -100,9 +100,7 @@ export const parseNewBlock = ({
id,
title: `Block #${totalBlocks + 1}`,
graphCoordinates: initialCoordinates,
steps: [
step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
],
stepIds: [],
}
}
@ -158,11 +156,58 @@ export const checkIfPublished = (
publicTypebot: PublicTypebot
) =>
deepEqual(typebot.blocks, publicTypebot.blocks) &&
deepEqual(typebot.startBlock, publicTypebot.startBlock) &&
deepEqual(typebot.steps, publicTypebot.steps) &&
typebot.name === publicTypebot.name &&
typebot.publicId === publicTypebot.publicId &&
deepEqual(typebot.settings, publicTypebot.settings) &&
deepEqual(typebot.theme, publicTypebot.theme)
export const parseDefaultPublicId = (name: string, id: string) =>
toKebabCase(`${name}-${id?.slice(0, 5)}`)
toKebabCase(name) + `-${id?.slice(-7)}`
export const parseNewTypebot = ({
ownerId,
folderId,
name,
}: {
ownerId: string
folderId: string | null
name: string
}): Partial<Typebot> => {
const startBlockId = shortId.generate()
const startStepId = shortId.generate()
const startStep: StartStep = {
blockId: startBlockId,
id: startStepId,
label: 'Start',
type: StepType.START,
}
const startBlock: Block = {
id: startBlockId,
title: 'Start',
graphCoordinates: { x: 0, y: 0 },
stepIds: [startStepId],
}
const theme: Theme = {
general: {
font: 'Open Sans',
background: { type: BackgroundType.NONE, content: '#ffffff' },
},
}
const settings: Settings = {
typingEmulation: {
enabled: true,
speed: 300,
maxDelay: 1.5,
},
}
return {
folderId,
name,
ownerId,
blocks: { byId: { [startBlockId]: startBlock }, allIds: [startBlockId] },
steps: { byId: { [startStepId]: startStep }, allIds: [startStepId] },
theme,
settings,
}
}

3
apps/viewer/layouts/TypebotPage.tsx
View File

@ -1,4 +1,5 @@
import { Answer, PublicTypebot, TypebotViewer } from 'bot-engine'
import { TypebotViewer } from 'bot-engine'
import { Answer, PublicTypebot } from 'models'
import React, { useEffect, useState } from 'react'
import { upsertAnswer } from 'services/answer'
import { SEO } from '../components/Seo'

6
apps/viewer/next.config.js
View File

@ -1,6 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withTM = require('next-transpile-modules')(['utils'])
module.exports = withTM({
reactStrictMode: true,
})

3
apps/viewer/package.json
View File

@ -11,6 +11,7 @@
"dependencies": {
"bot-engine": "*",
"db": "*",
"models": "*",
"next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
@ -19,7 +20,7 @@
"devDependencies": {
"@types/node": "^17.0.4",
"@types/react": "^17.0.38",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/eslint-plugin": "^5.9.0",
"eslint": "<8.0.0",
"eslint-config-next": "12.0.7",
"eslint-config-prettier": "^8.3.0",

2
apps/viewer/pages/[publicId].tsx
View File

@ -1,4 +1,4 @@
import { PublicTypebot } from 'bot-engine'
import { PublicTypebot } from 'models'
import { GetServerSideProps, GetServerSidePropsContext } from 'next'
import { TypebotPage, TypebotPageProps } from '../layouts/TypebotPage'
import prisma from '../libs/prisma'

2
apps/viewer/pages/index.tsx
View File

@ -1,4 +1,4 @@
import { PublicTypebot } from 'bot-engine'
import { PublicTypebot } from 'models'
import { GetServerSideProps, GetServerSidePropsContext } from 'next'
import { TypebotPage, TypebotPageProps } from '../layouts/TypebotPage'
import prisma from '../libs/prisma'

2
apps/viewer/services/answer.ts
View File

@ -1,4 +1,4 @@
import { Answer } from 'bot-engine'
import { Answer } from 'models'
import { sendRequest } from 'utils'
export const upsertAnswer = async (answer: Answer & { resultId: string }) => {

12
packages/bot-engine/package.json
View File

@ -8,26 +8,28 @@
"dependencies": {
"db": "*",
"fast-equals": "^2.0.4",
"models": "*",
"react-frame-component": "^5.2.1",
"react-scroll": "^1.8.4",
"react-transition-group": "^4.4.2"
"react-transition-group": "^4.4.2",
"utils": "*"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.1",
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-typescript": "^8.3.0",
"@types/react": "^17.0.38",
"@types/react-scroll": "^1.8.3",
"@types/react-transition-group": "^4.4.4",
"autoprefixer": "^10.4.0",
"autoprefixer": "^10.4.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.5",
"rollup": "^2.62.0",
"rollup": "^2.63.0",
"rollup-plugin-dts": "^4.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"tailwindcss": "^3.0.8",
"tailwindcss": "^3.0.11",
"typescript": "^4.5.4"
},
"peerDependencies": {

12
packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx
View File

@ -1,21 +1,21 @@
import React, { useEffect, useState } from 'react'
import { Block, Step } from '../../models'
import { animateScroll as scroll } from 'react-scroll'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { ChatStep } from './ChatStep'
import { AvatarSideContainer } from './AvatarSideContainer'
import { HostAvatarsContext } from '../../contexts/HostAvatarsContext'
import { Step, Table } from 'models'
type ChatBlockProps = {
block: Block
steps: Table<Step>
onBlockEnd: (nextBlockId?: string) => void
}
export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
export const ChatBlock = ({ steps, onBlockEnd }: ChatBlockProps) => {
const [displayedSteps, setDisplayedSteps] = useState<Step[]>([])
useEffect(() => {
setDisplayedSteps([block.steps[0]])
setDisplayedSteps([steps.byId[steps.allIds[0]]])
}, [])
useEffect(() => {
@ -33,10 +33,10 @@ export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
const currentStep = [...displayedSteps].pop()
if (
currentStep?.target?.blockId ||
displayedSteps.length === block.steps.length
displayedSteps.length === steps.allIds.length
)
return onBlockEnd(currentStep?.target?.blockId)
const nextStep = block.steps[displayedSteps.length]
const nextStep = steps.byId[displayedSteps.length]
if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
}

2
packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import { useAnswers } from '../../../contexts/AnswersContext'
import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
import { Step } from '../../../models'
import { Step } from 'models'
import { isTextInputStep, isTextStep } from '../../../services/utils'
import { GuestBubble } from './bubbles/GuestBubble'
import { HostMessageBubble } from './bubbles/HostMessageBubble'

2
packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/HostMessageBubble.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from 'react'
import { useHostAvatars } from '../../../../contexts/HostAvatarsContext'
import { useTypebot } from '../../../../contexts/TypebotContext'
import { StepType, TextStep } from '../../../../models'
import { StepType, TextStep } from 'models'
import { computeTypingTimeout } from '../../../../services/chat'
import { TypingContent } from './TypingContent'

13
packages/bot-engine/src/components/ConversationContainer.tsx
View File

@ -1,12 +1,12 @@
import React, { useEffect, useRef, useState } from 'react'
import { Answer, PublicTypebot } from '..'
import { Block } from '..'
import { ChatBlock } from './ChatBlock/ChatBlock'
import { useFrame } from 'react-frame-component'
import { setCssVariablesValue } from '../services/theme'
import { useAnswers } from '../contexts/AnswersContext'
import { deepEqual } from 'fast-equals'
import { Answer, Block, PublicTypebot } from 'models'
import { filterTable } from 'utils'
type Props = {
typebot: PublicTypebot
@ -28,14 +28,17 @@ export const ConversationContainer = ({
const displayNextBlock = (blockId?: string) => {
if (!blockId) return onCompleted()
const nextBlock = typebot.blocks.find((b) => b.id === blockId)
const nextBlock = typebot.blocks.byId[blockId]
if (!nextBlock) return onCompleted()
onNewBlockVisible(blockId)
setDisplayedBlocks([...displayedBlocks, nextBlock])
}
useEffect(() => {
const firstBlockId = typebot.startBlock.steps[0].target?.blockId
const blocks = typebot.blocks
const firstBlockId =
typebot.steps.byId[blocks.byId[blocks.allIds[0]].stepIds[0]].target
?.blockId
if (firstBlockId) displayNextBlock(firstBlockId)
}, [])
@ -58,7 +61,7 @@ export const ConversationContainer = ({
{displayedBlocks.map((block, idx) => (
<ChatBlock
key={block.id + idx}
block={block}
steps={filterTable(block.stepIds, typebot.steps)}
onBlockEnd={displayNextBlock}
/>
))}

2
packages/bot-engine/src/components/TypebotViewer.tsx
View File

@ -1,11 +1,11 @@
import React, { useMemo } from 'react'
import { Answer, BackgroundType, PublicTypebot } from '../models'
import { TypebotContext } from '../contexts/TypebotContext'
import Frame from 'react-frame-component'
//@ts-ignore
import style from '../assets/style.css'
import { ConversationContainer } from './ConversationContainer'
import { AnswersContext } from '../contexts/AnswersContext'
import { Answer, BackgroundType, PublicTypebot } from 'models'
export type TypebotViewerProps = {
typebot: PublicTypebot

2
packages/bot-engine/src/contexts/AnswersContext.tsx
View File

@ -1,4 +1,4 @@
import { Answer } from '../models'
import { Answer } from 'models'
import React, { createContext, ReactNode, useContext, useState } from 'react'
const answersContext = createContext<{

2
packages/bot-engine/src/contexts/TypebotContext.tsx
View File

@ -1,5 +1,5 @@
import { PublicTypebot } from 'models'
import React, { createContext, ReactNode, useContext } from 'react'
import { PublicTypebot } from '../models/publicTypebot'
const typebotContext = createContext<{
typebot: PublicTypebot

2
packages/bot-engine/src/index.ts
View File

@ -1,3 +1 @@
export * from './components/TypebotViewer'
export * from './models'
export { parseNewTypebot } from './services/utils'

12
packages/bot-engine/src/models/publicTypebot.ts
View File

@ -1,12 +0,0 @@
import { PublicTypebot as PublicTypebotFromPrisma } from 'db'
import { Block, Settings, StartBlock, Theme } from '.'
export type PublicTypebot = Omit<
PublicTypebotFromPrisma,
'blocks' | 'startBlock' | 'theme' | 'settings'
> & {
blocks: Block[]
startBlock: StartBlock
theme: Theme
settings: Settings
}

87
packages/bot-engine/src/models/typebot.ts
View File

@ -1,87 +0,0 @@
import { Typebot as TypebotFromPrisma } from 'db'
export type Typebot = Omit<
TypebotFromPrisma,
'blocks' | 'startBlock' | 'theme' | 'settings'
> & {
blocks: Block[]
startBlock: StartBlock
theme: Theme
settings: Settings
}
export type StartBlock = {
id: `start-block`
graphCoordinates: {
x: number
y: number
}
title: string
steps: [StartStep]
}
export type StartStep = {
id: 'start-step'
blockId: 'start-block'
target?: Target
type: StepType.START
label: string
}
export type Block = {
id: string
title: string
steps: Step[]
graphCoordinates: {
x: number
y: number
}
}
export enum StepType {
START = 'start',
TEXT = 'text',
TEXT_INPUT = 'text input',
}
export type Target = { blockId: string; stepId?: string }
export type Step = BubbleStep | InputStep
export type BubbleStep = TextStep
export type InputStep = TextInputStep
export type StepBase = { id: string; blockId: string; target?: Target }
export type TextStep = StepBase & {
type: StepType.TEXT
content: { html: string; richText: unknown[]; plainText: string }
}
export type TextInputStep = StepBase & {
type: StepType.TEXT_INPUT
}
export type Theme = {
general: {
font: string
background: Background
}
}
export enum BackgroundType {
COLOR = 'Color',
IMAGE = 'Image',
NONE = 'None',
}
export type Background = {
type: BackgroundType
content: string
}
export type Settings = {
typingEmulation: TypingEmulationSettings
}
export type TypingEmulationSettings = {
enabled: boolean
speed: number
maxDelay: number
}

2
packages/bot-engine/src/services/chat.ts
View File

@ -1,4 +1,4 @@
import { TypingEmulationSettings } from '../models'
import { TypingEmulationSettings } from 'models'
export const computeTypingTimeout = (
bubbleContent: string,

2
packages/bot-engine/src/services/theme.ts
View File

@ -1,4 +1,4 @@
import { BackgroundType, Theme } from '../models'
import { BackgroundType, Theme } from 'models'
const cssVariableNames = {
container: {

50
packages/bot-engine/src/services/utils.ts
View File

@ -1,55 +1,7 @@
import { Prisma } from 'db'
import {
Step,
TextStep,
StepType,
TextInputStep,
BackgroundType,
Settings,
StartBlock,
Theme,
} from '../models'
import { Step, TextStep, StepType, TextInputStep } from 'models'
export const isTextStep = (step: Step): step is TextStep =>
step.type === StepType.TEXT
export const isTextInputStep = (step: Step): step is TextInputStep =>
step.type === StepType.TEXT_INPUT
export const parseNewTypebot = ({
ownerId,
folderId,
name,
}: {
ownerId: string
folderId: string | null
name: string
}): Prisma.TypebotUncheckedCreateInput => {
const startBlock: StartBlock = {
id: 'start-block',
title: 'Start',
graphCoordinates: { x: 0, y: 0 },
steps: [
{
id: 'start-step',
blockId: 'start-block',
label: 'Form starts here',
type: StepType.START,
},
],
}
const theme: Theme = {
general: {
font: 'Open Sans',
background: { type: BackgroundType.NONE, content: '#ffffff' },
},
}
const settings: Settings = {
typingEmulation: {
enabled: true,
speed: 300,
maxDelay: 1.5,
},
}
return { folderId, name, ownerId, startBlock, theme, settings }
}

22
packages/db/prisma/migrations/20220106083902_normalize_data/migration.sql Normal file
View File

@ -0,0 +1,22 @@
/*
Warnings:
- You are about to drop the column `startBlock` on the `PublicTypebot` table. All the data in the column will be lost.
- You are about to drop the column `startBlock` on the `Typebot` table. All the data in the column will be lost.
- Added the required column `steps` to the `PublicTypebot` table without a default value. This is not possible if the table is not empty.
- Changed the type of `blocks` on the `PublicTypebot` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
- Added the required column `steps` to the `Typebot` table without a default value. This is not possible if the table is not empty.
- Changed the type of `blocks` on the `Typebot` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
*/
-- AlterTable
ALTER TABLE "PublicTypebot" DROP COLUMN "startBlock",
ADD COLUMN "steps" JSONB NOT NULL,
DROP COLUMN "blocks",
ADD COLUMN "blocks" JSONB NOT NULL;
-- AlterTable
ALTER TABLE "Typebot" DROP COLUMN "startBlock",
ADD COLUMN "steps" JSONB NOT NULL,
DROP COLUMN "blocks",
ADD COLUMN "blocks" JSONB NOT NULL;

8
packages/db/prisma/schema.prisma
View File

@ -90,8 +90,8 @@ model Typebot {
results Result[]
folderId String?
folder DashboardFolder? @relation(fields: [folderId], references: [id])
blocks Json[]
startBlock Json
blocks Json
steps Json
theme Json
settings Json
publicId String? @unique
@ -102,8 +102,8 @@ model PublicTypebot {
typebotId String @unique
typebot Typebot @relation(fields: [typebotId], references: [id], onDelete: Cascade)
name String
blocks Json[]
startBlock Json
blocks Json
steps Json
theme Json
settings Json
publicId String? @unique

7
packages/models/.gitignore vendored Normal file
View File

@ -0,0 +1,7 @@
node_modules
# Keep environment variables out of version control
.env
dist
types
yarn-error.log

19
packages/models/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "models",
"version": "1.0.0",
"main": "dist/index.js",
"types": "types/index.d.ts",
"license": "AGPL-3.0-or-later",
"private": true,
"devDependencies": {
"typescript": "^4.5.4"
},
"dependencies": {
"next": "^12.0.7",
"db": "*"
},
"scripts": {
"build": "tsc",
"dev": "tsc --watch"
}
}

0
packages/bot-engine/src/models/answer.ts → packages/models/src/answer.ts
View File

1
packages/bot-engine/src/models/index.ts → packages/models/src/index.ts
View File

@ -2,3 +2,4 @@ export * from './typebot'
export * from './publicTypebot'
export * from './result'
export * from './answer'
export * from './utils'

13
packages/models/src/publicTypebot.ts Normal file
View File

@ -0,0 +1,13 @@
import { PublicTypebot as PublicTypebotFromPrisma } from 'db'
import { Block, Settings, Step, Theme } from './typebot'
import { Table } from './utils'
export type PublicTypebot = Omit<
PublicTypebotFromPrisma,
'blocks' | 'startBlock' | 'theme' | 'settings' | 'steps'
> & {
blocks: Table<Block>
steps: Table<Step>
theme: Theme
settings: Settings
}

0
packages/bot-engine/src/models/result.ts → packages/models/src/result.ts
View File

4
packages/models/src/typebot/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from './typebot'
export * from './steps'
export * from './theme'
export * from './settings'

Some files were not shown because too many files have changed in this diff Show More