Update application/static/js/components/chat.js

application/static/js/components/chat.js

@@ -1,3 +1,4 @@
+// application/static/js/chat.js
 import requests from "./request.js";
 
 class Chat{
@@ -27,11 +28,67 @@ class Chat{
             }
             this.uiManager.textBox.value='';
             this.uiManager.sendBtn.disabled = true;
+
+            // Display "Reasoning..." and get the reasoning display element.
+            const reasoningDisplay = this.uiManager.showReasoning();
+
+
             const response = await requests.request('POST','/completions',{"Content-Type": "application/json"},JSON.stringify(payload),true);
+            let fullResponse = ""; // Accumulate the full response
             for await (const chunk of response){
-                this.uiManager.aiP.innerHTML+=chunk;
+                fullResponse += chunk;
+
+                // Check for commands *within* the streamed response
+                let commandMatch;
+                if ((commandMatch = fullResponse.match(/\/(\w+)\s*\(([^)]*)\)/))) {
+                    const command = commandMatch[1];
+                    const argument = commandMatch[2];
+
+                    if (command === "search") {
+                        // Remove the command from the displayed text
+                        fullResponse = fullResponse.replace(commandMatch[0], "");
+                        this.uiManager.aiP.innerHTML = fullResponse; // Update with cleaned text
+                        this.uiManager.renderSymbols.renderAll(this.uiManager.aiP)
+                        // Perform web search
+                        const searchData = await requests.request('POST', '/websearch', { "Content-Type": "application/json" }, JSON.stringify({ query: argument }), false);
+                        const searchResults = await searchData.json();
+                         // Display search results, possibly in a dedicated container
+                        this.uiManager.appendAiMsg(searchResults.result);
+                    } else if (command === "image") {
+                         // Remove the command from the displayed text
+                        fullResponse = fullResponse.replace(commandMatch[0], "");
+                        this.uiManager.aiP.innerHTML = fullResponse;
+                        this.uiManager.renderSymbols.renderAll(this.uiManager.aiP);
+
+                        const imageData = await requests.request('POST', '/generate_image', { "Content-Type": "application/json" }, JSON.stringify({ prompt: argument }), false);
+                         const imageResult = await imageData.json();
+                         if (imageResult && imageResult.image) {
+                             this.uiManager.appendAiMsg(`<img src="data:image/png;base64,${imageResult.image}" alt="Generated Image" style="max-width: 100%; height: auto;">`);
+                         } else {
+                             this.uiManager.appendAiMsg("Error generating image.");
+                         }
+                    } else if (command === "memsave") {
+                        fullResponse = fullResponse.replace(commandMatch[0], ""); //remove command
+                        this.uiManager.aiP.innerHTML = fullResponse;
+                        this.uiManager.renderSymbols.renderAll(this.uiManager.aiP)
+                        await requests.request('POST', '/save_memory', { "Content-Type": "application/json" }, JSON.stringify({ memory: argument, convId: this.uiManager.initializer.convId }), false);
+                        this.uiManager.displayMemory(argument); // Display the saved memory
+
+                    }
+                    //Remove the command and only display the rest
+                    this.uiManager.aiP.innerHTML = fullResponse;
+                } else {
+                    // No command found, display the chunk normally
+                    this.uiManager.aiP.innerHTML = fullResponse; // accumulate
+                }
                 this.uiManager.renderSymbols.renderAll(this.uiManager.aiP)
             };
+
+            if (reasoningDisplay) {
+              this.uiManager.updateReasoningTime(reasoningDisplay);  // Update with the final time
+            }
+
+
         } catch (error) {
             this.uiManager.sendBtn.disabled = false;
             this.uiManager.aiP.innerHTML+= `<span class="error" style="color: red;">${error}</span>`;
@@ -42,6 +99,9 @@ class Chat{
             this.uiManager.initializer.convTitle = this.uiManager.userP.innerText.substring(0,23);
             this.uiManager.addChat();
         }
+
+        // Add read-aloud button *after* the response is complete
+        this.uiManager.addReadAloudButton(this.uiManager.aiDiv);
         this.uiManager.sendBtn.disabled = false;
 
     }