fix: add touch device detection for menu interaction - #9782
Open
mantoujun12 wants to merge 5 commits into
Open
Conversation
Removed the open-on-hover of the Chat UI part of the AstrBot Web UI, and fixed the issue that the mobile end could not open the secondary menu of Transport Mode and Language.
dosubot
Bot
added
size:XS
dosubot
Bot
added
size:S
Author
|
@sourcery-ai review |
mantoujun12
changed the title
5 tasks
dosubot
Bot
added
size:XS
Author
|
@sourcery-ai review |
This comment was marked as resolved.
This comment was marked as resolved.
Author
|
@sourcery-ai review |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="dashboard/src/components/chat/Chat.vue" line_range="823" />
<code_context>
: "sse",
);
+
+const isTouchDevice: boolean = window.matchMedia('(pointer: coarse)').matches;
+
const transportOptions: Array<{ value: TransportMode; labelKey: string }> = [
</code_context>
<issue_to_address>
**issue (bug_risk):** On hybrid touchscreen devices whose primary pointer is reported as `fine` (for example, a laptop with both a mouse and touchscreen), `matchMedia('(pointer: coarse)')` returns false even when the user taps the screen. Both menus therefore disable click opening and rely on hover, but a touch tap does not produce the required hover event, so the Transport Mode and Language menus remain inaccessible.
**Triggers:** When a touchscreen device also has a fine primary pointer, or the available primary input changes after the component is initialized.
**Suggested fix:** Detect any available coarse pointer (for example, with `(any-pointer: coarse)` or `navigator.maxTouchPoints`) and keep the result reactive if the media-query match changes.
</issue_to_address>Sourcery assessment
Approval pending. 1 finding to address first.
Blocking findings: dashboard/src/components/chat/Chat.vue:823
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="dashboard/src/components/chat/Chat.vue" line_range="823" />
<code_context>
: "sse",
);
+
+const isTouchDevice: boolean = window.matchMedia('(pointer: coarse)').matches;
+
const transportOptions: Array<{ value: TransportMode; labelKey: string }> = [
</code_context>
<issue_to_address>
**issue (bug_risk):** `isTouchDevice` is a one-time snapshot of `matchMedia(...).matches`, so the menu interaction mode never changes after setup when the available primary pointer changes; attaching or removing a mouse/trackpad leaves the menus in the stale click-only or hover-only mode until the component is recreated or the page reloads.
**Triggers:** When a hybrid device changes its active or primary pointer during an open page session.
**Suggested fix:** Store the media query result in a reactive ref and update it from the `MediaQueryList` change event, removing the listener on component unmount.
</issue_to_address>Sourcery assessment
Approval pending. 1 finding to address first.
Blocking findings: dashboard/src/components/chat/Chat.vue:823
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
dosubot
Bot
added
size:S
Author
|
@sourcery-ai review |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Modifications / 改动点
Fixes #9781
在
Chat.vue中添加了两处内容isTouchDevice变量，使用CSS媒体查询，来判断是鼠标 (fine) 还是 触控 (coarse)open-on-click添加了"!isTouchDevice"判断，为open-on-hover添加了"isTouchDevice"判断为什么要添加 isTouchDevice 变量
如果直接在原来的
<v-menu>上添加open-on-click事件而不添加判断，在桌面端 Chat UI，点击 “通信传输模式” 和“语言” 会出现交互冲突。具体情况是: 同时相应悬浮事件和点击事件。
使用 CSS 媒体查询判断操作设备有问题吗
正常情况下没有，因为
window.matchMedia是通过读取用户的主要指针设备。非特殊情况下，基本能正确识别是否是鼠标还是手指。
只有在极少数情况 (触摸笔、触控板等非常规指针输入设备) 可能会出现问题。
Screenshots or Test Results / 运行截图或测试结果
Before / 改动前
由于移动端触摸屏不会产生
hover事件，点击 ”通信传输模式” 和”语言“ 没有任何响应。After / 改动后
为 ”通信传输模式” 和”语言“ 添加了
open-on-click事件并添加判断。并通过
"isTouchDevice"变量判断用户指针输入设备是否为触控操作。如果是，在移动端点击会直接弹出二级菜单，并且无交互问题。
并且为桌面端使用的
open-on-hover也添加了判断条件，如果是鼠标则继续使用该方法，不会有冲突影响。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.
/ 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。
🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in
requirements.txtandpyproject.toml./ 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到
requirements.txt和pyproject.toml文件相应位置。😮 My changes do not introduce malicious code.
/ 我的更改没有引入恶意代码。
Summary by Sourcery
Improve Chat UI menu interaction across touch and desktop devices by enabling click-based expansion when touch input is detected.
Bug Fixes:
Enhancements:
Summary by Sourcery
Adapt Chat UI menu interaction to the user’s primary pointer type so transport mode and language options work consistently across touch and desktop devices.
Bug Fixes:
Enhancements: