update

ts_web/elements/sio-conversation-view.ts

@@ -305,6 +305,10 @@ export class SioConversationView extends DeesElement {
       }
 
       /* File drop zone */
+      .messages-container {
+        position: relative;
+      }
+      
       .drop-overlay {
         position: absolute;
         inset: 0;
@@ -497,19 +501,22 @@ export class SioConversationView extends DeesElement {
         </div>
       </div>
 
-      <div class="drop-overlay ${this.isDragging ? 'active' : ''}">
-        <div class="drop-zone">
-          <sio-icon class="drop-icon" icon="upload-cloud"></sio-icon>
-          <div class="drop-text">Drop files here</div>
-          <div class="drop-hint">Images and documents up to 10MB</div>
-        </div>
-      </div>
-
       <div class="messages-container" id="messages"
         @dragover=${this.handleDragOver}
         @dragleave=${this.handleDragLeave}
         @drop=${this.handleDrop}
+        @dragenter=${this.handleDragOver}
       >
+        <div class="drop-overlay ${this.isDragging ? 'active' : ''}" 
+          @drop=${this.handleDrop}
+          @dragover=${(e: DragEvent) => e.preventDefault()}
+        >
+          <div class="drop-zone">
+            <sio-icon class="drop-icon" icon="upload-cloud"></sio-icon>
+            <div class="drop-text">Drop files here</div>
+            <div class="drop-hint">Images and documents up to 10MB</div>
+          </div>
+        </div>
         ${this.conversation.messages.map((msg, index) => html`
           <div class="message ${msg.sender}" style="animation-delay: ${index * 50}ms">
             <div class="message-content">
@@ -586,7 +593,11 @@ export class SioConversationView extends DeesElement {
               accept="image/*,.pdf,.doc,.docx,.txt"
               @change=${this.handleFileSelect}
             />
-            <sio-button type="ghost" size="sm" @click=${this.openFileSelector}>
+            <sio-button type="ghost" size="sm" @click=${(e: Event) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.openFileSelector();
+            }}>
               <sio-icon icon="paperclip" size="16"></sio-icon>
             </sio-button>
             <sio-button
@@ -681,14 +692,11 @@ export class SioConversationView extends DeesElement {
     e.preventDefault();
     e.stopPropagation();
     
-    // Check if we're leaving the container entirely
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    if (
-      e.clientX <= rect.left ||
-      e.clientX >= rect.right ||
-      e.clientY <= rect.top ||
-      e.clientY >= rect.bottom
-    ) {
+    // Check if we're actually leaving the messages container
+    const relatedTarget = e.relatedTarget as Node;
+    const container = e.currentTarget as HTMLElement;
+    
+    if (!container.contains(relatedTarget)) {
       this.isDragging = false;
     }
   }
@@ -699,12 +707,16 @@ export class SioConversationView extends DeesElement {
     this.isDragging = false;
 
     const files = Array.from(e.dataTransfer?.files || []);
-    this.processFiles(files);
+    if (files.length > 0) {
+      this.processFiles(files);
+    }
   }
 
   private openFileSelector() {
     const fileInput = this.shadowRoot?.querySelector('#fileInput') as HTMLInputElement;
-    fileInput?.click();
+    if (fileInput) {
+      fileInput.click();
+    }
   }
 
   private handleFileSelect(e: Event) {