feat: Add Message Search and Filter Support in Team Chat (NSOC'26)

[SrashtiChauhan]

NSOC'26

Problem

The current Team Chat module allows users to send and receive messages in real time, but it becomes difficult to navigate conversations when many messages are present.

Users currently cannot:

• search previous messages
• filter messages by username
• quickly locate media messages
• find important conversation history

This reduces usability for active team collaboration.

---

Proposed Solution

Enhance the Team Chat module by adding message search and filtering functionality for better conversation navigation and accessibility.

---

Features to Implement

• Add live message search bar
• Filter messages by username
• Highlight matching search text
• Add media-only filter (images/audio)
• Show “No matching messages” state
• Maintain real-time compatibility with Socket.IO

Implementation Idea

• Use React state for search query
• Filter rendered messages dynamically
• Highlight matched text using conditional styling
• Add filter chips/buttons for:
• All Messages
• Images
• Voice Notes
• Keep original message state unchanged

---

Expected Outcome

• Users can quickly find messages
• Easier navigation in long conversations
• Improved usability and accessibility
• Better collaboration experience

Possible Tech Stack / Libraries

• React
• Tailwind CSS
• Socket.IO
• lucide-react

---

Additional Notes

The implementation should follow the existing FlowForge UI theme and remain responsive across all screen sizes.

Kindly assign this issue to me.

Thank You!
NSOC'26

[github-actions]

👋 Hey @SrashtiChauhan!

Thanks for opening this issue! 🚀

📌 NSoC'26 Contribution Guidelines

⚠️ Please follow these rules carefully:

• Do NOT create a PR until this issue is assigned to you
• Include NSoC'26 tag
• Include screenshots if it's UI-related
• Follow all contribution guidelines properly

🧑‍💻 A mentor will review and assign this issue soon.

---

🙏 Thank you for raising this issue!
We’ll review it as soon as possible. We truly appreciate your contribution ✨

📖 Meanwhile, please make sure you have checked:

• README.md
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

🚫 Reminder: Do NOT create a PR until this issue has been assigned.

Happy coding! 💻🔥

[SrashtiChauhan]

@Shriii19 ,
Kindly assign me this issue.
Also Kindly add labels(level 1 , 2 , or 3) in my previous 10 prs.
#52
#49
#47
#44
#36
#30
#19
#13
#40
Thank you!

[Shriii19]

@Shriii19 ,
Kindly assign me this issue.
Also Kindly add labels(level 1 , 2 , or 3) in my previous 10 prs.
#52
#49
#47
#44
#36
#30
#19
#13
#40
Thank you!

Sure I will do just give me time.

[SrashtiChauhan]

@Shriii19 ,
Kindly assign me this issue.
Also Kindly add labels(level 1 , 2 , or 3) in my previous 10 prs.
#52
#49
#47
#44
#36
#30
#19
#13
#40
Thank you!

Sure I will do just give me time.

Sure please take your time.
Also kindly assign this issue to me so that i can work further.
Thank you

[Shriii19]

@Shriii19 ,
Kindly assign me this issue.
Also Kindly add labels(level 1 , 2 , or 3) in my previous 10 prs.
#52
#49
#47
#44
#36
#30
#19
#13
#40
Thank you!

Sure I will do just give me time.

Sure please take your time. Also kindly assign this issue to me so that i can work further. Thank you

i have add the lev now you can check and tell me u r get your point ?

[SrashtiChauhan]

@Shriii19 ,
Kindly assign me this issue.
Also Kindly add labels(level 1 , 2 , or 3) in my previous 10 prs.
#52
#49
#47
#44
#36
#30
#19
#13
#40
Thank you!

Sure I will do just give me time.

Sure please take your time. Also kindly assign this issue to me so that i can work further. Thank you

i have add the lev now you can check and tell me u r get your point ?

I am checking
Thank you for your time
Kindly assign this issue to me .

[SrashtiChauhan]

@Shriii19 ,
Could you please assign this issue to me

[Shriii19]

@Shriii19 ,
Could you please assign this issue to me

Done boss 🫡.

[SrashtiChauhan]

@Shriii19 ,
Could you please assign this issue to me

Done boss 🫡.

@Shriii19,
Its my humble request to you please check or ask once from the moderators that labels should be proveided like ( level1, level2 or level3) without any space . I think only then it will display on leaderboard and dashboard because my points havent updated yet.
So please check carefully and add labels according to rules.
As in general chat also you can see that they are saying without space (level2).

Kindly read and check carefully.
Thank you.

---

[Shriii19]

@SrashtiChauhan now check and tell me it is working or not

[Shriii19]

@SrashtiChauhan today i will fix your problem at any cost