Show original script as well, still need to add revert/switch version functionality

app.py

@@ -238,6 +238,7 @@ def get_http_function_history(function_id):
     
     name = http_function['name']
     version_number = http_function['version_number']
+    original_script = http_function['script_content'] if version_number == 1 else None
 
     http_function_history = []
     if version_number > 1:
@@ -254,11 +255,13 @@ def get_http_function_history(function_id):
                 'version_number': post_version['version_number'],
                 'updated_at': post_version['updated_at']
             })
-
+        
+            if raw_history:
+                original_script = raw_history[-1]['script_content']
 
     if htmx:
-        return render_block(app.jinja_env, 'dashboard/http_functions/history.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function=http_function, http_function_history=http_function_history)
+        return render_block(app.jinja_env, 'dashboard/http_functions/history.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function=http_function, http_function_history=http_function_history, original_script=original_script)
-    return render_template("dashboard/http_functions/history.html", user_id=user_id, name=name, function_id=function_id, http_function=http_function, http_function_history=http_function_history)
+    return render_template("dashboard/http_functions/history.html", user_id=user_id, name=name, function_id=function_id, http_function=http_function, http_function_history=http_function_history, original_script=original_script)
 
 @ app.route("/dashboard/timer_functions", methods=["GET"])
 @login_required

db.py

@@ -114,5 +114,5 @@ ORDER BY invocation_time DESC""", [http_function_id])
     
     def get_http_function_history(self, function_id):
         http_function_history = self.execute(
-            'SELECT version_id, http_function_id, script_content, version_number, updated_at FROM http_functions_versions WHERE http_function_id=%s AND version_number > 1 ORDER BY version_number DESC', [function_id])
+            'SELECT version_id, http_function_id, script_content, version_number, updated_at FROM http_functions_versions WHERE http_function_id=%s ORDER BY version_number DESC', [function_id])
         return http_function_history

templates/dashboard/http_functions/client.html

@@ -4,7 +4,7 @@
 
 {{ render_partial('dashboard/http_functions/header.html', title='Try', user_id=user_id, function_id=function_id,
 name=name,
-show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show_logs=True) }}
+show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show_logs=True, show_history=True) }}
 
 <div class="mx-auto w-full pt-4" id="client-u{{ user_id }}-f{{ function_id }}">
 </div>
@@ -70,6 +70,20 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
         }
     }
 
+    var TabContent = (activeTab, queryParams, hearders, body) => {
+        var tabMappings = {
+            'Query Params': m(KeyValueList, { list: this.queryParams }),
+            'Headers': m(KeyValueList, { list: this.headers }),
+            'Body': m("textarea", {
+                oninput: (e) => this.body = e.target.value,
+                value: this.body,
+                rows: 4,
+                class: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300"
+            })
+        }
+        return tabMappings[this.activeTab];
+    }
+
     var RequestClient = {
         // Initialize component state
         init: function () {
@@ -155,10 +169,15 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
                 m("div", [
                     // Tab headers
                     m("ul.flex.mt-5.border.border-gray-300.rounded-t-lg", [
-                        [{ name: "Query Params", count: this.queryParams.filter(p => p.key && p.value).length }, { name: "Headers", count: this.headers.filter(p => p.key && p.value).length }, { name: "Body", count: null }].map(({ name, count }, index) => m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
+                        [
-                            class: this.activeTab === name ? "border-b-2 text-orange-600" : "",
+                            { name: "Query Params", count: this.queryParams.filter(p => p.key && p.value).length },
-                            onclick: () => this.activeTab = name
+                            { name: "Headers", count: this.headers.filter(p => p.key && p.value).length },
-                        }, `${name}${count ? ` (${count})` : ``}`))
+                            { name: "Body", count: null }
+                        ].map(({ name, count }, index) =>
+                            m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
+                                class: this.activeTab === name ? "border-b-2 text-orange-600" : "",
+                                onclick: () => this.activeTab = name
+                            }, `${name}${count ? ` (${count})` : ``}`))
                     ]),
                     // Tab content
                     this.activeTab === 'Query Params' ? m(KeyValueList, { list: this.queryParams }) : '',

templates/dashboard/http_functions/history.html

@@ -123,6 +123,18 @@ show_edit_form=True) }}
         </div>
         <!-- End Right Content -->
     </div>
+
+    <div id="diff_1_editor" class="relative rounded-lg shadow-lg p-4 text-opacity-0">{{ original_script }}</div>
+    <script>
+        var editor = ace.edit("diff_1_editor");
+        editor.setOptions({
+            maxLines: 100
+        });
+        editor.setTheme("ace/theme/github_dark");
+        editor.session.setMode("ace/mode/javascript");
+
+        editor.session.$worker.send("changeOptions", [{ asi: true }]);
+    </script>
     <!-- End Item -->
     {% else %}
 
@@ -159,7 +171,23 @@ show_edit_form=True) }}
             </button>
         </div>
         <!-- End Right Content -->
+
     </div>
+
+    <div id="diff_1_editor" class="relative rounded-lg shadow-lg p-4 text-opacity-0">{{ original_script }}</div>
+    <script>
+        var editor = ace.edit("diff_1_editor");
+        editor.setOptions({
+            maxLines: 100,
+            readOnly: true,  // Disable editing
+            highlightActiveLine: false,  // Optionally, disable highlighting the active line
+            highlightGutterLine: false   // Optionally, disable highlighting the gutter line
+        });
+        editor.setTheme("ace/theme/github_dark");
+        editor.session.setMode("ace/mode/javascript");
+
+    </script>
+
     <!-- End Item -->
     {% endif %}