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

1
.gitignore vendored
View File

@ -34,3 +34,4 @@ workspace.code-workspace
.DS_Store
.turbo
apps/builder/tsconfig.tsbuildinfo

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

3
packages/bot-engine/.gitignore vendored
View File

@ -2,4 +2,5 @@ node_modules
# Keep environment variables out of version control
.env
dist
dist
yarn-error.log

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

@ -1,25 +1,38 @@
{
"name": "bot-engine",
"version": "0.1.0",
"main": "src/index.ts",
"types": "src/index.ts",
"files": [
"src/style.css"
],
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/index.d.ts",
"dependencies": {
"db": "*"
"db": "*",
"react-frame-component": "^5.2.1",
"react-scroll": "^1.8.4",
"react-transition-group": "^4.4.2"
},
"devDependencies": {
"@types/react": "^17.0.37",
"@types/react-scroll": "^1.8.3",
"@types/react-transition-group": "^4.4.4",
"autoprefixer": "^10.4.0",
"npm-run-all": "^4.1.5",
"tailwindcss": "^3.0.5",
"typescript": "^4.5.4"
"postcss": "^8.4.5",
"tailwindcss": "^3.0.7",
"typescript": "^4.5.4",
"rollup": "^2.61.1",
"rollup-plugin-dts": "^4.0.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.1",
"@rollup/plugin-typescript": "^8.3.0"
},
"peerDependencies": {
"react": "^17.0.2"
},
"scripts": {
"build": "yarn tailwind:generate",
"tailwind:generate": "tailwindcss -o src/style.css --minify"
"build": "yarn rollup -c",
"dev": "yarn rollup -c --watch"
}
}

1
packages/bot-engine/postcss.config.js Normal file
View File

@ -0,0 +1 @@
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }

48
packages/bot-engine/rollup.config.js Normal file
View File

@ -0,0 +1,48 @@
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
import dts from 'rollup-plugin-dts'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
const packageJson = require('./package.json')
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
postcss({
config: {
path: './postcss.config.js',
},
extract: false,
minimize: false,
inject: false,
}),
terser(),
],
},
{
input: 'dist/esm/types/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
plugins: [dts()],
external: [/\.css$/],
},
]

13
packages/bot-engine/src/assets/icons.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
export const SendIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width="19px"
{...props}
>
<title>Send</title>
<path d="M476.59 227.05l-.16-.07L49.35 49.84A23.56 23.56 0 0027.14 52 24.65 24.65 0 0016 72.59v113.29a24 24 0 0019.52 23.57l232.93 43.07a4 4 0 010 7.86L35.53 303.45A24 24 0 0016 327v113.31A23.57 23.57 0 0026.59 460a23.94 23.94 0 0013.22 4 24.55 24.55 0 009.52-1.93L476.4 285.94l.19-.09a32 32 0 000-58.8z" />
</svg>
)

384
packages/bot-engine/src/assets/style.css Normal file
View File

@ -0,0 +1,384 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--typebot-container-bg-image: none;
--typebot-container-bg-color: #f7f8ff;
--typebot-container-font-family: 'Inter';
--typebot-chat-view-max-width: 700px;
--typebot-chat-view-bg-color: #ffffff;
--typebot-chat-view-color: #303235;
--typebot-button-active-bg-color: #0042da;
--typebot-button-active-color: #ffffff;
--typebot-button-inactive-bg-color: #edf2f7;
--typebot-button-inactive-color: #303235;
--typebot-button-border: 1px solid var(--typebot-button-active-bg-color);
--typebot-button-shadow: none;
--typebot-host-bubble-bg-color: #f7f8ff;
--typebot-host-bubble-color: #303235;
--typebot-host-bubble-border: 1px solid var(--typebot-host-bubble-bg-color);
--typebot-host-bubble-shadow: none;
--typebot-guest-bubble-bg-color: #ff8e21;
--typebot-guest-bubble-color: #ffffff;
--typebot-guest-bubble-border: 1px solid var(--typebot-guest-bubble-bg-color);
--typebot-guest-bubble-shadow: none;
--typebot-input-bg-color: #ffffff;
--typebot-input-color: #303235;
--typebot-input-border: 1px solid var(--typebot-input-bg-color);
--typebot-input-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--typebot-input-placeholder-color: #9095a0;
--typebot-header-bg-color: #ffffff;
--typebot-header-color: #303235;
--typebot-header-border: none;
--typebot-header-shadow: none;
--typebot-header-max-width: 1000px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollable-container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollable-container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
}
/* Transitions */
.bubble-enter {
opacity: 0;
}
.bubble-enter-active {
opacity: 1;
transition-property: opacity;
transition-duration: 500ms;
transition-timing-function: ease-out;
}
.bubble-exit {
opacity: 1;
}
.bubble-exit-active {
opacity: 0;
transition-delay: 0ms !important;
transition-property: opacity;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
.bubble-typing {
transition: width 400ms ease-out, height 400ms ease-out;
}
.content-opacity {
transition: opacity 400ms ease-in 200ms;
}
.bubble1,
.bubble2,
.bubble3 {
background-color: var(--typebot-host-bubble-color);
opacity: 0.5;
}
.bubble1 {
animation: chatBubbles 1s ease-in-out infinite;
}
.bubble2 {
animation: chatBubbles 1s ease-in-out infinite;
animation-delay: 0.3s;
}
.bubble3 {
animation: chatBubbles 1s ease-in-out infinite;
animation-delay: 0.5s;
}
@keyframes chatBubbles {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
button,
input,
textarea {
font-weight: 300;
}
.slate-a {
text-decoration: underline;
}
.slate-html-container > div {
min-height: 24px;
}
.slate-bold {
font-weight: bold;
}
.slate-italic {
font-style: oblique;
}
.slate-underline {
text-decoration: underline;
}
.comp-input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: var(--typebot-input-placeholder-color) !important;
opacity: 1 !important;
}
.comp-input::-moz-placeholder {
/* Firefox 19+ */
color: var(--typebot-input-placeholder-color) !important;
opacity: 1 !important;
}
.comp-input::placeholder {
color: var(--typebot-input-placeholder-color) !important;
opacity: 1 !important;
}
.PhoneInput {
/* This is done to stretch the contents of this component. */
display: flex;
align-items: center;
}
.PhoneInput > input {
color: var(--typebot-input-color);
background-color: var(--typebot-input-bg-color);
}
.PhoneInput > input::placeholder {
color: var(--typebot-input-placeholder-color) !important;
}
.PhoneInputInput {
/* The phone number input stretches to fill all empty space */
flex: 1;
/* The phone number input should shrink
to make room for the extension input */
min-width: 0;
padding: 1rem 1rem 1rem 0;
}
.PhoneInputInput:focus {
outline: none;
}
.PhoneInputCountryIcon {
width: calc(
var(--PhoneInputCountryFlag-height) *
var(--PhoneInputCountryFlag-aspectRatio)
);
height: var(--PhoneInputCountryFlag-height);
box-shadow: none;
}
.PhoneInputCountryIcon--square {
width: var(--PhoneInputCountryFlag-height);
}
.PhoneInputCountryIcon--border {
/* Removed `background-color` because when an `<img/>` was still loading
it would show a dark gray rectangle. */
/* For some reason the `<img/>` is not stretched to 100% width and height
and sometime there can be seen white pixels of the background at top and bottom. */
background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
/* For some reason the `<img/>` is not stretched to 100% width and height
and sometime there can be seen white pixels of the background at top and bottom,
so an additional "inset" border is added. */
box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
var(--PhoneInputCountryFlag-borderColor),
inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
var(--PhoneInputCountryFlag-borderColor);
}
.PhoneInputCountryIconImg {
/* Fixes weird vertical space above the flag icon. */
/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
display: block;
/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
width: 100%;
height: 100%;
border-radius: 5px;
border: none;
}
.PhoneInputInternationalIconPhone {
opacity: var(--PhoneInputInternationalIconPhone-opacity);
}
.PhoneInputInternationalIconGlobe {
opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}
/* Styling native country `<select/>`. */
.PhoneInputCountry {
position: relative;
align-self: stretch;
display: flex;
align-items: center;
padding: 0 1rem;
margin-right: 0;
}
.PhoneInputCountrySelect {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
border: 0;
opacity: 0;
cursor: pointer;
}
.PhoneInputCountrySelect[disabled] {
cursor: default;
}
.PhoneInputCountrySelectArrow {
display: block;
content: '';
width: var(--PhoneInputCountrySelectArrow-width);
height: var(--PhoneInputCountrySelectArrow-width);
margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
border-style: solid;
border-color: var(--PhoneInputCountrySelectArrow-color);
border-top-width: 0;
border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
border-left-width: 0;
border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
transform: var(--PhoneInputCountrySelectArrow-transform);
opacity: var(--PhoneInputCountrySelectArrow-opacity);
}
.PhoneInputCountrySelect:focus
+ .PhoneInputCountryIcon
+ .PhoneInputCountrySelectArrow {
opacity: 1;
color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
box-shadow: none;
}
.PhoneInputCountrySelect:focus
+ .PhoneInputCountryIcon
.PhoneInputInternationalIconGlobe {
opacity: 1;
color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.typebot-container {
background-image: var(--typebot-container-bg-image);
background-color: var(--typebot-container-bg-color);
font-family: var(--typebot-container-font-family);
}
.custom-header {
color: var(--typebot-header-color);
background-color: var(--typebot-header-bg-color);
border-bottom: var(--typebot-header-border);
box-shadow: var(--typebot-header-shadow);
}
.custom-header-content {
max-width: var(--typebot-header-max-width);
}
.typebot-chat-view {
max-width: var(--typebot-chat-view-max-width);
background-color: var(--typebot-chat-view-bg-color);
}
.typebot-button.active {
color: var(--typebot-button-active-color);
background-color: var(--typebot-button-active-bg-color);
}
.typebot-button {
color: var(--typebot-button-inactive-color);
background-color: var(--typebot-button-inactive-bg-color);
border: var(--typebot-button-border);
box-shadow: var(--typebot-button-shadow);
}
.typebot-host-bubble {
color: var(--typebot-host-bubble-color);
}
.typebot-host-bubble > .bubble-typing {
background-color: var(--typebot-host-bubble-bg-color);
border: var(--typebot-host-bubble-border);
box-shadow: var(--typebot-host-bubble-shadow);
}
.typebot-guest-bubble {
color: var(--typebot-guest-bubble-color);
background-color: var(--typebot-guest-bubble-bg-color);
border: var(--typebot-guest-bubble-border);
box-shadow: var(--typebot-guest-bubble-shadow);
}
.typebot-input {
color: var(--typebot-input-color);
background-color: var(--typebot-input-bg-color);
border: var(--typebot-input-border);
box-shadow: var(--typebot-input-shadow);
}
.typebot-button > .send-icon {
fill: var(--typebot-button-active-color);
}
.text-on-chat {
color: var(--typebot-chat-view-color);
}
.star-icon {
cursor: pointer;
fill: transparent;
stroke-width: 30px;
stroke: var(--typebot-button-active-bg-color);
}
.star-icon.active {
fill: var(--typebot-button-active-bg-color);
}
.scale-labels {
font-size: 13px;
color: var(--typebot-button-active-bg-color);
font-weight: 600;
padding-right: 0.5rem;
}

50
packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx Normal file
View File

@ -0,0 +1,50 @@
import React, { useEffect, useRef, useState } from 'react'
import { useTypebot } from '../../contexts/TypebotContext'
import { HostAvatar } from '../avatars/HostAvatar'
import { useFrame } from 'react-frame-component'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import { useHostAvatars } from '../../contexts/HostAvatarsContext'
export const AvatarSideContainer = () => {
const { lastBubblesTopOffset } = useHostAvatars()
const { typebot } = useTypebot()
const { window, document } = useFrame()
const [marginBottom, setMarginBottom] = useState(
window.innerWidth < 400 ? 38 : 48
)
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
const isMobile = window.innerWidth < 400
setMarginBottom(isMobile ? 38 : 48)
})
resizeObserver.observe(document.body)
}, [])
return (
<div className="flex w-6 xs:w-10 mr-2 flex-shrink-0 items-center">
<TransitionGroup>
{lastBubblesTopOffset
.filter((n) => n !== -1)
.map((topOffset, idx) => (
<CSSTransition
key={idx}
classNames="bubble"
timeout={500}
unmountOnExit
>
<div
className="fixed w-6 h-6 xs:w-10 xs:h-10 mb-4 xs:mb-2 flex items-center top-0"
style={{
top: `calc(${topOffset}px - ${marginBottom}px)`,
transition: 'top 500ms ease-out',
}}
>
<HostAvatar typebotName={typebot.name} />
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
)
}

61
packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx Normal file
View File

@ -0,0 +1,61 @@
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'
type ChatBlockProps = {
block: Block
onBlockEnd: (nextBlockId: string) => void
}
export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
const [displayedSteps, setDisplayedSteps] = useState<Step[]>([])
useEffect(() => {
setDisplayedSteps([block.steps[0]])
}, [])
useEffect(() => {
autoScrollToBottom()
}, [displayedSteps])
const autoScrollToBottom = () => {
scroll.scrollToBottom({
duration: 500,
containerId: 'scrollable-container',
})
}
const displayNextStep = () => {
const currentStep = [...displayedSteps].pop()
if (currentStep?.target?.blockId)
return onBlockEnd(currentStep?.target?.blockId)
const nextStep = block.steps[displayedSteps.length]
if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
}
return (
<div className="flex">
<HostAvatarsContext>
<AvatarSideContainer />
<div className="flex flex-col w-full">
<TransitionGroup>
{displayedSteps.map((step) => (
<CSSTransition
key={step.id}
classNames="bubble"
timeout={500}
unmountOnExit
>
<ChatStep step={step} onTransitionEnd={displayNextStep} />
</CSSTransition>
))}
</TransitionGroup>
</div>
</HostAvatarsContext>
</div>
)
}

39
packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx Normal file
View File

@ -0,0 +1,39 @@
import React, { useEffect, useState } from 'react'
import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
import { Step } from '../../../models'
import { isTextInputStep, isTextStep } from '../../../services/utils'
import { GuestBubble } from './bubbles/GuestBubble'
import { HostMessageBubble } from './bubbles/HostMessageBubble'
import { TextInput } from './inputs/TextInput'
export const ChatStep = ({
step,
onTransitionEnd,
}: {
step: Step
onTransitionEnd: () => void
}) => {
if (isTextStep(step))
return <HostMessageBubble step={step} onTransitionEnd={onTransitionEnd} />
if (isTextInputStep(step)) return <InputChatStep onSubmit={onTransitionEnd} />
return <span>No step</span>
}
const InputChatStep = ({ onSubmit }: { onSubmit: () => void }) => {
const { addNewAvatarOffset } = useHostAvatars()
const [answer, setAnswer] = useState<string>()
useEffect(() => {
addNewAvatarOffset()
}, [])
const handleSubmit = (value: string) => {
setAnswer(value)
onSubmit()
}
if (answer) {
return <GuestBubble message={answer} />
}
return <TextInput onSubmit={handleSubmit} />
}

20
packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/GuestBubble.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import { CSSTransition } from 'react-transition-group'
interface Props {
message: string
}
export const GuestBubble = ({ message }: Props): JSX.Element => {
return (
<CSSTransition classNames="bubble" timeout={1000}>
<div className="flex justify-end mb-2 items-center">
<div className="flex items-end w-11/12 lg:w-4/6 justify-end">
<div className="inline-flex px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble">
{message}
</div>
</div>
</div>
</CSSTransition>
)
}

78
packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/HostMessageBubble.tsx Normal file
View File

@ -0,0 +1,78 @@
import React, { useEffect, useRef, useState } from 'react'
import { useHostAvatars } from '../../../../contexts/HostAvatarsContext'
import { StepType, TextStep } from '../../../../models'
import { TypingContent } from './TypingContent'
type HostMessageBubbleProps = {
step: TextStep
onTransitionEnd: () => void
}
export const showAnimationDuration = 400
export const mediaLoadingFallbackTimeout = 5000
export const HostMessageBubble = ({
step,
onTransitionEnd,
}: HostMessageBubbleProps) => {
const { updateLastAvatarOffset } = useHostAvatars()
const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
useEffect(() => {
const wordCount = step.content.plainText.match(/(\w+)/g)?.length ?? 0
const typedWordsPerMinute = 250
const typingTimeout = (wordCount / typedWordsPerMinute) * 60000
sendAvatarOffset()
setTimeout(() => {
onTypingEnd()
}, typingTimeout)
}, [])
const onTypingEnd = () => {
setIsTyping(false)
setTimeout(() => {
sendAvatarOffset()
onTransitionEnd()
}, showAnimationDuration)
}
const sendAvatarOffset = () => {
if (!messageContainer.current) return
const containerDimensions = messageContainer.current.getBoundingClientRect()
updateLastAvatarOffset(containerDimensions.top + containerDimensions.height)
}
return (
<div className="flex flex-col" ref={messageContainer}>
<div className="flex mb-2 w-full lg:w-11/12 items-center">
<div className={'flex relative z-10 items-start typebot-host-bubble'}>
<div
className="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
style={{
width: isTyping ? '4rem' : '100%',
height: isTyping ? '2rem' : '100%',
}}
>
{isTyping ? <TypingContent /> : <></>}
</div>
{step.type === StepType.TEXT && (
<p
style={{
textOverflow: 'ellipsis',
}}
className={
'overflow-hidden content-opacity z-50 mx-4 my-2 whitespace-pre-wrap slate-html-container ' +
(isTyping ? 'opacity-0 h-6' : 'opacity-100 h-full')
}
dangerouslySetInnerHTML={{
__html: step.content.html,
}}
/>
)}
</div>
</div>
</div>
)
}

9
packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TypingContent.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
export const TypingContent = (): JSX.Element => (
<div className="flex items-center">
<div className="w-2 h-2 mr-1 rounded-full bubble1" />
<div className="w-2 h-2 mr-1 rounded-full bubble2" />
<div className="w-2 h-2 rounded-full bubble3" />
</div>
)

1
packages/bot-engine/src/components/ChatBlock/ChatStep/index.tsx Normal file
View File

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

46
packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextInput.tsx Normal file
View File

@ -0,0 +1,46 @@
import React, { FormEvent, useRef, useState } from 'react'
import { SendIcon } from '../../../../assets/icons'
type TextInputProps = {
onSubmit: (value: string) => void
}
export const TextInput = ({ onSubmit }: TextInputProps) => {
const inputRef = useRef(null)
const [inputValue, setInputValue] = useState('')
const handleSubmit = (e: FormEvent) => {
e.preventDefault()
if (inputValue === '') return
onSubmit(inputValue)
}
return (
<div className="flex flex-col w-full lg:w-4/6">
<div className="flex items-center">
<form
className="flex items-center justify-between rounded-lg pr-2 typebot-input"
onSubmit={handleSubmit}
>
<input
ref={inputRef}
className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
type="text"
placeholder={'Type your answer...'}
onChange={(e) => setInputValue(e.target.value)}
required
/>
<button
type="submit"
className={
'py-2 px-4 font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button active'
}
>
<span className="hidden xs:flex">Submit</span>
<SendIcon className="send-icon flex xs:hidden" />
</button>
</form>
</div>
</div>
)
}

1
packages/bot-engine/src/components/ChatBlock/index.tsx Normal file
View File

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

54
packages/bot-engine/src/components/ConversationContainer.tsx Normal file
View File

@ -0,0 +1,54 @@
import React, { useEffect, useRef, useState } from 'react'
import { PublicTypebot } from '..'
import { Block } from '..'
import { ChatBlock } from './ChatBlock/ChatBlock'
export const ConversationContainer = ({
typebot,
onNewBlockVisisble,
}: {
typebot: PublicTypebot
onNewBlockVisisble: (blockId: string) => void
}) => {
const [displayedBlocks, setDisplayedBlocks] = useState<Block[]>([])
const [isConversationEnded, setIsConversationEnded] = useState(false)
const bottomAnchor = useRef<HTMLDivElement | null>(null)
const displayNextBlock = (blockId: string) => {
const nextBlock = typebot.blocks.find((b) => b.id === blockId)
if (!nextBlock) return
onNewBlockVisisble(blockId)
setDisplayedBlocks([...displayedBlocks, nextBlock])
}
useEffect(() => {
const firstBlockId = typebot.startBlock.steps[0].target?.blockId
if (firstBlockId) displayNextBlock(firstBlockId)
}, [])
return (
<div
className="overflow-y-scroll w-full lg:w-3/4 min-h-full rounded lg:px-5 px-3 pt-10 relative scrollable-container typebot-chat-view"
id="scrollable-container"
>
{displayedBlocks.map((block, idx) => (
<ChatBlock
key={block.id + idx}
block={block}
onBlockEnd={displayNextBlock}
/>
))}
{/* We use a block to simulate padding because it makes iOS scroll flicker */}
<div
className="w-full"
ref={bottomAnchor}
style={{
transition: isConversationEnded ? 'height 1s' : '',
height: isConversationEnded ? '5%' : '20%',
}}
/>
</div>
)
}

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

@ -1,6 +1,38 @@
import React from 'react'
import { PublicTypebot } from 'db'
import { 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 { ResultContext } from '../contexts/ResultsContext'
export const TypebotViewer = (props: PublicTypebot) => {
return <div>{props.name}</div>
export type TypebotViewerProps = {
typebot: PublicTypebot
onNewBlockVisisble: (blockId: string) => void
}
export const TypebotViewer = ({
typebot,
onNewBlockVisisble,
}: TypebotViewerProps) => {
return (
<Frame
id="typebot-iframe"
head={<style>{style}</style>}
style={{ width: '100%' }}
>
<TypebotContext typebot={typebot}>
<ResultContext typebotId={typebot.id}>
<div className="flex text-base overflow-hidden bg-cover h-screen w-screen typebot-container flex-col items-center">
<div className="flex w-full h-full justify-center">
<ConversationContainer
typebot={typebot}
onNewBlockVisisble={onNewBlockVisisble}
/>
</div>
</div>
</ResultContext>
</TypebotContext>
</Frame>
)
}

60
packages/bot-engine/src/components/avatars/DefaultAvatar.tsx Normal file
View File

@ -0,0 +1,60 @@
import React from 'react'
type DefaultAvatarProps = {
displayName?: string
size?: 'extra-small' | 'small' | 'medium' | 'large' | 'full'
className?: string
}
export const DefaultAvatar = ({
displayName,
}: DefaultAvatarProps): JSX.Element => {
return (
<figure
className={
'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-full xs:h-full xs:text-xl'
}
>
<Background
className={
'absolute top-0 left-0 w-6 h-6 xs:w-full xs:h-full xs:text-xl'
}
/>
<p style={{ zIndex: 0 }}>{displayName && displayName[0].toUpperCase()}</p>
</figure>
)
}
const Background = ({ className }: { className: string }) => (
<svg
width="75"
height="75"
viewBox="0 0 75 75"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<mask id="mask0" x="0" y="0" mask-type="alpha">
<circle cx="37.5" cy="37.5" r="37.5" fill="#0042DA" />
</mask>
<g mask="url(#mask0)">
<rect x="-30" y="-43" width="131" height="154" fill="#0042DA" />
<rect
x="2.50413"
y="120.333"
width="81.5597"
height="86.4577"
rx="2.5"
transform="rotate(-52.6423 2.50413 120.333)"
stroke="#FED23D"
strokeWidth="5"
/>
<circle cx="76.5" cy="-1.5" r="29" stroke="#FF8E20" strokeWidth="5" />
<path
d="M-49.8224 22L-15.5 -40.7879L18.8224 22H-49.8224Z"
stroke="#F7F8FF"
strokeWidth="5"
/>
</g>
</svg>
)

14
packages/bot-engine/src/components/avatars/HostAvatar.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react'
import { DefaultAvatar } from './DefaultAvatar'
export const HostAvatar = ({
typebotName,
}: {
typebotName: string
}): JSX.Element => {
return (
<div className="w-full h-full rounded-full text-2xl md:text-4xl text-center xs:w-10 xs:h-10">
<DefaultAvatar displayName={typebotName} />
</div>
)
}

38
packages/bot-engine/src/contexts/HostAvatarsContext.tsx Normal file
View File

@ -0,0 +1,38 @@
import React, { createContext, ReactNode, useContext, useState } from 'react'
// This context just keeps track of the top offset of host avatar
const hostAvatarsContext = createContext<{
lastBubblesTopOffset: number[]
addNewAvatarOffset: () => void
updateLastAvatarOffset: (newOffset: number) => void
//@ts-ignore
}>({})
export const HostAvatarsContext = ({ children }: { children: ReactNode }) => {
const [lastBubblesTopOffset, setLastBubblesTopOffset] = useState<number[]>([
-1,
])
const updateLastAvatarOffset = (newOffset: number) => {
const offsets = [...lastBubblesTopOffset]
offsets[offsets.length - 1] = newOffset
setLastBubblesTopOffset(offsets)
}
const addNewAvatarOffset = () =>
setLastBubblesTopOffset([...lastBubblesTopOffset, -1])
return (
<hostAvatarsContext.Provider
value={{
lastBubblesTopOffset,
updateLastAvatarOffset,
addNewAvatarOffset,
}}
>
{children}
</hostAvatarsContext.Provider>
)
}
export const useHostAvatars = () => useContext(hostAvatarsContext)

50
packages/bot-engine/src/contexts/ResultsContext.tsx Normal file
View File

@ -0,0 +1,50 @@
import { Answer, Result } from '../models'
import React, {
createContext,
Dispatch,
ReactNode,
SetStateAction,
useContext,
useState,
} from 'react'
const resultContext = createContext<{
result: Result
setResult: Dispatch<SetStateAction<Result>>
addAnswer: (answer: Answer) => void
//@ts-ignore
}>({})
export const ResultContext = ({
children,
typebotId,
}: {
children: ReactNode
typebotId: string
}) => {
const [result, setResult] = useState<Result>({
id: 'tmp',
createdAt: new Date(),
updatedAt: new Date(),
answers: [],
typebotId,
isCompleted: false,
})
const addAnswer = (answer: Answer) =>
setResult({ ...result, answers: [...result.answers, answer] })
return (
<resultContext.Provider
value={{
result,
setResult,
addAnswer,
}}
>
{children}
</resultContext.Provider>
)
}
export const useResult = () => useContext(resultContext)

27
packages/bot-engine/src/contexts/TypebotContext.tsx Normal file
View File

@ -0,0 +1,27 @@
import React, { createContext, ReactNode, useContext } from 'react'
import { PublicTypebot } from '../models/publicTypebot'
const typebotContext = createContext<{
typebot: PublicTypebot
//@ts-ignore
}>({})
export const TypebotContext = ({
children,
typebot,
}: {
children: ReactNode
typebot: PublicTypebot
}) => {
return (
<typebotContext.Provider
value={{
typebot,
}}
>
{children}
</typebotContext.Provider>
)
}
export const useTypebot = () => useContext(typebotContext)

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

@ -1 +1,3 @@
export * from './typebot'
export * from './publicTypebot'
export * from './result'

10
packages/bot-engine/src/models/publicTypebot.ts Normal file
View File

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

11
packages/bot-engine/src/models/result.ts Normal file
View File

@ -0,0 +1,11 @@
import { Result as ResultFromPrisma } from 'db'
export type Result = Omit<ResultFromPrisma, 'answers'> & {
answers: Answer[]
}
export type Answer = {
blockId: string
stepId: string
content: string
}

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

@ -1,6 +1,6 @@
import { Typebot as TypebotFromPrisma } from 'db'
export type Typebot = TypebotFromPrisma & {
export type Typebot = Omit<TypebotFromPrisma, 'blocks' | 'startBlock'> & {
blocks: Block[]
startBlock: StartBlock
}
@ -36,38 +36,21 @@ export type Block = {
export enum StepType {
START = 'start',
TEXT = 'text',
IMAGE = 'image',
BUTTONS = 'buttons',
DATE_PICKER = 'date picker',
TEXT_INPUT = 'text input',
}
export type Target = { blockId: string; stepId?: string }
export type Step = { id: string; blockId: string; target?: Target } & (
| TextStep
| ImageStep
| ButtonsStep
| DatePickerStep
)
export type TextStep = {
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: string
content: { html: string; richText: unknown[]; plainText: string }
}
export type ImageStep = {
type: StepType.IMAGE
content: { url: string }
}
export type ButtonsStep = {
type: StepType.BUTTONS
buttons: Button[]
}
export type DatePickerStep = {
type: StepType.DATE_PICKER
content: string
export type TextInputStep = StepBase & {
type: StepType.TEXT_INPUT
}
export type Button = {

7
packages/bot-engine/src/services/utils.ts Normal file
View File

@ -0,0 +1,7 @@
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

1
packages/bot-engine/src/style.css
View File

@ -1 +0,0 @@
/*! tailwindcss v3.0.5 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}

8
packages/bot-engine/tailwind.config.js
View File

@ -1,5 +1,5 @@
module.exports = {
mode: 'jit',
content: ['./src/**/*.tsx'],
theme: {
extend: {
screens: {
@ -7,11 +7,5 @@ module.exports = {
},
},
},
variants: {
extend: {
opacity: ['disabled'],
cursor: ['disabled'],
},
},
plugins: [],
}

6
packages/db/package.json
View File

@ -12,7 +12,9 @@
"@prisma/client": "latest"
},
"scripts": {
"dev": "yarn prisma db push",
"build": "prisma generate && prisma migrate deploy"
"dev": "yarn prisma db push && BROWSER=none yarn prisma studio",
"build": "prisma generate && prisma migrate deploy",
"migration:create": "dotenv -e ../../.env yarn prisma migrate dev",
"migration:reset": "dotenv -e ../../.env yarn prisma migrate reset"
}
}

12
packages/db/prisma/migrations/20211222135449_init_answers_field_in_result/migration.sql Normal file
View File

@ -0,0 +1,12 @@
/*
Warnings:
- You are about to drop the column `steps` on the `PublicTypebot` table. All the data in the column will be lost.
*/
-- AlterTable
ALTER TABLE "PublicTypebot" DROP COLUMN "steps";
-- AlterTable
ALTER TABLE "Result" ADD COLUMN "answers" JSONB[],
ADD COLUMN "isCompleted" BOOLEAN;

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

@ -95,7 +95,6 @@ model PublicTypebot {
id String @id @default(cuid())
typebotId String @unique
typebot Typebot @relation(fields: [typebotId], references: [id], onDelete: Cascade)
steps Json[]
name String
blocks Json[]
startBlock Json
@ -107,4 +106,6 @@ model Result {
updatedAt DateTime @default(now())
typebotId String
typebot Typebot @relation(fields: [typebotId], references: [id], onDelete: Cascade)
answers Json[]
isCompleted Boolean?
}

1805
yarn.lock
View File

File diff suppressed because it is too large Load Diff