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

package/lib/src/{CreatedOnBrandCrowd-de-de-yFg0wq_8.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-DOfGX3z2.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-D4sUyR-U.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-DOfGX3z2.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-CjXHshc0.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-DOfGX3z2.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CtsyncLl.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-DOfGX3z2.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CtsyncLl.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-DOfGX3z2.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-D8Z-gS4q.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-DOfGX3z2.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-D8Z-gS4q.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-DOfGX3z2.js";
+import { _ as t } from "./lib-BBkLrEZM.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-k7a8-Akd.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-DOfGX3z2.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-Bh5mbVcr.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-DOfGX3z2.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-DkEBWtQn.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-DOfGX3z2.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-DcarvQ1r.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-DOfGX3z2.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-Cbe-yOPu.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-DOfGX3z2.js";
+import { _ as e } from "./lib-BBkLrEZM.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-DlWu_Kwc.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-DOfGX3z2.js";
+import { _ as M } from "./lib-BBkLrEZM.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-DZp9RWfH.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-DOfGX3z2.js";
+import { _ as M } from "./lib-BBkLrEZM.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/clients/brand-page.client.d.ts

@@ -1,4 +1,4 @@
-import type { CreateCartResult, CreateStripePaymentIntentResponse } from '../models';
+import type { CreateCartResult, CreateStripePaymentIntentResponse, StripeShippingDetails } from '../models';
 export interface FormResult {
     success: boolean;
     errMessage?: string;
@@ -31,6 +31,7 @@ declare const _default: {
         customerEmail: string;
         customerRequestDetails?: string | undefined;
         customerMessage?: string | undefined;
+        shippingDetails?: StripeShippingDetails | undefined;
     }) => Promise<CreateStripePaymentIntentResponse | null>;
 };
 export default _default;

package/lib/src/brand-page/clients/brand-page.client.js

@@ -99,6 +99,7 @@ const createStripePaymentIntent = async (request) => {
         customerEmail: request.customerEmail,
         customerRequestDetails: request.customerRequestDetails,
         customerMessage: request.customerMessage,
+        shipping: request.shippingDetails,
     }, {
         headers: {
             'Content-Type': 'application/json',

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/models/payment.model.d.ts

@@ -1,6 +1,47 @@
 import type { Content } from './content.model';
 import type { ProductModel } from './shop.model';
 import type { TextStyleDeclaration } from './styles.model';
+export declare const STRIPE_ADDRESS_LIMITS: {
+    readonly name: {
+        readonly min: 1;
+        readonly max: 350;
+    };
+    readonly line1: {
+        readonly min: 1;
+        readonly max: 200;
+    };
+    readonly line2: {
+        readonly min: 0;
+        readonly max: 200;
+    };
+    readonly city: {
+        readonly min: 0;
+        readonly max: 100;
+    };
+    readonly state: {
+        readonly min: 0;
+        readonly max: 100;
+    };
+    readonly postalCode: {
+        readonly min: 0;
+        readonly max: 20;
+    };
+    readonly country: {
+        readonly min: 2;
+        readonly max: 2;
+    };
+};
+export type StripeAddressField = keyof typeof STRIPE_ADDRESS_LIMITS;
+export interface StripeShippingDetails {
+    name: string;
+    line1: string;
+    line2?: string;
+    city?: string;
+    state?: string;
+    postalCode?: string;
+    country: string;
+    phone?: string;
+}
 export interface StripePaymentIntent {
     id: string;
     object: 'payment_intent';
@@ -98,6 +139,7 @@ export interface ShopContentConfig extends PaymentConfig {
     paymentOptionDisplayType: PaymentOptionDisplayType;
     paymentOptionImageType: PaymentOptionImageType;
     isCustomerRequestDetailsEnabled: boolean;
+    isShippingEnabled: boolean;
 }
 export interface ShopContent extends Content {
     type: 'shop-section';

package/lib/src/brand-page/models/payment.model.js

@@ -1,3 +1,12 @@
+export const STRIPE_ADDRESS_LIMITS = {
+    name: { min: 1, max: 350 },
+    line1: { min: 1, max: 200 },
+    line2: { min: 0, max: 200 },
+    city: { min: 0, max: 100 },
+    state: { min: 0, max: 100 },
+    postalCode: { min: 0, max: 20 },
+    country: { min: 2, max: 2 },
+};
 export const isStripePaymentIntent = (value) => {
     return (value &&
         typeof value === 'object' &&

package/lib/src/brand-page/utils/view-model.util.js

@@ -544,6 +544,7 @@ const mapToShopViewModel = (content, styles) => {
             ...content.fillColor,
         },
         isFullWidth: true,
+        isShippingEnabled: content.shopPaymentConfig?.isShippingEnabled ?? false,
     }, styles);
 };
 const mapToTestimonialSectionViewModel = (content, styles) => {

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

@@ -61,6 +61,7 @@ export interface RequestPaymentViewModel extends ContentViewModel, Omit<RequestP
 export interface ShopViewModel extends ContentViewModel, Omit<ShopContent, 'type'> {
     buttonStyles: ButtonStyles;
     isFullWidth: boolean;
+    isShippingEnabled: boolean;
 }
 export interface ContactFormViewModel extends ContentViewModel, Omit<ContactFormContent, 'type'> {
     buttonStyles: ButtonStyles;

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

@@ -1021,7 +1021,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             searchTerm: string | undefined;
         }): void;
         _setSelectedTab({ tabName }: {
-            tabName: "all" | "AI" | "categories";
+            tabName: "AI" | "all" | "categories";
         }): void;
         _setSelectedCategory({ categoryName, }: {
             categoryName: string | undefined;
@@ -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/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -1009,6 +1009,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
     }>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

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,
+    };
+}