create-nextblock 0.12.16 → 0.13.2

package/templates/nextblock-template/app/cms/components/CortexGlobalAgentChat.tsx

@@ -84,6 +84,9 @@ type CortexAgentStreamEvent =
       message: string;
       type: "error";
     }
+  | {
+      type: "status";
+    }
   | {
       type: "finish";
     };
@@ -92,7 +95,10 @@ const LEGACY_STORAGE_KEY = "nextblock-cortex-global-agent-chat";
 const THREADS_STORAGE_KEY = "nextblock-cortex-global-agent-chat-threads";
 const MAX_STORED_MESSAGES = 40;
 const MAX_STORED_THREADS = 20;
-const REQUEST_TIMEOUT_MS = 90000;
+// Idle timeout: the request is aborted only after this many ms with NO stream
+// activity, so a long multi-section build that keeps streaming tool/text events
+// is not killed at a fixed wall-clock deadline.
+const IDLE_TIMEOUT_MS = 90000;
 const CORTEX_AI_SETTINGS_CHANGED_EVENT = "nextblock:cortex-ai-settings-changed";
 const MUTATING_TOOL_NAMES = new Set([
   "create_cms_page",
@@ -105,6 +111,9 @@ const MUTATING_TOOL_NAMES = new Set([
   "execute_database_mutation",
   "execute_cms_action_plan",
   "insert_content_block",
+  "rewrite_page_draft",
+  "set_content_images",
+  "translate_page",
   "update_cms_item_field",
   "update_current_cms_fields",
   "update_content_block",
@@ -123,6 +132,22 @@ const TOOL_COPY: Record<string, { done: string; running: string }> = {
     done: "Documentation searched",
     running: "Searching documentation...",
   },
+  fetch_url_content: {
+    done: "Website content read",
+    running: "Reading the website...",
+  },
+  rewrite_page_draft: {
+    done: "Draft rewrite staged",
+    running: "Staging a live draft...",
+  },
+  translate_page: {
+    done: "Translation created",
+    running: "Creating the translation...",
+  },
+  set_content_images: {
+    done: "Images updated",
+    running: "Setting images...",
+  },
   create_cms_page: {
     done: "Page created",
     running: "Preparing page...",
@@ -875,23 +900,9 @@ export function CortexGlobalAgentChat() {
   const canSubmit = useMemo(() => input.trim().length > 0 && !isStreaming, [input, isStreaming]);
   const fallbackPageContext = useMemo(() => buildFallbackPageContext(pathname), [pathname]);
   const pageContext = cortexAiPageContext?.pageContext ?? fallbackPageContext;
-  const hasSuccessfulMutationActivity = useMemo(
-    () =>
-      toolActivities.some(
-        (activity) =>
-          activity.status === "success" &&
-          isMutatingToolName(activity.name) &&
-          toolOutputExecutedMutation(activity.output)
-      ),
-    [toolActivities]
-  );
   const visibleToolActivities = useMemo(
     () =>
       toolActivities.filter((activity, index) => {
-        if (hasSuccessfulMutationActivity && activity.status === "error") {
-          return false;
-        }
-
         if (activity.status !== "error") {
           const confirmationKey = getConfirmationKey(activity);
 
@@ -908,11 +919,21 @@ export function CortexGlobalAgentChat() {
           return true;
         }
 
+        // Keep genuine failures visible. Only hide an error when a later retry
+        // of the SAME tool succeeded (a transient error that self-recovered);
+        // do not hide it just because some other, unrelated tool later
+        // succeeded, or a multi-section build would look fully successful even
+        // when individual sections failed.
         return !toolActivities
           .slice(index + 1)
-          .some((nextActivity) => nextActivity.status === "success" && !toolOutputIsNotice(nextActivity.output));
+          .some(
+            (nextActivity) =>
+              nextActivity.name === activity.name &&
+              nextActivity.status === "success" &&
+              !toolOutputIsNotice(nextActivity.output)
+          );
       }),
-    [cancelledConfirmationKeys, hasSuccessfulMutationActivity, toolActivities]
+    [cancelledConfirmationKeys, toolActivities]
   );
 
   const updateThreadMessages = (
@@ -1133,10 +1154,17 @@ export function CortexGlobalAgentChat() {
     }));
     const abortController = new AbortController();
     let timedOut = false;
-    const timeoutId = window.setTimeout(() => {
-      timedOut = true;
-      abortController.abort();
-    }, REQUEST_TIMEOUT_MS);
+    let idleTimeoutId: number | undefined;
+    const armIdleTimeout = () => {
+      if (idleTimeoutId !== undefined) {
+        window.clearTimeout(idleTimeoutId);
+      }
+      idleTimeoutId = window.setTimeout(() => {
+        timedOut = true;
+        abortController.abort();
+      }, IDLE_TIMEOUT_MS);
+    };
+    armIdleTimeout();
 
     if (!threadId) {
       const thread = createChatThread([userMessage, assistantMessage]);
@@ -1206,6 +1234,9 @@ export function CortexGlobalAgentChat() {
           break;
         }
 
+        // Reset the idle timer on every chunk so an actively-streaming build
+        // (many tool + text events) is never aborted mid-flight.
+        armIdleTimeout();
         buffer += decoder.decode(value, { stream: true });
         const frames = buffer.split("\n\n");
         buffer = frames.pop() || "";
@@ -1282,7 +1313,9 @@ export function CortexGlobalAgentChat() {
         )
       );
     } finally {
-      window.clearTimeout(timeoutId);
+      if (idleTimeoutId !== undefined) {
+        window.clearTimeout(idleTimeoutId);
+      }
       if (shouldRefreshAfterMutation && typeof window !== "undefined") {
         // Let client-rendered lists (e.g. the custom blocks library) refetch even
         // though router.refresh() does not re-run their mount-time data fetch.
@@ -1465,6 +1498,13 @@ export function CortexGlobalAgentChat() {
               ))}
             </div>
           )}
+
+          {isStreaming && (
+            <div className="flex items-center gap-2 px-1 text-xs text-slate-500 dark:text-slate-400">
+              <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
+              <span>Cortex is working… building a full page can take a little while.</span>
+            </div>
+          )}
         </div>
 
         {streamError && (

package/templates/nextblock-template/app/cms/custom-blocks/components/BlockComposer.tsx

@@ -55,7 +55,7 @@ import {
   createCustomBlockDefinition,
   updateCustomBlockDefinition,
 } from "../actions";
-import { orderCustomBlockFieldsByLayout } from "@nextblock-cms/utils";
+import { orderCustomBlockFieldsByLayout, cn } from "@nextblock-cms/utils";
 import type { CustomBlockDefinition, CustomBlockField } from "@nextblock-cms/utils";
 
 // Allowed container and field tags
@@ -544,6 +544,14 @@ export function BlockComposer({ initialData, mode }: BlockComposerProps) {
       toast.error("Block must contain at least one field.");
       return;
     }
+    if (fields.some((field) => !field.key.trim())) {
+      toast.error("Every property needs a key.");
+      return;
+    }
+    if (duplicateFieldKeys.size > 0) {
+      toast.error("Property keys must be unique — fix the highlighted duplicate keys.");
+      return;
+    }
 
     const payload = {
       name,
@@ -823,10 +831,30 @@ export function BlockComposer({ initialData, mode }: BlockComposerProps) {
     return used;
   }, [layoutFieldRefs, selectedNodePath]);
 
+  // Property keys that appear on more than one field. Duplicate keys are invalid (a key
+  // must be unique), so they're flagged in the editor rather than silently dropping a field.
+  const duplicateFieldKeys = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const field of fields) {
+      counts.set(field.key, (counts.get(field.key) ?? 0) + 1);
+    }
+    const dups = new Set<string>();
+    for (const [key, count] of counts) {
+      if (count > 1) dups.add(key);
+    }
+    return dups;
+  }, [fields]);
+
   // Keep the Properties Schema list itself ordered to match the layout blueprint,
   // so the fields editor mirrors the visual tree order everywhere.
   useEffect(() => {
     setFields((prev) => {
+      // While any keys collide, skip layout-driven reordering: orderCustomBlockFieldsByLayout
+      // dedupes by key and would silently drop the colliding field. Keep the list intact so
+      // the duplicate can be flagged (red border) and fixed by the user instead of vanishing.
+      const keys = prev.map((field) => field.key);
+      if (new Set(keys).size !== keys.length) return prev;
+
       const ordered = orderCustomBlockFieldsByLayout(prev, layoutSchema);
       const unchanged =
         ordered.length === prev.length && ordered.every((field, index) => field === prev[index]);
@@ -1063,8 +1091,18 @@ export function BlockComposer({ initialData, mode }: BlockComposerProps) {
                               value={field.key}
                               placeholder="e.g. quote"
                               onChange={(e) => updateField(idx, { key: e.target.value })}
-                              className="h-8 font-mono text-xs"
+                              aria-invalid={duplicateFieldKeys.has(field.key)}
+                              className={cn(
+                                "h-8 font-mono text-xs",
+                                duplicateFieldKeys.has(field.key) &&
+                                  "border-destructive focus-visible:ring-destructive"
+                              )}
                             />
+                            {duplicateFieldKeys.has(field.key) && (
+                              <p className="text-[10px] font-medium text-destructive">
+                                Duplicate key — property keys must be unique.
+                              </p>
+                            )}
                           </div>
                           <div className="md:col-span-4 space-y-1">
                             <Label className="text-[10px] uppercase tracking-wide font-semibold text-muted-foreground">Label</Label>

package/templates/nextblock-template/app/cms/interactions/EmailRecipientsInput.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "@nextblock-cms/utils";
+
+// Same address shape used elsewhere in the app (createUser). Intentionally pragmatic
+// rather than RFC-exhaustive: something@something.tld with no whitespace.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function isValidEmail(value: string): boolean {
+  return EMAIL_RE.test(value.trim().toLowerCase());
+}
+
+export interface EmailRecipientsInputHandle {
+  /**
+   * Commit any text still sitting in the input, then return the full recipient list.
+   * Returns `null` (and shows an inline error) when that pending text is not a valid
+   * email — the caller should abort the save in that case. Reading the returned array
+   * directly (rather than parent state) avoids a stale-closure race on save.
+   */
+  flush: () => string[] | null;
+}
+
+interface EmailRecipientsInputProps {
+  value: string[];
+  onChange: (emails: string[]) => void;
+  disabled?: boolean;
+  inputId?: string;
+}
+
+const EmailRecipientsInput = forwardRef<EmailRecipientsInputHandle, EmailRecipientsInputProps>(
+  function EmailRecipientsInput({ value, onChange, disabled, inputId }, ref) {
+    const [inputValue, setInputValue] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const hasEmail = (list: string[], email: string) =>
+      list.some((e) => e.toLowerCase() === email);
+
+    // Commit a single typed token. Returns the resulting list, or null when invalid.
+    const commit = (raw: string): string[] | null => {
+      const email = raw.trim().toLowerCase();
+      if (!email) return value;
+      if (!EMAIL_RE.test(email)) {
+        setError(`"${raw.trim()}" is not a valid email address.`);
+        return null;
+      }
+      if (hasEmail(value, email)) {
+        // Already a recipient — harmless. Clear the input without raising an error so
+        // it can't collide with the save-success banner when committed via Save/flush.
+        setInputValue("");
+        setError(null);
+        return value;
+      }
+      const next = [...value, email];
+      onChange(next);
+      setInputValue("");
+      setError(null);
+      return next;
+    };
+
+    // Add several tokens at once (paste of a comma/space/newline separated list).
+    const addMany = (raw: string) => {
+      const tokens = raw
+        .split(/[,\s;]+/)
+        .map((t) => t.trim())
+        .filter(Boolean);
+      if (tokens.length === 0) return;
+
+      const next = [...value];
+      const invalid: string[] = [];
+      for (const token of tokens) {
+        const email = token.toLowerCase();
+        if (!EMAIL_RE.test(email)) {
+          invalid.push(token);
+          continue;
+        }
+        if (!hasEmail(next, email)) next.push(email);
+      }
+      onChange(next);
+      setInputValue("");
+      setError(
+        invalid.length
+          ? `Skipped ${invalid.length} invalid address${invalid.length > 1 ? "es" : ""}: ${invalid.join(", ")}`
+          : null,
+      );
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" || e.key === ",") {
+        e.preventDefault();
+        commit(inputValue);
+      } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+        onChange(value.slice(0, -1));
+        setError(null);
+      } else if (error) {
+        setError(null);
+      }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+      const text = e.clipboardData.getData("text");
+      if (/[,\s;]/.test(text)) {
+        e.preventDefault();
+        // Prepend whatever is already typed so a pasted "@corp.com, ..." completes the
+        // in-progress "support" rather than discarding it.
+        addMany(inputValue + text);
+      }
+    };
+
+    const removeAt = (idx: number) => {
+      onChange(value.filter((_, i) => i !== idx));
+      setError(null);
+      inputRef.current?.focus();
+    };
+
+    // `commit` closes over the latest inputValue/value, so re-create the handle when
+    // either changes to keep flush() reading current state.
+    useImperativeHandle(ref, () => ({ flush: () => commit(inputValue) }), [inputValue, value]);
+
+    return (
+      <div className="space-y-1.5">
+        <div
+          onClick={() => inputRef.current?.focus()}
+          className={cn(
+            "flex flex-wrap gap-1.5 min-h-[84px] w-full items-start content-start bg-background border rounded-xl px-2.5 py-2 text-sm cursor-text transition-colors",
+            "focus-within:ring-1 focus-within:ring-primary focus-within:border-primary",
+            error ? "border-destructive" : "border-border",
+            disabled && "opacity-60 pointer-events-none",
+          )}
+        >
+          {value.map((email, idx) => (
+            <span
+              key={email}
+              className="inline-flex items-center gap-1 h-7 pl-2.5 pr-1 rounded-full bg-secondary text-secondary-foreground text-xs font-medium"
+            >
+              {email}
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  removeAt(idx);
+                }}
+                className="inline-flex items-center justify-center h-4 w-4 rounded-full text-muted-foreground hover:text-foreground hover:bg-black/10 dark:hover:bg-white/15 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary transition-colors"
+                aria-label={`Remove ${email}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </span>
+          ))}
+          <input
+            id={inputId}
+            ref={inputRef}
+            type="email"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onBlur={() => commit(inputValue)}
+            disabled={disabled}
+            aria-invalid={!!error}
+            placeholder={value.length === 0 ? "admin@example.com" : "Add another…"}
+            className="flex-1 min-w-[160px] h-7 bg-transparent outline-none placeholder:text-muted-foreground"
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-[10px] text-muted-foreground">
+            Type an address and press Enter or comma to add it.
+          </span>
+          {value.length > 0 && (
+            <span className="text-[10px] font-medium text-muted-foreground shrink-0">
+              {value.length} recipient{value.length > 1 ? "s" : ""}
+            </span>
+          )}
+        </div>
+
+        {error && (
+          <p role="alert" className="text-xs font-medium text-destructive">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+export default EmailRecipientsInput;