Disable pointer drag of AiChatPanel in all projects (#11667) #11668
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughMultiple AppAiChatPanel components across projects are refactored to add container styling via a new Classes parameter and prevent pointer event propagation. Simultaneously, SCSS theming variables are significantly expanded with color variants (dark/light, hover/active states) and environment layout tokens across foreground, background, and border color families. Changes
Sequence DiagramsequenceDiagram
actor User
participant Panel as BitProPanel
participant Body as Chat Body (BitStack)
participant Outer as Outer Context
User->>User: Click/Drag on chat body
User->>Body: onpointerdown event
Body->>Body: event.stopPropagation()
Body-->>Outer: ✗ Event propagation blocked
Panel->>Panel: Panel remains open (no drag/close)
Note over User,Body: Disabled Drag Feature: Pointer events<br/>no longer bubble to trigger panel dismiss
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor (1)
17-22: Prefer Blazor event modifiers over inlineonpointerdownJSBinding
Classes="@(new() { Container = "panel-cnt" })"to match the.panel-cntstyling looks good. For the body stack, instead of inline JS:<BitStack Class="body" onpointerdown="event.stopPropagation()">it’s more idiomatic (and CSP-friendly) in Blazor to use an event modifier:
- <BitStack Class="body" onpointerdown="event.stopPropagation()"> + <BitStack Class="body" @onpointerdown:stopPropagation="true">This keeps the same behavior (preventing pointer drag via bubbling) without inline script.
Also applies to: 42-42
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppAiChatPanel.razor (1)
41-43: Use event modifier instead of inlineonpointerdownJSThe pointer-drag prevention on the body stack is good, but inline JS is avoidable. You can switch to Blazor’s event modifier:
- <Body> - <BitStack Class="body" onpointerdown="event.stopPropagation()"> + <Body> + <BitStack Class="body" @onpointerdown:stopPropagation="true">Same effect, cleaner and more CSP-friendly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (8)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppAiChatPanel.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppAiChatPanel.razor.scss(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/abstracts/_bit-css-variables.scss(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppAiChatPanel.razor(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_bit-css-variables.scss(1 hunks)src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor(2 hunks)src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor.scss(1 hunks)src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/abstracts/_bit-css-variables.scss(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build and test
🔇 Additional comments (14)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppAiChatPanel.razor.scss (1)
28-32:.panel-cntenv-based sizing looks goodThe new
.panel-cntrule cleanly ties the panel container to the environment inset/available-height tokens and matches how the component bindsClasses.Container = "panel-cnt". No issues from here.src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor.scss (1)
28-32: Consistent.panel-cntstyling across projectsThis
.panel-cntblock mirrors the Demo variant and correctly uses the env inset/available-height tokens for the panel container. Looks consistent and safe.src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_bit-css-variables.scss (1)
218-220: New callout shadow token is consistent
$bit-box-shadow-callout2aligns with the existing callout shadow naming and pattern. Just ensure the underlying--bit-shd-cal2custom property is defined in the theme for all target skins.src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor (1)
7-15: Confirm whetherDraggableon the floating open button should be removedGiven the PR goal is to disable pointer drag for the AiChatPanel, please double-check whether keeping
Draggableon the floatingBitButtonis intentional. If this is the behavior you want to disable, you can simply drop the flag:- <BitButton Float - Draggable + <BitButton Float FloatOffset="1rem"src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppAiChatPanel.razor (1)
7-15: Re‑evaluateDraggableon the floating AiChat buttonSimilar to the Platform and Demo variants, this floating
BitButtonis still markedDraggable. If the intent is to completely disable pointer drag for the AiChat entry point, you may want to remove it:- <BitButton Float - Draggable + <BitButton Float FloatOffset="2rem"If drag is only meant to be disabled for the panel body (not the launcher), keeping it is fine—but worth confirming.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppAiChatPanel.razor (1)
7-15: Check ifDraggableon the floating button aligns with the PR goalHere too, the floating chat launcher is marked
Draggable. If “disable pointer drag” should also apply to this launcher, you can drop the flag:- <BitButton Float - Draggable + <BitButton Float FloatOffset="1rem"Otherwise, if the goal is only to prevent dragging the open panel, leaving it is fine—just worth validating.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/abstracts/_bit-css-variables.scss (3)
102-107: Consistent color theming expansion across foreground, background, and border tokens.The addition of dark/light variants with hover/active states provides comprehensive theming coverage. The naming convention is consistent with existing patterns.
Also applies to: 111-116, 120-125, 132-137, 141-146, 150-155, 163-168, 172-177, 181-186
110-110: Correct fix: foreground-secondary-active now maps to correct CSS custom property.The correction from
--bit-clr-fg-sec-hoverto--bit-clr-fg-sec-activealigns the variable with its intended semantic purpose.
379-396: Verify abbreviated CSS custom property names match the theme/JS that sets them.SCSS references use abbreviated env vars (e.g. --bit-env-width-per, --bit-env-width-avl, --bit-env-width-vw, --bit-env-height-per/avl, etc.) while the repo contains JS that sets --bit-env-win-width / --bit-env-win-height (src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts). Confirm the abbreviated names in the SCSS exactly match the CSS custom-property keys emitted by your theme or JS (or update the theme/JS to set the abbreviated keys).
Locations: src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/abstracts/_bit-css-variables.scss and src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts.src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/abstracts/_bit-css-variables.scss (5)
102-107: Consistent color theming expansion across foreground, background, and border tokens.The addition of dark/light variants with hover/active states provides comprehensive theming coverage. The naming convention is consistent with existing patterns.
Also applies to: 111-116, 120-125, 132-137, 141-146, 150-155, 163-168, 172-177, 181-186
110-110: Correct fix: foreground-secondary-active now maps to correct CSS custom property.The correction from
--bit-clr-fg-sec-hoverto--bit-clr-fg-sec-activealigns the variable with its intended semantic purpose.
220-220: New shadow variable added.
$bit-box-shadow-callout2is appropriately added alongside the existing callout shadow. Verify this CSS custom property is defined in the theme system.
248-396: Comprehensive typography and environment token coverage added to Platform file.These variables (typography h1–overline, spacing, z-index, shape, and environment tokens) are included in this file but are absent from the BlazorUI Demo file (
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/abstracts/_bit-css-variables.scss). Clarify whether this is intentional (Platform-specific scope) or if both files should maintain parity.
379-396: Verified abbreviated CSS custom property names match repository definitions.
- Definitions: src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-general.scss — defines --bit-env-width-per, --bit-env-height-per, --bit-env-width-avl, --bit-env-height-avl (and related inset vars).
- Window size set in script: src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts — sets --bit-env-win-width and --bit-env-win-height.
- SCSS mappings and usages: src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss and src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/abstracts/_bit-css-variables.scss (also present in Templates/Boilerplate and Demo copies) reference var(--bit-env-*) exactly.
...te/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppAiChatPanel.razor
Show resolved
Hide resolved
1 participant
closes #11667
Summary by CodeRabbit
New Features
Refactor