@designcrowd/library.brand-page 6.0.5 → 6.0.6-ast-bugs

package/lib/src/brand-page-maker/composables/ai-chat/types.d.ts

@@ -1,5 +1,7 @@
 import type { ComputedRef, Ref } from 'vue';
 import { type PlanItem } from '../../../clients/websocket-gateway-client';
+import type { AgentAction } from './ui-actions';
+export type { AgentAction };
 export interface BaseThreadMessage {
     id: string;
     role: 'user' | 'agent';
@@ -14,6 +16,7 @@ export interface TextThreadMessage extends BaseThreadMessage {
     initialMessage?: string;
     planItems?: PlanItem[];
     completedItemIds?: string[];
+    actions?: AgentAction[];
 }
 export interface ImageThreadMessage extends BaseThreadMessage {
     type: 'image';

package/lib/src/brand-page-maker/composables/ai-chat/ui-actions.d.ts

@@ -0,0 +1,29 @@
+import type { AiAssistantToolCall } from '../../../clients/ai-assistant-client';
+export declare const UI_ACTIONS: {
+    readonly UPGRADE: "upgrade";
+};
+export declare const AI_CHAT_UI_ACTIONS: {
+    readonly upgrade: {
+        readonly label: "Upgrade";
+        readonly icon: "upgrade-alt";
+    };
+};
+export type AgentActionType = keyof typeof AI_CHAT_UI_ACTIONS;
+export type AgentAction = {
+    type: AgentActionType;
+    label: string;
+    icon?: string;
+};
+/**
+ * Split server tool calls into page mutations and UI-action CTAs.
+ *
+ * Mutations are executed by the metadata-builder and answered with tool results;
+ * UI actions (e.g. the Upgrade button) are rendered only. UI actions MUST stay out
+ * of `mutationToolCalls`: they are never executed and never get a tool result, so
+ * leaking one into the mutation set would leave an unresolved tool call and break
+ * the next LLM turn on the same thread.
+ */
+export declare function partitionAiToolCalls(toolCalls: AiAssistantToolCall[]): {
+    mutationToolCalls: AiAssistantToolCall[];
+    actions: AgentAction[];
+};

package/lib/src/brand-page-maker/composables/ai-chat/ui-actions.js

@@ -0,0 +1,32 @@
+// Action identities — must match the tool names emitted by the AI pipeline.
+export const UI_ACTIONS = {
+    UPGRADE: 'upgrade',
+};
+export const AI_CHAT_UI_ACTIONS = {
+    [UI_ACTIONS.UPGRADE]: { label: 'Upgrade', icon: 'upgrade-alt' },
+};
+// `hasOwnProperty` (not `in`) so inherited Object keys like "constructor" are never
+// mistaken for a UI action.
+const isUiActionFn = (fn) => !!fn && Object.prototype.hasOwnProperty.call(AI_CHAT_UI_ACTIONS, fn);
+/**
+ * Split server tool calls into page mutations and UI-action CTAs.
+ *
+ * Mutations are executed by the metadata-builder and answered with tool results;
+ * UI actions (e.g. the Upgrade button) are rendered only. UI actions MUST stay out
+ * of `mutationToolCalls`: they are never executed and never get a tool result, so
+ * leaking one into the mutation set would leave an unresolved tool call and break
+ * the next LLM turn on the same thread.
+ */
+export function partitionAiToolCalls(toolCalls) {
+    const mutationToolCalls = [];
+    const actions = [];
+    for (const tc of toolCalls) {
+        if (isUiActionFn(tc.function)) {
+            actions.push({ type: tc.function, ...AI_CHAT_UI_ACTIONS[tc.function] });
+        }
+        else {
+            mutationToolCalls.push(tc);
+        }
+    }
+    return { mutationToolCalls, actions };
+}

package/lib/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.js

@@ -1,12 +1,12 @@
-import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { getInstance as getAiAssistantClient, AI_ASSISTANT_AGENT_TYPES, } from '../../../clients/ai-assistant-client';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '../../../brand-page/utils/style.util';
 import { AI_ASSISTANT_TOOL_NAMES } from '../../../metadata-builder/parsers/ai-toolcall-parser';
 import { WebSocketGatewayClient, } from '../../../clients/websocket-gateway-client';
 import { minifyBrandPageMetadata } from '../../../utils/minify-brand-page-metadata';
-import { ensureBrandPageItemIds } from '../../../metadata-builder/builders/item-id-utils';
 import { buildAssetManifest } from '../../../utils/build-asset-manifest';
+import cloneDeep from 'lodash.clonedeep';
 import { usePageNavigationStore } from '../../../shared/page-navigation/store/page-navigation-store';
 import { navigateToPageByPageId } from '../../routing';
 import { useSnapshotStore, useAiWebsiteBuilderThreadStore, useAiCheckpointStore, useBrandPageContainerStore, useUiStore, } from '../../stores';
@@ -19,6 +19,7 @@ import { pickErrorMessage, pickWsErrorMessage, buildSubmitErrorReport, } from '.
 import raygunUtil from '../../../brand-page/utils/raygun.util';
 import { useEventTracker, AI_CTA_LOCATIONS } from '../useEventTracker';
 import { Logger } from '../../../metadata-builder/logger';
+import { partitionAiToolCalls } from './ui-actions';
 const BUILD_TIMEOUT_MS = 600000;
 const aiLogger = new Logger();
 let activeBuildWsClient = null;
@@ -178,10 +179,6 @@ export function useAiWebsiteBuilderChat() {
     };
     const buildMessagePayload = async (userPrompt) => {
         const brandPageData = brandPageMakerStore.brandPageData;
-        // BP-5603: stamp stable uuid ids onto every nested item BEFORE minifying,
-        // so the id the AI is shown (and returns as `item_id`) is the exact id the
-        // executor matches when applying tool calls to this same live model.
-        ensureBrandPageItemIds(brandPageData);
         const headerLogoDraftToken = brandPageData.pageHeaderDesktop?.logoImage?.logoDraftToken ??
             uiStore.logoDraftToken;
         const [assets, logoContext] = await Promise.all([
@@ -192,6 +189,7 @@ export function useAiWebsiteBuilderChat() {
         const currentPageId = pageNavigationStore.activePageId;
         const websiteContext = {
             metadata: minifyBrandPageMetadata(brandPageData, assets),
+            metadataFull: cloneDeep(brandPageData),
             ...(assets.length > 0 && { assets }),
             websiteTemplateToken: containerStore.designTemplateToken,
             ...(containerStore.designDraftToken && {
@@ -375,6 +373,7 @@ export function useAiWebsiteBuilderChat() {
                 let settled = false;
                 let retryCount = 0;
                 let lastAiMessage = null;
+                let lastActions;
                 let handler = null;
                 // Vacant-slot queue scoped to this build session. Persists across
                 // retry rounds so a failed CREATE returns to its planned slot via
@@ -394,190 +393,206 @@ export function useAiWebsiteBuilderChat() {
                     finishBuild();
                     reject(new Error('Build timeout'));
                 }, BUILD_TIMEOUT_MS);
-                handler = (msg) => {
+                // Transition the build to "done" exactly once (idempotent). Returns
+                // false when already settled, so callers can early-return.
+                const markDone = () => {
                     if (settled)
-                        return;
+                        return false;
+                    settled = true;
+                    clearTimeout(timeout);
+                    finishBuild();
+                    return true;
+                };
+                // The single terminal path. Every resolve goes through here, so "where
+                // does this Promise settle?" has one answer.
+                const settle = (result) => {
+                    if (markDone())
+                        resolve(result);
+                };
+                // Streaming progress frames mutate the in-flight typing bubble and never
+                // settle the build. Returns true when `msg` was a progress frame.
+                const applyProgressUpdate = (msg) => {
+                    if (msg.type === 'chat_started' && msg.message) {
+                        withTypingMessage((m) => {
+                            m.initialMessage = msg.message;
+                        });
+                        return true;
+                    }
+                    if (msg.type === 'plan_announced' && msg.items) {
+                        withTypingMessage((m) => {
+                            if (!m.planItems)
+                                m.planItems = msg.items;
+                        });
+                        return true;
+                    }
+                    if (msg.type === 'item_complete' && msg.itemId) {
+                        const itemId = msg.itemId;
+                        withTypingMessage((m) => {
+                            if (!m.completedItemIds?.includes(itemId)) {
+                                m.completedItemIds = [...(m.completedItemIds ?? []), itemId];
+                            }
+                        });
+                        return true;
+                    }
+                    return false;
+                };
+                // Apply one round of build tool calls: settle on completion/failure, or
+                // bump retryCount so the handler processes the next round's frame.
+                const processServerResponse = async (aiResponse) => {
+                    const toolCalls = aiResponse.toolCalls ?? [];
                     try {
-                        if (msg.buildId !== aiThreadStore.buildId)
-                            return;
-                        if (isStopped.value) {
-                            settled = true;
-                            clearTimeout(timeout);
-                            finishBuild();
-                            resolve({ text: null });
-                            return;
-                        }
-                        if (msg.type === 'chat_started' && msg.message) {
-                            withTypingMessage((m) => {
-                                m.initialMessage = msg.message;
+                        // No tool calls = build cycle complete (success, max retries, or no retryable sections).
+                        if (toolCalls.length === 0) {
+                            // Defence-in-depth: empty toolCalls AND empty message is a
+                            // degenerate response (graph reached END producing nothing). Never
+                            // show "Your website has been updated" — it hides real failures.
+                            const hasMeaningfulMessage = Boolean(aiResponse.message || lastAiMessage);
+                            if (!hasMeaningfulMessage) {
+                                raygunUtil.safeSendRaygunError(new Error('AI build server_response had empty toolCalls and empty message'), {
+                                    tags: [
+                                        'feature:ai-website-builder',
+                                        'failure:degenerate_server_response',
+                                    ],
+                                    customData: {
+                                        build_id: aiThreadStore.buildId ?? null,
+                                        thread_id: aiThreadStore.threadId ?? null,
+                                    },
+                                });
+                                settle({
+                                    text: 'Something went wrong while updating your website. Please try again.',
+                                    isError: true,
+                                });
+                                return;
+                            }
+                            // Mark settled BEFORE the await so concurrent frames are ignored.
+                            if (!markDone())
+                                return;
+                            await snapshotStore.refreshSnapshotAsync();
+                            resolve({
+                                text: aiResponse.message || lastAiMessage || '',
+                                actions: lastActions,
                             });
                             return;
                         }
-                        if (msg.type === 'plan_announced' && msg.items) {
-                            withTypingMessage((m) => {
-                                if (!m.planItems)
-                                    m.planItems = msg.items;
+                        // Tool calls present — apply locally and submit results back.
+                        const { toolResults, aiMessage } = await applyToolCallsAsync(aiResponse, userMessageId, vacantSlots);
+                        lastAiMessage = aiMessage;
+                        // Submit all tool results (success + failure) so the AI pipeline
+                        // persists ToolMessages matching every tool_call in the conversation.
+                        const failedResults = toolResults.filter((tr) => tr.success !== 'success');
+                        aiLogger.log('tool submission for results', {
+                            total: toolResults.length,
+                            failed: failedResults.length,
+                            failedResults,
+                            retryCount,
+                        });
+                        const submitResult = await client.submitToolResultsBuildAsync(aiThreadStore.threadId, {
+                            toolCalls: toolResults,
+                            agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+                            connectionId,
+                            retryCount,
+                            userPlan,
+                        });
+                        if (failedResults.length === 0) {
+                            settle({
+                                text: aiMessage || 'Your website has been updated.',
+                                actions: lastActions,
                             });
                             return;
                         }
-                        if (msg.type === 'item_complete' && msg.itemId) {
-                            const itemId = msg.itemId;
-                            withTypingMessage((m) => {
-                                if (!m.completedItemIds?.includes(itemId)) {
-                                    m.completedItemIds = [
-                                        ...(m.completedItemIds ?? []),
-                                        itemId,
-                                    ];
-                                }
-                            });
+                        // Failed sections will retry: refresh buildId so the handler matches
+                        // the next round's frames, and count the round.
+                        if (submitResult.buildId) {
+                            aiThreadStore.buildId = submitResult.buildId;
+                        }
+                        retryCount += 1;
+                    }
+                    catch (err) {
+                        aiLogger.log('server_response apply error', { err });
+                        // Client-side apply failure (metadata builder, tool-call parser,
+                        // missing field, etc.) — the server thinks the build succeeded but we
+                        // couldn't materialise the changes. Surface it and report to Raygun
+                        // (the server didn't see this failure).
+                        raygunUtil.safeSendRaygunError(err instanceof Error
+                            ? err
+                            : new Error('AI apply failed: non-Error thrown'), {
+                            tags: [
+                                'feature:ai-website-builder',
+                                'failure:apply_error',
+                                'stage:client_apply',
+                            ],
+                            customData: {
+                                thread_id: aiThreadStore.threadId ?? null,
+                                build_id: aiThreadStore.buildId ?? null,
+                            },
+                        });
+                        settle({
+                            text: "I couldn't apply those changes to your website. Please try again.",
+                            isError: true,
+                        });
+                    }
+                };
+                const handleBuildError = (msg) => {
+                    if (!markDone())
+                        return;
+                    // Backend already reports the underlying pipeline failure to Raygun
+                    // (with full traceback). We report the frontend's RECEIPT of the error
+                    // frame as a separate signal — distinct tag/grouping — for triangulation:
+                    // both sides → normal crash; frontend only → backend Raygun outage;
+                    // backend only → WS frame didn't reach client.
+                    const wsMsg = msg;
+                    raygunUtil.safeSendRaygunError(new Error(`AI build ${wsMsg.type}: ${wsMsg.code ?? wsMsg.error ?? 'unknown'}`), {
+                        tags: [
+                            'feature:ai-website-builder',
+                            'failure:websocket_error_received',
+                            `frame_type:${wsMsg.type}`,
+                        ],
+                        customData: {
+                            code: wsMsg.code ?? null,
+                            message: wsMsg.message ?? null,
+                            error: wsMsg.error ?? null,
+                            build_id: wsMsg.buildId ?? null,
+                            thread_id: aiThreadStore.threadId ?? null,
+                        },
+                    });
+                    resolve({ text: pickWsErrorMessage(msg), isError: true });
+                };
+                // Single dispatch point: ignore stale/already-settled frames, then route
+                // by frame kind. Progress frames update the bubble; server_response and
+                // error frames are the only ones that can settle the build.
+                handler = (msg) => {
+                    if (settled)
+                        return;
+                    try {
+                        if (msg.buildId !== aiThreadStore.buildId)
+                            return;
+                        if (isStopped.value) {
+                            settle({ text: null });
                             return;
                         }
+                        if (applyProgressUpdate(msg))
+                            return;
                         if (msg.type === 'server_response') {
-                            const toolCalls = (msg.toolCalls ||
-                                []);
-                            const aiResponse = {
+                            // CTA buttons (e.g. Upgrade) ride in toolCalls but are presentation,
+                            // not page edits. Split them out so only real mutations reach the
+                            // metadata-builder and the tool-result submission — a UI action must
+                            // never be answered with a tool result (it isn't in the agent's
+                            // conversation), or the next turn on the thread fails.
+                            const { mutationToolCalls, actions } = partitionAiToolCalls((msg.toolCalls || []));
+                            if (actions.length)
+                                lastActions = actions;
+                            void processServerResponse({
                                 threadId: aiThreadStore.threadId || '',
-                                toolCalls,
+                                toolCalls: mutationToolCalls,
                                 message: msg.message || null,
                                 type: 'tool_calls',
                                 totalPaidToolCalls: 0,
                                 timestamp: Date.now(),
-                            };
-                            (async () => {
-                                try {
-                                    // No tool calls = build cycle complete (success, max retries, or no retryable sections)
-                                    if (toolCalls.length === 0) {
-                                        // Defence-in-depth: a server_response with no toolCalls AND
-                                        // no message text is a degenerate response — it means the
-                                        // backend graph reached END without producing anything
-                                        // actionable. The server-side fix in stream_with_push now
-                                        // converts this to a build_error frame, but if a future
-                                        // regression slips through we must NOT show "Your website
-                                        // has been updated" — that hides real failures from users
-                                        // and from monitoring.
-                                        const hasMeaningfulMessage = Boolean(aiResponse.message || lastAiMessage);
-                                        if (!hasMeaningfulMessage) {
-                                            raygunUtil.safeSendRaygunError(new Error('AI build server_response had empty toolCalls and empty message'), {
-                                                tags: [
-                                                    'feature:ai-website-builder',
-                                                    'failure:degenerate_server_response',
-                                                ],
-                                                customData: {
-                                                    build_id: aiThreadStore.buildId ?? null,
-                                                    thread_id: aiThreadStore.threadId ?? null,
-                                                },
-                                            });
-                                            settled = true;
-                                            clearTimeout(timeout);
-                                            finishBuild();
-                                            resolve({
-                                                text: 'Something went wrong while updating your website. Please try again.',
-                                                isError: true,
-                                            });
-                                            return;
-                                        }
-                                        settled = true;
-                                        clearTimeout(timeout);
-                                        finishBuild();
-                                        resolve({
-                                            text: aiResponse.message || lastAiMessage || '',
-                                        });
-                                        return;
-                                    }
-                                    // Tool calls present — apply locally and submit results back
-                                    const { toolResults, aiMessage } = await applyToolCallsAsync(aiResponse, userMessageId, vacantSlots);
-                                    lastAiMessage = aiMessage;
-                                    // Submit all tool results (success + failure) so the AI pipeline
-                                    // persists ToolMessages matching every tool_call in the conversation.
-                                    const failedResults = toolResults.filter((tr) => tr.success !== 'success');
-                                    aiLogger.log('tool submission for results', {
-                                        total: toolResults.length,
-                                        failed: failedResults.length,
-                                        failedResults,
-                                        retryCount,
-                                    });
-                                    const submitResult = await client.submitToolResultsBuildAsync(aiThreadStore.threadId, {
-                                        toolCalls: toolResults,
-                                        agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
-                                        connectionId,
-                                        retryCount,
-                                        userPlan,
-                                    });
-                                    if (failedResults.length === 0) {
-                                        settled = true;
-                                        clearTimeout(timeout);
-                                        finishBuild();
-                                        resolve({
-                                            text: aiMessage || 'Your website has been updated.',
-                                        });
-                                        return;
-                                    }
-                                    // Update buildId so the handler matches subsequent WS messages
-                                    if (submitResult.buildId) {
-                                        aiThreadStore.buildId = submitResult.buildId;
-                                    }
-                                    // eslint-disable-next-line no-plusplus
-                                    retryCount++;
-                                }
-                                catch (err) {
-                                    aiLogger.log('server_response apply error', { err });
-                                    // Client-side apply failure (metadata builder, tool-call parser,
-                                    // missing field, etc.) — server thinks the build succeeded but we
-                                    // couldn't materialise the changes. Mark the chat bubble as an
-                                    // error so the user sees the real outcome, and report to Raygun
-                                    // so the failure is visible in monitoring (the server didn't see it).
-                                    raygunUtil.safeSendRaygunError(err instanceof Error
-                                        ? err
-                                        : new Error('AI apply failed: non-Error thrown'), {
-                                        tags: [
-                                            'feature:ai-website-builder',
-                                            'failure:apply_error',
-                                            'stage:client_apply',
-                                        ],
-                                        customData: {
-                                            thread_id: aiThreadStore.threadId ?? null,
-                                            build_id: aiThreadStore.buildId ?? null,
-                                        },
-                                    });
-                                    settled = true;
-                                    clearTimeout(timeout);
-                                    finishBuild();
-                                    resolve({
-                                        text: "I couldn't apply those changes to your website. Please try again.",
-                                        isError: true,
-                                    });
-                                }
-                            })();
+                            });
                             return;
                         }
                         if (msg.type === 'server_error' || msg.type === 'build_error') {
-                            settled = true;
-                            clearTimeout(timeout);
-                            finishBuild();
-                            // Backend already reports the underlying pipeline failure to
-                            // Raygun via its structured handler (stage:run_build /
-                            // stage:section_builder / etc. with full Python traceback).
-                            // We report the frontend's RECEIPT of the error frame as a
-                            // separate signal — distinct tag, distinct grouping. This
-                            // gives triangulation: both sides have entry → normal crash;
-                            // frontend only → backend Raygun outage; backend only → WS
-                            // frame didn't reach client (different bug shape).
-                            const wsMsg = msg;
-                            raygunUtil.safeSendRaygunError(new Error(`AI build ${wsMsg.type}: ${wsMsg.code ?? wsMsg.error ?? 'unknown'}`), {
-                                tags: [
-                                    'feature:ai-website-builder',
-                                    'failure:websocket_error_received',
-                                    `frame_type:${wsMsg.type}`,
-                                ],
-                                customData: {
-                                    code: wsMsg.code ?? null,
-                                    message: wsMsg.message ?? null,
-                                    error: wsMsg.error ?? null,
-                                    build_id: wsMsg.buildId ?? null,
-                                    thread_id: aiThreadStore.threadId ?? null,
-                                },
-                            });
-                            resolve({ text: pickWsErrorMessage(msg), isError: true });
+                            handleBuildError(msg);
                             return;
                         }
                     }
@@ -586,12 +601,10 @@ export function useAiWebsiteBuilderChat() {
                             err,
                             type: msg.type,
                         });
-                        if (!settled) {
-                            settled = true;
-                            clearTimeout(timeout);
-                            finishBuild();
-                            resolve({ text: 'An error occurred during the build.' });
-                        }
+                        settle({
+                            text: 'An error occurred during the build.',
+                            isError: true,
+                        });
                     }
                 };
                 wsClient.onMessage(handler);
@@ -677,6 +690,15 @@ export function useAiWebsiteBuilderChat() {
                     if (result.isError) {
                         threadItems.value[messageIndex].isError = true;
                     }
+                    // Attach agent-driven actions (e.g. upgrade CTA) only on successful
+                    // (non-error) responses. Suppressed for premium users client-side as
+                    // a defence-in-depth guard (server also vetoes via eligibility logic).
+                    if (!result.isError &&
+                        result.actions?.length &&
+                        !userStore.hasPremiumSubscription) {
+                        threadItems.value[messageIndex].actions =
+                            result.actions;
+                    }
                 }
                 else {
                     threadItems.value[messageIndex].text =
@@ -763,6 +785,11 @@ export function useAiWebsiteBuilderChat() {
                         planItems: msg.planItems ?? [],
                         completedItemIds: msg.completedItemIds ?? [],
                     }),
+                    ...(msg.type === 'text' &&
+                        !msg.isTyping &&
+                        msg.actions?.length && {
+                        actions: msg.actions,
+                    }),
                 },
             };
         });

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.d.ts

@@ -71,7 +71,7 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     textItemIndex: number;
     item: TextItem;
     contentType: string;
-}, emit: (event: 'focus' | 'blur' | 'update:modelValue', ...args: any[]) => void, fontSettings: {
+}, emit: (event: "focus" | "blur" | "update:modelValue", ...args: any[]) => void, fontSettings: {
     selectedTextStyle: string;
     selectedFont: string;
     selectedFontSize: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -368,13 +368,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(globalStyles?.fontSize ?? '2.25em')));
             fontSettings.selectedTextColor = hasLogoColorVar(globalStyles.color ?? '')
                 ? '#000000'
-                : globalStyles?.color ?? '#000000';
+                : (globalStyles?.color ?? '#000000');
             fontSettings.selectedBackgroundColor = hasLogoColorVar(globalStyles?.backgroundColor ?? '')
                 ? 'transparent'
-                : globalStyles?.backgroundColor ?? 'transparent';
+                : (globalStyles?.backgroundColor ?? 'transparent');
             lineHeight.value = globalStyles?.lineHeight?.includes('em')
                 ? emToPx(globalStyles?.lineHeight ?? '1em')
-                : globalStyles?.lineHeight ?? '1';
+                : (globalStyles?.lineHeight ?? '1');
             letterSpacing.value = letterSpacingValueConvertor.convert(globalStyles ?? {});
             if (props.styles?.textAlign &&
                 currentAlignment?.textAlign !== props.styles.textAlign) {
@@ -388,13 +388,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(props.styles?.fontSize ?? '2.25em')));
             fontSettings.selectedTextColor = hasLogoColorVar(props.styles?.color ?? '#000000')
                 ? '#000000'
-                : props.styles?.color ?? '#000000';
+                : (props.styles?.color ?? '#000000');
             fontSettings.selectedBackgroundColor = hasLogoColorVar(props.styles?.backgroundColor ?? '')
                 ? 'transparent'
-                : props.styles?.backgroundColor ?? 'transparent';
+                : (props.styles?.backgroundColor ?? 'transparent');
             lineHeight.value = props.styles?.lineHeight?.includes('em')
                 ? emToPx(props.styles?.lineHeight ?? '1em')
-                : props.styles?.lineHeight ?? '1';
+                : (props.styles?.lineHeight ?? '1');
             letterSpacing.value = letterSpacingValueConvertor.convert(props.styles ?? {});
             if (props.styles?.textAlign &&
                 currentAlignment?.textAlign !== props.styles.textAlign) {

package/lib/src/brand-page-maker/composables/useEventTracker.d.ts

@@ -85,6 +85,7 @@ export declare const UPGRADE_CTA_LOCATIONS: {
 };
 export declare const AI_CTA_LOCATIONS: {
     AI_BUILDER_TAB: string;
+    AI_BUILDER_CHAT_UPSELL: string;
 };
 export declare const TRIGGER_TYPE: {
     AUTOMATIC: string;
@@ -129,12 +130,12 @@ declare const useEventTracker: () => {
     }) => void;
     sendSaveContactEvent: () => void;
     sendStartForFreeEvent: () => void;
-    sendFooterLinkClickEvent: (linkType: 'watermark_logo' | 'create_your_website') => void;
+    sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;
     sendGettyVideoAddEvent: () => void;
     sendGettyVideoReplaceEvent: () => void;
     sendGettyVideoRemoveEvent: () => void;
     sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;
-    setGlobalEventProps: (props: Omit<BpGlobalEventProps, 'template_category'>) => void;
+    setGlobalEventProps: (props: Omit<BpGlobalEventProps, "template_category">) => void;
     setCustomGlobalEventProps: (props: any) => void;
     setUpsellBridgeState: (props: BpUpsellEventProps) => void;
     setDomainUpsellBridgeState: (props: BpUpsellEventProps) => void;

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -66,6 +66,7 @@ export const UPGRADE_CTA_LOCATIONS = {
 };
 export const AI_CTA_LOCATIONS = {
     AI_BUILDER_TAB: 'ai_builder_tab',
+    AI_BUILDER_CHAT_UPSELL: 'ai_builder_chat_upsell',
 };
 export const TRIGGER_TYPE = {
     AUTOMATIC: 'automatic',