From c3bd64e2047eb51ae1fc60e3800d693c6fda70eb Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Tue, 16 Jul 2024 15:53:49 -0400
Subject: [PATCH] add #send_textarea mirror to QR debugger

---
 .../extensions/quick-reply/html/qrEditor.html  |  1 +
 .../extensions/quick-reply/src/QuickReply.js   | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/public/scripts/extensions/quick-reply/html/qrEditor.html b/public/scripts/extensions/quick-reply/html/qrEditor.html
index 5a697800f..8db458d32 100644
--- a/public/scripts/extensions/quick-reply/html/qrEditor.html
+++ b/public/scripts/extensions/quick-reply/html/qrEditor.html
@@ -145,6 +145,7 @@
 			<div title="Minimize" id="qr--modal-minimize" class="qr--modal-debugButton menu_button fa-solid fa-minimize"></div>
 			<div title="Maximize" id="qr--modal-maximize" class="qr--modal-debugButton menu_button fa-solid fa-maximize"></div>
 		</div>
+		<textarea rows="1" id="qr--modal-send_textarea" placeholder="Chat input" title="Chat input"></textarea>
 		<div id="qr--modal-debugState"></div>
 	</div>
 </div>
diff --git a/public/scripts/extensions/quick-reply/src/QuickReply.js b/public/scripts/extensions/quick-reply/src/QuickReply.js
index 489283fe6..ef158b86f 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReply.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReply.js
@@ -984,6 +984,24 @@ export class QuickReply {
                 this.abortController?.abort('Stop button clicked');
             });
 
+            /**@type {HTMLTextAreaElement} */
+            const inputOg = document.querySelector('#send_textarea');
+            const inputMirror = dom.querySelector('#qr--modal-send_textarea');
+            inputMirror.value = inputOg.value;
+            const inputOgMo = new MutationObserver(muts=>{
+                if (muts.find(it=>[...it.removedNodes].includes(inputMirror) || [...it.removedNodes].find(n=>n.contains(inputMirror)))) {
+                    inputOg.removeEventListener('input', inputOgListener);
+                }
+            });
+            inputOgMo.observe(document.body, { childList:true });
+            const inputOgListener = ()=>{
+                inputMirror.value = inputOg.value;
+            };
+            inputOg.addEventListener('input', inputOgListener);
+            inputMirror.addEventListener('input', ()=>{
+                inputOg.value = inputMirror.value;
+            });
+
             /**@type {HTMLElement}*/
             const resumeBtn = dom.querySelector('#qr--modal-resume');
             resumeBtn.addEventListener('click', ()=>{