Add ID's to Messages and Activities for Scrolling

[JamesonRGrieve]

Original:

Add an id attribute to messages and activities with the values message-00000000-0000-0000-0000-000000000000 and activity-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 the Message component, 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)

⸻

[jnelsoncelsys]

@JamesonRGrieve and @austinleblanc please review my suggest triage info to be added as the issue description/body:

Category: UI/UX

---

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 the Message component, 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)

⸻

[JamesonRGrieve]

Added to OP

[yogeshCelestial]

Hi @JamesonRGrieve, @jnelsoncelsys,

This Issue, with its two sub-issues, has been fixed from my side and tested with static data.
PR - #29

Review/Merge this PR after 28th of the same repo (dependent).

[yogeshCelestial]

@waiscodes,

As PR for Issue (#19) has been merged.
Its PR is also open for review now.

[yogeshCelestial]

PR for this issue, along with 2 sub-issues #10 and #11, has been merged, moving to QA