@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,301 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+
+export function QuotaInfo() {
+  const editContext = useEditContext();
+  const quotaInfo = editContext?.quotaInfo;
+
+  const formatQuotaPercentage = (used: number, limit: number) => {
+    if (!limit || limit === 0 || limit === -1) return "No limit";
+    if (!used && used !== 0) return "0%";
+    if (isNaN(used) || isNaN(limit)) return "0%";
+    const percentage = Math.round((used / limit) * 100);
+    return `${percentage}%`;
+  };
+
+  const getQuotaStatus = (used: number, limit: number) => {
+    if (!limit || limit === 0 || limit === -1) return "unlimited";
+    if (!used && used !== 0) return "ok";
+    if (isNaN(used) || isNaN(limit)) return "ok";
+    const percentage = (used / limit) * 100;
+    if (percentage >= 100) return "exceeded";
+    if (percentage >= 90) return "warning";
+    if (percentage >= 75) return "caution";
+    return "ok";
+  };
+
+  const getProgressWidth = (used: number, limit: number) => {
+    if (
+      !limit ||
+      limit === 0 ||
+      limit === -1 ||
+      !used ||
+      isNaN(used) ||
+      isNaN(limit)
+    )
+      return 0;
+    return Math.min(100, (used / limit) * 100);
+  };
+
+  if (!quotaInfo) {
+    return (
+      <div className="space-y-6 p-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h2 className="mb-3 text-xl font-semibold text-gray-800">
+            AI Usage Quota
+          </h2>
+          <p className="text-gray-600">No quota information available</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-4">
+      {/* Token Usage Box */}
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h3 className="mb-3 text-lg font-semibold text-gray-800">
+          Token Usage
+        </h3>
+        <div className="space-y-4">
+          {/* Total Token Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Total Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.totalTokens.toLocaleString()} /{" "}
+                {quotaInfo.limits.totalTokens &&
+                quotaInfo.limits.totalTokens > 0
+                  ? quotaInfo.limits.totalTokens.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.totalTokens &&
+              quotaInfo.limits.totalTokens > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.totalTokens,
+                        quotaInfo.limits.totalTokens,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.totalTokens,
+                              quotaInfo.limits.totalTokens,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.totalTokens,
+                                quotaInfo.limits.totalTokens,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {formatQuotaPercentage(
+                quotaInfo.usage.totalTokens,
+                quotaInfo.limits.totalTokens,
+              )}{" "}
+              used
+            </p>
+          </div>
+
+          {/* Daily Token Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Daily Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.dailyTokens.toLocaleString()} /{" "}
+                {quotaInfo.limits.dailyTokens &&
+                quotaInfo.limits.dailyTokens > 0
+                  ? quotaInfo.limits.dailyTokens.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.dailyTokens &&
+              quotaInfo.limits.dailyTokens > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.dailyTokens,
+                        quotaInfo.limits.dailyTokens,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.dailyTokens,
+                              quotaInfo.limits.dailyTokens,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.dailyTokens,
+                                quotaInfo.limits.dailyTokens,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {quotaInfo.limits.dailyTokens === -1
+                ? "No daily limit"
+                : `${formatQuotaPercentage(
+                    quotaInfo.usage.dailyTokens,
+                    quotaInfo.limits.dailyTokens,
+                  )} used today`}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Image Usage Box */}
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h3 className="mb-3 text-lg font-semibold text-gray-800">
+          Image Usage
+        </h3>
+        <div className="space-y-4">
+          {/* Total Image Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Total Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.totalImages.toLocaleString()} /{" "}
+                {quotaInfo.limits.totalImages &&
+                quotaInfo.limits.totalImages > 0
+                  ? quotaInfo.limits.totalImages.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.totalImages &&
+              quotaInfo.limits.totalImages > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.totalImages,
+                        quotaInfo.limits.totalImages,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.totalImages,
+                              quotaInfo.limits.totalImages,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.totalImages,
+                                quotaInfo.limits.totalImages,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {formatQuotaPercentage(
+                quotaInfo.usage.totalImages,
+                quotaInfo.limits.totalImages,
+              )}{" "}
+              used
+            </p>
+          </div>
+
+          {/* Daily Image Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Daily Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.dailyImages.toLocaleString()} /{" "}
+                {quotaInfo.limits.dailyImages &&
+                quotaInfo.limits.dailyImages > 0
+                  ? quotaInfo.limits.dailyImages.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.dailyImages &&
+              quotaInfo.limits.dailyImages > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.dailyImages,
+                        quotaInfo.limits.dailyImages,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.dailyImages,
+                              quotaInfo.limits.dailyImages,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.dailyImages,
+                                quotaInfo.limits.dailyImages,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {quotaInfo.limits.dailyImages === -1
+                ? "No daily limit"
+                : `${formatQuotaPercentage(
+                    quotaInfo.usage.dailyImages,
+                    quotaInfo.limits.dailyImages,
+                  )} used today`}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Quota Status Summary */}
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h4 className="mb-2 text-sm font-medium text-gray-700">Quota Status</h4>
+        <div className="space-y-1 text-sm">
+          {editContext?.isQuotaExceeded && (
+            <p className="font-medium text-red-600">
+              ⚠️ Quota limits have been exceeded
+            </p>
+          )}
+          {editContext?.getQuotaWarningMessage &&
+            editContext.getQuotaWarningMessage() &&
+            !editContext.isQuotaExceeded && (
+              <p className="text-orange-600">
+                ⚠️ {editContext.getQuotaWarningMessage()}
+              </p>
+            )}
+          {!editContext?.isQuotaExceeded &&
+            !editContext?.getQuotaWarningMessage?.() && (
+              <p className="text-green-600">✅ All quotas are within limits</p>
+            )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEditContext } from "../client/editContext";
+import { SimpleMenu } from "../ui/SimpleMenu";
+import { Splitter, SplitterPanel } from "../ui/Splitter";
+
+export function Status() {
+  const editContext = useEditContext();
+  const config = editContext?.configuration;
+  const searchParams = useSearchParams();
+  const urlActiveItemKey = searchParams.get("ccpanel");
+
+  // Get the first available panel as default
+  const defaultActiveItemKey = config?.controlCenter.groups?.flatMap(
+    (x) => x.panels,
+  )?.[0]?.id;
+
+  const [activeItemKey, setActiveItemKey] = useState<string | null>(
+    urlActiveItemKey || defaultActiveItemKey || null,
+  );
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const updateUrl = (key: string | null) => {
+    if (urlActiveItemKey === key) return;
+
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+
+    if (key) {
+      current.set("ccpanel", key);
+    } else {
+      current.delete("ccpanel");
+    }
+    router.push(`${pathname}?${current.toString()}`, { scroll: false });
+  };
+
+  // Set default active item when config loads and no active item is set
+  useEffect(() => {
+    if (!activeItemKey && defaultActiveItemKey) {
+      setActiveItemKey(defaultActiveItemKey);
+    }
+  }, [defaultActiveItemKey, activeItemKey]);
+
+  const items = config?.controlCenter.groups.map((group) => {
+    return {
+      id: group.title,
+      label: group.title,
+      icon: group.icon,
+      items:
+        group.panels.map((panel) => ({
+          id: panel.id,
+          label: panel.title,
+        })) || [],
+    };
+  });
+
+  // Find the currently selected panel content
+  const selectedPanel = config?.controlCenter.groups
+    ?.flatMap((x) => x.panels)
+    ?.find((item) => item.id === activeItemKey);
+
+  if (!items) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center">
+        Loading...
+      </div>
+    );
+  }
+
+  const panels: SplitterPanel[] = [
+    {
+      name: "menu",
+      defaultSize: 300,
+      content: (
+        <div className="h-full border-r border-gray-200">
+          <SimpleMenu
+            items={items}
+            activeItemKey={activeItemKey}
+            onItemClick={(item) => {
+              setActiveItemKey(item.id);
+              // Only update URL when user explicitly clicks on an item
+              updateUrl(item.id);
+            }}
+          />
+        </div>
+      ),
+    },
+    {
+      name: "content",
+      defaultSize: "auto",
+      content: (
+        <div className="absolute inset-0 overflow-auto">
+          {selectedPanel ? (
+            selectedPanel.content
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center text-gray-500">
+              <i className="pi pi-info-circle mb-4 text-4xl"></i>
+              <p>Select a panel from the menu to view its content</p>
+            </div>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="h-full">
+      <Splitter panels={panels} localStorageKey="control-center-splitter" />
+    </div>
+  );
+}

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

@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useEditContext } from "../client/editContext";
+import { WebSocketMessage } from "../client/EditorClient";
+
+export function WebSocketMessages() {
+  const editContext = useEditContext();
+  const [expandedMessages, setExpandedMessages] = useState<Set<string>>(
+    new Set(),
+  );
+  const [autoScroll, setAutoScroll] = useState(true);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Get messages from central store
+  const messages = editContext?.webSocketMessages || [];
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (autoScroll && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, autoScroll]);
+
+  const toggleExpanded = (messageId: string) => {
+    setExpandedMessages((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(messageId)) {
+        newSet.delete(messageId);
+      } else {
+        newSet.add(messageId);
+      }
+      return newSet;
+    });
+  };
+
+  const formatTimestamp = (isoString: string) => {
+    const date = new Date(isoString);
+    return (
+      date.toLocaleTimeString() +
+      "." +
+      date.getMilliseconds().toString().padStart(3, "0")
+    );
+  };
+
+  const getMessageTypeColor = (type: string) => {
+    const colors: { [key: string]: string } = {
+      "active-sessions": "bg-blue-100 text-blue-800",
+      "item-deleted": "bg-red-100 text-red-800",
+      "item-changed": "bg-yellow-100 text-yellow-800",
+      "item-version-added": "bg-green-100 text-green-800",
+      "edit-operation": "bg-purple-100 text-purple-800",
+      "executing-field-action": "bg-orange-100 text-orange-800",
+      "comment-updated": "bg-cyan-100 text-cyan-800",
+      "comment-deleted": "bg-red-100 text-red-800",
+      "suggested-edit-updated": "bg-indigo-100 text-indigo-800",
+      "suggested-edit-deleted": "bg-red-100 text-red-800",
+      "update-quota": "bg-gray-100 text-gray-800",
+    };
+    return colors[type] || "bg-gray-100 text-gray-800";
+  };
+
+  const clearMessages = () => {
+    editContext?.clearWebSocketMessages();
+  };
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10;
+    setAutoScroll(isAtBottom);
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-gray-200 p-4">
+        <div className="flex items-center gap-2">
+          <i className="pi pi-comments text-lg" />
+          <h3 className="text-lg font-semibold">WebSocket Messages</h3>
+          <span className="rounded bg-gray-100 px-2 py-1 text-sm text-gray-800">
+            {messages.length}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="flex items-center gap-1 text-sm">
+            <input
+              type="checkbox"
+              checked={autoScroll}
+              onChange={(e) => setAutoScroll(e.target.checked)}
+              className="rounded"
+            />
+            Auto-scroll
+          </label>
+          <button
+            onClick={clearMessages}
+            className="rounded bg-red-500 px-3 py-1 text-sm text-white hover:bg-red-600"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      {/* Messages List */}
+      <div
+        ref={containerRef}
+        className="flex-1 space-y-2 overflow-y-auto p-4"
+        onScroll={handleScroll}
+      >
+        {messages.length === 0 ? (
+          <div className="py-8 text-center text-gray-500">
+            No WebSocket messages received yet
+          </div>
+        ) : (
+          messages.map((message) => (
+            <div key={message.id} className="rounded-lg border border-gray-200">
+              <div
+                className="flex cursor-pointer items-center justify-between p-3 hover:bg-gray-50"
+                onClick={() => toggleExpanded(message.id)}
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <span className="font-mono text-xs text-gray-500">
+                    {formatTimestamp(message.timestamp)}
+                  </span>
+                  <span
+                    className={`rounded px-2 py-1 text-xs font-medium ${getMessageTypeColor(message.type)}`}
+                  >
+                    {message.type}
+                  </span>
+                  <span className="truncate text-sm text-gray-600">
+                    {typeof message.payload === "object"
+                      ? Object.keys(message.payload).join(", ")
+                      : String(message.payload)}
+                  </span>
+                </div>
+                <i
+                  className={`pi ${expandedMessages.has(message.id) ? "pi-chevron-up" : "pi-chevron-down"} text-gray-400`}
+                />
+              </div>
+
+              {expandedMessages.has(message.id) && (
+                <div className="border-t border-gray-200 bg-gray-50 p-3">
+                  <pre className="overflow-x-auto font-mono text-xs break-words whitespace-pre-wrap">
+                    {message.rawMessage}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+    </div>
+  );
+}

package/src/editor/editor-warnings/ItemLocked.tsx

@@ -0,0 +1,63 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+import { ItemDescriptor } from "../pageModel";
+
+export function ItemLocked({ item }: EditorWarningProps) {
+  if (!item.canLock) return;
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (item.hasLock) {
+    return (
+      <EditorWarning title="Item locked" severity="warning">
+        <button
+          onClick={() => {
+            const items: ItemDescriptor[] = [item];
+            editContext!.operations.unlockItems(items);
+          }}
+        >
+          Release lock
+        </button>
+      </EditorWarning>
+    );
+  }
+  if (item.lockedBy == null) {
+    return (
+      <EditorWarning title="Item is locked" severity="warning">
+        <div>Locked by {item.lockedBy}</div>
+        {/* {item.canLock && (
+          <button
+            onClick={() => {
+              const items: ItemDescriptor[] = [item];
+              if ((item as ComponentData).linkedComponentItem)
+                items.push((item as ComponentData).linkedComponentItem);
+
+              editContext!.lockItems(items);
+            }}
+          >
+            Grab lock
+          </button>
+        )} */}
+      </EditorWarning>
+    );
+  }
+  // else {
+  //   return (
+  //     <EditorWarning title="Item not locked" severity="warning">
+  //       {item.canLock && (
+  //         <button
+  //           onClick={() => {
+  //             const items: ItemDescriptor[] = [item];
+  //             if ((item as ComponentData).linkedComponentItem)
+  //               items.push((item as ComponentData).linkedComponentItem);
+
+  //             editContext!.lockItems(items);
+  //           }}
+  //         >
+  //           Lock item
+  //         </button>
+  //       )}
+  //     </EditorWarning>
+  //   );
+  // }
+}

package/src/editor/editor-warnings/NoLanguageWriteAccess.tsx

@@ -0,0 +1,22 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+
+export function NoWriteLanguageAccess({ item }: EditorWarningProps) {
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (!item.canWriteItem) return;
+  if (!item.canWriteLanguage) {
+    return (
+      <EditorWarning
+        title="You dont have language write access."
+        severity="warning"
+      >
+        <p>
+          You can't edit this item because you don't have write access for
+          language {editContext.page?.item.language}.
+        </p>
+      </EditorWarning>
+    );
+  }
+}

package/src/editor/editor-warnings/NoWorkflowWriteAccess.tsx

@@ -0,0 +1,23 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+
+export function NoWorkflowWriteAccess({ item }: EditorWarningProps) {
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (!item.canWriteItem || !item.canWriteLanguage) return;
+  if (!item.canWriteWorkflow) {
+    return (
+      <EditorWarning
+        title="You dont have write access in the current workflow state."
+        severity="warning"
+      >
+        <p>
+          The item is in the workflow state{" "}
+          <span className="font-bold">{item.workflowState}</span> which
+          prevents you from editing.
+        </p>
+      </EditorWarning>
+    );
+  }
+}