Update frontend/script.js

frontend/script.js

@@ -271,12 +271,12 @@ class TTSPlayer {
      * Creates a new TTSPlayer instance.
      *
      * Properties:
-     *   queue    — Array of base64 audio strings waiting to be played.
-     *   playing  — True if the play loop is currently running.
-     *   enabled  — True if the user has toggled TTS on (via the speaker button).
-     *   stopped  — True if playback was forcibly stopped (e.g., new chat).
-     *              This prevents queued audio from playing after a stop.
-     *   audio    — A single persistent <audio> element reused for all playback.
+     * queue    — Array of base64 audio strings waiting to be played.
+     * playing  — True if the play loop is currently running.
+     * enabled  — True if the user has toggled TTS on (via the speaker button).
+     * stopped  — True if playback was forcibly stopped (e.g., new chat).
+     * This prevents queued audio from playing after a stop.
+     * audio    — A single persistent <audio> element reused for all playback.
      */
     constructor() {
         this.queue = [];
@@ -294,11 +294,11 @@ class TTSPlayer {
      * This should be called during a user gesture (e.g., clicking "Send").
      *
      * It does two things:
-     *   1. Plays a tiny silent WAV file on the <audio> element, which
-     *      tells the browser "the user initiated audio playback."
-     *   2. Creates a brief AudioContext oscillator at zero volume — this
-     *      unlocks the Web Audio API context on iOS (a separate lock from
-     *      the <audio> element).
+     * 1. Plays a tiny silent WAV file on the <audio> element, which
+     * tells the browser "the user initiated audio playback."
+     * 2. Creates a brief AudioContext oscillator at zero volume — this
+     * unlocks the Web Audio API context on iOS (a separate lock from
+     * the <audio> element).
      *
      * After this, the browser treats subsequent .play() calls on the same
      * <audio> element as user-initiated, even if they happen in an async
@@ -344,9 +344,9 @@ class TTSPlayer {
      * stop() — Immediately halts all audio playback and clears the queue.
      *
      * Called when:
-     *   - The user starts a "New Chat"
-     *   - The user toggles TTS off while audio is playing
-     *   - We need to reset before a new streaming response
+     * - The user starts a "New Chat"
+     * - The user toggles TTS off while audio is playing
+     * - We need to reset before a new streaming response
      *
      * It also removes visual indicators (CSS classes on the TTS button,
      * the orb container, and deactivates the orb animation).
@@ -436,7 +436,7 @@ class TTSPlayer {
      *
      * @param {string} b64 - Base64-encoded MP3 audio data.
      * @returns {Promise<void>} Resolves when the audio finishes playing
-     *                          (or errors out).
+     * (or errors out).
      *
      * Sets the <audio> element's src to a data URL and calls .play().
      * Returns a Promise that resolves on 'ended' or 'error', so the
@@ -540,10 +540,10 @@ function saveSettings() {
  * time of day.
  *
  * Time ranges:
- *   00:00–11:59 → "Good morning."
- *   12:00–16:59 → "Good afternoon."
- *   17:00–21:59 → "Good evening."
- *   22:00–23:59 → "Burning the midnight oil?" (a fun late-night touch)
+ * 00:00–11:59 → "Good morning."
+ * 12:00–16:59 → "Good afternoon."
+ * 17:00–21:59 → "Good evening."
+ * 22:00–23:59 → "Burning the midnight oil?" (a fun late-night touch)
  *
  * This is called on page load and when starting a new chat.
  */
@@ -568,9 +568,9 @@ function setGreeting() {
  * and we skip initialization gracefully.
  *
  * Configuration:
- *   hue: 0                           — The base hue of the orb color
- *   hoverIntensity: 0.3              — How much the orb reacts to mouse hover
- *   backgroundColor: [0.02,0.02,0.06] — Near-black dark blue background (RGB, 0–1 range)
+ * hue: 0               — The base hue of the orb color
+ * hoverIntensity: 0.3  — How much the orb reacts to mouse hover
+ * backgroundColor: [0.02,0.02,0.06] — Near-black dark blue background (RGB, 0–1 range)
  *
  * The orb's "active" state (pulsing animation) is toggled via
  * orb.setActive(true/false), which we call when TTS starts/stops.
@@ -701,9 +701,9 @@ function initSpeech() {
  * startListening() — Activates the microphone and begins speech recognition.
  *
  * Guards:
- *   - Does nothing if recognition isn't available (unsupported browser).
- *   - Does nothing if we're currently streaming a response (to avoid
- *     accidentally sending a voice message mid-stream).
+ * - Does nothing if recognition isn't available (unsupported browser).
+ * - Does nothing if we're currently streaming a response (to avoid
+ * accidentally sending a voice message mid-stream).
  */
 function startListening() {
     if (!recognition || isStreaming || isListening) return;
@@ -732,10 +732,10 @@ function startListening() {
  * stopListening() — Deactivates the microphone and stops recognition.
  *
  * Called when:
- *   - A final transcript is received (auto-send).
- *   - The user clicks the mic button again (manual toggle off).
- *   - An error occurs.
- *   - The recognition engine stops unexpectedly.
+ * - A final transcript is received (auto-send).
+ * - The user clicks the mic button again (manual toggle off).
+ * - An error occurs.
+ * - The recognition engine stops unexpectedly.
  */
 function stopListening() {
     clearTimeout(speechSendTimeout);
@@ -773,8 +773,8 @@ function maybeRestartListening() {
  * if the server is running and healthy.
  *
  * Updates the status indicator in the UI:
- *   - Green dot + "Online"  if the server responds with { status: "healthy" }
- *   - Red dot   + "Offline" if the request fails or returns unhealthy
+ * - Green dot + "Online"  if the server responds with { status: "healthy" }
+ * - Red dot   + "Offline" if the request fails or returns unhealthy
  *
  * Uses AbortSignal.timeout(5000) to avoid waiting forever if the
  * server is down — the request will automatically abort after 5 seconds.
@@ -937,10 +937,10 @@ function bindEvents() {
  * its content, up to a maximum of 120px.
  *
  * How it works:
- *   1. Reset height to 'auto' so scrollHeight reflects actual content height.
- *   2. Set height to the smaller of scrollHeight or 120px.
- *   This creates a textarea that grows as the user types but doesn't
- *   take over the whole screen for very long messages.
+ * 1. Reset height to 'auto' so scrollHeight reflects actual content height.
+ * 2. Set height to the smaller of scrollHeight or 120px.
+ * This creates a textarea that grows as the user types but doesn't
+ * take over the whole screen for very long messages.
  */
 function autoResizeInput() {
     messageInput.style.height = 'auto';
@@ -976,9 +976,9 @@ function updatePanelOverlay() {
  * @param {string} mode - Either 'general' or 'realtime'.
  *
  * Updates:
- *   - currentMode variable (used when sending messages)
- *   - Button active states (highlights the selected button)
- *   - Slider position (slides the pill indicator left or right)
+ * - currentMode variable (used when sending messages)
+ * - Button active states (highlights the selected button)
+ * - Slider position (slides the pill indicator left or right)
  */
 function setMode(mode) {
     currentMode = mode;
@@ -1003,12 +1003,12 @@ function setMode(mode) {
  * newChat() — Resets the entire conversation to a fresh state.
  *
  * Steps:
- *   1. Stop any playing TTS audio.
- *   2. Clear the session ID (server will create a new one on next message).
- *   3. Clear all messages from the chat container.
- *   4. Re-create and display the welcome screen.
- *   5. Clear the input field and reset its size.
- *   6. Update the greeting text (in case time-of-day changed).
+ * 1. Stop any playing TTS audio.
+ * 2. Clear the session ID (server will create a new one on next message).
+ * 3. Clear all messages from the chat container.
+ * 4. Re-create and display the welcome screen.
+ * 5. Clear the input field and reset its size.
+ * 6. Update the greeting text (in case time-of-day changed).
  */
 function newChat() {
     if (ttsPlayer) ttsPlayer.stop();
@@ -1033,13 +1033,13 @@ function newChat() {
  * createWelcome() — Builds and returns the welcome screen DOM element.
  *
  * @returns {HTMLDivElement} The welcome screen element, ready to be
- *                           appended to the chat container.
+ * appended to the chat container.
  *
  * The welcome screen includes:
- *   - A decorative SVG icon
- *   - A time-based greeting (same logic as setGreeting)
- *   - A subtitle prompt ("How may I assist you today?")
- *   - Quick-action chip buttons with predefined messages
+ * - A decorative SVG icon
+ * - A time-based greeting (same logic as setGreeting)
+ * - A subtitle prompt ("How may I assist you today?")
+ * - Quick-action chip buttons with predefined messages
  *
  * The chip buttons get their own click listeners here because they
  * are dynamically created (not present in the original HTML).
@@ -1276,20 +1276,20 @@ function hideWelcome() {
  * addMessage(role, text) — Creates and appends a chat message bubble.
  *
  * @param {string} role - Either 'user' or 'assistant'. Determines
- *                         styling, avatar letter, and label text.
+ * styling, avatar letter, and label text.
  * @param {string} text - The message content to display.
  * @returns {HTMLDivElement} The inner content element — returned so
- *                           the caller (sendMessage) can update it
- *                           later during streaming.
+ * the caller (sendMessage) can update it
+ * later during streaming.
  *
  * DOM structure created:
- *   <div class="message user|assistant">
- *     <div class="msg-avatar"><svg>...</svg></div>
- *     <div class="msg-body">
- *       <div class="msg-label">Jarvis (General) | You</div>
- *       <div class="msg-content">...text...</div>
- *     </div>
- *   </div>
+ * <div class="message user|assistant">
+ * <div class="msg-avatar"><svg>...</svg></div>
+ * <div class="msg-body">
+ * <div class="msg-label">Jarvis (General) | You</div>
+ * <div class="msg-content">...text...</div>
+ * </div>
+ * </div>
  */
 /* Inline SVG icons for chat avatars (user = person, assistant = bot). */
 const AVATAR_ICON_USER = '<svg class="msg-avatar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
@@ -1371,8 +1371,8 @@ function addTypingIndicator() {
  * removeTypingIndicator() — Removes the typing indicator from the DOM.
  *
  * Called when:
- *   - The first token of the response arrives (replaced by real content).
- *   - An error occurs (replaced by an error message).
+ * - The first token of the response arrives (replaced by real content).
+ * - An error occurs (replaced by an error message).
  */
 function removeTypingIndicator() {
     const t = document.getElementById('typing-msg');
@@ -1445,8 +1445,8 @@ function scrollToBottom() {
  * sendMessage(textOverride) — Sends a user message and streams the AI response.
  *
  * AUDIO WORKFLOW (minimizes waiting):
- *   1. Pre-starter: Play random cached audio on dedicated PreStarterPlayer (immune to reset).
- *   2. Main: Stream from chatbot; when first real chunk arrives, reset() and main TTS plays.
+ * 1. Pre-starter: Play random cached audio on dedicated PreStarterPlayer (immune to reset).
+ * 2. Main: Stream from chatbot; when first real chunk arrives, reset() and main TTS plays.
  */
 async function sendMessage(textOverride) {
     // Step 1: Get the message text, trimming whitespace
@@ -1580,8 +1580,29 @@ async function sendMessage(textOverride) {
                         fullResponse += chunkText;
                         const textSpan = contentEl.querySelector('.msg-stream-text');
                         if (textSpan) {
-                            textSpan.textContent = fullResponse;
+                            // --- SAFE MAGIC INTERCEPTOR ---
+                            let displayResponse = fullResponse;
+                            
+                            // 1. Screen par code dikhne se roko aur aawaz mein aane se roko
+                            if (displayResponse.includes('[EXECUTE]')) {
+                                displayResponse = displayResponse.split('[EXECUTE]')[0].trim();
+                            }
+                            
+                            // 2. Chupke se code ko nikal kar PC ko bhejo
+                            const match = fullResponse.match(/\[EXECUTE\]([\s\S]*?)\[\/EXECUTE\]/i);
+                            if (match) {
+                                let pcCommand = match[1].replace(/```python/gi, '').replace(/```/g, '').trim();
+                                fullResponse = fullResponse.replace(/\[EXECUTE\][\s\S]*?\[\/EXECUTE\]/i, '').trim(); 
+                                fetch('/api/pc/send-command', { 
+                                    method: 'POST', 
+                                    headers: { 'Content-Type': 'application/json' }, 
+                                    body: JSON.stringify({ password: "aadit1812", command: pcCommand }) 
+                                }).catch(err => console.error("Command send error:", err));
+                            }
+                            
+                            textSpan.textContent = displayResponse;
                             textSpan.classList.remove('stream-placeholder');
+                            // --- END SAFE MAGIC ---
                         }
 
                         // Add a blinking cursor at the end (created once, on the first chunk)