fix(webui): keep wheel scrolling inside history dialog

[1zzxy1]

Summary

• make the conversation history preview container focusable inside the dialog
• stop wheel events from bubbling out of the history scroll area
• contain vertical overscroll so wheel scrolling stays inside the preview

Fixes #6941

Testing

• git diff --check
• frontend build/lint not run locally in this environment (dashboard dependencies/pnpm unavailable)

Summary by Sourcery

Keep mouse wheel scrolling contained within the conversation history preview dialog.

Enhancements:

• Make the conversation history preview container focusable within the dialog.
• Stop wheel events from propagating beyond the conversation history scroll area.
• Contain vertical overscroll so scrolling does not escape the conversation history preview.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience by addressing an issue where scrolling within the conversation history dialog would inadvertently affect the underlying page. By containing scroll events and making the dialog's content area focusable, the changes ensure a smoother and more intuitive interaction when reviewing past conversations.

Highlights

• Scrolling Behavior: Implemented changes to ensure that wheel scrolling remains contained within the conversation history dialog, preventing unintended scrolling of the main page.
• Event Handling: Stopped wheel events from bubbling out of the conversation history scroll area to improve user interaction.
• Focusability: Made the conversation history preview container focusable to better manage event handling within the dialog.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• Now that the messages container is focusable with tabindex="0", consider whether it needs an explicit role/aria-label or visible focus styles so keyboard users understand what it is and why focus moved there.
• Stopping @wheel on the container will prevent bubbling, but if there are other scroll interactions (e.g., touch/trackpads translating to different events), it might be worth confirming that the same containment behavior is applied consistently across input types.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Now that the messages container is focusable with `tabindex="0"`, consider whether it needs an explicit role/aria-label or visible focus styles so keyboard users understand what it is and why focus moved there.
- Stopping `@wheel` on the container will prevent bubbling, but if there are other scroll interactions (e.g., touch/trackpads translating to different events), it might be worth confirming that the same containment behavior is applied consistently across input types.

## Individual Comments

### Comment 1
<location path="dashboard/src/views/ConversationPage.vue" line_range="200-206" />
<code_context>
+                        v-else
+                        class="conversation-messages-container"
+                        style="background-color: var(--v-theme-surface);"
+                        tabindex="0"
+                        @wheel.stop>
                         <!-- 空对话提示 -->
</code_context>
<issue_to_address>
**suggestion:** Assess whether this container truly needs to be in the tab order for accessibility.

`tabindex="0"` makes this container focusable and adds an extra tab stop. If it’s only acting as a scroll container, this may be unnecessary and confusing for keyboard users. If you do need it focusable (e.g., for keyboard scrolling), consider giving it an appropriate landmark/region role and `aria-label` so assistive technologies can identify it, otherwise remove the `tabindex`.

```suggestion
                    <!-- 预览模式 - 聊天界面 -->
                    <div
                        v-else
                        class="conversation-messages-container"
                        style="background-color: var(--v-theme-surface);"
                        @wheel.stop>
```
</issue_to_address>

---

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.}

[gemini-code-assist]

Code Review

This pull request modifies the ConversationPage.vue component to improve user interaction and styling. It adds tabindex="0" and @wheel.stop to the conversation messages container, likely to enhance keyboard navigation and prevent unwanted scroll propagation. Additionally, it introduces overscroll-behavior-y: contain; to the CSS for the conversation messages container, which helps manage scroll behavior. A review comment suggests refactoring the inline background-color style into the component's CSS for better separation of concerns and maintainability.

[gemini-code-assist]

For better separation of concerns and maintainability, it's best to avoid inline styles. This style can be moved to the .conversation-messages-container CSS class.

Please remove this line and update the background-color in the .conversation-messages-container class (around line 1113) to use the Vuetify theme variable:

.conversation-messages-container {
    /* ... other styles ... */
    background-color: var(--v-theme-surface);
}

This will make the styling more consistent and also renders the separate dark mode override for this class unnecessary.

[Soulter]

Did you actually test your changes, or did you just open a PR using vibe coding without verifying it?
This fix doesn’t work. Please test before submitting PRs — it wastes everyone’s time otherwise.

[Soulter]

does not work.

[1zzxy1]

sry我第一次整pr, 这一次的经实例测试 , 能用滚轮正常上下滚动对话了