@designcrowd/library.brand-page 5.16.44 → 5.16.45

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.stories.js

@@ -26,6 +26,7 @@ export const Sample = () => {
         canUseGettyVideos: true,
         canUseGoogleAdsense: false,
         googleAdsenseEnabled: false,
+        canUseAITextGenerator: true,
     };
     const pinia = setupStoryPinia();
     const contentSettingsStore = useUiContentSettingsStore();

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.d.ts

@@ -84,6 +84,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -145,6 +146,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -364,6 +364,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -425,6 +426,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3103,6 +3103,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         maxNumOfPages: number;
         canUseRichTextEditor: boolean;
         canUseGettyVideos: boolean;
+        canUseAITextGenerator: boolean;
         canUseGoogleAdsense: boolean;
         googleAdsenseEnabled: boolean;
     }>;
@@ -4528,6 +4529,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -4589,6 +4591,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3940,6 +3940,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -4001,6 +4002,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -261,6 +261,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -322,6 +323,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;

package/lib/src/shared/side-bar/components/SideBar.mixin.d.ts

@@ -77,6 +77,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -138,6 +139,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -668,6 +668,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -729,6 +730,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
+            requestVerificationToken?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.44",
+  "version": "5.16.45",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -52,7 +52,7 @@
     "cy:run:ci": "cypress run --browser chrome --headless  --config \"baseUrl=https://maker.designcrowd.ninja\"",
     "cy:report": "npx junit-merge -o ./cypress/results/report.xml ./cypress/results/*.xml",
     "cy:open": "cypress open",
-    "pre-push": "NODE_ENV=production lint-staged"
+    "pre-push": "npm run test"
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -90,6 +90,7 @@ export const userFeatures: UserFeatures = {
   canUseGettyVideos: false,
   canUseGoogleAdsense: false,
   googleAdsenseEnabled: false,
+  canUseAITextGenerator: true,
 };
 
 export const BRAND_PAGE: BrandPageData = {
@@ -2125,6 +2126,7 @@ export const USER_FEATURES: UIUserFeatures = Object.freeze({
   canUseGettyVideos: true,
   canUseGoogleAdsense: false,
   googleAdsenseEnabled: true,
+  canUseAITextGenerator: true,
 } as UIUserFeatures);
 
 export const INITIALISE_PAYLOAD: InitialisePayload = Object.freeze({

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -89,6 +89,7 @@ export interface BrandPageContainerState {
   isSubsequentPublish: boolean;
   isContextualUpgradeModalVisible: boolean;
   contextualUpgradeType: WebsiteContextUpgradeType | undefined;
+  requestVerificationToken?: string;
 }
 
 export type GettyVideoEditorViewModelResponse = {
@@ -170,6 +171,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isSubsequentPublish: false,
       isContextualUpgradeModalVisible: false,
       contextualUpgradeType: undefined,
+      requestVerificationToken: undefined,
     };
   },
   actions: {
@@ -237,6 +239,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       this.showPublishOptionModal = payload.showPublishOptionModal;
       this.abTests = getAbTestResults(payload.abTests || {});
       this.isSubsequentPublish = payload.isSubsequentPublish;
+      this.requestVerificationToken = payload.requestVerificationToken;
 
       const logoStore = useLogoStore();
 

package/src/brand-page-maker/stores/user/user-store.ts

@@ -31,6 +31,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       canUsePremiumFontFamily: false,
       maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
       canUseGettyVideos: false,
+      canUseAITextGenerator: false,
       canUseGoogleAdsense: false,
       googleAdsenseEnabled: false,
     },

package/src/clients/ai-assistant-client.ts

@@ -0,0 +1,268 @@
+import axios, { type AxiosError } from 'axios';
+import { useBrandPageContainerStore } from '../brand-page-maker/stores/brandpage-container/brand-page-container-store';
+
+// Request types
+export interface AiAssistantMessage {
+  type: 'text' | 'image';
+  text?: string;
+  image_url?: {
+    url: string;
+  };
+}
+
+export interface AiAssistantToolCall {
+  toolId: string;
+  toolName: string;
+  input: Record<string, unknown>;
+}
+
+export interface AiAssistantToolCallOutput {
+  toolId: string;
+  success: boolean;
+}
+
+export interface CreateThreadRequest {
+  message: string;
+  agentType?: string;
+  elementIds?: string[];
+  designSnapshot?: string;
+  objectSnapshot?: string;
+  designMetadata?: Record<string, unknown>;
+  logoTemplateToken?: string;
+  logoDraftToken?: string;
+}
+
+export interface SendMessageRequest {
+  message: string;
+  agentType?: string;
+  elementIds?: string[];
+  designSnapshot?: string;
+  objectSnapshot?: string;
+  designMetadata?: Record<string, unknown>;
+  logoTemplateToken?: string;
+  logoDraftToken?: string;
+}
+
+export interface ToolSubmissionRequest {
+  runId: string;
+  toolCalls: AiAssistantToolCallOutput[];
+  message?: string;
+  agentType?: string;
+  elementIds?: string[];
+  designSnapshot?: string;
+  objectSnapshot?: string;
+  designMetadata?: Record<string, unknown>;
+}
+
+// Response types
+export type AiAssistantResponseType = 'message' | 'tool_calls';
+
+export interface AiAssistantResponse {
+  threadId: string;
+  runId?: string;
+  type: AiAssistantResponseType;
+  content: string | null;
+  toolCalls: AiAssistantToolCall[] | null;
+  totalPaidToolCalls: number;
+  timestamp: number;
+}
+
+export interface AiAssistantErrorResponse {
+  error: string;
+  errorCode?: string;
+  errorParams?: Record<string, unknown>;
+}
+
+export interface AiAssistantCreditInfo {
+  remaining: number;
+  usage: number;
+}
+
+// Endpoints - using relative URLs (same as design-template-client pattern)
+export const getCreateThreadEndpoint = (): string => `/api/assistant/thread`;
+
+export const getSendMessageEndpoint = (threadId: string): string =>
+  `/api/assistant/thread/${threadId}`;
+
+export const getToolSubmissionEndpoint = (threadId: string): string =>
+  `/api/assistant/thread/${threadId}/tool-submission`;
+
+export class AiAssistantClient {
+  private getRequestVerificationToken(): string {
+    const brandPageContainerStore = useBrandPageContainerStore();
+
+    return brandPageContainerStore.requestVerificationToken || '';
+  }
+
+  private getRequestHeaders(): Record<string, string> {
+    const token = this.getRequestVerificationToken();
+
+    return {
+      'Content-Type': 'application/json',
+      ...(token && { RequestVerificationToken: token }),
+    };
+  }
+
+  private extractCreditInfo(
+    headers: Record<string, string>,
+  ): AiAssistantCreditInfo {
+    return {
+      remaining: parseInt(headers['x-ai-credit-remaining'] || '0', 10),
+      usage: parseInt(headers['x-ai-credit-usage'] || '0', 10),
+    };
+  }
+
+  /**
+   * Create a new AI Assistant thread
+   */
+  async createThread(request: CreateThreadRequest): Promise<{
+    response: AiAssistantResponse;
+    creditInfo: AiAssistantCreditInfo;
+  }> {
+    try {
+      const response = await axios.post<AiAssistantResponse>(
+        getCreateThreadEndpoint(),
+        request,
+        {
+          withCredentials: true,
+          headers: this.getRequestHeaders(),
+        },
+      );
+
+      return {
+        response: response.data,
+        creditInfo: this.extractCreditInfo(
+          response.headers as Record<string, string>,
+        ),
+      };
+    } catch (error) {
+      this.handleError(error as AxiosError<AiAssistantErrorResponse>);
+      throw error;
+    }
+  }
+
+  /**
+   * Send a message to an existing thread
+   */
+  async sendMessage(
+    threadId: string,
+    request: SendMessageRequest,
+  ): Promise<{
+    response: AiAssistantResponse;
+    creditInfo: AiAssistantCreditInfo;
+  }> {
+    if (!threadId) {
+      throw new Error('threadId is required');
+    }
+
+    try {
+      const response = await axios.post<AiAssistantResponse>(
+        getSendMessageEndpoint(threadId),
+        request,
+        {
+          withCredentials: true,
+          headers: this.getRequestHeaders(),
+        },
+      );
+
+      return {
+        response: response.data,
+        creditInfo: this.extractCreditInfo(
+          response.headers as Record<string, string>,
+        ),
+      };
+    } catch (error) {
+      this.handleError(error as AxiosError<AiAssistantErrorResponse>);
+      throw error;
+    }
+  }
+
+  /**
+   * Submit tool call outputs to a thread
+   */
+  async submitToolCallOutput(
+    threadId: string,
+    request: ToolSubmissionRequest,
+  ): Promise<{
+    response: AiAssistantResponse;
+    creditInfo: AiAssistantCreditInfo;
+  }> {
+    if (!threadId) {
+      throw new Error('threadId is required');
+    }
+
+    try {
+      const response = await axios.post<AiAssistantResponse>(
+        getToolSubmissionEndpoint(threadId),
+        request,
+        {
+          withCredentials: true,
+          headers: this.getRequestHeaders(),
+        },
+      );
+
+      return {
+        response: response.data,
+        creditInfo: this.extractCreditInfo(
+          response.headers as Record<string, string>,
+        ),
+      };
+    } catch (error) {
+      this.handleError(error as AxiosError<AiAssistantErrorResponse>);
+      throw error;
+    }
+  }
+
+  /**
+   * Convenience method: Create thread or continue existing thread
+   * Useful for managing thread lifecycle in components
+   */
+  async sendPrompt(
+    message: string,
+    options: {
+      threadId?: string;
+      agentType?: string;
+      elementIds?: string[];
+      designSnapshot?: string;
+      objectSnapshot?: string;
+      designMetadata?: Record<string, unknown>;
+      logoTemplateToken?: string;
+      logoDraftToken?: string;
+    } = {},
+  ): Promise<{
+    response: AiAssistantResponse;
+    creditInfo: AiAssistantCreditInfo;
+  }> {
+    const { threadId, ...requestOptions } = options;
+    const request = { message, ...requestOptions };
+
+    if (threadId) {
+      return this.sendMessage(threadId, request);
+    }
+
+    return this.createThread(request);
+  }
+
+  private handleError(error: AxiosError<AiAssistantErrorResponse>): void {
+    if (process.env.NODE_ENV !== 'production') {
+      const errorData = error.response?.data;
+      const statusCode = error.response?.status;
+
+      if (statusCode === 429) {
+        console.error(
+          'AI Assistant: Insufficient credits',
+          errorData?.errorCode,
+        );
+      } else if (statusCode === 400) {
+        console.error('AI Assistant: Bad request', errorData?.error);
+      } else {
+        console.error('AI Assistant error:', errorData?.error || error.message);
+      }
+    }
+  }
+}
+
+let _instance: AiAssistantClient | undefined;
+
+export const getInstance = (): AiAssistantClient =>
+  _instance ? _instance : (_instance = new AiAssistantClient());

package/src/constants/ui.ts

@@ -12,6 +12,7 @@ export interface UIUserFeatures {
   maxNumOfPages: number;
   canUseRichTextEditor: boolean;
   canUseGettyVideos: boolean;
+  canUseAITextGenerator: boolean;
   canUseGoogleAdsense: boolean;
   googleAdsenseEnabled: boolean;
 }

package/src/shared/content-settings/components/content-settings/ContentSettings.stories.ts

@@ -32,6 +32,7 @@ export const Sample = (): any => {
     canUseGettyVideos: true,
     canUseGoogleAdsense: false,
     googleAdsenseEnabled: false,
+    canUseAITextGenerator: true,
   };
 
   const pinia = setupStoryPinia();

package/src/shared/content-settings/components/generate-ai-button/GenerateAiButton.vue

@@ -31,6 +31,7 @@ import GenerateAiModal from '../generate-ai-modal/GenerateAiModal.vue';
 import { commonTr } from '../../../../composables/useTranslate';
 import {
   useBrandPageContainerStore,
+  useBrandPageMakerUserStore,
   useSnapshotStore,
 } from '../../../../brand-page-maker/stores';
 import type { AbTestResult } from '../../../../brand-page/models/brand-page-context.model';
@@ -61,15 +62,20 @@ const emit = defineEmits<{
 const brandPageContainerStore = useBrandPageContainerStore();
 const eventTracker = useEventTracker();
 const snapshotStore = useSnapshotStore();
+const userStore = useBrandPageMakerUserStore();
 
 const abTests = computed(() => brandPageContainerStore.abTests);
 
+const canUseAITextGenerator = computed(
+  () => userStore.features.canUseAITextGenerator,
+);
+
 const showButton = computed(() => {
   const abTest = abTests.value
     .bp_4572_ai_text_generation_post_purchase as unknown as
     | AbTestResult
     | undefined;
-  return abTest?.isVariation ?? false;
+  return canUseAITextGenerator.value && abTest?.isVariation;
 });
 
 const generateTextModalVisible = ref(false);