@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/brand-page-maker/components/ai-text-edit/AiTextEdit.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="ai-container">
-    <div class="tw-px-5">
-      <SideBarSettingsHeader
-        title="AI Text Edit"
-        :show-back-button="true"
-        @on-back="onBack"
-      />
-    </div>
-    <AiChatbox
-      v-model="promptText"
-      :messages="formattedMessages"
-      :suggested-prompts="suggestedPrompts"
-      :disabled="isProcessing"
-      class="tw-flex-1 tw-overflow-hidden tw-px-5"
-      @send="onSendMessage"
-      @stop-generation="onStopGeneration"
-      @prompt-click="onPromptClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import SideBarSettingsHeader from '../../../shared/common/SideBarSettingsHeader.vue';
-import AiChatbox from './AiChatbox.vue';
-import { useUiSideBarStore } from '../../../shared/side-bar/store';
-import { useSnapshotStore, useAiThreadStore } from '../../stores';
-import { SIDE_BAR_TAB_NAMES } from '../../constants';
-import {
-  useAiChat,
-  createWelcomeMessage,
-} from '../../composables/ai-chat/useAiChat';
-import { useAiTextEditPrompts } from '../../composables/ai-chat/useAiTextEditPrompts';
-import {
-  GENERATE_TEXT_CONTINUATION_EVENTS,
-  useEventTracker,
-} from '../../composables/useEventTracker';
-
-const sideBarStore = useUiSideBarStore();
-const snapshotStore = useSnapshotStore();
-const eventTracker = useEventTracker();
-
-const emit = defineEmits<{
-  back: [];
-  'use-text': [text: string];
-  'capture-preview-snapshot': [];
-}>();
-
-const promptText = ref('');
-
-// Get the context from the sidebar store
-const aiContext = computed(() => sideBarStore.aiTextEditContext);
-
-// Computed cta location for event tracking
-const ctaLocation = computed(() => aiContext.value?.contentType || '');
-
-// Computed values that update reactively
-const currentValue = computed(() => aiContext.value?.fieldValue || '');
-
-// Use the AI chat composable
-const {
-  isProcessing,
-  sendMessageAsync,
-  formattedMessages,
-  stopGenerationAsync,
-} = useAiChat({
-  currentValue: currentValue.value,
-  fieldId: aiContext.value?.fieldId || '',
-  fieldName: aiContext.value?.fieldName || '',
-  contentType: aiContext.value?.contentType || '',
-  maxChars: aiContext.value?.maxChars,
-  textStyle: aiContext.value?.textStyle,
-});
-
-// Use the prompts composable for suggested prompts
-const { suggestedPrompts } = useAiTextEditPrompts({
-  aiContext,
-  ctaLocation,
-  isProcessing,
-  promptText,
-});
-
-const onBack = () => {
-  if (ctaLocation.value) {
-    eventTracker.sendGenerateTextContinuationEvent(
-      ctaLocation.value,
-      GENERATE_TEXT_CONTINUATION_EVENTS.EXIT,
-    );
-  }
-
-  sideBarStore.clearAiTextEditContext();
-  sideBarStore.setSelectedTabName({
-    tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
-  });
-  emit('back');
-};
-
-const onSendMessage = async (text: string) => {
-  eventTracker.sendAiSendPromptEvent(ctaLocation.value);
-  await sendMessageAsync({ text });
-};
-
-const onStopGeneration = async () => {
-  if (ctaLocation.value) {
-    eventTracker.sendAiStopGenerationEvent(ctaLocation.value);
-  }
-  await stopGenerationAsync();
-};
-
-const onPromptClick = (prompt: any) => {
-  if (prompt.handler) {
-    prompt.handler();
-  }
-};
-
-// Expose stopGeneration for parent component to call
-defineExpose({
-  stopGeneration: onStopGeneration,
-});
-
-onMounted(() => {
-  const aiThreadStore = useAiThreadStore();
-
-  // Only add a new welcome message if there are existing messages (conversation has started)
-  if (aiThreadStore.messages.length > 0) {
-    const newMessage = createWelcomeMessage(currentValue.value);
-    const lastMessage =
-      aiThreadStore.messages[aiThreadStore.messages.length - 1];
-
-    // Only add if the last message is different from the new welcome message
-    if (lastMessage.text !== newMessage.text) {
-      aiThreadStore.addThreadItem(newMessage);
-    }
-  }
-
-  snapshotStore.clearSnapshot();
-  setTimeout(() => {
-    emit('capture-preview-snapshot');
-  }, 50);
-});
-</script>
-<style>
-.ai-container {
-  height: calc(100dvh - (90px + 58px));
-  @apply tw-flex tw-flex-col tw--mx-5;
-}
-
-@screen lg {
-  .ai-container {
-    height: calc(100dvh - 90px);
-  }
-}
-</style>

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

@@ -1,562 +0,0 @@
-import {
-  ref,
-  computed,
-  watch,
-  nextTick,
-  type ComputedRef,
-  type Ref,
-} from 'vue';
-import {
-  getInstance as getAiAssistantClient,
-  AI_ASSISTANT_AGENT_TYPES,
-  buildWebsiteTextElementMessage,
-  type AiAssistantResponse,
-  type AiAssistantToolCall,
-  type AiAssistantToolResult,
-} from '../../../clients/ai-assistant-client';
-import { getCurrentLocale } from '../../../composables/useTranslate';
-import { storeToRefs } from 'pinia';
-import { useSnapshotStore, useAiThreadStore } from '../../stores';
-import { useBrandPageMakerStore } from '../../stores';
-import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
-import { useAiMetadataBuilder } from '../ai-chat/useAiMetadataBuilder';
-import { Logger } from '../../../metadata-builder/logger';
-
-export interface BaseThreadMessage {
-  id: string;
-  role: 'user' | 'agent';
-  isTyping?: boolean;
-  isError?: boolean;
-  timestamp: Date;
-  langChainUrl?: string;
-}
-
-export interface TextThreadMessage extends BaseThreadMessage {
-  type: 'text';
-  text: string;
-}
-
-export interface ImageThreadMessage extends BaseThreadMessage {
-  type: 'image';
-  images: { url: string; alt?: string }[];
-  text?: string;
-}
-
-export type ThreadMessage = TextThreadMessage | ImageThreadMessage;
-
-export interface SendMessageOptions {
-  text?: string;
-  images?: { url: string; alt?: string }[];
-}
-
-export interface UseAiChatOptions {
-  currentValue?: string;
-  fieldId: string;
-  fieldName: string;
-  contentType: string;
-  maxChars?: number;
-  textStyle?: BrandPageCssStyle;
-  onTextUpdate?: (text: string) => void;
-  onStyleUpdate?: (style: BrandPageCssStyle) => void;
-}
-
-export interface UseAiChatResult {
-  threadItems: Ref<ThreadMessage[]>;
-  isProcessing: Ref<boolean>;
-  currentTypingMessageId: Ref<string | null>;
-  generatedText: Ref<string | null>;
-  generatedStyle: Ref<BrandPageCssStyle | null>;
-  sendMessageAsync: (options: SendMessageOptions) => Promise<void>;
-  deleteMessage: (messageId: string) => void;
-  stopGenerationAsync: () => Promise<void>;
-  formattedMessages: ComputedRef<
-    {
-      type: string;
-      props: Record<string, unknown>;
-    }[]
-  >;
-}
-
-const MAX_TOOL_CALL_ITERATIONS = 5;
-
-const TEXT_DISPLAY_LIMIT = 150;
-
-const truncateText = (text: string): string => {
-  if (text.length <= TEXT_DISPLAY_LIMIT) return text;
-
-  return text.substring(0, TEXT_DISPLAY_LIMIT).trimEnd() + '...';
-};
-
-export const createWelcomeMessage = (
-  currentValue: string,
-): TextThreadMessage => ({
-  id: `welcome-${Date.now()}`,
-  type: 'text',
-  role: 'agent',
-  text: currentValue
-    ? `What changes would you like to make to the text?<br><br><strong>Current Text:</strong> "${truncateText(currentValue)}"`
-    : 'What would you like to generate?',
-  timestamp: new Date(),
-});
-
-export function useAiChat(options: UseAiChatOptions): UseAiChatResult {
-  const aiThreadStore = useAiThreadStore();
-  const snapshotStore = useSnapshotStore();
-  const brandPageMakerStore = useBrandPageMakerStore();
-  const pageSettingsStore = useUiPageSettingsStore();
-  const aiLogger = new Logger(!brandPageMakerStore.isProduction);
-  const aiMetadataBuilder = useAiMetadataBuilder(aiLogger);
-
-  const hasStoredMessages = aiThreadStore.messages.length > 0;
-
-  if (!hasStoredMessages) {
-    aiThreadStore.addThreadItem(
-      createWelcomeMessage(options?.currentValue || ''),
-    );
-  }
-
-  const { messages: threadItems } = storeToRefs(aiThreadStore);
-  const isProcessing = ref(false);
-
-  watch(isProcessing, (newValue) => {
-    aiThreadStore.isProcessing = newValue;
-  });
-
-  const currentTypingMessageId = ref<string | null>(null);
-  const isStopped = ref(false);
-  const generatedText = ref<string | null>(null);
-  const generatedStyle = ref<BrandPageCssStyle | null>(null);
-  const pendingToolCalls = ref<AiAssistantToolCall[]>([]);
-
-  // Sequential queue so the AI thread always sees message → toolCall → message → toolCall.
-  // Operations that were flagged as stopped are skipped when they reach the front of the queue.
-  let operationQueue: Promise<void> = Promise.resolve();
-
-  const enqueueOperationAsync = (fn: () => Promise<void>): Promise<void> => {
-    operationQueue = operationQueue.then(fn, fn);
-
-    return operationQueue;
-  };
-
-  const buildMessage = (userPrompt: string) => {
-    return buildWebsiteTextElementMessage({
-      pageId: pageSettingsStore.currentPage?.id || '',
-      contentType: options.contentType,
-      fieldName: options.fieldName,
-      contentId: options.fieldId,
-      businessName: brandPageMakerStore.businessName || undefined,
-      industry: brandPageMakerStore.industry || undefined,
-      locale: getCurrentLocale(),
-      maxChars: options.maxChars,
-      userPrompt,
-      metadata: {
-        text: options.currentValue || '',
-        style: options.textStyle,
-      },
-    });
-  };
-
-  const applyToolCallsAsync = async (response: AiAssistantResponse) => {
-    let aiMessage: string | null = response.message || '';
-
-    const modelToUpdate = brandPageMakerStore.brandPageData;
-
-    const updateResult = await aiMetadataBuilder.applyAiToolCallsAsync(
-      modelToUpdate,
-      response.toolCalls || [],
-      {
-        maxCharacters: options.maxChars,
-      },
-    );
-
-    const toolResults: AiAssistantToolResult[] = updateResult.results.map(
-      (x) => {
-        return {
-          toolId: x.toolId,
-          success:
-            x.errors && x.errors.length > 0 ? x.errors.join(',') : 'success',
-        };
-      },
-    );
-
-    updateResult.parsedToolCalls.forEach((toolCall) => {
-      const message = toolCall.arguments.message as string | undefined;
-
-      if (message) {
-        aiMessage = aiMessage ? `${aiMessage} ${message}` : message;
-      }
-    });
-
-    await brandPageMakerStore.initialiseStoresByBrandPageModelAsync(
-      updateResult.model,
-    );
-
-    // Allow Vue to process reactive updates
-    await nextTick();
-
-    // Re-capture snapshot so subsequent messages reflect the updated page
-    await snapshotStore.refreshSnapshotAsync();
-
-    return {
-      shouldContinue: toolResults.length > 0 && aiThreadStore.runId !== null,
-      toolResults,
-      aiMessage,
-    };
-  };
-
-  const submitToolResults = async (toolResults: AiAssistantToolResult[]) => {
-    if (!aiThreadStore.threadId || !aiThreadStore.runId || !toolResults.length)
-      return null;
-
-    const client = getAiAssistantClient();
-    const { response } = await client.submitWebsiteToolCallOutputAsync(
-      aiThreadStore.threadId,
-      {
-        runId: aiThreadStore.runId,
-        toolCalls: toolResults,
-        agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_TEXT_ELEMENT,
-        websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-      },
-    );
-
-    return response;
-  };
-
-  /**
-   * Submit cancellation results for any pending tool calls so the AI run
-   * does not remain stuck in a "requires_action" state.
-   */
-  const submitCancelledToolCallsAsync = async (): Promise<void> => {
-    const toolCalls = pendingToolCalls.value;
-
-    if (
-      toolCalls.length === 0 ||
-      !aiThreadStore.threadId ||
-      !aiThreadStore.runId
-    ) {
-      return;
-    }
-
-    const cancelledResults: AiAssistantToolResult[] = toolCalls.map((tc) => ({
-      toolId: tc.toolId,
-      success: 'success', // Mark as success to prevent retries, even though the tool call was not completed
-    }));
-
-    pendingToolCalls.value = [];
-
-    try {
-      const client = getAiAssistantClient();
-
-      await client.submitWebsiteToolCallOutputAsync(aiThreadStore.threadId, {
-        runId: aiThreadStore.runId,
-        toolCalls: cancelledResults,
-        agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_TEXT_ELEMENT,
-      });
-    } catch {
-      // Best-effort cancellation – silently ignore submission failures
-    }
-  };
-
-  const callApiAsync = async (
-    userPrompt: string,
-  ): Promise<{ text: string | null; langChainUrl?: string }> => {
-    generatedText.value = null;
-    generatedStyle.value = null;
-
-    const client = getAiAssistantClient();
-
-    let aiAssistantResponse: AiAssistantResponse = {} as AiAssistantResponse;
-
-    if (!aiThreadStore.threadId) {
-      const { response } = await client.createWebsiteThreadAndSendMessageAsync({
-        message: buildMessage(userPrompt || ''),
-        websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-        agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_TEXT_ELEMENT,
-      });
-
-      aiAssistantResponse = response;
-
-      aiThreadStore.threadId = response.threadId;
-      aiThreadStore.runId = response.runId || null;
-    } else {
-      const { response } = await client.sendWebsiteMessageAsync(
-        aiThreadStore.threadId!,
-        {
-          message: buildMessage(userPrompt),
-          websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-          agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_TEXT_ELEMENT,
-        },
-      );
-
-      aiAssistantResponse = response;
-    }
-
-    aiLogger.log('callApiAsync response', {
-      aiAssistantResponse,
-    });
-
-    if (
-      aiAssistantResponse.toolCalls &&
-      aiAssistantResponse.toolCalls.length > 0
-    ) {
-      pendingToolCalls.value = aiAssistantResponse.toolCalls;
-    }
-
-    if (isStopped.value) {
-      await submitCancelledToolCallsAsync();
-
-      return { text: null };
-    }
-
-    const handledResponse = await handleAiResponseAsync(aiAssistantResponse);
-
-    return {
-      text:
-        handledResponse.aiMessage ||
-        'I was unable to generate text. Please try again.',
-      langChainUrl: aiAssistantResponse.langChainUrl,
-    };
-  };
-
-  const handleToolResponseAsync = async (
-    response: AiAssistantResponse,
-  ): Promise<{
-    aiMessage: string | null;
-  }> => {
-    let { shouldContinue, toolResults, aiMessage } =
-      await applyToolCallsAsync(response);
-
-    let iterations = 0;
-
-    while (shouldContinue && iterations < MAX_TOOL_CALL_ITERATIONS) {
-      if (isStopped.value) {
-        await submitCancelledToolCallsAsync();
-
-        return { aiMessage: '' };
-      }
-
-      const nextResponse = await submitToolResults(toolResults);
-
-      pendingToolCalls.value = []; // Cleared after successful submission
-
-      aiLogger.log('handleToolResponseAsync submitToolResults', {
-        toolResults,
-        nextResponse,
-      });
-
-      if (!nextResponse) break;
-
-      // Track new pending tool calls from the follow-up response
-      if (nextResponse.toolCalls && nextResponse.toolCalls.length > 0) {
-        pendingToolCalls.value = nextResponse.toolCalls;
-      }
-
-      if (isStopped.value) {
-        await submitCancelledToolCallsAsync();
-
-        return { aiMessage: '' };
-      }
-
-      const retryResult = await applyToolCallsAsync(nextResponse);
-
-      shouldContinue = retryResult.shouldContinue;
-      toolResults = retryResult.toolResults;
-      aiMessage = retryResult.aiMessage || aiMessage;
-      iterations += 1;
-    }
-
-    pendingToolCalls.value = [];
-
-    return {
-      aiMessage,
-    };
-  };
-
-  const handleAiResponseAsync = async (
-    response: AiAssistantResponse,
-  ): Promise<{
-    aiMessage: string | null;
-  }> => {
-    let aiMessageResult: string | null = response.message || '';
-
-    if (response.toolCalls && response.toolCalls.length > 0) {
-      const toolResult = await handleToolResponseAsync(response);
-
-      aiMessageResult = toolResult.aiMessage || aiMessageResult;
-
-      aiLogger.log('handleAiResponseAsync toolResult', {
-        toolResult,
-      });
-    }
-
-    return {
-      aiMessage: aiMessageResult,
-    };
-  };
-
-  const sendMessageAsync = async (
-    messageOptions: SendMessageOptions,
-  ): Promise<void> => {
-    const { text, images } = messageOptions;
-
-    if (!text?.trim() && (!images || images.length === 0)) return;
-
-    await enqueueOperationAsync(async () => {
-      isStopped.value = false;
-      isProcessing.value = true;
-
-      const userMessage: ThreadMessage = images
-        ? {
-            id: Date.now().toString(),
-            type: 'image' as const,
-            role: 'user' as const,
-            images,
-            text,
-            timestamp: new Date(),
-          }
-        : {
-            id: Date.now().toString(),
-            type: 'text' as const,
-            role: 'user' as const,
-            text: text || '',
-            timestamp: new Date(),
-          };
-
-      aiThreadStore.addThreadItem(userMessage);
-
-      const agentMessageId = (Date.now() + 1).toString();
-
-      currentTypingMessageId.value = agentMessageId;
-      const agentMessage: TextThreadMessage = {
-        id: agentMessageId,
-        type: 'text' as const,
-        role: 'agent' as const,
-        text: '',
-        isTyping: true,
-        timestamp: new Date(),
-      };
-
-      aiThreadStore.addThreadItem(agentMessage);
-
-      try {
-        aiLogger.startGroup();
-        aiLogger.log('sendMessageAsync', {
-          messageOptions,
-        });
-
-        const apiResult = await callApiAsync(text || '');
-
-        if (isStopped.value) return;
-
-        const messageIndex = threadItems.value.findIndex(
-          (msg) => msg.id === agentMessageId,
-        );
-
-        if (messageIndex !== -1) {
-          if (apiResult.text) {
-            threadItems.value[messageIndex].text = apiResult.text;
-            threadItems.value[messageIndex].isTyping = false;
-            threadItems.value[messageIndex].langChainUrl =
-              apiResult.langChainUrl;
-
-            if (generatedText.value && options.onTextUpdate) {
-              options.onTextUpdate(generatedText.value);
-            }
-
-            if (generatedStyle.value && options.onStyleUpdate) {
-              options.onStyleUpdate(generatedStyle.value);
-            }
-          } else {
-            threadItems.value[messageIndex].text =
-              'Failed to generate text. Please try again.';
-            threadItems.value[messageIndex].isTyping = false;
-            threadItems.value[messageIndex].isError = true;
-          }
-        }
-      } catch (error: any) {
-        if (isStopped.value) return;
-
-        const messageIndex = threadItems.value.findIndex(
-          (msg) => msg.id === agentMessageId,
-        );
-
-        if (messageIndex !== -1) {
-          threadItems.value[messageIndex].text =
-            error?.response?.data?.error ||
-            'An error occurred. Please try again.';
-          threadItems.value[messageIndex].isTyping = false;
-          threadItems.value[messageIndex].isError = true;
-        }
-      } finally {
-        currentTypingMessageId.value = null;
-        isProcessing.value = false;
-      }
-    });
-  };
-
-  const deleteMessage = (messageId: string) => {
-    const index = threadItems.value.findIndex((msg) => msg.id === messageId);
-
-    if (index !== -1) {
-      threadItems.value.splice(index, 1);
-    }
-  };
-
-  /**
-   * Stop generation, remove the typing message, and submit cancellation
-   * for any pending tool calls so the AI run does not throw errors.
-   */
-  const stopGenerationAsync = async (): Promise<void> => {
-    // Set the flag immediately so any in-flight operation can check it
-    isStopped.value = true;
-
-    if (currentTypingMessageId.value) {
-      deleteMessage(currentTypingMessageId.value);
-      currentTypingMessageId.value = null;
-    }
-
-    isProcessing.value = false;
-
-    // Enqueue cancellation — runs once the in-flight operation bails out via isStopped checks
-    await enqueueOperationAsync(async () => {
-      await submitCancelledToolCallsAsync();
-    });
-  };
-
-  // Register stopGenerationAsync in the store so parent components
-  // (e.g. BrandPageMaker overlay) can call it without needing a $ref to AiTextEdit
-  aiThreadStore.stopGeneration = stopGenerationAsync;
-
-  const formattedMessages = computed(() => {
-    const initialMessageCount = hasStoredMessages
-      ? aiThreadStore.messages.length
-      : 1;
-
-    return threadItems.value.map((msg, index) => ({
-      type: msg.type,
-      props: {
-        ...(msg.type === 'text' && { text: msg.text }),
-        ...(msg.type === 'image' && { images: msg.images, text: msg.text }),
-        isUser: msg.role === 'user',
-        isAi: msg.role === 'agent',
-        showIcon: msg.role === 'agent',
-        isTyping: msg.isTyping,
-        isResponse: index >= 1,
-        disableAnimation: index < initialMessageCount,
-        langChainUrl: msg.langChainUrl,
-      } as Record<string, unknown>,
-    }));
-  });
-
-  return {
-    threadItems,
-    isProcessing,
-    currentTypingMessageId,
-    generatedText,
-    generatedStyle,
-    sendMessageAsync,
-    deleteMessage,
-    stopGenerationAsync,
-    formattedMessages,
-  };
-}