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

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

@@ -0,0 +1,500 @@
+<template>
+  <div>
+    <Modal
+      full-screen-breakpoint="sm"
+      :visible="props.isVisible"
+      :close-on-esc="true"
+      :hide-scrollbar="false"
+      :show-modal-background-image="false"
+      @close-modal="onClose"
+    >
+      <template #header>
+        <h2
+          class="tw-font-bold tw-text-2xl sm:tw-text-3xl tw-mb-2 tw-text-black tw-bg-grayscale-200 tw-flex tw-items-center"
+        >
+          <Icon name="ai" size="lg" class="tw-mr-2 tw-text-primary-500" />
+          {{ generateAiModalTr('generateTitle') }}
+        </h2>
+      </template>
+      <template #default>
+        <div
+          class="tw-bg-white tw-rounded-lg tw-shadow-md tw-text-left tw-border-grayscale-500 tw-border tw-border-solid tw-flex tw-flex-col tw-h-full"
+        >
+          <div
+            class="tw-border-b tw-border-solid tw-border-grayscale-500 tw-p-4 tw-flex-1 tw-overflow-auto tw-flex tw-flex-col tw-justify-between"
+          >
+            <div
+              class="tw-p-2 tw-rounded-md tw-mb-4 tw-block"
+              :class="{
+                'c-modal-dcom': isDesignCom,
+                'c-modal-bc': !isDesignCom,
+              }"
+            >
+              <div
+                class="tw-flex tw-text-sm tw-items-start tw-text-grayscale-600"
+              >
+                <SparkleIcon
+                  v-if="isProcessing"
+                  color-class="tw-text-primary-500"
+                  animated
+                  class="tw-mr-2 tw-flex tw-flex-shrink-0 tw-mt-0.5"
+                />
+                <Icon
+                  v-else
+                  name="ai"
+                  size="sm"
+                  class="tw-mr-2 tw-text-primary-500 tw-flex tw-flex-shrink-0 tw-mt-0.5"
+                />
+                <p class="tw-flex-1 tw-max-h-64 tw-overflow-y-auto">
+                  {{ response }}
+                  <span v-if="data.isTyping" class="typing-cursor">|</span>
+                </p>
+              </div>
+              <div class="tw-flex tw-justify-end tw-gap-2">
+                <div
+                  v-if="isDoneTyping"
+                  class="tw-flex tw-gap-2 tw-items-center tw-mt-2"
+                >
+                  <div class="tw-relative tw-group">
+                    <Icon
+                      v-if="!data.isCopied"
+                      name="duplicate"
+                      size="sm"
+                      class="tw-cursor-pointer hover:tw-text-info-700"
+                      @click="copyToClipboard"
+                    />
+                    <Icon v-else name="check" size="sm" class="text-success" />
+                    <span
+                      v-if="!data.isCopied"
+                      class="tw-absolute tw-bottom-full tw-left-1/2 tw--translate-x-1/2 tw-mb-2 tw-px-2 tw-py-1 tw-text-xs tw-text-white tw-bg-grayscale-800 tw-rounded tw-whitespace-nowrap tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-pointer-events-none"
+                    >
+                      {{ commonTr('copy') }}
+                    </span>
+                  </div>
+                  <Button
+                    classes="tw-w-full tw-h-full"
+                    :label="commonTr('regenerateText')"
+                    variant="primary"
+                    size="small"
+                    :attrs="{ 'data-test-tag': 'regenerate-btn' }"
+                    @click="onRegeneratePrompt"
+                  />
+                  <Button
+                    classes="tw-w-full tw-h-full"
+                    :label="generateAiModalTr('useText')"
+                    variant="primary"
+                    size="small"
+                    :attrs="{ 'data-test-tag': 'use-text-btn' }"
+                    @click="onUseText"
+                  />
+                </div>
+                <div v-if="data.isApiRequesting">
+                  <Button
+                    classes="tw-w-full tw-h-full"
+                    :label="generateAiModalTr('stopGeneration')"
+                    variant="primary"
+                    size="small"
+                    icon-left="stop"
+                    :attrs="{ 'data-test-tag': 'stop-btn' }"
+                    @click="onStopGeneration"
+                  />
+                </div>
+              </div>
+            </div>
+            <p class="tw-text-xs text-grayscale tw-flex tw-items-center">
+              <Icon name="callout-info" size="sm" class="tw-mr-1 tw-flex" />
+              {{ generateAiModalTr('generateDescription') }}
+            </p>
+          </div>
+          <div class="tw-p-4 tw-flex tw-flex-col sm:tw-flex-row tw-gap-2">
+            <div class="tw-flex tw-flex-col tw-flex-1 tw-gap-1">
+              <div class="tw-flex tw-items-center tw-flex-1">
+                <textarea
+                  ref="textareaRef"
+                  v-model="data.prompt"
+                  :placeholder="generateAiModalTr('generateInputPlaceholder')"
+                  :disabled="isProcessing"
+                  rows="1"
+                  class="prompt-textarea tw-font-sans tw-box-border tw-w-full tw-py-2 tw-text-sm tw-px-4 tw-rounded tw-border tw-border-solid tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner tw-resize-none tw-overflow-y-auto sm:tw-min-h-10"
+                  :class="{
+                    'tw-border-error-600 focus:tw-border-error-700':
+                      isPromptTooLong,
+                    'tw-border-grayscale-500 focus:tw-border-grayscale-600':
+                      !isPromptTooLong,
+                    'tw-bg-grayscale-300': isProcessing,
+                  }"
+                  @input="resizeTextarea"
+                />
+              </div>
+              <p
+                v-if="data.promptError"
+                class="tw-text-xs tw-text-error-600 tw-mt-1"
+              >
+                {{ data.promptError }}
+              </p>
+            </div>
+            <Button
+              classes="tw-w-full sm:tw-w-auto tw-h-full tw-max-h-10"
+              class="tw-flex tw-justify-center tw-items-center"
+              :label="commonTr('sendButtonText')"
+              variant="primary"
+              size="small-medium"
+              icon-left="send"
+              icon-left-size="sm"
+              :disabled="!data.prompt.trim() || isProcessing || isPromptTooLong"
+              :attrs="{
+                'data-test-tag': 'send-btn',
+              }"
+              @click="onSendButtonClick"
+            />
+          </div>
+        </div>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Modal, Icon, Button, SparkleIcon } from '@designcrowd/fe-shared-lib';
+import { computed, reactive, onUnmounted, watch, ref, nextTick } from 'vue';
+import {
+  generateAiModalTr,
+  commonTr,
+} from '../../../../composables/useTranslate';
+import { getInstance as getDesignTemplateClient } from '../../../../clients/design-template-client';
+
+interface Props {
+  isVisible: boolean;
+  existingText?: string;
+  snapshotBase64?: string | null;
+  isDesignCom?: boolean;
+  fieldType?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true,
+  existingText: '',
+  snapshotBase64: null,
+  fieldType: 'text',
+});
+
+const data = reactive({
+  prompt: '',
+  response: null as string | null,
+  lastPromptSent: '',
+  isApiRequesting: false,
+  isTyping: false,
+  isStopped: false,
+  typingIntervalId: null as number | null,
+  isCopied: false,
+  promptError: '',
+});
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+const MAX_PROMPT_LENGTH = 500;
+
+// Auto-resize textarea
+const resizeTextarea = () => {
+  if (textareaRef.value) {
+    textareaRef.value.style.height = 'auto';
+    textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
+  }
+};
+
+const isProcessing = computed(() => data.isApiRequesting || data.isTyping);
+
+const response = computed(() => {
+  if (isProcessing.value && data.response === null) {
+    return '';
+  }
+  return data.response ?? generateAiModalTr('generatePlaceholder');
+});
+
+const isDoneTyping = computed(
+  () => !isProcessing.value && data.response !== null,
+);
+
+const isPromptTooLong = computed(() => data.prompt.length > MAX_PROMPT_LENGTH);
+
+// Watch prompt length and set error
+watch(
+  () => data.prompt,
+  (newPrompt) => {
+    if (newPrompt.length > MAX_PROMPT_LENGTH) {
+      data.promptError = generateAiModalTr('promptTooLong', {
+        maxLength: MAX_PROMPT_LENGTH,
+        currentLength: newPrompt.length,
+      });
+    } else {
+      data.promptError = '';
+    }
+
+    // Resize textarea on next tick to ensure DOM is updated
+    nextTick(() => {
+      resizeTextarea();
+    });
+  },
+);
+
+const emit = defineEmits(['on-close', 'on-use-text']);
+
+const clearTypingInterval = () => {
+  if (data.typingIntervalId) {
+    clearInterval(data.typingIntervalId);
+    data.typingIntervalId = null;
+  }
+};
+
+const stopGeneration = () => {
+  data.isStopped = true;
+  data.isApiRequesting = false;
+  data.isTyping = false;
+  clearTypingInterval();
+};
+
+const resetModalState = () => {
+  data.response = null;
+  data.prompt = '';
+  data.isCopied = false;
+  data.promptError = '';
+  data.isApiRequesting = false;
+  data.isTyping = false;
+};
+
+const onClose = () => {
+  // Mark as stopped so API response is ignored
+  data.isStopped = true;
+  clearTypingInterval();
+
+  // Reset UI state
+  resetModalState();
+
+  emit('on-close');
+};
+
+const typeText = (fullText: string) => {
+  clearTypingInterval();
+
+  data.response = '';
+  data.isTyping = true;
+  let index = 0;
+  const charsPerTick = fullText.length > 150 ? 2 : 1;
+
+  data.typingIntervalId = window.setInterval(() => {
+    // Check if generation was stopped
+    if (data.isStopped) {
+      clearTypingInterval();
+      data.isTyping = false;
+      return;
+    }
+
+    if (index < fullText.length) {
+      index = Math.min(index + charsPerTick, fullText.length);
+      data.response = fullText.substring(0, index);
+    } else {
+      clearTypingInterval();
+      data.isTyping = false;
+    }
+  }, 20);
+};
+
+const copyToClipboard = async () => {
+  if (!data.response) return;
+
+  try {
+    await navigator.clipboard.writeText(data.response);
+    data.isCopied = true;
+
+    // Reset the icon back to duplicate after 2 seconds
+    setTimeout(() => {
+      data.isCopied = false;
+    }, 2000);
+  } catch (error) {
+    console.error('Failed to copy text:', error);
+  }
+};
+
+const onUseText = () => {
+  if (!data.response) return;
+
+  emit('on-use-text', data.response);
+  onClose();
+};
+
+const onStopGeneration = () => {
+  stopGeneration();
+  data.response = generateAiModalTr('generationStopped');
+};
+const onRegeneratePrompt = () => {
+  if (data.lastPromptSent) {
+    onSendPrompt(data.lastPromptSent);
+  }
+};
+
+const onSendButtonClick = () => {
+  onSendPrompt();
+};
+
+const onSendPrompt = async (customPrompt?: string) => {
+  const promptToSend = customPrompt || data.prompt.trim();
+
+  if (
+    !promptToSend ||
+    (!customPrompt && promptToSend.length > MAX_PROMPT_LENGTH)
+  ) {
+    return;
+  }
+
+  data.lastPromptSent = promptToSend;
+  data.isStopped = false;
+  data.isApiRequesting = true;
+  data.isTyping = false;
+  data.response = null;
+  data.prompt = '';
+  clearTypingInterval();
+
+  try {
+    const client = getDesignTemplateClient();
+    const result = await client.generateText(
+      promptToSend,
+      props.existingText ?? '',
+      props.snapshotBase64 || undefined,
+    );
+
+    // Check if generation was stopped before setting response
+    if (data.isStopped) {
+      data.isApiRequesting = false;
+      return;
+    }
+
+    data.isApiRequesting = false;
+
+    if (result) {
+      typeText(result);
+    } else {
+      data.response = 'Failed to generate text. Please try again.';
+    }
+  } catch (error: any) {
+    // Check if generation was stopped before setting error
+    if (data.isStopped) {
+      data.isApiRequesting = false;
+      return;
+    }
+
+    data.isApiRequesting = false;
+    data.response =
+      error?.response?.data?.error || 'An error occurred. Please try again.';
+  }
+};
+
+// Generate default prompt based on field type
+const getDefaultPrompt = (): string => {
+  const fieldType = props.fieldType || 'text';
+  return `Improve this ${fieldType}`;
+};
+
+// Auto-generate text when modal opens if there's existing text
+watch(
+  () => props.isVisible,
+  (newValue, oldValue) => {
+    if (newValue && !oldValue) {
+      // Only reset when transitioning from closed to open
+      resetModalState();
+      data.isStopped = false;
+      data.lastPromptSent = '';
+
+      if (props.existingText && props.existingText.trim()) {
+        const defaultPrompt = getDefaultPrompt();
+        onSendPrompt(defaultPrompt);
+      }
+    } else if (!newValue && oldValue) {
+      // Modal is closing - stop everything immediately
+      data.isStopped = true;
+      clearTypingInterval();
+      data.isApiRequesting = false;
+      data.isTyping = false;
+    }
+  },
+  { flush: 'sync' }, // Execute synchronously to prevent race conditions
+);
+
+onUnmounted(clearTypingInterval);
+</script>
+<style scoped>
+.c-modal-dcom {
+  background-color: #eceefe;
+  border: 1px solid #3247c5;
+}
+
+.c-modal-bc {
+  background-color: #cceaf7;
+  border: 1px solid #0097d7;
+}
+
+.typing-cursor {
+  display: inline-block;
+  animation: blink 1s step-end infinite;
+  color: #3247c5;
+  font-weight: bold;
+  margin-left: 2px;
+}
+
+.prompt-textarea {
+  line-height: 1.5;
+  min-height: 4.5rem; /* Minimum 3 rows on mobile (1.5em * 3) */
+  max-height: calc(7.5em + 1rem); /* Maximum 5 rows */
+  color: rgb(96 96 96);
+  scrollbar-gutter: stable;
+  overflow-y: auto;
+}
+
+/* Desktop: smaller minimum height */
+@media (min-width: 640px) {
+  .prompt-textarea {
+    min-height: 2.5rem; /* Single line on desktop */
+  }
+}
+
+.prompt-textarea::placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+
+/* Ensure border is visible when scrollbar appears */
+.prompt-textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.prompt-textarea::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 2px;
+}
+
+.prompt-textarea::-webkit-scrollbar-thumb {
+  background: rgb(96 96 96 / 30%);
+  border-radius: 4px;
+}
+
+.prompt-textarea::-webkit-scrollbar-thumb:hover {
+  background: rgb(96 96 96 / 50%);
+}
+
+.text-grayscale {
+  color: rgb(96 96 96 / 50%);
+}
+
+.text-success {
+  --tw-text-opacity: 1;
+  color: rgb(29 134 13 / var(--tw-text-opacity));
+}
+
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+</style>

package/src/shared/content-settings/components/generate-ai-modal/i18n/generate-ai.de-DE.json

@@ -0,0 +1,12 @@
+{
+  "aiModal" : {
+    "generateTitle" : "Text mit KI generieren",
+    "generateDescription" : "Der Inhalt wurde von einer KI generiert und muss möglicherweise zur Verbesserung der Genauigkeit bearbeitet werden",
+    "generatePlaceholder" : "Beschreiben Sie Ihren Text.",
+    "generationStopped" : "Die Textgenerierung wurde gestoppt. Starten Sie eine neue Eingabeaufforderung, um fortzufahren.",
+    "generateInputPlaceholder" : "Geben Sie Ihre Eingabeaufforderung ein, um den Text zu beschreiben ...",
+    "stopGeneration" : "Generierung anhalten",
+    "useText" : "Text verwenden",
+    "promptTooLong" : "Der Prompt darf maximal {{maxLength}} Zeichen lang sein ({{currentLength}})"
+  }
+}

package/src/shared/content-settings/components/generate-ai-modal/i18n/generate-ai.es-ES.json

@@ -0,0 +1,12 @@
+{
+  "aiModal" : {
+    "generateTitle" : "Generar texto con IA",
+    "generateDescription" : "El contenido se genera mediante IA y podría necesitar una revisión para garantizar su precisión",
+    "generatePlaceholder" : "Describe tu texto.",
+    "generationStopped" : "El proceso de generación se ha detenido. Envía un nuevo mensaje para continuar.",
+    "generateInputPlaceholder" : "Introduce tu mensaje para describir el texto...",
+    "stopGeneration" : "Detén la generación",
+    "useText" : "Usa texto",
+    "promptTooLong" : "El mensaje debe tener {{maxLength}} caracteres como máximo ({{currentLength}})"
+  }
+}

package/src/shared/content-settings/components/generate-ai-modal/i18n/generate-ai.fr-CA.json

@@ -0,0 +1,12 @@
+{
+  "aiModal" : {
+    "generateTitle" : "Générer du texte avec l'IA",
+    "generateDescription" : "Le contenu est généré par l'IA et peut nécessiter des modifications pour plus de précision.",
+    "generatePlaceholder" : "Décrivez votre texte.",
+    "generationStopped" : "La génération de texte s'est arrêtée. Lancez une nouvelle requête pour continuer.",
+    "generateInputPlaceholder" : "Entrez votre requête pour décrire le contenu...",
+    "stopGeneration" : "Arrêter la génération",
+    "useText" : "Utiliser le texte",
+    "promptTooLong" : "La requête doit comporter {{maxLength}} caractères ou moins ({{currentLength}})"
+  }
+}

package/src/shared/content-settings/components/generate-ai-modal/i18n/generate-ai.fr-FR.json

@@ -0,0 +1,12 @@
+{
+  "aiModal" : {
+    "generateTitle" : "Générer du texte avec l'IA",
+    "generateDescription" : "Le contenu est généré par l'IA et peut nécessiter des modifications pour plus de précision.",
+    "generatePlaceholder" : "Décrivez votre texte.",
+    "generationStopped" : "La génération de texte s'est arrêtée. Démarrez une nouvelle invite pour continuer.",
+    "generateInputPlaceholder" : "Entrez votre prompt pour décrire le contenu...",
+    "stopGeneration" : "Arrêter la génération",
+    "useText" : "Utiliser le texte",
+    "promptTooLong" : "L'invite doit comporter {{maxLength}} caractères ou moins ({{currentLength}})"
+  }
+}

package/src/shared/content-settings/components/generate-ai-modal/i18n/generate-ai.json

@@ -0,0 +1,12 @@
+{
+  "aiModal": {
+    "generateTitle": "Generate Text with AI",
+    "generateDescription": "Content is AI-generated and may require editing for accuracy",
+    "generatePlaceholder": "Describe your text.",
+    "generationStopped": "Text generation stopped. Start a new prompt to continue.",
+    "generateInputPlaceholder": "Enter your prompt to describe the text...",
+    "stopGeneration": "Stop generation",
+    "useText": "Use text",
+    "promptTooLong": "Prompt must be {{maxLength}} characters or less ({{currentLength}})"
+  }
+}

package/src/shared/content-settings/components/generate-ai-modal/i18n/generate-ai.pt-BR.json

@@ -0,0 +1,12 @@
+{
+  "aiModal" : {
+    "generateTitle" : "Gerar texto com IA",
+    "generateDescription" : "O conteúdo é gerado por IA, pode precisar de alterações para melhorar a precisão",
+    "generatePlaceholder" : "Descreva seu texto.",
+    "generationStopped" : "A geração de texto parou. Inicie um novo prompt para continuar.",
+    "generateInputPlaceholder" : "Digite o prompt para descrever o texto...",
+    "stopGeneration" : "Parar de gerar",
+    "useText" : "Usar texto",
+    "promptTooLong" : "O prompt deve ter {{maxLength}} caracteres ou menos ({{currentLength}})"
+  }
+}

package/src/shared/content-settings/components/generate-ai-modal/i18n/generate-ai.pt-PT.json

@@ -0,0 +1,12 @@
+{
+  "aiModal" : {
+    "generateTitle" : "Gerar Texto com IA",
+    "generateDescription" : "O conteúdo é gerado por IA e pode precisar de edição para ser preciso",
+    "generatePlaceholder" : "Descreva o seu texto.",
+    "generationStopped" : "A geração de texto parou. Inicie um novo prompt para continuar.",
+    "generateInputPlaceholder" : "Introduza o seu comando para descrever o texto...",
+    "stopGeneration" : "Parar a geração",
+    "useText" : "Utilizar texto",
+    "promptTooLong" : "A mensagem tem de ter {{maxLength}} carateres ou menos ({{currentLength}})"
+  }
+}

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.mixin.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import type { PropType } from 'vue';
 import type {
   ColorReplacement,
@@ -16,6 +16,9 @@ import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
+import { useSnapshotStore } from '../../../../brand-page-maker/stores';
+import { getPlainTextFromRTE } from '../../../../brand-page-maker/utils';
+import { isDefaultContentText } from '../../utils';
 
 const DEBOUNCE_IN_MS = 250;
 
@@ -45,8 +48,24 @@ export default defineComponent({
       type: Object as PropType<Content>,
       required: true,
     },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup() {
+    const snapshotStore = useSnapshotStore();
+
+    return {
+      snapshotBase64: computed(() => snapshotStore.snapshotBase64),
+    };
   },
-  emits: ['update:modelValue', 'on-intent-image-replace'],
+  emits: [
+    'update:modelValue',
+    'on-intent-image-replace',
+    'capture-preview-snapshot',
+  ],
   data: () => ({
     changeDebounce: undefined as DebounceHandle | undefined,
     options: [] as TestimonialItems[],
@@ -185,5 +204,28 @@ export default defineComponent({
       this.options[index][payload.name] = payload.value;
       this.emitChange();
     },
+    getPlainTextValue(index: number): string {
+      const text = this.options[index]?.testimonials || '';
+      const plainText = getPlainTextFromRTE(text);
+
+      if (isDefaultContentText(plainText)) {
+        return '';
+      }
+
+      return plainText;
+    },
+    onUseGeneratedText(generatedText: string, index: number) {
+      // Update the testimonial text
+      this.options[index].testimonials = generatedText;
+      this.isModified[index] = true;
+      this.isEmpty[index] = false;
+
+      // Emit the change
+      this.emitChange();
+    },
+
+    onCaptureSnapshot() {
+      this.$emit('capture-preview-snapshot');
+    },
   },
 });