From 49ee389c22eed9103e062b1bca8d4613324fa3ff Mon Sep 17 00:00:00 2001
From: JakeSCahill <jake@redpanda.com>
Date: Mon, 9 Dec 2024 11:47:12 +0000
Subject: [PATCH 1/5] Get help with Bloblang playground

---
 src/partials/bloblang-playground.hbs | 62 +++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/partials/bloblang-playground.hbs b/src/partials/bloblang-playground.hbs
index c51dc4f5..bd2aba14 100644
--- a/src/partials/bloblang-playground.hbs
+++ b/src/partials/bloblang-playground.hbs
@@ -9,6 +9,13 @@
     {{/each}}
   </select>
 </div>
+<button
+  id="custom-ai-help"
+  type="button"
+  style="color: rgb(225, 66, 37);border-radius: 10px;border:1px solid;background:none;display:none"
+>
+  Need help? Ask AI
+</button>
 <div class="playground-container">
   <!-- Editors -->
   <section class="editors">
@@ -34,7 +41,8 @@
     <div class="editor-container">
       <details open>
         <summary>Output</summary>
-        <div class="editor" id="ace-output" contenteditable="true">"Output will appear here..."</div>
+        <div class="editor" id="ace-output" contenteditable="true">"Output will appear here..."
+        </div>
       </details>
       <details open>
       <summary>Metadata output</summary>
@@ -52,7 +60,7 @@
   </form>
 </div>
 <script>
-let aceInputEditor, aceMappingEditor, aceOutputEditor,metadataDetails, choices;
+let aceInputEditor, aceMappingEditor, aceOutputEditor,metadataDetails, choices, customAIButton;
 const TAB_SIZE = 2;
 
 // Keys for sessionStorage
@@ -70,9 +78,26 @@ root.sum = this.numbers.sum()`;
 const defaultOutput = "Output will appear here...";
 const defaultMeta = "Output metadata will appear here...";
 
+function simulateEnterKey(element) {
+  // Create a KeyboardEvent for the Enter key
+  const event = new KeyboardEvent("keydown", {
+    key: "Enter",
+    code: "Enter",
+    keyCode: 13,
+    charCode: 13,
+    bubbles: true,
+    cancelable: true
+  });
+
+  // Dispatch the event on the target element
+  element.dispatchEvent(event);
+}
+
+
 document.addEventListener("DOMContentLoaded", () => {
   metadataDetails = document.getElementById("metadata-details");
   const banner = document.getElementById("bloblang-banner");
+  customAIButton = document.getElementById("custom-ai-help");
   const form = document.getElementById("bloblang-form");
   const dismissButton = document.getElementById("dismiss-banner");
   if (sessionStorage.getItem("bloblangBannerDismissed") === "true" && banner) {
@@ -135,6 +160,36 @@ document.addEventListener("DOMContentLoaded", () => {
     saveTosessionStorage();
   });
 
+  customAIButton.addEventListener("click", () => {
+    const input = aceInputEditor.getValue();
+    const mapping = aceMappingEditor.getValue();
+    const output = aceOutputEditor.getValue();
+    // Simulate a click on the AI modal trigger
+    const kapaButton = document.querySelector(".custom-class-kapa");
+    if (kapaButton) {
+      kapaButton.click(); // Simulate the click to open the modal
+      // Wait for the modal and textarea to be created
+      const waitForTextarea = () => {
+        const modal = document.getElementById("kapa-widget-portal");
+        if (modal) {
+          const aiPromptTextarea = modal.querySelector("textarea");
+          if (aiPromptTextarea) {
+            aiPromptTextarea.style.height = '300px !important'
+            // Populate the AI prompt textarea with input, mapping, and output details
+            aiPromptTextarea.value = `I encountered an error with the following configuration:\nInput:\n${input}\nMapping:\n${mapping}\nOutput:\n${output}\nCan you help debug this?`;
+            simulateEnterKey(aiPromptTextarea);
+            return; // Exit once the textarea is populated
+          }
+        }
+        // Retry after a short delay if the textarea is not yet available
+        setTimeout(waitForTextarea, 100);
+      };
+      waitForTextarea();
+    } else {
+      console.error("AI modal trigger button not found.");
+    }
+  });
+
   // Handle prettify button
   document.getElementById("prettify").addEventListener("click", () => {
     try {
@@ -234,6 +289,7 @@ function execute() {
     const result = blobl(getMapping(), getInput());
 
     if (isValidJSON(result)) {
+      customAIButton.style.display = "none";
       const parsedResult = JSON.parse(result);
 
       // Separate message and metadata
@@ -256,6 +312,7 @@ function execute() {
       // If the result is not JSON, handle it as raw text
       aceOutputEditor.session.setMode("ace/mode/text");
       aceOutputEditor.setValue(result, 1);
+      customAIButton.style.display = "inline-block";
 
       aceMetadataEditor.session.setMode("ace/mode/text");
       aceMetadataEditor.setValue("No metadata available", 1);
@@ -264,6 +321,7 @@ function execute() {
     // Handle general errors
     aceOutputEditor.session.setMode("ace/mode/text");
     aceOutputEditor.setValue("Error: " + error.message, 1);
+    customAIButton.style.display = "inline-block";
 
     aceMetadataEditor.session.setMode("ace/mode/text");
     aceMetadataEditor.setValue("Error: " + error.message, 1);

From c71c44caa23fba9c25174b0107481f3e52f6fde9 Mon Sep 17 00:00:00 2001
From: JakeSCahill <jake@redpanda.com>
Date: Fri, 7 Feb 2025 12:57:32 +0000
Subject: [PATCH 2/5] DOC-847 Implement AI assistance with Bloblang playground
 errors

---
 src/css/bloblang-playground.css      | 16 ++++++++
 src/partials/bloblang-playground.hbs | 56 ++++++++++++++--------------
 2 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/css/bloblang-playground.css b/src/css/bloblang-playground.css
index 68eac8bf..1b686eba 100644
--- a/src/css/bloblang-playground.css
+++ b/src/css/bloblang-playground.css
@@ -19,6 +19,22 @@
   z-index: 1000;
 }
 
+.bloblang-playground .custom-ai-help-button {
+  background-color: rgb(225, 66, 37);
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
+  border-radius: 10px;
+  border: none;
+  color: white;
+  height: 32px;
+  font-size: var(--secondary-font-size);
+}
+
+.bloblang-playground .custom-ai-help-button:hover {
+  background-color: #ff5733;
+  color: white;
+  cursor: pointer;
+}
+
 .bloblang-playground .banner span {
   margin: 0;
   flex-grow: 1;
diff --git a/src/partials/bloblang-playground.hbs b/src/partials/bloblang-playground.hbs
index b58b7b1e..4375daed 100644
--- a/src/partials/bloblang-playground.hbs
+++ b/src/partials/bloblang-playground.hbs
@@ -18,10 +18,11 @@ For more details about this bundle and for the source code, see https://github.c
 <button
   id="custom-ai-help"
   type="button"
-  style="color: rgb(225, 66, 37);border-radius: 10px;border:1px solid;background:none;display:none"
+  class="custom-ai-help-button"
 >
-  Need help? Ask AI
+  Get help from AI
 </button>
+
 <div class="playground-container">
   <!-- Editors -->
   <section class="editors">
@@ -123,13 +124,7 @@ function simulateEnterKey(element) {
 
 document.addEventListener("DOMContentLoaded", () => {
   metadataDetails = document.getElementById("metadata-details");
-  const banner = document.getElementById("bloblang-banner");
   customAIButton = document.getElementById("custom-ai-help");
-  const form = document.getElementById("bloblang-form");
-  const dismissButton = document.getElementById("dismiss-banner");
-  if (sessionStorage.getItem("bloblangBannerDismissed") === "true" && banner) {
-    banner.style.display = "none";
-  }
 
   // Initialize input editor
   aceInputEditor = initializeAceEditor("ace-input", 'ace/mode/json', false, defaultInput);
@@ -219,30 +214,33 @@ document.addEventListener("DOMContentLoaded", () => {
   customAIButton.addEventListener("click", () => {
     const input = aceInputEditor.getValue();
     const mapping = aceMappingEditor.getValue();
+    const meta = aceInputMetadataEditor.getValue();
     const output = aceOutputEditor.getValue();
+    const kapa = window.Kapa
+
     // Simulate a click on the AI modal trigger
-    const kapaButton = document.querySelector(".custom-class-kapa");
-    if (kapaButton) {
-      kapaButton.click(); // Simulate the click to open the modal
-      // Wait for the modal and textarea to be created
-      const waitForTextarea = () => {
-        const modal = document.getElementById("kapa-widget-portal");
-        if (modal) {
-          const aiPromptTextarea = modal.querySelector("textarea");
-          if (aiPromptTextarea) {
-            aiPromptTextarea.style.height = '300px !important'
-            // Populate the AI prompt textarea with input, mapping, and output details
-            aiPromptTextarea.value = `I encountered an error with the following configuration:\nInput:\n${input}\nMapping:\n${mapping}\nOutput:\n${output}\nCan you help debug this?`;
-            simulateEnterKey(aiPromptTextarea);
-            return; // Exit once the textarea is populated
-          }
-        }
-        // Retry after a short delay if the textarea is not yet available
-        setTimeout(waitForTextarea, 100);
-      };
-      waitForTextarea();
+    if (kapa) {
+      let aiPromptText = "I am using the Bloblang playground to test my Bloblang mappings for Redpanda Connect. I encountered an error with the following configuration:\n\n";
+      if (input && input !== "{}") {
+        aiPromptText += `Input:\n\n${input}\n\n`;
+      }
+      if (meta && meta !== "{}") {
+        aiPromptText += `Input Metadata:\n\n${meta}\n\n`;
+      }
+      if (mapping) {
+        aiPromptText += `Mapping:\n\n${mapping}\n\n`;
+      }
+      if (output) {
+        aiPromptText += `Output:\n\n${output}\n\n`;
+      }
+      aiPromptText += "Can you help debug this?";
+      window.Kapa.open({
+        mode: 'ai',
+        query: aiPromptText,
+        submit: true
+      })
     } else {
-      console.error("AI modal trigger button not found.");
+      console.warn('Kapa AI is not available. Please check your configuration.')
     }
   });
 

From 13b09f6a532f1f765af053cca61e3c1a3725b4c9 Mon Sep 17 00:00:00 2001
From: JakeSCahill <jake@redpanda.com>
Date: Fri, 7 Feb 2025 13:01:44 +0000
Subject: [PATCH 3/5] Default display none

---
 src/css/bloblang-playground.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/bloblang-playground.css b/src/css/bloblang-playground.css
index 1b686eba..123b07a2 100644
--- a/src/css/bloblang-playground.css
+++ b/src/css/bloblang-playground.css
@@ -26,11 +26,12 @@
   border: none;
   color: white;
   height: 32px;
+  display: none;
   font-size: var(--secondary-font-size);
 }
 
 .bloblang-playground .custom-ai-help-button:hover {
-  background-color: #ff5733;
+  background-color: #cc4626;
   color: white;
   cursor: pointer;
 }

From e3ef0dd6eb399671e15287c31be61053860d1174 Mon Sep 17 00:00:00 2001
From: Jake Cahill <45230295+JakeSCahill@users.noreply.github.com>
Date: Fri, 7 Feb 2025 14:05:00 +0000
Subject: [PATCH 4/5] Apply suggestions from code review

---
 src/partials/bloblang-playground.hbs | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/partials/bloblang-playground.hbs b/src/partials/bloblang-playground.hbs
index 4375daed..4f9af543 100644
--- a/src/partials/bloblang-playground.hbs
+++ b/src/partials/bloblang-playground.hbs
@@ -106,20 +106,6 @@ function prettifyJSON(json) {
   }
 }
 
-function simulateEnterKey(element) {
-  // Create a KeyboardEvent for the Enter key
-  const event = new KeyboardEvent("keydown", {
-    key: "Enter",
-    code: "Enter",
-    keyCode: 13,
-    charCode: 13,
-    bubbles: true,
-    cancelable: true
-  });
-
-  // Dispatch the event on the target element
-  element.dispatchEvent(event);
-}
 
 
 document.addEventListener("DOMContentLoaded", () => {

From 9dcae2a8ad526e3ece03c76150b1ffff930791af Mon Sep 17 00:00:00 2001
From: Jake Cahill <45230295+JakeSCahill@users.noreply.github.com>
Date: Fri, 7 Feb 2025 14:05:27 +0000
Subject: [PATCH 5/5] Apply suggestions from code review

---
 src/partials/bloblang-playground.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/partials/bloblang-playground.hbs b/src/partials/bloblang-playground.hbs
index 4f9af543..502d75a3 100644
--- a/src/partials/bloblang-playground.hbs
+++ b/src/partials/bloblang-playground.hbs
@@ -220,7 +220,7 @@ document.addEventListener("DOMContentLoaded", () => {
         aiPromptText += `Output:\n\n${output}\n\n`;
       }
       aiPromptText += "Can you help debug this?";
-      window.Kapa.open({
+      kapa.open({
         mode: 'ai',
         query: aiPromptText,
         submit: true