feat: auto focus message input on chat open

[kareena0229]

Related Issue

Closes #525

Description

This PR improves chat usability by automatically focusing the message input field whenever a conversation is opened.

Changes Made

• Added auto-focus behavior using useEffect
• Focuses the textarea when selectedUser changes
• Improves messaging workflow and user experience

Benefits

• Faster message composition
• More seamless interaction flow
• Better accessibility and usability

Summary by CodeRabbit

• New Features
  • The message input field now automatically focuses when you switch between conversations, providing a seamless chat experience.

[coderabbitai]

📝 Walkthrough

Walkthrough

ChatWindow now includes a useEffect hook that auto-focuses the message input textarea whenever selectedUser changes, removing the need for users to manually click before typing.

Changes

Message Input Auto-Focus on User Selection

Layer / File(s)	Summary
Textarea auto-focus on user change frontend/components/chat/ChatWindow.jsx	New useEffect with [selectedUser] dependency auto-focuses the textarea when a conversation is opened or switched.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

level:intermediate

Poem

🐰 A rabbit hops through chat so fast,
With focus now, the die is cast!
No click required, just type away—
Auto-focus brightens up your day! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding automatic focus to the message input when opening a chat conversation.
Linked Issues check	✅ Passed	The implementation fully addresses issue #525 by auto-focusing the textarea using useEffect triggered by selectedUser changes, meeting all stated objectives.
Out of Scope Changes check	✅ Passed	All changes are directly related to the auto-focus feature specified in issue #525; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

frontend/components/chat/ChatWindow.jsx (2)

145-145: ⚡ Quick win

Optimize dependency: use selectedUser?._id instead of selectedUser.

The current dependency on the entire selectedUser object will trigger the effect whenever the object reference changes, even if it's the same user. This can cause unnecessary focus calls.

⚡ Suggested improvement

-}, [selectedUser]);
+}, [selectedUser?._id]);

This ensures the focus only triggers when switching between different users, not on object reference changes.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/components/chat/ChatWindow.jsx` at line 145, The effect in
ChatWindow.jsx currently lists the whole selectedUser object in the dependency
array, causing unnecessary runs when the object reference changes; update the
useEffect dependency to depend on selectedUser?._id (e.g., replace selectedUser
with selectedUser?._id) so the effect (the focus call on the input ref inside
the useEffect) only runs when the selected user's id changes.

---

141-145: ⚡ Quick win

Consider guarding against focus conflicts when search is open.

When the search panel is open (line 490 has autoFocus on the search input), this effect will steal focus back to the textarea if selectedUser changes. This could disrupt users who are actively searching messages.

🛡️ Suggested guard condition

 useEffect(() => {
-    if (selectedUser && textareaRef.current) {
+    if (selectedUser && textareaRef.current && !searchOpen) {
         textareaRef.current.focus();
     }
-}, [selectedUser]);
+}, [selectedUser, searchOpen]);

This prevents focus-stealing when the user is actively searching.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/components/chat/ChatWindow.jsx` around lines 141 - 145, The effect
that focuses textareaRef on selectedUser change can steal focus from the search
input; update the useEffect (referencing useEffect, selectedUser, and
textareaRef) to first check that the search panel is not active (e.g., a boolean
like isSearchOpen or isSearching, or that searchInputRef.current is not the
activeElement) before calling textareaRef.current.focus(), and include that
guard in the dependency array so focus only occurs when selectedUser changes and
search is closed.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/components/chat/ChatWindow.jsx`:
- Line 145: The effect in ChatWindow.jsx currently lists the whole selectedUser
object in the dependency array, causing unnecessary runs when the object
reference changes; update the useEffect dependency to depend on
selectedUser?._id (e.g., replace selectedUser with selectedUser?._id) so the
effect (the focus call on the input ref inside the useEffect) only runs when the
selected user's id changes.
- Around line 141-145: The effect that focuses textareaRef on selectedUser
change can steal focus from the search input; update the useEffect (referencing
useEffect, selectedUser, and textareaRef) to first check that the search panel
is not active (e.g., a boolean like isSearchOpen or isSearching, or that
searchInputRef.current is not the activeElement) before calling
textareaRef.current.focus(), and include that guard in the dependency array so
focus only occurs when selectedUser changes and search is closed.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6046c6bc-b3bc-4e4d-a90b-9f2bb360f1b6

📥 Commits

Reviewing files that changed from the base of the PR and between 29c9c86 and f66ef5f.

📒 Files selected for processing (1)

• frontend/components/chat/ChatWindow.jsx

[kareena0229]

This PR adds automatic focus behavior for the chat input field when opening a conversation.

Improvements

• Auto-focuses textarea on chat switch
• Improves messaging workflow
• Reduces extra clicks before typing
• Enhances accessibility and UX

@UTKARSHH20 Would appreciate a review. Thanks!