@designcrowd/library.brand-page 5.16.3 → 5.16.4-abtest-1

package/src/composables/useSnapshot.ts

@@ -0,0 +1,97 @@
+import { ref } from 'vue';
+
+const HTML2CANVAS_CDN_URL =
+  'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
+
+let html2canvasLoadPromise: Promise<void> | null = null;
+
+/**
+ * Dynamically loads html2canvas from CDN if not already loaded
+ */
+function loadHtml2Canvas(): Promise<void> {
+  // If already loaded, return immediately
+  if (typeof window.html2canvas !== 'undefined') {
+    return Promise.resolve();
+  }
+
+  // If already loading, return the existing promise
+  if (html2canvasLoadPromise) {
+    return html2canvasLoadPromise;
+  }
+
+  // Create new load promise
+  html2canvasLoadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+
+    script.src = HTML2CANVAS_CDN_URL;
+    script.async = true;
+
+    script.onload = () => {
+      console.log('✅ html2canvas loaded successfully from CDN');
+      resolve();
+    };
+
+    script.onerror = () => {
+      console.error('❌ Failed to load html2canvas from CDN');
+      html2canvasLoadPromise = null; // Reset so we can retry
+      reject(new Error('Failed to load html2canvas'));
+    };
+
+    document.head.appendChild(script);
+  });
+
+  return html2canvasLoadPromise;
+}
+
+export function useSnapshot() {
+  const isCapturing = ref(false);
+  const lastSnapshot = ref<string | null>(null);
+
+  const captureSnapshot = async (
+    element: HTMLElement | null,
+  ): Promise<string | null> => {
+    if (!element) {
+      console.error('No element provided for snapshot');
+
+      return null;
+    }
+
+    isCapturing.value = true;
+
+    try {
+      // Dynamically load html2canvas if not already loaded
+      await loadHtml2Canvas();
+
+      // Double-check it's loaded
+      if (typeof window.html2canvas === 'undefined') {
+        throw new Error('html2canvas failed to load');
+      }
+
+      const canvas = await window.html2canvas(element, {
+        allowTaint: true,
+        useCORS: true,
+        scale: 0.5, // Reduce quality to decrease file size
+        logging: false,
+        backgroundColor: '#ffffff',
+      });
+
+      const base64Image = canvas.toDataURL('image/jpeg', 0.8); // Use JPEG with 80% quality for smaller size
+
+      lastSnapshot.value = base64Image;
+
+      return base64Image;
+    } catch (error) {
+      console.error('Error capturing snapshot:', error);
+
+      return null;
+    } finally {
+      isCapturing.value = false;
+    }
+  };
+
+  return {
+    captureSnapshot,
+    isCapturing,
+    lastSnapshot,
+  };
+}

package/src/composables/useTranslate.ts

@@ -206,6 +206,8 @@ const logoSwitchConfirmationModalTr = (key, valuesToInterpolate = {}) =>
   tr(`logoSwitchConfirmationModal.${key}`, valuesToInterpolate);
 const logoTemplateSearchModalTr = (key, valuesToInterpolate = {}) =>
   tr(`logoTemplateSearchModal.${key}`, valuesToInterpolate);
+const generateAiModalTr = (key, valuesToInterpolate = {}) =>
+  tr(`aiModal.${key}`, valuesToInterpolate);
 
 const currentLocale = (): LocaleTypes => {
   const i18 = getI18NextInstance();
@@ -303,4 +305,5 @@ export {
   videoLibraryTr,
   logoSwitchConfirmationModalTr,
   logoTemplateSearchModalTr,
+  generateAiModalTr,
 };

package/src/shared/common/i18n/common.de-DE.json

@@ -37,6 +37,9 @@
     "replace" : "Ersetzen",
     "save" : "Speichern",
     "remove" : "Entfernen",
+    "copy" : "Kopieren",
+    "sendButtonText" : "Senden",
+    "regenerateText" : "Regenerieren",
     "addShapeLabel" : "Form hinzufügen",
     "addImageLabel" : "Bild hinzufügen",
     "addFaviconLabel" : "Favicon hinzufügen",
@@ -52,6 +55,7 @@
     "continue" : "Weiter",
     "defaultSaveDescription" : "Vergessen Sie nicht, Ihre Änderungen zu veröffentlichen, sobald Sie mit Ihrem Design zufrieden sind.",
     "saveSuccess" : "Gespeichert!",
-    "changeTemplateConfirmationMessage" : "Wenn Sie die Vorlagen ändern, gehen Ihre Änderungen verloren. Alle Ihre Inhalte werden gelöscht. Wir empfehlen Ihnen, Ihre Website vorher zu duplizieren, wenn Sie Ihre Änderungen beibehalten möchten."
+    "changeTemplateConfirmationMessage" : "Wenn Sie die Vorlagen ändern, gehen Ihre Änderungen verloren. Alle Ihre Inhalte werden gelöscht. Wir empfehlen Ihnen, Ihre Website vorher zu duplizieren, wenn Sie Ihre Änderungen beibehalten möchten.",
+    "generateText" : "Text generieren"
   }
 }

package/src/shared/common/i18n/common.es-ES.json

@@ -37,6 +37,9 @@
     "replace" : "Sustituir",
     "save" : "Guardar",
     "remove" : "Eliminar",
+    "copy" : "Copiar",
+    "sendButtonText" : "Enviar",
+    "regenerateText" : "Volver a generar",
     "addShapeLabel" : "Añadir forma",
     "addImageLabel" : "Añadir imagen",
     "addFaviconLabel" : "Añadir favicon",
@@ -52,6 +55,7 @@
     "continue" : "Continuar",
     "defaultSaveDescription" : "No olvides publicar los cambios una vez que tengas un diseño que te guste.",
     "saveSuccess" : "¡Se ha guardado correctamente!",
-    "changeTemplateConfirmationMessage" : "Cambiar las plantillas hará que pierdas los cambios. Se borrará todo el contenido. Te recomendamos que hagas un duplicado de tu sitio web de antemano si quieres conservar los cambios."
+    "changeTemplateConfirmationMessage" : "Cambiar las plantillas hará que pierdas los cambios. Se borrará todo el contenido. Te recomendamos que hagas un duplicado de tu sitio web de antemano si quieres conservar los cambios.",
+    "generateText" : "Generar texto"
   }
 }

package/src/shared/common/i18n/common.fr-CA.json

@@ -37,6 +37,9 @@
     "replace" : "Remplacer",
     "save" : "Enregistrer",
     "remove" : "Supprimer",
+    "copy" : "Copier",
+    "sendButtonText" : "Envoyer",
+    "regenerateText" : "Régénérer",
     "addShapeLabel" : "Ajouter une forme",
     "addImageLabel" : "Ajouter une image",
     "addFaviconLabel" : "Ajouter un favicon",
@@ -52,6 +55,7 @@
     "continue" : "Continuer",
     "defaultSaveDescription" : "N’oubliez pas de publier vos modifications une fois que votre design vous convient.",
     "saveSuccess" : "Enregistrement réussi!",
-    "changeTemplateConfirmationMessage" : "Si vous changez de modèle, vous perdrez vos modifications et tout votre contenu sera effacé. Nous vous recommandons de dupliquer votre site au préalable si vous souhaitez conserver vos modifications."
+    "changeTemplateConfirmationMessage" : "Si vous changez de modèle, vous perdrez vos modifications et tout votre contenu sera effacé. Nous vous recommandons de dupliquer votre site au préalable si vous souhaitez conserver vos modifications.",
+    "generateText" : "Générer du texte"
   }
 }

package/src/shared/common/i18n/common.fr-FR.json

@@ -37,6 +37,9 @@
     "replace" : "Remplacer",
     "save" : "Enregistrer",
     "remove" : "Supprimer",
+    "copy" : "Copier",
+    "sendButtonText" : "Envoyer",
+    "regenerateText" : "Régénérer",
     "addShapeLabel" : "Ajouter une forme",
     "addImageLabel" : "Ajouter une image",
     "addFaviconLabel" : "Ajouter un favicon",
@@ -52,6 +55,7 @@
     "continue" : "Continuer",
     "defaultSaveDescription" : "N’oubliez pas de publier vos modifications une fois que votre design vous convient.",
     "saveSuccess" : "Enregistrement réussi !",
-    "changeTemplateConfirmationMessage" : "Si vous changez de modèle, vous perdrez vos modifications et tout votre contenu sera effacé. Nous vous recommandons de dupliquer votre site au préalable si vous souhaitez conserver vos modifications."
+    "changeTemplateConfirmationMessage" : "Si vous changez de modèle, vous perdrez vos modifications et tout votre contenu sera effacé. Nous vous recommandons de dupliquer votre site au préalable si vous souhaitez conserver vos modifications.",
+    "generateText" : "Générer du texte"
   }
 }

package/src/shared/common/i18n/common.json

@@ -42,6 +42,9 @@
     "replace": "Replace",
     "save": "Save",
     "remove": "Remove",
+    "copy": "Copy",
+    "sendButtonText": "Send",
+    "regenerateText": "Regenerate",
     "addShapeLabel": "Add Shape",
     "addImageLabel": "Add Image",
     "addFaviconLabel": "Add Favicon",
@@ -62,6 +65,7 @@
     "defaultSaveDescription": "Don’t forget to publish your changes once you are happy with your design.",
     "saveSuccess": "Save successful!",
 
-    "changeTemplateConfirmationMessage": "Changing templates will cause you to lose your changes. All your content will be erased. We recommend you duplicate your site beforehand if you want to retain your changes."
+    "changeTemplateConfirmationMessage": "Changing templates will cause you to lose your changes. All your content will be erased. We recommend you duplicate your site beforehand if you want to retain your changes.",
+    "generateText": "Generate text"
   }
 }

package/src/shared/common/i18n/common.pt-BR.json

@@ -37,6 +37,9 @@
     "replace" : "Substituir",
     "save" : "Salvar",
     "remove" : "Remover",
+    "copy" : "Copiar",
+    "sendButtonText" : "Enviar",
+    "regenerateText" : "Regenerar",
     "addShapeLabel" : "Adicionar forma",
     "addImageLabel" : "Adicionar imagem",
     "addFaviconLabel" : "Adicionar favicon",
@@ -52,6 +55,7 @@
     "continue" : "Continuar",
     "defaultSaveDescription" : "Não se esqueça de publicar as suas alterações quando estiver satisfeito com o seu design.",
     "saveSuccess" : "Salvo com sucesso!",
-    "changeTemplateConfirmationMessage" : "Se alterar os modelos, você perderá suas alterações. Todo o seu conteúdo será apagado. Recomendamos que duplique seu site previamente caso queira manter suas alterações."
+    "changeTemplateConfirmationMessage" : "Se alterar os modelos, você perderá suas alterações. Todo o seu conteúdo será apagado. Recomendamos que duplique seu site previamente caso queira manter suas alterações.",
+    "generateText" : "Gerar texto"
   }
 }

package/src/shared/common/i18n/common.pt-PT.json

@@ -37,6 +37,9 @@
     "replace" : "Substituir",
     "save" : "Guardar",
     "remove" : "Remover",
+    "copy" : "Copiar",
+    "sendButtonText" : "Enviar",
+    "regenerateText" : "Regenerar",
     "addShapeLabel" : "Adicionar forma",
     "addImageLabel" : "Adicionar imagem",
     "addFaviconLabel" : "Adicionar Favicon",
@@ -52,6 +55,7 @@
     "continue" : "Continuar",
     "defaultSaveDescription" : "Não se esqueça de publicar as suas alterações quando estiver satisfeito com o seu design.",
     "saveSuccess" : "Gravação bem-sucedida!",
-    "changeTemplateConfirmationMessage" : "Se alterar os modelos vai perder as suas alterações. Todo o seu conteúdo será apagado. Recomendamos que duplique o seu site previamente caso queira manter as suas alterações."
+    "changeTemplateConfirmationMessage" : "Se alterar os modelos vai perder as suas alterações. Todo o seu conteúdo será apagado. Recomendamos que duplique o seu site previamente caso queira manter as suas alterações.",
+    "generateText" : "Gerar texto"
   }
 }

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -120,6 +120,9 @@ export default defineComponent({
     },
   },
   methods: {
+    onCapturePreviewSnapshot() {
+      this.$emit('capture-preview-snapshot');
+    },
     async onAddContentOptionClicked(option: AddContentOption<any>) {
       const newItem = await this.contentSettingsStore.addItemByType({
         type: option.type,

package/src/shared/content-settings/components/content-settings/ContentSettings.vue

@@ -65,6 +65,7 @@
             :ref="item.id"
             :type="item.type"
             @on-delete="onDeleteItem({ id: item.id }, item.type)"
+            @capture-snapshot-before-modal="onCapturePreviewSnapshot"
           />
         </template>
       </ReorderableList>
@@ -131,6 +132,7 @@
     <!-- Start of Single Content Item Settings -->
     <FocusedContentItemSettings
       v-if="mode === CONTENT_SETTINGS_MODES.focusedContentItem"
+      @capture-preview-snapshot="onCapturePreviewSnapshot"
     />
     <!-- End of Single Content Item Settings -->
 

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.ts

@@ -193,6 +193,14 @@ export default defineComponent({
       this.$emit('on-delete');
     },
 
+    captureSnapshotBeforeModal() {
+      this.$emit('capture-snapshot-before-modal');
+    },
+
+    onCaptureSnapshot() {
+      this.$emit('capture-preview-snapshot');
+    },
+
     toggleButtonClick(): void {
       const $sideBarContent = document.querySelector(`#${SIDE_BAR_CONTENT_ID}`);
 

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.vue

@@ -68,6 +68,7 @@
           "
           :id="id"
           :field="field"
+          @capture-preview-snapshot="onCaptureSnapshot"
         />
       </li>
     </ul>

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -10,9 +10,11 @@ import { UI_EVENT_SOURCES } from '../../../models';
 import { useUiContentSettingsStore } from '../../store';
 import { useUiSideBarStore } from '../../../side-bar/store';
 import {
+  useBrandPageContainerStore,
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
   useUiStore,
+  useSnapshotStore,
 } from '../../../../brand-page-maker/stores';
 import { SIDE_BAR_TAB_NAMES } from '../../../../brand-page-maker/constants';
 import {
@@ -21,6 +23,12 @@ import {
 } from '../../../../brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
+import { commonTr } from '../../../../composables/useTranslate';
+import {
+  getPlainTextFromRTE,
+  replaceTextInRTE,
+} from '../../../../brand-page-maker/utils';
+import { isDefaultContentText } from '../../utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
 
 const RTE_ALLOWED_SECTION_TYPES = [
@@ -30,11 +38,18 @@ const RTE_ALLOWED_SECTION_TYPES = [
   'images-section',
   'shapes-section',
 ];
+const AI_ALLOWED_SECTION_TYPES = [
+  'banner-section',
+  'text',
+  'about-section',
+  'testimonials-section',
+];
 const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
   'descriptionStyle',
   'titleStyle',
   'textStyle',
 ];
+const AI_ALLOWED_FIELD_NAMES = ['description', 'title', 'text', 'paragraph'];
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
 
 export default defineComponent({
@@ -65,6 +80,8 @@ export default defineComponent({
     const uiStore = useUiStore();
     const sideBarStore = useUiSideBarStore();
     const pageSettingsStore = useUiPageSettingsStore();
+    const brandPageContainerStore = useBrandPageContainerStore();
+    const snapshotStore = useSnapshotStore();
     const uiLogoSettingsStore = useUiLogoSettingsStore();
 
     return {
@@ -73,6 +90,7 @@ export default defineComponent({
       getValue: computed(() => contentSettingsStore.getValue),
       brandPageData: computed(() => brandPageMakerStore.brandPageData),
       isAdmin: computed(() => userStore.isAdmin),
+      isDesignCom: computed(() => brandPageContainerStore.isDesignCom),
       canUseRichTextEditor: computed(
         () => userStore.features.canUseRichTextEditor,
       ),
@@ -81,6 +99,7 @@ export default defineComponent({
         () => brandPageMakerStore.isBrandPageOrIsBrandContact,
       ),
       logoTheme: computed(() => uiStore.logoTheme),
+      snapshotBase64: computed(() => snapshotStore.snapshotBase64),
       contentSettingsStore,
       brandPageMakerStore,
       userStore,
@@ -92,6 +111,7 @@ export default defineComponent({
   },
   data: () => ({
     isToggled: true,
+    richTextEditorKey: 0,
   }),
   computed: {
     content(): Content {
@@ -216,6 +236,22 @@ export default defineComponent({
     disableTransparent(): boolean {
       return this.field.disableTransparent || false;
     },
+    generateText(): string {
+      return commonTr('generateText');
+    },
+    showGenerateText(): boolean {
+      return (
+        AI_ALLOWED_SECTION_TYPES.includes(this.type) &&
+        AI_ALLOWED_FIELD_NAMES.includes(this.fieldName)
+      );
+    },
+    plainTextValue(): string {
+      const plainText = getPlainTextFromRTE(this.value);
+
+      if (isDefaultContentText(plainText)) return '';
+
+      return plainText;
+    },
   },
   watch: {
     fieldType() {
@@ -298,6 +334,21 @@ export default defineComponent({
     onToggleStateChange(isToggled: boolean) {
       this.isToggled = isToggled;
     },
+    onUseGeneratedText(generatedText: string) {
+      let formattedText = generatedText;
+
+      if (this.showRichTextEditor && typeof this.value === 'string') {
+        formattedText = replaceTextInRTE(this.value, generatedText);
+      }
+
+      this.contentSettingsStore.updateItemValue({
+        id: this.id,
+        name: this.fieldName,
+        value: formattedText,
+      });
+
+      this.richTextEditorKey = this.richTextEditorKey + 1;
+    },
     clearFieldValue() {
       const fieldType = this.field.defaultValue;
 
@@ -309,5 +360,8 @@ export default defineComponent({
         });
       }
     },
+    onCaptureSnapshot() {
+      this.$emit('capture-preview-snapshot');
+    },
   },
 });

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.vue

@@ -16,11 +16,22 @@
           'tw-flex tw-w-full tw-mb-4': showToggle,
         }"
       >
-        <div class="tw-grow">
+        <div class="tw-flex tw-flex-row tw-w-full tw-justify-between">
           <FieldSubHeader
-            :class="{ 'tw-mb-2': !field.showToggle && !isInline }"
+            :class="{
+              'tw-mb-2': !showGenerateText || (!field.showToggle && !isInline),
+            }"
             :title="field.title"
           />
+          <GenerateAiButton
+            v-if="showGenerateText"
+            :id="`${id}-${field.name}`"
+            :existing-text="plainTextValue"
+            :is-design-com="isDesignCom"
+            :field-type="field.name"
+            @capture-snapshot="onCaptureSnapshot"
+            @on-use-text="onUseGeneratedText"
+          />
         </div>
         <Toggle
           v-if="showToggle"
@@ -33,6 +44,9 @@
         :is="`${fieldType}-field`"
         v-show="!showToggle || isToggled"
         :id="id"
+        :key="
+          showRichTextEditor ? `rte-${id}-${richTextEditorKey}` : `field-${id}`
+        "
         :attrs="{
           'data-test-tag': `${displayName.toLowerCase()}-${field.name}`,
         }"
@@ -63,10 +77,12 @@
         :show-text-alignment-options="showAlignment"
         :show-text-background-color-options="showTextBg"
         :disable-transparent="disableTransparent"
+        :is-design-com="isDesignCom"
         @update:model-value="onFieldChanged"
         @change-logo="onFieldChangeLogo"
         @on-intent-image-replace="onIntentImageReplace"
         @on-toggle-state-change="onToggleStateChange"
+        @capture-preview-snapshot="onCaptureSnapshot"
       />
     </div>
   </div>
@@ -109,6 +125,7 @@ import SliderField from '../slider-field/SliderField.vue';
 import PageDropdownField from '../page-dropdown-field/PageDropdownField.vue';
 import PersonalisationOverrideField from '../personalisation-override-field/PersonalisationOverrideField.vue';
 import BookingUrlField from '../booking-url-field/BookingUrlField.vue';
+import GenerateAiButton from '../generate-ai-button/GenerateAiButton.vue';
 
 export default {
   components: {
@@ -147,6 +164,7 @@ export default {
     'product-config-option-field': ProductConfigOptionField,
     FieldSubHeader,
     Toggle,
+    GenerateAiButton,
     'page-dropdown-field': PageDropdownField,
     'personalisation-override-field': PersonalisationOverrideField,
   },

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.mixin.ts

@@ -228,7 +228,9 @@ export default defineComponent({
         eventSource: UI_EVENT_SOURCES.contentSettings,
       });
     },
-
+    onCaptureSnapshotBeforeModal() {
+      this.$emit('capture-preview-snapshot');
+    },
     onToggleGroupCollapseClick(groupId: string) {
       if (!this.id) {
         return;

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.vue

@@ -36,6 +36,7 @@
             :field="field"
             :role="item.settings.content.fieldRole"
             :type="item.type"
+            @capture-preview-snapshot="onCaptureSnapshotBeforeModal"
           />
         </li>
       </ul>

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

@@ -0,0 +1,95 @@
+<template>
+  <div v-if="showButton">
+    <p
+      :title="generateText"
+      class="tw-text-sm tw-text-primary-500 tw-font-bold tw-cursor-pointer tw-flex tw-items-center"
+      :class="{
+        'tw-uppercase': !props.isDesignCom,
+      }"
+      @click="onShowGenerateModal"
+    >
+      <Icon name="ai" class="tw-mr-1 tw-flex" />
+      {{ generateText }}
+    </p>
+    <GenerateAiModal
+      :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"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Icon } from '@designcrowd/fe-shared-lib';
+import GenerateAiModal from '../generate-ai-modal/GenerateAiModal.vue';
+import { commonTr } from '../../../../composables/useTranslate';
+import {
+  useBrandPageContainerStore,
+  useSnapshotStore,
+} from '../../../../brand-page-maker/stores';
+import type { AbTestResult } from '../../../../brand-page/models/brand-page-context.model';
+
+interface Props {
+  id: string;
+  existingText: string;
+  isDesignCom?: boolean;
+  captureSnapshotDelay?: number;
+  fieldType?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isDesignCom: false,
+  fieldType: 'text',
+});
+
+const emit = defineEmits<{
+  'on-use-text': [text: string];
+  'capture-snapshot': [];
+}>();
+
+const snapshotStore = useSnapshotStore();
+const brandPageContainerStore = useBrandPageContainerStore();
+
+const snapshotBase64 = computed(() => snapshotStore.snapshotBase64);
+const abTests = computed(() => brandPageContainerStore.abTests);
+
+const showButton = computed(() => {
+  const abTest = abTests.value
+    .bp_4572_ai_text_generation_post_purchase as unknown as
+    | AbTestResult
+    | undefined;
+  return abTest?.isVariation ?? false;
+});
+
+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;
+  }
+
+  generateTextModalVisible.value = true;
+};
+
+const onCloseGenerateTextModal = () => {
+  generateTextModalVisible.value = false;
+};
+
+const handleUseGeneratedText = (generatedText: string) => {
+  emit('on-use-text', generatedText);
+  onCloseGenerateTextModal();
+};
+</script>