blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (share) Use custom domain host when possible in embed instruction

Browse Source 
Closes #464
This commit is contained in:
Baptiste Arnaud
2023-04-17 14:47:30 +02:00
parent 918dffb4bc
commit cd0916df67
15 changed files with 288 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx
View File

@ -2,6 +2,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor'
import { TextLink } from '@/components/TextLink'
import { useEditor } from '@/features/editor/providers/EditorProvider'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { parseApiHost } from '@/features/publish/components/embeds/snippetParsers'
import {
Code,
ListItem,
@ -10,7 +11,6 @@ import {
StackProps,
Text,
} from '@chakra-ui/react'
import { env, getViewerUrl } from '@typebot.io/lib'
export const ApiPreviewInstructions = (props: StackProps) => {
const { typebot } = useTypebot()
@ -60,9 +60,9 @@ export const ApiPreviewInstructions = (props: StackProps) => {
<CodeEditor
isReadOnly
lang={'shell'}
value={`${
env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
}/api/v1/sendMessage`}
value={`${parseApiHost(
typebot?.customDomain
)}/api/v1/sendMessage`}
/>
<Text>with the following JSON body:</Text>
<CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
@ -80,9 +80,9 @@ export const ApiPreviewInstructions = (props: StackProps) => {
<CodeEditor
isReadOnly
lang={'shell'}
value={`${
env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
}/api/v1/sendMessage`}
value={`${parseApiHost(
typebot?.customDomain
)}/api/v1/sendMessage`}
/>
<Text>With the following JSON body:</Text>
<CodeEditor isReadOnly lang={'json'} value={replyBody} />

16
apps/builder/src/features/publish/components/embeds/modals/ApiModal.tsx
View File

@ -16,8 +16,9 @@ import {
Text,
Stack,
} from '@chakra-ui/react'
import { env, getViewerUrl } from '@typebot.io/lib'
import { ModalProps } from '../EmbedButton'
import { parseApiHost } from '../snippetParsers/shared'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
export const ApiModal = ({
isPublished,
@ -25,6 +26,7 @@ export const ApiModal = ({
isOpen,
onClose,
}: ModalProps): JSX.Element => {
const { typebot } = useTypebot()
const startParamsBody = `{
"startParams": {
"typebot": "${publicId}",
@ -57,9 +59,9 @@ export const ApiModal = ({
<CodeEditor
isReadOnly
lang={'shell'}
value={`${
env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
}/api/v1/sendMessage`}
value={`${parseApiHost(
typebot?.customDomain
)}/api/v1/sendMessage`}
/>
<Text>with the following JSON body:</Text>
<CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
@ -77,9 +79,9 @@ export const ApiModal = ({
<CodeEditor
isReadOnly
lang={'shell'}
value={`${
env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
}/api/v1/sendMessage`}
value={`${parseApiHost(
typebot?.customDomain
)}/api/v1/sendMessage`}
/>
<Text>With the following JSON body:</Text>
<CodeEditor isReadOnly lang={'json'} value={replyBody} />

12
apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx
View File

@ -1,11 +1,13 @@
import prettier from 'prettier/standalone'
import parserHtml from 'prettier/parser-html'
import { parseInitBubbleCode, typebotImportCode } from '../../snippetParsers'
import {
parseApiHost,
parseInitBubbleCode,
typebotImportCode,
} from '../../snippetParsers'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { BubbleProps } from '@typebot.io/js'
import { env, getViewerUrl } from '@typebot.io/lib'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
type Props = Pick<BubbleProps, 'theme' | 'previewMessage'>
@ -17,9 +19,7 @@ export const JavascriptBubbleSnippet = ({ theme, previewMessage }: Props) => {
${parseInitBubbleCode({
typebot: typebot?.publicId ?? '',
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(typebot?.customDomain),
theme: {
...theme,
chatWindow: {

12
apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx
View File

@ -1,11 +1,13 @@
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import parserHtml from 'prettier/parser-html'
import prettier from 'prettier/standalone'
import { parseInitPopupCode, typebotImportCode } from '../../snippetParsers'
import {
parseApiHost,
parseInitPopupCode,
typebotImportCode,
} from '../../snippetParsers'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { PopupProps } from '@typebot.io/js'
import { env, getViewerUrl } from '@typebot.io/lib'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
type Props = Pick<PopupProps, 'autoShowDelay'>
@ -14,9 +16,7 @@ export const JavascriptPopupSnippet = ({ autoShowDelay }: Props) => {
const snippet = prettier.format(
createSnippet({
typebot: typebot?.publicId ?? '',
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(typebot?.customDomain),
autoShowDelay,
}),
{

19
apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptStandardSnippet.tsx
View File

@ -1,10 +1,12 @@
import parserHtml from 'prettier/parser-html'
import prettier from 'prettier/standalone'
import { parseInitStandardCode, typebotImportCode } from '../../snippetParsers'
import {
parseApiHost,
parseInitStandardCode,
typebotImportCode,
} from '../../snippetParsers'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { env, getViewerUrl } from '@typebot.io/lib'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
type Props = {
widthLabel?: string
@ -18,7 +20,7 @@ export const JavascriptStandardSnippet = ({
const { typebot } = useTypebot()
const snippet = prettier.format(
`${parseStandardHeadCode(typebot?.publicId)}
`${parseStandardHeadCode(typebot?.publicId, typebot?.customDomain)}
${parseStandardElementCode(widthLabel, heightLabel)}`,
{
parser: 'html',
@ -29,15 +31,16 @@ export const JavascriptStandardSnippet = ({
return <CodeEditor value={snippet} lang="html" isReadOnly />
}
export const parseStandardHeadCode = (publicId?: string | null) =>
export const parseStandardHeadCode = (
publicId?: string | null,
customDomain?: string | null
) =>
prettier.format(
`<script type="module">${typebotImportCode};
${parseInitStandardCode({
typebot: publicId ?? '',
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(customDomain),
})}</script>`,
{ parser: 'html', plugins: [parserHtml] }
)

7
apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx
View File

@ -4,14 +4,13 @@ import { Stack, Text } from '@chakra-ui/react'
import { BubbleProps } from '@typebot.io/js'
import { Typebot } from '@typebot.io/schemas'
import { useState } from 'react'
import { env, getViewerUrl } from '@typebot.io/lib'
import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
import {
parseInlineScript,
parseInitBubbleCode,
typebotImportCode,
parseApiHost,
} from '../../../snippetParsers'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
button: {
@ -37,9 +36,7 @@ export const ScriptBubbleInstructions = () => {
${parseInitBubbleCode({
typebot: typebot?.publicId ?? '',
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(typebot?.customDomain),
theme,
previewMessage,
})}`

7
apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptPopupInstructions.tsx
View File

@ -1,12 +1,11 @@
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
import { Stack, Text } from '@chakra-ui/react'
import { useState } from 'react'
import { env, getViewerUrl } from '@typebot.io/lib'
import { PopupSettings } from '../../../settings/PopupSettings'
import { parseInitPopupCode } from '../../../snippetParsers'
import {
parseApiHost,
parseInlineScript,
typebotImportCode,
} from '../../../snippetParsers/shared'
@ -20,9 +19,7 @@ export const ScriptPopupInstructions = () => {
${parseInitPopupCode({
typebot: typebot?.publicId ?? '',
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(typebot?.customDomain),
autoShowDelay: inputValue,
})}`
)

7
apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptStandardInstructions.tsx
View File

@ -1,13 +1,12 @@
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
import { Stack, Code, Text } from '@chakra-ui/react'
import { useState } from 'react'
import { env, getViewerUrl } from '@typebot.io/lib'
import { StandardSettings } from '../../../settings/StandardSettings'
import { parseInitStandardCode } from '../../../snippetParsers/standard'
import { parseStandardElementCode } from '../../Javascript/JavascriptStandardSnippet'
import {
parseApiHost,
parseInlineScript,
typebotImportCode,
} from '../../../snippetParsers/shared'
@ -31,9 +30,7 @@ export const ScriptStandardInstructions = () => {
${parseInitStandardCode({
typebot: typebot?.publicId ?? '',
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(typebot?.customDomain),
})}`)
return (

8
apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx
View File

@ -12,10 +12,8 @@ import {
import { BubbleProps } from '@typebot.io/js'
import { useState } from 'react'
import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
import { parseInitBubbleCode } from '../../../snippetParsers'
import { parseApiHost, parseInitBubbleCode } from '../../../snippetParsers'
import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
import { env, getViewerUrl } from '@typebot.io/lib'
type Props = {
publicId: string
@ -31,9 +29,7 @@ export const WordpressBubbleInstructions = ({ publicId }: Props) => {
const initCode = parseInitBubbleCode({
typebot: publicId,
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(typebot?.customDomain),
theme: {
...theme,
chatWindow: {

13
apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressPopupInstructions.tsx
View File

@ -11,20 +11,21 @@ import {
import { useState } from 'react'
import { PopupSettings } from '../../../settings/PopupSettings'
import { parseInitPopupCode } from '../../../snippetParsers/popup'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
import { env, getViewerUrl } from '@typebot.io/lib'
import { parseApiHost } from '../../../snippetParsers'
type Props = {
publicId: string
customDomain?: string
}
export const WordpressPopupInstructions = ({ publicId }: Props) => {
export const WordpressPopupInstructions = ({
publicId,
customDomain,
}: Props) => {
const [autoShowDelay, setAutoShowDelay] = useState<number>()
const initCode = parseInitPopupCode({
typebot: publicId,
apiHost: isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
apiHost: parseApiHost(customDomain),
autoShowDelay,
})

18
apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts
View File

@ -1,7 +1,10 @@
import { BotProps } from '@typebot.io/js'
import parserBabel from 'prettier/parser-babel'
import prettier from 'prettier/standalone'
import { isDefined } from '@typebot.io/lib'
import { env, getViewerUrl, isDefined } from '@typebot.io/lib'
import { Typebot } from '@typebot.io/schemas'
import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
import packageJson from '../../../../../../../../packages/embeds/js/package.json'
export const parseStringParam = (fieldName: string, fieldValue?: string) =>
fieldValue ? `${fieldName}: "${fieldValue}",` : ``
@ -31,7 +34,9 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => {
return `${typebotLine} ${apiHostLine}`
}
export const typebotImportCode = `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
export const typebotImportCode = isCloudProdInstance
? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
: `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@${packageJson.version}/dist/web.js'`
export const parseInlineScript = (script: string) =>
prettier.format(
@ -41,3 +46,12 @@ export const parseInlineScript = (script: string) =>
document.body.append(typebotInitScript);`,
{ parser: 'babel', plugins: [parserBabel] }
)
export const parseApiHost = (
customDomain: Typebot['customDomain'] | undefined
) => {
if (customDomain) return new URL(`https://${customDomain}`).origin
return isCloudProdInstance
? undefined
: env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
}

3
apps/docs/openapi/builder/_spec_.json
View File

@ -1614,6 +1614,9 @@
},
"isCode": {
"type": "boolean"
},
"isExecutedOnClient": {
"type": "boolean"
}
},
"additionalProperties": false

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

@ -1275,6 +1275,9 @@
},
"isCode": {
"type": "boolean"
},
"isExecutedOnClient": {
"type": "boolean"
}
},
"additionalProperties": false
@ -3817,6 +3820,8 @@
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
@ -4042,6 +4047,83 @@
"additionalProperties": false
}
]
},
{
"type": "object",
"properties": {
"setVariable": {
"type": "object",
"properties": {
"scriptToExecute": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"args": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
{
"type": "boolean"
}
]
},
{
"type": "array",
"items": {
"type": "string",
"nullable": true
}
}
],
"nullable": true
}
},
"required": [
"id"
],
"additionalProperties": false
}
}
},
"required": [
"content",
"args"
],
"additionalProperties": false
}
},
"required": [
"scriptToExecute"
],
"additionalProperties": false
}
},
"required": [
"setVariable"
],
"additionalProperties": false
}
]
}
]
}

2
packages/embeds/js/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@typebot.io/js",
"version": "0.0.36",
"version": "0.0.37",
"description": "Javascript library to display typebots on your website",
"type": "module",
"main": "dist/index.js",

2
packages/embeds/react/package.json
View File

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