@designcrowd/library.brand-page 5.17.28 → 5.18.0

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

@@ -1,42 +1,42 @@
 import axios, { type AxiosError } from 'axios';
 import { useBrandPageContainerStore } from '../brand-page-maker/stores/brandpage-container/brand-page-container-store';
 import type { MinifiedBrandPageMetadata } from '../utils/minify-brand-page-metadata';
+import type { AssetEntry } from '../utils/build-asset-manifest';
+
+export interface ActiveContext {
+  currentPageId: string;
+}
+
+export interface LogoContext {
+  logoTextColor?: string;
+  logoBackgroundColor?: string;
+}
+
+export interface WebsiteContext {
+  metadata: MinifiedBrandPageMetadata;
+  assets?: AssetEntry[];
+  activeContext?: ActiveContext;
+  businessName?: string;
+  logoContext?: LogoContext;
+}
 
 // Agent types
 export const AI_ASSISTANT_AGENT_TYPES = {
-  WEBSITE_TEXT_ELEMENT: 'website_text_element',
   WEBSITE_BUILDER: 'website_builder',
 } as const;
 
 export type AiAssistantAgentType =
   (typeof AI_ASSISTANT_AGENT_TYPES)[keyof typeof AI_ASSISTANT_AGENT_TYPES];
 
+// User plan
+export type UserPlan = 'free' | 'premium';
+
 // Response types
 export type AiAssistantResponseType =
   | 'message'
   | 'tool_calls'
   | 'tool_calls_with_message';
 
-// Text element metadata (sent to AI)
-export interface TextElementMetadata {
-  text: string;
-  style?: BrandPageCssStyle;
-}
-
-// Website text element request content (JSON stringified in message)
-export interface WebsiteTextElementRequestContent {
-  pageId: string;
-  contentType: string;
-  fieldName: string;
-  contentId: string;
-  businessName?: string;
-  industry?: string;
-  locale: string;
-  maxChars?: number;
-  userPrompt: string;
-  metadata: TextElementMetadata;
-}
-
 // Tool call from AI response
 export interface AiAssistantToolCall {
   toolId: string;
@@ -49,41 +49,52 @@ export interface AiAssistantToolCall {
 export interface AiAssistantToolResult {
   toolId: string;
   success: string; // "success" or error message
+  name?: string; // tool function name
+  errorMessage?: string; // detailed error from builder
 }
 
 // Website AI Assistant Request types
 export interface WebsiteCreateThreadRequest {
   message: string;
+  websiteContext?: WebsiteContext;
   websiteSnapshot?: string;
   agentType: AiAssistantAgentType;
 }
 
 export interface WebsiteSendMessageRequest {
   message: string;
+  websiteContext?: WebsiteContext;
   websiteSnapshot?: string;
   agentType: AiAssistantAgentType;
 }
 
 export interface WebsiteToolSubmissionRequest {
-  runId: string;
+  agentType: AiAssistantAgentType;
   toolCalls: AiAssistantToolResult[];
+  runId?: string | null;
   message?: string;
   websiteSnapshot?: string;
-  agentType: AiAssistantAgentType;
+  connectionId?: string;
+  retryCount?: number;
+  userPlan?: UserPlan;
 }
 
 // Async build request/response types
 export interface WebsiteCreateThreadBuildRequest {
   message: string;
+  websiteContext?: WebsiteContext;
   websiteSnapshot?: string;
   agentType: AiAssistantAgentType;
+  userPlan?: UserPlan;
   connectionId: string;
 }
 
 export interface WebsiteSendMessageBuildRequest {
   message: string;
+  websiteContext?: WebsiteContext;
   websiteSnapshot?: string;
   agentType: AiAssistantAgentType;
+  userPlan?: UserPlan;
   connectionId: string;
 }
 
@@ -299,6 +310,31 @@ export class AiAssistantClient {
     }
   }
 
+  async submitToolResultsBuildAsync(
+    threadId: string,
+    request: WebsiteToolSubmissionRequest,
+  ): Promise<AiAssistantBuildResponse> {
+    if (!threadId) {
+      throw new Error('threadId is required');
+    }
+
+    try {
+      const response = await axios.post<AiAssistantBuildResponse>(
+        getWebsiteToolSubmissionEndpoint(threadId),
+        request,
+        {
+          withCredentials: true,
+          headers: this.getRequestHeaders(),
+        },
+      );
+
+      return response.data;
+    } catch (error) {
+      this.handleError(error as AxiosError<AiAssistantErrorResponse>);
+      throw error;
+    }
+  }
+
   private handleError(error: AxiosError<AiAssistantErrorResponse>): void {
     if (process.env.NODE_ENV !== 'production') {
       const errorData = error.response?.data;
@@ -318,29 +354,6 @@ export class AiAssistantClient {
   }
 }
 
-/**
- * Build the JSON message content for website text element agent
- */
-export const buildWebsiteTextElementMessage = (
-  content: WebsiteTextElementRequestContent,
-): string => {
-  return JSON.stringify(content);
-};
-
-/**
- * Build the message content for website builder agent.
- * Embeds minified metadata as a JSON code fence in the message text
- * so the ai-pipeline's _extract_context_from_request() can parse it.
- */
-export const buildWebsiteBuilderMessage = (
-  userPrompt: string,
-  minifiedMetadata: MinifiedBrandPageMetadata,
-): string => {
-  const metadataJson = JSON.stringify(minifiedMetadata);
-
-  return `${userPrompt}\n\nmetadata:\n\`\`\`json\n${metadataJson}\n\`\`\``;
-};
-
 let _instance: AiAssistantClient | undefined;
 
 export const getInstance = (): AiAssistantClient =>

package/src/clients/design-template-client.ts

@@ -30,8 +30,6 @@ export const getTemplatesEndpoint = (templateTypeName: string) =>
 export const getTemplateEndpoint = (templateToken) =>
   `/maker/api/template/${templateToken}`;
 
-export const getGenerateTextEndpoint = () => `/api/ai/websites/generate-text`;
-
 /**
  * This class is a partial clone of template-client.js with typing
  */
@@ -101,70 +99,6 @@ export class DesignTemplateClient {
 
     return null;
   }
-
-  async generateText(
-    prompt: string,
-    existingText?: string,
-    snapshotBase64?: string,
-    businessName?: string,
-    industry?: string,
-    contentType?: string,
-    contentId?: string,
-    fieldName?: string,
-  ): Promise<string | null> {
-    try {
-      // Get CSRF token from meta tag
-      const csrfToken = document.head
-        ?.querySelector('meta[name=csrf-token]')
-        ?.getAttribute('content');
-
-      const response = await axios.post<{
-        generatedText: string;
-        usage: {
-          inputTokens: number;
-          outputTokens: number;
-          totalTokens: number;
-        };
-      }>(
-        getGenerateTextEndpoint(),
-        {
-          prompt,
-          existingText: existingText || '',
-          snapshotBase64: snapshotBase64 || '',
-          businessName: businessName || '',
-          industry: industry || '',
-          contentType: contentType || '',
-          contentId: contentId || '',
-          fieldName: fieldName || '',
-        },
-        {
-          withCredentials: true,
-          headers: {
-            'Content-Type': 'application/json',
-            'csrf-token': csrfToken || '',
-          },
-        },
-      );
-
-      if (response.status !== 200) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error(
-            `generateText got response status '${response.status}'`,
-          );
-        }
-
-        return null;
-      }
-
-      return response.data.generatedText;
-    } catch (e: any) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.error('Failed to generate text:', e);
-      }
-
-      throw e;
-    }
-  }
 }
 
 let _instance: DesignTemplateClient | undefined;

package/src/clients/websocket-gateway-client.ts

@@ -5,8 +5,22 @@ export interface WebSocketConnectResponse {
   connectionUrl: string;
 }
 
+export interface PlanItem {
+  id: string;
+  pendingLabel: string;
+  completeLabel: string;
+  subIds?: string[]; // present for grouped items; individual item_complete IDs within the group
+}
+
 export interface WebSocketMessage {
-  type: 'connected' | 'section_complete' | 'build_complete' | 'build_error';
+  type:
+    | 'connected'
+    | 'server_response'
+    | 'server_error'
+    | 'build_error'
+    | 'chat_started'
+    | 'plan_announced'
+    | 'item_complete';
   buildId?: string;
   connectionId?: string;
   pageId?: string;
@@ -16,6 +30,8 @@ export interface WebSocketMessage {
   toolCalls?: unknown[];
   message?: string;
   error?: string;
+  items?: PlanItem[];
+  itemId?: string;
 }
 
 type MessageHandler = (msg: WebSocketMessage) => void;

package/src/composables/useTranslate.ts

@@ -219,6 +219,8 @@ const saveContactWidgetTr = (key, valuesToInterpolate = {}) =>
   tr(`saveContactWidget.${key}`, valuesToInterpolate);
 const paymentShippingAddressTr = (key, valuesToInterpolate = {}) =>
   tr(`paymentShippingAddress.${key}`, valuesToInterpolate);
+const aiWebsiteBuilderTr = (key, valuesToInterpolate = {}) =>
+  tr(`aiWebsiteBuilder.${key}`, valuesToInterpolate);
 
 const countriesTr = (): Country[] => {
   const instance = getI18NextInstance();
@@ -330,5 +332,6 @@ export {
   generateAiModalTr,
   saveContactWidgetTr,
   paymentShippingAddressTr,
+  aiWebsiteBuilderTr,
   countriesTr,
 };

package/src/constants/ui.ts

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

package/src/lib.ts

@@ -44,6 +44,7 @@ export {
 } from './clients/websocket-gateway-client';
 export type {
   AiAssistantBuildResponse,
+  WebsiteContext,
   WebsiteCreateThreadBuildRequest,
   WebsiteSendMessageBuildRequest,
 } from './clients/ai-assistant-client';

package/src/metadata-builder/ai-metadata-executor.ts

@@ -1,6 +1,8 @@
 import { type BrandPageModel } from '../brand-page/models';
+import type { EventTracker } from '../brand-page-maker/composables/useEventTracker';
 import { buildUpdateTextRequest } from './builders/update-content-text-builder';
 import { buildUpdateTextStyleRequest } from './builders/update-content-text-style-builder';
+import type { UndoHandler } from './builders/undo-builder';
 import type { Logger } from './logger';
 import { MetadataExecutor } from './metadata-executor';
 import {
@@ -19,6 +21,12 @@ import {
   type MoveSectionArguments,
   type AddPageArguments,
   type RemovePageArguments,
+  type RenamePageArguments,
+  type UpdateFooterArguments,
+  type UpdateGlobalStylesArguments,
+  type UpdateHeaderArguments,
+  // UndoArguments intentionally not destructured here — the undo tool call has
+  // no fields. Its presence is the entire signal.
 } from './parsers/ai-toolcall-parser';
 import type { SectionToolCallShape } from './parsers/section-tool-arguments';
 
@@ -28,6 +36,25 @@ export const executeToolCallsAsync = async (
   options: {
     logger?: Logger;
     maxCharacters?: number;
+    /**
+     * Callback invoked by the UndoBuilder at execution time to resolve the
+     * pre-prompt snapshot to restore to. The library is agnostic about where
+     * the snapshot lives — the caller decides (e.g. read from a Pinia store,
+     * IndexedDB, remote API). Return `null` when no snapshot is available;
+     * the UndoBuilder will surface a clear error.
+     *
+     * Required when the toolcalls include an `undo` call. If omitted, the
+     * library substitutes a `() => null` handler so undo produces a
+     * well-defined error rather than a cryptic failure.
+     */
+    undoHandler?: UndoHandler;
+    /**
+     * Optional AI-prompt-originated event tracker. When provided, builders
+     * that add or remove sections invoke the tracker at the mutation point.
+     * Passed by reference so thread/build IDs and user plan can be resolved
+     * fresh at fire time by the composable layer.
+     */
+    eventTracker?: EventTracker;
   },
 ): Promise<MetadataExecutorResult> => {
   const requests: MetadataBuilderRequest[] = toolcalls
@@ -105,6 +132,65 @@ export const executeToolCallsAsync = async (
           };
         }
 
+        case AI_ASSISTANT_TOOL_NAMES.RENAME_PAGE: {
+          const arg = toolcall.arguments as unknown as RenamePageArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.RENAME_PAGE as BuilderType,
+            payload: {
+              pageId: arg.page_id,
+              pageName: arg.page_name,
+            },
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.UPDATE_FOOTER: {
+          const arg = toolcall.arguments as unknown as UpdateFooterArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.UPDATE_FOOTER as BuilderType,
+            payload: arg,
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.UPDATE_GLOBAL_STYLES: {
+          const arg =
+            toolcall.arguments as unknown as UpdateGlobalStylesArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.UPDATE_GLOBAL_STYLES as BuilderType,
+            payload: arg,
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.UPDATE_HEADER: {
+          const arg = toolcall.arguments as unknown as UpdateHeaderArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.UPDATE_HEADER as BuilderType,
+            payload: arg,
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.UNDO: {
+          // The undo tool has no wire arguments — the builder resolves the
+          // snapshot by invoking the caller-supplied undoHandler at execute
+          // time. If the caller didn't supply one, substitute a null-returning
+          // handler so the builder surfaces a clear "nothing to restore"
+          // error rather than a vaguer validation failure.
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.UNDO_WEBSITE as BuilderType,
+            payload: {
+              undoHandler: options.undoHandler ?? (() => null),
+            },
+          };
+        }
+
         default: {
           const sectionTool = SECTION_TOOL_MAP[toolcall.function];
 
@@ -120,6 +206,7 @@ export const executeToolCallsAsync = async (
             mode,
             content_id: contentId,
             page_id: pageId,
+            move_before_content_id: moveBeforeContentId,
             arguments: sectionArgs,
           } = toolcall.arguments as unknown as SectionToolCallShape;
 
@@ -134,6 +221,7 @@ export const executeToolCallsAsync = async (
               contentId: contentId as string,
               arguments: sectionArgs,
               pageId: pageId as string,
+              moveBeforeContentId: moveBeforeContentId,
             },
           };
         }
@@ -145,5 +233,10 @@ export const executeToolCallsAsync = async (
 
   const executor = new MetadataExecutor();
 
-  return await executor.executeAsync(metadata, requests, options.logger);
+  return await executor.executeAsync(
+    metadata,
+    requests,
+    options.logger,
+    options.eventTracker,
+  );
 };

package/src/metadata-builder/builders/add-page-builder.ts

@@ -6,11 +6,12 @@ import {
   type MetadataBuilderRequest,
 } from '../models';
 import type { Logger } from '../logger';
+import {
+  ADD_PAGE_CHECKS,
+  type AddPagePayload,
+} from './section-rules/add-page.rules';
 
-export interface AddPagePayload {
-  pageId: string;
-  pageName: string;
-}
+export type { AddPagePayload };
 
 export class AddPageBuilder extends BaseMetadataBuilder<AddPagePayload> {
   constructor(
@@ -21,16 +22,11 @@ export class AddPageBuilder extends BaseMetadataBuilder<AddPagePayload> {
   }
 
   async validateAsync(): Promise<{ errors: string[] }> {
-    const errors: string[] = [];
-    const payload = this.request.payload;
-
-    if (!payload?.pageId) {
-      errors.push('page_id is required for add_page');
-    }
+    const errors = ADD_PAGE_CHECKS.flatMap((check) => {
+      const err = check(this.request.payload);
 
-    if (!payload?.pageName) {
-      errors.push('page_name is required for add_page');
-    }
+      return err ? [err] : [];
+    });
 
     return { errors };
   }

package/src/metadata-builder/builders/footer-builder.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import type { BrandPageModel } from '../../brand-page/models';
+import type { TextStyleOptions } from '../../brand-page/models/styles.model';
+import type { UpdateFooterArguments } from '../parsers/ai-toolcall-parser';
+import { BUILDER_TYPES } from '../models';
+import { FooterBuilder } from './footer-builder';
+
+/**
+ * BP-5420: changing the footer copyright font had no effect when a global text
+ * style was applied. New footers default `copyrightStyle.textStyleType` to
+ * `paragraphs`, so the renderer (`getCopyrightTextStyle`) replaced the whole
+ * style with the global preset and discarded the font the builder wrote.
+ *
+ * The fix routes copyright style writes through `applyDetachedStyleOverride`,
+ * which resolves the preset in and clears `textStyleType` so the per-element
+ * override sticks.
+ */
+
+const textStyleOptions = {
+  titles: { type: 'titles', title: 'Titles', style: { fontFamily: 'Poppins' } },
+  headings: {
+    type: 'headings',
+    title: 'Headings',
+    style: { fontFamily: 'Poppins' },
+  },
+  paragraphs: {
+    type: 'paragraphs',
+    title: 'Paragraphs',
+    style: { fontFamily: 'Inter', fontSize: '1em', color: '#2d0b3f' },
+  },
+  buttons: {
+    type: 'buttons',
+    title: 'Buttons',
+    style: { fontFamily: 'Poppins' },
+  },
+} as unknown as TextStyleOptions;
+
+const makeModel = (copyrightStyle: Record<string, unknown>): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: { copyrightStyle: { ...copyrightStyle } },
+    pageFooterMobile: { copyrightStyle: { ...copyrightStyle } },
+  }) as unknown as BrandPageModel;
+
+const run = (args: UpdateFooterArguments, model: BrandPageModel) =>
+  new FooterBuilder({
+    id: 'f1',
+    type: BUILDER_TYPES.UPDATE_FOOTER,
+    payload: args,
+  }).buildAsync(model);
+
+describe('FooterBuilder — copyright font vs global style', () => {
+  it('detaches from the global preset: applies the font, clears textStyleType, retains preset values', async () => {
+    const model = makeModel({
+      textStyleType: 'paragraphs',
+      textAlign: 'center',
+    });
+
+    const { model: out } = await run(
+      { copyright_text_font_family: 'Anton' },
+      model,
+    );
+
+    const style = out.pageFooterDesktop!.copyrightStyle as Record<
+      string,
+      unknown
+    >;
+
+    expect(style.fontFamily).toBe('Anton');
+    expect(style.textStyleType).toBeUndefined();
+    // unchanged preset properties are retained, not reset to defaults
+    expect(style.fontSize).toBe('1em');
+    expect(style.color).toBe('#2d0b3f');
+    expect(style.textAlign).toBe('center');
+  });
+});