From 0e683a3253d06df345422af2c57bab56412d58ee Mon Sep 17 00:00:00 2001
From: Nikhil-Doye <nikhil.doye@gmail.com>
Date: Mon, 27 Oct 2025 16:00:51 -0400
Subject: [PATCH] Add optimization preview and undo functionality in
 NodeConfiguration component

- Introduced state management for optimization preview, allowing users to preview optimized prompts before applying changes.
- Added functionality to save original prompts and maintain a history of prompt changes for undo operations.
- Enhanced the UI to include buttons for applying optimized prompts and undoing the last change, improving user experience and flexibility in prompt management.
- Implemented cancelation of optimization previews, ensuring users can easily revert to the original state if needed.
---
 src/components/NodeConfiguration.tsx | 84 ++++++++++++++++++++++++----
 1 file changed, 74 insertions(+), 10 deletions(-)

diff --git a/src/components/NodeConfiguration.tsx b/src/components/NodeConfiguration.tsx
index 84378fc..715e234 100644
--- a/src/components/NodeConfiguration.tsx
+++ b/src/components/NodeConfiguration.tsx
@@ -403,6 +403,12 @@ export const NodeConfiguration: React.FC<NodeConfigurationProps> = ({
   const config = nodeTypeConfigs[data.type];
   const [isOptimizing, setIsOptimizing] = useState(false);
   const [optimizationResult, setOptimizationResult] = useState<string>("");
+  const [isPreviewingOptimization, setIsPreviewingOptimization] =
+    useState(false);
+  const [originalPrompt, setOriginalPrompt] = useState<string>(
+    (currentData.config && currentData.config.prompt) || ""
+  );
+  const [promptHistory, setPromptHistory] = useState<string[]>([]);
 
   // State for label change dialog
   const [showLabelDialog, setShowLabelDialog] = useState(false);
@@ -489,6 +495,7 @@ export const NodeConfiguration: React.FC<NodeConfigurationProps> = ({
 
     setIsOptimizing(true);
     setOptimizationResult("");
+    setOriginalPrompt(currentData.config.prompt);
 
     try {
       // Extract intent from the prompt itself
@@ -594,6 +601,7 @@ Return only the optimized prompt:`,
       }
 
       setOptimizationResult(cleanedResult);
+      setIsPreviewingOptimization(true);
     } catch (error) {
       console.error("Error optimizing prompt:", error);
       setOptimizationResult("Error optimizing prompt. Please try again.");
@@ -604,11 +612,26 @@ Return only the optimized prompt:`,
 
   const applyOptimizedPrompt = () => {
     if (optimizationResult) {
+      // Save to history for undo
+      setPromptHistory((prev) => [originalPrompt, ...prev].slice(0, 20));
       handleConfigChange("prompt", optimizationResult);
       setOptimizationResult("");
+      setIsPreviewingOptimization(false);
     }
   };
 
+  const cancelOptimizationPreview = () => {
+    setOptimizationResult("");
+    setIsPreviewingOptimization(false);
+  };
+
+  const undoLastPromptChange = () => {
+    if (promptHistory.length === 0) return;
+    const [last, ...rest] = promptHistory;
+    handleConfigChange("prompt", last);
+    setPromptHistory(rest);
+  };
+
   const renderField = (field: FieldConfig) => {
     const value = currentData.config[field.key] || field.defaultValue || "";
 
@@ -628,16 +651,57 @@ Return only the optimized prompt:`,
           nodeType={data.type}
         />
         {data.type === "llmTask" && field.key === "prompt" && (
-          <div className="flex items-center space-x-2">
-            <Button
-              onClick={handleOptimizePrompt}
-              disabled={isOptimizing || !currentData.config.prompt}
-              size="sm"
-              className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
-            >
-              <Sparkles className="w-4 h-4 mr-2" />
-              {isOptimizing ? "Optimizing..." : "Optimize Prompt"}
-            </Button>
+          <div className="space-y-2">
+            <div className="flex items-center space-x-2">
+              <Button
+                onClick={handleOptimizePrompt}
+                disabled={isOptimizing || !currentData.config.prompt}
+                size="sm"
+                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                {isOptimizing ? "Optimizing..." : "Optimize Prompt"}
+              </Button>
+              <Button
+                onClick={undoLastPromptChange}
+                disabled={promptHistory.length === 0}
+                size="sm"
+                variant="outline"
+                title={
+                  promptHistory.length === 0
+                    ? "Nothing to undo"
+                    : "Undo last change"
+                }
+              >
+                Undo
+              </Button>
+            </div>
+            {isPreviewingOptimization && optimizationResult && (
+              <div className="p-3 border rounded-lg bg-gray-50">
+                <div className="text-xs font-medium text-gray-600 mb-2">
+                  Optimized Preview
+                </div>
+                <div className="text-sm whitespace-pre-wrap text-gray-800 max-h-40 overflow-auto">
+                  {optimizationResult}
+                </div>
+                <div className="flex items-center space-x-2 mt-3">
+                  <Button
+                    size="sm"
+                    onClick={applyOptimizedPrompt}
+                    className="bg-blue-600 hover:bg-blue-700"
+                  >
+                    Apply
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={cancelOptimizationPreview}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
           </div>
         )}
       </div>