Merge pull request #21 from Unity-Lab-AI/develop

Develop

Author: hackall360

ai/chat-part1.js

@@ -1,11 +1,25 @@
 document.addEventListener("DOMContentLoaded", () => {
-  const { chatBox, chatInput, clearChatBtn, voiceToggleBtn, modelSelect, synth, autoSpeakEnabled, speakMessage, stopSpeaking, showToast, toggleSpeechRecognition, initSpeechRecognition } = window._chatInternals;
-
+  const {
+    chatBox,
+    chatInput,
+    clearChatBtn,
+    voiceToggleBtn,
+    modelSelect,
+    synth,
+    autoSpeakEnabled,
+    speakMessage,
+    stopSpeaking,
+    showToast,
+    toggleSpeechRecognition,
+    initSpeechRecognition
+  } = window._chatInternals;
+  
   // No static currentSession; we'll fetch it fresh each time
+  
   function randomSeed() {
     return Math.floor(Math.random() * 1000000).toString();
   }
-
+  
   function generateSessionTitle(messages) {
     let title = "";
     for (let i = 0; i < messages.length; i++) {
@@ -18,7 +32,7 @@ document.addEventListener("DOMContentLoaded", () => {
     if (title.length > 50) title = title.substring(0, 50) + "...";
     return title;
   }
-
+  
   function checkAndUpdateSessionTitle() {
     const currentSession = Storage.getCurrentSession();
     if (!currentSession.name || currentSession.name === "New Chat") {
@@ -28,12 +42,23 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     }
   }
-
+  
+  // Wait for Prism.js to load before applying highlighting
   function waitForPrism(callback) {
     if (window.Prism) callback();
     else setTimeout(() => waitForPrism(callback), 100);
   }
-
+  
+  // Highlight all code blocks inside chatBox
+  function highlightAllCodeBlocks() {
+    waitForPrism(() => {
+      const codeBlocks = chatBox.querySelectorAll("pre code");
+      codeBlocks.forEach((block) => {
+        Prism.highlightElement(block);
+      });
+    });
+  }
+  
   function appendMessage({ role, content, index }) {
     const container = document.createElement("div");
     container.classList.add("message");
@@ -97,9 +122,11 @@ document.addEventListener("DOMContentLoaded", () => {
       copyBtn.className = "message-action-btn";
       copyBtn.textContent = "Copy";
       copyBtn.addEventListener("click", () => {
-        navigator.clipboard.writeText(content).then(() => showToast("AI response copied to clipboard")).catch(() => {
-          showToast("Failed to copy to clipboard");
-        });
+        navigator.clipboard.writeText(content)
+          .then(() => showToast("AI response copied to clipboard"))
+          .catch(() => {
+            showToast("Failed to copy to clipboard");
+          });
       });
       actionsDiv.appendChild(copyBtn);
       const speakBtn = document.createElement("button");
@@ -147,11 +174,13 @@ document.addEventListener("DOMContentLoaded", () => {
         copyCodeBtn.textContent = "Copy Code";
         copyCodeBtn.style.fontSize = "12px";
         copyCodeBtn.addEventListener("click", () => {
-          navigator.clipboard.writeText(codeContent).then(() => {
-            showToast("Code copied to clipboard");
-          }).catch(() => {
-            showToast("Failed to copy code");
-          });
+          navigator.clipboard.writeText(codeContent)
+            .then(() => {
+              showToast("Code copied to clipboard");
+            })
+            .catch(() => {
+              showToast("Failed to copy code");
+            });
         });
         buttonContainer.appendChild(copyCodeBtn);
         const downloadCodeBtn = document.createElement("button");
@@ -171,7 +200,7 @@ document.addEventListener("DOMContentLoaded", () => {
       speakMessage(content);
     }
   }
-
+  
   function downloadCodeAsTxt(codeContent, language) {
     const blob = new Blob([codeContent], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
@@ -184,7 +213,7 @@ document.addEventListener("DOMContentLoaded", () => {
     URL.revokeObjectURL(url);
     showToast("Code downloaded as .txt");
   }
-
+  
   function createImageElement(url) {
     const imageContainer = document.createElement("div");
     imageContainer.className = "ai-image-container";
@@ -227,7 +256,7 @@ document.addEventListener("DOMContentLoaded", () => {
     imageContainer.appendChild(buttonContainer);
     return imageContainer;
   }
-
+  
   function renderMarkdown(mdText) {
     if (window.marked) {
       marked.setOptions({
@@ -242,28 +271,34 @@ document.addEventListener("DOMContentLoaded", () => {
       return mdText.replace(/\n/g, "<br>");
     }
   }
-
+  
   function escapeHTML(html) {
-    return html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+    return html.replace(/&/g, "&amp;")
+               .replace(/</g, "&lt;")
+               .replace(/>/g, "&gt;")
+               .replace(/"/g, "&quot;")
+               .replace(/'/g, "&#039;");
   }
-
+  
   function renderStoredMessages(messages) {
     chatBox.innerHTML = "";
     messages.forEach((msg, idx) => appendMessage({ role: msg.role, content: msg.content, index: idx }));
+    highlightAllCodeBlocks();
   }
-
+  
   window.addNewMessage = function ({ role, content }) {
     const currentSession = Storage.getCurrentSession();
     currentSession.messages.push({ role, content });
     Storage.updateSessionMessages(currentSession.id, currentSession.messages);
     appendMessage({ role, content, index: currentSession.messages.length - 1 });
     if (role === "ai") checkAndUpdateSessionTitle();
   };
-
+  
   function editMessage(msgIndex) {
     const currentSession = Storage.getCurrentSession();
     const oldMessage = currentSession.messages[msgIndex];
     if (!oldMessage) return;
+    window._chatInternals.stopSpeaking();
     const newContent = prompt("Edit this message:", oldMessage.content);
     if (newContent === null || newContent === oldMessage.content) return;
     if (oldMessage.role === "user") {
@@ -285,17 +320,20 @@ document.addEventListener("DOMContentLoaded", () => {
       sendToPollinations(() => {
         const loadingMsg = document.getElementById(loadingMsgId);
         if (loadingMsg) loadingMsg.remove();
+        highlightAllCodeBlocks();
       }, newContent);
       showToast("User message updated and new response generated");
     } else {
       currentSession.messages[msgIndex].content = newContent;
       Storage.updateSessionMessages(currentSession.id, currentSession.messages);
       renderStoredMessages(currentSession.messages);
+      highlightAllCodeBlocks();
       showToast("AI message updated");
     }
   }
-
+  
   function reGenerateAIResponse(aiIndex) {
+    window._chatInternals.stopSpeaking();
     const currentSession = Storage.getCurrentSession();
     if (aiIndex < 0 || aiIndex >= currentSession.messages.length) return;
     let userIndex = -1;
@@ -327,10 +365,11 @@ document.addEventListener("DOMContentLoaded", () => {
     sendToPollinations(() => {
       const loadingMsg = document.getElementById(loadingMsgId);
       if (loadingMsg) loadingMsg.remove();
+      highlightAllCodeBlocks();
       showToast("Response regenerated successfully");
     }, userMessage);
   }
-
+  
   window.sendToPollinations = function (callback = null, overrideContent = null) {
     const currentSession = Storage.getCurrentSession();
     const loadingMsgId = "loading-" + Date.now();
@@ -344,7 +383,7 @@ document.addEventListener("DOMContentLoaded", () => {
     loadingDiv.textContent = "Thinking...";
     chatBox.appendChild(loadingDiv);
     chatBox.scrollTop = chatBox.scrollHeight;
-    const memoryInstructions = "You are the user's AI. Be yourself, the 'you' and name and gender you know is you the AI. Do not mix up your name and gender with the user's. Write user 'memories' you make in [memory]your_text_memory[/memory] format, and include an additional plain text description in your response. When sharing code, always use [CODE]language\ncode[/CODE] for proper syntax highlighting (e.g., [CODE]python\nprint('Hello')\n[/CODE]). Always wrap code in these blocks for readability. Images can be generated via https://image.pollinations.ai/prompt/your_detailed_prompt_here.";
+    const memoryInstructions = "You are the user's AI. Be yourself, the 'you' and name and gender you know is you the AI. Do not mix up your name and gender with the user's. Write user 'memories' you make in [memory]your_text_memory[/memory] format, and include an additional plain text description in your response. When sharing code, always use [CODE]language\ncode[/CODE] for proper syntax highlighting (e.g., [CODE]python\nprint('Hello')\n[/CODE]). Always wrap code in these blocks for readability. Images can be generated via https://image.pollinations.ai/openai/prompt/your_detailed_prompt_here.";
     const messages = [];
     if (memoryInstructions) messages.push({ role: "system", content: memoryInstructions });
     const memories = Memory.getMemories();
@@ -361,8 +400,9 @@ document.addEventListener("DOMContentLoaded", () => {
     if (overrideContent && messages[messages.length - 1].content !== overrideContent) {
       messages.push({ role: "user", content: overrideContent });
     }
+    const safeParam = window._pollinationsAPIConfig ? `safe=${window._pollinationsAPIConfig.safe}` : "safe=false";
     const body = { messages, model: currentSession.model || modelSelect.value || "unity", stream: false };
-    fetch("https://text.pollinations.ai/openai", {
+    fetch(`https://text.pollinations.ai/openai?${safeParam}`, {
       method: "POST",
       headers: { "Content-Type": "application/json", Accept: "application/json" },
       body: JSON.stringify(body)
@@ -375,28 +415,23 @@ document.addEventListener("DOMContentLoaded", () => {
         const loadingMsg = document.getElementById(loadingMsgId);
         if (loadingMsg) loadingMsg.remove();
         let aiContent = extractAIContent(data);
-        
-        // Check if the user's prompt is requesting an image
         const lastUserMsg = messages[messages.length - 1].content.toLowerCase();
-        const isImageRequest = lastUserMsg.includes("image") || lastUserMsg.includes("picture") || lastUserMsg.includes("show me") || lastUserMsg.includes("generate an image");
-        
-        // If the prompt suggests an image request but no image URL is in the response, generate one
+        const isImageRequest = lastUserMsg.includes("image") ||
+                               lastUserMsg.includes("picture") ||
+                               lastUserMsg.includes("show me") ||
+                               lastUserMsg.includes("generate an image");
         if (aiContent && isImageRequest && !aiContent.includes("https://image.pollinations.ai")) {
-          let imagePrompt = lastUserMsg
-            .replace(/show me|generate|image of|picture of|image|picture/gi, "")
-            .trim();
-          
+          let imagePrompt = lastUserMsg.replace(/show me|generate|image of|picture of|image|picture/gi, "").trim();
           if (imagePrompt.length < 5 && aiContent.toLowerCase().includes("image")) {
-            imagePrompt = aiContent
-              .toLowerCase()
-              .replace(/here's an image of|image|to enjoy visually/gi, "")
-              .trim();
+            imagePrompt = aiContent.toLowerCase().replace(/here's an image of|image|to enjoy visually/gi, "").trim();
+          }
+          if (imagePrompt.length > 100) {
+            imagePrompt = imagePrompt.substring(0, 100);
           }
-          
-          const imageUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(imagePrompt)}?width=512&height=512&seed=${randomSeed()}`;
+          imagePrompt += ", photographic";
+          const imageUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(imagePrompt)}?width=512&height=512&seed=${randomSeed()}&${safeParam}&nolog=true`;
           aiContent += `\n\n**Generated Image:**\n${imageUrl}`;
         }
-        
         if (aiContent) {
           const foundMemories = parseMemoryBlocks(aiContent);
           foundMemories.forEach((m) => Memory.addMemoryEntry(m));
@@ -415,28 +450,32 @@ document.addEventListener("DOMContentLoaded", () => {
         }
       });
   };
-
+  
   function extractAIContent(response) {
     if (response.choices && response.choices.length > 0) {
-      if (response.choices[0].message && response.choices[0].message.content) return response.choices[0].message.content;
-      else if (response.choices[0].text) return response.choices[0].text;
-    } else if (response.response) return response.response;
-    else if (typeof response === "string") return response;
+      if (response.choices[0].message && response.choices[0].message.content)
+        return response.choices[0].message.content;
+      else if (response.choices[0].text)
+        return response.choices[0].text;
+    } else if (response.response)
+      return response.response;
+    else if (typeof response === "string")
+      return response;
     return "Sorry, I couldn't process that response.";
   }
-
+  
   function parseMemoryBlocks(text) {
     const memRegex = /\[memory\]([\s\S]*?)\[\/memory\]/gi;
     const found = [];
     let match;
     while ((match = memRegex.exec(text)) !== null) found.push(match[1].trim());
     return found;
   }
-
+  
   function removeMemoryBlocks(text) {
     return text.replace(/\[memory\][\s\S]*?\[\/memory\]/gi, "");
   }
-
+  
   if (voiceToggleBtn) {
     voiceToggleBtn.addEventListener("click", window._chatInternals.toggleAutoSpeak);
     window._chatInternals.updateVoiceToggleUI();
@@ -455,7 +494,7 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     }, 2000);
   }
-
+  
   if (clearChatBtn) {
     clearChatBtn.addEventListener("click", () => {
       const currentSession = Storage.getCurrentSession();
@@ -467,7 +506,7 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     });
   }
-
+  
   function checkFirstLaunch() {
     const firstLaunch = localStorage.getItem("firstLaunch") === "0";
     if (firstLaunch) {
@@ -498,7 +537,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
   checkFirstLaunch();
-
+  
   function setupVoiceInputButton() {
     if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
       const inputButtonsContainer = document.querySelector(".input-buttons-container");
@@ -514,7 +553,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
   setupVoiceInputButton();
-
+  
   const sendButton = document.getElementById("send-button");
   function handleSendMessage() {
     const message = chatInput.value.trim();
@@ -525,24 +564,24 @@ document.addEventListener("DOMContentLoaded", () => {
     window.sendToPollinations();
     sendButton.disabled = true;
   }
-
+  
   chatInput.addEventListener("input", () => {
     sendButton.disabled = chatInput.value.trim() === "";
     chatInput.style.height = "auto";
     chatInput.style.height = chatInput.scrollHeight + "px";
   });
-
+  
   chatInput.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSendMessage();
     }
   });
-
+  
   sendButton.addEventListener("click", () => {
     handleSendMessage();
   });
-
+  
   const initialSession = Storage.getCurrentSession();
   if (initialSession.messages && initialSession.messages.length > 0) {
     renderStoredMessages(initialSession.messages);

ai/chat-part2.js

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Unity Chat UI 9.0</title>
+    <title>Unity Chat UI 0.9.63</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Favicon -->
     <link rel="icon" href="favicon.ico" type="image/x-icon" />
@@ -293,6 +293,15 @@ <h3 class="modal-title">Settings</h3>
               <!-- Will be populated by JS -->
             </select>
           </div>
+          
+          <div class="form-group mb-3">
+            <label for="voice-select" class="form-label">
+              <i class="fas fa-headset"></i> Voice Selection:
+            </label>
+            <select id="voice-select" class="form-control">
+              <!-- Voices will dynamically populate here -->
+            </select>
+          </div>
 
           <div class="d-grid gap-2">
             <button
@@ -653,4 +662,4 @@ <h2 class="welcome-heading">Welcome to Unity Chat!</h2>
       })();
     </script>
   </body>
-</html>
+</html>