blsmedia/bot
2
0
Fork 0
Code Activity

🐛 Improve bot libs mount in prod env

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-21 08:28:36 +01:00
parent 46bf25a580
commit 907cad8050
11 changed files with 78 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/docs/openapi/chat/_spec_.json
View File

@ -335,7 +335,12 @@
"type": "string"
},
"height": {
"anyOf": [
{
"type": "number"
},
{}
]
}
},
"required": [
@ -3386,20 +3391,27 @@
]
},
"content": {
"allOf": [
{
"type": "object",
"properties": {
"url": {
"type": "string"
}
},
"additionalProperties": false
},
{
"type": "object",
"properties": {
"height": {
"type": "number"
}
},
"required": [
"height"
],
"additionalProperties": false
}
]
}
},
"required": [
"type",

5
packages/js/package.json
View File

@ -1,13 +1,13 @@
{
"name": "@typebot.io/js",
"version": "0.0.6",
"version": "0.0.7",
"description": "Javascript library to display typebots on your website",
"type": "module",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"dev": "rollup --watch --config rollup.config.js",
"build": "rollup --config rollup.config.js && rm -rf dist/dts",
"build": "rollup --config rollup.config.js",
"lint": "eslint --fix \"src/**/*.ts*\""
},
"license": "MIT",
@ -31,7 +31,6 @@
"postcss": "8.4.21",
"react": "18.2.0",
"rollup": "3.12.0",
"rollup-plugin-dts": "5.1.1",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript-paths": "^1.4.0",
"tailwindcss": "3.2.4",

14
packages/js/src/components/Bot.tsx
View File

@ -3,9 +3,8 @@ import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
import { injectCustomHeadCode, isNotEmpty } from 'utils'
import { getInitialChatReplyQuery } from '@/queries/getInitialChatReplyQuery'
import { ConversationContainer } from './ConversationContainer'
import type { ChatReply, StartParams } from 'models'
import { setIsMobile } from '@/utils/isMobileSignal'
import { BotContext, InitialChatReply } from '@/types'
import { BotContext, InitialChatReply, OutgoingLog } from '@/types'
import { ErrorMessage } from './ErrorMessage'
import {
getExistingResultIdFromSession,
@ -13,13 +12,18 @@ import {
} from '@/utils/sessionStorage'
import { setCssVariablesValue } from '@/utils/setCssVariablesValue'
export type BotProps = StartParams & {
export type BotProps = {
typebot: string | any
isPreview?: boolean
resultId?: string
startGroupId?: string
prefilledVariables?: Record<string, unknown>
apiHost?: string
onNewInputBlock?: (ids: { id: string; groupId: string }) => void
onAnswer?: (answer: { message: string; blockId: string }) => void
onInit?: () => void
onEnd?: () => void
onNewLogs?: (logs: ChatReply['logs']) => void
onNewLogs?: (logs: OutgoingLog[]) => void
}
export const Bot = (props: BotProps & { class?: string }) => {
@ -138,7 +142,7 @@ type BotContentProps = {
onNewInputBlock?: (block: { id: string; groupId: string }) => void
onAnswer?: (answer: { message: string; blockId: string }) => void
onEnd?: () => void
onNewLogs?: (logs: ChatReply['logs']) => void
onNewLogs?: (logs: OutgoingLog[]) => void
}
const BotContent = (props: BotContentProps) => {

4
packages/js/src/components/ConversationContainer/ConversationContainer.tsx
View File

@ -2,7 +2,7 @@ import type { ChatReply, Theme } from 'models'
import { createEffect, createSignal, For, Show } from 'solid-js'
import { sendMessageQuery } from '@/queries/sendMessageQuery'
import { ChatChunk } from './ChatChunk'
import { BotContext, InitialChatReply } from '@/types'
import { BotContext, InitialChatReply, OutgoingLog } from '@/types'
import { isNotDefined } from 'utils'
import { executeClientSideAction } from '@/utils/executeClientSideActions'
import { LoadingChunk } from './LoadingChunk'
@ -38,7 +38,7 @@ type Props = {
onNewInputBlock?: (ids: { id: string; groupId: string }) => void
onAnswer?: (answer: { message: string; blockId: string }) => void
onEnd?: () => void
onNewLogs?: (logs: ChatReply['logs']) => void
onNewLogs?: (logs: OutgoingLog[]) => void
}
export const ConversationContainer = (props: Props) => {

3
packages/js/src/features/bubble/components/BubbleButton.tsx
View File

@ -13,8 +13,7 @@ const defaultIconColor = 'white'
export const BubbleButton = (props: Props) => {
return (
<button
// eslint-disable-next-line solid/reactivity
onClick={props.toggleBot}
onClick={() => props.toggleBot()}
class={
'absolute bottom-4 right-4 shadow-md w-12 h-12 rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in'
}

3
packages/js/src/features/popup/components/Popup.tsx
View File

@ -39,10 +39,11 @@ export const Popup = (props: PopupProps) => {
const [isBotOpened, setIsBotOpened] = createSignal(
// eslint-disable-next-line solid/reactivity
popupProps.isOpen ?? popupProps.defaultOpen ?? false
popupProps.isOpen ?? false
)
onMount(() => {
if (popupProps.defaultOpen) openBot()
window.addEventListener('message', processIncomingEvent)
const autoShowDelay = popupProps.autoShowDelay
if (isDefined(autoShowDelay)) {

6
packages/js/src/types.ts
View File

@ -16,3 +16,9 @@ export type InitialChatReply = ChatReply & {
typebot: NonNullable<ChatReply['typebot']>
sessionId: NonNullable<ChatReply['sessionId']>
}
export type OutgoingLog = {
status: string
description: string
details?: unknown
}

2
packages/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@typebot.io/react",
"version": "0.0.6",
"version": "0.0.7",
"description": "React library to display typebots on your website",
"main": "dist/index.js",
"types": "dist/index.d.ts",

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

@ -1,4 +1,4 @@
import { useEffect, useRef } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import type { BubbleProps } from '@typebot.io/js'
type Props = BubbleProps
@ -18,33 +18,32 @@ type BubbleElement = HTMLElement & Props
export const Bubble = (props: Props) => {
const ref = useRef<BubbleElement | null>(null)
const [isInitialized, setIsInitialized] = useState(false)
useEffect(() => {
;(async () => {
await import('@typebot.io/js/dist/web')
initBubble()
setIsInitialized(true)
})()
return () => {
ref.current?.remove()
}
}, [])
useEffect(() => {
updateProps(ref.current, props)
}, [props])
const updateProps = (element: BubbleElement | null, props: Props) => {
if (!element) return
Object.assign(element, props)
}
const initBubble = async () => {
const attachBubbleToDom = useCallback((props: Props) => {
const bubbleElement = document.createElement(
'typebot-bubble'
) as BubbleElement
if (ref.current) return
ref.current = bubbleElement
injectPropsToElement(ref.current, props)
document.body.append(ref.current)
}, [])
useEffect(() => {
if (!isInitialized) return
if (!ref.current) attachBubbleToDom(props)
injectPropsToElement(ref.current as BubbleElement, props)
}, [attachBubbleToDom, isInitialized, props])
const injectPropsToElement = (element: BubbleElement, props: Props) => {
Object.assign(element, props)
}
return null

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

@ -1,4 +1,4 @@
import { useEffect, useRef } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import type { PopupProps } from '@typebot.io/js'
type Props = PopupProps
@ -18,31 +18,33 @@ type PopupElement = HTMLElement & Props
export const Popup = (props: Props) => {
const ref = useRef<PopupElement | null>(null)
const [isInitialized, setIsInitialized] = useState(false)
useEffect(() => {
;(async () => {
await import('@typebot.io/js/dist/web')
initPopup()
setIsInitialized(true)
})()
return () => {
ref.current?.remove()
}
}, [])
useEffect(() => {
updateProps(ref.current, props)
}, [props])
const updateProps = (element: PopupElement | null, props: Props) => {
if (!element) return
Object.assign(element, props)
}
const initPopup = async () => {
const attachPopupToDom = useCallback((props: Props) => {
const popupElement = document.createElement('typebot-popup') as PopupElement
if (ref.current) return
ref.current = popupElement
injectPropsToElement(ref.current, props)
document.body.append(ref.current)
}, [])
useEffect(() => {
if (!isInitialized) return
if (!ref.current) attachPopupToDom(props)
injectPropsToElement(ref.current as PopupElement, props)
}, [attachPopupToDom, isInitialized, props])
const injectPropsToElement = (element: PopupElement, props: Props) => {
Object.assign(element, props)
}
return null

17
pnpm-lock.yaml generated
View File

@ -593,7 +593,6 @@ importers:
postcss: 8.4.21
react: 18.2.0
rollup: 3.12.0
rollup-plugin-dts: 5.1.1
rollup-plugin-postcss: 4.0.2
rollup-plugin-typescript-paths: ^1.4.0
solid-element: 1.6.3
@ -620,7 +619,6 @@ importers:
postcss: 8.4.21
react: 18.2.0
rollup: 3.12.0
rollup-plugin-dts: 5.1.1_tkwgik6422u3whqaozmypsnvni
rollup-plugin-postcss: 4.0.2_postcss@8.4.21
rollup-plugin-typescript-paths: 1.4.0_typescript@4.9.4
tailwindcss: 3.2.4_postcss@8.4.21
@ -14431,6 +14429,7 @@ packages:
engines: {node: '>=12'}
dependencies:
'@jridgewell/sourcemap-codec': 1.4.14
dev: false
/make-dir/3.1.0:
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@ -17690,20 +17689,6 @@ packages:
inherits: 2.0.4
dev: false
/rollup-plugin-dts/5.1.1_tkwgik6422u3whqaozmypsnvni:
resolution: {integrity: sha512-zpgo52XmnLg8w4k3MScinFHZK1+ro6r7uVe34fJ0Ee8AM45FvgvTuvfWWaRgIpA4pQ1BHJuu2ospncZhkcJVeA==}
engines: {node: '>=v14'}
peerDependencies:
rollup: ^3.0.0
typescript: ^4.1
dependencies:
magic-string: 0.27.0
rollup: 3.12.0
typescript: 4.9.4
optionalDependencies:
'@babel/code-frame': 7.18.6
dev: true
/rollup-plugin-postcss/4.0.2_postcss@8.4.21:
resolution: {integrity: sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==}
engines: {node: '>=10'}