blsmedia/bot
2
0
Fork 0
Code Activity

⚡ (chat) Improve chat API compatibility with preview mode

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-01-16 12:13:21 +01:00
parent dbe5c3cdb1
commit 7311988901
55 changed files with 4133 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@typebot.io/react",
"version": "1.0.0",
"description": "",
"version": "0.0.1",
"description": "React library to display typebots on your website",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",

51
packages/react/src/Bubble.tsx
View File

@ -1,5 +1,8 @@
import { useEffect } from 'react'
import { useEffect, useRef } from 'react'
import type { BubbleProps } from '@typebot.io/js'
import { defaultBubbleProps } from './constants'
type Props = BubbleProps & { style?: React.CSSProperties; className?: string }
declare global {
namespace JSX {
@ -7,18 +10,54 @@ declare global {
'typebot-bubble': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement>,
HTMLElement
>
> & { class?: string }
}
}
}
export const Bubble = (props: BubbleProps) => {
export const Bubble = ({ style, className, ...props }: Props) => {
const ref = useRef<(HTMLDivElement & Props) | null>(null)
useEffect(() => {
;(async () => {
const { registerBubbleComponent } = await import('@typebot.io/js')
registerBubbleComponent(props)
registerBubbleComponent(defaultBubbleProps)
})()
}, [props])
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return <typebot-bubble />
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,
])
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}
/>
)
}

51
packages/react/src/Popup.tsx
View File

@ -1,5 +1,8 @@
import { useEffect } from 'react'
import { useEffect, useRef } from 'react'
import type { PopupProps } from '@typebot.io/js'
import { defaultPopupProps } from './constants'
type Props = PopupProps & { style?: React.CSSProperties; className?: string }
declare global {
namespace JSX {
@ -7,18 +10,54 @@ declare global {
'typebot-popup': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement>,
HTMLElement
>
> & { class?: string }
}
}
}
export const Popup = (props: PopupProps) => {
export const Popup = ({ style, className, ...props }: Props) => {
const ref = useRef<(HTMLDivElement & Props) | null>(null)
useEffect(() => {
;(async () => {
const { registerPopupComponent } = await import('@typebot.io/js')
registerPopupComponent(props)
registerPopupComponent(defaultPopupProps)
})()
}, [props])
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return <typebot-popup />
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,
])
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}
/>
)
}

42
packages/react/src/Standard.tsx
View File

@ -1,7 +1,8 @@
import { useEffect } from 'react'
import { useEffect, useRef } from 'react'
import type { BotProps } from '@typebot.io/js'
import { defaultBotProps } from './constants'
type Props = BotProps
type Props = BotProps & { style?: React.CSSProperties; className?: string }
declare global {
namespace JSX {
@ -9,19 +10,48 @@ declare global {
'typebot-standard': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement>,
HTMLElement
>
> & { class?: string }
}
}
}
export const Standard = (props: Props) => {
export const Standard = ({ style, className, ...props }: Props) => {
const ref = useRef<(HTMLDivElement & Props) | null>(null)
useEffect(() => {
;(async () => {
const { registerStandardComponent } = await import('@typebot.io/js')
registerStandardComponent(props)
registerStandardComponent(defaultBotProps)
})()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return <typebot-standard />
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,
])
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}
/>
)
}

32
packages/react/src/constants.ts Normal file
View File

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

2
packages/react/src/index.ts
View File

@ -5,6 +5,6 @@ import { Popup } from './Popup'
export { Standard, Bubble, Popup }
export default { Standard, Bubble, Popup }
// export default { Standard, Bubble, Popup }
export * from '@typebot.io/js/src/features/commands'

13
packages/react/src/stories/bubble.stories.tsx
View File

@ -32,7 +32,7 @@ export const Default = () => {
</div>
<Bubble
typebotId="ladleTypebot"
typebot="ladleTypebot"
apiHost="http://localhost:3001"
prefilledVariables={{
Name: 'John',
@ -42,12 +42,15 @@ export const Default = () => {
message: 'Hello, I am a preview message',
autoShowDelay: 3000,
}}
button={{
backgroundColor: '#FF7537',
icon: {
color: 'white',
theme={{
button: {
backgroundColor: '#FF7537',
icon: {
color: 'white',
},
},
}}
isPreview
/>
</div>
)

3
packages/react/src/stories/popup.stories.tsx
View File

@ -7,9 +7,10 @@ export const Default = () => {
<button onClick={open}>Open modal</button>
<button onClick={toggle}>Toggle modal</button>
<Popup
typebotId="ladleTypebot"
typebot="clctayswj000l3b6y2vkh8kwg"
apiHost="http://localhost:3001"
autoShowDelay={3000}
isPreview
/>
</>
)

6
packages/react/src/stories/standard.stories.tsx
View File

@ -3,7 +3,11 @@ import { Standard } from '..'
export const Default = () => {
return (
<div style={{ height: '500px' }}>
<Standard typebotId="ladleTypebot" apiHost="http://localhost:3001" />
<Standard
typebot="ladleTypebot"
apiHost="http://localhost:3001"
isPreview
/>
</div>
)
}