feat: send data to AI when element is edited with AI

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1736,7 +1736,7 @@ function RemoteFunctions(config) {
                     if (event.key === 'Enter' && !event.shiftKey) {
                         event.preventDefault();
                         if (textarea.value.trim()) {
-                            this._handleSend(textarea.value.trim());
+                            this._handleSend(event, textarea.value.trim());
                         }
                     } else if (event.key === 'Escape') {
                         event.preventDefault();
@@ -1751,15 +1751,27 @@ function RemoteFunctions(config) {
                     event.preventDefault();
                     event.stopPropagation();
                     if (textarea && textarea.value.trim()) {
-                        this._handleSend(textarea.value.trim());
+                        this._handleSend(event, textarea.value.trim());
                     }
                 });
             }
         },
 
-        _handleSend: function(prompt) {
-            // TODO: need to implement the logic for backend handling here
-            console.log('AI Prompt:', prompt, 'for element:', this.element);
+        _handleSend: function(event, prompt) {
+            const element = this.element;
+            if(!element) {
+                return;
+            }
+            const tagId = element.getAttribute("data-brackets-id");
+
+            window._Brackets_MessageBroker.send({
+                livePreviewEditEnabled: true,
+                event: event,
+                element: element,
+                prompt: prompt,
+                tagId: Number(tagId),
+                AISend: true
+            });
             this.remove();
         },
 

src/LiveDevelopment/LivePreviewEdit.js

@@ -526,6 +526,42 @@ define(function (require, exports, module) {
         }
     }
 
+    function _getRequiredDataForAI(message) {
+        // this is to get the currently live document that is being served in the live preview
+        const editor = _getEditorAndValidate(message.tagId);
+        if (!editor) {
+            return;
+        }
+
+        const range = _getElementRange(editor, message.tagId);
+        if (!range) {
+            return;
+        }
+
+        const { startPos, endPos } = range;
+        // this is the actual source code for the element that we need to duplicate
+        const text = editor.getTextBetween(startPos, endPos);
+        const fileName = editor.document.file.name;
+        const filePath = editor.document.file.fullPath;
+
+        const AIData = {
+            editor: editor, // the editor instance that is being served in the live preview
+            fileName: fileName,
+            filePath: filePath, // the complete absolute path
+            tagId: message.tagId, // the data-brackets-id of the element which was selected for AI edit
+            range: {startPos, endPos}, // the start and end position text in the source code for that element
+            text: text, // the actual source code in between the start and the end pos
+            prompt: message.prompt // the prompt that user typed
+        };
+
+        return AIData;
+    }
+
+    function _editWithAI(message) {
+        const AIData = _getRequiredDataForAI(message);
+        // write the AI implementation here...@abose
+    }
+
     /**
      * This is the main function that is exported.
      * it will be called by LiveDevProtocol when it receives a message from RemoteFunctions.js
@@ -537,9 +573,11 @@ define(function (require, exports, module) {
      * {
                 livePreviewEditEnabled: true,
                 tagId: tagId,
-                delete || duplicate || livePreviewTextEdit: true
+                delete || duplicate || livePreviewTextEdit || AISend: true
                 undoLivePreviewOperation: true (this property is available only for undo operation)
 
+                prompt: prompt (only for AI)
+
                 sourceId: sourceId, (these are for move (drag & drop))
                 targetId: targetId,
                 insertAfter: boolean, (whether to insert after the target element)
@@ -569,6 +607,8 @@ define(function (require, exports, module) {
             _duplicateElementInSourceByTagId(message.tagId);
         } else if (message.livePreviewTextEdit) {
             _editTextInSource(message);
+        } else if (message.AISend) {
+            _editWithAI(message);
         }
     }