chore(client): data-testid for message containers

[mondo192]

Summary

Add data-testid="assistant-message" and data-testid="user-message" attributes to message containers for stable E2E testing in downstream repositories.

Using CSS selectors like .agent-turn is fragile as they can break if class names are refactored. Test IDs provide an explicit contract for testing that won't break when styling changes.

Change Type

Please delete any irrelevant options.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Translation update

Testing

1. Start the application locally
2. Open a conversation and send a message
3. Open browser DevTools and inspect a user message element
4. Confirm it has data-testid="user-message"
5. Inspect an assistant response element
6. Confirm it has data-testid="assistant-message"

Test Configuration:

N/A

Checklist

Please delete any irrelevant options.

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• I have made pertinent documentation changes
• My changes do not introduce new warnings
• I have written tests demonstrating that my changes are effective or that my feature works
• Local unit tests pass with my changes
• Any changes dependent on mine have been merged and published in downstream modules.
• A pull request for updating the documentation has been submitted.

[Copilot]

Pull request overview

This PR adds data-testid attributes to message containers across the client application to enable more reliable E2E testing in downstream repositories by providing stable test identifiers that won't break when CSS class names change.

• Adds data-testid="user-message" and data-testid="assistant-message" to message container elements
• Implements consistent conditional logic using isCreatedByUser to differentiate between user and assistant messages
• Updates 5 message rendering components to ensure comprehensive coverage across different parts of the application

Reviewed changes

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

Show a summary per file

File	Description
client/src/components/Share/Message.tsx	Adds data-testid to message container in the share view component
client/src/components/Messages/ContentRender.tsx	Adds data-testid to message container in the content render component
client/src/components/Chat/Messages/ui/MessageRender.tsx	Adds data-testid to message container in the main message render component
client/src/components/Chat/Messages/SearchMessage.tsx	Adds data-testid to MessageBody component in search message view
client/src/components/Chat/Messages/MessageParts.tsx	Adds data-testid to message container for multi-part messages

---

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

[Copilot]

The data-testid attribute should be unique within a page. In a conversation with multiple messages, there will be multiple elements with the same 'user-message' or 'assistant-message' test ID, which violates HTML best practices and makes E2E testing unreliable. Consider making the test ID unique by incorporating the message ID, for example: data-testid={msg.isCreatedByUser ? user-message-${msg.messageId}:assistant-message-${msg.messageId}}

Suggested change

	data-testid={msg.isCreatedByUser ? 'user-message' : 'assistant-message'}
	data-testid={
	msg.isCreatedByUser
	? `user-message-${msg.messageId}`
	: `assistant-message-${msg.messageId}`
	}

[Copilot]

The data-testid attribute should be unique within a page. In a conversation with multiple messages, there will be multiple elements with the same 'user-message' or 'assistant-message' test ID, which violates HTML best practices and makes E2E testing unreliable. Consider making the test ID unique by incorporating the message ID, for example: data-testid={isCreatedByUser ? user-message-${messageId}:assistant-message-${messageId}}

Suggested change

	data-testid={isCreatedByUser ? 'user-message' : 'assistant-message'}
	data-testid={
	isCreatedByUser ? `user-message-${messageId}` : `assistant-message-${messageId}`
	}

[Copilot]

The data-testid attribute should be unique within a page. In a conversation with multiple messages, there will be multiple elements with the same 'user-message' or 'assistant-message' test ID, which violates HTML best practices and makes E2E testing unreliable. Consider making the test ID unique by incorporating the message ID, for example: data-testid={isCreatedByUser ? user-message-${messageId}:assistant-message-${messageId}} (where messageId would need to be passed as a prop to the MessageBody component)

[Copilot]

The data-testid attribute should be unique within a page. In a conversation with multiple messages, there will be multiple elements with the same 'user-message' or 'assistant-message' test ID, which violates HTML best practices and makes E2E testing unreliable. Consider making the test ID unique by incorporating the message ID, for example: data-testid={isCreatedByUser ? user-message-${messageId}:assistant-message-${messageId}}

Suggested change

	data-testid={isCreatedByUser ? 'user-message' : 'assistant-message'}
	data-testid={isCreatedByUser ? `user-message-${messageId}` : `assistant-message-${messageId}`}

[Copilot]

The data-testid attribute should be unique within a page. In a conversation with multiple messages, there will be multiple elements with the same 'user-message' or 'assistant-message' test ID, which violates HTML best practices and makes E2E testing unreliable. Consider making the test ID unique by incorporating the message ID, for example: data-testid={msg.isCreatedByUser ? user-message-${msg.messageId}:assistant-message-${msg.messageId}}

Suggested change

	data-testid={msg.isCreatedByUser ? 'user-message' : 'assistant-message'}
	data-testid={
	msg.isCreatedByUser
	? `user-message-${msg.messageId}`
	: `assistant-message-${msg.messageId}`
	}