@alpaca-editor/core 1.0.3937 → 1.0.3939

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>>;

package/src/editor/client/itemsRepository.ts

@@ -82,52 +82,59 @@ export function useItemsRepository(
       }
 
       const fetchPromise = (async () => {
-        const fetchedItems = await fetchItems(itemsToFetch);
-
-        if (!fetchedItems) return;
-
-        fetchedItems.forEach((item, index) => {
-          if (!item) return;
-          const descriptor = getItemDescriptor(item);
-          const itemToStore = {
-            ...item,
-            descriptor,
-          };
-
-          itemsMap.current.set(generateKey(item), itemToStore);
-
-          if (itemsToFetch[index]?.version === 0) {
-            const key = generateKey(itemsToFetch[index]);
-            itemsMap.current.set(key, itemToStore);
-          }
-
-          if (item.fields) {
-            item.fields.forEach((field) => {
-              if (field.fallbackChain) {
-                const descriptor = getItemDescriptor(item);
-                field.fallbackChain.forEach((fallback) => {
-                  const prev = fallbackDependencyMap.current.get(
-                    getItemIdLanguageKey(fallback.item),
-                  );
-
-                  if (
-                    !prev?.find(
-                      (x) =>
-                        x.id === descriptor.id &&
-                        x.language === descriptor.language &&
-                        x.version === descriptor.version,
-                    )
-                  ) {
-                    fallbackDependencyMap.current.set(
+        try {
+          const fetchedItems = await fetchItems(itemsToFetch);
+
+          if (!fetchedItems) return;
+
+          fetchedItems.forEach((item, index) => {
+            if (!item) return;
+            const descriptor = getItemDescriptor(item);
+            const itemToStore = {
+              ...item,
+              descriptor,
+            };
+
+            const primaryKey = generateKey(item);
+            itemsMap.current.set(primaryKey, itemToStore);
+
+            // Only store version 0 if the current item isn't already version 0
+            if (itemsToFetch[index]?.version === 0 && item.version !== 0) {
+              const versionZeroKey = generateKey(itemsToFetch[index]);
+              itemsMap.current.set(versionZeroKey, itemToStore);
+            }
+
+            if (item.fields) {
+              item.fields.forEach((field) => {
+                if (field.fallbackChain) {
+                  const descriptor = getItemDescriptor(item);
+                  field.fallbackChain.forEach((fallback) => {
+                    const prev = fallbackDependencyMap.current.get(
                       getItemIdLanguageKey(fallback.item),
-                      [...(prev || []), descriptor],
                     );
-                  }
-                });
-              }
-            });
-          }
-        });
+
+                    if (
+                      !prev?.find(
+                        (x) =>
+                          x.id === descriptor.id &&
+                          x.language === descriptor.language &&
+                          x.version === descriptor.version,
+                      )
+                    ) {
+                      fallbackDependencyMap.current.set(
+                        getItemIdLanguageKey(fallback.item),
+                        [...(prev || []), descriptor],
+                      );
+                    }
+                  });
+                }
+              });
+            }
+          });
+        } catch (error) {
+          console.error("Error fetching items:", error);
+          throw error;
+        }
       })();
 
       // Store the promise for each item being fetched
@@ -145,7 +152,7 @@ export function useItemsRepository(
         });
       }
     },
-    [itemsMap.current],
+    [],
   );
 
   const getItems = useCallback(
@@ -168,55 +175,7 @@ export function useItemsRepository(
         .map((x) => map.current.get(generateKey(x)))
         .filter((x): x is FullItem => x !== undefined);
     },
-    [itemsMap.current, fetchItemsFromServer],
-  );
-
-  const getItemsStubs = useCallback(
-    async (descriptors: ItemDescriptor[]): Promise<ItemStub[]> => {
-      const keys = descriptors.map((x) => ({
-        key: generateKey(x),
-        descriptor: x,
-      }));
-
-      // First try to get stubs from full items if available
-      const result: ItemStub[] = [];
-      const itemsToFetch: ItemDescriptor[] = [];
-
-      for (const { key, descriptor } of keys) {
-        // If we have the full item, use it
-        const fullItem = itemsMap.current.get(key);
-        if (fullItem) {
-          result.push(fullItem);
-          continue;
-        }
-
-        // If we have a cached stub, use it
-        const cachedStub = stubsMap.current.get(key);
-        if (cachedStub) {
-          result.push(cachedStub);
-          continue;
-        }
-
-        // Otherwise, fetch it
-        itemsToFetch.push(descriptor);
-      }
-
-      if (itemsToFetch.length > 0) {
-        await fetchStubsFromServer(itemsToFetch);
-
-        // Add fetched stubs to the result
-        for (const descriptor of itemsToFetch) {
-          const key = generateKey(descriptor);
-          const stub = stubsMap.current.get(key);
-          if (stub) {
-            result.push(stub);
-          }
-        }
-      }
-
-      return result;
-    },
-    [itemsMap.current, stubsMap.current],
+    [fetchItemsFromServer],
   );
 
   const fetchStubsFromServer = useCallback(
@@ -242,19 +201,26 @@ export function useItemsRepository(
       }
 
       const fetchPromise = (async () => {
-        const fetchedStubs = await fetchItemStubs(itemsToFetch);
+        try {
+          const fetchedStubs = await fetchItemStubs(itemsToFetch);
 
-        if (!fetchedStubs) return;
+          if (!fetchedStubs) return;
 
-        fetchedStubs.forEach((stub, index) => {
-          if (!stub) return;
-          stubsMap.current.set(generateKey(stub), stub);
+          fetchedStubs.forEach((stub, index) => {
+            if (!stub) return;
+            const primaryKey = generateKey(stub);
+            stubsMap.current.set(primaryKey, stub);
 
-          if (itemsToFetch[index]?.version === 0) {
-            const key = generateKey(itemsToFetch[index]);
-            stubsMap.current.set(key, stub);
-          }
-        });
+            // Only store version 0 if the current stub isn't already version 0
+            if (itemsToFetch[index]?.version === 0 && stub.version !== 0) {
+              const versionZeroKey = generateKey(itemsToFetch[index]);
+              stubsMap.current.set(versionZeroKey, stub);
+            }
+          });
+        } catch (error) {
+          console.error("Error fetching stubs:", error);
+          throw error;
+        }
       })();
 
       // Store the promise for each item being fetched
@@ -272,15 +238,55 @@ export function useItemsRepository(
         });
       }
     },
-    [stubsMap.current],
+    [],
   );
 
-  const getField = useCallback(
-    async (fieldDescriptor: FieldDescriptor): Promise<Field | undefined> => {
-      const item = await getItem(fieldDescriptor.item);
-      return item?.fields.find((x) => x.id === fieldDescriptor.fieldId);
+  const getItemsStubs = useCallback(
+    async (descriptors: ItemDescriptor[]): Promise<ItemStub[]> => {
+      const keys = descriptors.map((x) => ({
+        key: generateKey(x),
+        descriptor: x,
+      }));
+
+      // First try to get stubs from full items if available
+      const result: ItemStub[] = [];
+      const itemsToFetch: ItemDescriptor[] = [];
+
+      for (const { key, descriptor } of keys) {
+        // If we have the full item, use it
+        const fullItem = itemsMap.current.get(key);
+        if (fullItem) {
+          result.push(fullItem);
+          continue;
+        }
+
+        // If we have a cached stub, use it
+        const cachedStub = stubsMap.current.get(key);
+        if (cachedStub) {
+          result.push(cachedStub);
+          continue;
+        }
+
+        // Otherwise, fetch it
+        itemsToFetch.push(descriptor);
+      }
+
+      if (itemsToFetch.length > 0) {
+        await fetchStubsFromServer(itemsToFetch);
+
+        // Add fetched stubs to the result
+        for (const descriptor of itemsToFetch) {
+          const key = generateKey(descriptor);
+          const stub = stubsMap.current.get(key);
+          if (stub) {
+            result.push(stub);
+          }
+        }
+      }
+
+      return result;
     },
-    [itemsMap.current],
+    [fetchStubsFromServer],
   );
 
   const getItem = useCallback(
@@ -291,6 +297,19 @@ export function useItemsRepository(
     [getItems],
   );
 
+  const getField = useCallback(
+    async (fieldDescriptor: FieldDescriptor): Promise<Field | undefined> => {
+      try {
+        const item = await getItem(fieldDescriptor.item);
+        return item?.fields.find((x) => x.id === fieldDescriptor.fieldId);
+      } catch (error) {
+        console.error("Error getting field:", error);
+        return undefined;
+      }
+    },
+    [getItem],
+  );
+
   const updateFieldValue = useCallback(
     async (
       field: FieldDescriptor,
@@ -305,7 +324,21 @@ export function useItemsRepository(
       const fieldToUpdate = item.fields.find((x) => x.id === field.fieldId);
       if (!fieldToUpdate) return;
 
-      itemsMap.current.set(generateKey(field.item), { ...item });
+      // Update the field value in the item copy
+      const updatedItem = {
+        ...item,
+        fields: item.fields.map((f) =>
+          f.id === field.fieldId
+            ? {
+                ...f,
+                rawValue: rawValue !== undefined ? rawValue : String(value),
+                value,
+              }
+            : f,
+        ),
+      };
+
+      itemsMap.current.set(generateKey(field.item), updatedItem);
 
       setModifiedFields((prevModifiedFields) => {
         const val = rawValue !== undefined ? rawValue : value;
@@ -353,7 +386,7 @@ export function useItemsRepository(
 
       //      setRevision((prev) => prev + 1);
     },
-    [itemsMap, fetchItemsFromServer],
+    [getItem, setModifiedFields, setLastEditedFields],
   );
 
   const refreshItems = useCallback(
@@ -426,7 +459,7 @@ export function useItemsRepository(
         items.map((x) => ({ item: x, action: "update" })),
       );
     },
-    [setRevision, stubsMap.current],
+    [setRevision, fetchItemsFromServer, setModifiedFields],
   );
 
   const onFieldSaved = useCallback(
@@ -453,7 +486,7 @@ export function useItemsRepository(
       }
       triggerItemsChangedEvent([{ item: field.item, action: "update" }]);
     },
-    [setModifiedFields],
+    [setModifiedFields, refreshItems],
   );
 
   const onItemsDeleted = useCallback(
@@ -473,7 +506,7 @@ export function useItemsRepository(
       );
       setRevision((prev) => prev + 1);
     },
-    [itemsMap, setRevision],
+    [setRevision],
   );
 
   const subscribeItemsChanged = useCallback(
@@ -524,7 +557,10 @@ export function useItemsRepository(
     getField,
     revision,
     updateFieldValue,
+    refreshItems,
+    onFieldSaved,
     onItemsDeleted,
+    subscribeItemsChanged,
     clear,
   ]);
 

package/src/editor/menubar/BrowseHistory.tsx

@@ -2,6 +2,7 @@ import { useEditContext } from "../client/editContext";
 
 import { ItemDescriptor } from "../pageModel";
 import { ResultItem } from "../ui/ItemSearch";
+import { ItemList } from "../ui/ItemList";
 
 export function BrowseHistory({
   setHoveredItem,
@@ -17,21 +18,11 @@ export function BrowseHistory({
   const history = editContext.browseHistory;
 
   return (
-    <div className="overflow-y-auto flex flex-col gap-1 flex-1">
-      {history
-        .filter((x, i) => x.language && i < 7)
-        .map((x) => (
-          <div
-            key={x.id + x.language}
-            className="text-xs cursor-pointer hover:text-gray-400 flex gap-1"
-            onMouseEnter={() => setHoveredItem(x)}
-            onMouseLeave={() => setHoveredItem(undefined)}
-            onClick={() => itemSelected(x)}
-          >
-            {x.icon && <img src={x.icon} width="16" height="16" />} {x.path}{" "}
-            <span className="text-500">({x.language})</span>
-          </div>
-        ))}
-    </div>
+    <ItemList
+      items={history}
+      onItemHover={setHoveredItem}
+      onItemClick={itemSelected}
+      maxItems={12}
+    />
   );
 }