@designcrowd/library.brand-page 5.17.28 → 5.18.0

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

@@ -1,761 +0,0 @@
-<template>
-  <div data-component="generate-ai-modal">
-    <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-overflow-hidden 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-p-3 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>
-          <!-- Suggested prompts - Mobile (shown above textarea) -->
-          <div
-            class="suggested-prompts-container suggested-prompts-mobile tw-border-t tw-border-solid tw-border-grayscale-500"
-          >
-            <Button
-              v-for="prompt in suggestedPrompts"
-              :key="prompt.id"
-              classes="tw-w-full sm:tw-w-auto tw-h-full tw-font-normal tw-max-h-9 tw-flex tw-justify-center tw-items-center"
-              :class="{
-                'tw-uppercase': !isDesignCom,
-                'disabled-button': prompt.disabled,
-              }"
-              :label="prompt.label"
-              variant="flat"
-              size="small"
-              :disabled="prompt.disabled"
-              :attrs="{
-                'data-test-tag': prompt.testTag,
-              }"
-              @click="prompt.handler"
-            />
-          </div>
-          <div
-            class="tw-p-3 tw-flex tw-flex-col sm:tw-flex-row tw-gap-2 tw-border-t tw-border-solid tw-border-grayscale-500"
-          >
-            <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>
-          <!-- Suggested prompts - Desktop (shown below textarea) -->
-          <div
-            class="suggested-prompts-container suggested-prompts-desktop tw-border-t tw-border-solid tw-border-grayscale-500"
-          >
-            <Button
-              v-for="prompt in suggestedPrompts"
-              :key="prompt.id"
-              classes="tw-w-full sm:tw-w-auto tw-h-full tw-font-normal tw-max-h-9 tw-flex tw-justify-center tw-items-center"
-              :class="{
-                'tw-uppercase': !isDesignCom,
-                'disabled-button': prompt.disabled,
-              }"
-              :label="prompt.label"
-              variant="flat"
-              size="small"
-              :disabled="prompt.disabled"
-              :attrs="{
-                'data-test-tag': prompt.testTag,
-              }"
-              @click="prompt.handler"
-            />
-          </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,
-  contentSettingsTr,
-} from '@src/composables/useTranslate';
-import { getInstance as getDesignTemplateClient } from '../../../../clients/design-template-client';
-import {
-  EVENTS,
-  GENERATE_AI_SUGGESTED_PROMPT,
-  GENERATE_TEXT_CONTINUATION_EVENTS,
-  useEventTracker,
-} from '@brand-page-maker/composables/useEventTracker';
-import { useSnapshotStore } from '@brand-page-maker/stores';
-import { useBrandPageMakerStore } from '@brand-page-maker/stores';
-
-interface Props {
-  id: string;
-  isVisible: boolean;
-  existingText?: string;
-  isDesignCom?: boolean;
-  ctaLocation: string;
-  fieldName: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isVisible: true,
-  existingText: '',
-  snapshotBase64: null,
-});
-
-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 eventTracker = useEventTracker();
-const textareaRef = ref<HTMLTextAreaElement | null>(null);
-const MAX_PROMPT_LENGTH = 2000;
-
-const snapshotStore = useSnapshotStore();
-const snapshotBase64 = computed(() => snapshotStore.snapshotBase64);
-
-const brandPageMakerStore = useBrandPageMakerStore();
-
-const businessName = computed(() => brandPageMakerStore.businessName || '');
-const industry = computed(() => brandPageMakerStore.industry || '');
-
-// 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 '';
-  }
-  if (data.response !== null) {
-    return data.response;
-  }
-  // Show existing text if available, otherwise show placeholder
-  return props.existingText || generateAiModalTr('generatePlaceholder');
-});
-
-const isDoneTyping = computed(
-  () => !isProcessing.value && data.response !== null,
-);
-
-const isPromptTooLong = computed(() => data.prompt.length > MAX_PROMPT_LENGTH);
-
-const formattedLocation = computed(() => {
-  const parts = props.ctaLocation.split('_');
-
-  // Special cases: testimonial and text items only need content type
-  if (parts[0] === 'testimonial' || parts[0] === 'text') {
-    return contentSettingsTr(`${parts[0]}DisplayName`);
-  }
-
-  // Standard case: content type + field name
-  const contentType = contentSettingsTr(`${parts[0]}SectionDisplayName`);
-  const fieldName = contentSettingsTr(`${parts.slice(1).join('_')}Title`);
-  return `${contentType} ${fieldName}`;
-});
-
-const suggestedPrompts = computed(() => [
-  {
-    id: 'generate-text',
-    label: generateAiModalTr('generateText', {
-      location: formattedLocation.value,
-    }),
-    disabled: isProcessing.value,
-    testTag: 'generate-text-btn',
-    handler: onGenerateTextClick,
-  },
-  {
-    id: 'improve-text',
-    label: generateAiModalTr('improveText'),
-    disabled: !props.existingText?.trim() || isProcessing.value,
-    testTag: 'improve-text-btn',
-    handler: onImproveTextClick,
-  },
-  {
-    id: 'spell-check',
-    label: generateAiModalTr('spellCheck'),
-    disabled: !props.existingText?.trim() || isProcessing.value,
-    testTag: 'spell-check-btn',
-    handler: onSpellCheckClick,
-  },
-]);
-
-// 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;
-
-  eventTracker.sendWebsiteEvent({
-    eventName: EVENTS.WEBSITE_MAKER_AI_COPY_RESPONSE,
-    eventProps: {
-      cta_location: props.ctaLocation,
-    },
-  });
-
-  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;
-
-  eventTracker.sendGenerateTextContinuationEvent(
-    props.ctaLocation,
-    GENERATE_TEXT_CONTINUATION_EVENTS.USE_TEXT,
-  );
-
-  emit('on-use-text', data.response);
-  onClose();
-};
-
-const onStopGeneration = () => {
-  eventTracker.sendWebsiteEvent({
-    eventName: EVENTS.WEBSITE_MAKER_AI_STOP_GENERATION,
-    eventProps: {
-      cta_location: props.ctaLocation,
-    },
-  });
-  stopGeneration();
-  data.response = generateAiModalTr('generationStopped');
-};
-const onRegeneratePrompt = () => {
-  if (data.lastPromptSent) {
-    eventTracker.sendWebsiteEvent({
-      eventName: EVENTS.WEBSITE_MAKER_AI_REGENERATE_TEXT,
-      eventProps: {
-        cta_location: props.ctaLocation,
-      },
-    });
-    onSendPrompt(data.lastPromptSent);
-  }
-};
-
-const onSendButtonClick = () => {
-  eventTracker.sendWebsiteEvent({
-    eventName: EVENTS.WEBSITE_MAKER_AI_SEND_PROMPT,
-    eventProps: {
-      cta_location: props.ctaLocation,
-    },
-  });
-  onSendPrompt();
-};
-
-// Helper function to build prompt key based on available context
-const buildPromptKey = (baseKey: string): string => {
-  if (businessName.value && industry.value) return baseKey;
-  if (industry.value) return `${baseKey}WithIndustry`;
-  if (businessName.value) return `${baseKey}WithBusinessName`;
-  return `${baseKey}Simple`;
-};
-
-// Helper function to get prompt params based on available context
-const getPromptParams = (includeFieldName = false) => {
-  const params: Record<string, string> = {};
-
-  if (includeFieldName) {
-    params.fieldName = formattedLocation.value;
-  }
-
-  if (businessName.value) {
-    params.businessName = businessName.value;
-  }
-
-  if (industry.value) {
-    params.industry = industry.value;
-  }
-
-  return params;
-};
-
-// Helper function to set prompt and focus textarea
-const setPromptAndFocus = (prompt: string) => {
-  data.prompt = prompt;
-
-  nextTick(() => {
-    resizeTextarea();
-    textareaRef.value?.focus();
-  });
-};
-
-const onGenerateTextClick = () => {
-  const promptKey = buildPromptKey('generateTextPrompt');
-  const prompt = generateAiModalTr(promptKey, getPromptParams(true));
-
-  setPromptAndFocus(prompt);
-
-  eventTracker.sendWebsiteEvent({
-    eventName: EVENTS.WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT,
-    eventProps: {
-      cta_location: props.ctaLocation,
-      prompt: GENERATE_AI_SUGGESTED_PROMPT.GENERATE_TEXT,
-    },
-  });
-};
-
-const onImproveTextClick = () => {
-  const promptKey = buildPromptKey('improveTextPrompt');
-  const prompt = generateAiModalTr(promptKey, getPromptParams(false));
-
-  setPromptAndFocus(prompt);
-
-  eventTracker.sendWebsiteEvent({
-    eventName: EVENTS.WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT,
-    eventProps: {
-      cta_location: props.ctaLocation,
-      prompt: GENERATE_AI_SUGGESTED_PROMPT.IMPROVE_TEXT,
-    },
-  });
-};
-
-const onSpellCheckClick = () => {
-  const prompt = generateAiModalTr('spellCheckPrompt');
-
-  setPromptAndFocus(prompt);
-
-  eventTracker.sendWebsiteEvent({
-    eventName: EVENTS.WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT,
-    eventProps: {
-      cta_location: props.ctaLocation,
-      prompt: GENERATE_AI_SUGGESTED_PROMPT.SPELL_CHECK,
-    },
-  });
-};
-
-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 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 ?? '',
-      snapshotBase64.value || undefined,
-      businessName.value,
-      industry.value,
-      props.ctaLocation,
-      props.id,
-      props.fieldName,
-    );
-
-    // 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.';
-  }
-};
-
-// 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 = '';
-    } else if (!newValue && oldValue) {
-      // Modal is closing - stop everything immediately
-      data.isStopped = true;
-      clearTypingInterval();
-      data.isApiRequesting = false;
-      data.isTyping = false;
-    }
-  },
-  { flush: 'sync' },
-);
-
-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));
-}
-
-.disabled-button :deep(button) {
-  background-color: rgb(229 231 235) !important;
-  cursor: not-allowed !important;
-  opacity: 0.6 !important;
-}
-
-.suggested-prompts-container {
-  @apply tw-p-3 tw-flex tw-flex-wrap tw-gap-2 tw-overflow-auto;
-}
-
-.suggested-prompts-container :deep(button) {
-  white-space: nowrap;
-  font-weight: normal;
-  max-height: 2.25rem;
-  flex: 0 1 auto;
-}
-
-/* Mobile: show above textarea */
-.suggested-prompts-mobile {
-  @apply tw-flex;
-  flex-flow: row;
-}
-
-.suggested-prompts-desktop {
-  @apply tw-hidden;
-}
-
-/* Desktop: show below textarea */
-@media (min-width: 640px) {
-  .suggested-prompts-mobile {
-    @apply tw-hidden;
-  }
-
-  .suggested-prompts-desktop {
-    @apply tw-flex;
-  }
-}
-
-@keyframes blink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  51%,
-  100% {
-    opacity: 0;
-  }
-}
-</style>