fix(askai): improve textarea detection with retries and multiple selectors

- Add retry logic with increasing delays (up to 5 attempts)
- Try multiple CSS selectors to find textarea
- Dispatch both input and change events for React
- Add detailed logging for debugging
- Handle case where textarea might take time to render

Author: jstirnaman

assets/js/ask-ai.js

@@ -229,31 +229,59 @@ function setupVersionPrefill(): void {
     window.Kapa('onModalOpen', () => {
       console.log('[AskAI] Modal opened');
 
-      // Wait a moment for the input to be rendered
-      setTimeout(() => {
-        // Find the textarea input
-        const textarea = document.querySelector<HTMLTextAreaElement>(
-          'textarea[placeholder*="Ask"]'
-        );
-        console.log('[AskAI] Textarea found:', !!textarea);
-
-        if (textarea && (!textarea.value || textarea.value.trim() === '')) {
-          console.log('[AskAI] Setting textarea value to:', versionContext);
-          textarea.value = versionContext;
-
-          // Dispatch input event to notify React
-          const inputEvent = new Event('input', { bubbles: true });
-          textarea.dispatchEvent(inputEvent);
-
-          // Focus at the beginning so user can start typing
-          textarea.setSelectionRange(0, 0);
-          textarea.focus();
-
-          console.log('[AskAI] Version context added to input');
+      // Try multiple times with different delays to find the textarea
+      const trySetValue = (attempt = 0): void => {
+        console.log(`[AskAI] Attempt ${attempt + 1} to find textarea`);
+
+        // Try multiple selectors
+        const selectors = [
+          'textarea[placeholder*="Ask"]',
+          'textarea[placeholder*="ask"]',
+          'textarea',
+          '#kapa-widget-container textarea',
+          '[data-kapa-widget] textarea',
+        ];
+
+        let textarea: HTMLTextAreaElement | null = null;
+        for (const selector of selectors) {
+          textarea = document.querySelector<HTMLTextAreaElement>(selector);
+          if (textarea) {
+            console.log(`[AskAI] Found textarea with selector: ${selector}`);
+            break;
+          }
+        }
+
+        if (textarea) {
+          // Check if it already has a value
+          if (!textarea.value || textarea.value.trim() === '') {
+            console.log('[AskAI] Setting textarea value to:', versionContext);
+            textarea.value = versionContext;
+
+            // Dispatch multiple events to ensure React picks it up
+            const inputEvent = new Event('input', { bubbles: true });
+            const changeEvent = new Event('change', { bubbles: true });
+            textarea.dispatchEvent(inputEvent);
+            textarea.dispatchEvent(changeEvent);
+
+            // Focus at the beginning so user can start typing
+            textarea.setSelectionRange(0, 0);
+            textarea.focus();
+
+            console.log('[AskAI] Version context added to input');
+          } else {
+            console.log('[AskAI] Textarea already has value:', textarea.value);
+          }
+        } else if (attempt < 5) {
+          // Try again with increasing delays
+          const delay = (attempt + 1) * 100;
+          console.log(`[AskAI] Textarea not found, retrying in ${delay}ms`);
+          setTimeout(() => trySetValue(attempt + 1), delay);
         } else {
-          console.log('[AskAI] Textarea already has value or not found');
+          console.log('[AskAI] Failed to find textarea after 5 attempts');
         }
-      }, 100);
+      };
+
+      trySetValue();
     });
 
     console.log('[AskAI] Version pre-fill setup complete');