@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,76 @@
+import { useRouter } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEditContext } from "../client/editContext";
+import { SimpleMenu } from "../ui/SimpleMenu";
+import { useEffect, useState } from "react";
+export function ControlCenterMenu() {
+  const editContext = useEditContext();
+  const config = editContext?.configuration;
+  const searchParams = useSearchParams();
+  const urlActiveItemKey = searchParams.get("ccpanel");
+  const [activeItemKey, setActiveItemKey] = useState<string | null>(
+    urlActiveItemKey,
+  );
+
+  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 });
+  };
+
+  useEffect(() => {
+    updateUrl(activeItemKey);
+  }, [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,
+        })) || [],
+    };
+  });
+
+  useEffect(() => {
+    const groups = config?.controlCenter.groups;
+    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);
+    }
+  }, [activeItemKey]);
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <SimpleMenu
+      items={items}
+      activeItemKey={activeItemKey}
+      onItemClick={(item) => {
+        setActiveItemKey(item.id);
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { getIndexes } from "../services/indexService";
+
+import { IndexSettings } from "./IndexSettings";
+import { classNames } from "primereact/utils";
+
+export function IndexOverview() {
+  const [indexes, setIndexes] = useState<string[] | undefined>(undefined);
+  const [selectedIndex, setSelectedIndex] = useState<string | undefined>(
+    undefined
+  );
+  useEffect(() => {
+    async function loadIndexes() {
+      const indexes = await getIndexes();
+      if (indexes.indexOf("master") === -1) {
+        indexes.push("master");
+      }
+      if (indexes.indexOf("media") === -1) {
+        indexes.push("media");
+      }
+      setIndexes(indexes);
+    }
+    loadIndexes();
+  }, []);
+  return (
+    <div className="flex items-stretch h-full">
+      <div className="flex flex-col gap-2 border-r border-gray-200">
+        <div className="flex items-center justify-center p-2 min-w-40 border-b border-gray-200">
+          Index
+        </div>
+        {indexes?.map((index) => (
+          <div
+            key={index}
+            onClick={() => setSelectedIndex(index)}
+            className={classNames(
+              "cursor-pointer p-2 px-6 hover:bg-gray-100 text-sm",
+              selectedIndex === index && "bg-gray-100"
+            )}
+          >
+            {index}
+          </div>
+        ))}
+      </div>
+      <div className="flex-1 p-2">
+        {selectedIndex && <IndexSettings index={{ name: selectedIndex }} />}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,266 @@
+import { useEffect, useState, useCallback, ReactNode } from "react";
+import {
+  getIndexStatus,
+  rebuildIndex,
+  setupIndex,
+  setupRebuildJob,
+} from "../services/indexService";
+import { IndexStatus } from "../../types";
+import { Button } from "primereact/button";
+import { Spinner } from "../ui/Spinner";
+import { useEditContext } from "../client/editContext";
+import { FullItem } from "../pageModel";
+import { ProgressSpinner } from "primereact/progressspinner";
+
+export function IndexSettings({ index }: { index: { name: string } }) {
+  const editContext = useEditContext();
+  const [indexStatus, setIndexStatus] = useState<IndexStatus | undefined>(
+    undefined
+  );
+  const [settingsItem, setSettingsItem] = useState<FullItem | undefined>(
+    undefined
+  );
+  const [rebuildJobItem, setRebuildJobItem] = useState<FullItem | undefined>(
+    undefined
+  );
+
+  const fetchStatus = useCallback(() => {
+    getIndexStatus(index.name).then(async (result) => {
+      setIndexStatus(result);
+
+      if (result?.settingsItemId) {
+        const settingsItem = await editContext?.itemsRepository.getItem({
+          id: result.settingsItemId,
+          language: "en",
+          version: 0,
+        });
+        setSettingsItem(settingsItem);
+
+        if (result.rebuildJobItemId) {
+          const rebuildJobItem = await editContext?.itemsRepository.getItem({
+            id: result.rebuildJobItemId,
+            language: "en",
+            version: 0,
+          });
+          setRebuildJobItem(rebuildJobItem);
+        } else {
+          setRebuildJobItem(undefined);
+        }
+      } else {
+        setSettingsItem(undefined);
+        setRebuildJobItem(undefined);
+      }
+    });
+  }, [index]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (indexStatus?.isRunning) {
+      interval = setInterval(() => {
+        fetchStatus();
+      }, 1000);
+    }
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [indexStatus?.isRunning, fetchStatus]);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  useEffect(() => {
+    setIndexStatus(undefined);
+  }, [index]);
+
+  if (!indexStatus) {
+    return (
+      <div className="flex flex-col h-full justify-center items-center gap-2 text-gray-500">
+        <Spinner />
+        Loading...
+      </div>
+    );
+  }
+
+  async function setupIndexAndRefresh(index: string) {
+    await setupIndex(index);
+    setIndexStatus(undefined);
+    fetchStatus();
+  }
+
+  async function setupRebuildJobAndRefresh(index: string) {
+    await setupRebuildJob(index);
+    setIndexStatus(undefined);
+    fetchStatus();
+  }
+
+  async function rebuildIndexAndRefresh(index: string) {
+    await rebuildIndex(index);
+    setTimeout(() => {
+      fetchStatus();
+    }, 1000);
+  }
+
+  return (
+    <div className="flex flex-col px-2 py-1 h-full">
+      <div className="flex flex-row items-center border-b p-1 mb-3">
+        <div className="">{index.name}</div>
+      </div>
+      <div className="ml-2">
+        {settingsItem && (
+          <>
+            <IndexProp headline="Settings">
+              <a
+                className="cursor-pointer underline"
+                onClick={() => {
+                  if (indexStatus.settingsItemId) {
+                    editContext?.loadItem(indexStatus.settingsItemId);
+                    editContext?.switchView("content-editor");
+                  }
+                }}
+              >
+                {settingsItem.path}
+              </a>
+            </IndexProp>
+            <IndexProp headline="Service">{indexStatus.serviceUrl}</IndexProp>
+            <IndexProp headline="Name">{indexStatus.name}</IndexProp>
+            <IndexProp headline="Rebuild Job">
+              {rebuildJobItem && (
+                <>
+                  <a
+                    className="cursor-pointer underline"
+                    onClick={() => {
+                      if (indexStatus.rebuildJobItemId) {
+                        editContext?.loadItem(indexStatus.rebuildJobItemId);
+                        editContext?.switchView("content-editor");
+                      }
+                    }}
+                  >
+                    {rebuildJobItem.path}
+                  </a>
+                  {indexStatus.canRebuild && !indexStatus.isRunning && (
+                    <div className="my-2">
+                      <Button
+                        label="Rebuild Index"
+                        onClick={() => {
+                          rebuildIndexAndRefresh(index.name);
+                        }}
+                      />
+                    </div>
+                  )}
+                  {indexStatus.isRunning && (
+                    <div className="my-2 flex flex-row items-center justify-start">
+                      <div className="mr-2" style={{ width: "20px" }}>
+                        <ProgressSpinner
+                          style={{ width: "20px", height: "20px" }}
+                        />{" "}
+                      </div>
+                      Rebuilding... {indexStatus.rebuildCount.toLocaleString()}{" "}
+                      items, {indexStatus.rebuildTokensCount.toLocaleString()}{" "}
+                      tokens
+                    </div>
+                  )}
+                </>
+              )}
+              {!rebuildJobItem && (
+                <>
+                  <div className="text-sm text-gray-500 mb-2">
+                    No rebuild job found for this index
+                  </div>
+                  <Button
+                    label="Setup Rebuild Job"
+                    onClick={() => {
+                      setupRebuildJobAndRefresh(index.name);
+                    }}
+                  />
+                </>
+              )}
+            </IndexProp>
+            <IndexProp headline="Last Rebuild">
+              {indexStatus.lastRebuildStartDateTime
+                ? new Date(
+                    indexStatus.lastRebuildStartDateTime
+                  ).toLocaleString()
+                : "Never"}
+            </IndexProp>
+            {indexStatus.exists && (
+              <>
+                <IndexProp headline="Index Status">
+                  {Object.entries(indexStatus.languages).map(
+                    ([language, { numberOfItems, lastUpdated, status }]) => (
+                      <div
+                        key={language}
+                        className="flex items-center gap-2 text-xs"
+                      >
+                        <div className="font-bold">{language}:</div>
+                        <span
+                          className={`text-gray-500 ml-2 ${
+                            status === "Available"
+                              ? "text-green-500"
+                              : "text-yellow-500"
+                          }`}
+                        >
+                          {status}
+                        </span>
+                        <span className="text-gray-500">
+                          Items: {numberOfItems.toLocaleString()}{" "}
+                        </span>
+                        <span className="text-gray-500">
+                          Last updated: {new Date(lastUpdated).toLocaleString()}
+                        </span>
+                      </div>
+                    )
+                  )}
+                </IndexProp>
+              </>
+            )}
+            {indexStatus.errors?.length > 0 && (
+              <div>
+                <div>Errors:</div>
+                {indexStatus.errors.map((error, index) => (
+                  <div
+                    key={index}
+                    className="mt-2 p-2 bg-red-100 rounded-md text-red-800 border border-red-300 "
+                  >
+                    <div className="font-bold">{error.message}</div>
+                    <div className="text-sm">{error.details}</div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+        {!indexStatus?.exists && (
+          <div>
+            <div className="text-sm text-gray-500 mb-2">
+              Index does not exist
+            </div>
+            <Button
+              label="Setup index"
+              onClick={() => {
+                setupIndexAndRefresh(index.name);
+              }}
+            />
+          </div>
+        )}{" "}
+      </div>
+    </div>
+  );
+}
+
+function IndexProp({
+  headline,
+  children,
+}: {
+  headline: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className="mb-2">
+      <div className="font-bold text-sm">{headline}</div>
+      <div className="text-sm">{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+
+export function Info() {
+  const editContext = useEditContext();
+  const user = editContext?.user;
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-gray-800">
+          System Information
+        </h2>
+
+        {/* User Information */}
+        {user && (
+          <div className="rounded-lg border border-gray-200 bg-white p-4">
+            <h3 className="mb-3 text-lg font-medium text-gray-700">
+              User Information
+            </h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Name
+                </label>
+                <p className="text-gray-900">{user.displayName || user.name}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Email
+                </label>
+                <p className="text-gray-900">{user.email || "Not available"}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  User Type
+                </label>
+                <p className="text-gray-900">
+                  {user.isLimitedPreviewUser
+                    ? "Limited Preview User"
+                    : "Regular User"}
+                </p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Session ID
+                </label>
+                <p className="font-mono text-xs text-gray-900">
+                  {editContext?.sessionId}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Editor Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Editor Information
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Active Sessions
+              </label>
+              <p className="text-gray-900">
+                {editContext?.activeSessions?.length || 0}
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Mobile View
+              </label>
+              <p className="text-gray-900">
+                {editContext?.isMobile ? "Yes" : "No"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Technical Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Technical Information
+          </h3>
+          <div className="space-y-2 text-sm">
+            <div>
+              <span className="font-medium text-gray-500">User Agent:</span>
+              <p className="mt-1 font-mono text-xs break-all text-gray-900">
+                {navigator.userAgent}
+              </p>
+            </div>
+            <div>
+              <span className="font-medium text-gray-500">Viewport Size:</span>
+              <p className="text-gray-900">
+                {window.innerWidth} × {window.innerHeight}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}