@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/brand-page-maker/components/ai-text-edit/i18n/generate-ai.pt-BR.json

@@ -1,25 +1,5 @@
 {
   "aiModal": {
-    "generateTitle": "Gerar texto com IA",
-    "generateDescription": "O conteúdo é gerado por IA, pode precisar de alterações para melhorar a precisão",
-    "generatePlaceholder": "Descreva seu texto.",
-    "generationStopped": "A geração de texto parou. Inicie um novo prompt para continuar.",
-    "generateInputPlaceholder": "Digite o prompt para descrever o texto...",
-    "stopGeneration": "Parar de gerar",
-    "useText": "Usar texto",
-    "promptTooLong": "O prompt deve ter {{maxLength}} caracteres ou menos ({{currentLength}})",
-    "generateText": "Gerar {{ location }}",
-    "improveText": "Melhore meu texto",
-    "spellCheck": "Verificação Ortográfica",
-    "generateTextPrompt": "Escreva um {{fieldName}} cativante para {{businessName}}, uma empresa de {{industry}}. Torne-o amigável e convidativo.",
-    "generateTextPromptWithIndustry": "Crie um {{fieldName}} cativante para um negócio no setor de {{industry}}. O texto deve ser simpático e convidativo.",
-    "generateTextPromptWithBusinessName": "Crie um {{fieldName}} cativante para um {{businessName}}. O texto deve ser simpático e convidativo.",
-    "generateTextPromptSimple": "Crie um {{fieldName}} cativante. O texto deve ser simpático e convidativo.",
-    "improveTextPrompt": "Aprimore o texto do {{businessName}} para um negócio de {{industry}}. Ele deve soar natural, claro e profissional.",
-    "improveTextPromptWithIndustry": "Aprimore o texto para um negócio de {{industry}}. Ele deve soar natural, claro e profissional.",
-    "improveTextPromptWithBusinessName": "Aprimore o texto do {{businessName}}. Ele deve soar natural, claro e profissional.",
-    "improveTextPromptSimple": "Melhore este texto. Torne-o mais natural, claro e profissional.",
-    "spellCheckPrompt": "Verifique a ortografia e a gramática deste texto.",
     "stop": "Parar",
     "thinkingResponse": "Pensando em uma resposta..."
   }

package/src/brand-page-maker/components/ai-text-edit/i18n/generate-ai.pt-PT.json

@@ -1,25 +1,5 @@
 {
   "aiModal": {
-    "generateTitle": "Gerar Texto com IA",
-    "generateDescription": "O conteúdo é gerado por IA e pode precisar de edição para ser preciso",
-    "generatePlaceholder": "Descreva o seu texto.",
-    "generationStopped": "A geração de texto parou. Inicie um novo prompt para continuar.",
-    "generateInputPlaceholder": "Introduza o seu comando para descrever o texto...",
-    "stopGeneration": "Parar a geração",
-    "useText": "Utilizar texto",
-    "promptTooLong": "A mensagem tem de ter {{maxLength}} carateres ou menos ({{currentLength}})",
-    "generateText": "Gerar {{ location }}",
-    "improveText": "Melhore o seu texto",
-    "spellCheck": "Verificação Ortográfica",
-    "generateTextPrompt": "Escreva um {{fieldName}} cativante para {{businessName}}, uma empresa de {{industry}}. Escreva com um tom amigável e convidativo.",
-    "generateTextPromptWithIndustry": "Escreva um {{fieldName}} cativante para uma empresa na indústria de {{industry}}. Escreva com um tom amigável e convidativo.",
-    "generateTextPromptWithBusinessName": "Escreva um {{fieldName}} cativante para {{businessName}}. Escreva com um tom amigável e convidativo.",
-    "generateTextPromptSimple": "Escreva um {{fieldName}} cativante. Escreva com um tom amigável e convidativo.",
-    "improveTextPrompt": "Melhore este texto para {{businessName}}, uma empresa de {{industry}}. Faça com que soe mais natural, claro e profissional.",
-    "improveTextPromptWithIndustry": "Melhore este texto para uma empresa de {{industry}}. Faça com que soe mais natural, claro e profissional.",
-    "improveTextPromptWithBusinessName": "Melhore este texto para {{businessName}}. Faça com que soe mais natural, claro e profissional.",
-    "improveTextPromptSimple": "Melhore este texto. Faça com que soe mais natural, claro e profissional.",
-    "spellCheckPrompt": "Verifique a ortografia e a gramática deste texto.",
     "stop": "Parar",
     "thinkingResponse": "A pensar numa resposta..."
   }

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

@@ -73,7 +73,6 @@ onMounted(() => {
 </script>
 <style>
 .ai-container {
-  height: calc(100vh - 90px);
-  @apply tw-flex tw-flex-col tw--mx-5;
+  @apply tw-flex tw-flex-col tw--mx-5 tw-h-full tw-overflow-hidden;
 }
 </style>

package/src/brand-page-maker/components/ai-website-builder/i18n/ai-website-builder.de-DE.json

@@ -0,0 +1,3 @@
+{
+  "aiWebsiteBuilder": {}
+}

package/src/brand-page-maker/components/ai-website-builder/i18n/ai-website-builder.es-ES.json

@@ -0,0 +1,3 @@
+{
+  "aiWebsiteBuilder": {}
+}

package/src/brand-page-maker/components/ai-website-builder/i18n/ai-website-builder.fr-CA.json

@@ -0,0 +1,3 @@
+{
+  "aiWebsiteBuilder": {}
+}

package/src/brand-page-maker/components/ai-website-builder/i18n/ai-website-builder.fr-FR.json

@@ -0,0 +1,3 @@
+{
+  "aiWebsiteBuilder": {}
+}

package/src/brand-page-maker/components/ai-website-builder/i18n/ai-website-builder.json

@@ -0,0 +1,3 @@
+{
+  "aiWebsiteBuilder": {}
+}

package/src/brand-page-maker/components/ai-website-builder/i18n/ai-website-builder.pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "aiWebsiteBuilder": {}
+}

package/src/brand-page-maker/components/ai-website-builder/i18n/ai-website-builder.pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "aiWebsiteBuilder": {}
+}

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

@@ -79,10 +79,7 @@
                   {{ commonTr('loadingText') }}
                 </p>
               </div>
-              <AiActionButtons
-                :is-typing="true"
-                @stop-generation="onStopAiGeneration"
-              />
+              <AiActionButtons :is-typing="true" />
             </div>
           </div>
 
@@ -179,10 +176,9 @@ import { VIEWPORTS, BRAND_PAGE_TYPES } from '@brand-page';
 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, useAiWebsiteBuilderThreadStore } from '../../stores';
+import { useAiWebsiteBuilderThreadStore } from '../../stores';
 import { useEventTracker } from '../../composables/useEventTracker';
 
 export default {
@@ -191,7 +187,6 @@ export default {
     Loader,
     ActionBar,
     AdminBackgroundSettings,
-    AiTextEdit,
     AiWebsiteBuilder,
     AiActionButtons,
     BackgroundSettings: BrandPageBackgroundSettings,
@@ -223,18 +218,13 @@ export default {
   setup(props, context) {
     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 ||
-          aiWebsiteBuilderThreadStore.isProcessing,
-      ),
+      isAiProcessing: computed(() => aiWebsiteBuilderThreadStore.isProcessing),
       isBrandPageLoaded: computed(() => brandPageMakerStore.isBrandPageLoaded),
       eventTracker,
     };
@@ -248,21 +238,6 @@ export default {
       UI_DEVICE_MODES,
     };
   },
-  methods: {
-    onStopAiGeneration() {
-      this.eventTracker.sendAiStopGenerationEvent('ai_processing_modal');
-
-      const aiThreadStore = useAiThreadStore();
-      if (aiThreadStore.stopGeneration) {
-        aiThreadStore.stopGeneration();
-      }
-
-      const aiWebsiteBuilderThreadStore = useAiWebsiteBuilderThreadStore();
-      if (aiWebsiteBuilderThreadStore.stopGeneration) {
-        aiWebsiteBuilderThreadStore.stopGeneration();
-      }
-    },
-  },
 };
 </script>
 <style scoped>

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -90,7 +90,6 @@ export const userFeatures: UserFeatures = {
   canUseGettyVideos: false,
   canUseGoogleAdsense: false,
   googleAdsenseEnabled: false,
-  canUseAITextGenerator: true,
 };
 
 export const BRAND_PAGE: BrandPageData = {
@@ -2126,7 +2125,6 @@ export const USER_FEATURES: UIUserFeatures = Object.freeze({
   canUseGettyVideos: true,
   canUseGoogleAdsense: false,
   googleAdsenseEnabled: true,
-  canUseAITextGenerator: true,
 } as UIUserFeatures);
 
 export const INITIALISE_PAYLOAD: InitialisePayload = Object.freeze({

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

@@ -0,0 +1,229 @@
+import { describe, it, expect } from 'vitest';
+import {
+  pickErrorMessage,
+  pickWsErrorMessage,
+  buildSubmitErrorReport,
+  GENERIC_ERROR_MESSAGE,
+} from './aiErrorCopy';
+
+describe('pickErrorMessage (HTTP errors)', () => {
+  it('returns the generic message whenever a backend code is present', () => {
+    const error = {
+      response: { data: { code: 'INVALID_REQUEST', message: 'raw' } },
+    };
+
+    expect(pickErrorMessage(error)).toBe(GENERIC_ERROR_MESSAGE);
+  });
+
+  it('returns the generic message for any code, even unknown ones', () => {
+    const error = {
+      response: {
+        data: { code: 'UNKNOWN_CODE', message: 'specific server message' },
+      },
+    };
+
+    expect(pickErrorMessage(error)).toBe(GENERIC_ERROR_MESSAGE);
+  });
+
+  it('falls back to message when no code is present', () => {
+    const error = {
+      response: { data: { message: 'specific server message' } },
+    };
+
+    expect(pickErrorMessage(error)).toBe('specific server message');
+  });
+
+  it('falls back to legacy `error` field when code/message missing', () => {
+    const error = { response: { data: { error: 'legacy error string' } } };
+
+    expect(pickErrorMessage(error)).toBe('legacy error string');
+  });
+
+  it('returns the generic message when nothing usable is present', () => {
+    expect(pickErrorMessage(null)).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickErrorMessage(undefined)).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickErrorMessage({})).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickErrorMessage({ response: {} })).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickErrorMessage({ response: { data: {} } })).toBe(
+      GENERIC_ERROR_MESSAGE,
+    );
+  });
+
+  it('ignores empty strings in message and error', () => {
+    const error = { response: { data: { message: '', error: '' } } };
+
+    expect(pickErrorMessage(error)).toBe(GENERIC_ERROR_MESSAGE);
+  });
+
+  it('handles non-object inputs without throwing', () => {
+    expect(pickErrorMessage('string error')).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickErrorMessage(42)).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickErrorMessage(new Error('boom'))).toBe(GENERIC_ERROR_MESSAGE);
+  });
+});
+
+describe('pickWsErrorMessage (WebSocket build_error frames)', () => {
+  it('returns the generic message for BUILD_FAILED', () => {
+    const msg = {
+      type: 'build_error',
+      buildId: 'b1',
+      error: 'An unexpected error occurred during the build.',
+      code: 'BUILD_FAILED',
+      message: 'An unexpected error occurred during the build.',
+    };
+
+    expect(pickWsErrorMessage(msg)).toBe(GENERIC_ERROR_MESSAGE);
+  });
+
+  it('returns the generic message for BUILD_TIMEOUT', () => {
+    const msg = { code: 'BUILD_TIMEOUT', message: 'timed out' };
+
+    expect(pickWsErrorMessage(msg)).toBe(GENERIC_ERROR_MESSAGE);
+  });
+
+  it('returns the generic message for BUILD_CANCELLED', () => {
+    const msg = { code: 'BUILD_CANCELLED', error: 'restart' };
+
+    expect(pickWsErrorMessage(msg)).toBe(GENERIC_ERROR_MESSAGE);
+  });
+
+  it('falls back to legacy `error` field for old backend payloads', () => {
+    const msg = {
+      type: 'build_error',
+      buildId: 'b1',
+      error: 'An unexpected error occurred during the build.',
+    };
+
+    expect(pickWsErrorMessage(msg)).toBe(
+      'An unexpected error occurred during the build.',
+    );
+  });
+
+  it('returns generic when nothing usable is present', () => {
+    expect(pickWsErrorMessage(null)).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickWsErrorMessage(undefined)).toBe(GENERIC_ERROR_MESSAGE);
+    expect(pickWsErrorMessage({})).toBe(GENERIC_ERROR_MESSAGE);
+  });
+});
+
+describe('buildSubmitErrorReport', () => {
+  it('classifies a network failure (no response)', () => {
+    const error = Object.assign(new Error('Network Error'), {
+      code: 'ERR_NETWORK',
+    });
+    const report = buildSubmitErrorReport(error, { stage: 'submit' });
+
+    expect(report?.tags).toContain('feature:ai-website-builder');
+    expect(report?.tags).toContain('failure:network');
+    expect(report?.tags).toContain('stage:submit');
+    expect(report?.customData.status_code).toBeNull();
+    expect(report?.customData.axios_code).toBe('ERR_NETWORK');
+  });
+
+  it('classifies a 502 from a brandcrowd.net proxy as failure:proxy', () => {
+    const error = {
+      message: 'Bad gateway',
+      response: { status: 502, data: { error: 'gateway' } },
+      config: {
+        url: '/api/ai/thread/build',
+        baseURL: 'https://www.brandcrowd.net',
+      },
+    };
+    const report = buildSubmitErrorReport(error, { stage: 'submit' });
+
+    expect(report?.tags).toContain('failure:proxy');
+    expect(report?.customData.status_code).toBe(502);
+    expect(report?.customData.host).toBe('www.brandcrowd.net');
+  });
+
+  it('classifies a 502 from brandcrowd.net (no www) as failure:proxy', () => {
+    const error = {
+      message: 'Bad gateway',
+      response: { status: 502 },
+      config: {
+        url: '/api/ai/thread/build',
+        baseURL: 'https://brandcrowd.net',
+      },
+    };
+    const report = buildSubmitErrorReport(error, { stage: 'submit' });
+
+    expect(report?.tags).toContain('failure:proxy');
+  });
+
+  it('does NOT misclassify look-alike hosts as proxies', () => {
+    // Earlier regex `/brand(crowd|page)/i.test(host)` would match these as
+    // substrings — tightened pattern now requires the brand domain at the
+    // start of the host with a literal `.` boundary.
+    const lookalikes = [
+      'https://mybrandcrowdtest.com',
+      'https://brandpage123.example.com',
+      'https://api.brandcrowd-attacker.com',
+    ];
+
+    for (const baseURL of lookalikes) {
+      const error = {
+        message: 'Internal',
+        response: { status: 500 },
+        config: { url: '/x', baseURL },
+      };
+      const report = buildSubmitErrorReport(error, { stage: 'submit' });
+
+      expect(report?.tags, `host=${baseURL}`).not.toContain('failure:proxy');
+      expect(report?.tags, `host=${baseURL}`).toContain('failure:upstream');
+    }
+  });
+
+  it('classifies a 500 from ai-pipelines (non-proxy host) as failure:upstream', () => {
+    const error = {
+      message: 'Internal',
+      response: { status: 500 },
+      config: {
+        url: 'https://ai-pipelines-staging.designcrowd.ninja/api/assistant/thread/build',
+      },
+    };
+    const report = buildSubmitErrorReport(error, { stage: 'submit' });
+
+    expect(report?.tags).toContain('failure:upstream');
+    expect(report?.customData.status_code).toBe(500);
+  });
+
+  it('classifies a 400 as failure:client', () => {
+    const error = {
+      message: 'Bad request',
+      response: { status: 400, data: { code: 'INVALID_REQUEST' } },
+      config: { url: '/api/ai/thread/build' },
+    };
+    const report = buildSubmitErrorReport(error, { stage: 'submit' });
+
+    expect(report?.tags).toContain('failure:client');
+    expect(report?.customData.status_code).toBe(400);
+    expect(report?.customData.response_data).toEqual({
+      code: 'INVALID_REQUEST',
+    });
+  });
+
+  it('respects the stage tag for continue calls', () => {
+    const error = {
+      message: 'x',
+      response: { status: 500 },
+      config: { url: '/x' },
+    };
+    const report = buildSubmitErrorReport(error, { stage: 'continue' });
+
+    expect(report?.tags).toContain('stage:continue');
+  });
+
+  it('handles non-object errors without throwing', () => {
+    const report = buildSubmitErrorReport('string error', { stage: 'submit' });
+
+    expect(report?.tags).toContain('failure:unknown');
+    expect(report?.customData.raw).toBe('string error');
+  });
+
+  it('preserves the original Error instance when one is thrown', () => {
+    const original = new Error('original');
+    const report = buildSubmitErrorReport(original, { stage: 'submit' });
+
+    expect(report?.error).toBe(original);
+  });
+});

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

@@ -0,0 +1,164 @@
+// REL 1 Phase 1 / 1.5 — friendly chat copy keyed by the backend `code` field.
+//
+// Backend returns `{ error, code, message }` for known failure paths
+// (both HTTP responses and WebSocket build_error / server_error frames).
+// We look up the code first, then fall back to message → error → generic.
+// English-only for now; Phase 2 promotes this to proper i18n keys.
+
+export const GENERIC_ERROR_MESSAGE =
+  'Something went wrong while putting your website together. Could you try that again?';
+
+interface ErrorPayload {
+  code?: unknown;
+  message?: unknown;
+  error?: unknown;
+}
+
+function pickFromPayload(data: ErrorPayload | undefined | null): string {
+  if (!data || typeof data !== 'object') return GENERIC_ERROR_MESSAGE;
+
+  if (typeof data.code === 'string') {
+    return GENERIC_ERROR_MESSAGE;
+  }
+
+  if (typeof data.message === 'string' && data.message) {
+    return data.message;
+  }
+
+  if (typeof data.error === 'string' && data.error) {
+    return data.error;
+  }
+
+  return GENERIC_ERROR_MESSAGE;
+}
+
+/**
+ * Pick a friendly chat message from a thrown HTTP error.
+ *
+ * Reads `error.response.data.{code, message, error}` — the shape returned by
+ * the ai-pipelines REST endpoints when a request fails synchronously.
+ */
+export function pickErrorMessage(error: unknown): string {
+  if (typeof error !== 'object' || error === null) return GENERIC_ERROR_MESSAGE;
+
+  const data = (error as { response?: { data?: ErrorPayload } }).response?.data;
+
+  return pickFromPayload(data);
+}
+
+/**
+ * Pick a friendly chat message from a WebSocket error frame.
+ *
+ * Reads `msg.{code, message, error}` directly — the shape pushed by the
+ * ai-pipelines build_error / server_error WebSocket frames.
+ */
+export function pickWsErrorMessage(
+  msg: ErrorPayload | undefined | null,
+): string {
+  return pickFromPayload(msg);
+}
+
+// ---------------------------------------------------------------------------
+// Raygun reporting for the chat HTTP submit path
+// ---------------------------------------------------------------------------
+//
+// REL 1 item (4): when the frontend POST to ai-pipelines fails — at the
+// brandcrowd.net proxy, on the network, or inside ai-pipelines — we want
+// it captured in Raygun so we can see request-path failures separately
+// from pipeline failures.
+//
+// We classify the error by what happened so the Raygun tags tell a clear
+// story:
+//   - `failure:network`   → no response received (DNS, offline, CORS, abort)
+//   - `failure:proxy`     → 5xx from a proxy (e.g. brandcrowd.net 502/504)
+//   - `failure:upstream`  → 5xx from ai-pipelines itself
+//   - `failure:client`    → 4xx (validation / bad request)
+
+export interface RaygunReport {
+  error: Error;
+  tags: string[];
+  customData: Record<string, unknown>;
+}
+
+interface AxiosLikeError {
+  message?: string;
+  code?: string;
+  response?: { status?: number; data?: unknown };
+  config?: { url?: string; baseURL?: string };
+}
+
+const isObject = (v: unknown): v is Record<string, unknown> =>
+  typeof v === 'object' && v !== null;
+
+// Match the proxy domains exactly at the start of the host (with optional
+// `www.` prefix). The previous form `/brand(crowd|page)/i.test(host)` matched
+// any substring, so unrelated hosts like ``mybrandcrowdtest.com`` or
+// ``brandpage123.example.com`` would be misclassified as proxy failures.
+const PROXY_HOST_PATTERN = /^(?:www\.)?(?:brandcrowd|brandpage)\./i;
+
+const looksLikeProxy = (host: string | undefined): boolean => {
+  if (!host) return false;
+
+  return PROXY_HOST_PATTERN.test(host);
+};
+
+/**
+ * Build the Raygun payload for an error thrown during a chat submit POST.
+ *
+ * Returns null when the error is a normal cancellation (user clicked stop) —
+ * the caller must skip Raygun in that case.
+ */
+export function buildSubmitErrorReport(
+  error: unknown,
+  context: { stage: 'submit' | 'continue' },
+): RaygunReport | null {
+  if (!isObject(error)) {
+    return {
+      error: new Error('AI submit failed: non-error thrown'),
+      tags: ['feature:ai-website-builder', 'failure:unknown'],
+      customData: { stage: context.stage, raw: String(error) },
+    };
+  }
+
+  const e = error as AxiosLikeError;
+  const status = isObject(e.response) ? Number(e.response.status) : undefined;
+  const url = e.config?.url ?? '';
+  const baseURL = e.config?.baseURL ?? '';
+  const host = (() => {
+    try {
+      return new URL(url, baseURL || 'http://_').host;
+    } catch {
+      return baseURL || url;
+    }
+  })();
+
+  let failureTag = 'failure:unknown';
+
+  if (status === undefined) {
+    failureTag = 'failure:network';
+  } else if (status >= 500 && looksLikeProxy(host)) {
+    failureTag = 'failure:proxy';
+  } else if (status >= 500) {
+    failureTag = 'failure:upstream';
+  } else if (status >= 400) {
+    failureTag = 'failure:client';
+  }
+
+  const message =
+    e.message ||
+    `AI submit ${context.stage} failed (status=${status ?? 'none'})`;
+  const wrapped = error instanceof Error ? error : new Error(message);
+
+  return {
+    error: wrapped,
+    tags: ['feature:ai-website-builder', failureTag, `stage:${context.stage}`],
+    customData: {
+      stage: context.stage,
+      status_code: status ?? null,
+      axios_code: e.code ?? null,
+      host: host || null,
+      url: url || null,
+      response_data: isObject(e.response) ? e.response.data : null,
+    },
+  };
+}

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

@@ -0,0 +1,49 @@
+import type { ComputedRef, Ref } from 'vue';
+import { type PlanItem } from '../../../clients/websocket-gateway-client';
+
+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;
+  initialMessage?: string;
+  planItems?: PlanItem[];
+  completedItemIds?: 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 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>;
+    }[]
+  >;
+}

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

@@ -4,14 +4,23 @@ import {
   parseToolCalls,
   type ParsedToolCall,
 } from '../../../metadata-builder/parsers/ai-toolcall-parser';
+import type { UndoHandler } from '../../../metadata-builder/builders/undo-builder';
 import type { AiAssistantToolCall } from '../../../clients/ai-assistant-client';
 import type { Logger } from '../../../metadata-builder/logger';
+import type { EventTracker } from '../useEventTracker';
 
 export interface AiMetadataBuilderResult {
   model: BrandPageModel;
   results: {
     toolId: string;
     errors?: string[];
+    /**
+     * The frontend-assigned content id of the section this tool call
+     * created/updated, when the builder produced one. Used by the AI chat
+     * composable's vacant-slot tracker to anchor retried CREATE calls back
+     * to their planned slot via `move_before_content_id`.
+     */
+    contentId?: string;
   }[];
   parsedToolCalls: ParsedToolCall[];
 }
@@ -25,6 +34,16 @@ export function useAiMetadataBuilder(logger: Logger) {
     aiAssistantToolCall: AiAssistantToolCall[],
     options: {
       maxCharacters?: number;
+      /**
+       * Invoked by the UndoBuilder to resolve the pre-prompt snapshot.
+       * Required when the response includes an `undo` tool call.
+       */
+      undoHandler?: UndoHandler;
+      /**
+       * Optional tracker for AI-prompt-originated content events.
+       * Forwarded to executeToolCallsAsync, then to section builders.
+       */
+      eventTracker?: EventTracker;
     } = {},
   ): Promise<AiMetadataBuilderResult> => {
     try {
@@ -42,6 +61,7 @@ export function useAiMetadataBuilder(logger: Logger) {
           return {
             toolId: x.request.id,
             errors: x.errors,
+            contentId: x.contentId,
           };
         }),
       };