@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/ai/GhostWriter.tsx

@@ -0,0 +1,480 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useEditContext } from "../client/editContext";
+import { AiResponseMessage } from "./AiResponseMessage";
+import { createEditorAiContext } from "./editorAiContext";
+
+import { ToolCall, Message as AiTerminalMessage } from "./AiTerminal";
+import { executePrompt } from "../services/aiService";
+import { EditOperation } from "../../types";
+import { useDebouncedCallback } from "use-debounce";
+// Simple debounce function
+function debounce<F extends (...args: any[]) => any>(
+  func: F,
+  waitFor: number,
+): (...args: Parameters<F>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: Parameters<F>): void => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => func(...args), waitFor);
+  };
+}
+
+// This matches the Message type in aiService.ts which is used by executePrompt
+type Message = {
+  content: string;
+  name: string;
+  role: string;
+};
+
+type Response = {
+  responseText: string;
+  editOperations: EditOperation[];
+  numInputTokens: number;
+  numOutputTokens: number;
+  numCachedTokens: number;
+  messages: AiTerminalMessage[];
+  toolCalls?: ToolCall[];
+  state: string;
+};
+
+const GHOST_WRITER_CONTEXT_FIELD_ID =
+  "5B14129E-E14F-4C17-A7D2-0FCB27601A18".toLowerCase();
+
+export function GhostWriter() {
+  const editContext = useEditContext();
+  const [context, setContext] = useState("");
+  const [messages, setMessages] = useState<AiTerminalMessage[]>([]);
+  const [thinking, setThinking] = useState<Response | null>(null);
+  const [isMonitoring, setIsMonitoring] = useState(false);
+  const [isThinking, setIsThinking] = useState(false);
+  const lastOpIndexRef = useRef(0);
+  const isMountedRef = useRef(false); // To prevent running on initial mount
+  const [newMessages, setNewMessages] = useState<AiTerminalMessage[]>([]);
+  const newMessagesRef = useRef<AiTerminalMessage[]>([]);
+
+  useEffect(() => {
+    newMessagesRef.current = newMessages;
+  }, [newMessages]);
+
+  // Memoized debounced function
+  const debouncedCheckIfAiCanHelp = useDebouncedCallback(() => {
+    // Check if component is still mounted and conditions are met
+    if (isMountedRef.current && isMonitoring && !isThinking && editContext) {
+      console.log("Debounced check triggered");
+      checkIfAiCanHelp();
+    }
+  }, 3000); // Wait 3 seconds
+
+  // Effect to monitor edit history length for changes
+  useEffect(() => {
+    if (!editContext || !isMonitoring) {
+      isMountedRef.current = false; // Reset mount status if disabled/no context
+      return;
+    }
+
+    // Set mounted status only after initial render and when enabled
+    isMountedRef.current = true;
+
+    // Trigger debounce when edit history changes *after* initial mount
+    // Only trigger if the last edit was NOT made by the AI
+    if (isMountedRef.current && editContext?.editHistory) {
+      const history = editContext.editHistory;
+      if (history.length > 0) {
+        const lastOp = history[0];
+        // Ensure lastOp exists and check the user.ai flag
+        if (lastOp && !lastOp.user?.ai) {
+          console.log(
+            "User edit detected, calling debounce for Ghost Writer check",
+          );
+          debouncedCheckIfAiCanHelp();
+        } else {
+          console.log("AI edit detected, skipping Ghost Writer check");
+        }
+      }
+    }
+
+    // Cleanup function to set mounted status to false
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [editContext?.editHistory, isMonitoring, debouncedCheckIfAiCanHelp]); // Watch history length and monitoring status
+
+  // Load initial context from Sitecore field and reset state when item changes
+  useEffect(() => {
+    if (
+      !editContext ||
+      !editContext.currentItemDescriptor ||
+      !editContext.itemsRepository
+    ) {
+      return;
+    }
+    const { currentItemDescriptor, itemsRepository } = editContext;
+
+    // Reset all state when item changes
+    setMessages([]);
+    setThinking(null);
+    setIsThinking(false);
+    setNewMessages([]);
+    lastOpIndexRef.current = 0;
+    newMessagesRef.current = [];
+    isMountedRef.current = false;
+
+    const loadContext = async () => {
+      try {
+        // Get the full item first
+        const item = await itemsRepository.getItem(currentItemDescriptor);
+        if (!item?.fields) {
+          console.warn(
+            "Could not load item or fields for Ghost Writer context",
+          );
+          return;
+        }
+
+        // Find the specific field
+        const contextField = item.fields.find(
+          (f) => f.id === GHOST_WRITER_CONTEXT_FIELD_ID,
+        );
+        const initialContext = contextField?.value; // Or contextField?.rawValue
+
+        if (initialContext && typeof initialContext === "string") {
+          setContext(initialContext);
+        } else {
+          // Set to empty if field doesn't exist or is not a string
+          setContext("");
+        }
+      } catch (error) {
+        console.error("Error loading Ghost Writer context:", error);
+        setContext(""); // Reset context on error
+      }
+    };
+
+    loadContext();
+    // Depend on the item descriptor and the repository instance
+  }, [editContext?.currentItemDescriptor, editContext?.itemsRepository]);
+
+  // Debounced function to save context to Sitecore
+  const debouncedSaveContext = useDebouncedCallback((newContext: string) => {
+    if (
+      !editContext ||
+      !editContext.currentItemDescriptor ||
+      !editContext.operations
+    ) {
+      return;
+    }
+    const { currentItemDescriptor, operations } = editContext;
+
+    console.log("Debounced save triggered for context:", newContext);
+    try {
+      operations.editField({
+        field: {
+          item: currentItemDescriptor,
+          fieldId: GHOST_WRITER_CONTEXT_FIELD_ID,
+        },
+        value: newContext,
+      });
+    } catch (error) {
+      console.error("Error saving Ghost Writer context:", error);
+    }
+  }, 1000);
+
+  // Handle context change and trigger debounced save
+  const handleContextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newContext = e.target.value;
+    setContext(newContext);
+    debouncedSaveContext(newContext);
+  };
+
+  // Function to check if AI can help
+  const checkIfAiCanHelp = async () => {
+    if (!editContext) return;
+
+    const tasks = [
+      {
+        name: "spell-check",
+        title: "Spell Check",
+        description: "Fix spelling mistakes and grammar errors.",
+      },
+      {
+        name: "find-images",
+        title: "Find Images",
+        description: "Search for matching images and add them to the page.",
+      },
+      {
+        name: "improve-page",
+        title: "Improve Page",
+        description:
+          "If there are no empty fields, you can suggest improvements to the page.",
+      },
+      {
+        name: "support-me",
+        title: "Support Me",
+        description:
+          "Watch for instructions in brackets. Do what I ask you to do and remove the brackets.",
+      },
+    ];
+
+    console.log("Starting AI check");
+    setIsThinking(true);
+
+    // Create a new user message for the current context
+    const userMessage: AiTerminalMessage = {
+      id: Date.now(),
+      content: context,
+      role: "user",
+      name: "user",
+      tool_calls: [],
+    };
+
+    // Add user message to our history display
+    const updatedMessages = [...messages, userMessage];
+    setMessages(updatedMessages);
+
+    setThinking({
+      responseText: "Your Ghost Writer is thinking...",
+      editOperations: [],
+      numInputTokens: 0,
+      numOutputTokens: 0,
+      numCachedTokens: 0,
+      messages: updatedMessages,
+      state: "thinking",
+    });
+
+    lastOpIndexRef.current = 0;
+    setNewMessages([]);
+
+    const lockedComponent =
+      editContext.selection.length === 1 &&
+      " The user is editing the component with the id " +
+        editContext.selection[0] +
+        " and is locked. Do not edit this component.";
+
+    try {
+      // Only send the current context as a message to executePrompt
+      const response = await executePrompt(
+        [
+          {
+            content:
+              "We are together editing this page. You are working in the background and can help us with the following tasks: " +
+              tasks.map((t) => `- ${t.title}: ${t.description}`).join("\n") +
+              " Do not interfere with my current work. Dont ask me what you should do. If you are confident your change is welcome, just do it. Do not report progress or changes, just do them. " +
+              "Do not write empty values into fields. Do not replace a field value with the same value. If you are not sure what the topic is, dont do anything. Do not confirm the instructions, just follow them." +
+              lockedComponent +
+              " If you feel you need more information and you cannot find it yourself using the search, ask me specific questions about the topic. " +
+              " Use the get-component-props-and-placeholders tool to find out which components can be inserted where",
+
+            role: "user",
+            name: "user",
+          },
+        ],
+        editContext,
+        createEditorAiContext,
+        {
+          addAllContent: true,
+          profile: "ghostwriter",
+        },
+        undefined,
+        "gpt-4.1",
+        handleAiResponse,
+      );
+
+      if (response) {
+        handleAiResponse(response);
+      }
+    } catch (error) {
+      console.error("Error executing Ghost Writer AI prompt:", error);
+      if (isMountedRef.current) {
+        // Check if still mounted before setting state
+        setThinking({
+          responseText: "Error occurred while thinking.",
+          editOperations: [],
+          numInputTokens: 0,
+          numOutputTokens: 0,
+          numCachedTokens: 0,
+          messages: updatedMessages,
+          state: "error",
+          toolCalls: [],
+        });
+      }
+    } finally {
+      if (isMountedRef.current) {
+        setIsThinking(false);
+        console.log("AI check finished");
+      }
+    }
+  };
+
+  // Handle AI response as it streams in
+  const handleAiResponse = (response: Response) => {
+    if (!isMountedRef.current) return; // Don't update state if unmounted
+
+    // Merge new messages from the response with newMessagesRef.current based on message ID
+    const currentNewMessages = [...newMessagesRef.current];
+
+    if (response.messages && response.messages.length > 0) {
+      response.messages.forEach((newMsg) => {
+        // Check if message with this ID already exists in newMessages
+        const existingMsgIndex = currentNewMessages.findIndex(
+          (m) => m.id === newMsg.id,
+        );
+
+        if (existingMsgIndex >= 0) {
+          // Update existing message
+          currentNewMessages[existingMsgIndex] = newMsg;
+        } else {
+          // Add new message
+          currentNewMessages.push(newMsg);
+        }
+      });
+    }
+
+    // Update newMessages state and ref
+    setNewMessages(currentNewMessages);
+    setMessages([...messages, ...currentNewMessages]);
+
+    // Merge the new response messages with our existing messages
+    const updatedMessages = [...messages];
+    if (response.messages && response.messages.length > 0) {
+      response.messages.forEach((msg) => {
+        updatedMessages.push(msg);
+      });
+    }
+    console.log("Updated messages:", updatedMessages);
+    setMessages(updatedMessages);
+
+    // Update the response with our combined messages
+    const updatedResponse = {
+      ...response,
+      messages: updatedMessages,
+    };
+
+    setThinking(updatedResponse); // Update the displayed thinking state
+
+    // Apply new operations incrementally
+    if (
+      editContext &&
+      response.editOperations &&
+      response.editOperations.length > lastOpIndexRef.current
+    ) {
+      const newOps = response.editOperations.slice(lastOpIndexRef.current);
+      //   applyAiOperations(newOps);
+      lastOpIndexRef.current = response.editOperations.length;
+    }
+  };
+
+  //   // Apply operations suggested by the AI
+  //   const applyAiOperations = (operations: EditOperation[]) => {
+  //     if (!editContext || !isMountedRef.current) return;
+
+  //     const isEditTextFieldOp = (op: EditOperation): op is EditFieldOperation => {
+  //       if (op.type !== "edit-field") return false;
+  //       const editFieldOp = op as EditFieldOperation;
+  //       return (
+  //         !!editFieldOp.fieldType && editFieldOp.fieldType.indexOf("text") !== -1
+  //       );
+  //     };
+
+  //     operations.forEach((op: EditOperation) => {
+  //       console.log("Applying AI operation:", op.type, op);
+  //       if (isEditTextFieldOp(op)) {
+  //         if (op.itemId && op.mainItem) {
+  //           // Check mainItem exists
+  //           const fieldDescriptor = {
+  //             item: {
+  //               ...op.mainItem,
+  //               id: op.itemId,
+  //             },
+  //             fieldId: op.fieldId,
+  //           };
+  //           try {
+  //             editContext.itemsRepository.updateFieldValue(
+  //               fieldDescriptor,
+  //               op.user ?? { name: "GhostWriter", ai: true },
+  //               false,
+  //               op.value,
+  //             );
+  //           } catch (error) {
+  //             console.error(
+  //               "Error applying updateFieldValue:",
+  //               error,
+  //               fieldDescriptor,
+  //               op.value,
+  //             );
+  //           }
+  //         } else {
+  //           console.warn(
+  //             "Skipping edit-field op due to missing itemId or mainItem:",
+  //             op,
+  //           );
+  //         }
+  //       } else if (op.type === "add-component") {
+  //         // Add component logic might need more details from the operation
+  //         // Example: editContext.operations.addComponent(...)
+  //         console.warn(
+  //           "Add-component operation application not fully implemented.",
+  //         );
+  //       }
+  //     });
+
+  //     // Debounce refresh request if needed
+  //     editContext.requestRefresh("immediate");
+  //   };
+
+  return (
+    <div className="ghost-writer flex h-full flex-col gap-4 p-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Ghost Writer</h2>
+        <label className="flex cursor-pointer items-center">
+          <input
+            type="checkbox"
+            checked={isMonitoring}
+            onChange={() => setIsMonitoring(!isMonitoring)}
+            className="mr-2"
+          />
+          <span>Enable Ghost Writer</span>
+        </label>
+      </div>
+
+      <div className="background-context">
+        <label className="mb-2 block font-medium">Background Context</label>
+        <textarea
+          value={context}
+          onChange={handleContextChange}
+          placeholder="Provide some background context about this page to help the AI understand its purpose..."
+          className="h-32 w-full resize-none rounded border p-2"
+          disabled={isThinking}
+        />
+      </div>
+
+      <div className="ai-thinking flex-1 overflow-auto text-sm">
+        <label className="mb-2 block font-medium">AI Thinking</label>
+        <div className="max-h-[400px] min-h-[200px] overflow-y-auto rounded border bg-gray-50 p-3 text-xs">
+          {messages.length > 0 ? (
+            <AiResponseMessage
+              messages={messages}
+              editOperations={thinking?.editOperations || []}
+              finished={
+                !thinking ||
+                thinking.state === "finished" ||
+                thinking.state === "error"
+              }
+            />
+          ) : (
+            <div className="text-gray-500 italic">
+              {isMonitoring
+                ? "Ghost Writer is active and monitoring for changes..."
+                : "Enable Ghost Writer to get AI assistance while you edit"}
+            </div>
+          )}
+          {thinking && thinking.state === "thinking" && (
+            <div className="mt-2 text-blue-500">
+              Your Ghost Writer is thinking...
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/ai/aiPageModel.ts

@@ -0,0 +1,108 @@
+import { EditContextType } from "../client/editContext";
+import {
+  Component,
+  FullItem,
+  ItemDescriptor,
+  Page,
+  Placeholder,
+} from "../pageModel";
+
+export type AiPageModel = {
+  components: AiComponent[];
+  message?: string;
+};
+
+export type AiComponent = {
+  id: string;
+  name: string;
+  type: string;
+  fields: AiField[];
+  placeholder?: string;
+  children?: AiComponent[];
+};
+
+export type AiField = {
+  name: string;
+  value: string;
+  type: string;
+};
+
+const collectDatasourceItemDescriptors = (
+  component: Component,
+  allDatasourceItemDescriptors: ItemDescriptor[],
+): void => {
+  if (component.datasourceItem) {
+    allDatasourceItemDescriptors.push(component.datasourceItem);
+  }
+
+  component.placeholders.forEach((placeholder) => {
+    if (placeholder.components) {
+      placeholder.components.forEach((c) => {
+        collectDatasourceItemDescriptors(c, allDatasourceItemDescriptors);
+      });
+    }
+  });
+};
+
+const mapComponent = (allDatasourceItems: FullItem[], component: Component) => {
+  const item = allDatasourceItems.find((item) => item.id === component.id);
+  console.log("Map component: ", component, allDatasourceItems);
+
+  const fields: AiField[] =
+    item?.fields
+      .filter((x) =>
+        component.datasourceItem?.renderedFieldIds.find((y) => y === x.id),
+      )
+      .map((field) => ({
+        name: field.name || "unknown",
+        value: field.rawValue as string,
+        type: field.type,
+      })) ?? [];
+
+  return {
+    id: component.id,
+    name: component.name || "unknown",
+    type: component.type,
+    fields: fields,
+    children: mapPlaceholders(component, allDatasourceItems),
+  };
+};
+
+const mapPlaceholders = (
+  component: Component,
+  allDatasourceItems: FullItem[],
+) => {
+  let components: AiComponent[] = [];
+  component.placeholders.forEach((p) => {
+    const placeholderComponents = mapPlaceholder(p, allDatasourceItems);
+    components = [...components, ...placeholderComponents];
+  });
+  return components;
+};
+
+const mapPlaceholder = (
+  placeholder: Placeholder,
+  allDatasourceItems: FullItem[],
+) => {
+  return placeholder.components.map((c) => mapComponent(allDatasourceItems, c));
+};
+
+export const convertToAiPageModel = async (
+  page: Page,
+  editContext: EditContextType,
+): Promise<AiPageModel> => {
+  const allDatasourceItemDescriptors: ItemDescriptor[] = [];
+
+  collectDatasourceItemDescriptors(
+    page.rootComponent,
+    allDatasourceItemDescriptors,
+  );
+
+  const allDatasourceItems = await editContext.itemsRepository.getItems(
+    allDatasourceItemDescriptors,
+  );
+
+  return {
+    components: mapPlaceholders(page.rootComponent, allDatasourceItems),
+  };
+};

package/src/editor/ai/editorAiContext.ts

@@ -0,0 +1,18 @@
+import { EditContextType } from "../client/editContext";
+
+export function createEditorAiContext({
+  editContext,
+}: {
+  editContext: EditContextType;
+}) {
+  const aiPromptUrl = editContext.configuration.services.aiService.promptUrl;
+
+  return {
+    endpoint: aiPromptUrl,
+    promptData: {
+      itemid: editContext.currentItemDescriptor?.id,
+      language: editContext.currentItemDescriptor?.language,
+      version: editContext.currentItemDescriptor?.version,
+    },
+  };
+}

package/src/editor/client/AboutDialog.tsx

@@ -0,0 +1,44 @@
+import { Dialog } from "primereact/dialog";
+import { DialogProps } from "./editContext";
+import { useImperativeHandle, useState, forwardRef, useEffect } from "react";
+import { buildDate, version } from "../../revision";
+
+export const AboutDialog = forwardRef<DialogProps<void>, DialogProps<void>>(
+  (props, ref) => {
+    const [visible, setVisible] = useState(false);
+
+    useImperativeHandle(ref, () => ({
+      onClose: (result: any) => {
+        setVisible(false);
+        props.onClose(result);
+      },
+    }));
+
+    useEffect(() => {
+      setVisible(true);
+    }, []);
+
+    return (
+      <Dialog
+        visible={visible}
+        onHide={() => {
+          setVisible(false);
+          props.onClose(null);
+        }}
+        header="About AI Workbench"
+        style={{ width: "400px" }}
+      >
+        <div className="flex flex-col gap-4 p-2">
+          <div>
+            Build: <span className="font-bold"> {version}</span> from{" "}
+            <span className="font-bold">{buildDate}</span>
+          </div>
+          <div className="mt-4 text-sm text-gray-600">
+            &copy; {new Date().getFullYear()} canvas Reply GmbH. All rights
+            reserved.
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);