fix(chat-messages): improve chat container layout and examples

[Killusions]

• add max-inline-size constraint to message bubble and wrapper to prevent
  overflow
• fix attachment preview backdrop click behavior
• use index-based tracking for message list and
  add scroll-to-bottom on message send
• update example action labels for clarity

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• charts-ng
• dashboards-ng
• element-ng
• element-translate-ng
• maps-ng
• native-charts-ng

[gemini-code-assist]

Code Review

This pull request renames chat actions from 'Copy' to 'Export' and 'Good response' to 'Add to list,' updates message bubble styling with max-inline-size, and adds automatic scrolling logic. Feedback suggests merging redundant CSS selectors and reverting the @for loop tracking to use the message object instead of $index to prevent re-rendering issues. Furthermore, log messages should be updated for terminology consistency, and a redundant setTimeout for scrolling should be removed.

[gemini-code-assist]

The .message-wrapper selector is defined again on line 93. To maintain a clean and organized stylesheet, it is recommended to merge these definitions. You can move the max-inline-size: 100% property to the block starting at line 93 and remove this redundant block.

[gemini-code-assist]

Using $index for tracking in @for is generally discouraged when items can be removed from the list (as seen with the 'Delete message' action on line 187 of the component). Tracking by the message object itself is more efficient in this case, as it prevents unnecessary re-renders of subsequent items when a message is deleted from the middle of the conversation.

Suggested change

	@for (message of messages(); track $index) {
	@for (message of messages(); track message) {

[gemini-code-assist]

The action label was updated to 'Export message', but the log message still refers to 'Copy'. It is recommended to update the log message to maintain consistency with the UI labels, following the Siemens UX writing guidelines for consistent terminology.

Suggested change

	this.logEvent(`Copy user message ${message.content.slice(0, 20)}...`)
	this.logEvent('Export user message ' + message.content.slice(0, 20) + '...')

References

1. Use the same words and grammatical forms, lengths, and styles repeatedly to ensure consistency across the UI. ^(link)

[gemini-code-assist]

The action label was updated to 'Export message', but the log message still refers to 'Copy'.

Suggested change

	this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
	this.logEvent('Export user message ' + _message.content.slice(0, 20) + '...')

References

1. Use the same words and grammatical forms, lengths, and styles repeatedly to ensure consistency across the UI. ^(link)

[gemini-code-assist]

The action label was updated to 'Export message', but the log message still refers to 'Copy'.

Suggested change

	this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
	this.logEvent('Export user message ' + _message.content.slice(0, 20) + '...')

References

1. Use the same words and grammatical forms, lengths, and styles repeatedly to ensure consistency across the UI. ^(link)

[gemini-code-assist]

The setTimeout is redundant here. SiChatContainerComponent already implements a MutationObserver that automatically scrolls to the bottom when content changes, provided that isUserAtBottom is true. Calling this.chatContainer()?.scrollToBottom() synchronously is sufficient to set the internal state and ensure the container scrolls once the new message is rendered in the DOM.

    this.chatContainer()?.scrollToBottom();

References

1. Avoid using asynchronous schedulers or setTimeout if the state being checked is updated synchronously by the same event.