⚡ (engine) Improve engine overall robustness
This commit is contained in:
Baptiste Arnaud
@ -1,8 +1,7 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import type { BubbleProps } from '@typebot.io/js'
|
||||
import { defaultBubbleProps } from './constants'
|
||||
|
||||
type Props = BubbleProps & { style?: React.CSSProperties; className?: string }
|
||||
type Props = BubbleProps
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
@ -15,49 +14,40 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export const Bubble = ({ style, className, ...props }: Props) => {
|
||||
const ref = useRef<(HTMLDivElement & Props) | null>(null)
|
||||
type BubbleElement = HTMLElement & Props
|
||||
|
||||
export const Bubble = (props: Props) => {
|
||||
const ref = useRef<BubbleElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
const { registerBubbleComponent } = await import('@typebot.io/js')
|
||||
registerBubbleComponent(defaultBubbleProps)
|
||||
await import('@typebot.io/js/dist/web')
|
||||
})()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return
|
||||
ref.current.typebot = props.typebot
|
||||
ref.current.prefilledVariables = props.prefilledVariables
|
||||
ref.current.onClose = props.onClose
|
||||
ref.current.onOpen = props.onOpen
|
||||
ref.current.onNewInputBlock = props.onNewInputBlock
|
||||
ref.current.onAnswer = props.onAnswer
|
||||
ref.current.onPreviewMessageClick = props.onPreviewMessageClick
|
||||
ref.current.onEnd = props.onEnd
|
||||
ref.current.onInit = props.onInit
|
||||
}, [
|
||||
props.onAnswer,
|
||||
props.onClose,
|
||||
props.onNewInputBlock,
|
||||
props.onOpen,
|
||||
props.onPreviewMessageClick,
|
||||
props.prefilledVariables,
|
||||
props.typebot,
|
||||
props.onEnd,
|
||||
props.onInit,
|
||||
])
|
||||
const updateProps = (element: BubbleElement | null, props: Props) => {
|
||||
if (!element) return
|
||||
Object.assign(element, props)
|
||||
}
|
||||
|
||||
return (
|
||||
<typebot-bubble
|
||||
ref={ref}
|
||||
api-host={props.apiHost}
|
||||
start-group-id={props.startGroupId}
|
||||
result-id={props.resultId}
|
||||
is-preview={props.isPreview}
|
||||
class={className}
|
||||
style={style}
|
||||
/>
|
||||
)
|
||||
const initBubble = async () => {
|
||||
const bubbleElement = document.createElement(
|
||||
'typebot-bubble'
|
||||
) as BubbleElement
|
||||
ref.current = bubbleElement
|
||||
document.body.append(bubbleElement)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
if (!ref.current) await initBubble()
|
||||
updateProps(ref.current, props)
|
||||
})()
|
||||
|
||||
return () => {
|
||||
ref.current?.remove()
|
||||
}
|
||||
}, [props])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import type { PopupProps } from '@typebot.io/js'
|
||||
import { defaultPopupProps } from './constants'
|
||||
|
||||
type Props = PopupProps & { style?: React.CSSProperties; className?: string }
|
||||
type Props = PopupProps
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
@ -15,49 +14,38 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export const Popup = ({ style, className, ...props }: Props) => {
|
||||
const ref = useRef<(HTMLDivElement & Props) | null>(null)
|
||||
type PopupElement = HTMLElement & Props
|
||||
|
||||
export const Popup = (props: Props) => {
|
||||
const ref = useRef<PopupElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
const { registerPopupComponent } = await import('@typebot.io/js')
|
||||
registerPopupComponent(defaultPopupProps)
|
||||
await import('@typebot.io/js/dist/web')
|
||||
})()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return
|
||||
ref.current.typebot = props.typebot
|
||||
ref.current.prefilledVariables = props.prefilledVariables
|
||||
ref.current.onClose = props.onClose
|
||||
ref.current.onOpen = props.onOpen
|
||||
ref.current.onNewInputBlock = props.onNewInputBlock
|
||||
ref.current.onAnswer = props.onAnswer
|
||||
ref.current.onEnd = props.onEnd
|
||||
ref.current.onInit = props.onInit
|
||||
}, [
|
||||
props.onAnswer,
|
||||
props.onClose,
|
||||
props.onEnd,
|
||||
props.onNewInputBlock,
|
||||
props.onOpen,
|
||||
props.onInit,
|
||||
props.prefilledVariables,
|
||||
props.typebot,
|
||||
])
|
||||
const updateProps = (element: PopupElement | null, props: Props) => {
|
||||
if (!element) return
|
||||
Object.assign(element, props)
|
||||
}
|
||||
|
||||
return (
|
||||
<typebot-popup
|
||||
ref={ref}
|
||||
api-host={props.apiHost}
|
||||
start-group-id={props.startGroupId}
|
||||
result-id={props.resultId}
|
||||
is-preview={props.isPreview}
|
||||
is-open={props.isOpen}
|
||||
default-open={props.defaultOpen}
|
||||
class={className}
|
||||
style={style}
|
||||
/>
|
||||
)
|
||||
const initBubble = async () => {
|
||||
const popupElement = document.createElement('typebot-popup') as PopupElement
|
||||
ref.current = popupElement
|
||||
document.body.append(popupElement)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
if (!ref.current) await initBubble()
|
||||
updateProps(ref.current, props)
|
||||
})()
|
||||
|
||||
return () => {
|
||||
ref.current?.remove()
|
||||
}
|
||||
}, [props])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import type { BotProps } from '@typebot.io/js'
|
||||
import { defaultBotProps } from './constants'
|
||||
|
||||
type Props = BotProps & { style?: React.CSSProperties; className?: string }
|
||||
type Props = BotProps & {
|
||||
style?: React.CSSProperties
|
||||
className?: string
|
||||
}
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
@ -15,43 +17,21 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export const Standard = ({ style, className, ...props }: Props) => {
|
||||
const ref = useRef<(HTMLDivElement & Props) | null>(null)
|
||||
type StandardElement = HTMLElement & Props
|
||||
|
||||
export const Standard = ({ style, className, ...assignableProps }: Props) => {
|
||||
const ref = useRef<StandardElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
const { registerStandardComponent } = await import('@typebot.io/js')
|
||||
registerStandardComponent(defaultBotProps)
|
||||
await import('@typebot.io/js/dist/web')
|
||||
})()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return
|
||||
ref.current.typebot = props.typebot
|
||||
ref.current.prefilledVariables = props.prefilledVariables
|
||||
ref.current.onNewInputBlock = props.onNewInputBlock
|
||||
ref.current.onAnswer = props.onAnswer
|
||||
ref.current.onEnd = props.onEnd
|
||||
ref.current.onInit = props.onInit
|
||||
}, [
|
||||
props.onAnswer,
|
||||
props.onNewInputBlock,
|
||||
props.prefilledVariables,
|
||||
props.typebot,
|
||||
props.onEnd,
|
||||
props.onInit,
|
||||
])
|
||||
Object.assign(ref.current, assignableProps)
|
||||
}, [assignableProps])
|
||||
|
||||
return (
|
||||
<typebot-standard
|
||||
ref={ref}
|
||||
api-host={props.apiHost}
|
||||
start-group-id={props.startGroupId}
|
||||
style={style}
|
||||
class={className}
|
||||
result-id={props.resultId}
|
||||
is-preview={props.isPreview}
|
||||
/>
|
||||
)
|
||||
return <typebot-standard ref={ref} style={style} class={className} />
|
||||
}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
import type { BotProps, PopupProps, BubbleProps } from '@typebot.io/js'
|
||||
|
||||
export const defaultBotProps: BotProps = {
|
||||
typebot: '',
|
||||
onNewInputBlock: undefined,
|
||||
onAnswer: undefined,
|
||||
onEnd: undefined,
|
||||
onInit: undefined,
|
||||
isPreview: undefined,
|
||||
startGroupId: undefined,
|
||||
prefilledVariables: undefined,
|
||||
apiHost: undefined,
|
||||
resultId: undefined,
|
||||
}
|
||||
|
||||
export const defaultPopupProps: PopupProps = {
|
||||
...defaultBotProps,
|
||||
onClose: undefined,
|
||||
onOpen: undefined,
|
||||
theme: undefined,
|
||||
autoShowDelay: undefined,
|
||||
isOpen: undefined,
|
||||
defaultOpen: undefined,
|
||||
}
|
||||
|
||||
export const defaultBubbleProps: BubbleProps = {
|
||||
...defaultBotProps,
|
||||
onClose: undefined,
|
||||
onOpen: undefined,
|
||||
theme: undefined,
|
||||
previewMessage: undefined,
|
||||
}
|
||||
@ -1,10 +1,3 @@
|
||||
/* eslint-disable import/no-anonymous-default-export */
|
||||
import { Standard } from './Standard'
|
||||
import { Bubble } from './Bubble'
|
||||
import { Popup } from './Popup'
|
||||
|
||||
export { Standard, Bubble, Popup }
|
||||
|
||||
// export default { Standard, Bubble, Popup }
|
||||
|
||||
export * from '@typebot.io/js/src/features/commands'
|
||||
export { Standard } from './Standard'
|
||||
export { Bubble } from './Bubble'
|
||||
export { Popup } from './Popup'
|
||||
|
||||
487
packages/react/src/stories/assets/leadGenerationTypebot.ts
Normal file
487
packages/react/src/stories/assets/leadGenerationTypebot.ts
Normal file
@ -0,0 +1,487 @@
|
||||
import {
|
||||
BackgroundType,
|
||||
BubbleBlockType,
|
||||
ComparisonOperators,
|
||||
InputBlockType,
|
||||
LogicalOperator,
|
||||
LogicBlockType,
|
||||
StartTypebot,
|
||||
} from 'models'
|
||||
|
||||
export const leadGenerationTypebot: StartTypebot = {
|
||||
id: 'clckrl4q5000t3b6sabwokaar',
|
||||
groups: [
|
||||
{
|
||||
id: 'clckrl4q5000g3b6skizhd262',
|
||||
title: 'Start',
|
||||
blocks: [
|
||||
{
|
||||
id: '22HP69iipkLjJDTUcc1AWW',
|
||||
type: 'start',
|
||||
label: 'Start',
|
||||
groupId: 'clckrl4q5000g3b6skizhd262',
|
||||
outgoingEdgeId: 'clckrlxp400173b6sktq7gqm2',
|
||||
},
|
||||
],
|
||||
graphCoordinates: { x: 0, y: 0 },
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000h3b6sjipn4qga',
|
||||
title: 'Welcome',
|
||||
blocks: [
|
||||
{
|
||||
id: 'sc1y8VwDabNJgiVTBi4qtif',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>Welcome to <span class="slate-bold">AA</span> (Awesome Agency)</div>',
|
||||
richText: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{ text: 'Welcome to ' },
|
||||
{ bold: true, text: 'AA' },
|
||||
{ text: ' (Awesome Agency)' },
|
||||
],
|
||||
},
|
||||
],
|
||||
plainText: 'Welcome to AA (Awesome Agency)',
|
||||
},
|
||||
groupId: 'clckrl4q5000h3b6sjipn4qga',
|
||||
},
|
||||
{
|
||||
id: 's7YqZTBeyCa4Hp3wN2j922c',
|
||||
type: BubbleBlockType.IMAGE,
|
||||
content: {
|
||||
url: 'https://media2.giphy.com/media/XD9o33QG9BoMis7iM4/giphy.gif?cid=fe3852a3ihg8rvipzzky5lybmdyq38fhke2tkrnshwk52c7d&rid=giphy.gif&ct=g',
|
||||
},
|
||||
groupId: 'clckrl4q5000h3b6sjipn4qga',
|
||||
},
|
||||
{
|
||||
id: 'sbjZWLJGVkHAkDqS4JQeGow',
|
||||
type: InputBlockType.CHOICE,
|
||||
items: [
|
||||
{
|
||||
id: 'hQw2zbp7FDX7XYK9cFpbgC',
|
||||
type: 0,
|
||||
blockId: 'sbjZWLJGVkHAkDqS4JQeGow',
|
||||
content: 'Hi!',
|
||||
},
|
||||
],
|
||||
groupId: 'clckrl4q5000h3b6sjipn4qga',
|
||||
options: { buttonLabel: 'Send', isMultipleChoice: false },
|
||||
outgoingEdgeId: 'clckrm7td001b3b6s2769fh7k',
|
||||
},
|
||||
],
|
||||
graphCoordinates: { x: -8.26171875, y: 457.515625 },
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000i3b6stgxyvscq',
|
||||
title: 'Email',
|
||||
blocks: [
|
||||
{
|
||||
id: 'sxeYubYN6XzhAfG7m9Fivhc',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>Great! Nice to meet you {{Name}}</div>',
|
||||
richText: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [{ text: 'Great! Nice to meet you {{Name}}' }],
|
||||
},
|
||||
],
|
||||
plainText: 'Great! Nice to meet you {{Name}}',
|
||||
},
|
||||
groupId: 'clckrl4q5000i3b6stgxyvscq',
|
||||
},
|
||||
{
|
||||
id: 'scQ5kduafAtfP9T8SHUJnGi',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>What's the best email we can reach you at?</div>',
|
||||
richText: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{ text: "What's the best email we can reach you at?" },
|
||||
],
|
||||
},
|
||||
],
|
||||
plainText: "What's the best email we can reach you at?",
|
||||
},
|
||||
groupId: 'clckrl4q5000i3b6stgxyvscq',
|
||||
},
|
||||
{
|
||||
id: 'snbsad18Bgry8yZ8DZCfdFD',
|
||||
type: InputBlockType.EMAIL,
|
||||
groupId: 'clckrl4q5000i3b6stgxyvscq',
|
||||
options: {
|
||||
labels: { button: 'Send', placeholder: 'Type your email...' },
|
||||
variableId: 'v3VFChNVSCXQ2rXv4DrJ8Ah',
|
||||
retryMessageContent:
|
||||
"This email doesn't seem to be valid. Can you type it again?",
|
||||
},
|
||||
outgoingEdgeId: 'clckrl4q5000q3b6s5czdtm8x',
|
||||
},
|
||||
],
|
||||
graphCoordinates: { x: 669, y: 141 },
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000j3b6sloirnxza',
|
||||
title: 'Name',
|
||||
blocks: [
|
||||
{
|
||||
id: 'sgtE2Sy7cKykac9B223Kq9R',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>What's your name?</div>',
|
||||
richText: [
|
||||
{ type: 'p', children: [{ text: "What's your name?" }] },
|
||||
],
|
||||
plainText: "What's your name?",
|
||||
},
|
||||
groupId: 'clckrl4q5000j3b6sloirnxza',
|
||||
},
|
||||
{
|
||||
id: 'sqEsMo747LTDnY9FjQcEwUv',
|
||||
type: InputBlockType.TEXT,
|
||||
groupId: 'clckrl4q5000j3b6sloirnxza',
|
||||
options: {
|
||||
isLong: false,
|
||||
labels: {
|
||||
button: 'Send',
|
||||
placeholder: 'Type your answer...',
|
||||
},
|
||||
variableId: 'giiLFGw5xXBCHzvp1qAbdX',
|
||||
},
|
||||
outgoingEdgeId: 'clckrl4q5000p3b6shb5bfnzt',
|
||||
},
|
||||
],
|
||||
graphCoordinates: { x: 340, y: 143 },
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000k3b6s0anufmgy',
|
||||
title: 'Services',
|
||||
blocks: [
|
||||
{
|
||||
id: 'su7HceVXWyTCzi2vv3m4QbK',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>What services are you interested in?</div>',
|
||||
richText: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [{ text: 'What services are you interested in?' }],
|
||||
},
|
||||
],
|
||||
plainText: 'What services are you interested in?',
|
||||
},
|
||||
groupId: 'clckrl4q5000k3b6s0anufmgy',
|
||||
},
|
||||
{
|
||||
id: 's5VQGsVF4hQgziQsXVdwPDW',
|
||||
type: InputBlockType.CHOICE,
|
||||
items: [
|
||||
{
|
||||
id: 'fnLCBF4NdraSwcubnBhk8H',
|
||||
type: 0,
|
||||
blockId: 's5VQGsVF4hQgziQsXVdwPDW',
|
||||
content: 'Website dev',
|
||||
},
|
||||
{
|
||||
id: 'a782h8ynMouY84QjH7XSnR',
|
||||
type: 0,
|
||||
blockId: 's5VQGsVF4hQgziQsXVdwPDW',
|
||||
content: 'Content Marketing',
|
||||
},
|
||||
{
|
||||
id: 'jGvh94zBByvVFpSS3w97zY',
|
||||
type: 0,
|
||||
blockId: 's5VQGsVF4hQgziQsXVdwPDW',
|
||||
content: 'Social Media',
|
||||
},
|
||||
{
|
||||
id: '6PRLbKUezuFmwWtLVbvAQ7',
|
||||
type: 0,
|
||||
blockId: 's5VQGsVF4hQgziQsXVdwPDW',
|
||||
content: 'UI / UX Design',
|
||||
},
|
||||
],
|
||||
groupId: 'clckrl4q5000k3b6s0anufmgy',
|
||||
options: { buttonLabel: 'Send', isMultipleChoice: true },
|
||||
outgoingEdgeId: 'clckrl4q5000r3b6s9yxsuxu7',
|
||||
},
|
||||
],
|
||||
graphCoordinates: { x: 1002, y: 144 },
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000l3b6scn1r1nns',
|
||||
title: 'Additional information',
|
||||
blocks: [
|
||||
{
|
||||
id: 'sqR8Sz9gW21aUYKtUikq7qZ',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>Can you tell me a bit more about your needs?</div>',
|
||||
richText: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{ text: 'Can you tell me a bit more about your needs?' },
|
||||
],
|
||||
},
|
||||
],
|
||||
plainText: 'Can you tell me a bit more about your needs?',
|
||||
},
|
||||
groupId: 'clckrl4q5000l3b6scn1r1nns',
|
||||
},
|
||||
{
|
||||
id: 'sqFy2G3C1mh9p6s3QBdSS5x',
|
||||
type: InputBlockType.TEXT,
|
||||
groupId: 'clckrl4q5000l3b6scn1r1nns',
|
||||
options: {
|
||||
isLong: true,
|
||||
labels: { button: 'Send', placeholder: 'Type your answer...' },
|
||||
},
|
||||
outgoingEdgeId: 'clckrl4q5000s3b6stx5nnqbz',
|
||||
},
|
||||
],
|
||||
graphCoordinates: { x: 1337, y: 145 },
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000m3b6srabr5a2s',
|
||||
title: 'Bye',
|
||||
blocks: [
|
||||
{
|
||||
id: 'seLegenCgUwMopRFeAefqZ7',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>Perfect!</div>',
|
||||
richText: [{ type: 'p', children: [{ text: 'Perfect!' }] }],
|
||||
plainText: 'Perfect!',
|
||||
},
|
||||
groupId: 'clckrl4q5000m3b6srabr5a2s',
|
||||
},
|
||||
{
|
||||
id: 's779Q1y51aVaDUJVrFb16vv',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>We'll get back to you at {{Email}}</div>',
|
||||
richText: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [{ text: "We'll get back to you at {{Email}}" }],
|
||||
},
|
||||
],
|
||||
plainText: "We'll get back to you at {{Email}}",
|
||||
},
|
||||
groupId: 'clckrl4q5000m3b6srabr5a2s',
|
||||
},
|
||||
],
|
||||
graphCoordinates: { x: 1668, y: 143 },
|
||||
},
|
||||
{
|
||||
id: 'clckrlksq000z3b6sequnj9m3',
|
||||
graphCoordinates: { x: -355.04296875, y: 187.5078125 },
|
||||
title: 'Group #7',
|
||||
blocks: [
|
||||
{
|
||||
id: 'clckrlksq00103b6s3exi90al',
|
||||
groupId: 'clckrlksq000z3b6sequnj9m3',
|
||||
type: LogicBlockType.CONDITION,
|
||||
items: [
|
||||
{
|
||||
id: 'clckrlksq00113b6sz8naxdwx',
|
||||
blockId: 'clckrlksq00103b6s3exi90al',
|
||||
type: 1,
|
||||
content: {
|
||||
comparisons: [
|
||||
{
|
||||
id: 'clckrllsm00123b6sz38325aw',
|
||||
variableId: 'giiLFGw5xXBCHzvp1qAbdX',
|
||||
comparisonOperator: ComparisonOperators.IS_SET,
|
||||
},
|
||||
],
|
||||
logicalOperator: LogicalOperator.AND,
|
||||
},
|
||||
outgoingEdgeId: 'clckrlt0000143b6sn9euzwnm',
|
||||
},
|
||||
],
|
||||
outgoingEdgeId: 'clckrluh600153b6s66p2q6wa',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'clckrm1zq00183b6sz8ydapth',
|
||||
graphCoordinates: { x: 333.8046875, y: 408.1328125 },
|
||||
title: 'Group #7 copy',
|
||||
blocks: [
|
||||
{
|
||||
id: 'clckrm1zr00193b6szpz37plc',
|
||||
groupId: 'clckrm1zq00183b6sz8ydapth',
|
||||
type: LogicBlockType.CONDITION,
|
||||
items: [
|
||||
{
|
||||
id: 'clckrm1zr001a3b6s1hlfm2jh',
|
||||
blockId: 'clckrm1zr00193b6szpz37plc',
|
||||
type: 1,
|
||||
content: {
|
||||
comparisons: [
|
||||
{
|
||||
id: 'clckrllsm00123b6sz38325aw',
|
||||
variableId: 'giiLFGw5xXBCHzvp1qAbdX',
|
||||
comparisonOperator: ComparisonOperators.IS_SET,
|
||||
},
|
||||
],
|
||||
logicalOperator: LogicalOperator.AND,
|
||||
},
|
||||
outgoingEdgeId: 'clckrma26001c3b6sup2bdbte',
|
||||
},
|
||||
],
|
||||
outgoingEdgeId: 'clckrmbbk001d3b6shr35s2ao',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'clckrlqil00133b6sk6msgqt1',
|
||||
graphCoordinates: { x: -23.78515625, y: 199.6875 },
|
||||
title: 'Group #8',
|
||||
blocks: [
|
||||
{
|
||||
id: 'clckrl870000y3b6sxyd24qwc',
|
||||
groupId: 'clckrlqil00133b6sk6msgqt1',
|
||||
type: BubbleBlockType.TEXT,
|
||||
content: {
|
||||
html: '<div>Hi {{Name}}!</div>',
|
||||
richText: [{ type: 'p', children: [{ text: 'Hi {{Name}}!' }] }],
|
||||
plainText: 'Hi {{Name}}!',
|
||||
},
|
||||
outgoingEdgeId: 'clckrlwmd00163b6sjlass4p8',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
variables: [
|
||||
{ id: 'giiLFGw5xXBCHzvp1qAbdX', name: 'Name' },
|
||||
{ id: 'v3VFChNVSCXQ2rXv4DrJ8Ah', name: 'Email' },
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'clckrl4q5000p3b6shb5bfnzt',
|
||||
to: { groupId: 'clckrl4q5000i3b6stgxyvscq' },
|
||||
from: {
|
||||
blockId: 'sqEsMo747LTDnY9FjQcEwUv',
|
||||
groupId: 'clckrl4q5000j3b6sloirnxza',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000q3b6s5czdtm8x',
|
||||
to: { groupId: 'clckrl4q5000k3b6s0anufmgy' },
|
||||
from: {
|
||||
blockId: 'snbsad18Bgry8yZ8DZCfdFD',
|
||||
groupId: 'clckrl4q5000i3b6stgxyvscq',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000r3b6s9yxsuxu7',
|
||||
to: { groupId: 'clckrl4q5000l3b6scn1r1nns' },
|
||||
from: {
|
||||
blockId: 's5VQGsVF4hQgziQsXVdwPDW',
|
||||
groupId: 'clckrl4q5000k3b6s0anufmgy',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'clckrl4q5000s3b6stx5nnqbz',
|
||||
to: { groupId: 'clckrl4q5000m3b6srabr5a2s' },
|
||||
from: {
|
||||
blockId: 'sqFy2G3C1mh9p6s3QBdSS5x',
|
||||
groupId: 'clckrl4q5000l3b6scn1r1nns',
|
||||
},
|
||||
},
|
||||
{
|
||||
from: {
|
||||
groupId: 'clckrlksq000z3b6sequnj9m3',
|
||||
blockId: 'clckrlksq00103b6s3exi90al',
|
||||
itemId: 'clckrlksq00113b6sz8naxdwx',
|
||||
},
|
||||
to: { groupId: 'clckrlqil00133b6sk6msgqt1' },
|
||||
id: 'clckrlt0000143b6sn9euzwnm',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
groupId: 'clckrlksq000z3b6sequnj9m3',
|
||||
blockId: 'clckrlksq00103b6s3exi90al',
|
||||
},
|
||||
to: { groupId: 'clckrl4q5000h3b6sjipn4qga' },
|
||||
id: 'clckrluh600153b6s66p2q6wa',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
groupId: 'clckrlqil00133b6sk6msgqt1',
|
||||
blockId: 'clckrl870000y3b6sxyd24qwc',
|
||||
},
|
||||
to: { groupId: 'clckrl4q5000h3b6sjipn4qga' },
|
||||
id: 'clckrlwmd00163b6sjlass4p8',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
groupId: 'clckrl4q5000g3b6skizhd262',
|
||||
blockId: '22HP69iipkLjJDTUcc1AWW',
|
||||
},
|
||||
to: { groupId: 'clckrlksq000z3b6sequnj9m3' },
|
||||
id: 'clckrlxp400173b6sktq7gqm2',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
groupId: 'clckrl4q5000h3b6sjipn4qga',
|
||||
blockId: 'sbjZWLJGVkHAkDqS4JQeGow',
|
||||
},
|
||||
to: { groupId: 'clckrm1zq00183b6sz8ydapth' },
|
||||
id: 'clckrm7td001b3b6s2769fh7k',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
groupId: 'clckrm1zq00183b6sz8ydapth',
|
||||
blockId: 'clckrm1zr00193b6szpz37plc',
|
||||
itemId: 'clckrm1zr001a3b6s1hlfm2jh',
|
||||
},
|
||||
to: { groupId: 'clckrl4q5000i3b6stgxyvscq' },
|
||||
id: 'clckrma26001c3b6sup2bdbte',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
groupId: 'clckrm1zq00183b6sz8ydapth',
|
||||
blockId: 'clckrm1zr00193b6szpz37plc',
|
||||
},
|
||||
to: { groupId: 'clckrl4q5000j3b6sloirnxza' },
|
||||
id: 'clckrmbbk001d3b6shr35s2ao',
|
||||
},
|
||||
],
|
||||
theme: {
|
||||
chat: {
|
||||
inputs: {
|
||||
color: '#303235',
|
||||
backgroundColor: '#FFFFFF',
|
||||
placeholderColor: '#9095A0',
|
||||
},
|
||||
buttons: { color: '#FFFFFF', backgroundColor: '#0042DA' },
|
||||
hostAvatar: {
|
||||
url: 'https://avatars.githubusercontent.com/u/16015833?v=4',
|
||||
isEnabled: true,
|
||||
},
|
||||
hostBubbles: { color: '#303235', backgroundColor: '#F7F8FF' },
|
||||
guestBubbles: { color: '#FFFFFF', backgroundColor: '#FF8E21' },
|
||||
},
|
||||
general: {
|
||||
font: 'Open Sans',
|
||||
background: { type: BackgroundType.COLOR, content: '#fff' },
|
||||
},
|
||||
},
|
||||
settings: {
|
||||
general: { isBrandingEnabled: true },
|
||||
metadata: {
|
||||
description:
|
||||
'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.',
|
||||
},
|
||||
typingEmulation: { speed: 300, enabled: true, maxDelay: 1.5 },
|
||||
},
|
||||
}
|
||||
@ -8,6 +8,7 @@ import {
|
||||
setPrefilledVariables,
|
||||
} from '@typebot.io/js'
|
||||
import { useState } from 'react'
|
||||
import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
|
||||
|
||||
export const Default = () => {
|
||||
const [name, setName] = useState('John')
|
||||
@ -32,7 +33,7 @@ export const Default = () => {
|
||||
</div>
|
||||
|
||||
<Bubble
|
||||
typebot="ladleTypebot"
|
||||
typebot={leadGenerationTypebot}
|
||||
apiHost="http://localhost:3001"
|
||||
prefilledVariables={{
|
||||
Name: 'John',
|
||||
@ -45,9 +46,7 @@ export const Default = () => {
|
||||
theme={{
|
||||
button: {
|
||||
backgroundColor: '#FF7537',
|
||||
icon: {
|
||||
color: 'white',
|
||||
},
|
||||
iconColor: 'white',
|
||||
},
|
||||
}}
|
||||
isPreview
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Popup } from '../Popup'
|
||||
import { open, toggle } from '@typebot.io/js'
|
||||
import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
@ -7,7 +8,7 @@ export const Default = () => {
|
||||
<button onClick={open}>Open modal</button>
|
||||
<button onClick={toggle}>Toggle modal</button>
|
||||
<Popup
|
||||
typebot="clctayswj000l3b6y2vkh8kwg"
|
||||
typebot={leadGenerationTypebot}
|
||||
apiHost="http://localhost:3001"
|
||||
autoShowDelay={3000}
|
||||
isPreview
|
||||
|
||||
@ -1,13 +1,28 @@
|
||||
import { Standard } from '..'
|
||||
import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
<div style={{ height: '500px' }}>
|
||||
<Standard
|
||||
typebot="ladleTypebot"
|
||||
typebot={leadGenerationTypebot}
|
||||
apiHost="http://localhost:3001"
|
||||
isPreview
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const StartWhenIntoView = () => {
|
||||
return (
|
||||
<>
|
||||
<div style={{ height: '300vh' }} />
|
||||
<Standard
|
||||
typebot={leadGenerationTypebot}
|
||||
apiHost="http://localhost:3001"
|
||||
isPreview
|
||||
style={{ height: '300px' }}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user