@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,301 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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>
-    );
-  }
-}