feat: modify logic to gen cursor index

server/src/workflow-management/classes/Generator.ts

@@ -429,19 +429,43 @@ export class WorkflowGenerator {
 
     if ((elementInfo?.tagName === 'INPUT' || elementInfo?.tagName === 'TEXTAREA') && selector) {
       // Calculate the exact position within the element
-      const positionAndCursor = await page.evaluate((selector) => {
+      const positionAndCursor = await page.evaluate(
+        ({ selector, coords }) => {
             const element = document.querySelector(selector);
             if (!element) return null;
             
-        // Get element position for the relative click coordinates
+            const getCursorPosition = (inputElement: HTMLInputElement | HTMLTextAreaElement, clickCoords: Coordinates) => {
-        const rect = element.getBoundingClientRect();
+                const rect = inputElement.getBoundingClientRect();
+                const clickX = clickCoords.x - rect.left;
                 
-        // Get cursor position index
+                // Get the input's text content
-        let cursorIndex = 0;
+                const text = inputElement.value;
-        if ('selectionStart' in element) {
+                
-          // selectionStart gives us the exact index where the cursor is
+                // Create a temporary element to measure text
-          cursorIndex = (element as HTMLInputElement | HTMLTextAreaElement).selectionStart || 0;
+                const measurer = document.createElement('span');
+                measurer.style.font = window.getComputedStyle(inputElement).font;
+                measurer.style.position = 'absolute';
+                measurer.style.whiteSpace = 'pre';
+                measurer.style.visibility = 'hidden';
+                document.body.appendChild(measurer);
+                
+                // Find the position where the click occurred
+                let position = 0;
+                for (let i = 0; i <= text.length; i++) {
+                    measurer.textContent = text.slice(0, i);
+                    const width = measurer.getBoundingClientRect().width;
+                    if (width >= clickX) {
+                        position = i;
+                        break;
                     }
+                }
+                
+                document.body.removeChild(measurer);
+                return position;
+            };
+    
+            const rect = element.getBoundingClientRect();
+            const cursorIndex = getCursorPosition(element as HTMLInputElement | HTMLTextAreaElement, coords);
             
             return {
                 rect: {
@@ -450,7 +474,9 @@ export class WorkflowGenerator {
                 },
                 cursorIndex
             };
-      }, selector);
+        },
+        { selector, coords: coordinates } 
+    );
 
       if (positionAndCursor) {
         const relativeX = coordinates.x - positionAndCursor.rect.x;