@designcrowd/library.brand-page 6.0.26-json-prereq-2 → 6.0.27-websitev2-dev-1

package/src/brand-page/models/index.ts

@@ -30,15 +30,6 @@ import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
 import * as uuid from 'uuid';
 import type { BrandPagePaymentConfig } from './payment.model';
-import type { JSONContent } from '@tiptap/vue-3';
-
-/**
- * BP-5787 — a rich-text field is either a legacy inline-HTML string or a
- * Tiptap JSON document. Typing RTE content fields as RichTextValue (instead of
- * `string`) forces every consumer to handle both forms — surfacing at compile
- * time any code that assumes a plain string (e.g. `.replace`, `.length`).
- */
-export type RichTextValue = string | JSONContent;
 
 export * from './brand-page-context.model';
 export * from './payment.model';
@@ -289,7 +280,7 @@ export interface TextContent extends Content {
   /**
    * For BrandPage/BrandContact only
    */
-  text: RichTextValue;
+  text: string;
   /**
    * For BrandSite
    */
@@ -313,9 +304,9 @@ export interface TextContent extends Content {
 
 export interface ProfileContent extends Content {
   avatarImageUrl: string;
-  name: RichTextValue;
-  title: RichTextValue;
-  description: RichTextValue;
+  name: string;
+  title: string;
+  description: string;
   backgroundColor: BrandPageCssStyle;
   colorReplacements: ColorReplacement[];
   mediaType?: string;
@@ -336,7 +327,7 @@ export interface MapContent extends Content {
 
 export interface MailingListContent extends Content {
   acceptedFields?: 'emailOnly' | 'nameAndEmail';
-  title: RichTextValue;
+  title: string;
   buttonText: string;
   titleStyle: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
@@ -396,10 +387,10 @@ export interface FormField {
 export interface ContactFormContent extends Content {
   type: 'contact-form';
   displayStyle: string;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string;
-  successMessage: RichTextValue;
+  successMessage: string;
   fields: FormField[];
   responseEmail: string;
   imageUrl?: string;
@@ -419,8 +410,8 @@ export interface ContactFormContent extends Content {
 export interface BannerSectionContent extends Content {
   type: 'banner-section';
   imageUrl: string;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string | false;
   url: string;
   email?: string;
@@ -450,8 +441,8 @@ export const MEDIA_TYPES = {
 export type MediaType = keyof typeof MEDIA_TYPES;
 
 export interface TextMediaItem extends ImageItem {
-  title: RichTextValue;
-  paragraph: RichTextValue;
+  title: string;
+  paragraph: string;
   itemsId: number;
 
   buttonText?: string | false;
@@ -475,8 +466,8 @@ export interface TextShapeItem extends TextMediaItem {
 export interface ShapeItem extends ImageItem {
   colorReplacements: ColorReplacement[];
   mediaType: MediaType;
-  title?: RichTextValue;
-  paragraph?: RichTextValue;
+  title?: string;
+  paragraph?: string;
 
   // overrides for personalisation
   titleOverride?: string;
@@ -487,9 +478,9 @@ export interface TestimonialItems {
   /** Stable per-item identifier. See ImageItem.id. */
   id: string;
   imageUrl: string;
-  name: RichTextValue;
-  position: RichTextValue;
-  testimonials: RichTextValue;
+  name: string;
+  position: string;
+  testimonials: string;
   colorReplacements: ColorReplacement[];
   mediaType: string;
   size?: string;
@@ -505,7 +496,7 @@ export interface TestimonialItems {
 export interface TextItem {
   /** Stable per-item identifier. See ImageItem.id. */
   id: string;
-  text: RichTextValue;
+  text: string;
   textStyle: TextStyleDeclaration;
 
   // overrides for personalisation
@@ -527,8 +518,8 @@ export interface ImagesSectionContent extends Content, MediaSection {
 }
 
 export interface MediaSection extends Content {
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   displayStyle: ImagesSectionContentDisplayStyle;
   items: TextShapeItem[] | TextMediaItem[];
   titleStyle: TextStyleDeclaration;
@@ -547,7 +538,7 @@ export interface ColorReplacement {
 
 export interface TestimonialSectionContent extends Content {
   type: 'testimonial-section';
-  title: RichTextValue;
+  title: string;
   displayStyle: string;
   items: TestimonialItems[];
   titleStyle: TextStyleDeclaration;
@@ -562,8 +553,8 @@ export interface TestimonialSectionContent extends Content {
 export interface AboutSectionContent extends Content {
   type: 'about-section';
   imageUrl: string;
-  title: RichTextValue;
-  paragraph: RichTextValue;
+  title: string;
+  paragraph: string;
   displayStyle: string;
   titleStyle: TextStyleDeclaration;
   paragraphStyle: TextStyleDeclaration;
@@ -592,7 +583,7 @@ export type SocialLinksIconDisplayStyle =
 
 export interface SocialLinksContent extends Content {
   type: 'social-links';
-  title: RichTextValue;
+  title: string;
   links: LinksItem[];
   iconDisplayStyle: SocialLinksIconDisplayStyle;
   iconFillStyles: BrandPageCssStyle;
@@ -619,8 +610,8 @@ export interface DividerSectionContent extends Content {
 
 export interface BookingSectionContent extends Content {
   type: 'booking-section';
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string;
   url: string;
   email?: string;

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -462,7 +462,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -914,7 +914,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1373,7 +1373,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/migration.util.ts

@@ -22,7 +22,6 @@ import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
 import { migration19 } from './migration/migration-19';
-import { migration20 } from './migration/migration-20';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -180,17 +179,6 @@ const MIGRATION_TABLE = [
     description:
       'BP-5800: seed the button fill colour as each block’s own container colour so it is independent of the site button (existing sites render unchanged) — backgroundStyle for mailing-list, request-payment and support-me (all types); cardStyle for the BP/BC contact form (skipped on brand-site)',
   },
-  {
-    version: 20,
-    migrateFn: migration20,
-    // One-time versioned migration (NOT runAlways): legacy sites (v < 20)
-    // convert on their first load in any environment — the maker (browser DOM)
-    // and web-renderer SSR (migration-20 installs a jsdom window). It no longer
-    // needs to re-run every load because the AI section builders now emit Tiptap
-    // JSON directly, so there is no recurring post-load source of HTML to catch.
-    description:
-      'BP-5787: convert inline-HTML RTE content to Tiptap JSON on first load (client or server); AI builders emit JSON directly, so this runs once per site',
-  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/style.util.test.ts

@@ -87,57 +87,6 @@ describe('style.util', () => {
     );
   });
 
-  test('applyLogoThemeToBrandPageModel preserves var() token refs in JSON RTE content (BP-5787)', () => {
-    // Arrange — title stored as Tiptap JSON with a theme-token colour mark.
-    const logoTheme = logoWithFlatColorsTheme;
-    const titleDoc = {
-      type: 'doc',
-      content: [
-        {
-          type: 'heading',
-          attrs: { level: 2, textAlign: 'center' },
-          content: [
-            {
-              type: 'text',
-              marks: [
-                {
-                  type: 'textStyle',
-                  attrs: { color: `var(--${STYLE_THEME_KEYS.LogoTextColor})` },
-                },
-              ],
-              text: 'Themed',
-            },
-          ],
-        },
-      ],
-    };
-    const brandPageModel = new BrandPageModel({
-      ...BRAND_SITE,
-      pages: [
-        {
-          title: '1',
-          slug: '1',
-          contents: [
-            {
-              ...createInitialBannerSectionContent(),
-              title: titleDoc,
-            } as any,
-          ],
-        },
-      ],
-    });
-
-    // Act
-    const { model } = applyLogoThemeToBrandPageModel(logoTheme, brandPageModel);
-
-    // Assert — JSON RTE content is an object, so the var() token is NOT
-    // flattened to rgb(); it survives so a new theme can still propagate.
-    const title = JSON.stringify((model.pages[0].contents[0] as any).title);
-
-    expect(title).toContain(`var(--${STYLE_THEME_KEYS.LogoTextColor})`);
-    expect(title).not.toContain(logoTheme.logoTextColor.rgb);
-  });
-
   test('applyLogoThemeToBrandPageModel should apply logo theme color to content color when content color has a color matched theme key', () => {
     // Arrange
     const logoTheme = logoWithFlatColorsTheme;

package/src/brand-page/utils/text.util.ts

@@ -1,56 +1,17 @@
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 
-/**
- * BP-5787 — a Tiptap JSON document is an object with `type: 'doc'`.
- * Inlined here (rather than importing from brand-page-maker) to avoid a
- * circular import: rich-text-editor.util imports getRenderText from this file.
- */
-const isTiptapDoc = (value: unknown): value is { type: 'doc' } =>
-  typeof value === 'object' &&
-  value !== null &&
-  (value as { type?: string }).type === 'doc';
-
-const jsonDocPlainText = (doc: unknown): string => {
-  const parts: string[] = [];
-
-  const walk = (node: any): void => {
-    if (typeof node?.text === 'string') parts.push(node.text);
-
-    node?.content?.forEach(walk);
-  };
-
-  walk(doc);
-
-  return parts.join(' ').replace(/\s+/g, ' ').trim();
-};
-
 export const getRenderText = (text: string): string => {
-  // BP-5787: RTE fields may now be Tiptap JSON objects. Non-strings pass
-  // through untouched so the renderer (TextWrapper) handles them via its
-  // JSON-aware path, instead of throwing on `.replace`.
-  if (typeof text !== 'string') {
-    return text as unknown as string;
-  }
-
   return text.replace(
     new RegExp(`(${ESCAPED_NEWLINE_CHARACTER}|\\n)`, 'g'),
     '<br/>',
   );
 };
 
-// Accepts a legacy inline-HTML string or a Tiptap JSON document (BP-5787):
-// for JSON it returns the concatenated visible text; for HTML it strips tags.
-export const escapeContentText = (text: unknown): string | undefined => {
+export const escapeContentText = (
+  text: string | undefined,
+): string | undefined => {
   if (!text) {
-    return text as undefined;
-  }
-
-  if (isTiptapDoc(text)) {
-    return jsonDocPlainText(text);
-  }
-
-  if (typeof text !== 'string') {
-    return undefined;
+    return text;
   }
 
   return text

package/src/brand-page/utils/vcard.util.ts

@@ -235,11 +235,9 @@ const addProfileInfo = (
   profile: ProfileViewModel,
   vcardLines: string[],
 ): void => {
-  const name = sanitizeForVCard(getPlainTextFromRTE(profile.name) || '');
-  const title = sanitizeForVCard(getPlainTextFromRTE(profile.title) || '');
-  const description = sanitizeForVCard(
-    getPlainTextFromRTE(profile.description) || '',
-  );
+  const name = sanitizeForVCard(profile.name || '');
+  const title = sanitizeForVCard(profile.title || '');
+  const description = sanitizeForVCard(profile.description || '');
 
   if (name) {
     const nameParts = name.trim().split(/\s+/);
@@ -318,7 +316,7 @@ export const saveContact = (brandPageData: {
 }): void => {
   const vcard = generateVCard(brandPageData);
   const profile = findProfileContent(brandPageData);
-  const filename = generateVCardFilename(getPlainTextFromRTE(profile?.name));
+  const filename = generateVCardFilename(profile?.name);
 
   downloadVCard(vcard, filename);
 };

package/src/brand-page/utils/view-model.util.ts

@@ -119,7 +119,7 @@ import {
   getRouteNameByPageIndex,
   getRouteParamsByPage,
 } from './route.util';
-import { hasRTEContent, isTiptapDocument } from '../../brand-page-maker/utils';
+import { hasRTEContent } from '../../brand-page-maker/utils';
 import {
   getPageIdFromHref,
   isHrefPageId,
@@ -1519,86 +1519,6 @@ const mapPageIdReferencesToRelativePaths = (
   });
 };
 
-// Resolve a `pageid:<id>` internal-link href to the published relative path.
-// Returns the resolved href, or null when `href` is not an internal pageid link
-// (external/absolute links are left untouched). Falls back to the site root when
-// the pageid can't be matched to a nav route.
-const resolvePageIdHref = (
-  href: string,
-  nav: NavViewModel,
-  options: ViewModelMappingOptions,
-): string | null => {
-  // Only process internal links (no protocol, doesn't start with /)
-  if (!href || href.match(/^(https?:\/\/|\/)/) || !isHrefPageId(href)) {
-    return null;
-  }
-
-  const pageId = getPageIdFromHref(href);
-  const route = findNavItemByPageId(nav.navItems, pageId);
-  const brandPageSlugRoute = options.brandPageSlug
-    ? `/${options.brandPageSlug}`
-    : '/';
-
-  if (route) {
-    if (route.isRoot) {
-      return brandPageSlugRoute;
-    }
-
-    return `${brandPageSlugRoute}${brandPageSlugRoute === '/' ? '' : '/'}${route.relativePath}`;
-  }
-
-  // fallback to root if pageid cannot be resolved.
-  return brandPageSlugRoute;
-};
-
-// BP-5847: walk a Tiptap JSON doc and rewrite every link mark whose href is a
-// `pageid:` reference into its published relative path. Returns a NEW doc when
-// something changed (so the shared model doc is never mutated), else the same
-// reference.
-export const resolvePageIdsInRteJson = (
-  doc: unknown,
-  nav: NavViewModel,
-  options: ViewModelMappingOptions,
-): unknown => {
-  let changed = false;
-
-  const walk = (node: any): any => {
-    if (!node || typeof node !== 'object') {
-      return node;
-    }
-
-    let next = node;
-
-    if (Array.isArray(node.marks)) {
-      const marks = node.marks.map((mark: any) => {
-        if (mark?.type === 'link' && typeof mark.attrs?.href === 'string') {
-          const resolved = resolvePageIdHref(mark.attrs.href, nav, options);
-
-          if (resolved !== null) {
-            changed = true;
-
-            return { ...mark, attrs: { ...mark.attrs, href: resolved } };
-          }
-        }
-
-        return mark;
-      });
-
-      next = { ...next, marks };
-    }
-
-    if (Array.isArray(node.content)) {
-      next = { ...next, content: node.content.map(walk) };
-    }
-
-    return next;
-  };
-
-  const result = walk(doc);
-
-  return changed ? result : doc;
-};
-
 const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
   content: any,
   nav: NavViewModel,
@@ -1611,15 +1531,7 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       return;
     }
 
-    if (isTiptapDocument(value)) {
-      // BP-5847: RTE fields may now be Tiptap JSON. Resolve pageid link marks
-      // here too, or internal links render as raw `pageid:` and don't navigate.
-      (content as unknown as Record<string, unknown>)[key] =
-        resolvePageIdsInRteJson(value, nav, options);
-    } else if (
-      typeof value === 'object' &&
-      (key === 'items' || key === 'textItems')
-    ) {
+    if (typeof value === 'object' && (key === 'items' || key === 'textItems')) {
       if (Array.isArray(value)) {
         value.forEach((item) => {
           dynamicallyMapPageIdInHyperlinksToRelativePaths(item, nav, options);
@@ -1631,11 +1543,31 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       (content as unknown as Record<string, unknown>)[key] = value.replace(
         /<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi,
         (match, existingAttrsStart, href, existingAttrsEnd) => {
-          const resolved = resolvePageIdHref(href, nav, options);
+          // Only process internal links (no protocol, doesn't start with /)
+          if (href && !href.match(/^(https?:\/\/|\/)/) && isHrefPageId(href)) {
+            const pageId = getPageIdFromHref(href);
+
+            const route = findNavItemByPageId(nav.navItems, pageId);
+
+            const brandPageSlugRoute = options.brandPageSlug
+              ? `/${options.brandPageSlug}`
+              : '/';
+
+            if (route) {
+              let href = `${brandPageSlugRoute}`;
+
+              if (!route.isRoot) {
+                href = `${brandPageSlugRoute}${brandPageSlugRoute === '/' ? '' : '/'}${route.relativePath}`;
+              }
+
+              return `<a ${existingAttrsStart}href="${href}"${existingAttrsEnd}>`;
+            }
+
+            // fallback to root if pageid cannot be resolved.
+            return `<a ${existingAttrsStart}href="${brandPageSlugRoute}"${existingAttrsEnd}>`;
+          }
 
-          return resolved === null
-            ? match
-            : `<a ${existingAttrsStart}href="${resolved}"${existingAttrsEnd}>`;
+          return match;
         },
       );
     }

package/src/brand-page/view-models.ts

@@ -41,7 +41,6 @@ import type {
   BackgroundShape,
   PersonalisationRole,
   SaveContactOptions,
-  RichTextValue,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -197,8 +196,8 @@ export interface TextImageSectionViewModel {
   id: string;
   type: 'images-section';
   role: ContentType;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   displayStyle: ImagesSectionContentDisplayStyle;
   aspectRatio: AspectRatio;
   areImagesFullWidth: boolean;

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/components/rich-text-editor/RichTextEditor.vue

@@ -384,7 +384,7 @@
     <div class="tw-relative" :class="{ 'editor-compact': isCompact }">
       <BubbleMenu
         :editor="editor"
-        :options="bubbleMenuOptions"
+        :tippy-options="tippyOptions"
         :update-delay="0"
         :should-show="shouldShow"
         class="tw-w-fit"
@@ -453,8 +453,7 @@ import {
   ButtonGroup,
   TextInput,
 } from '@designcrowd/fe-shared-lib';
-import { EditorContent } from '@tiptap/vue-3';
-import { BubbleMenu } from '@tiptap/vue-3/menus';
+import { EditorContent, BubbleMenu } from '@tiptap/vue-3';
 import { useRichTextEditor } from '../../composables/rich-text-editor/useRichTextEditor';
 import FontPicker from '@shared/font-family-selector/FontPicker.vue';
 import ColorField from '@shared/content-settings/components/color-field/ColorField.vue';
@@ -952,7 +951,7 @@ const {
   hyperlinkValue,
   setHyperlinkUrlValue,
   shouldShow,
-  bubbleMenuOptions,
+  tippyOptions,
   handleAdminColorChange,
 } = useRichTextEditor(
   model,

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

@@ -33,6 +33,7 @@ export function useAiMetadataBuilder(logger: Logger) {
     model: BrandPageModel,
     aiAssistantToolCall: AiAssistantToolCall[],
     options: {
+      maxCharacters?: number;
       /**
        * Invoked by the UndoBuilder to resolve the pre-prompt snapshot.
        * Required when the response includes an `undo` tool call.

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

@@ -513,7 +513,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
           message,
           websiteContext,
           websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-          agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+          agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER_V2,
           userPlan,
           connectionId,
         });
@@ -524,7 +524,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
             message,
             websiteContext,
             websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-            agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+            agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER_V2,
             userPlan,
             connectionId,
           },
@@ -727,11 +727,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).
+            // brandSite AI is V2-only; every call site sends WEBSITE_BUILDER_V2.
             const submitResult = await client.submitToolResultsBuildAsync(
               aiThreadStore.threadId!,
               {
                 toolCalls: toolResults,
-                agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+                agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER_V2,
                 connectionId,
                 retryCount,
                 userPlan,

package/src/brand-page-maker/composables/rich-text-editor/bubbleMenu.ts

@@ -23,16 +23,20 @@ export const useBubbleMenu = (
     return false;
   };
 
-  // v3 BubbleMenu uses Floating UI (was tippy.js in v2). Only placement + offset
-  // carry over; the rest of the old tippy config (trigger/interactive/hideOnClick/
-  // zIndex) is either the v3 default or handled in CSS.
-  const bubbleMenuOptions = {
+  const tippyOptions = {
+    duration: 100,
     placement: 'bottom' as const,
-    offset: 10,
+    interactive: true,
+    appendTo: 'parent' as const,
+    hideOnClick: false,
+    arrow: false,
+    offset: [0, 10] as [number, number],
+    trigger: 'manual' as const,
+    zIndex: 10,
   };
 
   return {
     shouldShow,
-    bubbleMenuOptions,
+    tippyOptions,
   };
 };