@designcrowd/library.brand-page 5.19.1-id-based-items-2 → 5.19.2

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -25,445 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         created: Date;
         name: string;
     }[]>;
-    personalisationData: import("vue").ComputedRef<{
-        contentKey: string;
-        userPersonalisation: {
-            profileSection: {
-                title?: string | undefined;
-                name?: string | undefined;
-                url?: string | undefined;
-                description?: string | undefined;
-                descriptionShort?: string | undefined;
-                ctaTitle?: string | undefined;
-                imageSearchTerms?: string[] | undefined;
-                imageUrls?: {
-                    imageUrl: string;
-                    trackingUrl: string;
-                }[] | undefined;
-                shapeSearchTerms?: string[] | undefined;
-                mainShapesCollection?: {
-                    tall: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    square: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    wide: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                } | undefined;
-                shapes?: {
-                    id: number;
-                    token: string;
-                    url: string;
-                    filePath: string;
-                    tags: string;
-                    enabled: boolean;
-                    keepColor: boolean;
-                    createdBy: any;
-                    createdOn: string;
-                    version: number;
-                    shapeCategoryId: number;
-                    shapeCategory: any;
-                }[] | undefined;
-                items?: {
-                    itemTitle: string;
-                    itemDescription: string;
-                    itemDescriptionShort: string;
-                }[] | undefined;
-            };
-            aboutSection: {
-                title?: string | undefined;
-                name?: string | undefined;
-                url?: string | undefined;
-                description?: string | undefined;
-                descriptionShort?: string | undefined;
-                ctaTitle?: string | undefined;
-                imageSearchTerms?: string[] | undefined;
-                imageUrls?: {
-                    imageUrl: string;
-                    trackingUrl: string;
-                }[] | undefined;
-                shapeSearchTerms?: string[] | undefined;
-                mainShapesCollection?: {
-                    tall: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    square: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    wide: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                } | undefined;
-                shapes?: {
-                    id: number;
-                    token: string;
-                    url: string;
-                    filePath: string;
-                    tags: string;
-                    enabled: boolean;
-                    keepColor: boolean;
-                    createdBy: any;
-                    createdOn: string;
-                    version: number;
-                    shapeCategoryId: number;
-                    shapeCategory: any;
-                }[] | undefined;
-                items?: {
-                    itemTitle: string;
-                    itemDescription: string;
-                    itemDescriptionShort: string;
-                }[] | undefined;
-            };
-            informationSection: {
-                title?: string | undefined;
-                name?: string | undefined;
-                url?: string | undefined;
-                description?: string | undefined;
-                descriptionShort?: string | undefined;
-                ctaTitle?: string | undefined;
-                imageSearchTerms?: string[] | undefined;
-                imageUrls?: {
-                    imageUrl: string;
-                    trackingUrl: string;
-                }[] | undefined;
-                shapeSearchTerms?: string[] | undefined;
-                mainShapesCollection?: {
-                    tall: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    square: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    wide: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                } | undefined;
-                shapes?: {
-                    id: number;
-                    token: string;
-                    url: string;
-                    filePath: string;
-                    tags: string;
-                    enabled: boolean;
-                    keepColor: boolean;
-                    createdBy: any;
-                    createdOn: string;
-                    version: number;
-                    shapeCategoryId: number;
-                    shapeCategory: any;
-                }[] | undefined;
-                items?: {
-                    itemTitle: string;
-                    itemDescription: string;
-                    itemDescriptionShort: string;
-                }[] | undefined;
-            };
-            mediaSection: {
-                title?: string | undefined;
-                name?: string | undefined;
-                url?: string | undefined;
-                description?: string | undefined;
-                descriptionShort?: string | undefined;
-                ctaTitle?: string | undefined;
-                imageSearchTerms?: string[] | undefined;
-                imageUrls?: {
-                    imageUrl: string;
-                    trackingUrl: string;
-                }[] | undefined;
-                shapeSearchTerms?: string[] | undefined;
-                mainShapesCollection?: {
-                    tall: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    square: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    wide: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                } | undefined;
-                shapes?: {
-                    id: number;
-                    token: string;
-                    url: string;
-                    filePath: string;
-                    tags: string;
-                    enabled: boolean;
-                    keepColor: boolean;
-                    createdBy: any;
-                    createdOn: string;
-                    version: number;
-                    shapeCategoryId: number;
-                    shapeCategory: any;
-                }[] | undefined;
-                items?: {
-                    itemTitle: string;
-                    itemDescription: string;
-                    itemDescriptionShort: string;
-                }[] | undefined;
-            };
-            emailSection: {
-                title?: string | undefined;
-                name?: string | undefined;
-                url?: string | undefined;
-                description?: string | undefined;
-                descriptionShort?: string | undefined;
-                ctaTitle?: string | undefined;
-                imageSearchTerms?: string[] | undefined;
-                imageUrls?: {
-                    imageUrl: string;
-                    trackingUrl: string;
-                }[] | undefined;
-                shapeSearchTerms?: string[] | undefined;
-                mainShapesCollection?: {
-                    tall: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    square: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    wide: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                } | undefined;
-                shapes?: {
-                    id: number;
-                    token: string;
-                    url: string;
-                    filePath: string;
-                    tags: string;
-                    enabled: boolean;
-                    keepColor: boolean;
-                    createdBy: any;
-                    createdOn: string;
-                    version: number;
-                    shapeCategoryId: number;
-                    shapeCategory: any;
-                }[] | undefined;
-                items?: {
-                    itemTitle: string;
-                    itemDescription: string;
-                    itemDescriptionShort: string;
-                }[] | undefined;
-            };
-            websiteSection: {
-                title?: string | undefined;
-                name?: string | undefined;
-                url?: string | undefined;
-                description?: string | undefined;
-                descriptionShort?: string | undefined;
-                ctaTitle?: string | undefined;
-                imageSearchTerms?: string[] | undefined;
-                imageUrls?: {
-                    imageUrl: string;
-                    trackingUrl: string;
-                }[] | undefined;
-                shapeSearchTerms?: string[] | undefined;
-                mainShapesCollection?: {
-                    tall: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    square: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    wide: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                } | undefined;
-                shapes?: {
-                    id: number;
-                    token: string;
-                    url: string;
-                    filePath: string;
-                    tags: string;
-                    enabled: boolean;
-                    keepColor: boolean;
-                    createdBy: any;
-                    createdOn: string;
-                    version: number;
-                    shapeCategoryId: number;
-                    shapeCategory: any;
-                }[] | undefined;
-                items?: {
-                    itemTitle: string;
-                    itemDescription: string;
-                    itemDescriptionShort: string;
-                }[] | undefined;
-            };
-            phoneSection: {
-                title?: string | undefined;
-                name?: string | undefined;
-                url?: string | undefined;
-                description?: string | undefined;
-                descriptionShort?: string | undefined;
-                ctaTitle?: string | undefined;
-                imageSearchTerms?: string[] | undefined;
-                imageUrls?: {
-                    imageUrl: string;
-                    trackingUrl: string;
-                }[] | undefined;
-                shapeSearchTerms?: string[] | undefined;
-                mainShapesCollection?: {
-                    tall: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    square: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                    wide: {
-                        token: string;
-                        url: string;
-                        categories: string[];
-                        tags: string[];
-                        enabled: boolean;
-                        keepColor: boolean;
-                        enabledToAdmin: boolean;
-                    }[];
-                } | undefined;
-                shapes?: {
-                    id: number;
-                    token: string;
-                    url: string;
-                    filePath: string;
-                    tags: string;
-                    enabled: boolean;
-                    keepColor: boolean;
-                    createdBy: any;
-                    createdOn: string;
-                    version: number;
-                    shapeCategoryId: number;
-                    shapeCategory: any;
-                }[] | undefined;
-                items?: {
-                    itemTitle: string;
-                    itemDescription: string;
-                    itemDescriptionShort: string;
-                }[] | undefined;
-            };
-        };
-    }[] | undefined>;
+    showAiTemplatesTab: import("vue").ComputedRef<boolean>;
     templateSettingsStore: import("pinia").Store<"uiTemplateSettings", import("../store").TemplatesSettingState, {
         renderAsImage(): boolean;
     }, {
@@ -519,6 +81,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             initialSearchTerm: string;
             onSearchTermChanged?: import("../store").OnSearchTermChangedCallback | undefined;
         }): void;
+        setAiTemplateKeywords(payload: {
+            aiTemplateKeywords: string;
+        }): void;
         notifySearchTermChanged(searchTerm: string | undefined): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): TemplateSettingsTemplate | undefined;
@@ -545,6 +110,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setUserPersonalisationData({ personalisationData, }: {
             personalisationData: import("../../../brand-page").UserPersonalisationContent[];
         }): void;
+        setUserPromptContentKey({ userPromptContentKey, }: {
+            userPromptContentKey: string | undefined;
+        }): void;
+        setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+            showAiTemplatesTab: boolean;
+        }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
         onStyleChanged(): void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.js

@@ -34,7 +34,7 @@ export default defineComponent({
             selectedCategory: computed(() => templateSettingsStore.selectedCategory),
             selectedTemplateId: computed(() => brandpageMakerStore.selectedTemplateId),
             templateCategories: computed(() => templateSettingsStore.templateCategories),
-            personalisationData: computed(() => uiStore.personalisationData),
+            showAiTemplatesTab: computed(() => uiStore.showAiTemplatesTab),
             templateSettingsStore,
             uiStore,
             isDesignCom: computed(() => containerStore.isDesignCom),
@@ -105,7 +105,7 @@ export default defineComponent({
                 : `${pointerEventsClass}`;
         },
         visibleTabs() {
-            return this.personalisationData
+            return this.showAiTemplatesTab
                 ? this.tabs
                 : [...this.tabs].splice(0, this.tabs.findIndex((t) => t === templateSettingsTr(`headerAi`)));
         },

package/lib/src/shared/template-settings/models.d.ts

@@ -5,6 +5,7 @@ export interface TemplateSettingsTemplate {
     personalisationContentIndex?: number;
     brandPageModel: BrandPageModel;
     contentKey?: string;
+    usesUserPromptContentKey?: boolean;
     previewImageUrl?: string;
 }
 export type DesignTemplateType = 'Facebook cover' | 'Brand Page' | 'Brand Site' | 'Brand Contact';

package/lib/src/shared/template-settings/store/template-settings-store.d.ts

@@ -22,6 +22,7 @@ export interface TemplatesSettingState {
     tabsWithTranslations: SelectedTabType[];
     logoChangeWatcherInitialized: boolean;
     initialSearchTerm: string | undefined;
+    aiTemplateKeywords: string | undefined;
     onSearchTermChanged: OnSearchTermChangedCallback | undefined;
 }
 export declare const useUiTemplateSettingsStore: import("pinia").StoreDefinition<"uiTemplateSettings", TemplatesSettingState, {
@@ -79,6 +80,9 @@ export declare const useUiTemplateSettingsStore: import("pinia").StoreDefinition
         initialSearchTerm: string;
         onSearchTermChanged?: OnSearchTermChangedCallback;
     }): void;
+    setAiTemplateKeywords(payload: {
+        aiTemplateKeywords: string;
+    }): void;
     notifySearchTermChanged(searchTerm: string | undefined): void;
     clearTemplates(): void;
     getTemplateByTemplateId(id: string): TemplateSettingsTemplate | undefined;

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -1,7 +1,7 @@
 import { TEMPLATE_TABS } from '../models';
 import * as DesignTemplateClient from '../../../clients/design-template-client';
 import {} from '../../../clients/models';
-import { BP_DEFAULT_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
+import { BP_DEFAULT_TEMPLATE_TYPE_NAME, BP_BRAND_SITE_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
 import { defineStore, storeToRefs } from 'pinia';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '@brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
@@ -9,9 +9,19 @@ import { BrandPageModel } from '@brand-page/models';
 import { migrateBrandPageModel } from '@brand-page/utils';
 import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '@brand-page-maker/utils/ai-content-selection.util';
 import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '../../logo-settings/store';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 import { templateSettingsTr, getCurrentLocale, } from '@src/composables/useTranslate';
 import { watch } from 'vue';
 export const DEFAULT_PAGE_SIZE = 6;
+const POST_PURCHASE_PAGE_SECTION_BY_TAB = {
+    [TEMPLATE_TABS.all]: 'MakerPostPurchaseSidebarTemplatesAllTab',
+    [TEMPLATE_TABS.AI]: 'MakerPostPurchaseSidebarTemplatesAiTab',
+    [TEMPLATE_TABS.categories]: 'MakerPostPurchaseSidebarTemplatesCategoryTab',
+};
+const PRE_PURCHASE_PAGE_SECTION_BY_TAB = {
+    [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
+    [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
+};
 const LOAD_PAGE_RETRY_DELAY = 250;
 export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     state: () => {
@@ -47,6 +57,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             cachedTemplates: {},
             logoChangeWatcherInitialized: false,
             initialSearchTerm: undefined,
+            aiTemplateKeywords: undefined,
             onSearchTermChanged: undefined,
         };
     },
@@ -187,27 +198,65 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     }
                 }
                 const editableLogoVariation = editableLogoStore.editableLogoVariations[logoVariation];
-                const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
+                const isPrePurchase = brandPageContainerStore.isPrePurchase;
+                const isBrandSite = this.templateType === BP_BRAND_SITE_TEMPLATE_TYPE_NAME;
+                // Pre-purchase has no logo draft for logo-based recommendation, so fall back to the seeded
+                // search term (the keyword from the URL/cookie - never the business name) so the All tab
+                // stays relevant instead of generic (bp-5454).
+                const effectiveSearchTerm = !this.searchTerm &&
+                    !this.selectedCategory &&
+                    isPrePurchase &&
+                    isBrandSite &&
+                    this.selectedTab.key === TEMPLATE_TABS.all
+                    ? this.initialSearchTerm
+                    : this.searchTerm;
+                const pageSection = isBrandSite
+                    ? (isPrePurchase
+                        ? PRE_PURCHASE_PAGE_SECTION_BY_TAB
+                        : POST_PURCHASE_PAGE_SECTION_BY_TAB)[this.selectedTab.key]
+                    : undefined;
+                const pageName = isBrandSite
+                    ? isPrePurchase
+                        ? 'maker-pre-purchase'
+                        : 'maker'
+                    : undefined;
+                const baseParams = {
                     page: pageNo,
-                    pageSize: DEFAULT_PAGE_SIZE,
                     categoryName: this.selectedCategory,
-                    searchTerm: this.searchTerm,
+                    searchTerm: effectiveSearchTerm,
+                    keywords: this.aiTemplateKeywords,
                     logoDraftToken: logoSettingsStore.selectedLogoImage.logoDraftToken,
                     logoVariation: logoSettingsStore.selectedLogoImage.logoVariation,
-                    personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                     selectedTemplateToken: designTemplateToken,
                     locale: currentLocale,
                     logoS3Token: !isByo ? editableLogoVariation.s3Token : undefined,
                     logoTemplateToken: isByo ? logoTemplateToken : undefined,
+                    useLogoForRecommendedTemplates: isBrandSite && this.selectedTab.key === TEMPLATE_TABS.all,
+                    pageSection,
+                    pageName,
+                };
+                // AI templates are interleaved server-side for the Brand Site All tab
+                // (bp-5306); the frontend just renders the returned order.
+                const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
+                    ...baseParams,
+                    pageSize: DEFAULT_PAGE_SIZE,
+                    personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                 });
                 if (!result) {
                     return;
                 }
                 this._setPageCount({ pageCount: result.pageCount });
+                if (pageNo === 1 &&
+                    result.abTestValuesToBePushed &&
+                    Object.keys(result.abTestValuesToBePushed).length > 0) {
+                    const eventTracker = useEventTracker();
+                    for (const [experimentName, experimentValue] of Object.entries(result.abTestValuesToBePushed)) {
+                        eventTracker.sendExperimentStartedEvent(experimentName, experimentValue);
+                    }
+                }
                 const templates = await Promise.all(result.paginatedItems.map(async (item) => {
                     try {
                         if (brandPageMakerUserStore.isAdmin) {
-                            // Pre-purchase: full template with brandPageModel for live rendering
                             const template = await designTemplateClient.getTemplateByTemplateToken(item.designTemplateToken);
                             return this.safeMapToTemplateSettingsTemplate(template);
                         }
@@ -217,14 +266,24 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                             if (uiStore.personalisationData?.length) {
                                 personalisationContentIndex =
                                     await getAiContentIndexByTemplateTokenAndNumberOfVariations(item.designTemplateToken, uiStore.personalisationData.length);
-                                // Get the contentKey from the selected personalisation variation
-                                // This is needed for the backend preview URL to show the correct variation
-                                const selectedPersonalisation = uiStore.personalisationData[personalisationContentIndex];
-                                contentKey = selectedPersonalisation.contentKey;
+                                contentKey =
+                                    uiStore.personalisationData[personalisationContentIndex]
+                                        .contentKey;
+                            }
+                            else if (item.isPersonalisable) {
+                                // Pre-purchase has no personalisationData; personalise AI
+                                // template previews with the prompt content key (bp-5742).
+                                contentKey = uiStore.userPromptContentKey;
                             }
                             return {
                                 id: item.designTemplateToken,
+                                isPersonalisable: item.isPersonalisable,
                                 contentKey,
+                                // A userPromptContentKey signals this design's real AI images live
+                                // in the userPrompt bucket (post- or pre-purchase). The preview must
+                                // then resolve via userPromptContentKey, not the regular bucket which
+                                // holds placeholders post-purchase (bp-5454).
+                                usesUserPromptContentKey: !!uiStore.userPromptContentKey,
                                 previewImageUrl: item.previewImageUrl,
                             };
                         }
@@ -235,7 +294,13 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 }));
                 // Filter out null templates before adding
                 const validTemplates = templates.filter((t) => t !== null);
-                this._addTemplates({ templates: validTemplates });
+                // The Categories tab must never surface AI templates or the AI badge
+                // (bp-5454 scenario 5). The badge is driven purely by isPersonalisable,
+                // so clear it for category results regardless of the template's catalog flag.
+                const displayTemplates = this.selectedTab.key === TEMPLATE_TABS.categories
+                    ? validTemplates.map((t) => ({ ...t, isPersonalisable: false }))
+                    : validTemplates;
+                this._addTemplates({ templates: displayTemplates });
                 this._setPageNoLoaded({ pageNoLoaded: pageNo });
             }
             finally {
@@ -339,6 +404,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             this.initialSearchTerm = payload.initialSearchTerm;
             this.onSearchTermChanged = payload.onSearchTermChanged;
         },
+        setAiTemplateKeywords(payload) {
+            this.aiTemplateKeywords = payload.aiTemplateKeywords;
+        },
         notifySearchTermChanged(searchTerm) {
             this.onSearchTermChanged?.(searchTerm);
         },