@alpaca-editor/core 1.0.3938 → 1.0.3939

package/src/editor/PictureEditor.tsx

@@ -1,8 +1,20 @@
-import { MouseEventHandler, useCallback, useState } from "react";
+import {
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useEditContext } from "./client/editContext";
 import { PictureCropper } from "./PictureCropper";
 import { PictureField, PictureRawValue } from "./fieldTypes";
 import { MediaSelectorMode } from "./media-selector/MediaSelector";
+import { loadFieldButtons } from "./services/editService";
+import { FieldButton } from "./pageModel";
+import {
+  FieldActionsOverlay,
+  FieldActionsOverlayRef,
+} from "./FieldActionsOverlay";
 
 export function PictureEditor({
   field,
@@ -19,8 +31,43 @@ export function PictureEditor({
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const [showCropper, setShowCropper] = useState(false);
+  const [fieldButtons, setFieldButtons] = useState<FieldButton[]>([]);
+  const fieldActionsOverlay = useRef<FieldActionsOverlayRef>(null);
   const editContext = useEditContext();
 
+  // Load field buttons when component mounts
+  useEffect(() => {
+    const loadButtons = async () => {
+      if (field.descriptor) {
+        try {
+          const buttons = await loadFieldButtons(field.descriptor);
+          setFieldButtons(buttons);
+        } catch (error) {
+          console.warn("Failed to load field buttons:", error);
+        }
+      }
+    };
+    loadButtons();
+  }, [field.descriptor]);
+
+  // Field action handlers
+  const handleActionClick = useCallback(
+    async (action: FieldButton): Promise<void> => {
+      editContext?.triggerFieldAction(field.descriptor, action);
+    },
+    [editContext, field.descriptor],
+  );
+
+  const handleParameterizedActionExecute = useCallback(
+    async (
+      action: FieldButton,
+      parameters: Record<string, string>,
+    ): Promise<void> => {
+      editContext?.triggerFieldAction(field.descriptor, action, parameters);
+    },
+    [editContext, field.descriptor],
+  );
+
   const variant = field.value?.variants?.find((v) => v.name === variantName);
   const raw = (() => {
     try {
@@ -174,6 +221,15 @@ export function PictureEditor({
               className="min-w-[80px]"
             />
           )}
+          {fieldButtons.length > 0 && (
+            <Btn
+              label="Actions"
+              icon="pi pi-bolt"
+              onClick={(e) => fieldActionsOverlay.current?.show(e)}
+              testId="field-actions-button"
+              className="min-w-[80px]"
+            />
+          )}
         </div>
       )}
       {showCropper && (
@@ -183,6 +239,15 @@ export function PictureEditor({
           variantName={variantName}
         />
       )}
+      <FieldActionsOverlay
+        ref={fieldActionsOverlay}
+        generatorButtons={fieldButtons}
+        onActionClick={handleActionClick}
+        onParameterizedActionExecute={handleParameterizedActionExecute}
+        currentOverlay={editContext?.currentOverlay}
+        fieldId={field.id}
+        setCurrentOverlay={editContext?.setCurrentOverlay || (() => {})}
+      />
     </div>
   );
 }

package/src/editor/Titlebar.tsx

@@ -25,21 +25,32 @@ export function Titlebar() {
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        menuOpen &&
-        menuRef.current &&
-        buttonRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
+      if (!menuOpen) return;
+
+      const target = event.target as Element;
+      const menuElement = menuRef.current;
+      const buttonElement = buttonRef.current;
+
+      // Check if the click is inside the menu or button
+      const isInsideMenu = menuElement && menuElement.contains(target);
+      const isInsideButton = buttonElement && buttonElement.contains(target);
+
+      // Check if the click is inside a PrimeReact overlay (which renders in portals)
+      const isInsideOverlay = target.closest(".p-overlaypanel") !== null;
+
+      // Close menu only if click is outside menu, button, and overlays
+      if (!isInsideMenu && !isInsideButton && !isInsideOverlay) {
         setMenuOpen(false);
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside, true);
-    };
+    if (menuOpen) {
+      document.addEventListener("click", handleClickOutside, true);
+
+      return () => {
+        document.removeEventListener("click", handleClickOutside, true);
+      };
+    }
   }, [menuOpen]);
 
   return (

package/src/editor/ai/AiTerminal.tsx

@@ -121,72 +121,60 @@ export function AiTerminal({
     terminalCallback: (text: React.ReactNode, finished: boolean) => void,
     isFinished: boolean,
   ) {
-    const currentMessages = messagesRef.current;
     const updatedMessages = response.messages;
 
-    // Merge updatedMessages into currentMessages if they exist
+    // Replace the conversation history with the authoritative response from AI
     if (updatedMessages && Array.isArray(updatedMessages)) {
-      // Ensure each message has the required properties
-      updatedMessages.forEach((message) => {
-        const existingMessageIndex = currentMessages.findIndex(
-          (m) => m.id === message.id,
-        );
+      const formattedMessages = updatedMessages.map((message) => {
         const formattedContent = message.content
           .trim()
           .replaceAll("\n", "<br>")
           ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
 
-        if (existingMessageIndex !== -1) {
-          // Update existing message
-          currentMessages[existingMessageIndex] = {
-            ...currentMessages[existingMessageIndex],
-            ...message,
-            content: message.content,
-            formattedContent: formattedContent,
-            tool_calls:
-              message.tool_calls ||
-              currentMessages[existingMessageIndex]?.tool_calls ||
-              [],
-          };
-        } else {
-          // Add new message
-          currentMessages.push({
-            ...message,
-            content: formattedContent,
-            tool_calls: message.tool_calls || [], // Ensure toolCalls exists
-          });
-        }
+        return {
+          ...message,
+          content: message.content,
+          formattedContent: formattedContent,
+          tool_calls: message.tool_calls || [],
+        };
       });
-    }
 
-    // Update the messages state
-    setMessages([...currentMessages]);
-    setResponseMessages([...currentMessages]);
-
-    terminalCallback(
-      <AiResponseMessage
-        messages={currentMessages}
-        editOperations={response.editOperations}
-        finished={isFinished}
-      />,
-      isFinished,
-    );
+      // Update the messages state with the complete conversation from AI
+      setMessages([...formattedMessages]);
+      setResponseMessages([...formattedMessages]);
+
+      terminalCallback(
+        <AiResponseMessage
+          messages={formattedMessages}
+          editOperations={response.editOperations}
+          finished={isFinished}
+        />,
+        isFinished,
+      );
+    } else {
+      // Fallback: if no messages in response, keep current state
+      terminalCallback(
+        <AiResponseMessage
+          messages={messagesRef.current}
+          editOperations={response.editOperations}
+          finished={isFinished}
+        />,
+        isFinished,
+      );
+    }
   }
 
   async function commandHandler(
     text: string,
     callback: (text: React.ReactNode, finished: boolean) => void,
   ) {
-    const newMessages = [
-      ...messagesRef.current,
-      {
-        id: Date.now(), // Add unique id
-        content: text,
-        role: "user",
-        name: "user",
-        tool_calls: [], // Add empty toolCalls array
-      },
-    ];
+    const userMessage = {
+      id: Date.now(), // Add unique id
+      content: text,
+      role: "user",
+      name: "user",
+      tool_calls: [], // Add empty toolCalls array
+    };
 
     const context = createAiContext({ editContext });
 
@@ -194,8 +182,8 @@ export function AiTerminal({
     const selectedText = editContext?.selectedRange?.text || null;
     if (!activeProfile || !model) return;
 
-    setResponseMessages([]);
-
+    // Build complete message history for API call
+    const conversationHistory = [...messagesRef.current, userMessage];
     const messages = [
       ...(options?.hiddenSystemPrompt
         ? [
@@ -208,7 +196,7 @@ export function AiTerminal({
             },
           ]
         : []),
-      ...newMessages,
+      ...conversationHistory,
     ];
 
     const response = await executePrompt(
@@ -318,6 +306,7 @@ export function AiTerminal({
             ref={terminalRef}
             onReset={() => {
               setMessages([]);
+              setResponseMessages([]);
               setResponse(undefined);
             }}
             infobar={

package/src/editor/client/EditorClient.tsx

@@ -701,29 +701,71 @@ export function EditorClient({
   }, [user]);
 
   useEffect(() => {
-    let socket: WebSocket = (globalThis as any).editorSocket;
+    let reconnectTimeout: NodeJS.Timeout | null = null;
+    let reconnectAttempts = 0;
 
-    if (
-      socket &&
-      (socket.readyState === WebSocket.OPEN ||
-        socket.readyState === WebSocket.CONNECTING)
-    )
-      return;
+    const connectWebSocket = () => {
+      let socket: WebSocket = (globalThis as any).editorSocket;
+
+      if (
+        socket &&
+        (socket.readyState === WebSocket.OPEN ||
+          socket.readyState === WebSocket.CONNECTING)
+      )
+        return;
 
-    socket = connectSocket(sessionId);
+      socket = connectSocket(sessionId);
 
-    // Connection opened
-    socket.addEventListener("open", () => {
-      console.log("Connected!");
-      sendClientInfo();
-      requestQuota();
-      //TODO: Load clients
-    });
+      // Connection opened
+      socket.addEventListener("open", () => {
+        console.log("Connected!");
+        reconnectAttempts = 0; // Reset attempts on successful connection
+        sendClientInfo();
+        requestQuota();
+        //TODO: Load clients
+      });
+
+      // Listen for messages
+      socket.addEventListener("message", messageHandler);
+
+      // Handle connection close
+      socket.addEventListener("close", (event) => {
+        console.log("WebSocket connection closed:", event.code, event.reason);
+
+        // Only attempt to reconnect if it wasn't a clean close
+        if (event.code !== 1000) {
+          // Start with 1 second, increase exponentially up to 30 seconds
+          const delay = Math.min(
+            1000 * Math.pow(2, Math.min(reconnectAttempts, 5)),
+            30000,
+          );
+          console.log(
+            `Attempting to reconnect in ${delay}ms... (attempt ${reconnectAttempts + 1})`,
+          );
+
+          reconnectTimeout = setTimeout(() => {
+            reconnectAttempts++;
+            connectWebSocket();
+          }, delay);
+        }
+      });
 
-    // Listen for messages
-    socket.addEventListener("message", messageHandler);
+      // Handle connection errors
+      socket.addEventListener("error", (error) => {
+        console.error("WebSocket error:", error);
+      });
 
-    (globalThis as any).editorSocket = socket;
+      (globalThis as any).editorSocket = socket;
+    };
+
+    connectWebSocket();
+
+    // Cleanup function
+    return () => {
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout);
+      }
+    };
   }, []);
 
   useEffect(() => {
@@ -1790,6 +1832,7 @@ export function EditorClient({
       triggerFieldAction: async (
         fieldDescriptor: FieldDescriptor,
         actionButton: FieldButton,
+        parameters?: Record<string, string>,
       ) => {
         const field = await itemsRepository.getField(fieldDescriptor);
 
@@ -1831,6 +1874,7 @@ export function EditorClient({
             actionButton.action,
             editContext!.sessionId,
             selectedRange?.text || "",
+            parameters || {},
             (data: any) => {
               op.message = data.responseText;
               setActiveFieldActions((prevFieldActions) => [

package/src/editor/client/editContext.ts

@@ -235,7 +235,11 @@ export type EditContextType = {
   unlockField: (field: FieldDescriptor) => void;
 
   readonly: boolean;
-  triggerFieldAction: (field: FieldDescriptor, action: FieldButton) => void;
+  triggerFieldAction: (
+    field: FieldDescriptor,
+    action: FieldButton,
+    parameters?: Record<string, string>,
+  ) => void;
   activeFieldActions: FieldAction[];
   showContextMenu(e: any, menuItems: MenuItem[]): void;
   setCurrentOverlay: React.Dispatch<React.SetStateAction<any>>;