@designcrowd/library.brand-page 5.16.7 → 5.16.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.7",
+  "version": "5.16.8",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/shared/content-settings/components/generate-ai-button/GenerateAiButton.vue

@@ -15,7 +15,6 @@
       :is-visible="generateTextModalVisible"
       :existing-text="props.existingText"
       :is-design-com="props.isDesignCom"
-      :snapshot-base64="snapshotBase64"
       :field-type="props.fieldType"
       @on-close="onCloseGenerateTextModal"
       @on-use-text="handleUseGeneratedText"
@@ -52,10 +51,9 @@ const emit = defineEmits<{
   'capture-snapshot': [];
 }>();
 
-const snapshotStore = useSnapshotStore();
 const brandPageContainerStore = useBrandPageContainerStore();
+const snapshotStore = useSnapshotStore();
 
-const snapshotBase64 = computed(() => snapshotStore.snapshotBase64);
 const abTests = computed(() => brandPageContainerStore.abTests);
 
 const showButton = computed(() => {
@@ -69,19 +67,14 @@ const showButton = computed(() => {
 const generateTextModalVisible = ref(false);
 const generateText = commonTr('generateText');
 
-const onShowGenerateModal = async () => {
-  emit('capture-snapshot');
-
-  const maxWaitTime = 5000; // 5 seconds max
-  const pollInterval = 50; // Check every 50ms
-  let elapsedTime = 0;
-
-  while (!snapshotBase64.value && elapsedTime < maxWaitTime) {
-    await new Promise((resolve) => setTimeout(resolve, pollInterval));
-    elapsedTime += pollInterval;
-  }
+const onShowGenerateModal = () => {
+  snapshotStore.clearSnapshot();
 
   generateTextModalVisible.value = true;
+
+  setTimeout(() => {
+    emit('capture-snapshot');
+  }, 50);
 };
 
 const onCloseGenerateTextModal = () => {

package/src/shared/content-settings/components/generate-ai-modal/GenerateAiModal.vue

@@ -162,11 +162,11 @@ import {
   commonTr,
 } from '../../../../composables/useTranslate';
 import { getInstance as getDesignTemplateClient } from '../../../../clients/design-template-client';
+import { useSnapshotStore } from '../../../../brand-page-maker/stores';
 
 interface Props {
   isVisible: boolean;
   existingText?: string;
-  snapshotBase64?: string | null;
   isDesignCom?: boolean;
   fieldType?: string;
 }
@@ -174,7 +174,6 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   isVisible: true,
   existingText: '',
-  snapshotBase64: null,
   fieldType: 'text',
 });
 
@@ -193,6 +192,9 @@ const data = reactive({
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const MAX_PROMPT_LENGTH = 500;
 
+const snapshotStore = useSnapshotStore();
+const snapshotBase64 = computed(() => snapshotStore.snapshotBase64);
+
 // Auto-resize textarea
 const resizeTextarea = () => {
   if (textareaRef.value) {
@@ -354,11 +356,21 @@ const onSendPrompt = async (customPrompt?: string) => {
   clearTypingInterval();
 
   try {
+    const maxWaitTime = 5000;
+    const pollInterval = 50;
+    let elapsedTime = 0;
+
+    // Wait for snapshot to be captured (triggered by button component)
+    while (!snapshotBase64.value && elapsedTime < maxWaitTime) {
+      await new Promise((resolve) => setTimeout(resolve, pollInterval));
+      elapsedTime += pollInterval;
+    }
+
     const client = getDesignTemplateClient();
     const result = await client.generateText(
       promptToSend,
       props.existingText ?? '',
-      props.snapshotBase64 || undefined,
+      snapshotBase64.value || undefined,
     );
 
     // Check if generation was stopped before setting response
@@ -415,7 +427,7 @@ watch(
       data.isTyping = false;
     }
   },
-  { flush: 'sync' }, // Execute synchronously to prevent race conditions
+  { flush: 'sync' },
 );
 
 onUnmounted(clearTypingInterval);