refactor: move ai from remote functions to its respective file

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -49,7 +49,6 @@ function RemoteFunctions(config = {}) {
     let _nodeInfoBox;
     let _nodeMoreOptionsBox;
     let _moreOptionsDropdown;
-    let _aiPromptBox;
     let _hotCorner;
     let _setup = false;
     let _hoverLockTimer = null;
@@ -294,18 +293,6 @@ function RemoteFunctions(config = {}) {
         return element.offsetTop + (element.offsetParent ? getDocumentOffsetTop(element.offsetParent) : 0);
     }
 
-    /**
-     * This function gets called when the AI button is clicked
-     * it shows a AI prompt box to the user
-     * @param {Event} event
-     * @param {DOMElement} element - the HTML DOM element that was clicked
-     */
-    function _handleAIOptionClick(event, element) {
-        // make sure there is no existing AI prompt box, and no other box as well
-        dismissAllUIBoxes();
-        _aiPromptBox = new AIPromptBox(element); // create a new one
-    }
-
     /**
      * This function will get triggered when from the multiple advance DOM buttons, one is clicked
      * this function just checks which exact button was clicked and call the required function
@@ -316,9 +303,7 @@ function RemoteFunctions(config = {}) {
     function handleOptionClick(e, action, element) {
         if (action === "edit-text") {
             startEditing(element);
-        } else if (action === "ai") {
-            _handleAIOptionClick(e, element);
-        } else if(LivePreviewView.getNodeMoreOptionsHandler(action)) {
+        }else if(LivePreviewView.getNodeMoreOptionsHandler(action)) {
             const handler = LivePreviewView.getNodeMoreOptionsHandler(action);
             return handler && handler.handleClick && handler.handleClick(e, element);
         }
@@ -684,12 +669,6 @@ function RemoteFunctions(config = {}) {
 
             let content = `<div class="node-options">`;
 
-            // @abose @devansh
-            // hiding it for now as AI is not yet ready
-            // content += `<span data-action="ai" title="${strings.ai}">
-            //         ${ICONS.ai}
-            //     </span>`;
-
             // Only include edit text option if element supports it
             if (showEditTextOption) {
                 content += `<span data-action="edit-text" class="lp-opt-edit-text" title="${strings.editText}">
@@ -1097,210 +1076,6 @@ function RemoteFunctions(config = {}) {
         }
     };
 
-    // AI prompt box, it is displayed when user clicks on the AI button in the more options box
-    function AIPromptBox(element) {
-        this.element = element;
-        this.selectedModel = 'fast';
-        this.remove = this.remove.bind(this);
-        this.create();
-    }
-
-    AIPromptBox.prototype = {
-        _getBoxPosition: function(boxWidth, boxHeight) {
-            const elemBounds = this.element.getBoundingClientRect();
-            const offset = LivePreviewView.screenOffset(this.element);
-
-            let topPos = offset.top - boxHeight - 6; // 6 for just some little space to breathe
-            let leftPos = offset.left + elemBounds.width - boxWidth;
-
-            // Check if the box would go off the top of the viewport
-            if (elemBounds.top - boxHeight < 6) {
-                topPos = offset.top + elemBounds.height + 6;
-            }
-
-            // Check if the box would go off the left of the viewport
-            if (leftPos < 0) {
-                leftPos = offset.left;
-            }
-
-            return {topPos: topPos, leftPos: leftPos};
-        },
-
-        _style: function() {
-            this.body = window.document.createElement("div");
-            this.body.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
-            // using shadow dom so that user styles doesn't override it
-            const shadow = this.body.attachShadow({ mode: "open" });
-
-            // Calculate responsive dimensions based on viewport width
-            const viewportWidth = window.innerWidth;
-            let boxWidth, boxHeight;
-
-            if (viewportWidth >= 400) {
-                boxWidth = Math.min(310, viewportWidth * 0.85);
-                boxHeight = 60;
-            } else if (viewportWidth >= 350) {
-                boxWidth = Math.min(275, viewportWidth * 0.85);
-                boxHeight = 70;
-            } else if (viewportWidth >= 300) {
-                boxWidth = Math.min(230, viewportWidth * 0.85);
-                boxHeight = 80;
-            } else if (viewportWidth >= 250) {
-                boxWidth = Math.min(180, viewportWidth * 0.85);
-                boxHeight = 100;
-            } else if (viewportWidth >= 200) {
-                boxWidth = Math.min(130, viewportWidth * 0.85);
-                boxHeight = 120;
-            } else {
-                boxWidth = Math.min(100, viewportWidth * 0.85);
-                boxHeight = 140;
-            }
-
-            const content = `
-                <div class="phoenix-ai-prompt-box">
-                    <div class="phoenix-ai-prompt-input-container">
-                        <textarea
-                            class="phoenix-ai-prompt-textarea"
-                            placeholder="${strings.aiPromptPlaceholder}"
-                        ></textarea>
-                    </div>
-                    <div class="phoenix-ai-bottom-controls">
-                        <select class="phoenix-ai-model-select">
-                            <option value="fast">Fast AI</option>
-                            <option value="moderate">Moderate AI</option>
-                            <option value="slow">Slow AI</option>
-                        </select>
-                        <button class="phoenix-ai-prompt-send-button" disabled>
-                            ${icons.paperPlane}
-                        </button>
-                    </div>
-                </div>
-            `;
-
-            shadow.innerHTML = `
-                <style>
-                    ${cssStyles.aiPromptBox}
-                    :host {
-                        --ai-box-width: ${boxWidth}px;
-                        --ai-box-height: ${boxHeight}px;
-                    }
-                </style>
-                ${content}
-            `;
-            this._shadow = shadow;
-        },
-
-        create: function() {
-            this._style();
-            window.document.body.appendChild(this.body);
-
-            // Get the actual rendered dimensions of the box and position it
-            const boxElement = this._shadow.querySelector('.phoenix-ai-prompt-box');
-            if (boxElement) {
-                const boxRect = boxElement.getBoundingClientRect();
-                const pos = this._getBoxPosition(boxRect.width, boxRect.height);
-
-                boxElement.style.left = pos.leftPos + 'px';
-                boxElement.style.top = pos.topPos + 'px';
-            }
-
-            // Focus on the textarea
-            const textarea = this._shadow.querySelector('.phoenix-ai-prompt-textarea');
-            if (textarea) { // small timer to make sure that the text area element is fetched
-                setTimeout(() => textarea.focus(), 50);
-            }
-
-            this._attachEventHandlers();
-
-            // Prevent clicks inside the AI box from bubbling up and closing it
-            this.body.addEventListener('click', (event) => {
-                event.stopPropagation();
-            });
-        },
-
-        _attachEventHandlers: function() {
-            const textarea = this._shadow.querySelector('.phoenix-ai-prompt-textarea');
-            const sendButton = this._shadow.querySelector('.phoenix-ai-prompt-send-button');
-            const modelSelect = this._shadow.querySelector('.phoenix-ai-model-select');
-
-            // Handle textarea input to enable/disable send button
-            if (textarea && sendButton) {
-                textarea.addEventListener('input', (event) => {
-                    const hasText = event.target.value.trim().length > 0;
-                    sendButton.disabled = !hasText;
-                });
-
-                // enter key
-                textarea.addEventListener('keydown', (event) => {
-                    if (event.key === 'Enter' && !event.shiftKey) {
-                        event.preventDefault();
-                        if (textarea.value.trim()) {
-                            this._handleSend(event, textarea.value.trim());
-                        }
-                    } else if (event.key === 'Escape') {
-                        event.preventDefault();
-                        this.remove();
-                    }
-                });
-            }
-
-            // send button click
-            if (sendButton) {
-                sendButton.addEventListener('click', (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (textarea && textarea.value.trim()) {
-                        this._handleSend(event, textarea.value.trim());
-                    }
-                });
-            }
-
-            // model selection change
-            if (modelSelect) {
-                modelSelect.addEventListener('change', (event) => {
-                    this.selectedModel = event.target.value;
-                });
-            }
-        },
-
-        _handleSend: function(event, prompt) {
-            const element = this.element;
-            if(!LivePreviewView.isElementEditable(element)) {
-                return;
-            }
-            const tagId = element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
-
-            window._Brackets_MessageBroker.send({
-                livePreviewEditEnabled: true,
-                event: event,
-                element: element,
-                prompt: prompt,
-                tagId: Number(tagId),
-                selectedModel: this.selectedModel,
-                AISend: true
-            });
-            this.remove();
-        },
-
-        remove: function() {
-            if (this._handleKeydown) {
-                document.removeEventListener('keydown', this._handleKeydown);
-                this._handleKeydown = null;
-            }
-
-            if (this._handleResize) {
-                window.removeEventListener('resize', this._handleResize);
-                this._handleResize = null;
-            }
-
-            if (this.body && this.body.parentNode && this.body.parentNode === window.document.body) {
-                window.document.body.removeChild(this.body);
-                this.body = null;
-                _aiPromptBox = null;
-            }
-        }
-    };
-
     /**
      * hot corner class,
      * to switch to preview mode and back
@@ -1793,7 +1568,6 @@ function RemoteFunctions(config = {}) {
     function selectElement(element) {
         dismissNodeMoreOptionsBox();
         dismissMoreOptionsDropdown();
-        dismissAIPromptBox();
         dismissNodeInfoBox();
         dismissToastMessage();
         cleanupPreviousElementState();
@@ -2068,12 +1842,6 @@ function RemoteFunctions(config = {}) {
             _nodeInfoBox.remove();
             _nodeInfoBox = new NodeInfoBox(element);
         }
-
-        if (_aiPromptBox) {
-            const element = _aiPromptBox.element;
-            _aiPromptBox.remove();
-            _aiPromptBox = new AIPromptBox(element);
-        }
     }
 
     // redraw active highlights
@@ -2158,49 +1926,16 @@ function RemoteFunctions(config = {}) {
         }
     }
 
-    // this function is responsible to reposition the AI box
-    // so we need to reposition it when for ex: a fixed positioned element is selected in the live preview
-    // now when live preview is scrolled the element remains at a fixed position but the AI box will drift away
-    // so we reposition it when its a fixed element
-    function _repositionAIBox() {
-        if (!_aiPromptBox || !_aiPromptBox.element || !_aiPromptBox._shadow) { return; }
-
-        const aiBox = _aiPromptBox._shadow.querySelector('.phoenix-ai-prompt-box');
-        if (!aiBox) { return; }
-
-        const aiBoxBounds = aiBox.getBoundingClientRect();
-        const elementBounds = _aiPromptBox.element.getBoundingClientRect();
-
-        // this is to store the prev value, so that we can compare it the second time
-        if(!_aiPromptBox._possDifference) {
-            _aiPromptBox._possDifference = aiBoxBounds.top - elementBounds.top;
-        } else {
-            const calcNewDifference = aiBoxBounds.top - elementBounds.top;
-            const prevDifference = _aiPromptBox._possDifference;
-
-            // 4 is just for pixelated differences
-            if (Math.abs(calcNewDifference - prevDifference) > 4) {
-                const boxPositions = _aiPromptBox._getBoxPosition(aiBoxBounds.width, aiBoxBounds.height);
-
-                aiBox.style.left = boxPositions.leftPos + 'px';
-                aiBox.style.top = boxPositions.topPos + 'px';
-                _aiPromptBox._possDifference = calcNewDifference;
-            }
-        }
-    }
-
     function _scrollHandler(e) {
         // Document scrolls can be updated immediately. Any other scrolls
         // need to be updated on a timer to ensure the layout is correct.
         if (e.target === window.document) {
             _dismissBoxesForFixedElements();
-            _repositionAIBox(); // and reposition the AI box
         } else {
             if (_localHighlight) {
                 window.setTimeout(redrawHighlights, 0);
             }
             _dismissBoxesForFixedElements();
-            _repositionAIBox();
         }
     }
 
@@ -2574,23 +2309,12 @@ function RemoteFunctions(config = {}) {
         }
     }
 
-    /**
-     * Helper function to dismiss AIPromptBox if it exists
-     */
-    function dismissAIPromptBox() {
-        if (_aiPromptBox) {
-            _aiPromptBox.remove();
-            _aiPromptBox = null;
-        }
-    }
-
     /**
      * Helper function to dismiss all UI boxes at once
      */
     function dismissAllUIBoxes() {
         dismissNodeMoreOptionsBox();
         dismissMoreOptionsDropdown();
-        dismissAIPromptBox();
         dismissNodeInfoBox();
         dismissToastMessage();
         getAllNodeMoreOptionsHandlers().forEach(handler => (handler.dismiss && handler.dismiss()));