From 72821b543eb684b245aaf7e7a70cb1f8132a4b0c Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Wed, 10 May 2023 13:02:05 -0400
Subject: [PATCH] Bug fix prompt node. Resizable code editor and Inspect nodes

---
 chain-forge/src/EvaluatorNode.js     | 10 ++++++++--
 chain-forge/src/InspectorNode.js     |  4 +++-
 chain-forge/src/PromptNode.js        |  6 ++++++
 chain-forge/src/text-fields-node.css | 12 ++++++++++--
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/chain-forge/src/EvaluatorNode.js b/chain-forge/src/EvaluatorNode.js
index 564d244..4c9e7ac 100644
--- a/chain-forge/src/EvaluatorNode.js
+++ b/chain-forge/src/EvaluatorNode.js
@@ -180,7 +180,7 @@ const EvaluatorNode = ({ data, id }) => {
         :</div>
         
         {/* <span className="code-style">response</span>: */}
-        <div className="nodrag">
+        <div className="ace-editor-container nodrag">
           <AceEditor
             mode="python"
             theme="xcode"
@@ -189,8 +189,14 @@ const EvaluatorNode = ({ data, id }) => {
             name={"aceeditor_"+id}
             editorProps={{ $blockScrolling: true }}
             width='400px'
-            height='200px'
+            height='100px'
             tabSize={2}
+            onLoad={editorInstance => {  // Make Ace Editor div resizeable. 
+              editorInstance.container.style.resize = "both";
+              document.addEventListener("mouseup", e => (
+                editorInstance.resize()
+              ));
+            }}
           />
         </div>
         {/* <CodeMirror
diff --git a/chain-forge/src/InspectorNode.js b/chain-forge/src/InspectorNode.js
index 6410e8f..4a1720b 100644
--- a/chain-forge/src/InspectorNode.js
+++ b/chain-forge/src/InspectorNode.js
@@ -84,7 +84,7 @@ const InspectorNode = ({ data, id }) => {
                     );
                 });                
                 return (
-                    <div key={llm} className="llm-response-container nowheel">
+                    <div key={llm} className="llm-response-container">
                         <h1>{llm}</h1>
                         {res_divs}
                     </div>
@@ -132,7 +132,9 @@ const InspectorNode = ({ data, id }) => {
       {/* <div className="var-select-toolbar">
         {varSelects}
       </div> */}
+      <div className="inspect-response-container nowheel nodrag">
       {responses}
+      </div>
       <Handle
         type="target"
         position="left"
diff --git a/chain-forge/src/PromptNode.js b/chain-forge/src/PromptNode.js
index 9bd2e61..9a5f46e 100644
--- a/chain-forge/src/PromptNode.js
+++ b/chain-forge/src/PromptNode.js
@@ -202,6 +202,12 @@ const PromptNode = ({ data, id }) => {
         return;
     }
 
+    // Check if the PromptNode is not already waiting for a response...
+    if (status === 'loading') {
+        setRunTooltip('Fetching responses...');
+        return;
+    }
+
     // Get input data and prompt
     const [py_prompt, pulled_vars] = pullInputData();
     const llms = llmItemsCurrState.map(item => item.model);
diff --git a/chain-forge/src/text-fields-node.css b/chain-forge/src/text-fields-node.css
index e481890..7f00cc1 100644
--- a/chain-forge/src/text-fields-node.css
+++ b/chain-forge/src/text-fields-node.css
@@ -144,6 +144,10 @@
     border-radius: 5px;
   }
 
+  .ace-editor-container {
+    resize:vertical;
+  }
+
   .vis-node {
     background-color: #fff;
     padding: 10px;
@@ -156,8 +160,12 @@
     padding: 10px;
     border: 1px solid #999;
     border-radius: 5px;
+  }
+  .inspect-response-container {
     overflow-y: auto;
-    max-height: 400px;
+    width: 450px;
+    max-height: 350px;
+    resize: both;
   }
 
   .small-response {
@@ -172,7 +180,7 @@
   }
 
   .llm-response-container {
-    max-width: 450px;
+    max-width: 100%;
   }
   .llm-response-container h1 {
     font-weight: 400;