@designcrowd/library.brand-page 6.2.3 → 6.2.4

package/lib/src/utils/minify-brand-page-metadata.js

@@ -224,7 +224,13 @@ const minifyContent = (content, editor, assets) => {
                     })),
                 }),
                 ...(includeStyle(c.textStyle) && { textStyle: c.textStyle }),
-                ...includeBackgroundStyle(c.backgroundStyle),
+                // A text section keeps its band on the flat `backgroundColor` key — as a
+                // `{ backgroundColor }` object or a bare string — not on `backgroundStyle`,
+                // so the shared helper saw nothing and the AI never knew the band (BP-6081).
+                ...includeBackgroundStyle(c.backgroundStyle ??
+                    (typeof c.backgroundColor === 'string'
+                        ? { backgroundColor: c.backgroundColor }
+                        : c.backgroundColor)),
             };
         case 'profile':
             return {
@@ -359,11 +365,18 @@ const minifyContent = (content, editor, assets) => {
         case 'logo':
             return base;
         case 'request-payment':
+            return {
+                ...base,
+                ...st('title', c.title, editor),
+                ...st('description', c.description, editor),
+            };
         case 'support-me':
             return {
                 ...base,
                 ...st('title', c.title, editor),
                 ...st('description', c.description, editor),
+                ...st('successMessage', c.successMessage, editor),
+                ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
             };
         default:
             return base;
@@ -387,6 +400,15 @@ const minifyFooter = (footer, logoAssetKey) => {
                 url: l.url || '',
             }))
             : undefined,
+        backgroundStyle: footer.backgroundStyle?.backgroundColor
+            ? { backgroundColor: footer.backgroundStyle.backgroundColor }
+            : undefined,
+        copyrightStyle: footer.copyrightStyle?.color
+            ? { color: footer.copyrightStyle.color }
+            : undefined,
+        iconStyle: footer.iconStyle?.fill
+            ? { fill: footer.iconStyle.fill }
+            : undefined,
     };
 };
 // Fully opaque (100) is the default, so it's omitted to keep the AI payload small.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.3",
+  "version": "6.2.4",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -48,10 +48,6 @@
     "copy:css": "copyfiles -fF ./public/css/global.css ./public/css/reset.css ./lib/src/css/",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:e2e": "vitest run --reporter=basic -c vitest.e2e.config.ts",
-    "test:e2e:watch": "vitest watch --reporter=basic -c vitest.e2e.config.ts",
-    "docker:test:e2e": "docker-compose -f docker-compose-coverage.yml build e2e && docker-compose -f docker-compose-coverage.yml run e2e",
-    "docker:test:e2e:env": "docker-compose -f docker-compose-coverage.yml build e2e-test-env && docker-compose -f docker-compose-coverage.yml run e2e-test-env",
     "coverage": "echo \"To be migrated to vitest\"",
     "storybook": "npm run clean:vite && npm run storybook:css && npm run storybook:themes && npm run storybook:start",
     "storybook:themes": "node .storybook/tailwind.themes.cjs",
@@ -63,10 +59,6 @@
     "watch": "npm run clean:lib && run-p watch:lib watch:css build:bp:typings",
     "watch:lib": "NODE_ENV=development npm run build:bp:vite -- --watch",
     "watch:css": "NODE_ENV=development nodemon --config nodemon.css.json",
-    "cy:run:local": "cypress run --browser chrome --headless --config \"baseUrl=http://localhost:8080\"",
-    "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": "npm run test"
   },
   "dependencies": {
@@ -152,7 +144,6 @@
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.0",
-    "@frsource/cypress-plugin-visual-regression-diff": "3.3.10",
     "@nuxt/test-utils": "4.0.0",
     "@nuxt/types": "2.18.1",
     "@nuxt/typescript-build": "3.0.2",
@@ -193,11 +184,9 @@
     "cors": "2.8.6",
     "cross-env": "7.0.3",
     "css-loader": "6.9.1",
-    "cypress": "13.6.3",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-friendly-formatter": "4.0.1",
-    "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-vue": "9.21.1",
     "file-loader": "6.2.0",

package/src/brand-page/models/brand-page-context.model.ts

@@ -46,12 +46,16 @@ export interface AbTestResult {
   isExcluded: boolean;
 }
 
-const AB_TEST_KEYS = {
+export const AB_TEST_KEYS = {
   BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
+  // V1 (control) vs V2 (variation-1) AI website builder, sent by bc-net in the editor
+  // payload at load. Key must match `Bp6136V2AiBuilderStrategy.CampaignKey`.
+  BP_6136_V2_AI_BUILDER: 'bc-bp-6136-v2-ai-builder',
 };
 
 export interface AbTest {
   bp_3926_freemium_watermark?: AbTestResult;
+  bp_6136_v2_ai_builder?: AbTestResult;
 }
 
 export const MEDIA_SIZES = {
@@ -132,5 +136,14 @@ export const getAbTestResults = (abtestKeyValues: AbTest): AbTest => {
     );
   }
 
+  // AB Test - V1 vs V2 AI website builder
+
+  if (abtestKeyValues[AB_TEST_KEYS.BP_6136_V2_AI_BUILDER]) {
+    abTests.bp_6136_v2_ai_builder = getValueType(
+      AB_TEST_KEYS.BP_6136_V2_AI_BUILDER,
+      abtestKeyValues[AB_TEST_KEYS.BP_6136_V2_AI_BUILDER],
+    );
+  }
+
   return abTests;
 };

package/src/brand-page-maker/components/ai-website-builder/AiWebsiteBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ai-container">
+  <div data-component="ai-website-builder" class="ai-container">
     <div class="tw-px-5">
       <SideBarSettingsHeader
         title="AI Website Builder"

package/src/brand-page-maker/composables/ai-chat/ai-builder-experiment.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { aiBuilderAgentTypeForArm } from './ai-builder-experiment';
+import { getAbTestResults } from '../../../brand-page/models/brand-page-context.model';
+import { useAiWebsiteBuilderThreadStore } from '../../stores';
+
+// Must match `Bp6136V2AiBuilderStrategy` in bc-net and the LaunchDarkly flag.
+const CAMPAIGN = 'bc-bp-6136-v2-ai-builder';
+
+// The arm arrives as the raw bc-net campaign string, so go through the real parser.
+const armFor = (value?: string) =>
+  getAbTestResults(value ? ({ [CAMPAIGN]: value } as never) : {})
+    .bp_6136_v2_ai_builder;
+
+describe('BP-6136 arm to AI builder agent type', () => {
+  it('variation-1 gets the V2 builder', () => {
+    expect(aiBuilderAgentTypeForArm(armFor('bp-6136-variation-1'))).toBe(
+      'website_builder_v2',
+    );
+  });
+
+  it('control stays on V1', () => {
+    expect(aiBuilderAgentTypeForArm(armFor('bp-6136-control'))).toBe(
+      'website_builder',
+    );
+  });
+
+  it('excluded stays on V1', () => {
+    expect(aiBuilderAgentTypeForArm(armFor('bp-6136-excluded'))).toBe(
+      'website_builder',
+    );
+  });
+
+  it('no arm at all (pre-purchase, AI tab off, older bc-net) stays on V1', () => {
+    expect(aiBuilderAgentTypeForArm(armFor(undefined))).toBe('website_builder');
+    expect(aiBuilderAgentTypeForArm(undefined)).toBe('website_builder');
+  });
+});
+
+describe('thread store agent type', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('starts on V1, the production default', () => {
+    expect(useAiWebsiteBuilderThreadStore().agentType).toBe('website_builder');
+  });
+
+  it('switching before any thread exists keeps the pending prompt and does not reset', () => {
+    const threadStore = useAiWebsiteBuilderThreadStore();
+
+    threadStore.promptText = 'draft the user is typing';
+
+    threadStore.setAgentType('website_builder_v2');
+
+    expect(threadStore.agentType).toBe('website_builder_v2');
+    expect(threadStore.promptText).toBe('draft the user is typing');
+    expect(threadStore.resetToken).toBe(0);
+  });
+
+  it('switching under a running thread drops that thread', () => {
+    const threadStore = useAiWebsiteBuilderThreadStore();
+
+    threadStore.threadId = 'thread-on-v1';
+
+    threadStore.setAgentType('website_builder_v2');
+
+    expect(threadStore.threadId).toBeNull();
+    expect(threadStore.resetToken).toBe(1);
+  });
+
+  it('setting the same agent again is a no-op', () => {
+    const threadStore = useAiWebsiteBuilderThreadStore();
+
+    threadStore.threadId = 'thread-on-v1';
+
+    threadStore.setAgentType('website_builder');
+
+    expect(threadStore.threadId).toBe('thread-on-v1');
+    expect(threadStore.resetToken).toBe(0);
+  });
+});

package/src/brand-page-maker/composables/ai-chat/ai-builder-experiment.ts

@@ -0,0 +1,19 @@
+import type { AbTestResult } from '../../../brand-page/models/brand-page-context.model';
+import {
+  AI_ASSISTANT_AGENT_TYPES,
+  type AiAssistantAgentType,
+} from '../../../clients/ai-assistant-client';
+
+/**
+ * A/B test: control keeps the V1 AI website builder, variation-1 gets V2.
+ *
+ * bc-net (WebsiteMakerInteractor) buckets post-purchase users who get the AI tab at
+ * editor load and sends the arm in `abTests`. No arm, control and excluded all stay
+ * on V1, so a missing value is today's production behaviour.
+ */
+export const aiBuilderAgentTypeForArm = (
+  arm: AbTestResult | undefined,
+): AiAssistantAgentType =>
+  arm?.isVariation
+    ? AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER_V2
+    : AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER;

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

@@ -3,7 +3,6 @@ import type { BrandPageModel } from '../../../brand-page/models';
 import { getCurrentLocale } from '../../../composables/useTranslate';
 import {
   getInstance as getAiAssistantClient,
-  AI_ASSISTANT_AGENT_TYPES,
   type AiAssistantResponse,
   type AiAssistantToolResult,
   type AiAssistantToolCall,
@@ -38,6 +37,7 @@ import { useHistoryStore } from '../../stores/history/history-store';
 import { useUndoRedoFlag } from '../useUndoRedoFlag';
 import { useBrandPageMakerUserStore } from '../../stores/user/user-store';
 import { useAiMetadataBuilder } from './useAiMetadataBuilder';
+import { aiBuilderAgentTypeForArm } from './ai-builder-experiment';
 import {
   pickErrorMessage,
   pickWsErrorMessage,
@@ -529,6 +529,16 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
         ? 'premium'
         : 'free';
 
+      if (!aiThreadStore.threadId) {
+        // The A/B arm bc-net bucketed at editor load decides which builder owns the
+        // new thread; the message and tool-result calls below reuse it.
+        aiThreadStore.setAgentType(
+          aiBuilderAgentTypeForArm(
+            containerStore.abTests.bp_6136_v2_ai_builder,
+          ),
+        );
+      }
+
       let buildResponse;
 
       if (!aiThreadStore.threadId) {
@@ -536,7 +546,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
           message,
           websiteContext,
           websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-          agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+          agentType: aiThreadStore.agentType,
           userPlan,
           connectionId,
           ...buildAttributionFields(),
@@ -548,7 +558,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
             message,
             websiteContext,
             websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-            agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+            agentType: aiThreadStore.agentType,
             userPlan,
             connectionId,
             ...buildAttributionFields(),
@@ -752,11 +762,15 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
               retryCount,
             });
 
+            // Tool submissions must go to the SAME agent that ran the thread
+            // (AI QA 2026-07-05 T19: a mismatched agentType routes tool results
+            // to a service with no state for the thread and fails the build).
+            // The thread store holds this thread's agent (A/B arm: V1 control, V2 variation-1).
             const submitResult = await client.submitToolResultsBuildAsync(
               aiThreadStore.threadId!,
               {
                 toolCalls: toolResults,
-                agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+                agentType: aiThreadStore.agentType,
                 connectionId,
                 retryCount,
                 userPlan,

package/src/brand-page-maker/stores/ai-thread/ai-website-builder-thread-store.ts

@@ -1,5 +1,9 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
+import {
+  AI_ASSISTANT_AGENT_TYPES,
+  type AiAssistantAgentType,
+} from '../../../clients/ai-assistant-client';
 
 export const useAiWebsiteBuilderThreadStore = defineStore(
   'aiWebsiteBuilderThread',
@@ -14,6 +18,14 @@ export const useAiWebsiteBuilderThreadStore = defineStore(
     const promptText = ref<string>('');
     const stopGeneration = ref<(() => void) | null>(null);
 
+    // Which builder this thread talks to. V1 (control) is the default, what production
+    // runs today; the chat composable sets V2 for the variation-1 arm when a thread
+    // starts (aiBuilderAgentTypeForArm). Every send site reads it, because tool results
+    // must reach the agent that owns the thread (AI QA 2026-07-05 T19).
+    const agentType = ref<AiAssistantAgentType>(
+      AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+    );
+
     // Bumped on every reset so consumers (useAiWebsiteBuilderChat) can react
     // without watching `messages`, which would loop with its own deep watch.
     const resetToken = ref<number>(0);
@@ -35,6 +47,22 @@ export const useAiWebsiteBuilderThreadStore = defineStore(
       resetToken.value += 1;
     };
 
+    const setAgentType = (type: AiAssistantAgentType) => {
+      if (agentType.value === type) {
+        return;
+      }
+
+      const hadThread = threadId.value !== null;
+
+      agentType.value = type;
+
+      // V1 and V2 threads are not interchangeable, so a thread already running on
+      // the other agent is dropped. Before the first prompt there is nothing to drop.
+      if (hadThread) {
+        reset();
+      }
+    };
+
     return {
       threadId,
       runId,
@@ -45,6 +73,8 @@ export const useAiWebsiteBuilderThreadStore = defineStore(
       buildSectionsCompleted,
       promptText,
       stopGeneration,
+      agentType,
+      setAgentType,
       resetToken,
       reset,
     };

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

@@ -30,6 +30,7 @@ export interface WebsiteContext {
 // Agent types
 export const AI_ASSISTANT_AGENT_TYPES = {
   WEBSITE_BUILDER: 'website_builder',
+  WEBSITE_BUILDER_V2: 'website_builder_v2',
 } as const;
 
 export type AiAssistantAgentType =