@designcrowd/library.brand-page 5.17.4 → 5.17.5-ai-tab-1

package/lib/src/{CreatedOnBrandCrowd-de-de-C_NzyXvG.js → CreatedOnBrandCrowd-de-de-CtODijXU.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DL-13itP.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-DSmpdByg.js → CreatedOnBrandCrowd-en-us-CFOzipix.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DL-13itP.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-4O9ttd4y.js → CreatedOnBrandCrowd-es-es-Bed6cQwT.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DL-13itP.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DDr8rQHb.js → CreatedOnBrandCrowd-fr-ca-CDtut9SG.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DL-13itP.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DDr8rQHb.js → CreatedOnBrandCrowd-fr-fr-CDtut9SG.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DL-13itP.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BUTVQ17i.js → CreatedOnBrandCrowd-pt-br-BxubZ9Pn.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DL-13itP.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-BUTVQ17i.js → CreatedOnBrandCrowd-pt-pt-BxubZ9Pn.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DL-13itP.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-thkGl7gg.js → CreatedOnDcom-de-de-Bpi74lME.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DL-13itP.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DOgnHkVR.js → CreatedOnDcom-en-us-DcV-Kjz6.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DL-13itP.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-NyEB16vO.js → CreatedOnDcom-es-es-G_POK1Z1.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DL-13itP.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-Cd6WjWcu.js → CreatedOnDcom-fr-ca-B-6Lowfi.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DL-13itP.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-CDKX35U7.js → CreatedOnDcom-fr-fr-Cd3WjtRX.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DL-13itP.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-PbJzyRNp.js → CreatedOnDcom-pt-br-DuNWZ0KP.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-DL-13itP.js";
+import { _ as M } from "./lib-BBkLrEZM.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-tja7jglY.js → CreatedOnDcom-pt-pt-CcPfyNH6.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-DL-13itP.js";
+import { _ as M } from "./lib-BBkLrEZM.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

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

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

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

@@ -1183,6 +1183,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setBase64Snapshot(base64: string | null): void;
         setIsCapturing(isCapturing: boolean): void;
         clearSnapshot(): void;
+        registerCaptureCallback(callback: () => Promise<void>): void;
+        refreshSnapshotAsync(): Promise<void>;
     }>;
     captureSnapshot: (element: HTMLElement | null) => Promise<string | null>;
     videoStore: import("pinia").Store<"video", import("@brand-page-maker/stores").videoStoreState, {

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -200,6 +200,7 @@ export default defineComponent({
             document.body.classList.remove('sb-main-padded');
         }
         fontLoaderUtil.loadAllFonts();
+        this.snapshotStore.registerCaptureCallback(() => this.handleCaptureSnapshot());
         this.setUiScreenSizeModeBasedOnDeviceWidth();
         if (this.isBrandPageOrIsBrandContact) {
             this.brandPageMakerStore.setViewport({ viewport: VIEWPORTS.mobile });

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

@@ -1,6 +1,7 @@
 import { ref, computed, watch, nextTick, } from 'vue';
 import { getInstance as getAiAssistantClient, AI_ASSISTANT_AGENT_TYPES, buildWebsiteTextElementMessage, } 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';
@@ -22,24 +23,22 @@ export const createWelcomeMessage = (currentValue) => ({
         : 'What would you like to generate?',
     timestamp: new Date(),
 });
-const aiLogger = new Logger();
 export function useAiChat(options) {
     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;
-    const threadItems = ref(aiThreadStore.messages.length > 0
-        ? aiThreadStore.messages
-        : [createWelcomeMessage(options?.currentValue || '')]);
+    if (!hasStoredMessages) {
+        aiThreadStore.addThreadItem(createWelcomeMessage(options?.currentValue || ''));
+    }
+    const { messages: threadItems } = storeToRefs(aiThreadStore);
     const isProcessing = ref(false);
     watch(isProcessing, (newValue) => {
         aiThreadStore.isProcessing = newValue;
     });
-    watch(threadItems, (newMessages) => {
-        aiThreadStore.messages = newMessages;
-    }, { deep: true });
     const currentTypingMessageId = ref(null);
     const isStopped = ref(false);
     const generatedText = ref(null);
@@ -82,7 +81,7 @@ export function useAiChat(options) {
             };
         });
         updateResult.parsedToolCalls.forEach((toolCall) => {
-            const { message } = toolCall.arguments;
+            const message = toolCall.arguments.message;
             if (message) {
                 aiMessage = aiMessage ? `${aiMessage} ${message}` : message;
             }
@@ -90,6 +89,8 @@ export function useAiChat(options) {
         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,
@@ -245,7 +246,7 @@ export function useAiChat(options) {
                     text: text || '',
                     timestamp: new Date(),
                 };
-            threadItems.value.push(userMessage);
+            aiThreadStore.addThreadItem(userMessage);
             const agentMessageId = (Date.now() + 1).toString();
             currentTypingMessageId.value = agentMessageId;
             const agentMessage = {
@@ -256,7 +257,7 @@ export function useAiChat(options) {
                 isTyping: true,
                 timestamp: new Date(),
             };
-            threadItems.value.push(agentMessage);
+            aiThreadStore.addThreadItem(agentMessage);
             try {
                 aiLogger.log('sendMessageAsync', {
                     messageOptions,

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

@@ -11,7 +11,7 @@ export interface AiMetadataBuilderResult {
     parsedToolCalls: ParsedToolCall[];
 }
 export declare function useAiMetadataBuilder(logger: Logger): {
-    applyAiToolCallsAsync: (model: BrandPageModel, aiAssistantToolCall: AiAssistantToolCall[], options: {
+    applyAiToolCallsAsync: (model: BrandPageModel, aiAssistantToolCall: AiAssistantToolCall[], options?: {
         maxCharacters?: number;
     }) => Promise<AiMetadataBuilderResult>;
 };

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

@@ -1,18 +1,18 @@
-import { executeAiToolUseAsync } from '../../../metadata-builder/ai-metadata-executor';
-import { parseAiToolcall, } from '../../../metadata-builder/parsers/ai-toolcall-parser';
+import { executeToolCallsAsync } from '../../../metadata-builder/ai-metadata-executor';
+import { parseToolCalls, } from '../../../metadata-builder/parsers/ai-toolcall-parser';
 export function useAiMetadataBuilder(logger) {
     // Debug purpose
     window.aiLogger = logger;
-    const applyAiToolCallsAsync = async (model, aiAssistantToolCall, options) => {
+    const applyAiToolCallsAsync = async (model, aiAssistantToolCall, options = {}) => {
         try {
-            const requests = parseAiToolcall(aiAssistantToolCall);
-            const result = await executeAiToolUseAsync(model, requests, {
+            const parsed = parseToolCalls(aiAssistantToolCall);
+            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/lib/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.d.ts

@@ -0,0 +1,2 @@
+import type { UseAiChatResult } from './useAiChat';
+export declare function useAiWebsiteBuilderChat(): UseAiChatResult;

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

@@ -0,0 +1,258 @@
+import { ref, computed, watch, nextTick } from 'vue';
+import { getInstance as getAiAssistantClient, AI_ASSISTANT_AGENT_TYPES, buildWebsiteBuilderMessage, } 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';
+const MAX_TOOL_CALL_ITERATIONS = 5;
+const aiLogger = new Logger();
+export function useAiWebsiteBuilderChat() {
+    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(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(),
+            },
+        ]);
+    const isProcessing = ref(false);
+    watch(isProcessing, (newValue) => {
+        aiThreadStore.isProcessing = newValue;
+    });
+    watch(threadItems, (newMessages) => {
+        aiThreadStore.messages = newMessages;
+    }, { deep: true });
+    const currentTypingMessageId = ref(null);
+    const isStopped = ref(false);
+    const generatedText = ref(null);
+    const generatedStyle = ref(null);
+    const buildMessage = (userPrompt) => {
+        const minified = minifyBrandPageMetadata(brandPageMakerStore.brandPageData);
+        return buildWebsiteBuilderMessage(userPrompt, minified);
+    };
+    const applyToolCallsAsync = async (response) => {
+        let aiMessage = response.message || '';
+        const modelToUpdate = brandPageMakerStore.brandPageData;
+        const updateResult = await aiMetadataBuilder.applyAiToolCallsAsync(modelToUpdate, response.toolCalls || []);
+        const toolResults = 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;
+            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) => {
+        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) => {
+        generatedText.value = null;
+        generatedStyle.value = null;
+        const client = getAiAssistantClient();
+        let 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) => {
+        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) => {
+        const aiMessageResult = 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) => {
+        const { text, images } = messageOptions;
+        if (!text?.trim() && (!images || images.length === 0))
+            return;
+        isStopped.value = false;
+        isProcessing.value = true;
+        const userMessage = images
+            ? {
+                id: Date.now().toString(),
+                type: 'image',
+                role: 'user',
+                images,
+                text,
+                timestamp: new Date(),
+            }
+            : {
+                id: Date.now().toString(),
+                type: 'text',
+                role: 'user',
+                text: text || '',
+                timestamp: new Date(),
+            };
+        threadItems.value.push(userMessage);
+        const agentMessageId = (Date.now() + 1).toString();
+        currentTypingMessageId.value = agentMessageId;
+        const agentMessage = {
+            id: agentMessageId,
+            type: 'text',
+            role: 'agent',
+            text: '',
+            isTyping: true,
+            timestamp: new Date(),
+        };
+        threadItems.value.push(agentMessage);
+        try {
+            aiLogger.log('sendMessageAsync', { messageOptions });
+            const responseText = 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) {
+            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) => {
+        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,
+            },
+        }));
+    });
+    return {
+        threadItems,
+        isProcessing,
+        currentTypingMessageId,
+        generatedText,
+        generatedStyle,
+        sendMessageAsync,
+        deleteMessage,
+        stopGenerationAsync,
+        formattedMessages,
+    };
+}

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

@@ -10,5 +10,6 @@ export declare const SIDE_BAR_TAB_NAMES: {
     STYLE_SETTINGS: string;
     BRANDPAGE_SETTINGS: string;
     AI_TEXT_EDIT: string;
+    AI_WEBSITE_BUILDER: string;
 };
 export declare const DEFAULT_SIDE_BAR_TABS: () => SideBarTab[];

package/lib/src/brand-page-maker/constants/sidebar-constant.js

@@ -10,6 +10,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 = () => [
     {
@@ -42,6 +43,13 @@ export const DEFAULT_SIDE_BAR_TABS = () => [
         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`),