fix(amazonq): render drag&drop overlay and fix the issue that images … (#5905)

* fix(amazonq): render drag&drop overlay and fix the issue that images added to pinned context from drag&drop

* fix(amazonq): add changelog

* fix(amazonq): comments

---------

Co-authored-by: manodnyab <[email protected]>
Co-authored-by: Sam Stewart <[email protected]>

Author: 3 people

.changes/next-release/bugfix-bf74f9c0-2d61-420d-854d-a5b0daa5861a.json

@@ -0,0 +1,4 @@
+{
+  "type" : "bugfix",
+  "description" : "Fix the issue that sometime images added via drag & drop are incorrectly routed to pinned context"
+}

plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/toolwindow/AmazonQPanel.kt

@@ -49,7 +49,9 @@ import software.aws.toolkits.jetbrains.services.codemodernizer.utils.isCodeTrans
 import software.aws.toolkits.resources.message
 import java.awt.datatransfer.DataFlavor
 import java.awt.dnd.DropTarget
+import java.awt.dnd.DropTargetDragEvent
 import java.awt.dnd.DropTargetDropEvent
+import java.awt.dnd.DropTargetEvent
 import java.io.File
 import java.util.concurrent.CompletableFuture
 import javax.imageio.ImageIO.read
@@ -138,6 +140,15 @@ class AmazonQPanel(val project: Project, private val scope: CoroutineScope) : Di
                             // As an alternative, enabling the native drag in JCEF,
                             // and let the native handling the drop event, and update the UI through JS bridge.
                             val dropTarget = object : DropTarget() {
+                                override fun dragEnter(dtde: DropTargetDragEvent) {
+                                    setDragAndDropOverlayVisible(browserInstance, true)
+                                }
+                                override fun dragOver(dtde: DropTargetDragEvent) {
+                                    setDragAndDropOverlayVisible(browserInstance, true)
+                                }
+                                override fun dragExit(dte: DropTargetEvent) {
+                                    setDragAndDropOverlayVisible(browserInstance, false)
+                                }
                                 override fun drop(dtde: DropTargetDropEvent) {
                                     try {
                                         dtde.acceptDrop(dtde.dropAction)
@@ -166,20 +177,16 @@ class AmazonQPanel(val project: Project, private val scope: CoroutineScope) : Di
                                                 validImages.subList(20, validImages.size).clear()
                                             }
 
+                                            executeJavaScript(browserInstance, "window.resetTopBarClicked()")
+
+                                            setDragAndDropOverlayVisible(browserInstance, false)
+
                                             val json = OBJECT_MAPPER.writeValueAsString(validImages)
-                                            browserInstance.jcefBrowser.cefBrowser.executeJavaScript(
-                                                "window.handleNativeDrop('$json')",
-                                                browserInstance.jcefBrowser.cefBrowser.url,
-                                                0
-                                            )
+                                            executeJavaScript(browserInstance, "window.handleNativeDrop('$json')")
 
                                             if (errorMessages.isNotEmpty()) {
                                                 val errorJson = OBJECT_MAPPER.writeValueAsString(errorMessages)
-                                                browserInstance.jcefBrowser.cefBrowser.executeJavaScript(
-                                                    "window.handleNativeNotify('$errorJson')",
-                                                    browserInstance.jcefBrowser.cefBrowser.url,
-                                                    0
-                                                )
+                                                executeJavaScript(browserInstance, "window.handleNativeNotify('$errorJson')")
                                             }
 
                                             dtde.dropComplete(true)
@@ -286,6 +293,22 @@ class AmazonQPanel(val project: Project, private val scope: CoroutineScope) : Di
         }
     }
 
+    private fun executeJavaScript(browserInstance: Browser, jsCommand: String) {
+        try {
+            browserInstance.jcefBrowser.cefBrowser.executeJavaScript(
+                jsCommand,
+                browserInstance.jcefBrowser.cefBrowser.url,
+                0
+            )
+        } catch (e: Exception) {
+            LOG.error { "Failed to execute JavaScript: $jsCommand - ${e.message}" }
+        }
+    }
+
+    private fun setDragAndDropOverlayVisible(browserInstance: Browser, visible: Boolean) {
+        executeJavaScript(browserInstance, "window.setDragAndDropVisible('$visible')")
+    }
+
     private fun validateImageFile(file: File, allowedTypes: Set<String>, maxFileSize: Double, maxDimension: Int): String? {
         val fileName = file.name
         val ext = fileName.substringAfterLast('.', "").lowercase()

plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/Browser.kt

@@ -189,6 +189,15 @@ class Browser(parent: Disposable, private val webUri: URI, val project: Project)
                             },
                         })
                     };
+                    
+                    window.setDragAndDropVisible = function(visibility) {
+                        const parsedVisibility = JSON.parse(visibility);
+                        qChat.setDragOverlayVisible(qChat.getSelectedTabId(), parsedVisibility)
+                    };
+                    
+                    window.resetTopBarClicked = function() {
+                        qChat.resetTopBarClicked(qChat.getSelectedTabId())
+                    };
                 }
             </script>        
         """.trimIndent()