🐛 (wordpress) Fix admin critical bug and better lib import

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -1,4 +1,11 @@
-import { Button, useDisclosure, VStack, WrapItem, Text } from '@chakra-ui/react'
+import {
+  Button,
+  useDisclosure,
+  VStack,
+  WrapItem,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import {
   WordpressLogo,
   ShopifyLogo,
@@ -116,7 +123,13 @@ export const integrationsList = [
   ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
-      logo={<ScriptIcon height={100} width="70px" color="gray.300" />}
+      logo={
+        <ScriptIcon
+          height={100}
+          width="70px"
+          color={useColorModeValue('gray.800', 'gray.300')}
+        />
+      }
       label="Script"
       Modal={ScriptModal}
       {...props}

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

@@ -1,6 +1,6 @@
 import prettier from 'prettier/standalone'
 import parserHtml from 'prettier/parser-html'
-import { parseInitBubbleCode } from '../../snippetParsers'
+import { parseInitBubbleCode, typebotImportCode } from '../../snippetParsers'
 import { useTypebot } from '@/features/editor'
 import { CodeEditor } from '@/components/CodeEditor'
 import { BubbleProps } from '@typebot.io/js'
@@ -13,19 +13,21 @@ export const JavascriptBubbleSnippet = ({ theme, previewMessage }: Props) => {
   const { typebot } = useTypebot()
 
   const snippet = prettier.format(
-    `<script type="module">${parseInitBubbleCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-      theme: {
-        ...theme,
-        chatWindow: {
-          backgroundColor: typebot?.theme.general.background.content ?? '#fff',
-        },
-      },
-      previewMessage,
-    })}</script>`,
+    `<script type="module">${typebotImportCode}
+    
+${parseInitBubbleCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  theme: {
+    ...theme,
+    chatWindow: {
+      backgroundColor: typebot?.theme.general.background.content ?? '#fff',
+    },
+  },
+  previewMessage,
+})}</script>`,
     {
       parser: 'html',
       plugins: [parserHtml],

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

@@ -1,7 +1,7 @@
 import { useTypebot } from '@/features/editor'
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { parseInitPopupCode } from '../../snippetParsers'
+import { parseInitPopupCode, typebotImportCode } from '../../snippetParsers'
 import { CodeEditor } from '@/components/CodeEditor'
 import { PopupProps } from '@typebot.io/js'
 import { isCloudProdInstance } from '@/utils/helpers'
@@ -29,5 +29,7 @@ export const JavascriptPopupSnippet = ({ autoShowDelay }: Props) => {
 
 const createSnippet = (params: PopupProps): string => {
   const jsCode = parseInitPopupCode(params)
-  return `<script type="module">${jsCode}</script>`
+  return `<script type="module">${typebotImportCode}
+
+${jsCode}</script>`
 }

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

@@ -1,6 +1,6 @@
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { parseInitStandardCode } from '../../snippetParsers'
+import { parseInitStandardCode, typebotImportCode } from '../../snippetParsers'
 import { useTypebot } from '@/features/editor'
 import { CodeEditor } from '@/components/CodeEditor'
 import { isCloudProdInstance } from '@/utils/helpers'
@@ -31,12 +31,14 @@ export const JavascriptStandardSnippet = ({
 
 export const parseStandardHeadCode = (publicId?: string | null) =>
   prettier.format(
-    `<script type="module">${parseInitStandardCode({
-      typebot: publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-    })}</script>`,
+    `<script type="module">${typebotImportCode};
+
+${parseInitStandardCode({
+  typebot: publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+})}</script>`,
     { parser: 'html', plugins: [parserHtml] }
   )
 

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

@@ -7,7 +7,11 @@ import { Typebot } from 'models'
 import { useState } from 'react'
 import { env, getViewerUrl } from 'utils'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
-import { parseInlineScript, parseInitBubbleCode } from '../../../snippetParsers'
+import {
+  parseInlineScript,
+  parseInitBubbleCode,
+  typebotImportCode,
+} from '../../../snippetParsers'
 
 export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
   button: {
@@ -29,14 +33,16 @@ export const ScriptBubbleInstructions = () => {
     useState<BubbleProps['previewMessage']>()
 
   const scriptSnippet = parseInlineScript(
-    parseInitBubbleCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-      theme,
-      previewMessage,
-    })
+    `${typebotImportCode}
+
+${parseInitBubbleCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  theme,
+  previewMessage,
+})}`
   )
 
   return (

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

@@ -6,20 +6,25 @@ import { useState } from 'react'
 import { env, getViewerUrl } from 'utils'
 import { PopupSettings } from '../../../settings/PopupSettings'
 import { parseInitPopupCode } from '../../../snippetParsers'
-import { parseInlineScript } from '../../../snippetParsers/shared'
+import {
+  parseInlineScript,
+  typebotImportCode,
+} from '../../../snippetParsers/shared'
 
 export const ScriptPopupInstructions = () => {
   const { typebot } = useTypebot()
   const [inputValue, setInputValue] = useState<number>()
 
   const scriptSnippet = parseInlineScript(
-    parseInitPopupCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-      autoShowDelay: inputValue,
-    })
+    `${typebotImportCode}
+
+${parseInitPopupCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  autoShowDelay: inputValue,
+})}`
   )
 
   return (

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

@@ -7,7 +7,10 @@ import { env, getViewerUrl } from 'utils'
 import { StandardSettings } from '../../../settings/StandardSettings'
 import { parseInitStandardCode } from '../../../snippetParsers/standard'
 import { parseStandardElementCode } from '../../Javascript/JavascriptStandardSnippet'
-import { parseInlineScript } from '../../../snippetParsers/shared'
+import {
+  parseInlineScript,
+  typebotImportCode,
+} from '../../../snippetParsers/shared'
 
 export const ScriptStandardInstructions = () => {
   const { typebot } = useTypebot()
@@ -24,14 +27,14 @@ export const ScriptStandardInstructions = () => {
     inputValues.heightLabel
   )
 
-  const scriptSnippet = parseInlineScript(
-    parseInitStandardCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-    })
-  )
+  const scriptSnippet = parseInlineScript(`${typebotImportCode}
+  
+${parseInitStandardCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+})}`)
 
   return (
     <Stack spacing={4}>

apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts

@@ -6,7 +6,6 @@ import {
   parseBotProps,
   parseNumberOrBoolParam,
   parseReactBotProps,
-  typebotImportUrl,
 } from './shared'
 
 const parseButtonTheme = (
@@ -111,15 +110,10 @@ export const parseInitBubbleCode = ({
   const botProps = parseBotProps({ typebot, apiHost })
   const bubbleProps = parseBubbleProps({ previewMessage, theme })
 
-  return prettier.format(
-    `import Typebot from '${typebotImportUrl}'
-    
-  Typebot.initBubble({${botProps}${bubbleProps}});`,
-    {
-      parser: 'babel',
-      plugins: [parserBabel],
-    }
-  )
+  return prettier.format(`Typebot.initBubble({${botProps}${bubbleProps}});`, {
+    parser: 'babel',
+    plugins: [parserBabel],
+  })
 }
 
 const parseReactBubbleTheme = (theme: BubbleProps['theme']): string => {

apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts

@@ -8,7 +8,6 @@ import {
   parseReactNumberOrBoolParam,
   parseReactStringParam,
   parseStringParam,
-  typebotImportUrl,
 } from './shared'
 
 const parsePopupTheme = (theme: PopupProps['theme']): string => {
@@ -41,15 +40,10 @@ export const parseInitPopupCode = ({
   const botProps = parseBotProps({ typebot, apiHost })
   const bubbleProps = parsePopupProps({ theme, autoShowDelay })
 
-  return prettier.format(
-    `import Typebot from '${typebotImportUrl}'
-    
-  Typebot.initPopup({${botProps}${bubbleProps}});`,
-    {
-      parser: 'babel',
-      plugins: [parserBabel],
-    }
-  )
+  return prettier.format(`Typebot.initPopup({${botProps}${bubbleProps}});`, {
+    parser: 'babel',
+    plugins: [parserBabel],
+  })
 }
 
 const parseReactThemeProp = (theme: PopupProps['theme']): string => {

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

@@ -31,7 +31,7 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => {
   return `${typebotLine} ${apiHostLine}`
 }
 
-export const typebotImportUrl = `https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.14/dist/web.js`
+export const typebotImportCode = `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
 
 export const parseInlineScript = (script: string) =>
   prettier.format(

apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts

@@ -1,7 +1,7 @@
 import { BotProps } from '@typebot.io/js'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
-import { parseBotProps, typebotImportUrl } from './shared'
+import { parseBotProps } from './shared'
 
 export const parseInitStandardCode = ({
   typebot,
@@ -9,13 +9,8 @@ export const parseInitStandardCode = ({
 }: Pick<BotProps, 'typebot' | 'apiHost'>) => {
   const botProps = parseBotProps({ typebot, apiHost })
 
-  return prettier.format(
-    `import Typebot from '${typebotImportUrl}'
-  
-  Typebot.initStandard({${botProps}});`,
-    {
-      parser: 'babel',
-      plugins: [parserBabel],
-    }
-  )
+  return prettier.format(`Typebot.initStandard({${botProps}});`, {
+    parser: 'babel',
+    plugins: [parserBabel],
+  })
 }