@alpaca-editor/core 1.0.3896 → 1.0.3898

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.3896",
+  "version": "1.0.3898",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ActionButton.tsx

@@ -1,5 +1,6 @@
 import { classNames } from "primereact/utils";
 import React from "react";
+import { Button } from "./ui/button";
 
 interface ActionButtonProps {
   isLoading: boolean;
@@ -21,23 +22,20 @@ export const ActionButton: React.FC<ActionButtonProps> = ({
   className = "",
 }) => {
   return (
-    <button
+    <Button
       type={type}
       onClick={onClick}
       disabled={disabled || isLoading}
-      className={classNames(
-        "bg-canvas-pink text-white px-4 py-2 rounded-lg font-medium hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed border hover:border-canvas-pink hover:text-canvas-pink",
-        className
-      )}
+      className={className}
     >
       {isLoading ? (
-        <div className="flex items-center gap-2 justify-center">
-          <div className="animate-spin mr-2 h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
+        <div className="flex items-center justify-center gap-2">
+          <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
           <div>{loadingText}</div>
         </div>
       ) : (
         children
       )}
-    </button>
+    </Button>
   );
 };

package/src/components/ui/button.tsx

@@ -10,11 +10,11 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-theme-secondary text-primary-foreground shadow-xs hover:bg-theme-secondary/80",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
@@ -22,7 +22,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-8 px-3 py-2 has-[>svg]:px-3",
+        default: "h-8 px-7 py-5 has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",

package/src/config/config.tsx

@@ -33,7 +33,10 @@ import {
   GraphQLIcon,
   JsonIcon,
   PageWizardIcon,
+  TreeIcon,
   WizardIcon,
+  WorkboxIcon,
+  UsersIcon,
 } from "../editor/ui/Icons";
 import { Debug } from "../editor/sidebar/Debug";
 import { GraphQL } from "../editor/sidebar/GraphQL";
@@ -68,9 +71,13 @@ import { getDefaultTourSteps } from "../tour/default-tour";
 import { Translation } from "../editor/sidebar/Translations";
 import { EditView } from "../editor/views/EditView";
 import { InsertMenuTemplate } from "../editor/context-menu/InsertMenu";
-import { ControlCenterMenu } from "../editor/control-center/ControlCenterMenu";
+
 import { Status } from "../editor/control-center/Status";
 import { IndexOverview } from "../editor/control-center/IndexOverview";
+import { Info } from "../editor/control-center/Info";
+import { QuotaInfo } from "../editor/control-center/QuotaInfo";
+import { About } from "../editor/control-center/About";
+import { WebSocketMessages } from "../editor/control-center/WebSocketMessages";
 import { MainContentTree } from "../editor/sidebar/MainContentTree";
 import { AttachmentEditor } from "../editor/field-types/AttachmentEditor";
 import { Comments } from "../editor/reviews/Comments";
@@ -93,14 +100,20 @@ import { getWizards } from "../page-wizard/service";
 import { startPageWizardCommand } from "../page-wizard/startPageWizardCommand";
 import { ImageFieldEditor } from "../editor/field-types/ImageFieldEditor";
 
-import { Ghost, Layers } from "lucide-react";
+import {
+  BookA,
+  Ghost,
+  Languages,
+  Layers,
+  MessageCircleMore,
+  Settings,
+} from "lucide-react";
 import { GhostWriter } from "../editor/ai/GhostWriter";
 import { SecondaryControls } from "../editor/menubar/SecondaryControls";
 
 import { Command } from "../editor/commands/commands";
 import { PreviewSecondaryControls } from "../editor/menubar/PreviewSecondaryControls";
 import { AboutDialog } from "../editor/client/AboutDialog";
-import { CopyMoveMenuTemplate } from "../editor/context-menu/CopyMoveMenu";
 
 const defaultRichTextEditorProfile: RichTextEditorProfile = {
   toolbar: {
@@ -316,6 +329,36 @@ export const getConfiguration = (): EditorConfiguration => {
 
     controlCenter: {
       groups: [
+        {
+          title: "System",
+          icon: <i className="pi pi-info-circle" />,
+          panels: [
+            {
+              id: "info",
+              title: "System Info",
+              icon: <i className="pi pi-info-circle" />,
+              content: <Info />,
+            },
+            {
+              id: "quota",
+              title: "AI Quota",
+              icon: <i className="pi pi-chart-bar" />,
+              content: <QuotaInfo />,
+            },
+            {
+              id: "about",
+              title: "About",
+              icon: <i className="pi pi-info" />,
+              content: <About />,
+            },
+            {
+              id: "websocket-messages",
+              title: "WebSocket Messages",
+              icon: <i className="pi pi-comments" />,
+              content: <WebSocketMessages />,
+            },
+          ],
+        },
         {
           title: "Indexing",
           icon: <i className="pi pi-search" />,
@@ -390,7 +433,7 @@ export const getConfiguration = (): EditorConfiguration => {
         },
         {
           name: "translate",
-          icon: "pi pi-language",
+          icon: <Languages />,
           title: "Translate",
           leftSidebar: {
             panels: [
@@ -408,7 +451,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "reviews",
           title: "Reviews",
-          icon: "pi pi-comments",
+          icon: <MessageCircleMore />,
           leftSidebar: {
             panels: [
               {
@@ -434,7 +477,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "publish",
           title: "Publish",
-          icon: "pi pi-globe",
+          icon: <WorkboxIcon />,
 
           leftSidebar: {
             panels: [
@@ -460,13 +503,13 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "content-editor",
           title: "Content Editor",
-          icon: "pi pi-sitemap",
+          icon: <TreeIcon />,
           defaultCenterPanelView: editView,
           leftSidebar: {
             panels: [
               {
                 name: "tree",
-                icon: "pi pi-sitemap",
+                icon: <TreeIcon />,
                 title: "Content",
                 content: <MainContentTree mode="normal" />,
                 initialSize: 80,
@@ -481,7 +524,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "dictionary",
           title: "Dictionary",
-          icon: "pi pi-book",
+          icon: <BookA />,
           leftSidebar: {
             panels: [
               {
@@ -498,7 +541,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "sessions",
           title: "Sessions",
-          icon: "pi pi-users",
+          icon: <UsersIcon />,
           leftSidebar: {
             panels: [
               {
@@ -610,20 +653,9 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "control-center",
           title: "Control Center",
-          icon: "pi pi-cog",
+          icon: <Settings />,
           defaultCenterPanelView: <Status />,
           menuBar: <></>,
-          leftSidebar: {
-            panels: [
-              {
-                name: "settings",
-                icon: "pi pi-cog",
-                title: "Control Center",
-                content: <ControlCenterMenu />,
-                initialSize: 30,
-              },
-            ],
-          },
         },
       ],
 

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 className="h-6 w-6" />
           <span className="ml-2 font-mono">workbench</span>
         </a>
       </div>

package/src/editor/client/EditorClient.tsx

@@ -118,23 +118,43 @@ import uuid from "react-uuid";
 import { flushSync } from "react-dom";
 import { getSuggestedEdits } from "../services/suggestedEditsService";
 import { usePageWizard } from "../../page-wizard/usePageWizard";
+import { requestQuota } from "../services/aiService";
 
 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 = {
+  totalTokens: number;
+  totalImages: number;
+  dailyTokens: number;
+  dailyImages: number;
+};
+export type QuotaLimits = {
+  totalTokens: number;
+  dailyTokens: number;
+  monthlyTokens: number;
+  totalImages: number;
+  dailyImages: number;
+  monthlyImages: number;
+};
+export type QuotaInfo = { usage: QuotaUsage; limits: QuotaLimits };
+
+export type WebSocketMessage = {
+  id: string;
+  timestamp: string;
+  type: string;
+  payload: any;
+  rawMessage: string;
+};
 
 export function EditorClient({
   configuration,
@@ -284,9 +304,13 @@ export function EditorClient({
   const [focusFieldComponentId, setFocusFieldComponentId] = useState<string>();
 
   const [enableCompletions, setEnableCompletions] = useState(false);
-
+  const [quotaInfo, setQuotaInfo] = useState<QuotaInfo | null>(null);
   const pageWizard = usePageWizard();
 
+  const [webSocketMessages, setWebSocketMessages] = useState<
+    WebSocketMessage[]
+  >([]);
+
   useEffect(() => {
     const queryMode = searchParams.get("mode");
     if (queryMode) setMode(queryMode as EditorMode);
@@ -390,6 +414,25 @@ export function EditorClient({
       if (!event.data.startsWith("{")) return;
       const message = JSON.parse(event.data);
 
+      // Track all WebSocket messages for debugging/monitoring
+      try {
+        const webSocketMessage: WebSocketMessage = {
+          id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+          timestamp: new Date().toISOString(),
+          type: message.type || "unknown",
+          payload: message.payload,
+          rawMessage: JSON.stringify(message, null, 2),
+        };
+
+        setWebSocketMessages((prev) => {
+          const updated = [webSocketMessage, ...prev];
+          // Keep only the latest 1000 messages
+          return updated.slice(0, 1000);
+        });
+      } catch (error) {
+        console.error("Error tracking WebSocket message:", error);
+      }
+
       if (message.type === "active-sessions") {
         setActiveSessions(() => {
           return message.payload;
@@ -459,6 +502,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;
 
@@ -605,7 +711,7 @@ export function EditorClient({
     socket.addEventListener("open", () => {
       console.log("Connected!");
       sendClientInfo();
-
+      requestQuota();
       //TODO: Load clients
     });
 
@@ -1432,6 +1538,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.totalTokens > 0 && usage.totalTokens >= limits.totalTokens)
+      return true;
+    if (limits.totalImages > 0 && usage.totalImages >= limits.totalImages)
+      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.totalTokens > 0) {
+      const tokenPercentage = (usage.totalTokens / limits.totalTokens) * 100;
+      if (tokenPercentage >= 100) {
+        warnings.push(
+          `Token limit exceeded (${usage.totalTokens}/${limits.totalTokens})`,
+        );
+      } else if (tokenPercentage >= 90) {
+        warnings.push(
+          `Token usage high: ${Math.round(tokenPercentage)}% (${usage.totalTokens}/${limits.totalTokens})`,
+        );
+      }
+    }
+
+    // Check images
+    if (limits.totalImages > 0) {
+      const imagePercentage = (usage.totalImages / limits.totalImages) * 100;
+      if (imagePercentage >= 100) {
+        warnings.push(
+          `Image limit exceeded (${usage.totalImages}/${limits.totalImages})`,
+        );
+      } else if (imagePercentage >= 90) {
+        warnings.push(
+          `Image usage high: ${Math.round(imagePercentage)}% (${usage.totalImages}/${limits.totalImages})`,
+        );
+      }
+    }
+
+    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 +1773,8 @@ export function EditorClient({
 
         const op: FieldAction = {
           field: fieldDescriptor,
-          actionButton,
+          //  actionButton,
+          label: actionButton.label,
           state: "running",
         };
         const fieldItem = fieldDescriptor.item;
@@ -1807,9 +1981,14 @@ export function EditorClient({
       setShowSuggestedEditsDiff,
       enableCompletions,
       setEnableCompletions,
+      quotaInfo,
+      isQuotaExceeded: isQuotaExceeded(),
+      getQuotaWarningMessage,
       isMobile,
       openDialog,
       pageWizard,
+      webSocketMessages,
+      clearWebSocketMessages: () => setWebSocketMessages([]),
     };
   }, [
     operations,
@@ -1883,9 +2062,13 @@ export function EditorClient({
     setShowSuggestedEdits,
     showSuggestedEditsDiff,
     setShowSuggestedEditsDiff,
+    quotaInfo,
+    isQuotaExceeded,
+    getQuotaWarningMessage,
     isMobile,
     openDialog,
     pageWizard,
+    webSocketMessages,
   ]);
 
   const modifiedFieldsContext = useMemo(() => {

package/src/editor/client/editContext.ts

@@ -10,7 +10,12 @@ import React, {
 import { ToastMessage } from "primereact/toast";
 
 import { EditorConfiguration, EditorView } from "../../config/types";
-import { FieldAction, InsertingState } from "./EditorClient";
+import {
+  FieldAction,
+  InsertingState,
+  QuotaInfo,
+  WebSocketMessage,
+} from "./EditorClient";
 import { MenuItem } from "primereact/menuitem";
 import { Command, CommandData } from "../commands/commands";
 import { ComponentDetails } from "../services/componentDesignerService";
@@ -303,7 +308,9 @@ export type EditContextType = {
 
   enableCompletions: boolean;
   setEnableCompletions: React.Dispatch<React.SetStateAction<boolean>>;
-
+  quotaInfo: QuotaInfo | null;
+  isQuotaExceeded: boolean;
+  getQuotaWarningMessage: () => string | null;
   isMobile: boolean;
 
   openDialog: OpenDialog;
@@ -316,6 +323,9 @@ export type EditContextType = {
       React.SetStateAction<ItemDescriptor | undefined>
     >;
   };
+
+  webSocketMessages: WebSocketMessage[];
+  clearWebSocketMessages: () => void;
 };
 
 const EditContext = React.createContext<EditContextType | undefined>(undefined);

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