@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/reviews/SuggestedEdit.tsx

@@ -0,0 +1,316 @@
+import { SuggestedEdit as SuggestedEditType } from "../../types";
+import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import {
+  deleteSuggestedEdit,
+  createOrUpdateSuggestedEdit,
+} from "../services/suggestedEditsService";
+import { Button } from "../../components/ui/button";
+import { formatDate } from "../utils";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { DiffView } from "./DiffView";
+// Import lucide icons (adjust names as needed)
+import { Trash2, GalleryVertical, Check, Brush, XCircle } from "lucide-react";
+// Import patch functions from the diff library.
+import { createPatch, applyPatch } from "diff";
+import { cn } from "../../lib/utils";
+
+export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
+  const editContext = useEditContext();
+  const ref = useRef<HTMLDivElement>(null);
+  const overlayPanelRef = useRef<OverlayPanel>(null);
+  const [item, setItem] = useState<any>(null);
+  const [patchPossible, setPatchPossible] = useState<boolean>(true);
+
+  const [patchWarning, setPatchWarning] = useState<string>("");
+  const [applied, setApplied] = useState<boolean>(false);
+
+  const [ignoreFormatting, setIgnoreFormatting] = useState(true);
+  const [clipUnchanged, setClipUnchanged] = useState(true);
+
+  const canApply = editContext?.mode === "edit" && edit.status !== "Applied";
+
+  // Load the full item from the repository.
+  useEffect(() => {
+    if (
+      editContext?.itemsRepository &&
+      edit.itemId &&
+      edit.mainItemLanguage &&
+      edit.mainItemVersion !== undefined
+    ) {
+      editContext.itemsRepository
+        .getItem({
+          id: edit.itemId,
+          language: edit.mainItemLanguage,
+          version: edit.mainItemVersion,
+        })
+        .then((loadedItem) => {
+          setItem(loadedItem);
+          // When the item loads, check if the patch is applicable.
+          checkAndComputePatch(loadedItem);
+        })
+        .catch((err) => {
+          console.error("Error loading item:", err);
+        });
+    }
+  }, [
+    edit.itemId,
+    edit.mainItemLanguage,
+    edit.mainItemVersion,
+    editContext?.itemsRepository,
+  ]);
+
+  // Determine if this suggested edit is selected based on the focused field.
+  const isSelected =
+    editContext?.focusedField &&
+    editContext.focusedField.fieldId === edit.fieldId &&
+    editContext.focusedField.item.id === edit.itemId;
+
+  useEffect(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [isSelected]);
+
+  // When a suggested edit is clicked, update the focused field and select the item.
+  function handleSelectSuggestedEdit() {
+    if (edit.fieldId) {
+      editContext?.setFocusedField(
+        {
+          fieldId: edit.fieldId,
+          item: {
+            id: edit.itemId,
+            language: edit.mainItemLanguage,
+            version: edit.mainItemVersion,
+          },
+        },
+        false,
+      );
+      // Also select the item.
+      editContext?.select?.([edit.itemId]);
+    }
+  }
+
+  // Render contextual info by retrieving item and field names from the loaded item.
+  const renderContextInfo = () => {
+    const itemName = item ? item.name : null;
+    const fieldName =
+      item && item.fields
+        ? item.fields.find(
+            (f: { id: string; name?: string }) => f.id === edit.fieldId,
+          )?.name
+        : null;
+    if (!itemName && !fieldName) return null;
+    return (
+      <div className="mt-3 flex items-center border-t pt-3 text-xs">
+        {itemName && <div className="text-2xs text-gray-500">{itemName}</div>}
+        {fieldName && itemName && (
+          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
+        )}
+        {fieldName && <div className="text-2xs text-gray-500">{fieldName}</div>}
+      </div>
+    );
+  };
+
+  // Allow deletion only if the current user is the author.
+  const canDelete = edit.author === editContext?.user?.name;
+
+  // Render the header with author info, creation date, and control buttons.
+  const renderHeader = () => {
+    return (
+      <div className="mb-3 flex items-start justify-between">
+        <div>
+          <div className="text-xs font-bold text-gray-900" title={edit.author}>
+            {edit.authorDisplayName || edit.author}
+          </div>
+          <div className="text-xs text-gray-500">
+            {edit.created ? formatDate(new Date(edit.created)) : ""}
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          {/* Show apply patch control if not yet applied */}
+          {canApply && !applied && patchPossible && (
+            <SimpleIconButton
+              className="text-gray-500"
+              icon={<Check size={14} />}
+              label="Apply"
+              onClick={handleApplyPatch}
+            />
+          )}
+          {applied && (
+            <i
+              className="pi pi-check text-bold px-1 text-xs text-green-500"
+              title={
+                "Applied by " +
+                edit.updatedBy +
+                " (" +
+                formatDate(new Date(edit.updated!)) +
+                ")"
+              }
+            ></i>
+          )}
+          {canDelete && (
+            <SimpleIconButton
+              className="text-gray-500"
+              icon={<Trash2 size={14} />}
+              label="Delete"
+              onClick={(e: any) => overlayPanelRef.current?.toggle(e)}
+            />
+          )}
+          <OverlayPanel ref={overlayPanelRef}>
+            <Button
+              className="m-2"
+              variant="outline"
+              onClick={async () => {
+                await deleteSuggestedEdit(edit);
+              }}
+            >
+              Delete
+            </Button>
+          </OverlayPanel>
+        </div>
+      </div>
+    );
+  };
+
+  // Render toggle buttons using SimpleIconButtons.
+  const renderDiffToggleButtons = () => {
+    return (
+      <div className="mb-2 flex gap-2">
+        <SimpleIconButton
+          icon={<Brush size={14} className="p-0.5" />}
+          label="Ignore Formatting"
+          onClick={() => setIgnoreFormatting((prev) => !prev)}
+          className={cn("text-gray-500", ignoreFormatting ? "bg-gray-200" : "")}
+        />
+        <SimpleIconButton
+          icon={<GalleryVertical size={14} className="p-0.5" />}
+          label="Clip"
+          onClick={() => setClipUnchanged((prev) => !prev)}
+          className={cn("text-gray-500", clipUnchanged ? "bg-gray-200" : "")}
+        />
+      </div>
+    );
+  };
+
+  // Helper: Check if the patch is applicable to the current field value.
+  async function checkAndComputePatch(loadedItem: any) {
+    const field = loadedItem?.fields?.find(
+      (f: { id: string }) => f.id === edit.fieldId,
+    );
+    if (!field) return;
+    const currentValue: string = field.rawValue || "";
+    const patch = createPatch("field", edit.oldValue, edit.newValue);
+    const patchedCandidate = applyPatch(currentValue, patch);
+    if (patchedCandidate === false || typeof patchedCandidate !== "string") {
+      setPatchPossible(false);
+      setPatchWarning("Patch cannot be applied cleanly.");
+    } else {
+      setPatchPossible(true);
+      setPatchWarning("");
+    }
+  }
+
+  // Handler for applying the patch using editContext.operations.editField.
+  async function handleApplyPatch() {
+    if (!patchPossible) return;
+    if (!editContext) return;
+
+    // Recalculate the patch immediately before applying
+    const field = item?.fields?.find(
+      (f: { id: string }) => f.id === edit.fieldId,
+    );
+    if (!field) return;
+    const currentValue: string = field.rawValue || "";
+    const patch = createPatch("field", edit.oldValue, edit.newValue);
+    const patchedCandidate = applyPatch(currentValue, patch);
+
+    if (patchedCandidate === false || typeof patchedCandidate !== "string") {
+      setPatchWarning(
+        "Patch cannot be applied cleanly to current field value.",
+      );
+      return;
+    }
+
+    await editContext.operations.editField({
+      field: {
+        fieldId: edit.fieldId,
+        item: {
+          id: edit.itemId,
+          language: edit.mainItemLanguage,
+          version: edit.mainItemVersion,
+        },
+      },
+      value: patchedCandidate,
+      rawValue: patchedCandidate,
+      refresh: "immediate",
+    });
+    // Update the suggestion status to "Applied" and persist the update.
+    edit.status = "Applied";
+    await createOrUpdateSuggestedEdit(edit);
+    setApplied(true);
+    setPatchWarning("");
+  }
+
+  // Handler for replacing the field content completely using editContext.operations.editField.
+  async function handleReplaceCompletely() {
+    if (!editContext) return;
+    await editContext.operations.editField({
+      field: {
+        fieldId: edit.fieldId,
+        item: {
+          id: edit.itemId,
+          language: edit.mainItemLanguage,
+          version: edit.mainItemVersion,
+        },
+      },
+      value: edit.newValue,
+      rawValue: edit.newValue,
+      refresh: "immediate",
+    });
+    edit.status = "Applied";
+    await createOrUpdateSuggestedEdit(edit);
+    setApplied(true);
+    setPatchWarning("");
+  }
+
+  return (
+    <div
+      ref={ref}
+      key={edit.id}
+      data-testid="suggested-edit"
+      className={`mb-3 cursor-pointer rounded-lg border-2 bg-white p-3 shadow-sm hover:bg-gray-50 ${
+        isSelected ? "border-blue-500" : "border-transparent"
+      }`}
+      onClick={handleSelectSuggestedEdit}
+    >
+      {renderHeader()}
+      {renderDiffToggleButtons()}
+
+      <div className="text-sm whitespace-pre-wrap text-gray-700">
+        <DiffView
+          oldText={edit.oldValue}
+          newText={edit.newValue}
+          ignoreFormatting={ignoreFormatting}
+          clipUnchanged={clipUnchanged}
+          clipThreshold={50}
+          clipContext={10}
+        />
+        {canApply && patchWarning && (
+          <div className="mt-1 text-xs text-red-500">
+            {patchWarning}
+            <a
+              className="ml-2 cursor-pointer underline"
+              onClick={handleReplaceCompletely}
+            >
+              Click here to replace the field content.
+            </a>
+          </div>
+        )}
+      </div>
+
+      {renderContextInfo()}
+    </div>
+  );
+}

package/src/editor/reviews/reviewCommands.tsx

@@ -0,0 +1,47 @@
+import { Command, CommandContext, CommandData } from "../commands/commands";
+import { approveReview, rejectReview } from "../services/reviewsService";
+
+export const approveReviewCommand: Command<CommandData> = {
+  id: "approveReview",
+  label: "Approve Page",
+  icon: <i className="pi pi-check text-green-500" />,
+  execute: async (context: CommandContext<CommandData>) => {
+    if (!context.editContext.currentItemDescriptor) {
+      return;
+    }
+    await approveReview(context.editContext.currentItemDescriptor);
+    context.editContext.showToast({
+      summary: "Page/item approved",
+      severity: "success",
+    });
+  },
+  disabled: (context) => {
+    return !isReviewer(context);
+  },
+};
+export const rejectReviewCommand: Command<CommandData> = {
+  id: "rejectReview",
+  label: "Reject Page",
+  icon: <i className="pi pi-times text-red-500" />,
+  execute: async (context: CommandContext<CommandData>) => {
+    if (!context.editContext.currentItemDescriptor) {
+      return;
+    }
+    await rejectReview(context.editContext.currentItemDescriptor);
+    context.editContext.showToast({
+      summary: "Page/item rejected",
+      severity: "error",
+    });
+  },
+  disabled: (context) => {
+    return !isReviewer(context);
+  },
+};
+
+function isReviewer(context: CommandContext<CommandData>) {
+  return (
+    context.editContext.reviews.reviews.find(
+      (x) => x.reviewerEmail === context.editContext.user?.email,
+    ) !== undefined
+  );
+}

package/src/editor/reviews/useReviews.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState, useMemo } from "react";
+import { getReviewers, getReviews } from "../services/reviewsService";
+
+import { Review } from "../../types";
+import uuid from "react-uuid";
+import { ItemDescriptor } from "../pageModel";
+
+export function useReviews({
+  currentItemDescriptor,
+  addSocketMessageListener,
+}: {
+  currentItemDescriptor?: ItemDescriptor;
+  addSocketMessageListener: (
+    callback: (message: { type: string; payload: any }) => void
+  ) => void;
+}) {
+  const [reviews, setReviews] = useState<Review[]>([]);
+
+  const loadReviews = async () => {
+    if (!currentItemDescriptor) return;
+    const reviewers = await getReviewers(
+      currentItemDescriptor.id,
+      currentItemDescriptor.language
+    );
+
+    const reviewsResult = await getReviews(
+      currentItemDescriptor.id,
+      currentItemDescriptor.language,
+      currentItemDescriptor.version
+    );
+
+    const reviews = reviewsResult.data;
+
+    if (!reviews) return;
+
+    reviewers.data?.forEach((reviewer) => {
+      if (!currentItemDescriptor) return;
+      const existingReview = reviews.find(
+        (r) => r.reviewerEmail === reviewer.email
+      );
+
+      if (!existingReview) {
+        reviews.push({
+          id: uuid(),
+          itemId: currentItemDescriptor.id,
+          language: currentItemDescriptor.language,
+          version: currentItemDescriptor.version,
+          reviewerName: reviewer.name,
+          reviewerEmail: reviewer.email,
+        });
+      }
+    });
+
+    setReviews(reviews);
+  };
+
+  useEffect(() => {
+    loadReviews();
+  }, [currentItemDescriptor]);
+
+  useEffect(() => {
+    return addSocketMessageListener((message) => {
+      if (message.type === "reviews-updated") {
+        loadReviews();
+      }
+    });
+  }, [currentItemDescriptor]);
+
+  return useMemo(() => ({ reviews, loadReviews }), [reviews]);
+}

package/src/editor/services/aiService.ts

@@ -0,0 +1,173 @@
+import { AiContext } from "../ai/AiTerminal";
+import { EditContextType } from "../client/editContext";
+import { FieldDescriptor, ItemDescriptor } from "../pageModel";
+
+import { ExecutionResult, get, post } from "./serviceHelper";
+
+export type AiProfile = {
+  id: string;
+  name: string;
+  instructions: string;
+  defaultModel: string;
+  models: string[];
+  prompts: { prompt: string; title: string }[];
+  errorMessage?: string;
+};
+
+export async function loadAiProfiles(
+  item: ItemDescriptor,
+): Promise<AiProfile[]> {
+  let url = "/alpaca/editor/ai/profiles";
+
+  const response = await post<AiProfile[]>(url, item);
+
+  if (response.type !== "success") {
+    throw new Error("Error loading AI profiles");
+  }
+
+  return response.data || [];
+}
+
+type Message = {
+  content: string;
+  name: string;
+  role: string;
+};
+
+export async function executePrompt(
+  messages: Message[],
+  editContext: EditContextType,
+  createAiContext: ({ editContext }: { editContext: any }) => AiContext,
+  promptOptions: {
+    allowedFunctions?: string[];
+    addContextContent?: boolean;
+    addAllContent?: boolean;
+    profile?: string;
+  },
+
+  options?: RequestInit,
+  model?: string,
+  callback?: (response: any) => void,
+): Promise<any> {
+  const context = createAiContext({ editContext });
+
+  const response = await fetch(context.endpoint, {
+    method: "POST",
+    body: JSON.stringify({
+      messages,
+      ...context.promptData,
+      sessionId: editContext.sessionId,
+      ...promptOptions,
+      model,
+    }),
+
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    ...options,
+  });
+
+  if (!response?.body) return null;
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  let result = null;
+
+  while (true) {
+    const { done, value } = await reader.read();
+
+    if (done) {
+      break;
+    }
+
+    buffer += decoder.decode(value, { stream: true }); // 'stream: true' ensures that any incomplete multi-byte characters aren't malformed.
+
+    // Split the buffer by newline and keep the last partial line for the next iteration.
+    const lines = buffer.split("\n");
+
+    if (lines.length > 0) {
+      buffer = lines.pop() || ""; // Incomplete line (if any) is kept for the next iteration.
+
+      for (let line of lines) {
+        if (line.trim() === "") continue; // Skip empty lines if any.
+
+        try {
+          const jsonData = JSON.parse(line);
+          callback?.(jsonData);
+          result = jsonData;
+        } catch (e) {
+          console.error("Error parsing line:" + line, e);
+        }
+      }
+    }
+  }
+
+  // If there's any remaining content in the buffer after processing all chunks, try to process it.
+  if (buffer.trim() !== "") {
+    try {
+      const jsonData = JSON.parse(buffer);
+      result = jsonData;
+    } catch (e) {
+      console.error("Error parsing the final buffer content:", e);
+    }
+  }
+
+  return result;
+}
+
+export async function executeSearch({
+  query,
+  editContext,
+  maxResults = 10,
+  index,
+  rootItemIds,
+  skipValidation = false,
+}: {
+  query: string;
+  editContext: EditContextType;
+  maxResults: number;
+  index: string;
+  rootItemIds?: string[];
+  skipValidation?: boolean;
+}): Promise<ExecutionResult<unknown>> {
+  const response = await fetch("/alpaca/editor/ai/search", {
+    method: "POST",
+    body: JSON.stringify({
+      contextItem: {
+        id: editContext.currentItemDescriptor?.id,
+        language: "en",
+        version: 0,
+      },
+      query,
+      index,
+      maxResults,
+      rootItemIds,
+      skipValidation,
+    }),
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) return { type: "error", response };
+
+  return { type: "success", response, data: await response.json() };
+}
+
+export async function generateImage(
+  options: FieldDescriptor & {
+    prompt: string;
+    sessionId: string;
+    pageItem: ItemDescriptor;
+  },
+): Promise<ExecutionResult<any>> {
+  const response = await post("/alpaca/editor/ai/generateImage", options);
+  return response;
+}
+export async function requestQuota() {
+  await get("/alpaca/editor/ai/requestQuota");
+}