feat: expand webchat drag-and-drop upload to the whole chat area

[wcqqq1214]

Motivation / 动机

Drag-and-drop file/image upload in the webchat/ChatUI currently only works when dropping onto the small input composer bar. The hot zone is too small, so dragging onto the message area gives no response and the feature is easy to miss. This PR expands the drop zone to the whole right-side chat area (message list + composer). Fixes #9561.

Modifications / 改动点

• Added useDragUpload composable (dashboard/src/composables/useDragUpload.ts) encapsulating the drag state, overlay visibility, and drop handling.

• ChatInput.vue: removed its own drag handlers/overlay so a single drop is not uploaded twice via event bubbling.

• Chat.vue: wired dragEvents and a full-area drop overlay onto .conversation-stack.

• StandaloneChat.vue: same handling on the root container.

• This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

Before / 改动前

Dragging a file onto the message area currently shows no overlay and does not upload — the hot zone is limited to the bottom input bar.

Dropping onto the message area does nothing.

The hot zone is only the input bar.

After / 改动后

Dropping anywhere in the right-side chat area shows the full-area upload overlay and triggers the same upload flow.

Full-area upload overlay on drop.

Image upload verified — the model reads the uploaded image correctly.

Verification Steps / 验证步骤

• Drag a file/image onto the message-list blank area → full-area overlay appears and the file is uploaded.
• Drag onto the input bar → still works, no duplicate upload.
• Drag selected text → no overlay, normal text drag unaffected.
• vue-tsc --noEmit and vite build pass.

---

Checklist / 检查清单

• 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  / 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。
• 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  / 我的更改经过了良好的测试，并已在上方提供了"验证步骤"和"运行截图"。
• 🤓 No new dependencies introduced.
  / 我确保没有引入新依赖库。
• 😮 My changes do not introduce malicious code.
  / 我的更改没有引入恶意代码。

Summary by Sourcery

Expand drag-and-drop file upload to cover the entire chat area in both embedded and standalone chat views using a shared composable.

New Features:

• Enable full-area drag-and-drop upload across the chat conversation area instead of only the input bar.

Enhancements:

• Introduce a reusable useDragUpload composable to centralize drag state and file drop handling for chat components.
• Unify and relocate the upload overlay UI from the input bar to the main chat containers in Chat and StandaloneChat.

Summary by Sourcery

Expand drag-and-drop upload to cover the entire chat area in embedded and standalone webchat views using a shared composable.

New Features:

• Allow files and images to be uploaded via drag-and-drop across the full chat conversation area, not just the input bar.

Enhancements:

• Introduce a reusable useDragUpload composable to centralize drag state and drop handling for chat containers.
• Move the upload overlay UI from the input bar to full-area overlays in Chat and StandaloneChat for clearer visual feedback.

[sourcery-ai]

Hey - I've left some high level feedback:

• The drag-upload CSS for .chat-drop-overlay, .chat-drop-overlay-content, .chat-drop-text, and .drop-fade-* is duplicated in both Chat.vue and StandaloneChat.vue; consider extracting this into a shared style (or a global utility class) to avoid divergence and simplify future changes.
• In Chat.vue the dragEvents from useDragUpload are still attached even when isProviderWorkspace is true, and the onDrop handler just returns early; if drag-and-drop is meant to behave normally in provider workspace, consider disabling the composable or skipping preventDefault in that mode to avoid intercepting drags that won’t lead to an upload.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The drag-upload CSS for `.chat-drop-overlay`, `.chat-drop-overlay-content`, `.chat-drop-text`, and `.drop-fade-*` is duplicated in both `Chat.vue` and `StandaloneChat.vue`; consider extracting this into a shared style (or a global utility class) to avoid divergence and simplify future changes.
- In `Chat.vue` the `dragEvents` from `useDragUpload` are still attached even when `isProviderWorkspace` is true, and the onDrop handler just returns early; if drag-and-drop is meant to behave normally in provider workspace, consider disabling the composable or skipping `preventDefault` in that mode to avoid intercepting drags that won’t lead to an upload.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}