@alpaca-editor/core 1.0.0

package/src/editor/reviews/Comments.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { Comment } from "./Comment";
+import { Comment as CommentType } from "../../types";
+import { SimpleToolbar } from "../ui/SimpleToolbar";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+
+export function Comments() {
+  const editContext = useEditContext();
+
+  const [comments, setComments] = useState<CommentType[]>([]);
+
+  useEffect(() => {
+    const comments = editContext?.comments || [];
+    comments.sort((a, b) => a.position - b.position);
+    setComments(comments);
+  }, [editContext]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <SimpleToolbar>
+        <SimpleIconButton
+          id="add-comment"
+          icon="pi pi-plus"
+          label="Add Comment"
+          onClick={() => {
+            editContext?.addComment();
+          }}
+        />
+        <SimpleIconButton
+          selected={editContext?.showComments}
+          icon="pi pi-eye"
+          label="Show Comments"
+          onClick={() => {
+            editContext?.setShowComments((x) => !x);
+          }}
+        />
+      </SimpleToolbar>
+
+      <div className="flex-1 overflow-auto">
+        <div className="p-4 bg-gray-50 border-l border-gray-200 h-fill-available">
+          {comments.map((comment) => (
+            <Comment key={comment.id} comment={comment} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/reviews/PreviewInfo.tsx

@@ -0,0 +1,35 @@
+import { useEditContext } from "../../client-components";
+import { formatDate } from "../utils";
+
+export function PreviewInfo() {
+  const editContext = useEditContext();
+  if (!editContext) return null;
+  const review = editContext.reviews.reviews.find(
+    (x) => x.reviewerEmail === editContext.user?.email
+  );
+
+  return (
+    <div className="flex gap-3 items-center">
+      <div className="text-white">
+        Welcome to your page <b>preview</b>, {editContext.user?.displayName}!
+        <div className="text-gray-300 text-xs">
+          {editContext.contentEditorItem?.path}{" "}
+          {editContext.contentEditorItem?.language}{" "}
+          {editContext.contentEditorItem?.version}
+        </div>
+      </div>
+      {review?.approvalDate && (
+        <i
+          className="pi pi-check text-green-400 text-2xl font-bold"
+          title={"Approved " + formatDate(new Date(review.approvalDate))}
+        ></i>
+      )}
+      {review?.rejectedDate && (
+        <i
+          className="pi pi-times text-red-400 text-2xl font-bold"
+          title={"Rejected " + formatDate(new Date(review.rejectedDate))}
+        ></i>
+      )}
+    </div>
+  );
+}

package/src/editor/reviews/Reviews.tsx

@@ -0,0 +1,280 @@
+import { SimpleToolbar } from "../ui/SimpleToolbar";
+import { useEffect, useRef, useState } from "react";
+import { SimpleTable } from "../ui/SimpleTable";
+import { Reviewer } from "../../types";
+import { Review } from "../../types";
+import { inviteReviewer, addReview } from "../services/reviewsService";
+import { useEditContext } from "../client/editContext";
+import { Checkbox } from "primereact/checkbox";
+import { formatDate } from "../utils";
+import { InputText } from "primereact/inputtext";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Button } from "primereact/button";
+import uuid from "react-uuid";
+
+type ReviewData = {
+  review: Review;
+  checked: boolean;
+  updating?: boolean;
+  error?: string;
+};
+
+export function Reviews() {
+  const [reviewData, setReviewData] = useState<ReviewData[]>([]);
+  const [newReviewer, setNewReviewer] = useState<Reviewer>({
+    email: "",
+    name: "",
+  });
+  const overlayPanelRef = useRef<OverlayPanel>(null);
+
+  const editContext = useEditContext();
+
+  const [showErrors, setShowErrors] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+
+  useEffect(() => {
+    if (editContext?.reviews) {
+      setReviewData(
+        editContext.reviews.reviews.map((x) => ({
+          review: x,
+          checked: false,
+        }))
+      );
+    }
+  }, [editContext?.reviews]);
+
+  // Simple email validation function
+  const isValidEmail = (email: string): boolean => {
+    // This regular expression is not perfect but works for basic validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const emailAlreadyExists = (email: string): boolean => {
+    return reviewData.some((x) => x.review?.reviewerEmail === email);
+  };
+
+  const getStatus = (reviewData?: ReviewData) => {
+    if (reviewData?.updating) {
+      return <i className="pi pi-spinner pi-spin" />;
+    }
+    if (reviewData?.error) {
+      return (
+        <div className="flex items-center gap-1">
+          <i className="pi pi-times text-red-500 " /> {reviewData.error}
+        </div>
+      );
+    }
+    const review = reviewData?.review;
+
+    if (review) {
+      if (review.approvalDate) {
+        return (
+          <div className="flex flex-row gap-1">
+            <i className="pi pi-check text-green-500 " />
+            Approved {formatDate(new Date(review.approvalDate))}
+          </div>
+        );
+      }
+      if (review.rejectedDate) {
+        return (
+          <div className="flex flex-row gap-1">
+            <i className="pi pi-times text-red-500 " />
+            Rejected {formatDate(new Date(review.rejectedDate))}
+          </div>
+        );
+      }
+      if (review.invitationSentDate) {
+        return (
+          "Invitation Sent " + formatDate(new Date(review.invitationSentDate))
+        );
+      }
+    }
+    return "Not yet invited";
+  };
+
+  const sendInvitations = () => {
+    setShowErrors(true);
+    const invalidReviewers = reviewData.filter(
+      (x) =>
+        x.checked &&
+        (!x.review?.reviewerEmail || !isValidEmail(x.review?.reviewerEmail))
+    );
+    if (invalidReviewers.length > 0) {
+      return;
+    }
+
+    reviewData.forEach(async (x) => {
+      if (!editContext?.currentItemDescriptor) return;
+      if (x.checked) {
+        x.updating = true;
+        setReviewData([...reviewData]);
+        const result = await inviteReviewer(x.review);
+        if (result.response.status !== 200) {
+          x.error = "Error inviting reviewer";
+        }
+        x.updating = false;
+        x.updating = false;
+        setReviewData([...reviewData]);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <SimpleToolbar>
+        <SimpleIconButton
+          label="Add Reviewer"
+          icon="pi pi-plus"
+          onClick={(x) => {
+            overlayPanelRef.current?.toggle(x);
+            setTimeout(() => {
+              document.getElementById("name")?.focus();
+            }, 100);
+          }}
+        />
+        <SimpleIconButton
+          label="Send Invitations"
+          icon="pi pi-send"
+          disabled={!reviewData.some((x) => x.checked)}
+          onClick={sendInvitations}
+        />
+      </SimpleToolbar>
+      <OverlayPanel ref={overlayPanelRef}>
+        <div className="p-2 text-xs flex flex-col gap-2">
+          <div className="flex flex-col gap-2">
+            <label htmlFor="name">Name</label>
+
+            <InputText
+              id="name"
+              className="w-full"
+              value={newReviewer?.name}
+              onChange={(e) => {
+                setNewReviewer((x) => ({
+                  ...x!,
+                  name: e.target.value,
+                }));
+              }}
+              autoFocus
+            />
+            {showErrors && !newReviewer?.name && (
+              <small style={{ color: "red" }}>Name is required</small>
+            )}
+            <div className="flex flex-col gap-2">
+              <label htmlFor="email">Email</label>
+              <InputText
+                id="email"
+                className="w-full"
+                value={newReviewer?.email}
+                onChange={(e) => {
+                  setNewReviewer((x) => ({
+                    ...x!,
+                    email: e.target.value,
+                  }));
+                }}
+              />
+              {showErrors && !isValidEmail(newReviewer.email) && (
+                <small style={{ color: "red" }}>
+                  Not a valid email address
+                </small>
+              )}
+              {showErrors && emailAlreadyExists(newReviewer.email) && (
+                <small style={{ color: "red" }}>Email already exists</small>
+              )}
+            </div>
+
+            <Button
+              label="Add Reviewer"
+              disabled={waiting}
+              icon="pi pi-plus"
+              onClick={async () => {
+                if (!editContext?.contentEditorItem) return;
+                setShowErrors(true);
+                if (emailAlreadyExists(newReviewer.email)) {
+                  return;
+                }
+                if (!isValidEmail(newReviewer.email) || !newReviewer.name) {
+                  return;
+                }
+                setWaiting(true);
+                await addReview({
+                  id: uuid(),
+                  reviewerName: newReviewer!.name,
+                  reviewerEmail: newReviewer!.email,
+                  itemId: editContext.contentEditorItem.id,
+                  language: editContext.contentEditorItem.language,
+                  version: editContext.contentEditorItem.version,
+                });
+
+                editContext.reviews.loadReviews();
+                overlayPanelRef.current?.hide();
+                setNewReviewer({
+                  email: "",
+                  name: "",
+                });
+
+                setWaiting(false);
+              }}
+            />
+          </div>
+        </div>
+      </OverlayPanel>
+      <div className="flex-1 relative">
+        <div className="absolute inset-0 overflow-auto">
+          <SimpleTable
+            columns={[
+              {
+                header: (
+                  <Checkbox
+                    checked={reviewData.every((x) => x.checked)}
+                    onChange={(e) => {
+                      setReviewData((reviews) =>
+                        reviews.map((x) => ({
+                          ...x,
+                          checked: e.checked ?? false,
+                        }))
+                      );
+                    }}
+                  />
+                ),
+                body: (x) => (
+                  <Checkbox
+                    checked={x.checked}
+                    onChange={(e) => {
+                      setReviewData((reviews) => {
+                        // It’s safer to update by index or assign an id to each reviewer.
+                        // For brevity, we’re using the email to locate the reviewer.
+                        const index = reviews.findIndex(
+                          (y) =>
+                            y.review?.reviewerEmail === x.review?.reviewerEmail
+                        );
+                        if (index !== -1) {
+                          reviews[index]!.checked = e.checked ?? false;
+                        }
+                        return [...reviews];
+                      });
+                    }}
+                  />
+                ),
+              },
+              {
+                header: "Name",
+                body: (x) => x.review?.reviewerName,
+              },
+              {
+                header: "Email",
+                body: (x) => x.review?.reviewerEmail,
+              },
+              {
+                header: "Status",
+                body: (z) => getStatus(z),
+              },
+            ]}
+            items={reviewData}
+          />
+        </div>
+      </div>
+    </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 mr-3" />,
+  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 mr-3" />,
+  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,155 @@
+import { AiContext } from "../ai/AiTerminal";
+import { EditContextType } from "../client/editContext";
+import { ItemDescriptor } from "../pageModel";
+import { ExecutionResult, 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,
+  allowedFunctions?: string[],
+  addContextContent?: boolean,
+  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,
+      selection: editContext.selection,
+      sessionId: editContext.sessionId,
+      allowedFunctions,
+      addContextContent,
+      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() };
+}