@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/ai/GhostWriter.tsx

@@ -1,432 +0,0 @@
-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
-  useEffect(() => {
-    if (
-      !editContext ||
-      !editContext.currentItemDescriptor ||
-      !editContext.itemsRepository
-    ) {
-      return;
-    }
-    const { currentItemDescriptor, itemsRepository } = editContext;
-
-    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;
-
-    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([]);
-
-    try {
-      // Only send the current context as a message to executePrompt
-      const response = await executePrompt(
-        [
-          {
-            content: context,
-            role: "user",
-            name: "user",
-          },
-        ],
-        editContext,
-        createEditorAiContext,
-        {
-          addAllContent: true,
-          profile: "ghostwriter",
-        },
-        undefined,
-        "gpt-4.1-mini",
-        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">
-          {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

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

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

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