@designcrowd/library.brand-page 6.0.5 → 6.0.6-ast-bugs

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

@@ -326,6 +326,84 @@ const getPersonalisationValueAsync = async (
   return { value: propertyValue, section };
 };
 
+// The userPrompt AI content generation only populates these content-bearing sections
+// (see GenerateAiDesignMakerContentService / GenerateWebsiteContentService - About,
+// Information, Profile, Media). Sections like email/website/phone are never generated, so
+// blocks whose role points at an ungenerated section fall back to this pool.
+const PERSONALISATION_FALLBACK_ROLES: PersonalisationRole[] = [
+  'profile',
+  'about',
+  'information',
+  'media',
+];
+
+// "Effectively empty" = no renderable content (ungenerated userPrompt sections like
+// email/website/phone). A section that has data but lacks one property is NOT empty - it
+// intentionally keeps its original content.
+const isSectionEffectivelyEmpty = (
+  section: UserPersonalisationSectionWithIndices | undefined,
+): boolean => {
+  if (!section) {
+    return true;
+  }
+
+  return (
+    !section.title &&
+    !section.name &&
+    !section.url &&
+    !section.description &&
+    !section.descriptionShort &&
+    !section.ctaTitle &&
+    !section.imageUrls?.length &&
+    !section.shapes?.length &&
+    !section.items?.length &&
+    !section.mainShapesCollection?.tall?.length &&
+    !section.mainShapesCollection?.square?.length &&
+    !section.mainShapesCollection?.wide?.length
+  );
+};
+
+// Resolve a property from a specific role's section. Returns null when that section is
+// ungenerated (effectively empty) or cannot supply the property, so the caller can try the
+// next role.
+const resolvePersonalisationValueForRoleAsync = async (
+  role: PersonalisationRole,
+  property: keyof UserPersonalisationSection | keyof UserPersonalisationItem,
+  personalisation: UserPersonalisationWithIndices,
+): Promise<{
+  value: any;
+  personalisation: UserPersonalisationWithIndices;
+  valuesToUpdate?: Record<string, any>;
+} | null> => {
+  const key = `${role}Section` as keyof UserPersonalisationWithIndices;
+  const section = personalisation[key] as
+    | UserPersonalisationSectionWithIndices
+    | undefined;
+
+  if (isSectionEffectivelyEmpty(section)) {
+    return null;
+  }
+
+  const {
+    value,
+    section: updatedSection,
+    valuesToUpdate,
+  } = await getPersonalisationValueAsync(
+    section as UserPersonalisationSectionWithIndices,
+    property,
+  );
+
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  return {
+    value,
+    personalisation: { ...personalisation, [key]: updatedSection },
+    valuesToUpdate,
+  };
+};
+
 const getPersonalisationValueFromPropertyAsync = async (
   propertyKey: string,
   propertyValue: any,
@@ -342,16 +420,6 @@ const getPersonalisationValueFromPropertyAsync = async (
     return { value: undefined, personalisation };
   }
 
-  const matchingValue = Object.entries(personalisation).find(
-    ([key]) => key === `${personalisationRole}Section`,
-  );
-
-  if (!matchingValue) {
-    return { value: undefined, personalisation };
-  }
-
-  const section = matchingValue[1] as UserPersonalisationSectionWithIndices;
-
   const mapping = getPersonalisationMappingForContentType(contentType);
 
   const matchingProperty = Object.entries(mapping).find(([, value]) =>
@@ -372,20 +440,48 @@ const getPersonalisationValueFromPropertyAsync = async (
       typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
   });
 
-  const {
-    value,
-    section: updatedSection,
-    valuesToUpdate,
-  } = await getPersonalisationValueAsync(section, property);
+  const primaryKey =
+    `${personalisationRole}Section` as keyof UserPersonalisationWithIndices;
+  const primarySection = personalisation[primaryKey] as
+    | UserPersonalisationSectionWithIndices
+    | undefined;
+
+  // When the block's own section has content, use it as-is - this preserves existing
+  // behaviour, including legitimately keeping the original when that section lacks a
+  // specific property (e.g. no items, or an invalid shape).
+  if (!isSectionEffectivelyEmpty(primarySection)) {
+    const {
+      value,
+      section: updatedSection,
+      valuesToUpdate,
+    } = await getPersonalisationValueAsync(
+      primarySection as UserPersonalisationSectionWithIndices,
+      property,
+    );
 
-  return {
-    value,
-    personalisation: {
-      ...personalisation,
-      [`${personalisationRole}Section`]: updatedSection,
-    },
-    valuesToUpdate,
-  };
+    return {
+      value,
+      personalisation: { ...personalisation, [primaryKey]: updatedSection },
+      valuesToUpdate,
+    };
+  }
+
+  // The block's section was never generated - fall back to the first populated section that
+  // can supply this property, so it doesn't render the "should be AI generated" placeholder.
+  // Never reached when the section exists (above) or all are populated (AI Website Builder).
+  for (const role of PERSONALISATION_FALLBACK_ROLES) {
+    const resolved = await resolvePersonalisationValueForRoleAsync(
+      role,
+      property,
+      personalisation,
+    );
+
+    if (resolved) {
+      return resolved;
+    }
+  }
+
+  return { value: undefined, personalisation };
 };
 
 type ContentProperty = Record<string, string | any>;

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

@@ -1,5 +1,4 @@
 import type {
-  PageStyles,
   ButtonWithModalContent,
   ProfileContent,
   TextContent,
@@ -32,11 +31,9 @@ import type {
   TextShapeItem,
   TextStyleDeclaration,
   AspectRatio,
-  LogoVariation,
   LogoImageModel,
   LogoTemplateImageModel,
   CookieOptions,
-  SensitiveContent,
   BookingSectionContent,
   MediaTypes,
   TextStyles,
@@ -84,8 +81,7 @@ export interface PageViewModel {
 }
 
 export interface ButtonViewModel
-  extends ContentViewModel,
-    Omit<ButtonWithModalContent, 'type'> {
+  extends ContentViewModel, Omit<ButtonWithModalContent, 'type'> {
   styles: Omit<ButtonStyles, 'templates'>;
   onClicked: (vm: ButtonViewModel) => void;
   buttonLinkType: ButtonLinkType;
@@ -95,7 +91,8 @@ export interface ButtonViewModel
 export type ImageViewModel = ContentViewModel & Omit<ImageContent, 'type'>;
 
 export interface ImageGalleryViewModel
-  extends ContentViewModel,
+  extends
+    ContentViewModel,
     Omit<ImageGalleryContent, 'type' | 'galleryStyles'> {
   styles: GalleryStyles;
 }
@@ -114,14 +111,12 @@ export interface LogoViewModel extends ContentViewModel {
 }
 
 export interface ProfileViewModel
-  extends ContentViewModel,
-    Omit<ProfileContent, 'type'> {
+  extends ContentViewModel, Omit<ProfileContent, 'type'> {
   containerStyle?: BrandPageCssStyle;
 }
 
 export interface ShapesSectionViewModel
-  extends ContentViewModel,
-    Omit<ShapesSectionContent, 'type' | 'items'> {
+  extends ContentViewModel, Omit<ShapesSectionContent, 'type' | 'items'> {
   items: TextShapeItem[];
   isFullWidth: boolean;
 }
@@ -140,41 +135,35 @@ export type VideoViewModel = ContentViewModel &
 export type MapViewModel = ContentViewModel & Omit<MapContent, 'type'>;
 
 export interface MailingListViewModel
-  extends ContentViewModel,
-    Omit<MailingListContent, 'type'> {
+  extends ContentViewModel, Omit<MailingListContent, 'type'> {
   styles: Omit<ButtonStyles, 'templates'>;
 }
 
 export interface SupportMeViewModel
-  extends ContentViewModel,
-    Omit<SupportMeContent, 'type'> {
+  extends ContentViewModel, Omit<SupportMeContent, 'type'> {
   buttonStyles: ButtonStyles;
 }
 
 export interface RequestPaymentViewModel
-  extends ContentViewModel,
-    Omit<RequestPaymentContent, 'type'> {
+  extends ContentViewModel, Omit<RequestPaymentContent, 'type'> {
   buttonStyles: ButtonStyles;
 }
 
 export interface ShopViewModel
-  extends ContentViewModel,
-    Omit<ShopContent, 'type'> {
+  extends ContentViewModel, Omit<ShopContent, 'type'> {
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
   isShippingEnabled: boolean;
 }
 
 export interface ContactFormViewModel
-  extends ContentViewModel,
-    Omit<ContactFormContent, 'type'> {
+  extends ContentViewModel, Omit<ContactFormContent, 'type'> {
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
 }
 
 export interface BannerSectionViewModel
-  extends ContentViewModel,
-    Omit<BannerSectionContent, 'type'> {
+  extends ContentViewModel, Omit<BannerSectionContent, 'type'> {
   buttonViewModel: ButtonViewModel;
   isFullWidth: boolean;
   isBigImageType: boolean;
@@ -225,64 +214,57 @@ export interface TextImageSectionViewModel {
 }
 
 export interface TestimonialSectionViewModel
-  extends ContentViewModel,
-    Omit<TestimonialSectionContent, 'type'> {
+  extends ContentViewModel, Omit<TestimonialSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface AboutSectionViewModel
-  extends ContentViewModel,
-    Omit<AboutSectionContent, 'type'> {
+  extends ContentViewModel, Omit<AboutSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface SocialLinksViewModel
-  extends ContentViewModel,
-    Omit<SocialLinksContent, 'type'> {
+  extends ContentViewModel, Omit<SocialLinksContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface DividerSectionViewModel
-  extends ContentViewModel,
-    Omit<DividerSectionContent, 'type'> {
+  extends ContentViewModel, Omit<DividerSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface BookingSectionViewModel
-  extends ContentViewModel,
-    Omit<BookingSectionContent, 'type'> {
+  extends ContentViewModel, Omit<BookingSectionContent, 'type'> {
   buttonViewModel: ButtonViewModel;
   isFullWidth: boolean;
 }
 
-export interface PageHeaderViewModel
-  extends Omit<
-    PageHeaderDesktop | PageHeaderMobile,
-    | 'logoImage'
-    | 'logoImageStyle'
-    | 'isLogoOptional'
-    | 'viewport'
-    | 'isLogoVisible'
-    | 'logoTemplateImage'
-    | 'logoImageHeight'
-    | 'logoImageWidth'
-  > {
+export interface PageHeaderViewModel extends Omit<
+  PageHeaderDesktop | PageHeaderMobile,
+  | 'logoImage'
+  | 'logoImageStyle'
+  | 'isLogoOptional'
+  | 'viewport'
+  | 'isLogoVisible'
+  | 'logoTemplateImage'
+  | 'logoImageHeight'
+  | 'logoImageWidth'
+> {
   logo: LogoViewModel;
   pages: PageViewModel[];
 }
 
-export interface PageFooterViewModel
-  extends Omit<
-    PageFooterDesktop | PageFooterMobile,
-    | 'logoImage'
-    | 'logoImageStyle'
-    | 'isLogoOptional'
-    | 'viewport'
-    | 'isLogoVisible'
-    | 'logoTemplateImage'
-    | 'logoImageHeight'
-    | 'logoImageWidth'
-  > {
+export interface PageFooterViewModel extends Omit<
+  PageFooterDesktop | PageFooterMobile,
+  | 'logoImage'
+  | 'logoImageStyle'
+  | 'isLogoOptional'
+  | 'viewport'
+  | 'isLogoVisible'
+  | 'logoTemplateImage'
+  | 'logoImageHeight'
+  | 'logoImageWidth'
+> {
   logo: LogoViewModel;
 }
 

package/src/brand-page-maker/assessors/banner-section-description-visibility.assessor.ts

@@ -48,11 +48,11 @@ export const bannerOverlayOptionsVisibilityAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     (content.media?.type === 'getty-video' || content.imageUrl) &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_CARD_LEFT_IMAGE,
-        BIG_IMAGE,
-        ALIGN_LEFT_BIG_IMAGE,
-      ].includes(content.displayStyle),
+    [
+      ALIGN_CARD_CENTER_IMAGE,
+      ALIGN_CARD_LEFT_IMAGE,
+      BIG_IMAGE,
+      ALIGN_LEFT_BIG_IMAGE,
+    ].includes(content.displayStyle),
   );
 };

package/src/brand-page-maker/assessors/color-replacement-icon-visibility.assessor.ts

@@ -6,7 +6,7 @@ export const colorReplacementIconVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-      content?.iconUrl &&
-      content?.mediaType === 'shape',
+    content?.iconUrl &&
+    content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/color-replacement-profile-visibility.assessor.ts

@@ -6,7 +6,7 @@ export const colorReplacementProfileVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-      content?.avatarImageUrl &&
-      content?.mediaType === 'shape',
+    content?.avatarImageUrl &&
+    content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/color-replacement-visibility.assessor.ts

@@ -10,7 +10,7 @@ export const colorReplacementVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-      content?.imageUrl &&
-      content?.mediaType === 'shape',
+    content?.imageUrl &&
+    content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/contact-form-visibility.assessor.ts

@@ -15,12 +15,12 @@ export const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-        [
-          ALIGN_CARD_CENTER_IMAGE,
-          ALIGN_CARD_CENTER,
-          ALIGN_LEFT_FULL_IMAGE,
-          ALIGN_RIGHT_FULL_IMAGE,
-        ].includes(content?.layoutStyle),
+      [
+        ALIGN_CARD_CENTER_IMAGE,
+        ALIGN_CARD_CENTER,
+        ALIGN_LEFT_FULL_IMAGE,
+        ALIGN_RIGHT_FULL_IMAGE,
+      ].includes(content?.layoutStyle),
     ) && context!.isBrandSite
   );
 };
@@ -37,11 +37,11 @@ export const imageUrlVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-        [
-          ALIGN_CARD_CENTER_IMAGE,
-          ALIGN_LEFT_FULL_IMAGE,
-          ALIGN_RIGHT_FULL_IMAGE,
-        ].includes(content?.layoutStyle),
+      [
+        ALIGN_CARD_CENTER_IMAGE,
+        ALIGN_LEFT_FULL_IMAGE,
+        ALIGN_RIGHT_FULL_IMAGE,
+      ].includes(content?.layoutStyle),
     ) && context!.isBrandSite
   );
 };
@@ -52,9 +52,9 @@ export const contactBackgroundDisplayTypeVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-        [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
-          content?.layoutStyle,
-        ),
+      [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
+        content?.layoutStyle,
+      ),
     ) && context!.isBrandSite
   );
 };

package/src/brand-page-maker/components/action-bar/ActionBar.mixin.ts

@@ -8,6 +8,7 @@ import { UPGRADE_CTA_LOCATIONS } from './../../composables/useEventTracker';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 
 export default defineComponent({
+  emits: ['create-team-cards'],
   setup() {
     const userStore = useBrandPageMakerUserStore();
     const brandPageMakerStore = useBrandPageMakerStore();

package/src/brand-page-maker/components/ai-text-edit/AiActionButtons.vue

@@ -9,13 +9,18 @@
         icon-left="stop"
         @click="$emit('stop-generation')"
       />
-      <Button
-        v-else-if="showUseButton"
-        :label="useButtonLabel"
-        variant="primary"
-        size="small"
-        @click="$emit('use-content')"
-      />
+      <template v-else>
+        <Button
+          v-for="action in actions"
+          :key="action.type"
+          :label="action.label"
+          variant="primary"
+          size="small"
+          :icon-left="action.icon || undefined"
+          classes="ai-cta-button"
+          @click="$emit('action-click', action.type)"
+        />
+      </template>
       <Button
         v-if="showRegenerateButton && !isTyping"
         label="Regenerate"
@@ -31,24 +36,34 @@
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
 import { generateAiModalTr } from '../../../composables/useTranslate';
+import type { AgentAction } from '../../composables/ai-chat/types';
 
 interface Props {
   isTyping?: boolean;
-  showUseButton?: boolean;
   showRegenerateButton?: boolean;
-  useButtonLabel?: string;
+  actions?: AgentAction[];
 }
 
 withDefaults(defineProps<Props>(), {
   isTyping: false,
-  showUseButton: false,
   showRegenerateButton: false,
-  useButtonLabel: 'Use text',
+  actions: () => [],
 });
 
 defineEmits<{
-  'use-content': [];
   'stop-generation': [];
   regenerate: [];
+  'action-click': [type: AgentAction['type']];
 }>();
 </script>
+
+<style scoped>
+/* The upgrade glyph (`upgrade-alt`) is a hairline faceted gem that barely reads
+   at button size. Give it a stroke in the current text colour so the icon is
+   distinguishable from afar. Scoped to the CTA button via the `ai-cta-button`
+   class passed to the design-system Button. */
+:deep(.ai-cta-button svg path) {
+  stroke: currentColor;
+  stroke-width: 1;
+}
+</style>

package/src/brand-page-maker/components/ai-text-edit/AiChatbox.vue

@@ -8,9 +8,9 @@
           :key="index"
           v-bind="message.props"
           :is-design-com="isDesignCom"
-          @use-text="$emit('use-text', message.props.text)"
           @stop-generation="$emit('stop-generation')"
           @use-image="$emit('use-image', $event)"
+          @action-click="$emit('action-click', $event)"
         >
           <template v-if="message.content" #default>
             {{ message.content }}
@@ -49,6 +49,7 @@ import { ref, watch, nextTick, onMounted } from 'vue';
 import { Button } from '@designcrowd/fe-shared-lib';
 import TextBubble from './TextBubble.vue';
 import ImageBubble from './ImageBubble.vue';
+import type { AgentAction } from '../../composables/ai-chat/types';
 
 interface Message {
   type: 'text' | 'image';
@@ -82,10 +83,10 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   'update:modelValue': [value: string];
   send: [text: string];
-  'use-text': [text: string];
   'stop-generation': [];
   'use-image': [images: any[]];
   'prompt-click': [prompt: SuggestedPrompt];
+  'action-click': [type: AgentAction['type']];
 }>();
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null);

package/src/brand-page-maker/components/ai-text-edit/TextBubble.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="tw-mb-4" :class="containerClass">
     <div class="tw-flex" :class="containerClass">
@@ -30,12 +31,11 @@
           <AiActionButtons
             v-if="showActions || isTyping"
             :is-typing="isTyping || isAnimating"
-            :show-use-button="showUseButton"
             :show-regenerate-button="showRegenerateButton"
-            use-button-label="Use text"
-            @use-content="$emit('use-text')"
+            :actions="actions"
             @stop-generation="$emit('stop-generation')"
             @regenerate="$emit('regenerate')"
+            @action-click="$emit('action-click', $event)"
           >
             <slot name="actions" />
           </AiActionButtons>
@@ -59,13 +59,13 @@ import AiActionButtons from './AiActionButtons.vue';
 import AiProgressFeed from './AiProgressFeed.vue';
 import { generateAiModalTr } from '../../../composables/useTranslate';
 import { type PlanItem } from '../../../clients/websocket-gateway-client';
+import type { AgentAction } from '../../composables/ai-chat/types';
 
 interface Props {
   text?: string;
   isUser?: boolean;
   isAi?: boolean;
   isTyping?: boolean;
-  showUseButton?: boolean;
   showRegenerateButton?: boolean;
   showIcon?: boolean;
   isResponse?: boolean; // New prop to indicate if it's a response (not initial message)
@@ -75,6 +75,7 @@ interface Props {
   initialMessage?: string;
   planItems?: PlanItem[];
   completedItemIds?: string[];
+  actions?: AgentAction[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -82,7 +83,6 @@ const props = withDefaults(defineProps<Props>(), {
   isUser: false,
   isAi: false,
   isTyping: false,
-  showUseButton: false,
   showRegenerateButton: false,
   showIcon: true,
   isResponse: false,
@@ -92,12 +92,13 @@ const props = withDefaults(defineProps<Props>(), {
   initialMessage: undefined,
   planItems: () => [],
   completedItemIds: () => [],
+  actions: () => [],
 });
 
 defineEmits<{
-  'use-text': [];
   'stop-generation': [];
   regenerate: [];
+  'action-click': [type: AgentAction['type']];
 }>();
 
 const copiedFeedback = ref(false);
@@ -220,7 +221,7 @@ const showActions = computed(() => {
     props.isAi &&
     !props.isTyping &&
     !isAnimating.value &&
-    props.showUseButton
+    (props.actions?.length ?? 0) > 0
   );
 });
 </script>