@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/src/brand-page/components/shop/PaymentModal.vue

@@ -115,8 +115,7 @@
 <script setup lang="ts">
 import { Modal, Button, Loader } from '@designcrowd/fe-shared-lib';
 import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
-import { computed, reactive, ref, onMounted } from 'vue';
-import IconStripe from '../icon/IconStripe.vue';
+import { computed, reactive, onMounted } from 'vue';
 import RequestPaymentStripe from '../payment/RequestPaymentStripe.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import brandPageClient from '../../clients/brand-page.client';
@@ -128,7 +127,6 @@ import type {
   BrandPagePaymentConfig,
   TextStyleDeclaration,
   StripePaymentIntent,
-  StripeShippingDetails,
 } from '@brand-page/models';
 import { paymentProviders } from '@brand-page/constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
@@ -173,8 +171,6 @@ const data = reactive({
   state: 'creating-cart' as State,
 });
 
-const customerEmail = ref('');
-
 const emit = defineEmits(['on-close', 'on-back']);
 
 const onClose = () => {

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -293,7 +293,7 @@ const onClose = () => {
   emit('on-close');
 };
 
-const showFullDesc = () => {
+const _showFullDesc = () => {
   data.isShowFullDescription = true;
 };
 

package/src/brand-page/components/shop/Shop.vue

@@ -2,12 +2,12 @@
   <section>
     <div
       v-if="shouldShowContainer"
-      class="tw-relative outer-container tw-py-4"
+      class="tw-relative outer-container"
       :class="{
         'tw-my-8': context.isBrandSite,
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="backgroundStyle"
+      :style="[backgroundStyle, contentPaddingStyle]"
     >
       <div class="tw-p-4 inner-container">
         <div class="tw-flex tw-flex-col tw-gap-2">
@@ -125,7 +125,7 @@ import ThumbnailDisplay from './ThumbnailDisplay.vue';
 import FeaturedDisplay from './FeaturedDisplay.vue';
 import ProductDetailModal from './ProductDetailModal.vue';
 import CartModal from './CartModal.vue';
-import { computed, onMounted, reactive, type PropType } from 'vue';
+import { computed, onMounted, reactive } from 'vue';
 import {
   PAYMENT_OPTION_DISPLAY_TYPES,
   PAYMENT_OPTION_IMAGE_TYPES,
@@ -140,6 +140,7 @@ import brandPageClient from '../../clients/brand-page.client';
 import raygunUtil from '@brand-page/utils/raygun.util';
 import { shopTr } from '@src/composables/useTranslate';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 
 const props = withDefaults(
   defineProps<{
@@ -260,6 +261,10 @@ const itemStyle = computed((): BrandPageCssStyle => {
   };
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const backgroundStyle = computed((): any => {
   return props.viewModel.backgroundStyle;
 });

package/src/brand-page/components/shop/TextDisplay.vue

@@ -39,7 +39,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-const props = defineProps({
+defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/shop/ThumbnailDisplay.vue

@@ -45,7 +45,7 @@
   </ul>
 </template>
 <script setup lang="ts">
-import type { BrandPageContext, ShopContent } from '@brand-page/models';
+import type { BrandPageContext } from '@brand-page/models';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
@@ -56,7 +56,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-const props = defineProps({
+defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/social-links/SocialLinks.vue

@@ -1,11 +1,10 @@
 <template>
   <div data-component="social-links">
     <div
-      class="tw-pb-8"
       :class="{
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="containerStyles"
+      :style="[containerStyles, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <TextWrapper
@@ -14,7 +13,7 @@
         :text="title"
         element="h1"
         :class="textAlignClass"
-        class="tw-py-8"
+        class="tw-pb-8"
       />
       <SocialLinksItems
         :id="id"
@@ -34,6 +33,7 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { SocialLinksViewModel } from 'src/brand-page/view-models';
 import { SOCIAL_LINKS_ICON_DISPLAY_STYLES } from '@brand-page/models';
 import type { BrandPageContext, LinksItem } from '@brand-page/models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 const props = withDefaults(
@@ -51,6 +51,10 @@ const containerStyles = computed((): BrandPageCssStyle => {
   return props.viewModel.backgroundStyles || {};
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const iconStyle = computed((): BrandPageCssStyle => {
   return props.viewModel.iconFillStyles || {};
 });

package/src/brand-page/components/testimonial-section/TestimonialSection.vue

@@ -3,7 +3,7 @@
     data-component="testimonial-section"
     class="c_testimonial-image"
     style="container-type: inline-size"
-    :style="viewModel.backgroundStyle"
+    :style="[viewModel.backgroundStyle, contentPaddingStyle]"
   >
     <div
       :class="{
@@ -201,16 +201,127 @@
     </div>
   </section>
 </template>
-<script>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import { Carousel, Icon } from '@designcrowd/fe-shared-lib';
-import TestimonialSectionMixin from './TestimonialSection.mixin.ts';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import type { TestimonialSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
+import debounce from 'lodash.debounce';
+import { DEVICE_CSS_TRANSITION_DELAY } from '@brand-page-maker/constants';
 
-export default {
-  components: { Carousel, Media, Icon, TextWrapper },
-  mixins: [TestimonialSectionMixin],
+const DEBOUNCE_WAIT_MS = 100;
+
+const props = withDefaults(
+  defineProps<{
+    viewModel: TestimonialSectionViewModel;
+    context: BrandPageContext;
+    isPreview?: boolean;
+    isMobileDevice?: boolean;
+    contentIndex?: number;
+  }>(),
+  {
+    isPreview: false,
+    isMobileDevice: undefined,
+    contentIndex: undefined,
+  },
+);
+
+const carouselRef = ref<any>();
+
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
+const textAlignClass = computed(() => ({
+  'c_testimonial-big-image-text-item':
+    props.viewModel.displayStyle === 'big-image',
+  'tw-mb-2': props.viewModel.displayStyle !== 'big-image',
+}));
+
+const navigationUniqueIndexer = computed(
+  () => `testimonial-${props.viewModel.id}`,
+);
+
+const swiperOptions = computed(() => ({
+  autoHeight: true,
+  navigation: {
+    prevEl: `.carousel__button-prev--${navigationUniqueIndexer.value}`,
+    nextEl: `.carousel__button-next--${navigationUniqueIndexer.value}`,
+  },
+  pagination: {
+    el: `.pagination--${navigationUniqueIndexer.value}`,
+    clickable: true,
+  },
+}));
+
+const renderText = (val: string): string => (val ? getRenderText(val) : '');
+
+const forceCarouselUpdate = (): boolean => {
+  const shouldUpdateCarousel = Boolean(
+    props.isPreview &&
+    (props.viewModel.items.length > 1 ||
+      props.viewModel.displayStyle === 'big-image') &&
+    carouselRef.value,
+  );
+
+  if (shouldUpdateCarousel) {
+    carouselRef.value.update();
+
+    return true;
+  }
+
+  return false;
+};
+
+const forceCarouselUpdateSlideWidth = (): void => {
+  if (forceCarouselUpdate()) {
+    try {
+      const width = carouselRef.value.swiper.slidesEl.scrollWidth;
+
+      carouselRef.value.swiper.slidesEl.children.forEach(
+        (slide: HTMLElement) => {
+          const slideWidth = parseFloat(slide.style.width);
+
+          if (slideWidth !== width) {
+            slide.style.width = width + 'px';
+          }
+        },
+      );
+    } catch (error) {
+      console.warn('Testimonial: Unable to auto update slide width');
+    }
+  }
 };
+
+const debouncedForceCarouselUpdate = debounce(() => {
+  forceCarouselUpdate();
+}, DEBOUNCE_WAIT_MS);
+
+watch(
+  () => props.viewModel,
+  () => {
+    debouncedForceCarouselUpdate();
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.isMobileDevice,
+  (next, old) => {
+    if (next !== old) {
+      setTimeout(
+        forceCarouselUpdateSlideWidth,
+        DEVICE_CSS_TRANSITION_DELAY + 1,
+      );
+    }
+  },
+);
 </script>
 
 <style scoped>
@@ -221,17 +332,15 @@ export default {
   --line-height: 1.5;
   --name-spacing: 0.75rem;
   --title-spacing: 1rem;
-  @apply tw-relative tw-p-24 tw-box-border tw-max-w-full;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  @apply tw-relative tw-box-border tw-max-w-full;
+  /* Top/bottom padding is config-bound via the Padding Control sliders (BP-5703),
+     applied as an inline style on the root. Horizontal padding stays responsive. */
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
 
 @media (min-width: 767px) {
   .c_testimonial-image {
-    padding-top: 5rem;
-    padding-bottom: 5rem;
     padding-left: 4rem;
     padding-right: 4rem;
   }

package/src/brand-page/components/text/Text.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="!context.isBrandSite"
-      :style="containerStyle"
+      :style="[containerStyle, contentPaddingStyle]"
       :class="{
         [containerClasses]: true,
       }"
@@ -15,9 +15,9 @@
         data-test-tag="text-content-text"
       />
     </div>
-    <div v-else :style="containerStyle">
+    <div v-else :style="[containerStyle, contentPaddingStyle]">
       <div
-        class="c-text-container tw-py-3 tw-px-6 grid-container tw-gap-4"
+        class="c-text-container tw-px-6 grid-container tw-gap-4"
         :class="{
           [containerClasses]: true,
           [gridClass]: context.isBrandSite,
@@ -41,7 +41,10 @@
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { computed } from 'vue';
 import type { TextViewModel } from '@brand-page/view-models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 
 interface Props {
@@ -51,6 +54,10 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const containerStyle = computed<any>(() => {
   const containerStyles = {} as BrandPageCssStyle;
 
@@ -83,7 +90,7 @@ const containerClasses = computed(() => {
     return '';
   }
 
-  return 'tw-py-3 tw-px-6';
+  return 'tw-px-6';
 });
 
 const renderText = computed(() => {

package/src/brand-page/components/text-media-section/TextMediaSection.vue

@@ -1,12 +1,12 @@
 <template>
   <section data-component="text-media-section">
     <div
-      class="tw-relative tw-w-full tw-box-border tw-py-8"
+      class="tw-relative tw-w-full tw-box-border"
       :class="{
         'tw-pl-0 tw-pr-0': hasNoPadding || !hasBrandSitePadding,
         'tw-rounded-md': hasRoundedCorners,
       }"
-      :style="viewModel.backgroundStyle"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
     >
       <div
         :class="[
@@ -148,7 +148,11 @@ import {
   MEDIA_ONLY,
 } from '../../constants';
 import { isHexTransparent } from '@brand-page/utils/color.util';
-import { escapeContentText, getRenderText } from '@brand-page/utils';
+import {
+  escapeContentText,
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 
 const props = defineProps({
   viewModel: {
@@ -171,6 +175,10 @@ const props = defineProps({
   },
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const items = computed(() => props.viewModel.items);
 
 const shouldDisplayText = computed(

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div v-if="sanitizeText" class="tw-w-full" :style="data.wrapperStyle">
     <div
@@ -39,6 +40,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   element: 'p',
   textStyle: {} as any,
+  slug: undefined,
 });
 
 const data = reactive<{
@@ -60,7 +62,7 @@ const textStyles = computed(() => {
 });
 
 const style = computed<any>(() => {
-  const { backgroundColor, ...textStyle } = props.textStyle;
+  const { backgroundColor: _backgroundColor, ...textStyle } = props.textStyle;
 
   return textStyle;
 });

package/src/brand-page/components/video/Video.mixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { VideoViewModel } from '@brand-page/view-models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import {
   DISPLAY_STYLE_PREVIEW,
@@ -22,6 +23,10 @@ export default defineComponent({
     title: 'Video',
   }),
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     arrowStyle(): BrandPageCssStyle {
       return {
         color: this.viewModel.buttonStyles.style?.color,

package/src/brand-page/components/video/Video.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-video">
+  <div class="c-video" :style="contentPaddingStyle">
     <div v-if="viewModel.videoUrl">
       <!-- Start -->
       <div

package/src/brand-page/constants/font.constants.ts

@@ -8,10 +8,10 @@ export const DISPlAY_TEXT_BUTTONS = 'Button Texts';
 export const DEFAULT_TEXT_DECORATION = undefined;
 export const DEFAULT_FONT_STYLE = undefined;
 
-export const FONT_SIZE_TITLE = '2.25rem';
-export const FONT_SIZE_HEADINGS = '1.5rem';
-export const FONT_SIZE_BODY = '1rem';
-export const FONT_SIZE_PROFILE_NAME = '1.5rem';
+export const FONT_SIZE_TITLE = '2.25em';
+export const FONT_SIZE_HEADINGS = '1.5em';
+export const FONT_SIZE_BODY = '1em';
+export const FONT_SIZE_PROFILE_NAME = '1.5em';
 
 export const FONT_WEIGHT_PROFILE_NAME = '800';
 export const FONT_WEIGHT_NORMAL = 'normal';

package/src/brand-page/constants/misc.constants.ts

@@ -38,6 +38,64 @@ export const ALIGN_LEFT_FULL_IMAGE = 'left-aligned-full-image';
 export const ALIGN_RIGHT_FULL_IMAGE = 'right-aligned-full-image';
 export const ALTERNATE_IMAGE = 'alternate-image';
 
+/**
+ * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
+ * had hard-coded before the sliders existed. Single source for new-block
+ * defaults (content-settings) and the migration backfill for existing pages.
+ * The image layouts (full-image divided and card-over-image) are 0: the bg
+ * image expands with the section padding (banner-style), so the default starts
+ * flush at the edges; the spacing inside/over the image stays fixed.
+ */
+export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number> = {
+  '': 0, // collapsible (default on Brand Page / Brand Contact)
+  [ALIGN_CENTERED]: 32,
+  [ALIGN_CARD_CENTER]: 32,
+  [ALIGN_CARD_CENTER_IMAGE]: 0,
+  [TEXT_ONLY]: 32,
+  [ALIGN_LEFT_FULL_IMAGE]: 0,
+  [ALIGN_RIGHT_FULL_IMAGE]: 0,
+};
+
+/**
+ * Banner: full-bleed display styles (divided + full-width stacked) render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0 to
+ * match prod — the standard 32 would push the image off the edges. Every other
+ * banner style keeps 32. Used by the banner display-style convertor and the
+ * migration backfill, mirroring contact-form's per-layout map above.
+ */
+export const BANNER_DEFAULT_PADDING = 32;
+export const BANNER_FULL_BLEED_DISPLAY_STYLES = [
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
+];
+export const bannerDisplayStyleDefaultPadding = (
+  displayStyle?: string,
+): number =>
+  displayStyle && BANNER_FULL_BLEED_DISPLAY_STYLES.includes(displayStyle)
+    ? 0
+    : BANNER_DEFAULT_PADDING;
+
+/**
+ * About: a flat 32 for every display style, including the two full-image styles.
+ * The full-image About renders the image inside the padded container, so the
+ * standard 32 band is the intended look. Used by the About display-style
+ * convertor and the migration backfill.
+ */
+export const ABOUT_DEFAULT_PADDING = 32;
+
+/**
+ * Testimonials: a single top/bottom value across both breakpoints, replacing the
+ * old 32px mobile / 80px desktop split. The same value applies to every display
+ * style (centered / big-image / columns) — they share one root, so padding does
+ * not vary by style. Used by the new-block default and the migration backfill.
+ * Default (BP-5703): 48px — the single value chosen for both breakpoints (replaces
+ * the old 32px mobile / 80px desktop split).
+ */
+export const TESTIMONIAL_DEFAULT_PADDING = 48;
+
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

package/src/brand-page/constants/sections/footer-display.constants.ts

@@ -1,6 +1,6 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
-import { tr, commonTr } from '@src/composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
 export const FOOTER_DISPLAY = {
   /** @deprecated */

package/src/brand-page/models/content.model.ts

@@ -51,6 +51,8 @@ export interface Content {
   id: string;
   type: ContentType;
   personalisationRole?: PersonalisationRole;
+  topPadding?: number;
+  bottomPadding?: number;
 
   // Overrides for personalisation
   imageUrlOverride?: string;

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

@@ -929,6 +929,10 @@ export class BrandPageModel {
   // Model version
   v: number;
 
+  // AI personalisation key persisted with the draft so previews survive login/checkout-back/
+  // refresh - content is retrieved by this token (user-agnostic), not regenerated (bp-5742).
+  userPromptContentKey?: string;
+
   styles: PageStyles;
 
   /** @deprecated */

package/src/brand-page/models/payment.model.ts

@@ -44,7 +44,8 @@ export const isStripePaymentIntent = (
   );
 };
 
-export interface CreateCartResult<T> {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export interface CreateCartResult<T = unknown> {
   cartId: string;
   paymentProviderName: string;
   paymentProviderExternalId: string;

package/src/brand-page/models/shop.model.ts

@@ -1,5 +1,3 @@
-import type { PaymentConfig } from './payment.model';
-
 export interface VariantOptionModel {
   id: string;
   name: string;

package/src/brand-page/models/user-personalisation.model.ts

@@ -84,8 +84,7 @@ export type ContentPersonalisationMapping<T extends Content> = {
     | keyof UserPersonalisationSection
     | keyof UserPersonalisationItem]?: (keyof T)[];
 };
-export interface UserPersonalisationSectionWithIndices
-  extends UserPersonalisationSection {
+export interface UserPersonalisationSectionWithIndices extends UserPersonalisationSection {
   imageIndex: number;
   shapeIndex: number;
   itemTitleIndex: number;

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

@@ -292,6 +292,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "contents": [
           {
             "backgroundStyle": {},
+            "bottomPadding": 32,
             "buttonLinkType": "url",
             "buttonPageId": "",
             "buttonText": "Get Started",
@@ -330,6 +331,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
               "textAlign": "center",
               "wordBreak": "normal",
             },
+            "topPadding": 32,
             "type": "banner-section",
             "url": "",
           },
@@ -454,7 +456,8 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 16,
+    "userPromptContentKey": undefined,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }
@@ -751,6 +754,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -774,6 +778,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -897,7 +902,8 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 16,
+    "userPromptContentKey": undefined,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1194,6 +1200,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -1224,6 +1231,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -1347,7 +1355,8 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 16,
+    "userPromptContentKey": undefined,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }