PR 5: Add Seen Status, Typing Indicator, and Chat Creation Popup to Messaging

[ashley-arellano]

Overview

What does this PR do?

This PR enhances the chat system with seen status tracking, a real-time typing indicator, and a non-functional popup modal to create new chats with other users. It also introduces a more user-friendly layout when users first enter the chat page.

---

Key Features & Changes

What has been added or changed?

✔ Seen Status Implementation:

• Backend logic to mark messages as seen when user B comes online.

• Frontend indicator showing a checkmark (✓) when a message is read.

✔ Typing Indicator:

• Real-time typing status via WebSockets.

• Animated bubble (three dots) appears when the other user is typing.

✔ New Chat Creation Popup:

• Modal to start a chat by entering a username.

• Prevents duplicate chats and improves UX.

✔ Improved Initial Layout:

• Enhanced default layout when entering the chat screen (received assistance from Abdul with the .css file).

✔ Message Rendering Updates:

• Refactored how messages are displayed by using message ids.

• Includes seen checkmark next to sent messages.

---

Why This Is Needed

What problem does this solve?

Users previously had no visibility on whether their messages were read or if the other person was typing. This update improves real-time feedback in conversations and adds a more intuitive flow for starting chats.

---

Design Documentation (If Applicable)

Diagrams & Visuals (If the PR involves a major feature, link UML diagrams)

User action flow diagram for typing indicator and seen status:

---

Demo

New Look:

Typing indicator and seen status in action:

pr5_demo.-.Made.with.Clipchamp.mp4

Note: Its intentional that when user B, who was previously inactive, joins a chat where user A has texted to not automatically appear as seen until one of the users send a message. This is due to the logic accounting for GET request first populating the message chat before creating the websocket connection. Since GET is not yet connected, the above behavior will happen.

---

Related Issue

🔗 This PR addresses issue #102

---

Implementation Details

How was this feature developed?

• WebSocket updates to handle typing and seen events.

• Frontend state tracks isTyping and seen per message ID.

• ChatConsumer methods:

  • typing_status() and seen_status() added.

  • mark_as_seen() used to persist seen messages.

• UI uses a modular Typing component and updated chat-body rendering logic.

---

How to Test This PR

Step-by-step testing guide

1️⃣ Run the frontend (follow the .readme instructions)

2️⃣ Create two test users via the signup page (e.g., John and Jane).

3️⃣ Start the Django backend server with python manage.py runserver (follow the .readme instructions for additional help)
& make sure your Redis server is running (redis-cli ping — if no response, run sudo service redis-server start).

4️⃣ Access the Django admin panel at http://127.0.0.1:8000/admin, and:

• Navigate to the Chat model.

• Create a new chat and assign the two users you created to it.

• Set the name of the chat object to "John-Smith", "Jane-Doe", or "Bob-Williams" (these are the expected mock values).

5️⃣ Open two separate browsers or tabs (e.g., Chrome + Chrome Incognito, or Chrome + Firefox).

6️⃣ Log in with each of the two users — one per browser window.

7️⃣ Go to the chat page on both tabs (e.g., http://localhost:5173/chat).

8️⃣ Click on the same chat (e.g., "John-Smith") from the sidebar in both sessions to initiate a WebSocket connection.

9️⃣ Send a message while the other user is offline.

🔟 When the user comes online, confirm the message is marked as seen (✓ appears).

🔢 Step 11: Start typing a message; check that the typing animation appears for the other user.

🔢 Step 12: Stop typing and wait 2 seconds — the typing status should disappear.

🔢 Step 13: Click create new chat to see if the pop-up window appears as it's supposed to.

---

⚠️ Note: If any WebSocket errors occur in the backend logs or messages aren’t sending:

• Log out and back in again with both users — the issue is often due to an expired or missing JWT token.

---

Files Added/Modified

📂 List of important files changed in this PR

File Name	Description
frontend/src/components/Chat.jsx	Chat component
frontend/src/styles/Chat.css	Styling & animations
backend/apps/chat/consumer.py	Added logic for seen and typing status

Note: I also removed the node_modules in this PR hence the 5000 files changed

---

AI Code Usage

🤖 Was AI-generated code used in this PR?

• Yes (AI was used for draft logic and typing animation styling, reviewed and modified by developer.)

---

Checklist for Reviewers

Things to check before approving this PR:

• Does the seen status update correctly after user B comes online?

• Is the typing indicator synced between users?

• Is the chat creation popup functional and user-friendly?

• Is the message UI clean and consistent?

• Are WebSocket messages properly structured?

---

Next Steps & Future Enhancements

• Retrieve all possible chats and the ability to create a chat

• Show “Delivered” status in addition to “Seen”.

• Connect to backend for user actions (report, mute, block)

---

Final Notes

Thanks for reviewing!! Let me know if you have any suggestions.

[codecov]

Codecov Report

Attention: Patch coverage is 17.64706% with 28 lines in your changes missing coverage. Please review.

Project coverage is 63.94%. Comparing base (b24c564) to head (d07a189).
Report is 35 commits behind head on main.

Files with missing lines	Patch %	Lines
backend/apps/chat/consumers.py	18.18%	27 Missing ⚠️
backend/apps/chat/jwt_middleware.py	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #162      +/-   ##
==========================================
+ Coverage   63.92%   63.94%   +0.01%     
==========================================
  Files          15       15              
  Lines         596      624      +28     
  Branches       45       49       +4     
==========================================
+ Hits          381      399      +18     
- Misses        194      204      +10     
  Partials       21       21              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ashley-arellano]

Regarding codecov, I intend to make a future PR for unit testing for chat : D

[aviendha-andrus]

🔍 Peer Review: Add Seen Status, Typing Indicator, and Chat Creation Popup to Messaging

Hey Ashley 👋 — just finished reviewing your PR titled "Add Seen Status, Typing Indicator, and Chat Creation Popup to Messaging". Here’s my feedback:

---

✅ What Looks Great

• The implementation of backend logic to mark messages as seen, in combination with the frontend checkmark is well done and adds great functionality to the messages feature.
• Utilizing websockets to produce a real time typing indicator is a great move.
• The idea of creating a new chat by entering a persons name is great! It conquers the problem of accidentally creating multiple chats with the same people.
• I appreciated the in depth PR and how it included diagrams, thorough testing instructions, and conformed to the template.

---

💡 Suggestions for Improvement (if any)

• Right now the chat list is hardcoded, in a future PR you could implement a GET /chats.
• I noticed that in ChatConsumer if save_message() fails it returns a singular string which causes a ValueError. Instead you might return a tuple on failure that mimics what you return on success.

---

🧪 Tested This Feature

I ran the following test steps:

• ✅ Ran the frontend and backend as outlined in the README
• ✅ Created two users and assigned them to a chat via Django admin
• ✅ Logged in with both users in separate browsers and opened the same chat
• ✅ Verified messages sent while one user was offline showed the seen checkmark (✓) when they came online
• ✅ Confirmed the typing indicator appears and disappears correctly
• ✅ Clicked "create new chat" and confirmed the popup displays as expected
  Everything behaved as expected 🎉

---

🔄 Next Steps

• As you suggested, a testing units for chat would be great!
• Create new issues for the next steps, like the ability to create a chat.

---

🚀 Final Thoughts

Great job with this implementation! You're making strong contributions to the project. Let me know if you need help integrating with the backend or designing the next feature.

Looking forward to seeing this live soon! 💯

[cj-ballesteros]

Hey Ashley! I'm going to go ahead and approve this here, and put my feedback in another comment!

[cj-ballesteros]

🔍 Peer Review: Add Seen Status, Typing Indicator, and Chat Creation Popup to Messaging

Hey Ashley 👋 — just finished reviewing your PR titled "Add Seen Status, Typing Indicator, and Chat Creation Popup to Messaging". Here’s my feedback:

---

💡 Suggestions for Improvement (if any)

• Everything that Aviendha said is valid!
• When removing the node_modules folder, I'd prefer it if it was done in a separate PR, as reviewing the code on github makes the webpage very laggy and slow.

---

🧪 Tested This Feature

I ran the following test steps:

• ✅ Ran the frontend and backend as outlined in the README
• ✅ Created two users and assigned them to a chat via Django admin
• ✅ Logged in with both users in separate browsers and opened the same chat
• ✅ Verified messages sent while one user was offline showed the seen checkmark (✓) when they came online
• ✅ Confirmed the typing indicator appears and disappears correctly
• ✅ Clicked "create new chat" and confirmed the popup displays as expected
  Everything behaved as expected 🎉

---

🔄 Next Steps

• As you suggested, a testing units for chat would be great!
• Create new issues for the next steps, like the ability to create a chat.

---

🚀 Final Thoughts

Otherwise, great job!

[cj-ballesteros]

Since this is just a merge conflict fix, the solution looks good and it gets a LGTM! :)

[aviendha-andrus]

Still look good! Merge conflict fixed.