@designcrowd/library.brand-page 5.17.6 → 5.17.7

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

@@ -5,6 +5,8 @@ export interface SnapshotState {
   isCapturing: boolean;
 }
 
+let captureCallback: (() => Promise<void>) | null = null;
+
 export const useSnapshotStore = defineStore('snapshot', {
   state: (): SnapshotState => ({
     snapshotBase64: null,
@@ -23,6 +25,16 @@ export const useSnapshotStore = defineStore('snapshot', {
     clearSnapshot() {
       this.snapshotBase64 = null;
     },
+
+    registerCaptureCallback(callback: () => Promise<void>) {
+      captureCallback = callback;
+    },
+
+    async refreshSnapshotAsync() {
+      if (captureCallback) {
+        await captureCallback();
+      }
+    },
   },
 
   getters: {

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

@@ -1,9 +1,11 @@
 import axios, { type AxiosError } from 'axios';
-import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container/brand-page-container-store';
+import { useBrandPageContainerStore } from '../brand-page-maker/stores/brandpage-container/brand-page-container-store';
+import type { MinifiedBrandPageMetadata } from '../utils/minify-brand-page-metadata';
 
 // Agent types
 export const AI_ASSISTANT_AGENT_TYPES = {
   WEBSITE_TEXT_ELEMENT: 'website_text_element',
+  WEBSITE_BUILDER: 'website_builder',
 } as const;
 
 export type AiAssistantAgentType =
@@ -258,6 +260,20 @@ export const buildWebsiteTextElementMessage = (
   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/composables/useSnapshot.ts

@@ -67,12 +67,59 @@ export function useSnapshot() {
         throw new Error('html2canvas failed to load');
       }
 
+      // Pre-fetch blob URLs from shape <object> elements so they can be
+      // rendered as <img> in the html2canvas clone (html2canvas cannot
+      // traverse the isolated DOM inside <object> elements).
+      const shapeDataUris = new Map<string, string>();
+      const shapeObjects = element.querySelectorAll('.c-shape-object object');
+
+      for (const obj of Array.from(shapeObjects)) {
+        const dataUrl = obj.getAttribute('data');
+
+        if (dataUrl && dataUrl.startsWith('blob:')) {
+          try {
+            const response = await fetch(dataUrl);
+            const svgText = await response.text();
+
+            shapeDataUris.set(
+              dataUrl,
+              `data:image/svg+xml,${encodeURIComponent(svgText)}`,
+            );
+          } catch {
+            /* skip – shape will render as blank, same as before */
+          }
+        }
+      }
+
       const canvas = await window.html2canvas(element, {
         allowTaint: true,
         useCORS: true,
         scale: 0.8, // Reduce quality to decrease file size
         logging: false,
         backgroundColor: '#ffffff',
+        onclone: (_doc: Document, clonedElement: HTMLElement) => {
+          const clonedObjects = clonedElement.querySelectorAll(
+            '.c-shape-object object',
+          );
+
+          clonedObjects.forEach((obj) => {
+            const dataUrl = obj.getAttribute('data');
+
+            if (dataUrl && shapeDataUris.has(dataUrl)) {
+              const img = _doc.createElement('img');
+
+              img.src = shapeDataUris.get(dataUrl)!;
+
+              const style = (obj as HTMLElement).getAttribute('style');
+
+              if (style) {
+                img.setAttribute('style', style);
+              }
+
+              obj.parentNode?.replaceChild(img, obj);
+            }
+          });
+        },
       });
 
       const base64Image = canvas.toDataURL('image/jpeg', 0.8); // Use JPEG with 80% quality for smaller size

package/src/lib.ts

@@ -60,6 +60,10 @@ export {
   getBrandPageViewModelFromBrandPageModel,
   migrateBrandPageModel,
 } from './brand-page/utils';
+export {
+  minifyBrandPageMetadata,
+  type MinifiedBrandPageMetadata,
+} from './utils/minify-brand-page-metadata';
 export * as brandPageUtils from './brand-page/utils';
 export type { CriticalResourceURLs } from './brand-page/utils/view-model.util';
 export {

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

@@ -6,15 +6,23 @@ import { MetadataExecutor } from './metadata-executor';
 import {
   type MetadataBuilderRequest,
   type MetadataExecutorResult,
+  type BuilderType,
+  BUILDER_TYPES,
 } from './models';
 import {
   AI_ASSISTANT_TOOL_NAMES,
+  SECTION_TOOL_MAP,
   type ParsedToolCall,
   type UpdateStyleToolArguments,
   type UpdateTextToolArguments,
+  type DeleteSectionArguments,
+  type MoveSectionArguments,
+  type AddPageArguments,
+  type RemovePageArguments,
 } from './parsers/ai-toolcall-parser';
+import type { SectionToolCallShape } from './parsers/section-tool-arguments';
 
-export const executeAiToolUseAsync = async (
+export const executeToolCallsAsync = async (
   metadata: BrandPageModel,
   toolcalls: ParsedToolCall[],
   options: {
@@ -22,36 +30,118 @@ export const executeAiToolUseAsync = async (
     maxCharacters?: number;
   },
 ): Promise<MetadataExecutorResult> => {
-  const requests: MetadataBuilderRequest[] = toolcalls.map((toolcall) => {
-    switch (toolcall.function) {
-      case AI_ASSISTANT_TOOL_NAMES.UPDATE_TEXT: {
-        const arg = toolcall.arguments as UpdateTextToolArguments;
-
-        return buildUpdateTextRequest(toolcall.toolId, {
-          contentId: arg.contentId,
-          fieldName: arg.fieldName,
-          newText: arg.metadata.text,
-          maxCharacters: options.maxCharacters,
-        });
-      }
+  const requests: MetadataBuilderRequest[] = toolcalls
+    .map((toolcall): MetadataBuilderRequest | null => {
+      switch (toolcall.function) {
+        case AI_ASSISTANT_TOOL_NAMES.UPDATE_TEXT: {
+          const arg = toolcall.arguments as unknown as UpdateTextToolArguments;
 
-      case AI_ASSISTANT_TOOL_NAMES.UPDATE_STYLE: {
-        const arg = toolcall.arguments as UpdateStyleToolArguments;
+          return buildUpdateTextRequest(toolcall.toolId, {
+            contentId: arg.contentId,
+            fieldName: arg.fieldName,
+            newText: arg.metadata.text,
+            maxCharacters: options.maxCharacters,
+          });
+        }
 
-        return buildUpdateTextStyleRequest(toolcall.toolId, {
-          contentId: arg.contentId,
-          fieldName: arg.fieldName,
-          newStyles: arg.metadata.style,
-        });
-      }
+        case AI_ASSISTANT_TOOL_NAMES.UPDATE_STYLE: {
+          const arg = toolcall.arguments as unknown as UpdateStyleToolArguments;
+
+          return buildUpdateTextStyleRequest(toolcall.toolId, {
+            contentId: arg.contentId,
+            fieldName: arg.fieldName,
+            newStyles: arg.metadata.style,
+          });
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.DELETE_SECTION: {
+          const arg = toolcall.arguments as unknown as DeleteSectionArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.DELETE_SECTION as BuilderType,
+            payload: {
+              contentId: arg.content_id,
+            },
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.MOVE_SECTION: {
+          const arg = toolcall.arguments as unknown as MoveSectionArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.MOVE_SECTION as BuilderType,
+            payload: {
+              contentId: arg.content_id,
+              position: arg.position,
+              targetPageId: arg.target_page_id,
+            },
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.ADD_PAGE: {
+          const arg = toolcall.arguments as unknown as AddPageArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.ADD_PAGE as BuilderType,
+            payload: {
+              pageId: arg.page_id,
+              pageName: arg.page_name,
+            },
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.REMOVE_PAGE: {
+          const arg = toolcall.arguments as unknown as RemovePageArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.REMOVE_PAGE as BuilderType,
+            payload: {
+              pageId: arg.page_id,
+            },
+          };
+        }
+
+        default: {
+          const sectionTool = SECTION_TOOL_MAP[toolcall.function];
+
+          if (!sectionTool) {
+            console.warn(
+              `[executeToolCallsAsync] Skipping unsupported tool call: ${toolcall.function}`,
+            );
+
+            return null;
+          }
+
+          const {
+            mode,
+            content_id: contentId,
+            page_id: pageId,
+            arguments: sectionArgs,
+          } = toolcall.arguments as unknown as SectionToolCallShape;
+
+          const builderType =
+            `${mode}-${sectionTool.sectionType}` as BuilderType;
 
-      default: {
-        throw new Error(`Unsupported tool call: ${toolcall.function}`);
+          return {
+            id: toolcall.toolId,
+            type: builderType,
+            payload: {
+              sectionType: sectionTool.sectionType,
+              contentId: contentId as string,
+              arguments: sectionArgs,
+              pageId: pageId as string,
+            },
+          };
+        }
       }
-    }
-  });
+    })
+    .filter((r): r is MetadataBuilderRequest => r !== null);
 
-  options.logger?.log('executeAiToolUseAsync', { requests });
+  options.logger?.log('executeToolCallsAsync', { requests });
 
   const executor = new MetadataExecutor();
 

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

@@ -0,0 +1,98 @@
+import { PageModel, type BrandPageModel } from '../../brand-page/models';
+import { getPageSlugFromPageTitle } from '../../brand-page-maker/utils/slug.util';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type { Logger } from '../logger';
+
+export interface AddPagePayload {
+  pageId: string;
+  pageName: string;
+}
+
+export class AddPageBuilder extends BaseMetadataBuilder<AddPagePayload> {
+  constructor(
+    request: MetadataBuilderRequest<AddPagePayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  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');
+    }
+
+    if (!payload?.pageName) {
+      errors.push('page_name is required for add_page');
+    }
+
+    return { errors };
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const { pageId, pageName } = this.request.payload!;
+
+    // Check if page with this ID already exists
+    if (model.pages.some((p) => p.id === pageId)) {
+      return {
+        request: this.request,
+        model,
+        errors: [`Page with ID "${pageId}" already exists`],
+      };
+    }
+
+    // Create the new page
+    const newPage = new PageModel({
+      id: pageId,
+      title: pageName,
+      contents: [],
+      isHidden: false,
+    });
+
+    // Insert the new page before any hidden pages
+    const visiblePages = model.pages.filter((page) => !page.isHidden);
+    const hiddenPages = model.pages.filter((page) => page.isHidden);
+
+    model.pages = [...visiblePages, newPage, ...hiddenPages];
+
+    // Construct slug from page name, ensuring uniqueness against existing routes
+    const existingSlugs = model.nav.routes.map((r) => r.pageSlug);
+    const slug = getPageSlugFromPageTitle(pageName, existingSlugs);
+
+    // Add nav route and order entry
+    const routeId = `route-${pageId}`;
+
+    model.nav.routes.push({
+      id: routeId,
+      pageId,
+      pageSlug: slug,
+      isHidden: false,
+      displayName: pageName,
+    });
+
+    model.nav.orders.push({
+      routeId,
+      subRoutes: [],
+    });
+
+    this.log({
+      message: `Added page "${pageName}" (${pageId}) with slug "/${slug}"`,
+    });
+
+    return { request: this.request, model };
+  }
+}

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

@@ -0,0 +1,83 @@
+import { type BrandPageModel } from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type { Logger } from '../logger';
+
+export interface RemovePagePayload {
+  pageId: string;
+}
+
+export class RemovePageBuilder extends BaseMetadataBuilder<RemovePagePayload> {
+  constructor(
+    request: MetadataBuilderRequest<RemovePagePayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors: string[] = [];
+    const payload = this.request.payload;
+
+    if (!payload?.pageId) {
+      errors.push('page_id is required for remove_page');
+    }
+
+    return { errors };
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const { pageId } = this.request.payload!;
+
+    // Check if page exists
+    const pageIndex = model.pages.findIndex((p) => p.id === pageId);
+
+    if (pageIndex === -1) {
+      return {
+        request: this.request,
+        model,
+        errors: [`Page with ID "${pageId}" not found`],
+      };
+    }
+
+    const page = model.pages[pageIndex];
+
+    // Remove the page
+    model.pages.splice(pageIndex, 1);
+
+    // Remove matching nav route(s)
+    const removedRouteIds = new Set<string>();
+
+    model.nav.routes = model.nav.routes.filter((route) => {
+      if (route.pageId === pageId) {
+        removedRouteIds.add(route.id);
+
+        return false;
+      }
+
+      return true;
+    });
+
+    // Remove matching nav order entries
+    model.nav.orders = model.nav.orders.filter(
+      (order) => !removedRouteIds.has(order.routeId),
+    );
+
+    this.log({
+      message: `Removed page "${page.title}" (${pageId})`,
+    });
+
+    return { request: this.request, model };
+  }
+}

package/src/metadata-builder/builders/section-builders/about-section-builder.ts

@@ -0,0 +1,28 @@
+import type {
+  AboutSectionContent,
+  BrandPageModel,
+} from '../../../brand-page/models';
+import type { BuilderResult } from '../../models';
+import { applyScalarFields, applyStyleFields } from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+export class AboutSectionBuilder extends BaseSectionBuilder<AboutSectionContent> {
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const resolved = this.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    applyScalarFields(resolved.content, this.args, this.sectionType);
+    applyStyleFields(resolved.content, this.args, this.sectionType);
+
+    return { request: this.request, model };
+  }
+}

package/src/metadata-builder/builders/section-builders/banner-section-builder.ts

@@ -0,0 +1,45 @@
+import type {
+  BannerSectionContent,
+  BrandPageModel,
+} from '../../../brand-page/models';
+import type { BuilderResult } from '../../models';
+import type { BannerSectionArguments } from '../../parsers/section-tool-arguments';
+import {
+  applyScalarFields,
+  applyStyleFields,
+  applyRTEStyles,
+} from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+const applyBackgroundImage = (
+  content: BannerSectionContent,
+  args: BannerSectionArguments,
+): void => {
+  if (args.background_image_url) {
+    content.media = undefined;
+    content.mediaType = 'image';
+  }
+};
+
+export class BannerSectionBuilder extends BaseSectionBuilder<BannerSectionContent> {
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const resolved = this.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    applyScalarFields(resolved.content, this.args, this.sectionType);
+    applyStyleFields(resolved.content, this.args, this.sectionType);
+    applyRTEStyles(resolved.content, this.args, this.sectionType);
+    applyBackgroundImage(resolved.content, this.args as BannerSectionArguments);
+
+    return { request: this.request, model };
+  }
+}