@alpaca-editor/core 1.0.3939 → 1.0.3942

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

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

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

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

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