MudXChat: Enhance docs and examples with CSS styling

[versile2]

Motivation

• Make the Chat avatar examples visually distinct by applying a custom class and a background color to the chat text for demonstration purposes.

Description

• Added Class="avatar-docs-show to the MudXChat instance in ChatAvatarExample.razor and updated the ChatDocPage to match.
• Added an inline <style> block that targets .avatar-docs-show .mudx-chat-text and sets a background color of #d4d7dc for the Text Variant to highlight the avatar example. (match the color of the avatar background.

Testing

• Ran the unit test suite in tests/MudX.UnitTests, including ChatTests, and all tests passed successfully

Closes #56
Closes #57

[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 MudXChat documentation and examples by introducing custom CSS styling to visually distinguish the chat avatar examples. The changes aim to better demonstrate how users can target and apply styles to individual chat bubbles or entire chat instances, improving the clarity and utility of the documentation.

Highlights

• Documentation Enhancement: Updated the ChatDocPage.razor to include a note about targeting CSS styles for chat bubbles, improving the explanation of MudXChat's styling capabilities.
• Example Styling: Applied a custom CSS class (avatar-docs-show) to the MudXChat instance in ChatAvatarExample.razor to enable specific styling for the avatar example.
• Visual Demonstration: Introduced an inline <style> block within ChatAvatarExample.razor to set a background color (#d4d7dc) for the chat text within the avatar-docs-show class, visually highlighting the avatar example.

Changelog

• src/MudX.Docs/Components/Docs/Chat/ChatDocPage.razor
  • Updated the description for the "With Avatar" section to mention the ease of targeting CSS styles for chat bubbles.
• src/MudX.Docs/Components/Docs/Chat/Examples/ChatAvatarExample.razor
  • Added a Class="avatar-docs-show" attribute to the MudXChat component.
  • Included an inline <style> block to apply a background color to .avatar-docs-show .mudx-chat-text.

Activity

• The author reported running unit tests in tests/MudX.UnitTests, specifically ChatTests, and all tests passed successfully.

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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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

[gemini-code-assist]

Code Review

This pull request enhances the documentation and examples for MudXChat by adding custom CSS styling to an example. My review focuses on improving the way this styling is applied by suggesting a move from an inline <style> block to Blazor's CSS isolation feature. This change would align the example with best practices for Blazor development, improving maintainability and demonstrating a more robust styling approach to users of the library.

[coveralls]

coverage: 92.92%. remained the same
when pulling 01aaa15 on versile2:fix/issue56-csstargeting
into 91e88f1 on MudXtra:dev.

[Copilot]

Pull request overview

Updates the MudXChat documentation examples to better demonstrate avatar usage and how to scope custom CSS to a specific chat instance.

Changes:

• Added a custom Class to the avatar chat example to scope styling.
• Added an inline <style> rule to override the default text-variant bubble background for that example.
• Expanded the “With Avatar” section description to mention CSS targeting/scoping.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/MudX.Docs/Components/Docs/Chat/Examples/ChatAvatarExample.razor	Adds a scoped class to the example and an inline CSS override for the chat text background.
src/MudX.Docs/Components/Docs/Chat/ChatDocPage.razor	Updates docs copy in the “With Avatar” section to mention CSS targeting.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The inline CSS uses a hard-coded hex background color. Since the docs site supports dark mode, this color will likely look incorrect (and may reduce contrast) when the theme switches. Prefer using an existing MudBlazor palette CSS variable (e.g., a neutral surface/hover token) so the example stays theme-aware while still demonstrating targeted styling.

Suggested change

	background-color: #d4d7dc;
	background-color: var(--mud-palette-surface-hover);

[Copilot]

The PR description mentions adding Class="avatar-docs-showr", but the actual class added here is avatar-docs-show. Please align the PR description (or the code) so reviewers/readers don’t get a misleading class name.

[Copilot]

This new description text has a couple of documentation issues: “css” should be capitalized as “CSS”, and the sentences read like informal notes rather than docs. Consider rephrasing to clearly explain that Class can be used to scope custom CSS to a single chat/bubble, and remove the extra trailing space at the end of the first sentence.

Suggested change

	MudXChat can include an avatar, which works seamlessly with the <CodeInline>MudAvatar</CodeInline> component. The avatar will always appear on the first <CodeInline>MudXChatBubble</CodeInline> inside a MudXChat.
	You can also see how easy it is to target a css style for a single bubble, all bubbles in a chat, etc.
	MudXChat can include an avatar, which works seamlessly with the <CodeInline>MudAvatar</CodeInline> component. The avatar will always appear on the first <CodeInline>MudXChatBubble</CodeInline> inside a <CodeInline>MudXChat</CodeInline>.
	Use the <CodeInline>Class</CodeInline> parameter on <CodeInline>MudXChat</CodeInline> or <CodeInline>MudXChatBubble</CodeInline> to scope custom CSS to a single bubble, all bubbles in a chat, or multiple chats.