@designcrowd/library.brand-page 6.0.3 → 6.0.4

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

@@ -1,12 +1,12 @@
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick, onUnmounted } 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';
@@ -178,6 +178,10 @@ 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([
@@ -188,7 +192,6 @@ 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 && {

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

@@ -129,12 +129,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/constants/config-settings-constant.d.ts

@@ -1,15 +1,15 @@
 import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent } from '@brand-page';
 import type { ContentSettingsConfig, ContentSettingsField, ContentSettingsMultiField } from '../models';
-export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, "version" | "logoVariation" | "logoImageHeight" | "logoImageWidth" | "logoLastUpdate" | "logoImageBase64Url">>;
+export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, 'version' | 'logoVariation' | 'logoImageHeight' | 'logoImageWidth' | 'logoLastUpdate' | 'logoImageBase64Url'>>;
 export declare const GENERAL_LINK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<GeneralLinkContent>;
-export declare const PROFILE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ProfileContent, "iconUrl">>;
+export declare const PROFILE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ProfileContent, 'iconUrl'>>;
 export declare const WEBSITE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<WebsiteContent>;
 export declare const EMAIL_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<EmailContent>;
-export declare const IMAGE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageContent, "iconUrl">>;
-export declare const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageGalleryContent, "iconUrl">>;
-export declare const VIDEO_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<VideoContent, "iconUrl">>;
+export declare const IMAGE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageContent, 'iconUrl'>>;
+export declare const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageGalleryContent, 'iconUrl'>>;
+export declare const VIDEO_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<VideoContent, 'iconUrl'>>;
 export declare const PHONE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<PhoneContent>;
-export declare const TEXT_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<TextContent, "iconUrl">>;
+export declare const TEXT_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<TextContent, 'iconUrl'>>;
 export declare const FACEBOOK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<FacebookContent>;
 export declare const X_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<XContent>;
 export declare const INSTAGRAM_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<InstagramContent>;

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -53,14 +53,14 @@ const PADDING_CONTROL_FIELDS = (groupId) => ({
         type: 'slider',
         title: contentSettingsTr(`topPaddingTitle`),
         minLength: 0,
-        maxLength: 200,
+        maxLength: 100,
         groupId,
     },
     bottomPadding: {
         type: 'slider',
         title: contentSettingsTr(`bottomPaddingTitle`),
         minLength: 0,
-        maxLength: 200,
+        maxLength: 100,
         groupId,
     },
 });
@@ -239,7 +239,7 @@ const shopReplaceImageSettings = () => ({
     titleAdd: contentSettingsTr(`addImageHeaderTitle`),
     titleReplace: contentSettingsTr(`imageReplaceTitle`),
     contentMediaFieldName: MediaFieldNames.requestPaymentConfig,
-    setContentMedia: (_content, _value, _index) => '',
+    setContentMedia: (content, value, index) => '',
     openByDefault: false,
     mediaType: null,
     maxFilesize: undefined,

package/lib/src/brand-page-maker/convertors/text-image-display-style.convertor.d.ts

@@ -1,3 +1,3 @@
 import type { ButtonGroupConfig, ValueConvertor } from '../models';
 import type { ImagesSectionContent, MediaType } from '@brand-page';
-export declare const getTextMediaOptionsConverterByMediaType: (_mediaType: MediaType) => ValueConvertor<string | null, ButtonGroupConfig, Partial<ImagesSectionContent>>;
+export declare const getTextMediaOptionsConverterByMediaType: (mediaType: MediaType) => ValueConvertor<string | null, ButtonGroupConfig, Partial<ImagesSectionContent>>;

package/lib/src/brand-page-maker/convertors/text-image-display-style.convertor.js

@@ -1,5 +1,5 @@
 import { ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, ALTERNATE_IMAGE, MEDIA_ONLY, } from '@brand-page/constants';
-export const getTextMediaOptionsConverterByMediaType = (_mediaType) => {
+export const getTextMediaOptionsConverterByMediaType = (mediaType) => {
     const textImageDisplayStyleConvertor = {
         convertBackToMultipleValues: true,
         convert(value) {

package/lib/src/brand-page-maker/models/content-settings.d.ts

@@ -8,7 +8,7 @@ export declare const createInitialImageContent: () => ImageContent;
 export declare const createInitialImageGalleryContent: () => ImageGalleryContent;
 export declare const createInitialVideoContent: () => VideoContent;
 export declare const createInitialProfileContent: (options?: CreateInitialContentOptions) => ProfileContent;
-export declare const createInitialTextContent: (options?: Pick<CreateInitialContentOptions, "brandPageType">) => TextContent;
+export declare const createInitialTextContent: (options?: Pick<CreateInitialContentOptions, 'brandPageType'>) => TextContent;
 export declare const createInitialLogoContent: () => LogoContent;
 export declare const createInitialMapContent: () => MapContent;
 export declare const createInitialMailingListContent: (options?: CreateInitialContentOptions) => MailingListContent;

package/lib/src/brand-page-maker/models/navigation-style-configs.js

@@ -1,6 +1,6 @@
 import { defaultHamburgerNavigation, NAVIGATION_DISPLAY, FONT_FAMILY_CONFIGS, DEFAULT_FONT_FAMILY_KEY, FONT_SIZE_BODY, DEFAULT_TEXT_ALIGN, } from '@brand-page';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
-import { commonTr, modelsTr } from '@src/composables/useTranslate';
+import { tr, commonTr, modelsTr } from '@src/composables/useTranslate';
 export const NavigationStyleConfigOptions = {
     defaultBorderColor: 'defaultBorderColor',
     defaultTextStyle: 'defaultTextStyle',

package/lib/src/brand-page-maker/routing/brand-page-maker-router.d.ts

@@ -1,4 +1,5 @@
+import { type Router } from 'vue-router';
 export declare const navigateToPageByPageId: (pageId: string) => void;
 export declare const setRouterInstance: (router: any) => void;
 export declare const attachRouterHooks: () => void;
-export declare const createBrandPageMakerRouter: () => import("vue-router")._RouterClassic;
+export declare const createBrandPageMakerRouter: () => Router;