Feature: drag and drop file support

channels/webui/assets/css/chat/upload.css

@@ -124,6 +124,36 @@
     padding: 10px;
 }
 
+/* Drop overlay */
+.drop-overlay {
+    position: absolute;
+    inset: 0;
+    background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
+    border: 2px dashed var(--accent);
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+    pointer-events: none;
+
+    .drop-overlay-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        color: var(--accent);
+        font-size: 1.1rem;
+        font-weight: 500;
+
+        svg {
+            width: 48px;
+            height: 48px;
+            opacity: 0.8;
+        }
+    }
+}
+
 /* Image preview modal */
 .image-modal {
     position: fixed;

channels/webui/assets/css/chat/window.css

@@ -5,6 +5,7 @@
     width: 100%;
     min-width: 40%;
     max-height: 100%;
+    position: relative;
 
     border: 1px solid var(--border-sidebar);
     #messages {

channels/webui/assets/js/stores/upload.js

@@ -1,5 +1,33 @@
 const UPLOAD_STORE = {
     files: [],
+    dragCount: 0,
+
+    get isDragging() {
+        return this.dragCount > 0;
+    },
+
+    dragEnter() {
+        this.dragCount++;
+    },
+
+    dragLeave(event, el) {
+        if (event.relatedTarget && el.contains(event.relatedTarget)) return;
+        this.dragCount = Math.max(0, this.dragCount - 1);
+    },
+
+    dragOver(event) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+    },
+
+    handleDrop(event) {
+        event.preventDefault();
+        const droppedFiles = event.dataTransfer.files;
+        if (droppedFiles && droppedFiles.length > 0) {
+            this.files.push(...droppedFiles);
+        }
+        this.dragCount = 0;
+    },
 
     addFile(event) {
         this.files.push(...event.target.files);

channels/webui/templates/chat/drop_overlay.html

@@ -0,0 +1,13 @@
+<div class="drop-overlay" x-show="$store.upload.isDragging" x-cloak
+    x-transition:enter="transition ease-out duration-200"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition ease-in duration-150"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+>
+    <div class="drop-overlay-content">
+        {% include 'svg/paperclip.svg' %}
+        <span>Drop files to upload</span>
+    </div>
+</div>

channels/webui/templates/chat/index.html

@@ -1,3 +1,6 @@
+<!-- drag and drop overlay -->
+{% include 'chat/drop_overlay.html' %}
+
 <!-- chat header -->
 {% if config.get('enable_chat_header') %}
     {% include 'chat/header.html' %}

channels/webui/templates/index.html

@@ -95,7 +95,12 @@
                     </section>
                 {% endif %}
 
-                <section id="chat-window">
+                <section id="chat-window"
+                    @dragenter.prevent="$store.upload.dragEnter()"
+                    @dragover.prevent="$store.upload.dragOver()"
+                    @dragleave="$store.upload.dragLeave($event, $el)"
+                    @drop.prevent="$store.upload.handleDrop($event)"
+                >
                     {% include 'chat/index.html' %}
                 </section>
             </section>