style(chatbot): Update protected message link styles and add unit tests

[ccastrotrejo]

Commit Type

• feature - New functionality
• fix - Bug fix
• refactor - Code restructuring without behavior change
• perf - Performance improvement
• docs - Documentation update
• test - Test-related changes
• chore - Maintenance/tooling

Risk Level

• Low - Minor changes, limited scope
• Medium - Moderate changes, some user impact
• High - Major changes, significant user/system impact

What & Why

This PR improves the styling of the protected message link in the Copilot panel header and adds comprehensive unit tests for the CopilotPanelHeader component.

Style Changes:

• Replaced hardcoded green background color #387a25 with Fluent UI design token tokens.colorPaletteGreenBorderActive for better theme consistency
• Refactored selectors syntax from deprecated selectors: {} pattern to modern Griffel &:hover and &:focus pseudo-class syntax
• Added transparent outline color on focus for cleaner visual appearance
• Replaced ...shorthands.borderRadius() with direct borderRadius property assignment

Test Coverage:

• Added new unit test file panelheader.spec.tsx with comprehensive coverage for the CopilotPanelHeader component
• Tests cover rendering, close button functionality, protected link behavior, tooltip presence, and accessibility

Impact of Change

• Users: Improved visual consistency in protected message styling across light/dark themes
• Developers: Better test coverage for the panel header component; modernized Griffel styling patterns
• System: No architectural changes

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in: Light and dark themes

Contributors

Screenshots/Videos

Light theme

CleanShot.2026-01-20.at.15.47.39.mp4

Dark theme

CleanShot.2026-01-20.at.15.47.21.mp4

[github-actions]

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

• Current: style(chatbot): Update protected message link styles and add unit tests
• Issue: None — title is clear, follows conventional commit style, and accurately describes the changes.
• Recommendation: (Optional) If you want to be even more specific, you can include the component name (e.g., CopilotPanelHeader) but this is not required.

---

✅ Commit Type

• Properly selected (refactor).
• Note: The PR also adds unit tests — still fine under refactor because the primary change is refactoring styles. No change required.

---

✅ Risk Level

• The PR body marks Low and the PR has the risk:low label. These match and are appropriate given the scope (styling token swap + unit tests).

---

✅ What & Why

• Current: This section describes replacing a hardcoded green color with a Fluent token, modernizing Griffel selector syntax, adding a transparent focus outline, replacing shorthand borderRadius usage, and adding unit tests for CopilotPanelHeader.
• Issue: None — concise and clear.
• Recommendation: (Optional) You may add the reasoning for choosing tokens.colorPaletteGreenBorderActive (for example: consistent across themes / matches design tokens) but the current explanation is sufficient.

---

✅ Impact of Change

• Impact is clearly documented.
• Recommendation:
  • Users: Improved visual consistency across light/dark themes (already stated).
  • Developers: Better test coverage and modern Griffel patterns (already stated).
  • System: No architectural changes (already stated).

---

✅ Test Plan

• Unit tests added and present in the diff (libs/chatbot/src/lib/ui/__test__/panelheader.spec.tsx). I verified the test file has comprehensive coverage for rendering, accessibility, the protected link behavior, and the close button.
• Manual testing and light/dark theme verification are noted in the body.
• E2E tests are not present; that's acceptable here for a styling + unit testing change.

---

⚠️ Contributors

• The Contributors section is blank.
• Recommendation: Add any reviewers, PMs, designers, or others who contributed (even if only a short list). If there were none, consider adding a short note like "No additional contributors." This helps give proper credit and context.

---

✅ Screenshots/Videos

• Light and dark theme screenshots are present — good for visual verification.

---

Summary Table

Section	Status	Recommendation
Title	✅	Title is clear; optionally include component name
Commit Type	✅	refactor is appropriate
Risk Level	✅	Low matches label and code changes
What & Why	✅	Clear and concise; optional expansion of token rationale
Impact of Change	✅	Well documented
Test Plan	✅	Unit tests added and verified in diff
Contributors	⚠️	Add contributors or a short "none" note
Screenshots/Videos	✅	Provided for both themes

---

Final Message
All required PR sections are present and correct. The changes are small and focused (styling + unit tests) — the assigned risk Low is appropriate and I agree with it. The only minor suggestion is to populate the Contributors section (or explicitly say there are none). No other changes are required to the PR body or title.

Please update Contributors if applicable, then this PR is good to merge. Thank you for the clear PR and for adding tests!

---

Last updated: Tue, 20 Jan 2026 21:31:02 GMT

[Copilot]

Pull request overview

This PR updates the styling for the protected message link in the chatbot UI, including color token standardization and selector syntax updates.

Changes:

• Replaced hardcoded green background color with a Fluent UI token (colorPaletteGreenBorderActive)
• Updated CSS selector syntax from selectors object to & prefix notation
• Added outlineColor: transparent to the focus state for improved accessibility

[github-actions]

📊 Coverage check completed. See workflow run for details.

[github-actions]

📊 Coverage check completed. See workflow run for details.