@designcrowd/library.brand-page 5.18.2 → 5.18.3-actionable-buttons-2

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

@@ -44,7 +44,9 @@ import type {
   ThreadMessage,
   TextThreadMessage,
   SendMessageOptions,
+  AgentAction,
 } from './types';
+import { partitionAiToolCalls } from './ui-actions';
 
 const BUILD_TIMEOUT_MS = 600000;
 
@@ -454,7 +456,11 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
   const callApiBuildAsync = async (
     userPrompt: string,
     userMessageId: string,
-  ): Promise<{ text: string | null; isError?: boolean }> => {
+  ): Promise<{
+    text: string | null;
+    isError?: boolean;
+    actions?: AgentAction[];
+  }> => {
     const connectionId = await ensureConnectedAsync();
     const wsClient = activeBuildWsClient!;
 
@@ -525,297 +531,323 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
         });
       }
 
-      return new Promise<{ text: string | null; isError?: boolean }>(
-        (resolve, reject) => {
-          let settled = false;
-          let retryCount = 0;
-          let lastAiMessage: string | null = null;
-          let handler: ((msg: WebSocketMessage) => void) | null = null;
-          // Vacant-slot queue scoped to this build session. Persists across
-          // retry rounds so a failed CREATE returns to its planned slot via
-          // a synthesised `move_before_content_id`.
-          const vacantSlots: VacantSlotMap = new Map();
-
-          const finishBuild = () => {
-            aiThreadStore.isBuildInProgress = false;
-            wsClient.setBuildActive(false);
-            wsClient.stopResponseHeartbeat();
-
-            if (handler) wsClient.offMessage(handler);
-          };
+      return new Promise<{
+        text: string | null;
+        isError?: boolean;
+        actions?: AgentAction[];
+      }>((resolve, reject) => {
+        let settled = false;
+        let retryCount = 0;
+        let lastAiMessage: string | null = null;
+        let lastActions: AgentAction[] | undefined;
+        let handler: ((msg: WebSocketMessage) => void) | null = null;
+        // Vacant-slot queue scoped to this build session. Persists across
+        // retry rounds so a failed CREATE returns to its planned slot via
+        // a synthesised `move_before_content_id`.
+        const vacantSlots: VacantSlotMap = new Map();
+
+        const finishBuild = () => {
+          aiThreadStore.isBuildInProgress = false;
+          wsClient.setBuildActive(false);
+          wsClient.stopResponseHeartbeat();
+
+          if (handler) wsClient.offMessage(handler);
+        };
 
-          const timeout = setTimeout(() => {
-            if (settled) return;
+        const timeout = setTimeout(() => {
+          if (settled) return;
 
-            settled = true;
-            finishBuild();
-            reject(new Error('Build timeout'));
-          }, BUILD_TIMEOUT_MS);
+          settled = true;
+          finishBuild();
+          reject(new Error('Build timeout'));
+        }, BUILD_TIMEOUT_MS);
 
-          handler = (msg: WebSocketMessage) => {
-            if (settled) return;
+        // Transition the build to "done" exactly once (idempotent). Returns
+        // false when already settled, so callers can early-return.
+        const markDone = (): boolean => {
+          if (settled) return false;
 
-            try {
-              if (msg.buildId !== aiThreadStore.buildId) return;
+          settled = true;
+          clearTimeout(timeout);
+          finishBuild();
 
-              if (isStopped.value) {
-                settled = true;
-                clearTimeout(timeout);
-                finishBuild();
-                resolve({ text: null });
+          return true;
+        };
 
-                return;
-              }
+        // The single terminal path. Every resolve goes through here, so "where
+        // does this Promise settle?" has one answer.
+        const settle = (result: {
+          text: string | null;
+          isError?: boolean;
+          actions?: AgentAction[];
+        }): void => {
+          if (markDone()) resolve(result);
+        };
 
-              if (msg.type === 'chat_started' && msg.message) {
-                withTypingMessage((m) => {
-                  m.initialMessage = msg.message;
-                });
+        // Streaming progress frames mutate the in-flight typing bubble and never
+        // settle the build. Returns true when `msg` was a progress frame.
+        const applyProgressUpdate = (msg: WebSocketMessage): boolean => {
+          if (msg.type === 'chat_started' && msg.message) {
+            withTypingMessage((m) => {
+              m.initialMessage = msg.message;
+            });
 
-                return;
-              }
+            return true;
+          }
 
-              if (msg.type === 'plan_announced' && msg.items) {
-                withTypingMessage((m) => {
-                  if (!m.planItems) m.planItems = msg.items as PlanItem[];
-                });
+          if (msg.type === 'plan_announced' && msg.items) {
+            withTypingMessage((m) => {
+              if (!m.planItems) m.planItems = msg.items as PlanItem[];
+            });
 
-                return;
-              }
+            return true;
+          }
 
-              if (msg.type === 'item_complete' && msg.itemId) {
-                const itemId = msg.itemId;
+          if (msg.type === 'item_complete' && msg.itemId) {
+            const itemId = msg.itemId;
 
-                withTypingMessage((m) => {
-                  if (!m.completedItemIds?.includes(itemId)) {
-                    m.completedItemIds = [
-                      ...(m.completedItemIds ?? []),
-                      itemId,
-                    ];
-                  }
-                });
-
-                return;
+            withTypingMessage((m) => {
+              if (!m.completedItemIds?.includes(itemId)) {
+                m.completedItemIds = [...(m.completedItemIds ?? []), itemId];
               }
+            });
 
-              if (msg.type === 'server_response') {
-                const toolCalls = (msg.toolCalls ||
-                  []) as AiAssistantToolCall[];
-                const aiResponse: AiAssistantResponse = {
-                  threadId: aiThreadStore.threadId || '',
-                  toolCalls,
-                  message: msg.message || null,
-                  type: 'tool_calls',
-                  totalPaidToolCalls: 0,
-                  timestamp: Date.now(),
-                };
-
-                (async () => {
-                  try {
-                    // No tool calls = build cycle complete (success, max retries, or no retryable sections)
-                    if (toolCalls.length === 0) {
-                      // Defence-in-depth: a server_response with no toolCalls AND
-                      // no message text is a degenerate response — it means the
-                      // backend graph reached END without producing anything
-                      // actionable. The server-side fix in stream_with_push now
-                      // converts this to a build_error frame, but if a future
-                      // regression slips through we must NOT show "Your website
-                      // has been updated" — that hides real failures from users
-                      // and from monitoring.
-                      const hasMeaningfulMessage = Boolean(
-                        aiResponse.message || lastAiMessage,
-                      );
-
-                      if (!hasMeaningfulMessage) {
-                        raygunUtil.safeSendRaygunError(
-                          new Error(
-                            'AI build server_response had empty toolCalls and empty message',
-                          ),
-                          {
-                            tags: [
-                              'feature:ai-website-builder',
-                              'failure:degenerate_server_response',
-                            ],
-                            customData: {
-                              build_id: aiThreadStore.buildId ?? null,
-                              thread_id: aiThreadStore.threadId ?? null,
-                            },
-                          },
-                        );
-                        settled = true;
-                        clearTimeout(timeout);
-                        finishBuild();
-                        resolve({
-                          text: 'Something went wrong while updating your website. Please try again.',
-                          isError: true,
-                        });
-
-                        return;
-                      }
-
-                      settled = true;
-                      clearTimeout(timeout);
-                      finishBuild();
-                      await snapshotStore.refreshSnapshotAsync();
-                      resolve({
-                        text: aiResponse.message || lastAiMessage || '',
-                      });
-
-                      return;
-                    }
-
-                    // Tool calls present — apply locally and submit results back
-                    const { toolResults, aiMessage } =
-                      await applyToolCallsAsync(
-                        aiResponse,
-                        userMessageId,
-                        vacantSlots,
-                      );
-
-                    lastAiMessage = aiMessage;
-
-                    // Submit all tool results (success + failure) so the AI pipeline
-                    // persists ToolMessages matching every tool_call in the conversation.
-                    const failedResults = toolResults.filter(
-                      (tr) => tr.success !== 'success',
-                    );
-
-                    aiLogger.log('tool submission for results', {
-                      total: toolResults.length,
-                      failed: failedResults.length,
-                      failedResults,
-                      retryCount,
-                    });
-
-                    const submitResult =
-                      await client.submitToolResultsBuildAsync(
-                        aiThreadStore.threadId!,
-                        {
-                          toolCalls: toolResults,
-                          agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
-                          connectionId,
-                          retryCount,
-                          userPlan,
-                        },
-                      );
-
-                    if (failedResults.length === 0) {
-                      settled = true;
-                      clearTimeout(timeout);
-                      finishBuild();
-                      resolve({
-                        text: aiMessage || 'Your website has been updated.',
-                      });
-
-                      return;
-                    }
-
-                    // Update buildId so the handler matches subsequent WS messages
-                    if (submitResult.buildId) {
-                      aiThreadStore.buildId = submitResult.buildId;
-                    }
-
-                    // eslint-disable-next-line no-plusplus
-                    retryCount++;
-                  } catch (err) {
-                    aiLogger.log('server_response apply error', { err });
-                    // Client-side apply failure (metadata builder, tool-call parser,
-                    // missing field, etc.) — server thinks the build succeeded but we
-                    // couldn't materialise the changes. Mark the chat bubble as an
-                    // error so the user sees the real outcome, and report to Raygun
-                    // so the failure is visible in monitoring (the server didn't see it).
-                    raygunUtil.safeSendRaygunError(
-                      err instanceof Error
-                        ? err
-                        : new Error('AI apply failed: non-Error thrown'),
-                      {
-                        tags: [
-                          'feature:ai-website-builder',
-                          'failure:apply_error',
-                          'stage:client_apply',
-                        ],
-                        customData: {
-                          thread_id: aiThreadStore.threadId ?? null,
-                          build_id: aiThreadStore.buildId ?? null,
-                        },
-                      },
-                    );
-                    settled = true;
-                    clearTimeout(timeout);
-                    finishBuild();
-                    resolve({
-                      text: "I couldn't apply those changes to your website. Please try again.",
-                      isError: true,
-                    });
-                  }
-                })();
-
-                return;
-              }
+            return true;
+          }
 
-              if (msg.type === 'server_error' || msg.type === 'build_error') {
-                settled = true;
-                clearTimeout(timeout);
-                finishBuild();
-
-                // Backend already reports the underlying pipeline failure to
-                // Raygun via its structured handler (stage:run_build /
-                // stage:section_builder / etc. with full Python traceback).
-                // We report the frontend's RECEIPT of the error frame as a
-                // separate signal — distinct tag, distinct grouping. This
-                // gives triangulation: both sides have entry → normal crash;
-                // frontend only → backend Raygun outage; backend only → WS
-                // frame didn't reach client (different bug shape).
-                const wsMsg = msg as {
-                  type: string;
-                  code?: string;
-                  message?: string;
-                  error?: string;
-                  buildId?: string;
-                };
+          return false;
+        };
 
+        // Apply one round of build tool calls: settle on completion/failure, or
+        // bump retryCount so the handler processes the next round's frame.
+        const processServerResponse = async (
+          aiResponse: AiAssistantResponse,
+        ): Promise<void> => {
+          const toolCalls = aiResponse.toolCalls ?? [];
+
+          try {
+            // No tool calls = build cycle complete (success, max retries, or no retryable sections).
+            if (toolCalls.length === 0) {
+              // Defence-in-depth: empty toolCalls AND empty message is a
+              // degenerate response (graph reached END producing nothing). Never
+              // show "Your website has been updated" — it hides real failures.
+              const hasMeaningfulMessage = Boolean(
+                aiResponse.message || lastAiMessage,
+              );
+
+              if (!hasMeaningfulMessage) {
                 raygunUtil.safeSendRaygunError(
                   new Error(
-                    `AI build ${wsMsg.type}: ${wsMsg.code ?? wsMsg.error ?? 'unknown'}`,
+                    'AI build server_response had empty toolCalls and empty message',
                   ),
                   {
                     tags: [
                       'feature:ai-website-builder',
-                      'failure:websocket_error_received',
-                      `frame_type:${wsMsg.type}`,
+                      'failure:degenerate_server_response',
                     ],
                     customData: {
-                      code: wsMsg.code ?? null,
-                      message: wsMsg.message ?? null,
-                      error: wsMsg.error ?? null,
-                      build_id: wsMsg.buildId ?? null,
+                      build_id: aiThreadStore.buildId ?? null,
                       thread_id: aiThreadStore.threadId ?? null,
                     },
                   },
                 );
-
-                resolve({ text: pickWsErrorMessage(msg), isError: true });
+                settle({
+                  text: 'Something went wrong while updating your website. Please try again.',
+                  isError: true,
+                });
 
                 return;
               }
-            } catch (err) {
-              aiLogger.log('Unexpected error in WS message handler', {
-                err,
-                type: msg.type,
+
+              // Mark settled BEFORE the await so concurrent frames are ignored.
+              if (!markDone()) return;
+
+              await snapshotStore.refreshSnapshotAsync();
+              resolve({
+                text: aiResponse.message || lastAiMessage || '',
+                actions: lastActions,
               });
 
-              if (!settled) {
-                settled = true;
-                clearTimeout(timeout);
-                finishBuild();
-                resolve({ text: 'An error occurred during the build.' });
-              }
+              return;
+            }
+
+            // Tool calls present — apply locally and submit results back.
+            const { toolResults, aiMessage } = await applyToolCallsAsync(
+              aiResponse,
+              userMessageId,
+              vacantSlots,
+            );
+
+            lastAiMessage = aiMessage;
+
+            // Submit all tool results (success + failure) so the AI pipeline
+            // persists ToolMessages matching every tool_call in the conversation.
+            const failedResults = toolResults.filter(
+              (tr) => tr.success !== 'success',
+            );
+
+            aiLogger.log('tool submission for results', {
+              total: toolResults.length,
+              failed: failedResults.length,
+              failedResults,
+              retryCount,
+            });
+
+            const submitResult = await client.submitToolResultsBuildAsync(
+              aiThreadStore.threadId!,
+              {
+                toolCalls: toolResults,
+                agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+                connectionId,
+                retryCount,
+                userPlan,
+              },
+            );
+
+            if (failedResults.length === 0) {
+              settle({
+                text: aiMessage || 'Your website has been updated.',
+                actions: lastActions,
+              });
+
+              return;
+            }
+
+            // Failed sections will retry: refresh buildId so the handler matches
+            // the next round's frames, and count the round.
+            if (submitResult.buildId) {
+              aiThreadStore.buildId = submitResult.buildId;
             }
+
+            retryCount += 1;
+          } catch (err) {
+            aiLogger.log('server_response apply error', { err });
+            // Client-side apply failure (metadata builder, tool-call parser,
+            // missing field, etc.) — the server thinks the build succeeded but we
+            // couldn't materialise the changes. Surface it and report to Raygun
+            // (the server didn't see this failure).
+            raygunUtil.safeSendRaygunError(
+              err instanceof Error
+                ? err
+                : new Error('AI apply failed: non-Error thrown'),
+              {
+                tags: [
+                  'feature:ai-website-builder',
+                  'failure:apply_error',
+                  'stage:client_apply',
+                ],
+                customData: {
+                  thread_id: aiThreadStore.threadId ?? null,
+                  build_id: aiThreadStore.buildId ?? null,
+                },
+              },
+            );
+            settle({
+              text: "I couldn't apply those changes to your website. Please try again.",
+              isError: true,
+            });
+          }
+        };
+
+        const handleBuildError = (msg: WebSocketMessage): void => {
+          if (!markDone()) return;
+
+          // Backend already reports the underlying pipeline failure to Raygun
+          // (with full traceback). We report the frontend's RECEIPT of the error
+          // frame as a separate signal — distinct tag/grouping — for triangulation:
+          // both sides → normal crash; frontend only → backend Raygun outage;
+          // backend only → WS frame didn't reach client.
+          const wsMsg = msg as {
+            type: string;
+            code?: string;
+            message?: string;
+            error?: string;
+            buildId?: string;
           };
 
-          wsClient.onMessage(handler);
-        },
-      );
+          raygunUtil.safeSendRaygunError(
+            new Error(
+              `AI build ${wsMsg.type}: ${wsMsg.code ?? wsMsg.error ?? 'unknown'}`,
+            ),
+            {
+              tags: [
+                'feature:ai-website-builder',
+                'failure:websocket_error_received',
+                `frame_type:${wsMsg.type}`,
+              ],
+              customData: {
+                code: wsMsg.code ?? null,
+                message: wsMsg.message ?? null,
+                error: wsMsg.error ?? null,
+                build_id: wsMsg.buildId ?? null,
+                thread_id: aiThreadStore.threadId ?? null,
+              },
+            },
+          );
+
+          resolve({ text: pickWsErrorMessage(msg), isError: true });
+        };
+
+        // Single dispatch point: ignore stale/already-settled frames, then route
+        // by frame kind. Progress frames update the bubble; server_response and
+        // error frames are the only ones that can settle the build.
+        handler = (msg: WebSocketMessage) => {
+          if (settled) return;
+
+          try {
+            if (msg.buildId !== aiThreadStore.buildId) return;
+
+            if (isStopped.value) {
+              settle({ text: null });
+
+              return;
+            }
+
+            if (applyProgressUpdate(msg)) return;
+
+            if (msg.type === 'server_response') {
+              // CTA buttons (e.g. Upgrade) ride in toolCalls but are presentation,
+              // not page edits. Split them out so only real mutations reach the
+              // metadata-builder and the tool-result submission — a UI action must
+              // never be answered with a tool result (it isn't in the agent's
+              // conversation), or the next turn on the thread fails.
+              const { mutationToolCalls, actions } = partitionAiToolCalls(
+                (msg.toolCalls || []) as AiAssistantToolCall[],
+              );
+
+              if (actions.length) lastActions = actions;
+
+              void processServerResponse({
+                threadId: aiThreadStore.threadId || '',
+                toolCalls: mutationToolCalls,
+                message: msg.message || null,
+                type: 'tool_calls',
+                totalPaidToolCalls: 0,
+                timestamp: Date.now(),
+              });
+
+              return;
+            }
+
+            if (msg.type === 'server_error' || msg.type === 'build_error') {
+              handleBuildError(msg);
+
+              return;
+            }
+          } catch (err) {
+            aiLogger.log('Unexpected error in WS message handler', {
+              err,
+              type: msg.type,
+            });
+            settle({
+              text: 'An error occurred during the build.',
+              isError: true,
+            });
+          }
+        };
+
+        wsClient.onMessage(handler);
+      });
     } catch (err) {
       aiThreadStore.isBuildInProgress = false;
       wsClient.setBuildActive(false);
@@ -896,6 +928,18 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
           if (result.isError) {
             threadItems.value[messageIndex].isError = true;
           }
+
+          // Attach agent-driven actions (e.g. upgrade CTA) only on successful
+          // (non-error) responses. Suppressed for premium users client-side as
+          // a defence-in-depth guard (server also vetoes via eligibility logic).
+          if (
+            !result.isError &&
+            result.actions?.length &&
+            !userStore.hasPremiumSubscription
+          ) {
+            (threadItems.value[messageIndex] as TextThreadMessage).actions =
+              result.actions;
+          }
         } else {
           threadItems.value[messageIndex].text =
             'Failed to apply changes. Please try again.';
@@ -997,6 +1041,11 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
               completedItemIds:
                 (msg as TextThreadMessage).completedItemIds ?? [],
             }),
+          ...(msg.type === 'text' &&
+            !msg.isTyping &&
+            (msg as TextThreadMessage).actions?.length && {
+              actions: (msg as TextThreadMessage).actions,
+            }),
         } as Record<string, unknown>,
       };
     });

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -99,6 +99,7 @@ export const UPGRADE_CTA_LOCATIONS = {
 
 export const AI_CTA_LOCATIONS = {
   AI_BUILDER_TAB: 'ai_builder_tab',
+  AI_BUILDER_CHAT_UPSELL: 'ai_builder_chat_upsell',
 };
 
 export const TRIGGER_TYPE = {

package/src/brand-page-maker/constants/i18n/constants.de-DE.json

@@ -12,6 +12,8 @@
     "modernDisplayName": "modern",
     "uniqueDisplayName": "einzigartig",
     "allFontStylesDisplayName": "Alle Schriftstile",
+    "searchFontsPlaceholder": "Schriftarten durchsuchen",
+    "noFontsFoundMessage": "Keine Schriftarten gefunden",
     "settingsSaveSuccessMessage": "Einstellungen wurden erfolgreich gespeichert"
   }
 }

package/src/brand-page-maker/constants/i18n/constants.es-ES.json

@@ -12,6 +12,8 @@
     "modernDisplayName": "moderna",
     "uniqueDisplayName": "única",
     "allFontStylesDisplayName": "Todos los estilos de fuente",
+    "searchFontsPlaceholder": "Busca fuentes",
+    "noFontsFoundMessage": "No se encontraron fuentes",
     "settingsSaveSuccessMessage": "La configuración se ha guardado correctamente"
   }
 }

package/src/brand-page-maker/constants/i18n/constants.fr-CA.json

@@ -12,6 +12,8 @@
     "modernDisplayName": "Moderne",
     "uniqueDisplayName": "Unique",
     "allFontStylesDisplayName": "Tous les styles de police",
+    "searchFontsPlaceholder": "Rechercher des polices",
+    "noFontsFoundMessage": "Aucune police trouvée",
     "settingsSaveSuccessMessage": "Paramètres enregistrés avec succès"
   }
 }

package/src/brand-page-maker/constants/i18n/constants.fr-FR.json

@@ -12,6 +12,8 @@
     "modernDisplayName": "Moderne",
     "uniqueDisplayName": "Unique",
     "allFontStylesDisplayName": "Tous les styles de police",
+    "searchFontsPlaceholder": "Rechercher des polices",
+    "noFontsFoundMessage": "Aucune police trouvée",
     "settingsSaveSuccessMessage": "Paramètres enregistrés avec succès"
   }
 }