@alpaca-editor/core 1.0.4147 → 1.0.4149

package/src/editor/ai/ToolCallDisplay.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo, memo } from "react";
 import { JsonView, defaultStyles } from "react-json-view-lite";
 import "react-json-view-lite/dist/index.css";
 
@@ -159,20 +159,33 @@ const normalizeToolCall = (
   return toolCall;
 };
 
-// Helper function to render JSON or text
-const renderJsonOrText = (json: string | object) => {
-  // If it's already an object, use it directly
-  if (typeof json === "object" && json !== null) {
+// Memoized JSON viewer component to prevent re-renders during streaming
+const MemoizedJsonView = memo(
+  ({ data }: { data: any }) => {
     return (
       <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
         <JsonLightThemeStyles />
         <JsonView
-          data={json}
+          data={data}
           shouldExpandNode={(level) => level < 2}
           style={darkJsonStyles}
         />
       </div>
     );
+  },
+  (prevProps, nextProps) => {
+    // Only re-render if the data actually changed (deep comparison by stringifying)
+    return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data);
+  },
+);
+
+MemoizedJsonView.displayName = "MemoizedJsonView";
+
+// Helper function to parse JSON string to object
+const parseJsonString = (json: string | object): any | null => {
+  // If it's already an object, return it directly
+  if (typeof json === "object" && json !== null) {
+    return json;
   }
 
   // Convert to string if not already
@@ -194,16 +207,7 @@ const renderJsonOrText = (json: string | object) => {
       }
     }
 
-    return (
-      <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
-        <JsonLightThemeStyles />
-        <JsonView
-          data={parsed}
-          shouldExpandNode={(level) => level < 2}
-          style={darkJsonStyles}
-        />
-      </div>
-    );
+    return parsed;
   } catch (e) {
     console.log("JSON parse failed:", e, "Trying to handle as string...");
 
@@ -211,29 +215,32 @@ const renderJsonOrText = (json: string | object) => {
     try {
       const unescaped = jsonString.replace(/\\"/g, '"').replace(/\\\\/g, "\\");
       const parsed = JSON.parse(unescaped);
-
-      return (
-        <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
-          <JsonLightThemeStyles />
-          <JsonView
-            data={parsed}
-            shouldExpandNode={(level) => level < 2}
-            style={darkJsonStyles}
-          />
-        </div>
-      );
+      return parsed;
     } catch (e2) {
       console.log("Unescaping also failed:", e2);
-      // If all parsing fails, display as plain text
-      return (
-        <div className="font-mono text-xs break-words whitespace-pre-wrap text-gray-700">
-          {jsonString}
-        </div>
-      );
+      // If all parsing fails, return null to indicate we should display as plain text
+      return null;
     }
   }
 };
 
+// Helper function to render JSON or text
+const renderJsonOrText = (json: string | object) => {
+  const parsed = parseJsonString(json);
+
+  if (parsed !== null) {
+    return <MemoizedJsonView data={parsed} />;
+  }
+
+  // If parsing failed, display as plain text
+  const jsonString = typeof json === "string" ? json : String(json);
+  return (
+    <div className="font-mono text-xs break-words whitespace-pre-wrap text-gray-700">
+      {jsonString}
+    </div>
+  );
+};
+
 // Expandable panel component
 const ExpandablePanel = ({
   title,
@@ -277,44 +284,74 @@ const ExpandablePanel = ({
 };
 
 // Helper function to create expandable tool call details
-const ToolCallDetails = ({
-  toolCall,
-  result,
-}: {
-  toolCall: BaseToolCall;
-  result?: string;
-}) => {
-  const hasError = toolCall.function?.error;
-  const hasOutput = result || hasError;
+const ToolCallDetails = memo(
+  ({ toolCall, result }: { toolCall: BaseToolCall; result?: string }) => {
+    const hasError = toolCall.function?.error;
+    const hasOutput = result || hasError;
 
-  return (
-    <div className="mt-2 ml-4 overflow-hidden rounded-lg border border-gray-200/80 bg-gradient-to-br from-gray-50 to-gray-50/30 shadow-sm">
-      <ExpandablePanel title="Input" defaultExpanded={!hasOutput}>
-        <div className="rounded-md border border-gray-200 bg-white p-3 text-xs shadow-sm">
-          {renderJsonOrText(toolCall.function?.arguments || "")}
-        </div>
-      </ExpandablePanel>
-
-      {hasOutput && (
-        <ExpandablePanel
-          title={hasError ? "Error" : "Output"}
-          defaultExpanded={true}
-        >
-          {hasError ? (
-            <div className="rounded-md border-l-4 border-red-500 bg-red-50/80 p-3 text-xs text-red-700 shadow-sm">
-              <div className="mb-1.5 font-semibold">Tool Error:</div>
-              <div className="text-red-600">{toolCall.function?.error}</div>
-            </div>
-          ) : (
-            <div className="rounded-md border border-gray-200 bg-white p-3 text-xs shadow-sm">
-              {renderJsonOrText(result || "")}
-            </div>
-          )}
+    // Memoize parsed input data to prevent re-parsing on every render
+    const parsedInput = useMemo(() => {
+      return parseJsonString(toolCall.function?.arguments || "");
+    }, [toolCall.function?.arguments]);
+
+    // Memoize parsed output data to prevent re-parsing on every render
+    const parsedOutput = useMemo(() => {
+      return parseJsonString(result || "");
+    }, [result]);
+
+    return (
+      <div className="mt-2 ml-4 overflow-hidden rounded-lg border border-gray-200/80 bg-gradient-to-br from-gray-50 to-gray-50/30 shadow-sm">
+        <ExpandablePanel title="Input" defaultExpanded={!hasOutput}>
+          <div className="rounded-md border border-gray-200 bg-white p-3 text-xs shadow-sm">
+            {parsedInput !== null ? (
+              <MemoizedJsonView data={parsedInput} />
+            ) : (
+              <div className="font-mono text-xs break-words whitespace-pre-wrap text-gray-700">
+                {toolCall.function?.arguments || ""}
+              </div>
+            )}
+          </div>
         </ExpandablePanel>
-      )}
-    </div>
-  );
-};
+
+        {hasOutput && (
+          <ExpandablePanel
+            title={hasError ? "Error" : "Output"}
+            defaultExpanded={true}
+          >
+            {hasError ? (
+              <div className="rounded-md border-l-4 border-red-500 bg-red-50/80 p-3 text-xs text-red-700 shadow-sm">
+                <div className="mb-1.5 font-semibold">Tool Error:</div>
+                <div className="text-red-600">{toolCall.function?.error}</div>
+              </div>
+            ) : (
+              <div className="rounded-md border border-gray-200 bg-white p-3 text-xs shadow-sm">
+                {parsedOutput !== null ? (
+                  <MemoizedJsonView data={parsedOutput} />
+                ) : (
+                  <div className="font-mono text-xs break-words whitespace-pre-wrap text-gray-700">
+                    {result || ""}
+                  </div>
+                )}
+              </div>
+            )}
+          </ExpandablePanel>
+        )}
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    // Only re-render if the data actually changed
+    return (
+      prevProps.toolCall.id === nextProps.toolCall.id &&
+      prevProps.toolCall.function?.arguments ===
+        nextProps.toolCall.function?.arguments &&
+      prevProps.result === nextProps.result &&
+      prevProps.toolCall.function?.error === nextProps.toolCall.function?.error
+    );
+  },
+);
+
+ToolCallDetails.displayName = "ToolCallDetails";
 
 export function ToolCallDisplay({
   toolCalls,

package/src/editor/sidebar/ComponentTree.tsx

@@ -728,41 +728,120 @@ export function ComponentTree({}) {
     return { placeholder: null, indexInPlaceholder: 0 };
   };
 
-  // Handle drag over node
-  const handleDragOverZone = (
-    dragOverNode: CustomTreeNode | null,
-    index: number,
-    event: React.DragEvent,
-  ): boolean => {
-    if (!editContext?.dragObject) return false;
-    const { placeholder } = resolveDropContext(dragOverNode, index);
-    if (!placeholder) return false;
-    const isValid = isValidPlaceholder(placeholder, editContext.dragObject);
-    event.dataTransfer.dropEffect = isValid ? "move" : "none";
-    return isValid;
-  };
+  // Handle drag over node (memoized)
+  const handleDragOverZone = useCallback(
+    (
+      dragOverNode: TreeNode | null,
+      index: number,
+      event: React.DragEvent,
+    ): boolean => {
+      if (!editContext?.dragObject) return false;
+      const { placeholder } = resolveDropContext(
+        dragOverNode as CustomTreeNode | null,
+        index,
+      );
+      if (!placeholder) return false;
+      const isValid = isValidPlaceholder(placeholder, editContext.dragObject);
+      event.dataTransfer.dropEffect = isValid ? "move" : "none";
+      return isValid;
+    },
+    [editContext?.dragObject],
+  );
 
-  // Handle drop on node
-  const handleDropZone = (
-    droppedOnNode: CustomTreeNode | null,
-    index: number,
-    event: React.DragEvent,
-  ): void => {
-    // When dropping on a node (index < 0), use legacy behavior
-    if (index < 0) {
-      const placeholder = getPlaceholder(droppedOnNode);
+  // Handle drop on node (memoized)
+  const handleDropZone = useCallback(
+    (
+      droppedOnNode: TreeNode | null,
+      index: number,
+      event: React.DragEvent,
+    ): void => {
+      // When dropping on a node (index < 0), use legacy behavior
+      if (index < 0) {
+        const placeholder = getPlaceholder(
+          droppedOnNode as CustomTreeNode | null,
+        );
+        if (!placeholder) return;
+        editContext!.droppedInPlaceholder(placeholder.key, index);
+        return;
+      }
+
+      const { placeholder, indexInPlaceholder } = resolveDropContext(
+        droppedOnNode as CustomTreeNode | null,
+        index,
+      );
       if (!placeholder) return;
-      editContext!.droppedInPlaceholder(placeholder.key, index);
-      return;
-    }
+      editContext!.droppedInPlaceholder(placeholder.key, indexInPlaceholder);
+    },
+    [editContext],
+  );
 
-    const { placeholder, indexInPlaceholder } = resolveDropContext(
-      droppedOnNode,
-      index,
-    );
-    if (!placeholder) return;
-    editContext!.droppedInPlaceholder(placeholder.key, indexInPlaceholder);
-  };
+  // Memoize isValidDropZone callback
+  const handleIsValidDropZone = useCallback(
+    (parent: TreeNode | null, index: number): boolean => {
+      const { placeholder } = resolveDropContext(
+        parent as CustomTreeNode | null,
+        index,
+      );
+      if (!placeholder) return false;
+      if (!editContext?.dragObject) return false;
+      const result = isValidPlaceholder(placeholder, editContext.dragObject);
+      return result;
+    },
+    [editContext?.dragObject],
+  );
+
+  // Memoize onStartDrag callback
+  const handleStartDrag = useCallback(
+    (data: {
+      node: TreeNode;
+      event: React.DragEvent;
+      isMultiSelect: boolean;
+    }) => {
+      const component = data.node.data as Component;
+
+      // Initialize drag data to make sure dataTransfer is set
+      data.event.dataTransfer.setData("text/plain", data.node.key);
+      // Align with FrameMenu: include componentId and allowed effect
+      data.event.dataTransfer.setData("componentId", component.id);
+      data.event.dataTransfer.effectAllowed = "copyMove";
+
+      // Only create drag object for components with datasourceItem
+      if (!component?.datasourceItem) return;
+      setTimeout(() => {
+        const language = editContext!.page!.item.language;
+        const version = editContext!.page!.item.version;
+        const selectedIds =
+          (editContext?.selection?.length || 0) > 1 &&
+          editContext!.selection.includes(component.id)
+            ? editContext!.selection
+            : [component.id];
+        const componentsToDrag = selectedIds.map((id) => ({
+          id,
+          language,
+          version,
+        }));
+
+        editContext!.dragStart({
+          type: "component",
+          typeId: component.typeId,
+          templateId: component.datasourceItem?.templateId,
+          name: component.name,
+          components: componentsToDrag,
+        });
+      }, 50);
+      // Prevent any upstream handlers from interfering
+      data.event.stopPropagation();
+    },
+    [editContext],
+  );
+
+  // Memoize onDragEnd callback
+  const handleDragEnd = useCallback(
+    (event: React.DragEvent | null) => {
+      editContext!.dragEnd();
+    },
+    [editContext],
+  );
 
   if (!page) {
     if (editContext?.contentEditorItem?.hasLayout) {
@@ -829,65 +908,11 @@ export function ComponentTree({}) {
           onSelect={handleTreeSelection}
           onContextMenu={handleTreeContextMenu}
           enableDragAndDrop={true}
-          onDragOverZone={(parent, index, event) =>
-            handleDragOverZone(parent as CustomTreeNode | null, index, event)
-          }
-          isValidDropZone={(parent, index) => {
-            const { placeholder } = resolveDropContext(
-              parent as CustomTreeNode | null,
-              index,
-            );
-            if (!placeholder) return false;
-            if (!editContext?.dragObject) return false;
-            const result = isValidPlaceholder(
-              placeholder,
-              editContext.dragObject,
-            );
-
-            return result;
-          }}
-          onStartDrag={(data) => {
-            const component = data.node.data as Component;
-
-            // Initialize drag data to make sure dataTransfer is set
-            data.event.dataTransfer.setData("text/plain", data.node.key);
-            // Align with FrameMenu: include componentId and allowed effect
-            data.event.dataTransfer.setData("componentId", component.id);
-            data.event.dataTransfer.effectAllowed = "copyMove";
-
-            // Only create drag object for components with datasourceItem
-            if (!component?.datasourceItem) return;
-            setTimeout(() => {
-              const language = editContext!.page!.item.language;
-              const version = editContext!.page!.item.version;
-              const selectedIds =
-                (editContext?.selection?.length || 0) > 1 &&
-                editContext!.selection.includes(component.id)
-                  ? editContext!.selection
-                  : [component.id];
-              const componentsToDrag = selectedIds.map((id) => ({
-                id,
-                language,
-                version,
-              }));
-
-              editContext!.dragStart({
-                type: "component",
-                typeId: component.typeId,
-                templateId: component.datasourceItem?.templateId,
-                name: component.name,
-                components: componentsToDrag,
-              });
-            }, 50);
-            // Prevent any upstream handlers from interfering
-            data.event.stopPropagation();
-          }}
-          onDragEnd={(event) => {
-            editContext!.dragEnd();
-          }}
-          onDrop={(parent, index, event) =>
-            handleDropZone(parent as CustomTreeNode | null, index, event)
-          }
+          onDragOverZone={handleDragOverZone}
+          isValidDropZone={handleIsValidDropZone}
+          onStartDrag={handleStartDrag}
+          onDragEnd={handleDragEnd}
+          onDrop={handleDropZone}
           renderNode={(node) => renderNode(node as CustomTreeNode)}
         />
       </div>

package/src/editor/ui/PerfectTree.tsx

@@ -945,12 +945,16 @@ export const PerfectTree = <T,>({
       onDragOverZone,
       onDrop,
       onDragEnd,
-      onStartDrag,
+      handleStartDragWithTimeout,
       onDoubleClick,
+      onContextMenu,
       handleSelect,
       handleToggle,
       enhancedRenderNode,
       searchTerm,
+      enableDragAndDrop,
+      multiDragNoun,
+      isValidDropZone,
     ],
   );
 
@@ -1053,4 +1057,49 @@ export const PerfectTree = <T,>({
   );
 };
 
-export default memo(PerfectTree);
+// Custom comparison function for memo to prevent unnecessary re-renders
+// when callback props change but actual data hasn't
+const arePropsEqual = <T,>(
+  prevProps: Readonly<TreeProps<T>>,
+  nextProps: Readonly<TreeProps<T>>,
+): boolean => {
+  // Compare primitive and array props
+  if (
+    prevProps.nodes !== nextProps.nodes ||
+    prevProps.isDragging !== nextProps.isDragging ||
+    prevProps.enableDragAndDrop !== nextProps.enableDragAndDrop ||
+    prevProps.scrollToSelected !== nextProps.scrollToSelected ||
+    prevProps.enableKeyboardSearch !== nextProps.enableKeyboardSearch ||
+    prevProps.searchClearDelay !== nextProps.searchClearDelay ||
+    prevProps.disableAutoSelectOnExpand !==
+      nextProps.disableAutoSelectOnExpand ||
+    prevProps.multiDragNoun !== nextProps.multiDragNoun
+  ) {
+    return false;
+  }
+
+  // Compare arrays with shallow equality
+  if (
+    prevProps.selectedKeys?.length !== nextProps.selectedKeys?.length ||
+    prevProps.selectedKeys?.some(
+      (key, i) => key !== nextProps.selectedKeys?.[i],
+    )
+  ) {
+    return false;
+  }
+
+  if (
+    prevProps.expandedKeys?.length !== nextProps.expandedKeys?.length ||
+    prevProps.expandedKeys?.some(
+      (key, i) => key !== nextProps.expandedKeys?.[i],
+    )
+  ) {
+    return false;
+  }
+
+  // For callback props, we assume they are stable if memoized in parent
+  // If they change on every render, the parent should memoize them with useCallback
+  return true;
+};
+
+export default memo(PerfectTree, arePropsEqual) as typeof PerfectTree;

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4147";
-export const buildDate = "2025-10-06 22:12:00";
+export const version = "1.0.4149";
+export const buildDate = "2025-10-07 09:38:14";