@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/brand-page-maker/composables/ai-chat/useAiTextEditPrompts.ts

@@ -1,196 +0,0 @@
-import { computed, type ComputedRef, type Ref } from 'vue';
-import { useBrandPageMakerStore } from '../../stores';
-import {
-  EVENTS,
-  GENERATE_AI_SUGGESTED_PROMPT,
-  useEventTracker,
-} from '../../composables/useEventTracker';
-import {
-  generateAiModalTr,
-  contentSettingsTr,
-} from '../../../composables/useTranslate';
-import type { AiTextEditContext } from '../../../shared/side-bar/store';
-import { getPlainTextFromRTE } from '../../utils/rich-text-editor.util';
-import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
-
-interface UseAiTextEditPromptsOptions {
-  aiContext: ComputedRef<AiTextEditContext | undefined>;
-  ctaLocation: ComputedRef<string>;
-  isProcessing: Ref<boolean>;
-  promptText: Ref<string>;
-}
-
-export function useAiTextEditPrompts(options: UseAiTextEditPromptsOptions) {
-  const brandPageMakerStore = useBrandPageMakerStore();
-  const contentSettingsStore = useUiContentSettingsStore();
-  const eventTracker = useEventTracker();
-
-  // Get the actual field value from the content store
-  const currentFieldValue = computed(() => {
-    if (!options.aiContext.value) return '';
-
-    const content = contentSettingsStore.getContent(
-      options.aiContext.value.fieldId,
-    );
-
-    if (!content) return options.aiContext.value.fieldValue || '';
-
-    const fieldName = options.aiContext.value.fieldName;
-
-    // Parse the field path (e.g., "textItems.2.text" or "items.0.testimonial")
-    const parts = fieldName.split('.');
-    let value: any = content;
-
-    for (const part of parts) {
-      if (value === undefined || value === null) break;
-
-      value = value[part];
-    }
-
-    return typeof value === 'string'
-      ? value
-      : options.aiContext.value.fieldValue || '';
-  });
-
-  // Business context
-  const businessName = computed(() => brandPageMakerStore.businessName || '');
-  const industry = computed(() => brandPageMakerStore.industry || '');
-
-  // Formatted location for display
-  const formattedLocation = computed(() => {
-    if (!options.ctaLocation.value) return '';
-
-    const parts = options.ctaLocation.value.split('_');
-
-    if (parts[0] === 'testimonial' || parts[0] === 'text') {
-      return contentSettingsTr(`${parts[0]}DisplayName`);
-    }
-
-    // Use translations for both content type and field name
-    const contentTypeCamelCase = parts[0]
-      .split('-')
-      .map((word, index) =>
-        index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1),
-      )
-      .join('');
-
-    const fieldNameKey = parts.slice(1).join('_');
-
-    const contentType = contentSettingsTr(
-      `${contentTypeCamelCase}SectionDisplayName`,
-    );
-    const fieldName = contentSettingsTr(`${fieldNameKey}Title`);
-
-    return `${contentType} ${fieldName}`;
-  });
-
-  // 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
-  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;
-  };
-
-  // Prompt handlers
-  const onGenerateTextClick = () => {
-    const promptKey = buildPromptKey('generateTextPrompt');
-    const prompt = generateAiModalTr(promptKey, getPromptParams(true));
-
-    options.promptText.value = prompt;
-
-    eventTracker.sendWebsiteEvent({
-      eventName: EVENTS.WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT,
-      eventProps: {
-        cta_location: options.ctaLocation.value,
-        prompt: GENERATE_AI_SUGGESTED_PROMPT.GENERATE_TEXT,
-      },
-    });
-  };
-
-  const onImproveTextClick = () => {
-    const promptKey = buildPromptKey('improveTextPrompt');
-    const prompt = generateAiModalTr(promptKey, getPromptParams(false));
-
-    options.promptText.value = prompt;
-
-    eventTracker.sendWebsiteEvent({
-      eventName: EVENTS.WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT,
-      eventProps: {
-        cta_location: options.ctaLocation.value,
-        prompt: GENERATE_AI_SUGGESTED_PROMPT.IMPROVE_TEXT,
-      },
-    });
-  };
-
-  const onSpellCheckClick = () => {
-    const prompt = generateAiModalTr('spellCheckPrompt');
-
-    options.promptText.value = prompt;
-
-    eventTracker.sendWebsiteEvent({
-      eventName: EVENTS.WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT,
-      eventProps: {
-        cta_location: options.ctaLocation.value,
-        prompt: GENERATE_AI_SUGGESTED_PROMPT.SPELL_CHECK,
-      },
-    });
-  };
-
-  // Computed suggested prompts with handlers and disabled states
-  const suggestedPrompts = computed(() => {
-    // Get plain text from the current field value (strips HTML tags)
-    const plainText = getPlainTextFromRTE(currentFieldValue.value || '');
-    const hasText = plainText.trim().length > 0;
-
-    return [
-      {
-        id: 'generate-text',
-        label: generateAiModalTr('generateText', {
-          location: formattedLocation.value,
-        }),
-        disabled: options.isProcessing.value,
-        handler: onGenerateTextClick,
-      },
-      {
-        id: 'improve-text',
-        label: generateAiModalTr('improveText'),
-        disabled: !hasText || options.isProcessing.value,
-        handler: onImproveTextClick,
-      },
-      {
-        id: 'spell-check',
-        label: generateAiModalTr('spellCheck'),
-        disabled: !hasText || options.isProcessing.value,
-        handler: onSpellCheckClick,
-      },
-    ];
-  });
-
-  return {
-    suggestedPrompts,
-    formattedLocation,
-  };
-}

package/src/brand-page-maker/stores/ai-thread/ai-thread-store.ts

@@ -1,31 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import type { ThreadMessage } from '../../composables/ai-chat/useAiChat';
-
-const MAX_THREAD_MESSAGES = 40;
-
-export const useAiThreadStore = defineStore('aiThread', () => {
-  // Single global thread for all fields
-  const threadId = ref<string | null>(null);
-  const runId = ref<string | null>(null);
-  const messages = ref<ThreadMessage[]>([]);
-  const isProcessing = ref<boolean>(false);
-  const stopGeneration = ref<(() => void) | null>(null);
-
-  const addThreadItem = (item: ThreadMessage): void => {
-    messages.value.push(item);
-
-    if (messages.value.length > MAX_THREAD_MESSAGES) {
-      messages.value.splice(0, messages.value.length - MAX_THREAD_MESSAGES);
-    }
-  };
-
-  return {
-    threadId,
-    runId,
-    messages,
-    isProcessing,
-    stopGeneration,
-    addThreadItem,
-  };
-});

package/src/brand-page-maker/utils/mixpanel.util.ts

@@ -1,42 +0,0 @@
-import { GENERATE_AI_TEXT_CTA_LOCATIONS } from '../composables/useEventTracker';
-
-export const getCtaLocationFromFieldType = (
-  fieldType: string,
-  sectionType?: string,
-): string => {
-  if (fieldType === 'text') {
-    return GENERATE_AI_TEXT_CTA_LOCATIONS.TEXT_ITEM;
-  }
-
-  if (fieldType === 'testimonials') {
-    return GENERATE_AI_TEXT_CTA_LOCATIONS.TESTIMONIAL_ITEM;
-  }
-
-  if (sectionType === 'banner-section') {
-    if (fieldType === 'description') {
-      return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_DESCRIPTION;
-    }
-
-    if (fieldType === 'title') {
-      return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_TITLE;
-    }
-  }
-
-  if (sectionType === 'about-section') {
-    if (fieldType === 'title') {
-      return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_TITLE;
-    }
-
-    if (fieldType === 'paragraph') {
-      return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_PARAGRAPH;
-    }
-  }
-
-  // Fallback: try to match directly with field type
-  // This handles cases where fieldType might already be in the correct format
-  const matchingLocation = Object.values(GENERATE_AI_TEXT_CTA_LOCATIONS).find(
-    (location) => location === fieldType,
-  );
-
-  return matchingLocation || fieldType;
-};

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

@@ -1,114 +0,0 @@
-<template>
-  <div v-if="showButton">
-    <p
-      :title="generateText"
-      class="tw-text-xs tw-text-primary-500 tw-font-bold tw-cursor-pointer tw-flex tw-items-center tw-border-solid tw-border-primary-500 tw-border-2 tw-rounded-md tw-px-2 tw-py-1"
-      :class="{
-        'tw-uppercase': !props.isDesignCom,
-      }"
-      @click="onShowGenerateModal"
-    >
-      <Icon name="ai" class="tw-mr-1 tw-flex" />
-      {{ generateText }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Icon } from '@designcrowd/fe-shared-lib';
-import { commonTr } from '@src/composables/useTranslate';
-import {
-  useBrandPageContainerStore,
-  useBrandPageMakerUserStore,
-  useSnapshotStore,
-} from '@brand-page-maker/stores';
-import type { AbTestResult } from '@brand-page/models/brand-page-context.model';
-import { useUiSideBarStore } from '../../../side-bar/store';
-import { SIDE_BAR_TAB_NAMES } from '../../../../brand-page-maker/constants';
-import {
-  EVENTS,
-  useEventTracker,
-} from '@brand-page-maker/composables/useEventTracker';
-import type { TextStyleDeclaration } from '../../../../brand-page';
-
-interface AiTextContext {
-  fieldName: string;
-  maxChars?: number;
-  textStyle?: TextStyleDeclaration;
-  index?: number;
-}
-
-interface Props {
-  id: string;
-  existingText: string;
-  isDesignCom?: boolean;
-  captureSnapshotDelay?: number;
-  ctaLocation: string;
-  aiContext: AiTextContext;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isDesignCom: false,
-});
-
-const emit = defineEmits<{
-  'on-use-text': [text: string];
-  'on-use-style': [style: BrandPageCssStyle];
-  'capture-snapshot': [];
-}>();
-
-const brandPageContainerStore = useBrandPageContainerStore();
-const eventTracker = useEventTracker();
-const snapshotStore = useSnapshotStore();
-const userStore = useBrandPageMakerUserStore();
-const sideBarStore = useUiSideBarStore();
-
-const abTests = computed(() => brandPageContainerStore.abTests);
-
-const canUseAITextGenerator = computed(
-  () => userStore.features.canUseAITextGenerator,
-);
-
-const showButton = computed(() => {
-  const abTest = abTests.value
-    .bp_4964_ai_text_generation_improvement as unknown as
-    | AbTestResult
-    | undefined;
-  return canUseAITextGenerator.value && abTest?.isVariation;
-});
-
-const generateText = commonTr('generateText');
-
-const onShowGenerateModal = () => {
-  // Store the current field context for AI Text Edit
-  sideBarStore.setAiTextEditContext({
-    fieldValue: props.existingText,
-    fieldId: props.id,
-    fieldName: props.aiContext.fieldName,
-    contentType: props.ctaLocation,
-    maxChars: props.aiContext.maxChars,
-    textStyle: props.aiContext.textStyle,
-    index: props.aiContext.index,
-  });
-
-  // Open the AI Text Edit sidebar tab instead of modal
-  sideBarStore.setSelectedTabName({
-    tabName: SIDE_BAR_TAB_NAMES.AI_TEXT_EDIT,
-  });
-
-  eventTracker.sendWebsiteEvent({
-    eventName: EVENTS.WEBSITE_MAKER_AI_GENERATE_TEXT,
-    eventProps: {
-      cta_location: props.ctaLocation,
-      continuation: null,
-    },
-  });
-
-  snapshotStore.clearSnapshot();
-
-  setTimeout(() => {
-    emit('capture-snapshot');
-  }, 50);
-};
-</script>