@alpaca-editor/core 1.0.3896 → 1.0.3897

package/src/editor/FieldListField.tsx

@@ -170,9 +170,9 @@ export default function FieldListField({
             ></SimpleIconButton>
           )}
           {executingAction && executingAction.state === "running" && (
-            <div className="ml-auto flex items-center gap-3 text-xs">
+            <div className="ml-auto flex items-center gap-1.5 text-xs">
               <i className="pi pi-spin pi-spinner flex items-center text-xs" />{" "}
-              {executingAction?.actionButton.label}
+              {executingAction?.label}
             </div>
           )}
           <OverlayPanel ref={generatorsOverlay} className="p-1">

package/src/editor/Titlebar.tsx

@@ -2,6 +2,7 @@ import { MenuIcon } from "lucide-react";
 import { useEditContext } from "./client/editContext";
 import { useEffect, useState, useRef } from "react";
 import { createPortal } from "react-dom";
+import { Logo } from "./ui/Icons";
 
 export function Titlebar() {
   const editContext = useEditContext();
@@ -43,7 +44,7 @@ export function Titlebar() {
           href="/sitecore/shell/sitecore/client/Applications/Launchpad"
           className="glow-text flex items-center"
         >
-          <i className="pi pi-sparkles text-pink-400" />
+          <Logo />
           <span className="ml-2 font-mono">workbench</span>
         </a>
       </div>

package/src/editor/client/EditorClient.tsx

@@ -121,20 +121,26 @@ import { usePageWizard } from "../../page-wizard/usePageWizard";
 
 export type FieldAction = {
   field: FieldDescriptor;
-  actionButton: FieldButton;
   message?: string;
   state: "running" | "success" | "error";
+  label?: string;
 };
 
-export type WindowSize = {
-  width: number;
-  height: number;
-};
-
+export type WindowSize = { width: number; height: number };
 export type InsertingState = {
   positionElement: Element;
   positionAnchor: "left" | "right" | "top" | "bottom";
 };
+export type QuotaUsage = { tokens: number; images: number };
+export type QuotaLimits = {
+  absoluteTokens: number;
+  dailyTokens: number;
+  monthlyTokens: number;
+  absoluteImages: number;
+  dailyImages: number;
+  monthlyImages: number;
+};
+export type QuotaInfo = { usage: QuotaUsage; limits: QuotaLimits };
 
 export function EditorClient({
   configuration,
@@ -284,7 +290,7 @@ export function EditorClient({
   const [focusFieldComponentId, setFocusFieldComponentId] = useState<string>();
 
   const [enableCompletions, setEnableCompletions] = useState(false);
-
+  const [quotaInfo, setQuotaInfo] = useState<QuotaInfo | null>(null);
   const pageWizard = usePageWizard();
 
   useEffect(() => {
@@ -390,6 +396,8 @@ export function EditorClient({
       if (!event.data.startsWith("{")) return;
       const message = JSON.parse(event.data);
 
+      console.log("message", message);
+
       if (message.type === "active-sessions") {
         setActiveSessions(() => {
           return message.payload;
@@ -459,6 +467,69 @@ export function EditorClient({
         });
       }
 
+      if (message.type === "executing-field-action") {
+        setActiveFieldActions((x) => {
+          const payload = message.payload;
+          const fieldId = payload.fieldId;
+          const item = payload.item;
+          const status = payload.status;
+          const msg = payload.message;
+          const label = payload.label;
+
+          // Map backend status to FieldAction state
+          let state: "running" | "success" | "error";
+          switch (status?.toLowerCase()) {
+            case "completed":
+            case "success":
+              state = "success";
+              break;
+            case "failed":
+            case "error":
+              state = "error";
+              break;
+            default:
+              state = "running";
+              break;
+          }
+
+          // Check if action already exists
+          const existingActionIndex = x.findIndex(
+            (action) =>
+              action.field.fieldId === fieldId &&
+              action.field.item.id === item.id &&
+              action.field.item.language === item.language &&
+              action.field.item.version === item.version,
+          );
+
+          if (existingActionIndex !== -1) {
+            // Update existing action
+            const newActions = [...x];
+            newActions[existingActionIndex]!.state = state;
+            newActions[existingActionIndex]!.message = msg;
+            return newActions;
+          } else {
+            // Insert new action
+            const fieldDescriptor: FieldDescriptor = {
+              fieldId: fieldId,
+              item: item,
+            };
+
+            const newAction: FieldAction = {
+              field: fieldDescriptor,
+              state,
+              message: msg,
+              label: label,
+            };
+            console.log(newAction);
+            return [...x, newAction];
+          }
+        });
+      }
+
+      if (message.type === "update-quota") {
+        setQuotaInfo(message.payload);
+      }
+
       if (message.type === "edit-operation") {
         const op = message.payload as EditOperation;
 
@@ -1432,6 +1503,73 @@ export function EditorClient({
     router.push(url.toString(), { scroll: false });
   }, []);
 
+  // Quota checking functions
+  const isQuotaExceeded = useCallback(() => {
+    if (!quotaInfo) return false;
+
+    const { usage, limits } = quotaInfo;
+
+    // Check absolute limits
+    if (limits.absoluteTokens > 0 && usage.tokens >= limits.absoluteTokens)
+      return true;
+    if (limits.absoluteImages > 0 && usage.images >= limits.absoluteImages)
+      return true;
+
+    // For now, we're only checking absolute limits as daily/monthly would require server-side logic
+    // You can extend this to check daily/monthly limits if the server provides that information
+
+    return false;
+  }, [quotaInfo]);
+
+  const getQuotaWarningMessage = useCallback(() => {
+    if (!quotaInfo) return null;
+
+    const { usage, limits } = quotaInfo;
+    const warnings: string[] = [];
+
+    // Check tokens
+    if (limits.absoluteTokens > 0) {
+      const tokenPercentage = (usage.tokens / limits.absoluteTokens) * 100;
+      if (tokenPercentage >= 100) {
+        warnings.push(
+          `Token limit exceeded (${usage.tokens}/${limits.absoluteTokens})`,
+        );
+      } else if (tokenPercentage >= 90) {
+        warnings.push(
+          `Token usage high: ${Math.round(tokenPercentage)}% (${usage.tokens}/${limits.absoluteTokens})`,
+        );
+      }
+    }
+
+    // Check images
+    if (limits.absoluteImages > 0) {
+      const imagePercentage = (usage.images / limits.absoluteImages) * 100;
+      if (imagePercentage >= 100) {
+        warnings.push(
+          `Image limit exceeded (${usage.images}/${limits.absoluteImages})`,
+        );
+      } else if (imagePercentage >= 90) {
+        warnings.push(
+          `Image usage high: ${Math.round(imagePercentage)}% (${usage.images}/${limits.absoluteImages})`,
+        );
+      }
+    }
+
+    return warnings.length > 0 ? warnings.join(", ") : null;
+  }, [quotaInfo]);
+
+  // Show warning when quota is exceeded
+  useEffect(() => {
+    const warningMessage = getQuotaWarningMessage();
+    if (warningMessage) {
+      const isExceeded = isQuotaExceeded();
+      showErrorToast({
+        summary: isExceeded ? "AI Quota Exceeded" : "AI Quota Warning",
+        details: warningMessage,
+      });
+    }
+  }, [quotaInfo, getQuotaWarningMessage, isQuotaExceeded, showErrorToast]);
+
   const editContext = useMemo(() => {
     return {
       operations: operationsContext.ops,
@@ -1600,7 +1738,8 @@ export function EditorClient({
 
         const op: FieldAction = {
           field: fieldDescriptor,
-          actionButton,
+          //  actionButton,
+          label: actionButton.label,
           state: "running",
         };
         const fieldItem = fieldDescriptor.item;
@@ -1807,6 +1946,9 @@ export function EditorClient({
       setShowSuggestedEditsDiff,
       enableCompletions,
       setEnableCompletions,
+      quotaInfo,
+      isQuotaExceeded: isQuotaExceeded(),
+      getQuotaWarningMessage,
       isMobile,
       openDialog,
       pageWizard,
@@ -1883,6 +2025,9 @@ export function EditorClient({
     setShowSuggestedEdits,
     showSuggestedEditsDiff,
     setShowSuggestedEditsDiff,
+    quotaInfo,
+    isQuotaExceeded,
+    getQuotaWarningMessage,
     isMobile,
     openDialog,
     pageWizard,

package/src/editor/client/editContext.ts

@@ -10,7 +10,7 @@ import React, {
 import { ToastMessage } from "primereact/toast";
 
 import { EditorConfiguration, EditorView } from "../../config/types";
-import { FieldAction, InsertingState } from "./EditorClient";
+import { FieldAction, InsertingState, QuotaInfo } from "./EditorClient";
 import { MenuItem } from "primereact/menuitem";
 import { Command, CommandData } from "../commands/commands";
 import { ComponentDetails } from "../services/componentDesignerService";
@@ -303,7 +303,9 @@ export type EditContextType = {
 
   enableCompletions: boolean;
   setEnableCompletions: React.Dispatch<React.SetStateAction<boolean>>;
-
+  quotaInfo: QuotaInfo | null;
+  isQuotaExceeded: boolean;
+  getQuotaWarningMessage: () => string | null;
   isMobile: boolean;
 
   openDialog: OpenDialog;

package/src/editor/client/itemsRepository.ts

@@ -66,7 +66,7 @@ export function useItemsRepository(
       itemsToLoad.forEach((item) => {
         const key = generateKey(item);
         if (!requestGroups.has(key)) {
-          requestGroups.set(key, item);
+          requestGroups.set(key, getItemDescriptor(item));
         }
       });
 

package/src/editor/client/operations.ts

@@ -387,7 +387,7 @@ export function getOperationsContext(
         value,
         rawValue,
       );
-      editFieldImmediate({ field, value, rawValue, refresh });
+      return editFieldImmediate({ field, value, rawValue, refresh });
     },
     state.configuration.debounceFieldEditsInterval * 2,
     { trailing: true },

package/src/editor/control-center/About.tsx

@@ -0,0 +1,342 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+import { version, buildDate } from "../../revision";
+
+export function About() {
+  const editContext = useEditContext();
+
+  return (
+    <div className="max-h-full space-y-6 p-4">
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-gray-800">
+          About Alpaca Editor
+        </h2>
+        {/* Application Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Application Information
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Product Name
+              </label>
+              <p className="text-gray-900">Alpaca Editor</p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Version
+              </label>
+              <p className="text-gray-900">{version}</p>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Build Date
+              </label>
+              <p className="text-gray-900">{buildDate}</p>
+            </div>
+          </div>
+        </div>
+        {/* License Information */}{" "}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          {" "}
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            {" "}
+            License Information{" "}
+          </h3>{" "}
+          <div className="space-y-4">
+            {" "}
+            <div>
+              {" "}
+              <label className="text-sm font-medium text-gray-500">
+                {" "}
+                Copyright{" "}
+              </label>{" "}
+              <p className="text-gray-900">© 2025 Canvas Reply GmbH</p>{" "}
+            </div>{" "}
+            <div>
+              {" "}
+              <label className="text-sm font-medium text-gray-500">
+                {" "}
+                License{" "}
+              </label>{" "}
+              <p className="text-gray-900">
+                {" "}
+                All rights reserved. Please contact Canvas Reply GmbH for
+                licensing information.{" "}
+              </p>{" "}
+            </div>{" "}
+          </div>{" "}
+        </div>
+        {/* Third-Party Licenses */}{" "}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          {" "}
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            {" "}
+            Third-Party Components{" "}
+          </h3>{" "}
+          <div className="max-h-96 space-y-3 overflow-y-auto">
+            {" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  React
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A JavaScript library for building user interfaces{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Next.js
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                The React Framework for Production{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  TypeScript
+                </h4>{" "}
+                <span className="text-xs text-gray-500">
+                  Apache 2.0 License
+                </span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                TypeScript is a language for application scale JavaScript
+                development{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Tailwind CSS
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A utility-first CSS framework for rapidly building custom
+                designs{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  PrimeReact
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                React UI Component Library with rich set of components{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Lucide React
+                </h4>{" "}
+                <span className="text-xs text-gray-500">ISC License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Beautiful & consistent icon toolkit made by the community{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Radix UI
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Low-level UI primitives for React with accessibility
+                built-in{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Axios
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Promise based HTTP client for the browser and node.js{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Quill
+                </h4>{" "}
+                <span className="text-xs text-gray-500">
+                  BSD 3-Clause License
+                </span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Modern WYSIWYG editor built for compatibility and
+                extensibility{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  React Inspector
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Power of Browser DevTools inspectors right inside your React
+                app{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Allotment
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                React split-pane component with support for multiple
+                layouts{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Lodash
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A modern JavaScript utility library delivering modularity,
+                performance & extras{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">clsx</h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A tiny utility for constructing className strings
+                conditionally{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  PostCSS
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Tool for transforming CSS with JavaScript{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Universal Cookie
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Universal cookies for JavaScript{" "}
+              </p>{" "}
+            </div>{" "}
+          </div>{" "}
+        </div>
+        {/* Contact Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Contact & Support
+          </h3>
+          <div className="space-y-3">
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Documentation
+              </label>
+              <p className="text-gray-900">
+                <a
+                  href="#"
+                  className="text-blue-600 underline hover:text-blue-800"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  View Documentation
+                </a>
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Support
+              </label>
+              <p className="text-gray-900">
+                <a
+                  href="#"
+                  className="text-blue-600 underline hover:text-blue-800"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  Contact Support
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/control-center/ControlCenterMenu.tsx

@@ -50,6 +50,11 @@ export function ControlCenterMenu() {
     const item = groups
       ?.flatMap((x) => x.panels)
       ?.find((item) => item.id === activeItemKey);
+
+    if (!item) {
+      setActiveItemKey(groups?.[0]?.panels?.[0]?.id || null);
+    }
+
     if (item) {
       editContext?.setCenterPanelView(item.content);
     }