Add ID's to Messages and Activities for Scrolling #9
Description
Original:
Add an
idattribute to messages and activities with the valuesmessage-00000000-0000-0000-0000-000000000000andactivity-00000000-0000-0000-0000-000000000000, respectively.
User Story:
As a developer building scroll-support features,
I want each message and activity element to have a stable id attribute matching message-{id} or activity-{id},
So that I can programmatically scroll to these elements via query parameters.
Acceptance Criteria (Checklist):
- In
src/components/Chat/Message/Message.tsx, on the top-level<div>returned by theMessagecomponent, add<div id={`message-${id}`} …> • In src/components/Chat/Activity/index.tsx, inside the ActivityContent component’s root <div>, add
• Ensure each id matches the id property provided by the useConversation or useActivity hooks.
• Add or update unit tests:
• src/components/Chat/Message/Message.test.tsx asserting the message-{id} attribute exists
• src/components/Chat/Activity/index.test.tsx asserting the activity-{id} attribute exists
⸻
Scope Boundaries:
• In-Scope:
• Modifying only Message.tsx and src/components/Chat/Activity/index.tsx to emit id attributes.
// example!!!
--- a/AGInteractive/src/components/Chat/Message/Message.tsx
+++ b/AGInteractive/src/components/Chat/Message/Message.tsx
@@ export const Message: React.FC<MessageProps> = ({ id, text }) => {
- return (
- <div className="...">
+ return (
+ <div
+ id={`message-${id}`}
+ className="..."
+ >
<p>{text}</p>
</div>
);`
// In Message.tsx, add id={message-${id}} to the root <div> so it renders e.g. id="message-00000000-0000-0000-0000-000000000000".
// In Activity/index.tsx, add id={activity-${id}} to the container <div> inside the Tooltip so it renders e.g. id="activity-00000000-0000-0000-0000-000000000000".
• Updating/creating tests to validate those attributes.
• Out-of-Scope:
• Implementing the actual scroll logic (see AGInteractive #10 & #11).
• Styling or layout changes beyond the ID addition.
⸻
Dependencies:
• src/components/Chat/Message/Message.tsx
• src/components/Chat/Activity/index.tsx
• Parent issue: AGInteractive #10 (Scroll-To for Message Query Parameter)
• Sub-issue: AGInteractive #11 (Scroll-To for Activity Query Parameter)
⸻