blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add Set variable step

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-14 07:49:24 +01:00
parent 13f72f5ff7
commit 4ccb7bca49
55 changed files with 1024 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
import { BubbleStepType, InputStepType, StepType } from 'models'
import { BubbleStepType, InputStepType, StepType, LogicStepType } from 'models'
import { useDnd } from 'contexts/DndContext'
import React, { useEffect, useState } from 'react'
import { StepIcon } from './StepIcon'
@ -9,10 +9,10 @@ export const StepCard = ({
type,
onMouseDown,
}: {
type: BubbleStepType | InputStepType
type: BubbleStepType | InputStepType | LogicStepType
onMouseDown: (
e: React.MouseEvent,
type: BubbleStepType | InputStepType
type: BubbleStepType | InputStepType | LogicStepType
) => void
}) => {
const { draggedStepType } = useDnd()

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

@ -3,6 +3,7 @@ import {
CalendarIcon,
ChatIcon,
CheckSquareIcon,
EditIcon,
EmailIcon,
FlagIcon,
GlobeIcon,
@ -10,7 +11,7 @@ import {
PhoneIcon,
TextIcon,
} from 'assets/icons'
import { BubbleStepType, InputStepType, StepType } from 'models'
import { BubbleStepType, InputStepType, LogicStepType, StepType } from 'models'
import React from 'react'
type StepIconProps = { type: StepType } & IconProps
@ -41,6 +42,9 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
case InputStepType.CHOICE: {
return <CheckSquareIcon {...props} />
}
case LogicStepType.SET_VARIABLE: {
return <EditIcon {...props} />
}
case 'start': {
return <FlagIcon {...props} />
}

5
apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
View File

@ -1,5 +1,5 @@
import { Text } from '@chakra-ui/react'
import { BubbleStepType, InputStepType, StepType } from 'models'
import { BubbleStepType, InputStepType, LogicStepType, StepType } from 'models'
import React from 'react'
type Props = { type: StepType }
@ -28,6 +28,9 @@ export const StepTypeLabel = ({ type }: Props) => {
case InputStepType.CHOICE: {
return <Text>Button</Text>
}
case LogicStepType.SET_VARIABLE: {
return <Text>Set variable</Text>
}
default: {
return <></>
}

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

@ -5,7 +5,7 @@ import {
SimpleGrid,
useEventListener,
} from '@chakra-ui/react'
import { BubbleStepType, InputStepType } from 'models'
import { BubbleStepType, InputStepType, LogicStepType } from 'models'
import { useDnd } from 'contexts/DndContext'
import React, { useState } from 'react'
import { StepCard, StepCardOverlay } from './StepCard'
@ -31,7 +31,7 @@ export const StepTypesList = () => {
const handleMouseDown = (
e: React.MouseEvent,
type: BubbleStepType | InputStepType
type: BubbleStepType | InputStepType | LogicStepType
) => {
const element = e.currentTarget as HTMLDivElement
const rect = element.getBoundingClientRect()
@ -85,6 +85,15 @@ export const StepTypesList = () => {
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Logic
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(LogicStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
{draggedStepType && (
<StepCardOverlay
type={draggedStepType}

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

@ -4,6 +4,9 @@ import {
ChoiceInputOptions,
InputStep,
InputStepType,
LogicStepType,
SetVariableOptions,
Step,
TextInputOptions,
} from 'models'
import {
@ -15,10 +18,12 @@ import {
} from './bodies'
import { ChoiceInputSettingsBody } from './bodies/ChoiceInputSettingsBody'
import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
type Props = {
step: InputStep
step: Step
}
export const SettingsPopoverContent = ({ step }: Props) => {
const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
@ -35,7 +40,7 @@ export const SettingsPopoverContent = ({ step }: Props) => {
const SettingsPopoverBodyContent = ({ step }: Props) => {
const { updateStep } = useTypebot()
const handleOptionsChange = (
options: TextInputOptions | ChoiceInputOptions
options: TextInputOptions | ChoiceInputOptions | SetVariableOptions
) => updateStep(step.id, { options } as Partial<InputStep>)
switch (step.type) {
@ -95,6 +100,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
/>
)
}
case LogicStepType.SET_VARIABLE: {
return (
<SetVariableSettingsBody
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
default: {
return <></>
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
View File

@ -1,7 +1,8 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { ChoiceInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { ChoiceInputOptions, Variable } from 'models'
import React from 'react'
type ChoiceInputSettingsBodyProps = {
@ -17,6 +18,8 @@ export const ChoiceInputSettingsBody = ({
options && onOptionsChange({ ...options, isMultipleChoice })
const handleButtonLabelChange = (buttonLabel: string) =>
options && onOptionsChange({ ...options, buttonLabel })
const handleVariableChange = (variable: Variable) =>
options && onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -39,6 +42,15 @@ export const ChoiceInputSettingsBody = ({
/>
</Stack>
)}
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
View File

@ -1,7 +1,8 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { DateInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { DateInputOptions, Variable } from 'models'
import React from 'react'
type DateInputSettingsBodyProps = {
@ -23,6 +24,8 @@ export const DateInputSettingsBody = ({
onOptionsChange({ ...options, isRange })
const handleHasTimeChange = (hasTime: boolean) =>
onOptionsChange({ ...options, hasTime })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -75,6 +78,15 @@ export const DateInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
View File

@ -1,6 +1,7 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { EmailInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { EmailInputOptions, Variable } from 'models'
import React from 'react'
type EmailInputSettingsBodyProps = {
@ -16,6 +17,8 @@ export const EmailInputSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -41,6 +44,15 @@ export const EmailInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
View File

@ -1,7 +1,8 @@
import { FormLabel, HStack, Stack } from '@chakra-ui/react'
import { SmartNumberInput } from 'components/settings/SmartNumberInput'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { NumberInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { NumberInputOptions, Variable } from 'models'
import React from 'react'
import { removeUndefinedFields } from 'services/utils'
@ -24,6 +25,8 @@ export const NumberInputSettingsBody = ({
onOptionsChange(removeUndefinedFields({ ...options, max }))
const handleStepChange = (step?: number) =>
onOptionsChange(removeUndefinedFields({ ...options, step }))
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -79,6 +82,15 @@ export const NumberInputSettingsBody = ({
onValueChange={handleStepChange}
/>
</HStack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx
View File

@ -1,6 +1,7 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { EmailInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { EmailInputOptions, Variable } from 'models'
import React from 'react'
type PhoneNumberSettingsBodyProps = {
@ -16,6 +17,8 @@ export const PhoneNumberSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -41,6 +44,15 @@ export const PhoneNumberSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

46
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/SetVariableSettingsBody.tsx Normal file
View File

@ -0,0 +1,46 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedTextarea } from 'components/shared/DebouncedTextarea'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { SetVariableOptions, Variable } from 'models'
import React from 'react'
type Props = {
options?: SetVariableOptions
onOptionsChange: (options: SetVariableOptions) => void
}
export const SetVariableSettingsBody = ({
options,
onOptionsChange,
}: Props) => {
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
const handleExpressionChange = (expressionToEvaluate: string) =>
onOptionsChange({ ...options, expressionToEvaluate })
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="variable-search">
Search or create variable:
</FormLabel>
<VariableSearchInput
onSelectVariable={handleVariableChange}
initialVariableId={options?.variableId}
id="variable-search"
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="expression">
Value / Expression:
</FormLabel>
<DebouncedTextarea
id="expression"
initialValue={options?.expressionToEvaluate ?? ''}
delay={100}
onChange={handleExpressionChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
View File

@ -1,7 +1,8 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { TextInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { TextInputOptions, Variable } from 'models'
import React from 'react'
type TextInputSettingsBodyProps = {
@ -19,6 +20,8 @@ export const TextInputSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleLongChange = (isLong: boolean) =>
onOptionsChange({ ...options, isLong })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -50,6 +53,15 @@ export const TextInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
View File

@ -1,6 +1,7 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { UrlInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { UrlInputOptions, Variable } from 'models'
import React from 'react'
type UrlInputSettingsBodyProps = {
@ -16,6 +17,8 @@ export const UrlInputSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -41,6 +44,15 @@ export const UrlInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

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

@ -10,7 +10,13 @@ import React, { useEffect, useMemo, useState } from 'react'
import { Block, Step } from 'models'
import { useGraph } from 'contexts/GraphContext'
import { StepIcon } from 'components/board/StepTypesList/StepIcon'
import { isChoiceInput, isDefined, isInputStep, isTextBubbleStep } from 'utils'
import {
isChoiceInput,
isDefined,
isInputStep,
isLogicStep,
isTextBubbleStep,
} from 'utils'
import { Coordinates } from '@dnd-kit/core/dist/types'
import { TextEditor } from './TextEditor/TextEditor'
import { StepNodeContent } from './StepNodeContent'
@ -212,7 +218,9 @@ export const StepNode = ({
)}
</Flex>
</PopoverTrigger>
{isInputStep(step) && <SettingsPopoverContent step={step} />}
{(isInputStep(step) || isLogicStep(step)) && (
<SettingsPopoverContent step={step} />
)}
</Popover>
)}
</ContextMenu>

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

@ -1,5 +1,13 @@
import { Flex, Text } from '@chakra-ui/react'
import { Step, StartStep, BubbleStepType, InputStepType } from 'models'
import { useTypebot } from 'contexts/TypebotContext'
import {
Step,
StartStep,
BubbleStepType,
InputStepType,
LogicStepType,
SetVariableStep,
} from 'models'
import { ChoiceItemsList } from './ChoiceInputStepNode/ChoiceItemsList'
type Props = {
@ -68,6 +76,9 @@ export const StepNodeContent = ({ step }: Props) => {
case InputStepType.CHOICE: {
return <ChoiceItemsList step={step} />
}
case LogicStepType.SET_VARIABLE: {
return <SetVariableNodeContent step={step} />
}
case 'start': {
return <Text>{step.label}</Text>
}
@ -76,3 +87,17 @@ export const StepNodeContent = ({ step }: Props) => {
}
}
}
const SetVariableNodeContent = ({ step }: { step: SetVariableStep }) => {
const { typebot } = useTypebot()
const variableName =
typebot?.variables.byId[step.options?.variableId ?? '']?.name ?? ''
const expression = step.options?.expressionToEvaluate ?? ''
return (
<Text color={'gray.500'}>
{variableName === '' && expression === ''
? 'Click to edit...'
: `${variableName} = ${expression}`}
</Text>
)
}

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

@ -1,4 +1,4 @@
import { Stack, useOutsideClick } from '@chakra-ui/react'
import { Flex, Stack, useOutsideClick } from '@chakra-ui/react'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import {
Plate,
@ -10,10 +10,12 @@ import {
import { editorStyle, platePlugins } from 'libs/plate'
import { useDebounce } from 'use-debounce'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { createEditor } from 'slate'
import { BaseSelection, createEditor, Transforms } from 'slate'
import { ToolBar } from './ToolBar'
import { parseHtmlStringToPlainText } from 'services/utils'
import { TextStep } from 'models'
import { TextStep, Variable } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { ReactEditor } from 'slate-react'
type TextEditorProps = {
stepId: string
@ -26,14 +28,20 @@ export const TextEditor = ({
stepId,
onClose,
}: TextEditorProps) => {
const randomEditorId = useMemo(() => Math.random().toString(), [])
const editor = useMemo(
() => withPlate(createEditor(), { id: stepId, plugins: platePlugins }),
() =>
withPlate(createEditor(), { id: randomEditorId, plugins: platePlugins }),
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
)
const { updateStep } = useTypebot()
const [value, setValue] = useState(initialValue)
const [debouncedValue] = useDebounce(value, 500)
const varDropdownRef = useRef<HTMLDivElement | null>(null)
const rememberedSelection = useRef<BaseSelection | null>(null)
const [isVariableDropdownOpen, setIsVariableDropdownOpen] = useState(false)
const textEditorRef = useRef<HTMLDivElement>(null)
useOutsideClick({
ref: textEditorRef,
@ -48,6 +56,29 @@ export const TextEditor = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedValue])
useEffect(() => {
if (!isVariableDropdownOpen) return
const el = varDropdownRef.current
if (!el) return
const { top, left } = computeTargetCoord()
el.style.top = `${top}px`
el.style.left = `${left}px`
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isVariableDropdownOpen])
const computeTargetCoord = () => {
const selection = window.getSelection()
const relativeParent = textEditorRef.current
if (!selection || !relativeParent) return { top: 0, left: 0 }
const range = selection.getRangeAt(0)
const selectionBoundingRect = range.getBoundingClientRect()
const relativeRect = relativeParent.getBoundingClientRect()
return {
top: selectionBoundingRect.bottom - relativeRect.top,
left: selectionBoundingRect.left - relativeRect.left,
}
}
const save = (value: unknown[]) => {
if (value.length === 0) return
const html = serializeHtml(editor, {
@ -65,6 +96,19 @@ export const TextEditor = ({
const handleMouseDown = (e: React.MouseEvent) => {
e.stopPropagation()
}
const handleVariableSelected = (variable: Variable) => {
setIsVariableDropdownOpen(false)
if (!rememberedSelection.current) return
Transforms.select(editor, rememberedSelection.current)
Transforms.insertText(editor, '{{' + variable.name + '}}')
ReactEditor.focus(editor as unknown as ReactEditor)
}
const handleChangeEditorContent = (val: unknown[]) => {
setValue(val)
setIsVariableDropdownOpen(false)
}
return (
<Stack
flex="1"
@ -73,11 +117,12 @@ export const TextEditor = ({
borderColor="blue.500"
rounded="md"
onMouseDown={handleMouseDown}
pos="relative"
spacing={0}
>
<ToolBar />
<ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
<Plate
id={stepId}
id={randomEditorId}
editableProps={{
style: editorStyle,
autoFocus: true,
@ -88,15 +133,34 @@ export const TextEditor = ({
})
},
'aria-label': 'Text editor',
onBlur: () => {
rememberedSelection.current = editor.selection
},
}}
initialValue={
initialValue.length === 0
? [{ type: 'p', children: [{ text: '' }] }]
: initialValue
}
onChange={setValue}
onChange={handleChangeEditorContent}
editor={editor}
/>
{isVariableDropdownOpen && (
<Flex
pos="absolute"
ref={varDropdownRef}
shadow="lg"
rounded="md"
bgColor="white"
w="250px"
>
<VariableSearchInput
onSelectVariable={handleVariableSelected}
placeholder="Search for a variable"
isDefaultOpen
/>
</Flex>
)}
</Stack>
)
}

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

@ -9,8 +9,14 @@ 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) => {
type Props = { onVariablesButtonClick: () => void } & StackProps
export const ToolBar = (props: Props) => {
const editor = usePlateEditorRef()
const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
e.preventDefault()
props.onVariablesButtonClick()
}
return (
<HStack
bgColor={'white'}
@ -21,7 +27,9 @@ export const ToolBar = (props: StackProps) => {
borderBottomWidth={1}
{...props}
>
<Button size="sm">Variables</Button>
<Button size="sm" onMouseDown={handleVariablesButtonMouseDown}>
Variables
</Button>
<span data-testid="bold-button">
<MarkToolbarButton
type={getPluginType(editor, MARK_BOLD)}

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

@ -26,7 +26,7 @@ export const PreviewDrawer = () => {
const [restartKey, setRestartKey] = useState(0)
const publicTypebot = useMemo(
() => (typebot ? parseTypebotToPublicTypebot(typebot) : undefined),
() => (typebot ? { ...parseTypebotToPublicTypebot(typebot) } : undefined),
[typebot]
)

38
apps/builder/components/shared/DebouncedTextarea.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Textarea, TextareaProps } from '@chakra-ui/react'
import { ChangeEvent, useEffect, useState } from 'react'
import { useDebounce } from 'use-debounce'
type Props = Omit<TextareaProps, 'onChange' | 'value'> & {
delay: number
initialValue: string
onChange: (debouncedValue: string) => void
}
export const DebouncedTextarea = ({
delay,
onChange,
initialValue,
...props
}: Props) => {
const [currentValue, setCurrentValue] = useState(initialValue)
const [currentValueDebounced] = useDebounce(currentValue, delay)
useEffect(() => {
if (currentValueDebounced === initialValue) return
onChange(currentValueDebounced)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentValueDebounced])
const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
setCurrentValue(e.target.value)
}
return (
<Textarea
{...props}
value={currentValue}
onChange={handleChange}
resize={'vertical'}
/>
)
}

0
apps/builder/components/theme/GeneralContent/FontSelector/SearchableDropdown.tsx → apps/builder/components/shared/SearchableDropdown.tsx
View File

170
apps/builder/components/shared/VariableSearchInput.tsx Normal file
View File

@ -0,0 +1,170 @@
import {
useDisclosure,
useOutsideClick,
Flex,
Popover,
PopoverTrigger,
Input,
PopoverContent,
Button,
InputProps,
IconButton,
} from '@chakra-ui/react'
import { PlusIcon, TrashIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext'
import { Variable } from 'models'
import React, { useState, useRef, ChangeEvent, useMemo, useEffect } from 'react'
import { generate } from 'short-uuid'
import { isDefined } from 'utils'
type Props = {
initialVariableId?: string
onSelectVariable: (variable: Pick<Variable, 'id' | 'name'>) => void
isDefaultOpen?: boolean
} & InputProps
export const VariableSearchInput = ({
initialVariableId,
onSelectVariable,
isDefaultOpen,
...inputProps
}: Props) => {
const { onOpen, onClose, isOpen } = useDisclosure()
const { typebot, createVariable, deleteVariable } = useTypebot()
const variables = useMemo(
() =>
typebot?.variables.allIds.map((id) => typebot.variables.byId[id]) ?? [],
[typebot?.variables]
)
const [inputValue, setInputValue] = useState(
typebot?.variables.byId[initialVariableId ?? '']?.name ?? ''
)
const [filteredItems, setFilteredItems] = useState<Variable[]>(variables)
const dropdownRef = useRef(null)
const inputRef = useRef(null)
useOutsideClick({
ref: dropdownRef,
handler: onClose,
})
useEffect(() => {
if (isDefaultOpen) onOpen()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value)
onOpen()
if (e.target.value === '') {
setFilteredItems([...variables.slice(0, 50)])
return
}
setFilteredItems([
...variables
.filter((item) =>
item.name.toLowerCase().includes((e.target.value ?? '').toLowerCase())
)
.slice(0, 50),
])
}
const handleVariableNameClick = (variable: Variable) => () => {
setInputValue(variable.name)
onSelectVariable(variable)
onClose()
}
const handleCreateNewVariableClick = () => {
if (!inputValue || inputValue === '') return
const id = generate()
createVariable({ id, name: inputValue })
onSelectVariable({ id, name: inputValue })
onClose()
}
const handleDeleteVariableClick =
(variable: Variable) => (e: React.MouseEvent) => {
e.stopPropagation()
deleteVariable(variable.id)
setFilteredItems(filteredItems.filter((item) => item.id !== variable.id))
if (variable.name === inputValue) setInputValue('')
}
return (
<Flex ref={dropdownRef} w="full">
<Popover
isOpen={isOpen}
initialFocusRef={inputRef}
matchWidth
offset={[0, 0]}
isLazy
>
<PopoverTrigger>
<Input
data-testid="variables-input"
ref={inputRef}
value={inputValue}
onChange={onInputChange}
onClick={onOpen}
{...inputProps}
/>
</PopoverTrigger>
<PopoverContent
maxH="35vh"
overflowY="scroll"
spacing="0"
role="menu"
w="inherit"
shadow="lg"
>
{(inputValue?.length ?? 0) > 0 &&
!isDefined(variables.find((v) => v.name === inputValue)) && (
<Button
role="menuitem"
minH="40px"
onClick={handleCreateNewVariableClick}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
variant="ghost"
justifyContent="flex-start"
leftIcon={<PlusIcon />}
>
Create "{inputValue}"
</Button>
)}
{filteredItems.length > 0 && (
<>
{filteredItems.map((item, idx) => {
return (
<Button
role="menuitem"
minH="40px"
key={idx}
onClick={handleVariableNameClick(item)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
variant="ghost"
justifyContent="space-between"
>
{item.name}
<IconButton
icon={<TrashIcon />}
aria-label="Remove variable"
size="xs"
onClick={handleDeleteVariableClick(item)}
/>
</Button>
)
})}
</>
)}
</PopoverContent>
</Popover>
</Flex>
)
}

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

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Text, Flex } from '@chakra-ui/react'
import { SearchableDropdown } from './SearchableDropdown'
import { SearchableDropdown } from '../../../shared/SearchableDropdown'
type FontSelectorProps = {
activeFont?: string