diff --git a/apps/builder/src/features/preview/components/WebPreview.tsx b/apps/builder/src/features/preview/components/WebPreview.tsx index a0bb0acd7..1f36b291c 100644 --- a/apps/builder/src/features/preview/components/WebPreview.tsx +++ b/apps/builder/src/features/preview/components/WebPreview.tsx @@ -25,15 +25,11 @@ export const WebPreview = () => { savedPreviewKey.current = previewKey; setIsSavingBeforePreview(true); - let isMounted = true; save().finally(() => { - if (isMounted) setIsSavingBeforePreview(false); + if (savedPreviewKey.current === previewKey) + setIsSavingBeforePreview(false); }); - - return () => { - isMounted = false; - }; }, [previewKey, save, typebot]); const handleNewLogs = (logs: ContinueChatResponse["logs"]) => { diff --git a/apps/builder/src/features/settings/components/SettingsPage.tsx b/apps/builder/src/features/settings/components/SettingsPage.tsx index 6d9a803a8..5c18b6484 100644 --- a/apps/builder/src/features/settings/components/SettingsPage.tsx +++ b/apps/builder/src/features/settings/components/SettingsPage.tsx @@ -17,7 +17,10 @@ export const SettingsPage = () => {
{typebot && ( {
{typebot && ( ; @@ -79,6 +81,8 @@ export const Bot = (props: BotProps & { class?: string }) => { const [customCss, setCustomCss] = createSignal(""); const [isInitialized, setIsInitialized] = createSignal(false); const [error, setError] = createSignal(); + const isPreview = () => + isNotEmpty(props.templateSlug) || (props.isPreview ?? false); const initializeBot = async () => { if (props.font) injectFont(props.font); @@ -89,13 +93,7 @@ export const Bot = (props: BotProps & { class?: string }) => { urlParams.forEach((value, key) => { prefilledVariables[key] = value; }); - const typebotIdFromProps = - typeof props.typebot === "string" ? props.typebot : undefined; - const isTemplatePreview = isNotEmpty(props.templateSlug); - const isPreview = - isTemplatePreview || - typeof props.typebot !== "string" || - (props.isPreview ?? false); + const typebotIdFromProps = props.typebot; const resultIdInStorage = getExistingResultIdFromStorage(typebotIdFromProps); const { data, error } = await startChatQuery({ @@ -103,7 +101,7 @@ export const Bot = (props: BotProps & { class?: string }) => { typebot: props.typebot, templateSlug: props.templateSlug, apiHost: props.apiHost, - isPreview, + isPreview: isPreview(), resultId: isNotEmpty(props.resultId) ? props.resultId : resultIdInStorage, prefilledVariables: { ...prefilledVariables, @@ -113,7 +111,7 @@ export const Bot = (props: BotProps & { class?: string }) => { sessionId: props.sessionId, }); if (error instanceof HTTPError) { - if (isPreview) { + if (isPreview()) { return setError( new Error("An error occurred while loading the bot.", { cause: { @@ -141,7 +139,7 @@ export const Bot = (props: BotProps & { class?: string }) => { if (!data) { if (error) { console.error(error); - if (isPreview) { + if (isPreview()) { return setError( new Error("Error! Could not reach server. Check your connection.", { cause: error, @@ -208,7 +206,9 @@ export const Bot = (props: BotProps & { class?: string }) => { props.onChatStatePersisted?.(false, { typebotId: data.typebot.id }); } - setCustomCss(data.typebot.theme.customCss ?? ""); + setCustomCss( + props.previewTheme?.customCss ?? data.typebot.theme.customCss ?? "", + ); }; createEffect(() => { @@ -221,11 +221,10 @@ export const Bot = (props: BotProps & { class?: string }) => { }); createEffect(() => { - if (isNotDefined(props.typebot) || typeof props.typebot === "string") - return; - setCustomCss(props.typebot.theme.customCss ?? ""); + if (isNotDefined(props.previewTheme)) return; + setCustomCss(props.previewTheme.customCss ?? ""); if ( - props.typebot.theme.general?.progressBar?.isEnabled && + props.previewTheme.general?.progressBar?.isEnabled && initialChatReply() && !initialChatReply()?.typebot.theme.general?.progressBar?.isEnabled ) { @@ -253,30 +252,20 @@ export const Bot = (props: BotProps & { class?: string }) => { typebot: { ...initialChatReply.typebot, settings: - typeof props.typebot === "string" || !props.typebot - ? initialChatReply.typebot.settings - : props.typebot?.settings, - theme: - typeof props.typebot === "string" || !props.typebot - ? initialChatReply.typebot.theme - : props.typebot?.theme, + props.previewSettings ?? initialChatReply.typebot.settings, + theme: props.previewTheme ?? initialChatReply.typebot.theme, }, }} context={{ apiHost: props.apiHost, wsHost: props.wsHost, - isPreview: - typeof props.typebot !== "string" || (props.isPreview ?? false), + isPreview: isPreview(), resultId: initialChatReply.resultId, sessionId: initialChatReply.sessionId, typebot: initialChatReply.typebot, storage: initialChatReply.typebot.settings.general?.rememberUser - ?.isEnabled && - !( - typeof props.typebot !== "string" || - (props.isPreview ?? false) - ) + ?.isEnabled && !isPreview() ? (initialChatReply.typebot.settings.general?.rememberUser ?.storage ?? defaultSettings.general.rememberUser.storage) : undefined, diff --git a/packages/embeds/js/src/queries/startChatQuery.ts b/packages/embeds/js/src/queries/startChatQuery.ts index f53fbfe85..59c5c93ab 100644 --- a/packages/embeds/js/src/queries/startChatQuery.ts +++ b/packages/embeds/js/src/queries/startChatQuery.ts @@ -4,7 +4,6 @@ import type { StartChatResponse, StartFrom, StartPreviewChatInput, - StartTypebot, } from "@typebot.io/chat-api/schemas"; import { isNotDefined, isNotEmpty } from "@typebot.io/lib/utils"; import ky from "ky"; @@ -17,7 +16,7 @@ import { getIframeReferrerOrigin } from "../utils/getIframeReferrerOrigin"; import { guessApiHost } from "../utils/guessApiHost"; type Props = { - typebot?: string | StartTypebot; + typebot?: string; templateSlug?: string; stripeRedirectStatus?: string; apiHost?: string; @@ -70,11 +69,10 @@ export async function startChatQuery({ if (isNotDefined(typebot)) throw new Error("Typebot ID is required to get initial messages"); - const typebotId = typeof typebot === "string" ? typebot : typebot.id; if (isPreview) { return startPreviewChat({ apiHost, - typebotId, + typebotId: typebot, startFrom, prefilledVariables, sessionId, @@ -84,7 +82,7 @@ export async function startChatQuery({ try { const iframeReferrerOrigin = getIframeReferrerOrigin(); const response = await ky.post( - `${getApiHost(apiHost)}/api/v1/typebots/${typebotId}/startChat`, + `${getApiHost(apiHost)}/api/v1/typebots/${typebot}/startChat`, { headers: { "x-typebot-iframe-referrer-origin": iframeReferrerOrigin, diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json index fbace9223..116c8ac22 100644 --- a/packages/embeds/react/package.json +++ b/packages/embeds/react/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/react", - "version": "0.10.5", + "version": "0.10.6", "description": "Convenient library to display typebots on your React app", "license": "FSL-1.1-ALv2", "type": "module", diff --git a/packages/embeds/stories/src/popup.stories.tsx b/packages/embeds/stories/src/popup.stories.tsx index a615beba5..d04b27a93 100644 --- a/packages/embeds/stories/src/popup.stories.tsx +++ b/packages/embeds/stories/src/popup.stories.tsx @@ -1,5 +1,4 @@ import { open, Popup, toggle } from "@typebot.io/react"; -import { leadGenerationTypebot } from "./assets/leadGenerationTypebot"; export const Default = () => { return ( @@ -11,13 +10,12 @@ export const Default = () => { Toggle modal ); diff --git a/packages/embeds/stories/src/standard.stories.tsx b/packages/embeds/stories/src/standard.stories.tsx index 62e1fb63d..97908c16c 100644 --- a/packages/embeds/stories/src/standard.stories.tsx +++ b/packages/embeds/stories/src/standard.stories.tsx @@ -1,14 +1,9 @@ import { Standard } from "@typebot.io/react"; -import { leadGenerationTypebot } from "./assets/leadGenerationTypebot"; export const Default = () => { return (
- +
); }; @@ -18,9 +13,8 @@ export const StartWhenIntoView = () => { <>