@designcrowd/library.brand-page 5.17.6 → 5.17.7

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

@@ -0,0 +1,234 @@
+import type { BuilderResult } from '../../models';
+import type {
+  TextContent,
+  TextItem,
+  TextStyleDeclaration,
+  BrandPageModel,
+} from '../../../brand-page/models';
+import { updateRTEText } from '../../helpers/rte.helpers';
+import type {
+  TextSectionArguments,
+  TextSectionItem,
+} from '../../parsers/section-tool-arguments';
+import { applyScalarFields, applyStyleFields } from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+const createTextItem = (
+  item: TextSectionItem,
+  baseStyle: TextStyleDeclaration,
+): TextItem => {
+  const textStyle = (
+    item.text_style ? { ...baseStyle, ...item.text_style } : { ...baseStyle }
+  ) as TextStyleDeclaration;
+
+  return {
+    text: item.text || '',
+    textStyle,
+  };
+};
+
+const applyTextItems = (
+  content: TextContent,
+  items: TextSectionItem[],
+): void => {
+  content.textItems = items.map((item) =>
+    createTextItem(item, content.textStyle || {}),
+  );
+};
+
+const mergeTextItems = (
+  content: TextContent,
+  items: TextSectionItem[],
+  replaceAll: boolean,
+): void => {
+  const hasIndexedItems = items.some((item) => item.item_index !== undefined);
+
+  if (hasIndexedItems) {
+    for (const item of items) {
+      const targetIndex = item.item_index;
+
+      if (
+        targetIndex === undefined ||
+        targetIndex < 0 ||
+        !content.textItems?.[targetIndex]
+      )
+        continue;
+
+      const existing = content.textItems[targetIndex];
+
+      if (item.text !== undefined) existing.text = item.text;
+
+      if (item.text_style && typeof item.text_style === 'object') {
+        const mergedStyle = (
+          item.text_style
+            ? { ...(existing.textStyle || {}), ...item.text_style }
+            : existing.textStyle || {}
+        ) as TextStyleDeclaration;
+
+        existing.textStyle = mergedStyle;
+        existing.text = updateRTEText(existing.text, mergedStyle);
+      }
+    }
+
+    return;
+  }
+
+  const updatedItems = items.map((item, index) => {
+    const existing = content.textItems?.[index];
+    const baseStyle = existing?.textStyle || content.textStyle || {};
+
+    const mergedStyle = (
+      item.text_style ? { ...baseStyle, ...item.text_style } : baseStyle
+    ) as TextStyleDeclaration;
+
+    const text = item.text ?? existing?.text ?? '';
+
+    return {
+      text: item.text_style ? updateRTEText(text, mergedStyle) : text,
+      textStyle: mergedStyle,
+    };
+  });
+
+  if (
+    !replaceAll &&
+    content.textItems &&
+    content.textItems.length > items.length
+  ) {
+    updatedItems.push(...content.textItems.slice(items.length));
+  }
+
+  content.textItems = updatedItems;
+};
+
+/**
+ * Handles the single `text` + `text_style` fields (BrandPage/BrandContact
+ * or shorthand for the first item).
+ */
+const applySingleTextField = (
+  content: TextContent,
+  args: TextSectionArguments,
+): void => {
+  if (typeof args.text === 'string') {
+    if (Array.isArray(content.textItems) && content.textItems.length > 0) {
+      content.textItems[0] = {
+        ...content.textItems[0],
+        text: args.text,
+      };
+    } else {
+      content.textItems = [
+        {
+          text: args.text,
+          textStyle: { ...(content.textStyle || {}) },
+        },
+      ];
+    }
+  }
+
+  if (
+    args.text_style &&
+    typeof args.text_style === 'object' &&
+    Array.isArray(content.textItems) &&
+    content.textItems.length > 0
+  ) {
+    const mergedStyle = {
+      ...(content.textItems[0].textStyle || {}),
+      ...(content.textStyle || {}),
+    };
+
+    content.textItems[0] = {
+      ...content.textItems[0],
+      textStyle: mergedStyle,
+      text: updateRTEText(content.textItems[0].text, mergedStyle),
+    };
+  }
+};
+
+export class TextSectionBuilder extends BaseSectionBuilder<TextContent> {
+  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;
+
+    const content = resolved.content;
+
+    applyScalarFields(content, this.args, this.sectionType);
+    applyStyleFields(content, this.args, this.sectionType);
+
+    const args = this.args as TextSectionArguments;
+
+    if (args.items && Array.isArray(args.items)) {
+      if (this.mode === 'create') {
+        applyTextItems(content, args.items);
+      } else {
+        mergeTextItems(content, args.items, !!args._replace_items);
+      }
+    } else {
+      applySingleTextField(content, args);
+    }
+
+    // Phase 2: Item operations (remove, insert, reorder)
+    if (args._remove_item_indices?.length && content.textItems) {
+      const sorted = [...args._remove_item_indices].sort((a, b) => b - a);
+
+      for (const idx of sorted) {
+        if (idx >= 0 && idx < content.textItems.length) {
+          content.textItems.splice(idx, 1);
+        }
+      }
+    }
+
+    if (args.items && Array.isArray(args.items)) {
+      const insertItems = args.items.filter(
+        (item) => item.insert_at !== undefined && item.item_index === undefined,
+      );
+      const sortedInserts = [...insertItems].sort(
+        (a, b) => (b.insert_at ?? 0) - (a.insert_at ?? 0),
+      );
+
+      for (const item of sortedInserts) {
+        const pos = Math.max(
+          0,
+          Math.min(item.insert_at ?? 0, content.textItems?.length ?? 0),
+        );
+        const baseStyle = content.textStyle || {};
+        const textStyle = (
+          item.text_style
+            ? { ...baseStyle, ...item.text_style }
+            : { ...baseStyle }
+        ) as TextStyleDeclaration;
+        const newItem: TextItem = {
+          text: item.text ?? '',
+          textStyle,
+        };
+
+        content.textItems = content.textItems ?? [];
+        content.textItems.splice(pos, 0, newItem);
+      }
+    }
+
+    if (args._reorder_items?.length && content.textItems) {
+      const newOrder = args._reorder_items;
+      const unique = new Set(newOrder);
+
+      if (unique.size === newOrder.length) {
+        const reordered = newOrder
+          .filter((idx) => idx >= 0 && idx < content.textItems!.length)
+          .map((idx) => content.textItems![idx]);
+
+        if (reordered.length === content.textItems.length) {
+          content.textItems = reordered;
+        }
+      }
+    }
+
+    return { request: this.request, model };
+  }
+}

package/src/metadata-builder/builders/section-content-factory.ts

@@ -0,0 +1,20 @@
+/**
+ * Factory that creates default Content objects for each section type.
+ * Used by BaseSectionBuilder when adding a new section to a page.
+ */
+import { CONTENT_SETTINGS_CONFIGS } from '../../brand-page-maker/constants/config-settings-constant';
+import type { Content, ContentType } from '../../brand-page/models';
+import type { SectionType } from '../parsers/section-tool-arguments';
+
+export const createDefaultSectionContent = (
+  sectionType: SectionType,
+): Content | null => {
+  const configs = CONTENT_SETTINGS_CONFIGS();
+  const config = configs[sectionType as ContentType];
+
+  if (!config) {
+    return null;
+  }
+
+  return config.createInitialContent() as Content;
+};

package/src/metadata-builder/builders/section-field-maps.ts

@@ -0,0 +1,235 @@
+/**
+ * Maps AI tool call argument names → BrandPageModel content field names
+ * per section type.
+ *
+ * Reference: service.ai-pipelines/src/agents/website/section_schemas.py
+ * Reference: library.brand-page/src/brand-page/models/index.ts
+ */
+
+import type {
+  Content,
+  BannerSectionContent,
+  AboutSectionContent,
+  TestimonialSectionContent,
+  ImagesSectionContent,
+  ShapesSectionContent,
+  TextContent,
+  ProfileContent,
+  ContactFormContent,
+  MailingListContent,
+  SocialLinksContent,
+  DividerSectionContent,
+  ImageContent,
+  ButtonContent,
+  ImageGalleryContent,
+} from '../../brand-page/models';
+
+export type SectionFieldMap = Record<string, string>;
+
+/**
+ * Identity function that validates field map values are actual properties
+ * of the given Content subtype at compile time.
+ */
+function defineFieldMap<C extends Content>(
+  map: Record<string, keyof C & string>,
+): Record<string, keyof C & string> {
+  return map;
+}
+
+const bannerFields = defineFieldMap<BannerSectionContent>({
+  title: 'title',
+  description: 'description',
+  button_text: 'buttonText',
+  button_url: 'url',
+  background_image_url: 'imageUrl',
+  display_style: 'displayStyle',
+});
+
+const aboutFields = defineFieldMap<AboutSectionContent>({
+  title: 'title',
+  paragraph: 'paragraph',
+  about_image_url: 'imageUrl',
+  display_style: 'displayStyle',
+});
+
+const testimonialFields = defineFieldMap<TestimonialSectionContent>({
+  title: 'title',
+  display_style: 'displayStyle',
+  // items handled separately
+});
+
+const imagesSectionFields = defineFieldMap<ImagesSectionContent>({
+  title: 'title',
+  description: 'description',
+  display_style: 'displayStyle',
+  aspect_ratio: 'aspectRatio',
+  are_images_full_width: 'areImagesFullWidth',
+  // items handled separately
+});
+
+const shapesSectionFields = defineFieldMap<ShapesSectionContent>({
+  title: 'title',
+  description: 'description',
+  display_style: 'displayStyle',
+  size: 'size',
+  // items handled separately
+});
+
+const textFields = defineFieldMap<TextContent>({
+  text: 'text',
+});
+
+const profileFields = defineFieldMap<ProfileContent>({
+  name: 'name',
+  title: 'title',
+  description: 'description',
+  avatar_image_url: 'avatarImageUrl',
+});
+
+const contactFormFields = defineFieldMap<ContactFormContent>({
+  title: 'title',
+  description: 'description',
+  button_text: 'buttonText',
+  success_message: 'successMessage',
+  response_email: 'responseEmail',
+  header_image_url: 'imageUrl',
+  display_style: 'displayStyle',
+  layout_style: 'layoutStyle',
+});
+
+const mailingListFields = defineFieldMap<MailingListContent>({
+  title: 'title',
+  button_text: 'buttonText',
+});
+
+const socialLinksFields = defineFieldMap<SocialLinksContent>({
+  title: 'title',
+  icon_style: 'iconDisplayStyle',
+  // links handled separately
+});
+
+const dividerFields = defineFieldMap<DividerSectionContent>({
+  divider_style: 'dividerStyle',
+});
+
+const imageFields = defineFieldMap<ImageContent>({
+  image_url: 'imageUrl',
+  image_title: 'imageTitle',
+});
+
+const imageGalleryFields = defineFieldMap<ImageGalleryContent>({
+  // images handled separately
+});
+
+const buttonWithIconFields = defineFieldMap<ButtonContent>({
+  title: 'title',
+  url: 'url',
+  icon_image_url: 'iconUrl',
+});
+
+const emailButtonFields = defineFieldMap<ButtonContent>({
+  title: 'title',
+  email: 'url',
+  icon_image_url: 'iconUrl',
+});
+
+const phoneButtonFields = defineFieldMap<ButtonContent>({
+  title: 'title',
+  phone_number: 'url',
+  icon_image_url: 'iconUrl',
+});
+
+const socialButtonFields = defineFieldMap<ButtonContent>({
+  title: 'title',
+  url: 'url',
+});
+
+export const SECTION_FIELD_MAPS: Record<string, SectionFieldMap> = {
+  'banner-section': bannerFields,
+  'about-section': aboutFields,
+  'testimonial-section': testimonialFields,
+  'images-section': imagesSectionFields,
+  'shapes-section': shapesSectionFields,
+  text: textFields,
+  profile: profileFields,
+  'contact-form': contactFormFields,
+  'mailing-list': mailingListFields,
+  'social-links': socialLinksFields,
+  'divider-section': dividerFields,
+  image: imageFields,
+  'image-gallery': imageGalleryFields,
+  'general-link': buttonWithIconFields,
+  website: buttonWithIconFields,
+  email: emailButtonFields,
+  phone: phoneButtonFields,
+  facebook: socialButtonFields,
+  x: socialButtonFields,
+  instagram: socialButtonFields,
+  youtube: socialButtonFields,
+  linkedin: socialButtonFields,
+  pinterest: socialButtonFields,
+  twitch: socialButtonFields,
+  tiktok: socialButtonFields,
+};
+
+export const getSectionFieldMap = (
+  sectionType: string,
+): SectionFieldMap | undefined => {
+  return SECTION_FIELD_MAPS[sectionType];
+};
+
+const bannerStyleFields = defineFieldMap<BannerSectionContent>({
+  title_style: 'titleStyle',
+  description_style: 'descriptionStyle',
+  button_text_style: 'buttonTextStyle',
+});
+
+const aboutStyleFields = defineFieldMap<AboutSectionContent>({
+  title_style: 'titleStyle',
+  paragraph_style: 'paragraphStyle',
+});
+
+const textStyleFields = defineFieldMap<TextContent>({
+  text_style: 'textStyle',
+});
+
+const testimonialStyleFields = defineFieldMap<TestimonialSectionContent>({
+  title_style: 'titleStyle',
+  testimonial_style: 'testimonialStyle',
+  name_style: 'nameStyle',
+  position_style: 'positionStyle',
+});
+
+const contactFormStyleFields = defineFieldMap<ContactFormContent>({
+  title_style: 'titleStyle',
+  description_style: 'descriptionStyle',
+  button_text_style: 'buttonTextStyle',
+});
+
+const imagesSectionStyleFields = defineFieldMap<ImagesSectionContent>({
+  title_style: 'titleStyle',
+  description_style: 'descriptionStyle',
+  heading_style: 'headingStyle',
+  paragraph_style: 'paragraphStyle',
+});
+
+const shapesSectionStyleFields = defineFieldMap<ShapesSectionContent>({
+  title_style: 'titleStyle',
+  description_style: 'descriptionStyle',
+  heading_style: 'headingStyle',
+  paragraph_style: 'paragraphStyle',
+});
+
+export const STYLE_FIELD_MAPS: Record<string, SectionFieldMap> = {
+  'banner-section': bannerStyleFields,
+  'about-section': aboutStyleFields,
+  text: textStyleFields,
+  'testimonial-section': testimonialStyleFields,
+  'contact-form': contactFormStyleFields,
+  'images-section': imagesSectionStyleFields,
+  'shapes-section': shapesSectionStyleFields,
+};
+
+export const getStyleFieldMap = (
+  sectionType: string,
+): SectionFieldMap | undefined => STYLE_FIELD_MAPS[sectionType];

package/src/metadata-builder/builders/section-field-utils.ts

@@ -0,0 +1,157 @@
+import type { Content, TextStyleDeclaration } from '../../brand-page/models';
+import { RTE_ALLOWED_SECTION_TYPES } from '../../brand-page-maker/utils';
+import { updateRTEText } from '../helpers/rte.helpers';
+import type { SectionToolArguments } from '../parsers/section-tool-arguments';
+import { getSectionFieldMap, getStyleFieldMap } from './section-field-maps';
+
+/**
+ * Content subtypes (BannerSectionContent, TextContent, etc.) extend the base
+ * Content interface with additional properties. These utility functions apply
+ * fields dynamically via field maps resolved at runtime, so static typing
+ * can't know the concrete subtype.
+ *
+ * IndexableContent captures this: it's Content that can be indexed by string
+ * keys — a valid downcast because every Content instance at runtime is a
+ * subtype with extra properties beyond the base interface.
+ */
+type IndexableContent = Content & Record<string, unknown>;
+
+const isUrlField = (aiKey: string): boolean => aiKey.endsWith('_url');
+
+const isValidUrl = (value: unknown): boolean => {
+  if (typeof value !== 'string' || !value) return false;
+
+  try {
+    new URL(value);
+
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const applyScalarFields = (
+  content: Content,
+  args: SectionToolArguments,
+  sectionType: string,
+): void => {
+  const fieldMap = getSectionFieldMap(sectionType);
+
+  if (!fieldMap) return;
+
+  const record = content as IndexableContent;
+
+  for (const [aiKey, modelKey] of Object.entries(fieldMap)) {
+    if (aiKey in args) {
+      // Skip invalid URLs — don't overwrite model with malformed values
+      if (isUrlField(aiKey) && !isValidUrl(args[aiKey])) continue;
+
+      record[modelKey] = args[aiKey];
+    }
+  }
+};
+
+/**
+ * Convert AI-sent style value to the format expected by the model.
+ * - letterSpacing: unitless 0-100 → em string (e.g., 50 → '0.5em')
+ * - null → '' (explicitly clear/reset the property)
+ * - everything else passes through as-is
+ */
+const normalizeStyleValue = (key: string, value: unknown): unknown => {
+  if (value === null) return '';
+
+  if (value === undefined) return undefined;
+
+  if (key === 'letterSpacing' && typeof value === 'number') {
+    return `${value / 100}em`;
+  }
+
+  if (key === 'lineHeight' && typeof value === 'number') {
+    return String(value);
+  }
+
+  return value;
+};
+
+export const applyStyleFields = (
+  content: Content,
+  args: SectionToolArguments,
+  sectionType: string,
+): void => {
+  const styleMap = getStyleFieldMap(sectionType);
+
+  if (!styleMap) return;
+
+  const record = content as IndexableContent;
+
+  for (const [aiKey, modelKey] of Object.entries(styleMap)) {
+    if (aiKey in args && args[aiKey] && typeof args[aiKey] === 'object') {
+      const existing = (content[modelKey] as Record<string, unknown>) || {};
+      const aiStyle = args[aiKey] as Record<string, unknown>;
+
+      const filtered: Record<string, unknown> = {};
+
+      for (const [k, v] of Object.entries(aiStyle)) {
+        const normalized = normalizeStyleValue(k, v);
+
+        if (normalized !== undefined) filtered[k] = normalized;
+      }
+
+      record[modelKey] = {
+        ...existing,
+        ...filtered,
+        textStyleType: undefined,
+      };
+    }
+  }
+};
+
+/**
+ * RTE field → style field pairs for fields that support rich text editing.
+ * Matches the RTE_ALLOWED_FIELDS constant from rich-text-editor.util.ts:
+ * ['title', 'description', 'text', 'textItems']
+ *
+ * textItems is excluded here because it requires per-item handling
+ * (each TextItem has its own textStyle) — handled by TextSectionBuilder.
+ */
+const RTE_FIELD_STYLE_PAIRS: {
+  textField: string;
+  styleField: string;
+  argKey: string;
+}[] = [
+  { textField: 'title', styleField: 'titleStyle', argKey: 'title_style' },
+  {
+    textField: 'description',
+    styleField: 'descriptionStyle',
+    argKey: 'description_style',
+  },
+  { textField: 'text', styleField: 'textStyle', argKey: 'text_style' },
+];
+
+/**
+ * Re-applies merged styles to RTE content fields after applyStyleFields has
+ * updated the style objects. Only runs for section types that support RTE
+ * (defined by RTE_ALLOWED_SECTION_TYPES) and only touches fields in the
+ * RTE_ALLOWED_FIELDS list.
+ */
+export const applyRTEStyles = (
+  content: Content,
+  args: SectionToolArguments,
+  sectionType: string,
+): void => {
+  if (!RTE_ALLOWED_SECTION_TYPES.includes(sectionType)) return;
+
+  const record = content as IndexableContent;
+  const argsRecord = args as Record<string, unknown>;
+
+  for (const { textField, styleField, argKey } of RTE_FIELD_STYLE_PAIRS) {
+    if (!argsRecord[argKey]) continue;
+
+    const text = record[textField];
+    const style = record[styleField];
+
+    if (typeof text === 'string' && style) {
+      record[textField] = updateRTEText(text, style as TextStyleDeclaration);
+    }
+  }
+};

package/src/metadata-builder/helpers/rte.helpers.ts

@@ -1,5 +1,6 @@
 import type { TextStyleDeclaration } from '../../brand-page';
-import { getRTEColor } from '../../brand-page-maker/utils';
+import { getRTEColor, hasRTEContent } from '../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { getRenderText } from '../../brand-page/utils';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 import type { Editor } from '@tiptap/vue-3';
@@ -72,3 +73,24 @@ export const applyStyleToRTEText = (
 
   return html;
 };
+
+/**
+ * If `text` contains RTE markup, re-applies `style` to the RTE content
+ * so inline formatting matches the updated TextStyleDeclaration.
+ * Returns the original text unchanged when it has no RTE content.
+ */
+export const updateRTEText = (
+  text: string,
+  style: TextStyleDeclaration,
+): string => {
+  if (!text || typeof text !== 'string' || !hasRTEContent(text)) {
+    return text;
+  }
+
+  const { externalEditor } = useExternalRichTextEditor();
+  const updatedText = applyStyleToRTEText(externalEditor, text, style);
+
+  externalEditor.destroy();
+
+  return updatedText;
+};