@alpaca-editor/core 1.0.3813 → 1.0.3817

package/src/editor/MainLayout.tsx

@@ -4,11 +4,11 @@ import { EditorView } from "../config/types";
 
 import { classNames } from "primereact/utils";
 import { useEditContext } from "./client/editContext";
-import { NavigatorIcon } from "./ui/Icons";
 
 import { SidebarView } from "./sidebar/SidebarView";
 import { Splitter, SplitterPanel } from "./ui/Splitter";
 import { ViewSelector } from "./sidebar/ViewSelector";
+import { Layers } from "lucide-react";
 
 export default function MainLayout({
   view,
@@ -36,7 +36,7 @@ export default function MainLayout({
       defaultSize: 350,
       content: (
         <div
-          className="w-full h-full"
+          className="h-full w-full"
           ref={leftSidebarRef}
           style={{ wordBreak: "normal" }}
         >
@@ -80,8 +80,7 @@ export default function MainLayout({
             localStorageKey="editor.panelSizes"
             expandLabel={
               <div className="flex items-center justify-center">
-                <NavigatorIcon />
-
+                <Layers size={14} />
                 <div className="mt-3">{rightSidebarTitle} </div>
               </div>
             }

package/src/editor/Titlebar.tsx

@@ -7,14 +7,14 @@ export function Titlebar() {
 
   return (
     <div className="z-1 flex min-h-11 items-center justify-between bg-gradient-to-r from-gray-900 from-10% to-indigo-950">
-      <div className="relative flex items-center gap-2 pl-2 font-bold text-white">
+      <div className="relative flex items-center justify-center gap-2 pl-2 font-bold text-white">
         <a
           href="/sitecore/shell/sitecore/client/Applications/Launchpad"
-          className="glow-text"
+          className="glow-text flex items-center"
         >
           <i className="pi pi-sparkles text-pink-400" />
-        </a>{" "}
-        <span className="ml-2 font-mono">editor</span>
+          <span className="ml-2 font-mono">workbench</span>
+        </a>
       </div>
       <div>{editContext?.view.primaryControls}</div>
       <div>{editContext?.view.secondaryControls}</div>

package/src/editor/ai/AiTerminal.tsx

@@ -99,7 +99,7 @@ export function AiTerminal({
       setProfiles(profiles);
       if (!activeProfile)
         setActiveProfile(
-          profiles.find((x) => x.name == defaultProfile) || profiles[0]
+          profiles.find((x) => x.name == defaultProfile) || profiles[0],
         );
     }
     fetchProfiles();
@@ -116,7 +116,7 @@ export function AiTerminal({
 
   async function commandHandler(
     text: string,
-    callback: (text: React.ReactNode, finished: boolean) => void
+    callback: (text: React.ReactNode, finished: boolean) => void,
   ) {
     const newMessages = [
       ...messagesRef.current,
@@ -180,18 +180,25 @@ export function AiTerminal({
             if (isEditTextFieldOp(op)) {
               const editFieldOp = op as EditFieldOperation;
 
-              if (editFieldOp.item) {
+              if (editFieldOp.itemId) {
+                const fieldDescriptor = {
+                  item: {
+                    ...editFieldOp.mainItem,
+                    id: editFieldOp.itemId,
+                  },
+                  fieldId: editFieldOp.fieldId,
+                };
                 editContext.itemsRepository.updateFieldValue(
-                  editFieldOp,
+                  fieldDescriptor,
                   editFieldOp.user ?? { name: "unknown", ai: false },
                   false,
-                  editFieldOp.value
+                  editFieldOp.value,
                 );
 
-                editContext.select([editFieldOp.item.id]);
-                editContext.setScrollIntoView(editFieldOp.item.id);
+                editContext.select([editFieldOp.itemId]);
+                editContext.setScrollIntoView(editFieldOp.itemId);
 
-                editContext?.setFocusedField(editFieldOp, false);
+                editContext?.setFocusedField(fieldDescriptor, false);
               }
             } else {
               const addOp = op as AddComponentOperation;
@@ -203,7 +210,7 @@ export function AiTerminal({
             }
           });
         }
-      }
+      },
     );
 
     if (response) {
@@ -233,11 +240,11 @@ export function AiTerminal({
 
   return (
     <div
-      className="h-full flex flex-col relative flex-1 pl-1.5"
+      className="relative flex h-full flex-1 flex-col pl-1.5"
       data-testid="ai-terminal"
     >
-      <div className="flex-1 relative">
-        <div className="inset-0 absolute tour-ai-terminal">
+      <div className="relative flex-1">
+        <div className="tour-ai-terminal absolute inset-0">
           <Terminal
             disabled={!model}
             ref={terminalRef}
@@ -248,7 +255,7 @@ export function AiTerminal({
             infobar={
               response?.numInputTokens && (
                 <div
-                  className="text-gray-400 text-right"
+                  className="text-right text-gray-400"
                   style={{ fontSize: "10px" }}
                 >
                   Tokens in: {response?.numInputTokens?.toLocaleString()} out:{" "}
@@ -262,18 +269,18 @@ export function AiTerminal({
             }
             prompt={prompt}
             setPrompt={setPrompt}
-            statusbar=<div className="flex items-center justify-between gap-1 flex-1">
+            statusbar=<div className="flex flex-1 items-center justify-between gap-1">
               <a
-                className="text-xs text-blue-300 cursor-pointer flex items-center gap-1 ml-1"
+                className="ml-1 flex cursor-pointer items-center gap-1 text-xs text-blue-300"
                 onClick={() => {
                   setShowPredefined(!showPredefined);
                 }}
               >
-                <WizardIcon className="w-5 h-5" />
+                <WizardIcon className="h-5 w-5" />
                 Predefined prompts
               </a>
               {editContext.selection?.length > 0 && (
-                <div className="text-xs text-red-400 flex items-center mr-2">
+                <div className="mr-2 flex items-center text-xs text-red-400">
                   {editContext.selection.length} items selected
                   <SimpleIconButton
                     icon="pi pi-times"
@@ -285,12 +292,12 @@ export function AiTerminal({
                 </div>
               )}
               {showPredefined && (
-                <div className="absolute right-0 left-0 bottom-8 text-sm overflow-y-auto bg-white p-3 pb-1 flex flex-col gap-1 ">
+                <div className="absolute right-0 bottom-8 left-0 flex flex-col gap-1 overflow-y-auto bg-white p-3 pb-1 text-sm">
                   {activeProfile &&
                     activeProfile.prompts.map((p, index) => (
                       <div
                         key={index}
-                        className="p-1.5 mb-1 border border-gray-200 rounded-lg cursor-pointer text-gray-700 text-xs"
+                        className="mb-1 cursor-pointer rounded-lg border border-gray-200 p-1.5 text-xs text-gray-700"
                         onClick={() => {
                           setPrompt(p.prompt);
                           setShowPredefined(false);
@@ -326,12 +333,12 @@ export function AiTerminal({
           />
         </div>
         {activeProfile?.errorMessage && (
-          <div className="text-red-500 text-sm p-2 inset-0 absolute grid items-center justify-center">
+          <div className="absolute inset-0 grid items-center justify-center p-2 text-sm text-red-500">
             {activeProfile?.errorMessage}
           </div>
         )}
         {!model && (
-          <div className="inset-0 absolute grid items-center justify-center text-gray-400 text-sm">
+          <div className="absolute inset-0 grid items-center justify-center text-sm text-gray-400">
             {!activeProfile ? "No profile selected" : "No model selected"}
           </div>
         )}
@@ -348,7 +355,7 @@ async function executePrompt(
   model: string | null,
   selectedText: string | null,
   context: AiContext,
-  callback: (response: any) => void
+  callback: (response: any) => void,
 ): Promise<Response | null> {
   const response = await fetch(context.endpoint, {
     method: "POST",
@@ -421,7 +428,7 @@ async function executePrompt(
 function handleResponse(
   response: any,
   terminalCallback: (text: React.ReactNode, finished: boolean) => void,
-  isFinished: boolean
+  isFinished: boolean,
 ) {
   const toolcalls: [] =
     response?.toolCalls?.map((tool_call: any) => {
@@ -445,6 +452,6 @@ function handleResponse(
       editOperations={response.editOperations}
       finished={isFinished}
     />,
-    isFinished
+    isFinished,
   );
 }

package/src/editor/client/EditorClient.tsx

@@ -21,9 +21,10 @@ import {
   EditContextType,
   EditedField,
   SelectionRange,
+  EditorMode,
 } from "./editContext";
 
-import { EditorConfiguration } from "../../config/types";
+import { EditorConfiguration, MenuItem } from "../../config/types";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { getComponentById } from "../componentTreeHelper";
 
@@ -60,7 +61,7 @@ import MainLayout from "../MainLayout";
 import { useEventListenerExt } from "../utils";
 
 import { EditContextMenu, EditContextMenuRef } from "../ContextMenu";
-import { MenuItem } from "primereact/menuitem";
+
 import { FieldEditorPopup, FieldEditorPopupRef } from "../FieldEditorPopup";
 
 import { Command, CommandData } from "../commands/commands";
@@ -80,6 +81,7 @@ import {
   ValidationResult,
   WorkboxItem,
   Comment,
+  SuggestedEdit,
 } from "../../types";
 
 import { post } from "../services/serviceHelper";
@@ -112,6 +114,7 @@ import { AiTerminalOptions } from "../ai/AiTerminal";
 import { useReviews } from "../reviews/useReviews";
 import uuid from "react-uuid";
 import { flushSync } from "react-dom";
+import { getSuggestedEdits } from "../services/suggestedEditsService";
 
 export type FieldAction = {
   field: FieldDescriptor;
@@ -237,6 +240,9 @@ export function EditorClient({
   const [itemVersions, setItemVersions] = useState<Version[]>([]);
   const [modifiedFields, setModifiedFields] = useState<ModifiedField[]>([]);
   const [comments, setComments] = useState<Comment[]>([]);
+  const [suggestedEdits, setSuggestedEdits] = useState<SuggestedEdit[]>([]);
+  const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
+  const [showSuggestedEditsDiff, setShowSuggestedEditsDiff] = useState(false);
   const [showComments, setShowComments] = useState<boolean>(() => {
     const savedShowComments =
       typeof window !== "undefined"
@@ -269,21 +275,20 @@ export function EditorClient({
   const [workboxItems, setWorkboxItems] = useState<WorkboxItem[]>([]);
   const [isTourActive, setIsTourActive] = useState(false);
 
-  const [previewMode, setPreviewMode] = useState(false);
-  const [statusMessage, setStatusMessage] = useState<React.ReactNode>("");
+  const [mode, setMode] = useState<EditorMode>("edit");
 
-  const mode = searchParams.get("mode");
+  const [statusMessage, setStatusMessage] = useState<React.ReactNode>("");
 
   useEffect(() => {
-    if (mode === "preview") {
-      setPreviewMode(true);
-    }
-  }, [mode]);
+    const queryMode = searchParams.get("mode");
+    if (queryMode) setMode(queryMode as EditorMode);
+  }, [searchParams]);
 
   useEffect(() => {
-    if (previewMode) {
+    if (mode === "suggestions") {
+      setViewName("reviews");
     }
-  }, [previewMode]);
+  }, [mode]);
 
   useEffect(() => {
     if (
@@ -431,13 +436,36 @@ export function EditorClient({
         });
       }
 
+      if (message.type === "suggested-edit-updated") {
+        setSuggestedEdits((x) => {
+          const index = x.findIndex(
+            (s) => s.id === message.payload.suggestedEdit.id,
+          );
+          if (index !== -1) x[index] = message.payload.suggestedEdit;
+          else x.push(message.payload.suggestedEdit);
+          return x;
+        });
+      }
+
+      if (message.type === "suggested-edit-deleted") {
+        setSuggestedEdits((x) => {
+          return x.filter((s) => s.id !== message.payload.id);
+        });
+      }
+
       if (message.type === "edit-operation") {
         const op = message.payload as EditOperation;
 
         if (op.type === "edit-field") {
           const editFieldOperation = op as EditFieldOperation;
 
-          const field = await itemsRepository.getField(editFieldOperation);
+          const field = await itemsRepository.getField({
+            item: {
+              ...editFieldOperation.mainItem,
+              id: editFieldOperation.itemId,
+            },
+            fieldId: editFieldOperation.fieldId,
+          });
 
           if (
             !field ||
@@ -445,7 +473,12 @@ export function EditorClient({
               field.type !== "multi-line text" &&
               field.type !== "rich text")
           ) {
-            itemsRepository.refreshItems([editFieldOperation.item]);
+            itemsRepository.refreshItems([
+              {
+                ...editFieldOperation.mainItem,
+                id: editFieldOperation.itemId,
+              },
+            ]);
             requestRefresh("immediate");
           }
           //TODO: field value changes that require rerender
@@ -453,7 +486,10 @@ export function EditorClient({
             itemsRepository.updateFieldValue(
               {
                 fieldId: editFieldOperation.fieldId,
-                item: editFieldOperation.item,
+                item: {
+                  ...editFieldOperation.mainItem,
+                  id: editFieldOperation.itemId,
+                },
               },
               editFieldOperation.user ?? { name: "unknown", ai: false },
               false,
@@ -638,6 +674,22 @@ export function EditorClient({
     });
   }, [currentItemDescriptor]);
 
+  // Assuming currentItemDescriptor, ui, state, handleErrorResult, and setSuggestedEdits
+  // are available in your component context.
+  const loadSuggestedEdits = useCallback(async () => {
+    if (!contentEditorItem) return;
+
+    const result = await getSuggestedEdits(
+      contentEditorItem.descriptor.id,
+      contentEditorItem.descriptor.language,
+      contentEditorItem.descriptor.version,
+    );
+
+    if (handleErrorResult(result, ui, state)) return;
+
+    setSuggestedEdits(result.data || []);
+  }, [contentEditorItem]);
+
   const page = pageViewContext.page;
 
   useEffect(() => {
@@ -716,6 +768,7 @@ export function EditorClient({
   useEffect(() => {
     if (!currentItemDescriptor) return;
     loadComments();
+    loadSuggestedEdits();
   }, [currentItemDescriptor]);
 
   useEffect(() => {
@@ -743,15 +796,11 @@ export function EditorClient({
       current.set("compare", "true");
     }
 
-    if (previewMode) {
-      current.set("mode", "preview");
-    } else {
-      current.delete("mode");
-    }
+    current.set("mode", mode);
 
     const newUrl = `${pathname}?${current.toString()}`;
     router.push(newUrl, { scroll: false });
-  }, [currentItemDescriptor, viewName, compareMode, previewMode]);
+  }, [currentItemDescriptor, viewName, compareMode, mode]);
 
   useEffect(() => {
     async function load() {
@@ -834,7 +883,10 @@ export function EditorClient({
         return undefined;
       }
 
-      if (!item.hasLayout && viewName === "page-editor") {
+      if (
+        (!item.hasLayout && viewName === "page-editor") ||
+        viewName == "splash-screen"
+      ) {
         setViewName("content-editor");
       }
 
@@ -860,11 +912,7 @@ export function EditorClient({
         current.set("compare", "true");
       }
 
-      if (previewMode) {
-        current.set("mode", "preview");
-      } else {
-        current.delete("mode");
-      }
+      current.set("mode", mode);
 
       const newUrl = `${pathname}?${current.toString()}`;
 
@@ -890,7 +938,6 @@ export function EditorClient({
       router,
       viewName,
       compareMode,
-      previewMode,
     ],
   );
 
@@ -1044,6 +1091,9 @@ export function EditorClient({
       user,
       editHistory,
       refreshHistory,
+      suggestedEdits,
+      setSuggestedEdits,
+      mode,
     }),
     [
       page,
@@ -1061,6 +1111,9 @@ export function EditorClient({
       user,
       editHistory,
       refreshHistory,
+      suggestedEdits,
+      setSuggestedEdits,
+      mode,
     ],
   );
 
@@ -1262,8 +1315,17 @@ export function EditorClient({
   };
 
   const operationsContext = getOperationsContext(state, ui);
+
   const operations = operationsContext.ops;
 
+  useEffect(() => {
+    if (mode === "suggestions") {
+      setShowSuggestedEdits(true);
+    } else {
+      setShowSuggestedEdits(false);
+    }
+  }, [mode]);
+
   //const pageItem = page ?  itemsRepository.getItem(page.item) : undefined;
   const isReadOnly = false; //pageItem && (!pageItem.hasLock || !pageItem.canWrite);
 
@@ -1285,11 +1347,9 @@ export function EditorClient({
       openSplashScreen: () => {
         router.push("/alpaca/editor");
       },
-
       item: contentEditorItem || page?.item,
       itemLanguages,
       itemVersions,
-
       sessionId: sessionId,
       readonly: isReadOnly,
       selection,
@@ -1298,12 +1358,10 @@ export function EditorClient({
       },
       selectedForInsertion,
       setSelectedForInsertion,
-
       dragObject,
       workboxItems,
       requestRefresh,
       refreshCompletedFlag,
-
       openCreatePageDialog: () => {
         const current = new URLSearchParams(Array.from(searchParams.entries()));
         current.delete("version");
@@ -1325,8 +1383,6 @@ export function EditorClient({
         requestLock: boolean,
       ) => {
         if (field) {
-          // if (nonComponentItems.find((x) => x.id == field.item.id))
-          //   setSelection([field.item.id]);
           setIgnoreBlur(true);
           setTimeout(() => {
             setIgnoreBlur(false);
@@ -1343,14 +1399,11 @@ export function EditorClient({
         }
         return true;
       },
-
       renderedFields,
       setRenderedFields,
-
       getComponentCommands: (components: Component[]) => {
         return getComponentCommands(components, editContext);
       },
-
       dragStart: (dragObject: DragObject) => {
         setDragObject(dragObject);
       },
@@ -1500,13 +1553,11 @@ export function EditorClient({
           requestRefresh("immediate");
         }
       },
-
       activeFieldActions,
       showContextMenu: (event: any, items: MenuItem[]) => {
         contextMenuRef.current?.show(event, items);
         setCurrentOverlay("context-menu");
       },
-
       showAiPopup: (
         event: MouseEvent<HTMLElement>,
         aiTerminalOptions?: AiTerminalOptions,
@@ -1514,7 +1565,6 @@ export function EditorClient({
         setCurrentOverlay("ai");
         aiPopupRef.current?.show(event, aiTerminalOptions);
       },
-
       showFieldEditorPopup: (fields: Field[], sections: string[], ev: any) => {
         setCurrentOverlay("fields");
         fieldEditorPopupRef.current?.show(fields, sections, ev);
@@ -1523,16 +1573,13 @@ export function EditorClient({
       validating,
       validationResult,
       contentEditorItem,
-
       loadItem,
       editHistory,
       isRefreshing,
       activeSessions,
-
       unlockField: async () => {
         await releaseFieldLocks(sessionId);
       },
-
       isCommandDisabled: <T extends CommandData>({
         command,
         data,
@@ -1568,15 +1615,12 @@ export function EditorClient({
       setCurrentOverlay,
       inlineEditingFieldElement,
       setInlineEditingFieldElement,
-
       lockedField,
       timings,
       setTimings,
       selectedRange,
       setSelectedRange,
-
       confirmationDialogRef,
-
       confirm: (props: ConfirmationProps) => {
         confirmationDialogRef.current?.confirm(props);
       },
@@ -1655,19 +1699,24 @@ export function EditorClient({
         setSelectedComment(newComment);
         setShowComments(true);
       },
-      previewMode,
-      setPreviewMode,
+      mode,
+      setMode,
+
       user,
       reviews,
       statusMessage,
       setStatusMessage,
+      suggestedEdits,
+      showSuggestedEdits,
+      setShowSuggestedEdits,
+      showSuggestedEditsDiff,
+      setShowSuggestedEditsDiff,
     };
   }, [
     operations,
     itemsRepository,
     configuration,
     contentEditorItem,
-
     page?.item,
     itemLanguages,
     itemVersions,
@@ -1699,7 +1748,6 @@ export function EditorClient({
     inlineEditingFieldElement,
     lockedField,
     selectedRange,
-
     pageViewContext,
     browseHistory,
     workboxItems,
@@ -1724,14 +1772,18 @@ export function EditorClient({
     selectedComment,
     setSelectedComment,
     loadComments,
-    previewMode,
-    setPreviewMode,
-    showComments,
-    setShowComments,
+    mode,
+    setMode,
     user,
     reviews,
     statusMessage,
     setStatusMessage,
+    suggestedEdits,
+    setSuggestedEdits,
+    showSuggestedEdits,
+    setShowSuggestedEdits,
+    showSuggestedEditsDiff,
+    setShowSuggestedEditsDiff,
   ]);
 
   const modifiedFieldsContext = useMemo(() => {
@@ -1756,7 +1808,7 @@ export function EditorClient({
               <>
                 <div className="fixed inset-0 flex">
                   <PageViewerFrame
-                    mode={editContext.previewMode ? "view" : "edit"}
+                    compareView={compareMode}
                     pageViewContext={pageViewContext}
                   />
                 </div>
@@ -1778,11 +1830,8 @@ export function EditorClient({
             ) : (
               <>
                 <Toast ref={toast} />
-
                 <ConfirmationDialog ref={confirmationDialogRef} />
-
                 <EditContextMenu ref={contextMenuRef} />
-
                 <MainLayout
                   className={className}
                   view={currentView}