blsmedia/bot
2
0
Fork 0
Code Activity

🚀 Init preview and typebot cotext in editor

Browse Source
This commit is contained in:
Baptiste Arnaud
2021-12-22 14:59:07 +01:00
parent a54e42f255
commit b7cdc0d14a
87 changed files with 4431 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/builder/assets/icons.tsx
View File

@ -7,6 +7,9 @@ const featherIconsBaseProps: IconProps = {
strokeLinecap: 'round',
strokeLinejoin: 'round',
}
// 99% of these icons are from Feather icons (https://feathericons.com/)
export const SettingsIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<circle cx="12" cy="12" r="3"></circle>
@ -102,3 +105,59 @@ export const FlagIcon = (props: IconProps) => (
<line x1="4" y1="22" x2="4" y2="15"></line>
</Icon>
)
export const BoldIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
<path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
</Icon>
)
export const ItalicIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<line x1="19" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="20" x2="5" y2="20"></line>
<line x1="15" y1="4" x2="9" y2="20"></line>
</Icon>
)
export const UnderlineIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path>
<line x1="4" y1="21" x2="20" y2="21"></line>
</Icon>
)
export const LinkIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</Icon>
)
export const SaveIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
<polyline points="17 21 17 13 7 13 7 21"></polyline>
<polyline points="7 3 7 8 15 8"></polyline>
</Icon>
)
export const CheckIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<polyline points="20 6 9 17 4 12"></polyline>
</Icon>
)
export const ChatIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</Icon>
)
export const TrashIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
</Icon>
)

31
apps/builder/assets/styles/plate.css Normal file
View File

@ -0,0 +1,31 @@
.slate-bold {
font-weight: bold;
}
.slate-italic {
font-style: oblique;
}
.slate-underline {
text-decoration: underline;
}
.slate-ToolbarButton-active {
color: blue !important;
}
.slate-ToolbarButton-active > svg {
stroke-width: 2px;
}
.slate-ToolbarButton {
color: gray;
}
.slate-a {
color: blue !important;
text-decoration: underline;
}
.slate-html-container > div {
min-height: 24px;
}

3
apps/builder/components/auth/SocialLoginButtons.tsx
View File

@ -16,7 +16,6 @@ export const SocialLoginButtons = () => {
<Stack>
<Button
leftIcon={<GithubLogo />}
colorScheme="gray"
onClick={handleGitHubClick}
data-testid="github"
isLoading={['loading', 'authenticated'].includes(status)}
@ -25,7 +24,6 @@ export const SocialLoginButtons = () => {
</Button>
<Button
leftIcon={<GoogleLogo />}
colorScheme="gray"
onClick={handleGoogleClick}
data-testid="google"
isLoading={['loading', 'authenticated'].includes(status)}
@ -34,7 +32,6 @@ export const SocialLoginButtons = () => {
</Button>
<Button
leftIcon={<FacebookLogo />}
colorScheme="gray"
onClick={handleFacebookClick}
data-testid="facebook"
isLoading={['loading', 'authenticated'].includes(status)}

31
apps/builder/components/board/Board.tsx
View File

@ -2,13 +2,26 @@ import { Flex } from '@chakra-ui/react'
import React from 'react'
import Graph from './graph/Graph'
import { DndContext } from 'contexts/DndContext'
import StepTypesList from './StepTypesList'
import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
import { StepTypesList } from './StepTypesList'
import { PreviewDrawer } from './preview/PreviewDrawer'
import { RightPanel, useEditor } from 'contexts/EditorContext'
export const Board = () => (
<Flex flex="1" pos="relative" bgColor="gray.50">
<DndContext>
<StepTypesList />
<Graph />
</DndContext>
</Flex>
)
export const Board = () => {
const { rightPanel } = useEditor()
return (
<Flex
flex="1"
pos="relative"
bgColor="gray.50"
h={`calc(100vh - ${headerHeight}px)`}
marginTop={`${headerHeight}px`}
>
<DndContext>
<StepTypesList />
<Graph />
{rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
</DndContext>
</Flex>
)
}

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

@ -29,7 +29,6 @@ export const StepCard = ({
rounded="lg"
flex="1"
cursor={'grab'}
colorScheme="gray"
opacity={isMouseDown ? '0.4' : '1'}
onMouseDown={handleMouseDown}
>
@ -54,7 +53,6 @@ export const StepCardOverlay = ({
borderWidth="1px"
rounded="lg"
cursor={'grab'}
colorScheme="gray"
w="147px"
pos="fixed"
top="0"

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

@ -1,4 +1,4 @@
import { CalendarIcon, FlagIcon, ImageIcon, TextIcon } from 'assets/icons'
import { ChatIcon, FlagIcon, TextIcon } from 'assets/icons'
import { StepType } from 'bot-engine'
import React from 'react'
@ -6,15 +6,12 @@ type StepIconProps = { type: StepType }
export const StepIcon = ({ type }: StepIconProps) => {
switch (type) {
case StepType.TEXT: {
return <ChatIcon />
}
case StepType.TEXT: {
return <TextIcon />
}
case StepType.IMAGE: {
return <ImageIcon />
}
case StepType.DATE_PICKER: {
return <CalendarIcon />
}
case StepType.START: {
return <FlagIcon />
}

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

@ -9,11 +9,8 @@ export const StepLabel = ({ type }: Props) => {
case StepType.TEXT: {
return <Text>Text</Text>
}
case StepType.IMAGE: {
return <Text>Image</Text>
}
case StepType.DATE_PICKER: {
return <Text>Date</Text>
case StepType.TEXT_INPUT: {
return <Text>Text</Text>
}
default: {
return <></>

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

@ -14,8 +14,8 @@ export const stepListItems: {
bubbles: { type: StepType }[]
inputs: { type: StepType }[]
} = {
bubbles: [{ type: StepType.TEXT }, { type: StepType.IMAGE }],
inputs: [{ type: StepType.DATE_PICKER }],
bubbles: [{ type: StepType.TEXT }],
inputs: [{ type: StepType.TEXT_INPUT }],
}
export const StepTypesList = () => {

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

@ -1 +1 @@
export { StepTypesList as default } from './StepTypesList'
export { StepTypesList } from './StepTypesList'

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

@ -5,27 +5,31 @@ import {
Stack,
useEventListener,
} from '@chakra-ui/react'
import React, { useEffect, useRef, useState } from 'react'
import React, { useEffect, useMemo, useState } from 'react'
import { Block, StartBlock } from 'bot-engine'
import { useGraph } from 'contexts/GraphContext'
import { useDnd } from 'contexts/DndContext'
import { StepsList } from './StepsList'
import { isNotDefined } from 'services/utils'
import { useTypebot } from 'contexts/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
import { BlockNodeContextMenu } from './BlockNodeContextMenu'
export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
const {
updateBlockPosition,
addNewStepToBlock,
connectingIds,
setConnectingIds,
} = useGraph()
const { connectingIds, setConnectingIds, previewingIds } = useGraph()
const { updateBlockPosition, addStepToBlock } = useTypebot()
const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =
useDnd()
const blockRef = useRef<HTMLDivElement | null>(null)
const [isMouseDown, setIsMouseDown] = useState(false)
const [titleValue, setTitleValue] = useState(block.title)
const [showSortPlaceholders, setShowSortPlaceholders] = useState(false)
const [isConnecting, setIsConnecting] = useState(false)
const isPreviewing = useMemo(
() =>
previewingIds.sourceId === block.id ||
previewingIds.targetId === block.id,
[block.id, previewingIds.sourceId, previewingIds.targetId]
)
useEffect(() => {
setIsConnecting(
@ -69,44 +73,56 @@ export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
const handleStepDrop = (index: number) => {
setShowSortPlaceholders(false)
if (draggedStepType) {
addNewStepToBlock(block.id, draggedStepType, index)
addStepToBlock(block.id, draggedStepType, index)
setDraggedStepType(undefined)
}
if (draggedStep) {
addNewStepToBlock(block.id, draggedStep, index)
addStepToBlock(block.id, draggedStep, index)
setDraggedStep(undefined)
}
}
return (
<Stack
p="4"
rounded="lg"
bgColor="blue.50"
borderWidth="2px"
borderColor={isConnecting ? '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}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
ref={blockRef}
<ContextMenu<HTMLDivElement>
renderMenu={() => <BlockNodeContextMenu blockId={block.id} />}
>
<Editable value={titleValue} onChange={handleTitleChange}>
<EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
<EditableInput minW="0" px="1" />
</Editable>
<StepsList
blockId={block.id}
steps={block.steps}
showSortPlaceholders={showSortPlaceholders}
onMouseUp={handleStepDrop}
/>
</Stack>
{(ref, isOpened) => (
<Stack
ref={ref}
p="4"
rounded="lg"
bgColor="blue.50"
borderWidth="2px"
borderColor={
isConnecting || isOpened || 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}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Editable value={titleValue} onChange={handleTitleChange}>
<EditablePreview
_hover={{ bgColor: 'blue.100' }}
px="1"
userSelect={'none'}
/>
<EditableInput minW="0" px="1" />
</Editable>
<StepsList
blockId={block.id}
steps={block.steps}
showSortPlaceholders={showSortPlaceholders}
onMouseUp={handleStepDrop}
/>
</Stack>
)}
</ContextMenu>
)
}

18
apps/builder/components/board/graph/BlockNode/BlockNodeContextMenu.tsx Normal file
View File

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

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

@ -5,15 +5,21 @@ import {
Stack,
useEventListener,
} from '@chakra-ui/react'
import React, { useState } from 'react'
import React, { useMemo, useState } from 'react'
import { StartBlock } from 'bot-engine'
import { useGraph } from 'contexts/GraphContext'
import { StepNode } from './StepNode'
import { useTypebot } from 'contexts/TypebotContext'
import { useGraph } from 'contexts/GraphContext'
export const StartBlockNode = ({ block }: { block: StartBlock }) => {
const { setStartBlock } = useGraph()
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)
@ -28,15 +34,11 @@ export const StartBlockNode = ({ block }: { block: StartBlock }) => {
if (!isMouseDown) return
const { movementX, movementY } = event
setStartBlock({
...block,
graphCoordinates: {
x: block.graphCoordinates.x + movementX,
y: block.graphCoordinates.y + movementY,
},
updateBlockPosition(block.id, {
x: block.graphCoordinates.x + movementX,
y: block.graphCoordinates.y + movementY,
})
}
useEventListener('mousemove', handleMouseMove)
return (
@ -45,7 +47,7 @@ export const StartBlockNode = ({ block }: { block: StartBlock }) => {
rounded="lg"
bgColor="blue.50"
borderWidth="2px"
borderColor="gray.400"
borderColor={isPreviewing ? 'blue.400' : 'gray.400'}
minW="300px"
transition="border 300ms"
pos="absolute"
@ -57,7 +59,11 @@ export const StartBlockNode = ({ block }: { block: StartBlock }) => {
spacing="14px"
>
<Editable value={titleValue} onChange={handleTitleChange}>
<EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
<EditablePreview
_hover={{ bgColor: 'blue.100' }}
px="1"
userSelect={'none'}
/>
<EditableInput minW="0" px="1" />
</Editable>
<StepNode step={block.steps[0]} isConnectable={true} />

24
apps/builder/components/board/graph/BlockNode/StepNode/RightClickMenu.tsx Normal file
View File

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

31
apps/builder/components/board/graph/BlockNode/StepNode/StepContent.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Flex, Text } from '@chakra-ui/react'
import { Step, StartStep, StepType } from 'bot-engine'
export const StepContent = (props: Step | StartStep) => {
switch (props.type) {
case StepType.TEXT: {
return (
<Flex
flexDir={'column'}
opacity={props.content.html === '' ? '0.5' : '1'}
className="slate-html-container"
dangerouslySetInnerHTML={{
__html:
props.content.html === ''
? `<p>Click to edit...</p>`
: props.content.html,
}}
></Flex>
)
}
case StepType.TEXT_INPUT: {
return <Text color={'gray.500'}>Type your answer...</Text>
}
case StepType.START: {
return <Text>{props.label}</Text>
}
default: {
return <Text>No input</Text>
}
}
}

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

@ -1,10 +1,16 @@
import { Box, Flex, HStack, StackProps, Text } from '@chakra-ui/react'
import React, { useEffect, useMemo, useRef, useState } from 'react'
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 { SourceEndpoint } from './SourceEndpoint'
import { useGraph } from 'contexts/GraphContext'
import { StepIcon } from 'components/board/StepTypesList/StepIcon'
import { isDefined } from 'services/utils'
import { Coordinates } from '@dnd-kit/core/dist/types'
import { TextEditor } from './TextEditor/TextEditor'
import { StepContent } from './StepContent'
import { useTypebot } from 'contexts/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
import { StepNodeContextMenu } from './RightClickMenu'
export const StepNode = ({
step,
@ -17,17 +23,18 @@ export const StepNode = ({
isConnectable: boolean
onMouseMoveBottomOfElement?: () => void
onMouseMoveTopOfElement?: () => void
onMouseDown?: (e: React.MouseEvent, step: Step) => void
onMouseDown?: (
stepNodePosition: { absolute: Coordinates; relative: Coordinates },
step: Step
) => void
}) => {
const stepRef = useRef<HTMLDivElement | null>(null)
const {
setConnectingIds,
removeStepFromBlock,
blocks,
connectingIds,
startBlock,
} = useGraph()
const { setConnectingIds, connectingIds } = useGraph()
const { removeStepFromBlock, typebot } = useTypebot()
const { blocks, startBlock } = typebot ?? {}
const [isConnecting, setIsConnecting] = useState(false)
const [mouseDownEvent, setMouseDownEvent] =
useState<{ absolute: Coordinates; relative: Coordinates }>()
const [isEditing, setIsEditing] = useState<boolean | undefined>(undefined)
useEffect(() => {
setIsConnecting(
@ -59,12 +66,38 @@ export const StepNode = ({
const handleMouseDown = (e: React.MouseEvent) => {
if (!onMouseDown) return
e.stopPropagation()
onMouseDown(e, step as Step)
removeStepFromBlock(step.blockId, step.id)
const element = e.currentTarget as HTMLDivElement
const rect = element.getBoundingClientRect()
const relativeX = e.clientX - rect.left
const relativeY = e.clientY - rect.top
setMouseDownEvent({
absolute: { x: e.clientX + relativeX, y: e.clientY + relativeY },
relative: { x: relativeX, y: relativeY },
})
}
const handleGlobalMouseUp = () => {
setMouseDownEvent(undefined)
}
useEventListener('mouseup', handleGlobalMouseUp)
const handleMouseUp = () => {
if (mouseDownEvent) {
setIsEditing(true)
}
}
const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
const isMovingAndIsMouseDown =
mouseDownEvent &&
onMouseDown &&
(event.movementX > 0 || event.movementY > 0)
if (isMovingAndIsMouseDown) {
onMouseDown(mouseDownEvent, step as Step)
removeStepFromBlock(step.blockId, step.id)
setMouseDownEvent(undefined)
}
const element = event.currentTarget as HTMLDivElement
const rect = element.getBoundingClientRect()
const y = event.clientY - rect.top
@ -72,8 +105,12 @@ export const StepNode = ({
else onMouseMoveTopOfElement()
}
const handleCloseEditor = () => {
setIsEditing(false)
}
const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
const currentBlock = [startBlock, ...blocks].find(
const currentBlock = [startBlock, ...(blocks ?? [])].find(
(b) => b?.id === step.blockId
)
const isDragginConnectorFromCurrentBlock =
@ -83,7 +120,7 @@ export const StepNode = ({
? connectingIds.target?.blockId
: step.target?.blockId
const targetedBlock = targetBlockId
? blocks.find((b) => b.id === targetBlockId)
? (blocks ?? []).find((b) => b.id === targetBlockId)
: undefined
return targetedBlock
? targetedBlock.graphCoordinates.x <
@ -100,106 +137,74 @@ export const StepNode = ({
startBlock,
])
return (
<Flex
pos="relative"
ref={stepRef}
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
return step.type === StepType.TEXT &&
(isEditing ||
(isEditing === undefined && step.content.plainText === '')) ? (
<TextEditor
ids={{ stepId: step.id, blockId: step.blockId }}
initialValue={step.content.richText}
onClose={handleCloseEditor}
/>
) : (
<ContextMenu<HTMLDivElement>
renderMenu={() => (
<StepNodeContextMenu blockId={step.blockId} stepId={step.id} />
)}
>
{connectedStubPosition === 'left' && (
<Box
h="2px"
pos="absolute"
left="-18px"
top="25px"
w="18px"
bgColor="blue.500"
/>
)}
<HStack
flex="1"
userSelect="none"
p="3"
borderWidth="2px"
borderColor={isConnecting ? 'blue.400' : 'gray.400'}
rounded="lg"
cursor={'grab'}
bgColor="white"
>
<StepIcon type={step.type} />
<StepContent {...step} />
{isConnectable && (
<SourceEndpoint
onConnectionDragStart={handleConnectionDragStart}
pos="absolute"
right="20px"
/>
)}
</HStack>
{(ref, isOpened) => (
<Flex
pos="relative"
ref={ref}
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onMouseUp={handleMouseUp}
>
{connectedStubPosition === 'left' && (
<Box
h="2px"
pos="absolute"
left="-18px"
top="25px"
w="18px"
bgColor="blue.500"
/>
)}
<HStack
flex="1"
userSelect="none"
p="3"
borderWidth="2px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.400'}
rounded="lg"
cursor={'pointer'}
bgColor="white"
>
<StepIcon type={step.type} />
<StepContent {...step} />
{isConnectable && (
<SourceEndpoint
onConnectionDragStart={handleConnectionDragStart}
pos="absolute"
right="20px"
/>
)}
</HStack>
{isDefined(connectedStubPosition) && (
<Box
h="2px"
pos="absolute"
right={connectedStubPosition === 'left' ? undefined : '-18px'}
left={connectedStubPosition === 'left' ? '-18px' : undefined}
top="25px"
w="18px"
bgColor="gray.500"
/>
{isDefined(connectedStubPosition) && (
<Box
h="2px"
pos="absolute"
right={connectedStubPosition === 'left' ? undefined : '-18px'}
left={connectedStubPosition === 'left' ? '-18px' : undefined}
top="25px"
w="18px"
bgColor="gray.500"
/>
)}
</Flex>
)}
</Flex>
)
}
export const StepContent = (props: Step | StartStep) => {
switch (props.type) {
case StepType.TEXT: {
return (
<Text opacity={props.content === '' ? '0.5' : '1'}>
{props.content === '' ? 'Type text...' : props.content}
</Text>
)
}
case StepType.DATE_PICKER: {
return (
<Text opacity={props.content === '' ? '0.5' : '1'}>
{props.content === '' ? 'Pick a date...' : props.content}
</Text>
)
}
case StepType.START: {
return <Text>{props.label}</Text>
}
default: {
return <Text>No input</Text>
}
}
}
export const StepNodeOverlay = ({
step,
...props
}: { step: Step } & StackProps) => {
return (
<HStack
p="3"
borderWidth="1px"
rounded="lg"
bgColor="white"
cursor={'grab'}
pos="fixed"
top="0"
left="0"
w="264px"
pointerEvents="none"
{...props}
>
<StepIcon type={step.type} />
<StepContent {...step} />
</HStack>
</ContextMenu>
)
}

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

@ -0,0 +1,28 @@
import { StackProps, HStack } from '@chakra-ui/react'
import { Step } from 'bot-engine'
import { StepIcon } from 'components/board/StepTypesList/StepIcon'
import { StepContent } from './StepContent'
export const StepNodeOverlay = ({
step,
...props
}: { step: Step } & StackProps) => {
return (
<HStack
p="3"
borderWidth="1px"
rounded="lg"
bgColor="white"
cursor={'grab'}
pos="fixed"
top="0"
left="0"
w="264px"
pointerEvents="none"
{...props}
>
<StepIcon type={step.type} />
<StepContent {...step} />
</HStack>
)
}

97
apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/TextEditor.tsx Normal file
View File

@ -0,0 +1,97 @@
import { Stack, useOutsideClick } from '@chakra-ui/react'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import {
Plate,
selectEditor,
serializeHtml,
TDescendant,
withPlate,
} from '@udecode/plate-core'
import { editorStyle, platePlugins } from 'libs/plate'
import { useDebounce } from 'use-debounce'
import { useTypebot } from 'contexts/TypebotContext'
import { createEditor } from 'slate'
import { ToolBar } from './ToolBar'
import { parseHtmlStringToPlainText } from 'services/utils'
type TextEditorProps = {
ids: { stepId: string; blockId: string }
initialValue: TDescendant[]
onClose: () => void
}
export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
const editor = useMemo(
() => withPlate(createEditor(), { id: ids.stepId, plugins: platePlugins }),
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
)
const { updateStep } = useTypebot()
const [value, setValue] = useState(initialValue)
const [debouncedValue] = useDebounce(value, 500)
const textEditorRef = useRef<HTMLDivElement>(null)
useOutsideClick({
ref: textEditorRef,
handler: () => {
save(value)
onClose()
},
})
useEffect(() => {
save(debouncedValue)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedValue])
const save = (value: unknown[]) => {
console.log('SAVE', value)
if (value.length === 0) return
const html = serializeHtml(editor, {
nodes: value,
})
updateStep(ids, {
content: {
html,
richText: value,
plainText: parseHtmlStringToPlainText(html),
},
})
}
const handleMouseDown = (e: React.MouseEvent) => {
e.stopPropagation()
}
return (
<Stack
flex="1"
ref={textEditorRef}
borderWidth="2px"
borderColor="blue.500"
rounded="md"
onMouseDown={handleMouseDown}
spacing={0}
>
<ToolBar />
<Plate
id={ids.stepId}
editableProps={{
style: editorStyle,
autoFocus: true,
onFocus: () => {
if (editor.children.length === 0) return
selectEditor(editor, {
edge: 'end',
})
},
}}
initialValue={
initialValue.length === 0
? [{ type: 'p', children: [{ text: '' }] }]
: initialValue
}
onChange={setValue}
editor={editor}
/>
</Stack>
)
}

40
apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/ToolBar.tsx Normal file
View File

@ -0,0 +1,40 @@
import { StackProps, HStack, Button } from '@chakra-ui/react'
import {
MARK_BOLD,
MARK_ITALIC,
MARK_UNDERLINE,
} from '@udecode/plate-basic-marks'
import { usePlateEditorRef, getPluginType } from '@udecode/plate-core'
import { LinkToolbarButton } from '@udecode/plate-ui-link'
import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
import { BoldIcon, ItalicIcon, UnderlineIcon, LinkIcon } from 'assets/icons'
export const ToolBar = (props: StackProps) => {
const editor = usePlateEditorRef()
return (
<HStack
bgColor={'white'}
borderTopRadius="md"
p={2}
w="full"
boxSizing="border-box"
borderBottomWidth={1}
{...props}
>
<Button size="sm">Variables</Button>
<MarkToolbarButton
type={getPluginType(editor, MARK_BOLD)}
icon={<BoldIcon />}
/>
<MarkToolbarButton
type={getPluginType(editor, MARK_ITALIC)}
icon={<ItalicIcon />}
/>
<MarkToolbarButton
type={getPluginType(editor, MARK_UNDERLINE)}
icon={<UnderlineIcon />}
/>
<LinkToolbarButton icon={<LinkIcon />} />
</HStack>
)
}

1
apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/index.tsx Normal file
View File

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

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

@ -1 +1,2 @@
export { StepNode, StepNodeOverlay } from './StepNode'
export { StepNode } from './StepNode'
export { StepNodeOverlay } from './StepNodeOverlay'

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

@ -1,6 +1,7 @@
import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
import { StartStep, Step } from 'bot-engine'
import { useDnd } from 'contexts/DndContext'
import { Coordinates } from 'contexts/GraphContext'
import { useState } from 'react'
import { StepNode, StepNodeOverlay } from './StepNode'
@ -51,13 +52,12 @@ export const StepsList = ({
onMouseUp(expandedPlaceholderIndex)
}
const handleStepMouseDown = (e: React.MouseEvent, step: Step) => {
const element = e.currentTarget as HTMLDivElement
const rect = element.getBoundingClientRect()
const relativeX = e.clientX - rect.left
const relativeY = e.clientY - rect.top
setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
setRelativeCoordinates({ x: relativeX, y: relativeY })
const handleStepMouseDown = (
{ absolute, relative }: { absolute: Coordinates; relative: Coordinates },
step: Step
) => {
setPosition(absolute)
setRelativeCoordinates(relative)
setDraggedStep(step)
}

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

@ -1,6 +1,7 @@
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,
firstStepOffsetY,
@ -8,6 +9,7 @@ import {
stubLength,
useGraph,
} from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import React, { useMemo, useState } from 'react'
import {
computeFlowChartConnectorPath,
@ -16,18 +18,16 @@ import {
import { roundCorners } from 'svg-round-corners'
export const DrawingEdge = () => {
const {
graphPosition,
setConnectingIds,
blocks,
connectingIds,
addTarget,
startBlock,
} = useGraph()
const { graphPosition, setConnectingIds, connectingIds } = useGraph()
const { typebot, updateTarget } = useTypebot()
const { startBlock, blocks } = typebot ?? {}
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
const sourceBlock = useMemo(
() => [startBlock, ...blocks].find((b) => b?.id === connectingIds?.blockId),
() =>
[startBlock, ...(blocks ?? [])].find(
(b) => b?.id === connectingIds?.blockId
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[connectingIds]
)
@ -35,7 +35,7 @@ export const DrawingEdge = () => {
const path = useMemo(() => {
if (!sourceBlock) return ``
if (connectingIds?.target) {
const targetedBlock = blocks.find(
const targetedBlock = blocks?.find(
(b) => b.id === connectingIds.target?.blockId
) as Block
const targetedStepIndex = connectingIds.target.stepId
@ -62,12 +62,12 @@ export const DrawingEdge = () => {
const handleMouseMove = (e: MouseEvent) => {
setMousePosition({
x: e.clientX - graphPosition.x,
y: e.clientY - graphPosition.y,
y: e.clientY - graphPosition.y - headerHeight,
})
}
useEventListener('mousemove', handleMouseMove)
useEventListener('mouseup', () => {
if (connectingIds?.target) addTarget(connectingIds)
if (connectingIds?.target) updateTarget(connectingIds)
setConnectingIds(null)
})
@ -117,8 +117,8 @@ const computeThreeSegments = (
const segments = []
const firstSegmentX =
sourceType === 'right'
? sourcePosition.x + stubLength
: sourcePosition.x - stubLength
? sourcePosition.x + stubLength + 40
: sourcePosition.x - stubLength - 40
segments.push(`L${firstSegmentX},${sourcePosition.y}`)
segments.push(`L${firstSegmentX},${targetPosition.y}`)
segments.push(`L${targetPosition.x},${targetPosition.y}`)

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

@ -1,5 +1,6 @@
import { Block, StartStep, Step, Target } from 'bot-engine'
import { Coordinates, useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import React, { useMemo } from 'react'
import {
getAnchorsPosition,
@ -18,17 +19,32 @@ export type StepWithTarget = Omit<Step | StartStep, 'target'> & {
}
export const Edge = ({ step }: { step: StepWithTarget }) => {
const { blocks, startBlock } = useGraph()
const { typebot } = useTypebot()
const { previewingIds } = useGraph()
const isPreviewing = useMemo(
() =>
previewingIds.sourceId === step.blockId &&
previewingIds.targetId === step.target.blockId,
[
previewingIds.sourceId,
previewingIds.targetId,
step.blockId,
step.target.blockId,
]
)
const { blocks, startBlock } = typebot ?? {}
const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
const targetBlock = blocks.find(
const targetBlock = blocks?.find(
(b) => b?.id === step.target.blockId
) as Block
const targetStepIndex = step.target.stepId
? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
: undefined
return {
sourceBlock: [startBlock, ...blocks].find((b) => b?.id === step.blockId),
sourceBlock: [startBlock, ...(blocks ?? [])].find(
(b) => b?.id === step.blockId
),
targetBlock,
targetStepIndex,
}
@ -54,7 +70,7 @@ export const Edge = ({ step }: { step: StepWithTarget }) => {
return (
<path
d={path}
stroke="#718096"
stroke={isPreviewing ? '#1a5fff' : '#718096'}
strokeWidth="2px"
markerEnd="url(#arrow)"
fill="none"

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

@ -1,16 +1,17 @@
import { chakra } from '@chakra-ui/system'
import { useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import React, { useMemo } from 'react'
import { DrawingEdge } from './DrawingEdge'
import { Edge, StepWithTarget } from './Edge'
export const Edges = () => {
const { blocks, startBlock } = useGraph()
const { typebot } = useTypebot()
const { blocks, startBlock } = typebot ?? {}
const stepsWithTarget: StepWithTarget[] = useMemo(() => {
if (!startBlock) return []
return [
...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
...(blocks
...((blocks ?? [])
.flatMap((b) => b.steps)
.filter((s) => s.target) as StepWithTarget[]),
]

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

@ -1,39 +1,25 @@
import { Flex, useEventListener } from '@chakra-ui/react'
import React, { useRef, useMemo, useEffect } from 'react'
import React, { useRef, useMemo } from 'react'
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 { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
const Graph = () => {
const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
useDnd()
const graphContainerRef = useRef<HTMLDivElement | null>(null)
const { typebot } = useTypebot()
const {
blocks,
setBlocks,
graphPosition,
setGraphPosition,
addNewBlock,
setStartBlock,
startBlock,
} = useGraph()
const { typebot, addNewBlock } = useTypebot()
const { graphPosition, setGraphPosition } = useGraph()
const transform = useMemo(
() =>
`translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
[graphPosition]
)
useEffect(() => {
if (!typebot) return
setBlocks(typebot.blocks)
setStartBlock(typebot.startBlock)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [typebot?.blocks])
const handleMouseWheel = (e: WheelEvent) => {
e.preventDefault()
const isPinchingTrackpad = e.ctrlKey
@ -59,26 +45,33 @@ const Graph = () => {
step: draggedStep,
type: draggedStepType,
x: e.clientX - graphPosition.x - blockWidth / 3,
y: e.clientY - graphPosition.y - 20,
y: e.clientY - graphPosition.y - 20 - headerHeight,
})
setDraggedStep(undefined)
setDraggedStepType(undefined)
}
useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
const handleMouseDown = (e: MouseEvent) => {
const isRightClick = e.button === 2
if (isRightClick) e.stopPropagation()
}
useEventListener('mousedown', handleMouseDown, undefined, { capture: true })
if (!typebot) return <></>
return (
<Flex ref={graphContainerRef} flex="1" h="full">
<Flex ref={graphContainerRef} flex="1">
<Flex
flex="1"
boxSize={'200px'}
maxW={'200px'}
style={{
transform,
}}
>
<Edges />
{startBlock && <StartBlockNode block={startBlock} />}
{blocks.map((block) => (
{typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
{(typebot.blocks ?? []).map((block) => (
<BlockNode block={block} key={block.id} />
))}
</Flex>

119
apps/builder/components/board/preview/PreviewDrawer.tsx Normal file
View File

@ -0,0 +1,119 @@
import {
Box,
Button,
CloseButton,
Fade,
Flex,
FlexProps,
useEventListener,
VStack,
} from '@chakra-ui/react'
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 React, { useMemo, useState } from 'react'
import { parseTypebotToPublicTypebot } from 'services/typebots'
export const PreviewDrawer = () => {
const { typebot } = useTypebot()
const { setRightPanel } = useEditor()
const { previewingIds, setPreviewingIds } = useGraph()
const [isResizing, setIsResizing] = useState(false)
const [width, setWidth] = useState(400)
const [isResizeHandleVisible, setIsResizeHandleVisible] = useState(false)
const publicTypebot = useMemo(
() => (typebot ? parseTypebotToPublicTypebot(typebot) : undefined),
[typebot]
)
const handleMouseDown = () => {
setIsResizing(true)
}
const handleMouseMove = (e: MouseEvent) => {
if (!isResizing) return
setWidth(width - e.movementX)
}
useEventListener('mousemove', handleMouseMove)
const handleMouseUp = () => {
setIsResizing(false)
}
useEventListener('mouseup', handleMouseUp)
const handleNewBlockVisible = (targetId: string) =>
setPreviewingIds({
sourceId: !previewingIds.sourceId
? 'start-block'
: previewingIds.targetId,
targetId: targetId,
})
return (
<Flex
pos="absolute"
right="0"
top={`0`}
h={`100%`}
w={`${width}px`}
bgColor="white"
shadow="lg"
borderLeftRadius={'lg'}
onMouseOver={() => setIsResizeHandleVisible(true)}
onMouseLeave={() => setIsResizeHandleVisible(false)}
p="6"
>
<Fade in={isResizeHandleVisible}>
<ResizeHandle
pos="absolute"
left="-7.5px"
top={`calc(50% - ${headerHeight}px)`}
onMouseDown={handleMouseDown}
/>
</Fade>
<VStack w="full" spacing={4}>
<Flex justifyContent={'space-between'} w="full">
<Button>Restart</Button>
<CloseButton onClick={() => setRightPanel(undefined)} />
</Flex>
{publicTypebot && (
<Flex
borderWidth={'1px'}
borderRadius={'lg'}
h="full"
w="full"
pointerEvents={isResizing ? 'none' : 'auto'}
>
<TypebotViewer
typebot={publicTypebot}
onNewBlockVisisble={handleNewBlockVisible}
/>
</Flex>
)}
</VStack>
</Flex>
)
}
const ResizeHandle = (props: FlexProps) => {
return (
<Flex
w="15px"
h="50px"
borderWidth={'1px'}
bgColor={'white'}
cursor={'col-resize'}
justifyContent={'center'}
align={'center'}
{...props}
>
<Box w="2px" bgColor={'gray.300'} h="70%" mr="0.5" />
<Box w="2px" bgColor={'gray.300'} h="70%" />
</Flex>
)
}

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

@ -1,4 +1,5 @@
import { DashboardFolder, Typebot } from '.prisma/client'
import { DashboardFolder } from '.prisma/client'
import { Typebot } from 'bot-engine'
import {
Button,
Flex,
@ -133,7 +134,6 @@ export const FolderContent = ({ folder }: Props) => {
<HStack>
{folder && <BackButton id={folder.parentFolderId} />}
<Button
colorScheme="gray"
leftIcon={<FolderPlusIcon />}
onClick={handleCreateFolder}
isLoading={isCreatingFolder || isFolderLoading}

1
apps/builder/components/dashboard/FolderContent/FolderButton.tsx
View File

@ -148,7 +148,6 @@ export const ButtonSkeleton = () => (
pos="relative"
cursor="pointer"
variant="outline"
colorScheme={'gray'}
>
<VStack spacing="6" w="full">
<SkeletonCircle boxSize="45px" />

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

@ -11,12 +11,12 @@ import {
} from '@chakra-ui/react'
import { useDraggable } from '@dnd-kit/core'
import { useRouter } from 'next/router'
import { Typebot } from 'db'
import { isMobile } from 'services/utils'
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'
type ChatbotCardProps = {
typebot: Typebot
@ -77,7 +77,6 @@ export const TypebotButton = ({
display="flex"
flexDir="column"
variant="outline"
colorScheme="gray"
color="gray.800"
w="225px"
h="270px"

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

@ -1,6 +1,6 @@
import { Button, Flex, Text, VStack } from '@chakra-ui/react'
import { Typebot } from '.prisma/client'
import { GlobeIcon, ToolIcon } from 'assets/icons'
import { Typebot } from 'bot-engine'
type Props = {
typebot: Typebot
@ -16,7 +16,6 @@ export const TypebotCardOverlay = ({ typebot }: Props) => {
display="flex"
flexDir="column"
variant="outline"
colorScheme="gray"
w="full"
h="full"
whiteSpace="normal"

2
apps/builder/components/modals/ConfirmModal.tsx
View File

@ -58,7 +58,7 @@ export const ConfirmModal = ({
<AlertDialogBody>{message}</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose} colorScheme="gray">
<Button ref={cancelRef} onClick={onClose}>
Cancel
</Button>
<Button

106
apps/builder/components/shared/ContextMenu.tsx Normal file
View File

@ -0,0 +1,106 @@
import * as React from 'react'
import {
MutableRefObject,
useCallback,
useEffect,
useRef,
useState,
} from 'react'
import {
useEventListener,
Portal,
Menu,
MenuButton,
PortalProps,
MenuButtonProps,
MenuProps,
} from '@chakra-ui/react'
export interface ContextMenuProps<T extends HTMLElement> {
renderMenu: () => JSX.Element | null
children: (
ref: MutableRefObject<T | null>,
isOpened: boolean
) => JSX.Element | null
menuProps?: MenuProps
portalProps?: PortalProps
menuButtonProps?: MenuButtonProps
}
export function ContextMenu<T extends HTMLElement = HTMLElement>(
props: ContextMenuProps<T>
) {
const [isOpened, setIsOpened] = useState(false)
const [isRendered, setIsRendered] = useState(false)
const [isDeferredOpen, setIsDeferredOpen] = useState(false)
const [position, setPosition] = useState<[number, number]>([0, 0])
const targetRef = useRef<T>(null)
useEffect(() => {
if (isOpened) {
setTimeout(() => {
setIsRendered(true)
setTimeout(() => {
setIsDeferredOpen(true)
})
})
} else {
setIsDeferredOpen(false)
const timeout = setTimeout(() => {
setIsRendered(isOpened)
}, 1000)
return () => clearTimeout(timeout)
}
}, [isOpened])
useEventListener(
'contextmenu',
(e) => {
if (e.currentTarget === targetRef.current) {
e.preventDefault()
e.stopPropagation()
setIsOpened(true)
setPosition([e.pageX, e.pageY])
} else {
setIsOpened(false)
}
},
targetRef.current
)
const onCloseHandler = useCallback(() => {
props.menuProps?.onClose?.()
setIsOpened(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.menuProps?.onClose, setIsOpened])
return (
<>
{props.children(targetRef, isOpened)}
{isRendered && (
<Portal {...props.portalProps}>
<Menu
isOpen={isDeferredOpen}
gutter={0}
{...props.menuProps}
onClose={onCloseHandler}
>
<MenuButton
aria-hidden={true}
w={1}
h={1}
style={{
position: 'absolute',
left: position[0],
top: position[1],
cursor: 'default',
}}
{...props.menuButtonProps}
/>
{props.renderMenu()}
</Menu>
</Portal>
)}
</>
)
}

71
apps/builder/components/shared/KBar.tsx Normal file
View File

@ -0,0 +1,71 @@
import React from 'react'
import {
KBarPortal,
KBarPositioner,
KBarAnimator,
KBarSearch,
KBarResults,
useMatches,
} from 'kbar'
import { chakra, Flex } from '@chakra-ui/react'
// eslint-disable-next-line @typescript-eslint/ban-types
type KBarProps = {}
const KBarSearchChakra = chakra(KBarSearch)
const KBarAnimatorChakra = chakra(KBarAnimator)
const KBarResultsChakra = chakra(KBarResults)
export const KBar = ({}: KBarProps) => {
return (
<KBarPortal>
<KBarPositioner>
<KBarAnimatorChakra shadow="2xl" rounded="md">
<KBarSearchChakra
p={4}
w="500px"
roundedTop="md"
_focus={{ outline: 'none' }}
/>
<RenderResults />
</KBarAnimatorChakra>
</KBarPositioner>
</KBarPortal>
)
}
const RenderResults = () => {
const { results } = useMatches()
return (
<KBarResultsChakra
items={results}
onRender={({ item, active }) =>
typeof item === 'string' ? (
<Flex height="50px">{item}</Flex>
) : (
<Flex
height="50px"
roundedBottom="md"
align="center"
px="4"
bgColor={active ? 'blue.50' : 'white'}
_hover={{ bgColor: 'blue.50' }}
>
{active && (
<Flex
pos="absolute"
left="0"
h="full"
w="3px"
roundedRight="md"
bgColor={'blue.500'}
/>
)}
{item.name}
</Flex>
)
}
/>
)
}

26
apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Editable, EditablePreview, EditableInput } from '@chakra-ui/editable'
import { Tooltip } from '@chakra-ui/tooltip'
import React from 'react'
type EditableProps = {
name?: string
onNewName: (newName: string) => void
}
export const EditableTypebotName = ({ name, onNewName }: EditableProps) => {
return (
<Tooltip label="Rename">
<Editable defaultValue={name} onSubmit={onNewName}>
<EditablePreview
isTruncated
cursor="pointer"
maxW="200px"
overflow="hidden"
display="flex"
alignItems="center"
minW="100px"
/>
<EditableInput />
</Editable>
</Tooltip>
)
}

33
apps/builder/components/shared/TypebotHeader/SaveButton.tsx Normal file
View File

@ -0,0 +1,33 @@
import { IconButton, Text, Tooltip } from '@chakra-ui/react'
import { CheckIcon, SaveIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext'
import React from 'react'
export const SaveButton = () => {
const { save, isSavingLoading, hasUnsavedChanges } = useTypebot()
const onSaveClick = () => {
save()
}
return (
<>
{hasUnsavedChanges && (
<Text fontSize="sm" color="gray.500">
Unsaved changes
</Text>
)}
<Tooltip label="Save changes">
<IconButton
isDisabled={!hasUnsavedChanges}
onClick={onSaveClick}
isLoading={isSavingLoading}
icon={
hasUnsavedChanges ? <SaveIcon /> : <CheckIcon color="green.400" />
}
aria-label={hasUnsavedChanges ? 'Save' : 'Saved'}
/>
</Tooltip>
</>
)
}

123
apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx Normal file
View File

@ -0,0 +1,123 @@
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 { useRouter } from 'next/router'
import React from 'react'
import { PublishButton } from '../buttons/PublishButton'
import { EditableTypebotName } from './EditableTypebotName'
import { SaveButton } from './SaveButton'
export const headerHeight = 56
export const TypebotHeader = () => {
const router = useRouter()
const { typebot } = useTypebot()
const { setRightPanel } = useEditor()
const handleBackClick = () => {
router.push({
pathname: `/typebots`,
query: { ...router.query, typebotId: [] },
})
}
return (
<Flex
w="full"
borderBottomWidth="1px"
justify="center"
align="center"
pos="fixed"
h={`${headerHeight}px`}
zIndex={2}
bgColor="white"
>
<HStack>
<Button
as={NextChakraLink}
href={{
pathname: `/typebots/${typebot?.id}/edit`,
query: { ...router.query, typebotId: [] },
}}
colorScheme={router.pathname.includes('/edit') ? 'blue' : 'gray'}
variant={router.pathname.includes('/edit') ? 'outline' : 'ghost'}
>
Flow
</Button>
<Button
as={NextChakraLink}
href={{
pathname: `/typebots/${typebot?.id}/design`,
query: { ...router.query, typebotId: [] },
}}
colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
>
Theme
</Button>
<Button
as={NextChakraLink}
href={{
pathname: `/typebots/${typebot?.id}/design`,
query: { ...router.query, typebotId: [] },
}}
colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
>
Settings
</Button>
<Button
as={NextChakraLink}
href={{
pathname: `/typebots/${typebot?.id}/share`,
query: { ...router.query, typebotId: [] },
}}
colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
>
Share
</Button>
<Button
as={NextChakraLink}
href={{
pathname: `/typebots/${typebot?.id}/results/responses`,
query: { ...router.query, typebotId: [] },
}}
colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
>
Results
</Button>
</HStack>
<Flex pos="absolute" left="1rem" justify="center" align="center">
<Flex alignItems="center">
<IconButton
aria-label="Back"
icon={<ChevronLeftIcon fontSize={30} />}
mr={2}
onClick={handleBackClick}
/>
<EditableTypebotName
name={typebot?.name}
onNewName={(newName) => console.log(newName)}
/>
</Flex>
</Flex>
<HStack right="40px" pos="absolute">
<SaveButton />
<Button
onClick={() => {
setRightPanel(RightPanel.PREVIEW)
}}
>
Preview
</Button>
<PublishButton />
</HStack>
</Flex>
)
}

1
apps/builder/components/shared/TypebotHeader/index.tsx Normal file
View File

@ -0,0 +1 @@
export * from './TypebotHeader'

9
apps/builder/components/shared/buttons/PublishButton.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Button } from '@chakra-ui/react'
export const PublishButton = () => {
return (
<Button ml={2} colorScheme={'blue'}>
Publish
</Button>
)
}

35
apps/builder/contexts/EditorContext.tsx Normal file
View File

@ -0,0 +1,35 @@
import {
createContext,
Dispatch,
ReactNode,
SetStateAction,
useContext,
useState,
} from 'react'
export enum RightPanel {
PREVIEW,
}
const editorContext = createContext<{
rightPanel?: RightPanel
setRightPanel: Dispatch<SetStateAction<RightPanel | undefined>>
}>({
setRightPanel: () => console.log("I'm not instantiated"),
})
export const EditorContext = ({ children }: { children: ReactNode }) => {
const [rightPanel, setRightPanel] = useState<RightPanel>()
return (
<editorContext.Provider
value={{
rightPanel,
setRightPanel,
}}
>
{children}
</editorContext.Provider>
)
}
export const useEditor = () => useContext(editorContext)

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

@ -1,4 +1,4 @@
import { Block, StartBlock, Step, StepType, Target } from 'bot-engine'
import { Block, Step, StepType, Target } from 'bot-engine'
import {
createContext,
Dispatch,
@ -7,8 +7,6 @@ import {
useContext,
useState,
} from 'react'
import { parseNewBlock, parseNewStep } from 'services/graph'
import { insertItemInList } from 'services/utils'
export const stubLength = 20
export const blockWidth = 300
@ -27,7 +25,7 @@ export const blockAnchorsOffset = {
},
}
export const firstStepOffsetY = 88
export const spaceBetweenSteps = 66
export const spaceBetweenSteps = 62
export type Coordinates = { x: number; y: number }
@ -59,38 +57,15 @@ const graphContext = createContext<{
setConnectingIds: Dispatch<
SetStateAction<{ blockId: string; stepId: string; target?: Target } | null>
>
startBlock?: StartBlock
setStartBlock: Dispatch<SetStateAction<StartBlock | undefined>>
blocks: Block[]
setBlocks: Dispatch<SetStateAction<Block[]>>
addNewBlock: (props: NewBlockPayload) => void
updateBlockPosition: (blockId: string, newPositon: Coordinates) => void
addNewStepToBlock: (
blockId: string,
step: StepType | Step,
index: number
) => void
removeStepFromBlock: (blockId: string, stepId: string) => void
addTarget: (connectingIds: {
blockId: string
stepId: string
target?: Target
}) => void
removeTarget: (connectingIds: { blockId: string; stepId: string }) => void
previewingIds: { sourceId?: string; targetId?: string }
setPreviewingIds: Dispatch<
SetStateAction<{ sourceId?: string; targetId?: string }>
>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
}>({
graphPosition: graphPositionDefaultValue,
setGraphPosition: () => console.log("I'm not instantiated"),
connectingIds: null,
setConnectingIds: () => console.log("I'm not instantiated"),
blocks: [],
setBlocks: () => console.log("I'm not instantiated"),
updateBlockPosition: () => console.log("I'm not instantiated"),
addNewStepToBlock: () => console.log("I'm not instantiated"),
addNewBlock: () => console.log("I'm not instantiated"),
removeStepFromBlock: () => console.log("I'm not instantiated"),
addTarget: () => console.log("I'm not instantiated"),
removeTarget: () => console.log("I'm not instantiated"),
setStartBlock: () => console.log("I'm not instantiated"),
})
export const GraphProvider = ({ children }: { children: ReactNode }) => {
@ -100,125 +75,10 @@ export const GraphProvider = ({ children }: { children: ReactNode }) => {
stepId: string
target?: Target
} | null>(null)
const [blocks, setBlocks] = useState<Block[]>([])
const [startBlock, setStartBlock] = useState<StartBlock | undefined>()
const addNewBlock = ({ x, y, type, step }: NewBlockPayload) => {
const boardCoordinates = {
x,
y,
}
setBlocks((blocks) => [
...blocks.filter((block) => block.steps.length > 0),
parseNewBlock({
step,
type,
totalBlocks: blocks.length,
initialCoordinates: boardCoordinates,
}),
])
}
const updateBlockPosition = (blockId: string, newPosition: Coordinates) => {
setBlocks((blocks) =>
blocks.map((block) =>
block.id === blockId
? { ...block, graphCoordinates: newPosition }
: block
)
)
}
const addNewStepToBlock = (
blockId: string,
step: StepType | Step,
index: number
) => {
setBlocks((blocks) =>
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) => {
setBlocks((blocks) =>
blocks.map((block) =>
block.id === blockId
? {
...block,
steps: [...block.steps.filter((step) => step.id !== stepId)],
}
: block
)
)
}
const addTarget = ({
blockId,
stepId,
target,
}: {
blockId: string
stepId: string
target?: Target
}) => {
startBlock && blockId === 'start-block'
? setStartBlock({
...startBlock,
steps: [{ ...startBlock.steps[0], target }],
})
: setBlocks((blocks) =>
blocks.map((block) =>
block.id === blockId
? {
...block,
steps: [
...block.steps.map((step) =>
step.id === stepId ? { ...step, target } : step
),
],
}
: block
)
)
}
const removeTarget = ({
blockId,
stepId,
}: {
blockId: string
stepId: string
}) => {
setBlocks((blocks) =>
blocks.map((block) =>
block.id === blockId
? {
...block,
steps: [
...block.steps.map((step) =>
step.id === stepId ? { ...step, target: undefined } : step
),
],
}
: block
)
)
}
const [previewingIds, setPreviewingIds] = useState<{
sourceId?: string
targetId?: string
}>({})
return (
<graphContext.Provider
@ -227,16 +87,8 @@ export const GraphProvider = ({ children }: { children: ReactNode }) => {
setGraphPosition,
connectingIds,
setConnectingIds,
blocks,
setBlocks,
updateBlockPosition,
addNewStepToBlock,
addNewBlock,
removeStepFromBlock,
addTarget,
removeTarget,
startBlock,
setStartBlock,
previewingIds,
setPreviewingIds,
}}
>
{children}

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

@ -1,12 +1,53 @@
import { useToast } from '@chakra-ui/react'
import { Typebot } from 'bot-engine'
import { Block, Step, StepType, Target, Typebot } from 'bot-engine'
import { useRouter } from 'next/router'
import { createContext, ReactNode, useContext, useEffect } from 'react'
import { fetcher } from 'services/utils'
import {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from 'react'
import {
checkIfTypebotsAreEqual,
parseNewBlock,
parseNewStep,
updateTypebot,
} from 'services/typebots'
import {
fetcher,
insertItemInList,
preventUserFromRefreshing,
} from 'services/utils'
import useSWR from 'swr'
import { NewBlockPayload, Coordinates } from './GraphContext'
const typebotContext = createContext<{
typebot?: Typebot
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
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
}>({})
export const TypebotContext = ({
@ -21,7 +62,8 @@ export const TypebotContext = ({
position: 'top-right',
status: 'error',
})
const { typebot, isLoading } = useFetchedTypebot({
const [undoStack, setUndoStack] = useState<Typebot[]>([])
const { typebot, isLoading, mutate } = useFetchedTypebot({
typebotId,
onError: (error) =>
toast({
@ -29,20 +71,214 @@ export const TypebotContext = ({
description: error.message,
}),
})
const [localTypebot, setLocalTypebot] = useState<Typebot>()
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
const [isSavingLoading, setIsSavingLoading] = useState(false)
useEffect(() => {
if (!localTypebot || !typebot) return
if (!checkIfTypebotsAreEqual(localTypebot, typebot)) {
setHasUnsavedChanges(true)
pushNewTypebotInUndoStack(localTypebot)
window.removeEventListener('beforeunload', preventUserFromRefreshing)
window.addEventListener('beforeunload', preventUserFromRefreshing)
} else {
setHasUnsavedChanges(false)
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 })
// 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 })
setHasUnsavedChanges(false)
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 })
}
return (
<typebotContext.Provider
value={{
typebot,
typebot: localTypebot,
updateStep,
addNewBlock,
addStepToBlock,
updateTarget,
removeStepFromBlock,
updateBlockPosition,
hasUnsavedChanges,
isSavingLoading,
save: saveTypebot,
removeBlock,
undo,
}}
>
{children}

5
apps/builder/libs/chakra.ts
View File

@ -50,11 +50,6 @@ const components = {
colorScheme: 'blue',
},
},
Button: {
defaultProps: {
colorScheme: 'blue',
},
},
NumberInput: {
defaultProps: {
focusBorderColor: 'blue.200',

16
apps/builder/libs/kbar.ts Normal file
View File

@ -0,0 +1,16 @@
export const actions = [
{
id: 'blog',
name: 'Blog',
shortcut: ['b'],
keywords: 'writing words',
perform: () => (window.location.pathname = 'blog'),
},
{
id: 'contact',
name: 'Contact',
shortcut: ['c'],
keywords: 'email',
perform: () => (window.location.pathname = 'contact'),
},
]

56
apps/builder/libs/plate.ts Normal file
View File

@ -0,0 +1,56 @@
import {
AutoformatRule,
createAutoformatPlugin,
} from '@udecode/plate-autoformat'
import {
MARK_BOLD,
MARK_UNDERLINE,
MARK_ITALIC,
createBoldPlugin,
createItalicPlugin,
createUnderlinePlugin,
} from '@udecode/plate-basic-marks'
import { createPlugins } from '@udecode/plate-core'
import { createLinkPlugin } from '@udecode/plate-link'
export const editorStyle: React.CSSProperties = {
flex: 1,
padding: '1rem',
backgroundColor: 'white',
borderRadius: '0.25rem',
}
export const autoFormatRules: AutoformatRule[] = [
{
mode: 'mark',
type: MARK_BOLD,
match: '**',
},
{
mode: 'mark',
type: MARK_UNDERLINE,
match: '__',
},
{
mode: 'mark',
type: MARK_ITALIC,
match: '*',
},
{
mode: 'mark',
type: MARK_ITALIC,
match: '_',
},
]
export const platePlugins = createPlugins([
createBoldPlugin(),
createItalicPlugin(),
createUnderlinePlugin(),
createLinkPlugin(),
createAutoformatPlugin({
options: {
rules: autoFormatRules,
},
}),
])

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')(['bot-engine'])
module.exports = withTM({
reactStrictMode: true,
})

42
apps/builder/package.json
View File

@ -10,44 +10,58 @@
},
"dependencies": {
"@chakra-ui/css-reset": "^1.1.1",
"@chakra-ui/react": "^1.7.2",
"@chakra-ui/react": "^1.7.3",
"@dnd-kit/core": "^4.0.3",
"@dnd-kit/sortable": "^5.1.0",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@next-auth/prisma-adapter": "next",
"@udecode/plate-autoformat": "^9.0.0",
"@udecode/plate-basic-marks": "^9.0.0",
"@udecode/plate-common": "^7.0.2",
"@udecode/plate-core": "^9.0.0",
"@udecode/plate-link": "^9.0.0",
"@udecode/plate-ui-link": "^9.0.0",
"@udecode/plate-ui-toolbar": "^9.0.0",
"bot-engine": "*",
"db": "*",
"fast-equals": "^2.0.4",
"focus-visible": "^5.2.0",
"framer-motion": "^4",
"next": "^12.0.4",
"htmlparser2": "^7.2.0",
"kbar": "^0.1.0-beta.24",
"next": "^12.0.7",
"next-auth": "beta",
"nodemailer": "^6.7.1",
"nodemailer": "^6.7.2",
"nprogress": "^0.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-frame-component": "^5.2.1",
"short-uuid": "^4.2.0",
"slate": "^0.72.0",
"slate-history": "^0.66.0",
"slate-hyperscript": "^0.67.0",
"slate-react": "^0.72.1",
"styled-components": "^5.3.3",
"svg-round-corners": "^0.3.0",
"swr": "^1.0.1",
"swr": "^1.1.1",
"use-debounce": "^7.0.1"
},
"devDependencies": {
"@testing-library/cypress": "^8.0.2",
"@types/node": "^16.11.9",
"@types/nprogress": "^0.2.0",
"@types/react": "^17.0.35",
"@types/react": "^17.0.37",
"@types/testing-library__cypress": "^5.0.9",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"cypress": "^9.1.0",
"cypress-social-logins": "^1.12.0",
"dotenv-cli": "^4.1.0",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"cypress": "^9.2.0",
"cypress-social-logins": "^1.13.0",
"eslint": "<8.0.0",
"eslint-config-next": "12.0.4",
"eslint-config-next": "12.0.7",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-prettier": "^4.0.0",
"next-transpile-modules": "^9.0.0",
"prettier": "^2.4.1",
"prettier": "^2.5.1",
"typescript": "^4.5.4"
}
}

1
apps/builder/pages/_app.tsx
View File

@ -5,6 +5,7 @@ import { ChakraProvider } from '@chakra-ui/react'
import { customTheme } from 'libs/chakra'
import { useRouterProgressBar } from 'libs/routerProgressBar'
import 'assets/styles/routerProgressBar.css'
import 'assets/styles/plate.css'
import 'focus-visible/dist/focus-visible'
const App = ({ Component, pageProps }: AppProps) => {

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

@ -12,37 +12,45 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
return res.status(401).json({ message: 'Not authenticated' })
const user = session.user as User
if (req.method === 'GET') {
const folderId = req.query.folderId ? req.query.folderId.toString() : null
const typebots = await prisma.typebot.findMany({
where: {
ownerId: user.id,
folderId,
},
})
return res.send({ typebots })
}
if (req.method === 'POST') {
const data = JSON.parse(req.body) as Typebot
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,
try {
if (req.method === 'GET') {
const folderId = req.query.folderId ? req.query.folderId.toString() : null
const typebots = await prisma.typebot.findMany({
where: {
ownerId: user.id,
folderId,
},
],
})
return res.send({ typebots })
}
const typebot = await prisma.typebot.create({
data: { ...data, ownerId: user.id, startBlock },
})
return res.send(typebot)
if (req.method === 'POST') {
const data = JSON.parse(req.body) as Typebot
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 typebot = await prisma.typebot.create({
data: { ...data, ownerId: user.id, startBlock },
})
return res.send(typebot)
}
return methodNotAllowed(res)
} catch (err) {
console.error(err)
if (err instanceof Error) {
return res.status(500).send({ title: err.name, message: err.message })
}
return res.status(500).send({ message: 'An error occured', error: err })
}
return methodNotAllowed(res)
}
export default handler

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

@ -2,21 +2,32 @@ import { Flex } from '@chakra-ui/layout'
import { Board } from 'components/board/Board'
import withAuth from 'components/HOC/withUser'
import { Seo } from 'components/Seo'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import { EditorContext } from 'contexts/EditorContext'
import { GraphProvider } from 'contexts/GraphContext'
import { TypebotContext } from 'contexts/TypebotContext'
import { useRouter } from 'next/router'
import { KBarProvider } from 'kbar'
import React from 'react'
import { actions } from 'libs/kbar'
import { KBar } from 'components/shared/KBar'
const TypebotEditPage = () => {
const { query } = useRouter()
return (
<TypebotContext typebotId={query.id?.toString()}>
<Seo title="Editor" />
<Flex overflow="hidden" h="100vh">
<GraphProvider>
<Board />
</GraphProvider>
</Flex>
<EditorContext>
<KBarProvider actions={actions}>
<KBar />
<Flex overflow="hidden" h="100vh">
<TypebotHeader />
<GraphProvider>
<Board />
</GraphProvider>
</Flex>
</KBarProvider>
</EditorContext>
</TypebotContext>
)
}

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

@ -1,13 +1,5 @@
import { Coordinates } from '@dnd-kit/core/dist/types'
import {
StepType,
Block,
Step,
TextStep,
ImageStep,
DatePickerStep,
StartBlock,
} from 'bot-engine'
import { Block, StartBlock } from 'bot-engine'
import { AnchorsPositionProps } from 'components/board/graph/Edges/Edge'
import {
stubLength,
@ -16,54 +8,9 @@ import {
spaceBetweenSteps,
firstStepOffsetY,
} from 'contexts/GraphContext'
import shortId from 'short-uuid'
import { roundCorners } from 'svg-round-corners'
import { isDefined } from './utils'
export const parseNewBlock = ({
type,
totalBlocks,
initialCoordinates,
step,
}: {
step?: Step
type?: StepType
totalBlocks: number
initialCoordinates: { x: number; y: number }
}): Block => {
const id = `b${shortId.generate()}`
return {
id,
title: `Block #${totalBlocks + 1}`,
graphCoordinates: initialCoordinates,
steps: [
step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
],
}
}
export const parseNewStep = (type: StepType, blockId: string): Step => {
const id = `s${shortId.generate()}`
switch (type) {
case StepType.TEXT: {
const textStep: TextStep = { type, content: '' }
return { blockId, id, ...textStep }
}
case StepType.IMAGE: {
const imageStep: ImageStep = { type, content: { url: '' } }
return { blockId, id, ...imageStep }
}
case StepType.DATE_PICKER: {
const imageStep: DatePickerStep = { type, content: '' }
return { blockId, id, ...imageStep }
}
default: {
const textStep: TextStep = { type: StepType.TEXT, content: '' }
return { blockId, id, ...textStep }
}
}
}
export const computeFlowChartConnectorPath = ({
sourcePosition,
targetPosition,

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

@ -1,6 +1,16 @@
import { Typebot } from 'db'
import {
Step,
StepType,
Block,
TextStep,
PublicTypebot,
TextInputStep,
} from 'bot-engine'
import shortId from 'short-uuid'
import { Typebot } from 'bot-engine'
import useSWR from 'swr'
import { fetcher, sendRequest } from './utils'
import { deepEqual } from 'fast-equals'
export const useTypebots = ({
folderId,
@ -67,3 +77,82 @@ export const updateTypebot = async (id: string, typebot: Partial<Typebot>) =>
method: 'PATCH',
body: typebot,
})
export const parseNewBlock = ({
type,
totalBlocks,
initialCoordinates,
step,
}: {
step?: Step
type?: StepType
totalBlocks: number
initialCoordinates: { x: number; y: number }
}): Block => {
const id = `b${shortId.generate()}`
return {
id,
title: `Block #${totalBlocks + 1}`,
graphCoordinates: initialCoordinates,
steps: [
step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
],
}
}
export const parseNewStep = (type: StepType, blockId: string): Step => {
const id = `s${shortId.generate()}`
switch (type) {
case StepType.TEXT: {
const textStep: Pick<TextStep, 'type' | 'content'> = {
type,
content: { html: '', richText: [], plainText: '' },
}
return {
id,
blockId,
...textStep,
}
}
case StepType.TEXT_INPUT: {
const textStep: Pick<TextInputStep, 'type'> = {
type,
}
return {
id,
blockId,
...textStep,
}
}
default: {
const textStep: Pick<TextStep, 'type' | 'content'> = {
type: StepType.TEXT,
content: { html: '', richText: [], plainText: '' },
}
return { blockId, id, ...textStep }
}
}
}
export const checkIfTypebotsAreEqual = (
firstChatbot: Typebot,
secondChatbot: Typebot
) =>
deepEqual(
{
...firstChatbot,
},
{
...secondChatbot,
}
)
export const parseTypebotToPublicTypebot = (
typebot: Typebot
): PublicTypebot => ({
id: shortId.generate(),
blocks: typebot.blocks,
name: typebot.name,
startBlock: typebot.startBlock,
typebotId: typebot.id,
})

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

@ -1,3 +1,5 @@
import { Parser } from 'htmlparser2'
export const fetcher = async (input: RequestInfo, init?: RequestInit) => {
const res = await fetch(input, init)
return res.json()
@ -44,3 +46,20 @@ export const isDefined = <T>(value: T | undefined | null): value is T => {
export const isNotDefined = <T>(value: T | undefined | null): value is T => {
return <T>value === undefined || <T>value === null
}
export const preventUserFromRefreshing = (e: BeforeUnloadEvent) => {
e.preventDefault()
e.returnValue = ''
}
export const parseHtmlStringToPlainText = (html: string): string => {
let label = ''
const parser = new Parser({
ontext(text) {
label += `${text}`
},
})
parser.write(html)
parser.end()
return label
}

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')(['bot-engine'])
module.exports = withTM({
reactStrictMode: true,
})