Chat Message Bubble UI with Sender Differentiation

[SudiptaPaul-31]

Description
Design message bubbles that visually distinguish between the current user and other participants.

Acceptance Criteria

• Current user messages aligned right
• Other users’ messages aligned left
• Different background colors for each
• Timestamp shown below message or on hover

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hello maintainer. am nacho, a full-stack developer.

I understand the goal is to design chat message bubbles that clearly differentiate between the current user and other participants, improving readability and overall chat experience.

My Approach:
-Align current user messages to the right
-Align other users’ messages to the left
-Use distinct background colors for clear visual separation
-Add timestamps below messages (or on hover for a cleaner UI)
-Ensure the layout is responsive and visually consistent

What I will Deliver:
-Clean and modern chat bubble UI
-Reusable message component
-Smooth spacing, padding, and typography
-Proper handling of long messages and different screen sizes

This will make conversations easier to follow and enhance the overall user experience.
Looking forward to contributing . thanks

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nacho1499 to this issue.

[mitchellecm7]

@mitchellecm7 has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

#104 — Chat Message Bubble UI with Sender Differentiation:

Plan:

· Current user messages: right-aligned, distinct background color (e.g., primary brand)
· Other users' messages: left-aligned, neutral background color
· Timestamp: shown below each message or on hover — pick one and stay consistent
· Match existing component patterns and styling approach

Edge Cases:

· Consecutive messages from same sender: no redundant alignment/grouping issues
· Long messages: wrap cleanly, don't break alignment
· Timestamp format: relative or absolute, consistent app-wide

Testing:

· Screenshots in PR showing both sender types
· Manual QA: mix of current user and others, long messages, timestamps visible

Assign me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @mitchellecm7 to this issue.

[Francis6-git]

@Francis6-git has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

I'd love to work on this please.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Francis6-git to this issue.

[drips-wave]

Congratulations, @Francis6-git! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on April 29, 2026.

🧑‍💻 @Francis6-git: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[Okorie2000-code]

@Okorie2000-code has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hi, I’d like to take on this issue.

I’ve reviewed the requirements and I understand the need to implement clear visual differentiation between the current user and other participants in the chat UI to improve readability and user experience.

My approach will be:

• Align current user messages to the right and other users’ messages to the left using a clean flexbox layout
• Apply distinct background colors for each message type to improve visual separation
• Ensure consistent spacing, padding, and responsive behavior across screen sizes
• Display timestamps either beneath each message or on hover, depending on the existing UI pattern in the project
• Keep the styling consistent with the current design system and avoid unnecessary UI changes

I will ensure the implementation is clean, reusable, and tested across different message scenarios before submitting the PR.

Ready to start immediately.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Okorie2000-code to this issue.

[drips-wave]

Congratulations, @Okorie2000-code! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @Okorie2000-code: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[Okorie2000-code]

closes #104

[Okorie2000-code]

Description Design message bubbles that visually distinguish between the current user and other participants.

Acceptance Criteria

* Current user messages aligned **right**

* Other users’ messages aligned **left**

* Different **background colors** for each

* **Timestamp** shown below message or on hover

closes #104