Enhancements

com.developer.nefarious.zjoule.plugin/META-INF/MANIFEST.MF

@@ -12,7 +12,7 @@ Require-Bundle:
  org.eclipse.ui.ide;bundle-version="3.22.300",
  org.eclipse.jface,
  org.eclipse.swt,
- org.eclipse.wst.wsdl.ui;bundle-version="1.3.101"
+ org.eclipse.wst.wsdl.ui;bundle-version="1.3.101";resolution:=optional
 Bundle-RequiredExecutionEnvironment: JavaSE-21
 Automatic-Module-Name: com.developer.nefarious.zjoule.plugin
 Import-Package: 

com.developer.nefarious.zjoule.plugin/resources/views/scripts.js

@@ -1,10 +1,37 @@
+const loadingIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="50" height="50" style="shape-rendering: auto; display: block; background: none;" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <circle fill="#422e78" r="10" cy="50" cx="84">
+      <animate begin="0s" keySplines="0 0.5 0.5 1" values="10;0" keyTimes="0;1" calcMode="spline" dur="0.25s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="0s" values="#422e78;#d5c5ff;#a785ff;#8c60ff;#422e78" keyTimes="0;0.25;0.5;0.75;1" calcMode="discrete" dur="1s" repeatCount="indefinite" attributeName="fill"></animate>
+    </circle>
+    <circle fill="#422e78" r="10" cy="50" cx="16">
+      <animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+    <circle fill="#8c60ff" r="10" cy="50" cx="50">
+      <animate begin="-0.25s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="-0.25s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+    <circle fill="#a785ff" r="10" cy="50" cx="84">
+      <animate begin="-0.5s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="-0.5s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+    <circle fill="#d5c5ff" r="10" cy="50" cx="16">
+      <animate begin="-0.75s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="-0.75s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+  </g>
+</svg>
+`
+
 function sendMessage() {
 	const userInput = document.getElementById('userInput').value;
 	if (userInput.trim() === "") return;
 	try {
 		addUserMessage(userInput);
-		var answer = getAIResponse(userInput); // Java callback
-		addBotMessage(answer);
+		getAIResponse(userInput); // Java callback
+		startLoading();
 	} catch (e) {
 	}
 	updatePlaceholder();
@@ -33,6 +60,13 @@ function clearMessageAndScrollDown() {
 	chatBox.scrollTop = chatBox.scrollHeight;
 }
 
+function receiveMessage(output) {
+	finishLoading();
+	addBotMessage(output);
+	updatePlaceholder();
+	clearMessageAndScrollDown();
+}
+
 function login() {
 	hideInstructions();
 	activateChat();
@@ -85,7 +119,7 @@ function updateTag(file) {
 function updatePlaceholder() {
 	const chatBox = document.getElementById("chatBox");
 	const hasMessages = !!chatBox.querySelector(".message");
-	
+
 	if (hasMessages) {
 		hidePlaceholder();
 	} else {
@@ -101,4 +135,33 @@ function showPlaceholder() {
 function hidePlaceholder() {
 	const placeholder = document.getElementById("placeholder");
 	placeholder.style.display = "none";
+}
+
+function blockInput() {
+	document.getElementById('userInput').disabled = true;
+	document.getElementById('send').disabled = true;
+}
+
+function unblockInput() {
+	document.getElementById('userInput').disabled = false;
+	document.getElementById('send').disabled = false;
+}
+
+function startLoading() {
+	const chatBox = document.getElementById('chatBox');
+	const message = document.createElement('div');
+	message.className = 'message bot-message';
+	message.innerHTML = loadingIcon;
+	chatBox.appendChild(message);
+	blockInput();
+}
+
+function finishLoading() {
+	const chatBox = document.getElementById('chatBox');
+	const botMessages = document.getElementsByClassName('message bot-message');
+	if (botMessages.length > 0) {
+		const loadingIndicator = botMessages[botMessages.length - 1];
+		chatBox.removeChild(loadingIndicator);
+	}
+	unblockInput();
 }

com.developer.nefarious.zjoule.plugin/resources/views/styles.css

@@ -131,4 +131,10 @@ code[class] {
 	color: #aaa;
 	text-align: center;
 	display: none;
+}
+
+button:disabled {
+	background-color: #ccc;
+	color: #666;
+	cursor: not-allowed;
 }

com.developer.nefarious.zjoule.plugin/src/com/developer/nefarious/zjoule/plugin/core/functions/PromptHandler.java

@@ -1,7 +1,10 @@
 package com.developer.nefarious.zjoule.plugin.core.functions;
 
+import java.util.concurrent.CompletableFuture;
+
 import org.eclipse.swt.browser.Browser;
 import org.eclipse.swt.browser.BrowserFunction;
+import org.eclipse.swt.widgets.Display;
 
 import com.developer.nefarious.zjoule.plugin.chat.ChatOrchestrator;
 
@@ -13,6 +16,8 @@
  * user input and generate AI-driven responses.
  */
 public class PromptHandler extends BrowserFunction {
+
+	private Browser browser;
 
     /** The {@link ChatOrchestrator} instance responsible for processing user prompts. */
     private ChatOrchestrator chatOrchestrator;
@@ -36,21 +41,62 @@ public static PromptHandler create(final Browser browser, final String name) {
      */
     public PromptHandler(final Browser browser, final String name) {
         super(browser, name);
+        this.browser = browser;
         chatOrchestrator = new ChatOrchestrator();
     }
 
     /**
-     * Handles the JavaScript function call from the browser.
-     * <p>
-     * This method takes the first argument as the user prompt, passes it to the
-     * {@link ChatOrchestrator#getAnswer(String)} method, and returns the generated AI response.
+     * Handles a user prompt from the browser and initiates asynchronous processing to generate an AI response.
+     *
+     * <p>This method is invoked via the {@link BrowserFunction} interface when a corresponding JavaScript
+     * function is called in the browser widget. It processes the first argument as a user prompt, retrieves
+     * an AI-generated response asynchronously using the {@link ChatOrchestrator}, and delivers the response
+     * back to the browser environment through the JavaScript function {@code receiveMessage}.</p>
+     *
+     * <p>The response is escaped to ensure it is safe for inclusion in JavaScript code, avoiding issues
+     * caused by special characters.</p>
+     *
+     * @param arguments an array of objects passed from JavaScript. The first element is expected to be 
+     *                  a {@code String} representing the user prompt.
+     * @return always {@code null}, as the operation is asynchronous and does not provide an immediate result.
      *
-     * @param arguments the arguments passed from the JavaScript function call.
-     * @return the AI-generated response as an {@link Object}.
+     * @throws IllegalArgumentException if {@code arguments} is {@code null}, empty, or if the first element is {@code null}.
      */
     @Override
     public Object function(final Object[] arguments) {
         String userPrompt = arguments[0].toString();
-        return chatOrchestrator.getAnswer(userPrompt);
+
+        CompletableFuture<String> futureResponse = CompletableFuture.supplyAsync(() -> chatOrchestrator.getAnswer(userPrompt));
+
+        futureResponse.thenAccept(response -> {
+            Display.getDefault().asyncExec(new Runnable() {
+            	@Override
+            	public void run() {
+            		String escapedResponse = escapeForJavaScript(response);
+            		browser.execute("receiveMessage(\"" + escapedResponse + "\");");
+            	}
+            });
+        });
+
+        return null; // no need for return as answer will run asynchronously
+    }
+
+    /**
+     * Escapes a string for safe inclusion in JavaScript code.
+     * 
+     * @param input the string to escape
+     * @return the escaped string
+     */
+    private String escapeForJavaScript(final String input) {
+        if (input == null) {
+            return "";
+        }
+        return input
+            .replace("\\", "\\\\") // Escape backslashes
+            .replace("\"", "\\\"") // Escape double quotes
+            .replace("\n", "\\n")  // Escape newlines
+            .replace("\r", "\\r")  // Escape carriage returns
+            .replace("'", "\\'");  // Escape single quotes
     }
+
 }

com.developer.nefarious.zjoule.plugin/src/com/developer/nefarious/zjoule/plugin/core/ui/ViewRender.java

@@ -69,7 +69,7 @@ public String build() {
         buffer.append("<div class=\"chat-input\">");
         buffer.append("<div class=\"tag-box\">#Tag</div>");
         buffer.append("<input type=\"text\" id=\"userInput\" placeholder=\"Type your message here...\" />");
-        buffer.append("<button onclick=\"sendMessage()\">Send</button>");
+        buffer.append("<button id=\"send\" onclick=\"sendMessage()\">Send</button>");
         buffer.append("</div>");
         buffer.append("</div>");
         buffer.append("</body>");