@designcrowd/library.brand-page 5.17.6 → 5.17.7

package/src/brand-page/models/brand-page-context.model.ts

@@ -52,12 +52,14 @@ const AB_TEST_KEYS = {
     'bc-bp-4572-ai-text-generation-post-purchase',
   BP_4964_AI_TEXT_GENERATION_IMPROVEMENT:
     'bc-bp-4964-ai-text-improvement-post-purchase-on-website',
+  BP_5245_AI_WEBSITE_ASSISTANT: 'bc-bp-5245-ai-website-assistant',
 };
 
 export interface AbTest {
   bp_3926_freemium_watermark?: AbTestResult;
   bp_4572_ai_text_generation_post_purchase?: AbTestResult;
   bp_4964_ai_text_generation_improvement?: AbTestResult;
+  bp_5245_ai_website_assistant?: AbTestResult;
 }
 
 export const MEDIA_SIZES = {
@@ -119,9 +121,7 @@ export const getValueType = (
   };
 };
 
-export const getAbTestResults = (
-  abtestKeyValues: Record<string, string>,
-): AbTest => {
+export const getAbTestResults = (abtestKeyValues: AbTest): AbTest => {
   const abTests: AbTest = {};
 
   // AB Test for BP-3926 - Freemium Watermark Variation
@@ -151,5 +151,14 @@ export const getAbTestResults = (
     );
   }
 
+  // AB Test for BP-5245 - AI Website Assistant
+
+  if (abtestKeyValues[AB_TEST_KEYS.BP_5245_AI_WEBSITE_ASSISTANT]) {
+    abTests.bp_5245_ai_website_assistant = getValueType(
+      AB_TEST_KEYS.BP_5245_AI_WEBSITE_ASSISTANT,
+      abtestKeyValues[AB_TEST_KEYS.BP_5245_AI_WEBSITE_ASSISTANT],
+    );
+  }
+
   return abTests;
 };

package/src/brand-page/models/index.ts

@@ -447,6 +447,7 @@ export interface TextMediaItem extends ImageItem {
 
 export interface TextShapeItem extends TextMediaItem {
   colorReplacements: ColorReplacement[];
+  keepColor?: boolean;
   aspectRatio?: number | null;
 }
 

package/src/brand-page-maker/components/ai-website-builder/AiWebsiteBuilder.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="ai-container">
+    <div class="tw-px-5">
+      <SideBarSettingsHeader
+        title="AI Website Builder"
+        :show-back-button="true"
+        @on-back="onBack"
+      />
+    </div>
+    <AiChatbox
+      v-model="promptText"
+      :messages="formattedMessages"
+      :disabled="isProcessing"
+      class="tw-flex-1 tw-overflow-hidden tw-px-5"
+      @send="onSendMessage"
+      @stop-generation="onStopGeneration"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import SideBarSettingsHeader from '../../../shared/common/SideBarSettingsHeader.vue';
+import AiChatbox from '../ai-text-edit/AiChatbox.vue';
+import { useUiSideBarStore } from '../../../shared/side-bar/store';
+import { useSnapshotStore } from '../../stores';
+import { SIDE_BAR_TAB_NAMES } from '../../constants';
+import { useAiWebsiteBuilderChat } from '../../composables/ai-chat/useAiWebsiteBuilderChat';
+
+const sideBarStore = useUiSideBarStore();
+const snapshotStore = useSnapshotStore();
+
+const emit = defineEmits<{
+  back: [];
+  'capture-preview-snapshot': [];
+}>();
+
+const promptText = ref(
+  'Update banner title to "This is awesome" and add a contact form to a new page',
+);
+
+const {
+  isProcessing,
+  sendMessageAsync,
+  formattedMessages,
+  stopGenerationAsync,
+} = useAiWebsiteBuilderChat();
+
+const onBack = () => {
+  sideBarStore.setSelectedTabName({
+    tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+  });
+  emit('back');
+};
+
+const onSendMessage = async (text: string) => {
+  await sendMessageAsync({ text });
+};
+
+const onStopGeneration = async () => {
+  await stopGenerationAsync();
+};
+
+defineExpose({
+  stopGenerationAsync,
+});
+
+onMounted(() => {
+  snapshotStore.clearSnapshot();
+  setTimeout(() => {
+    emit('capture-preview-snapshot');
+  }, 50);
+});
+</script>
+<style>
+.ai-container {
+  height: calc(100vh - 90px);
+  @apply tw-flex tw-flex-col tw--mx-5;
+}
+</style>

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -296,6 +296,10 @@ export default defineComponent({
 
     fontLoaderUtil.loadAllFonts();
 
+    this.snapshotStore.registerCaptureCallback(() =>
+      this.handleCaptureSnapshot(),
+    );
+
     this.setUiScreenSizeModeBasedOnDeviceWidth();
 
     if (this.isBrandPageOrIsBrandContact) {

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -175,8 +175,9 @@ import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES } from '@shared/models';
 import { useLocalisedRouteStore } from '@brand-page-maker/stores/route/localised-route-store';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import AiTextEdit from '../ai-text-edit/AiTextEdit.vue';
+import AiWebsiteBuilder from '../ai-website-builder/AiWebsiteBuilder.vue';
 import AiActionButtons from '../ai-text-edit/AiActionButtons.vue';
-import { useAiThreadStore } from '../../stores';
+import { useAiThreadStore, useAiWebsiteBuilderThreadStore } from '../../stores';
 import { useEventTracker } from '../../composables/useEventTracker';
 
 export default {
@@ -186,6 +187,7 @@ export default {
     ActionBar,
     AdminBackgroundSettings,
     AiTextEdit,
+    AiWebsiteBuilder,
     AiActionButtons,
     BackgroundSettings: BrandPageBackgroundSettings,
     BrandPageSettings,
@@ -210,12 +212,17 @@ export default {
     const localisedRouteStore = useLocalisedRouteStore();
     const brandPageMakerStore = useBrandPageMakerStore();
     const aiThreadStore = useAiThreadStore();
+    const aiWebsiteBuilderThreadStore = useAiWebsiteBuilderThreadStore();
     const eventTracker = useEventTracker();
 
     return {
       ...BrandPageMakerMixin.setup(props, context),
       brandCrowdUrl: computed(() => localisedRouteStore.localisedBaseUrl),
-      isAiProcessing: computed(() => aiThreadStore.isProcessing),
+      isAiProcessing: computed(
+        () =>
+          aiThreadStore.isProcessing ||
+          aiWebsiteBuilderThreadStore.isProcessing,
+      ),
       isBrandPageLoaded: computed(() => brandPageMakerStore.isBrandPageLoaded),
       eventTracker,
     };

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

@@ -179,7 +179,7 @@ export function useAiChat(options: UseAiChatOptions): UseAiChatResult {
     );
 
     updateResult.parsedToolCalls.forEach((toolCall) => {
-      const { message } = toolCall.arguments;
+      const message = toolCall.arguments.message as string | undefined;
 
       if (message) {
         aiMessage = aiMessage ? `${aiMessage} ${message}` : message;
@@ -193,6 +193,9 @@ export function useAiChat(options: UseAiChatOptions): UseAiChatResult {
     // 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,

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

@@ -1,7 +1,7 @@
 import type { BrandPageModel } from 'src/lib';
-import { executeAiToolUseAsync } from '../../../metadata-builder/ai-metadata-executor';
+import { executeToolCallsAsync } from '../../../metadata-builder/ai-metadata-executor';
 import {
-  parseAiToolcall,
+  parseToolCalls,
   type ParsedToolCall,
 } from '../../../metadata-builder/parsers/ai-toolcall-parser';
 import type { AiAssistantToolCall } from '../../../clients/ai-assistant-client';
@@ -25,19 +25,19 @@ export function useAiMetadataBuilder(logger: Logger) {
     aiAssistantToolCall: AiAssistantToolCall[],
     options: {
       maxCharacters?: number;
-    },
+    } = {},
   ): Promise<AiMetadataBuilderResult> => {
     try {
-      const requests = parseAiToolcall(aiAssistantToolCall);
+      const parsed = parseToolCalls(aiAssistantToolCall);
 
-      const result = await executeAiToolUseAsync(model, requests, {
+      const result = await executeToolCallsAsync(model, parsed, {
         ...options,
         logger,
       });
 
       return {
         model: result.model,
-        parsedToolCalls: requests,
+        parsedToolCalls: parsed,
         results: result.results.map((x) => {
           return {
             toolId: x.request.id,

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

@@ -0,0 +1,363 @@
+import { ref, computed, watch, nextTick } from 'vue';
+import {
+  getInstance as getAiAssistantClient,
+  AI_ASSISTANT_AGENT_TYPES,
+  buildWebsiteBuilderMessage,
+  type AiAssistantResponse,
+  type AiAssistantToolResult,
+} from '../../../clients/ai-assistant-client';
+import { minifyBrandPageMetadata } from '../../../utils/minify-brand-page-metadata';
+import { useSnapshotStore, useAiWebsiteBuilderThreadStore } from '../../stores';
+import { useBrandPageMakerStore } from '../../stores';
+import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
+import { useAiMetadataBuilder } from './useAiMetadataBuilder';
+import { Logger } from '../../../metadata-builder/logger';
+import type {
+  UseAiChatResult,
+  ThreadMessage,
+  TextThreadMessage,
+  SendMessageOptions,
+} from './useAiChat';
+
+const MAX_TOOL_CALL_ITERATIONS = 5;
+
+const aiLogger = new Logger();
+
+export function useAiWebsiteBuilderChat(): UseAiChatResult {
+  const aiThreadStore = useAiWebsiteBuilderThreadStore();
+  const snapshotStore = useSnapshotStore();
+  const brandPageMakerStore = useBrandPageMakerStore();
+  const pageSettingsStore = useUiPageSettingsStore();
+  const aiMetadataBuilder = useAiMetadataBuilder(aiLogger);
+
+  const hasStoredMessages = aiThreadStore.messages.length > 0;
+  const threadItems = ref<ThreadMessage[]>(
+    aiThreadStore.messages.length > 0
+      ? aiThreadStore.messages
+      : [
+          {
+            id: '1',
+            type: 'text',
+            role: 'agent',
+            text: 'What changes would you like to make to your website?',
+            timestamp: new Date(),
+          } as TextThreadMessage,
+        ],
+  );
+  const isProcessing = ref(false);
+
+  watch(isProcessing, (newValue) => {
+    aiThreadStore.isProcessing = newValue;
+  });
+
+  watch(
+    threadItems,
+    (newMessages) => {
+      aiThreadStore.messages = newMessages;
+    },
+    { deep: true },
+  );
+
+  const currentTypingMessageId = ref<string | null>(null);
+  const isStopped = ref(false);
+  const generatedText = ref<string | null>(null);
+  const generatedStyle = ref<BrandPageCssStyle | null>(null);
+
+  const buildMessage = (userPrompt: string) => {
+    const minified = minifyBrandPageMetadata(brandPageMakerStore.brandPageData);
+
+    return buildWebsiteBuilderMessage(userPrompt, minified);
+  };
+
+  const applyToolCallsAsync = async (response: AiAssistantResponse) => {
+    let aiMessage: string | null = response.message || '';
+    const modelToUpdate = brandPageMakerStore.brandPageData;
+
+    const updateResult = await aiMetadataBuilder.applyAiToolCallsAsync(
+      modelToUpdate,
+      response.toolCalls || [],
+    );
+
+    const toolResults: AiAssistantToolResult[] = updateResult.results.map(
+      (x) => {
+        return {
+          toolId: x.toolId,
+          success: x.errors && x.errors.length > 0 ? 'failed' : 'success',
+        };
+      },
+    );
+
+    updateResult.parsedToolCalls.forEach((toolCall) => {
+      const args = toolCall.arguments as any;
+
+      if (args.message) {
+        aiMessage = aiMessage ? `${aiMessage} ${args.message}` : args.message;
+      }
+    });
+
+    console.log(
+      'updateResult.model',
+      JSON.parse(JSON.stringify(updateResult.model)),
+    );
+
+    await brandPageMakerStore.initialiseStoresByBrandPageModelAsync(
+      updateResult.model,
+    );
+
+    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_BUILDER,
+        websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
+      },
+    );
+
+    return response;
+  };
+
+  const callApiAsync = async (userPrompt: string): Promise<string | null> => {
+    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_BUILDER,
+      });
+
+      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_BUILDER,
+        },
+      );
+
+      aiAssistantResponse = response;
+    }
+
+    aiLogger.log('callApiAsync response', { aiAssistantResponse });
+
+    if (isStopped.value) return null;
+
+    const handledResponse = await handleAiResponseAsync(aiAssistantResponse);
+
+    return (
+      handledResponse.aiMessage ||
+      'I was unable to make the changes. Please try again.'
+    );
+  };
+
+  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) return { aiMessage: '' };
+
+      const nextResponse = await submitToolResults(toolResults);
+
+      aiLogger.log('handleToolResponseAsync submitToolResults', {
+        toolResults,
+        nextResponse,
+      });
+
+      if (!nextResponse) break;
+
+      const retryResult = await applyToolCallsAsync(nextResponse);
+
+      shouldContinue = retryResult.shouldContinue;
+      toolResults = retryResult.toolResults;
+      aiMessage = retryResult.aiMessage || aiMessage;
+      iterations += 1;
+    }
+
+    return { aiMessage };
+  };
+
+  const handleAiResponseAsync = async (
+    response: AiAssistantResponse,
+  ): Promise<{ aiMessage: string | null }> => {
+    const aiMessageResult: string | null = response.message || '';
+
+    if (response.toolCalls && response.toolCalls.length > 0) {
+      const toolResult = await handleToolResponseAsync(response);
+
+      // Todo: For now dont show tool result message as it is not functional
+      // aiMessageResult = toolResult.aiMessage || aiMessageResult;
+
+      aiLogger.log('handleAiResponseAsync toolResult', { toolResult });
+    }
+
+    return { aiMessage: aiMessageResult };
+  };
+
+  const sendMessageAsync = async (messageOptions: SendMessageOptions) => {
+    const { text, images } = messageOptions;
+
+    if (!text?.trim() && (!images || images.length === 0)) return;
+
+    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(),
+        };
+
+    threadItems.value.push(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(),
+    };
+
+    threadItems.value.push(agentMessage);
+
+    try {
+      aiLogger.log('sendMessageAsync', { messageOptions });
+
+      const responseText: string | null = await callApiAsync(text || '');
+
+      if (isStopped.value) return;
+
+      const messageIndex = threadItems.value.findIndex(
+        (msg) => msg.id === agentMessageId,
+      );
+
+      if (messageIndex !== -1) {
+        if (responseText) {
+          threadItems.value[messageIndex].text = responseText;
+          threadItems.value[messageIndex].isTyping = false;
+        } else {
+          threadItems.value[messageIndex].text =
+            'Failed to apply changes. 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;
+    }
+
+    console.log('aiLogger', aiLogger);
+  };
+
+  const deleteMessage = (messageId: string) => {
+    const index = threadItems.value.findIndex((msg) => msg.id === messageId);
+
+    if (index !== -1) {
+      threadItems.value.splice(index, 1);
+    }
+  };
+
+  const stopGenerationAsync = async () => {
+    isStopped.value = true;
+
+    if (currentTypingMessageId.value) {
+      deleteMessage(currentTypingMessageId.value);
+      currentTypingMessageId.value = null;
+    }
+
+    isProcessing.value = false;
+  };
+
+  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,
+      } as Record<string, unknown>,
+    }));
+  });
+
+  return {
+    threadItems,
+    isProcessing,
+    currentTypingMessageId,
+    generatedText,
+    generatedStyle,
+    sendMessageAsync,
+    deleteMessage,
+    stopGenerationAsync,
+    formattedMessages,
+  };
+}

package/src/brand-page-maker/constants/sidebar-constant.ts

@@ -12,6 +12,7 @@ export const SIDE_BAR_TAB_NAMES = {
   STYLE_SETTINGS: 'StyleSettings',
   BRANDPAGE_SETTINGS: 'BrandPageSettings',
   AI_TEXT_EDIT: 'AiTextEdit',
+  AI_WEBSITE_BUILDER: 'AiWebsiteBuilder',
 };
 
 export const DEFAULT_SIDE_BAR_TABS = (): SideBarTab[] => [
@@ -45,6 +46,13 @@ export const DEFAULT_SIDE_BAR_TABS = (): SideBarTab[] => [
     accessibleDisplayName: 'AI Text Edit',
     isVisible: false,
   },
+  {
+    name: SIDE_BAR_TAB_NAMES.AI_WEBSITE_BUILDER,
+    displayName: 'AI Builder',
+    iconName: 'ai',
+    accessibleDisplayName: 'AI Website Builder',
+    isVisible: true,
+  },
   {
     name: SIDE_BAR_TAB_NAMES.BACKGROUND_SETTINGS,
     displayName: constantsTr(`backgroundDisplayName`),

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

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useAiWebsiteBuilderThreadStore = defineStore(
+  'aiWebsiteBuilderThread',
+  () => {
+    const threadId = ref<string | null>(null);
+    const runId = ref<string | null>(null);
+    const messages = ref<any[]>([]);
+    const isProcessing = ref<boolean>(false);
+
+    return {
+      threadId,
+      runId,
+      messages,
+      isProcessing,
+    };
+  },
+);

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -22,6 +22,7 @@ import {
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
   getValueType,
+  type AbTest,
   type LogoContent,
 } from '@brand-page';
 import { isLogoContent } from '@brand-page/utils';
@@ -88,7 +89,7 @@ export interface BrandPageContainerState {
   eventButtonLocation?: string;
   websiteUpsellModalViewModel?: any;
   showPublishOptionModal?: boolean; // select an option modal on publish
-  abTests: Record<string, string>;
+  abTests: AbTest;
   isSubsequentPublish: boolean;
   isContextualUpgradeModalVisible: boolean;
   contextualUpgradeType: WebsiteContextUpgradeType | undefined;
@@ -241,6 +242,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       this.makerFonts = payload.makerFonts || [];
       this.showPublishOptionModal = payload.showPublishOptionModal;
       this.abTests = getAbTestResults(payload.abTests || {});
+
       this.isSubsequentPublish = payload.isSubsequentPublish;
       this.requestVerificationToken = payload.requestVerificationToken;
 

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -759,6 +759,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     async initialiseStoresByBrandPageModelAsync(
       brandPageModel: BrandPageModel,
     ) {
+      const pageNavigationStore = usePageNavigationStore();
+
+      pageNavigationStore.setNav({ nav: brandPageModel.nav });
+
       this.initialisePagesForCurrentPage({
         pages: brandPageModel.pages,
         sections: {

package/src/brand-page-maker/stores/index.ts

@@ -13,3 +13,4 @@ export * from './logo-store';
 export * from './video';
 export * from './snapshot/snapshot-store';
 export * from './ai-thread/ai-thread-store';
+export * from './ai-thread/ai-website-builder-thread-store';