fix: use hook destructuring for AI chat handlers

[aasthakhatri11]

📄 Description

Fixed improper direct useAI.getState() calls inside JSX event props in MainPlaygroundPage.tsx.

Replaced direct store access with proper hook destructuring using:

const { toggleChat } = useAI();

and passed toggleChat directly into the relevant component props.

✅ Changes Made

• Added toggleChat destructuring from useAI()
• Replaced direct useAI.getState().toggleChat() calls in JSX props
• Updated all relevant handlers to use the destructured hook method instead

🧪 Testing

• Verified successful production build using pnpm build

🔗 Related Issue

Closes #136

🎯 Program

GSSoC '26

Summary by CodeRabbit

• New Features

  • Real-time collaboration: dynamic collaborator count displayed in the status bar.

• Improvements

  • AI chat toggle refactored to use local control for consistent behavior across header, welcome screen, and command palette.
  • Collaboration connection now properly tracks active participants and cleans up listeners for more reliable presence updates.

• Chores

  • Propagated collaborator counts to UI components for accurate display.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @aasthakhatri11!

Your PR has entered the 🚦 PR Review Pipeline.

🟢 GSSOC PR detected — your PR will be routed to an approved GSSOC mentor for Stage 2 review.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	🧑‍🏫 GSSOC Mentor	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 207e8232-70e4-40a6-9290-59cd41864f8f

📥 Commits

Reviewing files that changed from the base of the PR and between 75e800a and f4f28de.

📒 Files selected for processing (1)

• modules/playground/components/MainPlaygroundPage.tsx

---

Walkthrough

MainPlaygroundPage adds Yjs imports and an effect to fetch a collab token, initialize/get a Yjs provider, subscribe to awareness updates to compute collaboratorCount, and wires a destructured toggleChat into header, welcome, and command palette callbacks while passing collaboratorCount to StatusBar.

Changes

Chat Toggle and Collaborator State Refactor

Layer / File(s)	Summary
Dependency imports and formatting modules/playground/components/MainPlaygroundPage.tsx	Add fetchCollabToken and getOrCreateYDoc imports; small import-area blank-line formatting change.
Hook destructuring and state initialization modules/playground/components/MainPlaygroundPage.tsx	Destructure toggleChat from useAI() and introduce collaboratorCount component state alongside existing UI state.
Yjs awareness effect and playground id wiring modules/playground/components/MainPlaygroundPage.tsx	New/expanded effect: sets playground id, fetches collaboration token, initializes/gets YDoc/provider, subscribes to awareness updates, derives unique active users, updates collaboratorCount, and cleans up listeners.
Chat toggle callback wiring & StatusBar integration modules/playground/components/MainPlaygroundPage.tsx	Replace inline useAI.getState().toggleChat() calls by passing the local toggleChat to PlaygroundHeader.toggleAIChat, WelcomeScreen.onOpenAI, and CommandPalette.onToggleAI; pass collaboratorCount into StatusBar.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• piyushdotcomm

Poem

🐰 I hopped into the code today,
Tokens fetched and docs at play,
A toggle tucked in, neat and spry,
Counts of friends now meet the eye,
Hooray — collaboration's on its way!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The raw summary indicates Yjs collaboration support was added (fetchCollabToken, getOrCreateYDoc, collaboratorCount), which extends beyond the focused scope of issue #136.	The PR description and issue #136 do not mention Yjs changes; clarify whether these changes are intentional or should be in a separate PR to maintain focused scope.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main fix: using hook destructuring for AI chat handlers instead of direct store access.
Description check	✅ Passed	The description covers what changed, why, testing performed, and the related issue, though it lacks the structured template format with checkboxes.
Linked Issues check	✅ Passed	The PR successfully addresses all requirements from issue #136: destructures toggleChat from useAI(), removes direct getState() calls in JSX props, and replaces them with proper hook method references.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch fix-useai-hook-destructuring

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

modules/playground/components/MainPlaygroundPage.tsx (1)

74-74: ⚡ Quick win

Use a selector for Zustand to avoid full-store subscriptions in this page.

Line 74 subscribes to the entire useAI store via object destructuring, which can cause avoidable rerenders here. Prefer selecting only toggleChat.

♻️ Suggested refactor

-  const { toggleChat } = useAI();
+  const toggleChat = useAI((state) => state.toggleChat);

🤖 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 `@modules/playground/components/MainPlaygroundPage.tsx` at line 74, The
component currently destructures the whole useAI store (const { toggleChat } =
useAI()) causing a full-store subscription and extra rerenders; change this to
select only the toggleChat selector (e.g. const toggleChat = useAI(state =>
state.toggleChat)) so the component subscribes solely to that function and
avoids unnecessary updates; update any references to toggleChat accordingly and
remove the object destructuring usage of useAI.

🤖 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.

Inline comments:
In `@modules/playground/components/MainPlaygroundPage.tsx`:
- Around line 3-5: The Error UI in MainPlaygroundPage references the AlertCircle
component but the import was removed; re-add an import for AlertCircle (same
source used by other UI icons in the project) at the top of
MainPlaygroundPage.tsx so that the <AlertCircle /> usage in the error render
path resolves; locate the existing imports near Button and ErrorBoundary and add
the AlertCircle import alongside them (ensuring the import symbol name is
exactly AlertCircle).

---

Nitpick comments:
In `@modules/playground/components/MainPlaygroundPage.tsx`:
- Line 74: The component currently destructures the whole useAI store (const {
toggleChat } = useAI()) causing a full-store subscription and extra rerenders;
change this to select only the toggleChat selector (e.g. const toggleChat =
useAI(state => state.toggleChat)) so the component subscribes solely to that
function and avoids unnecessary updates; update any references to toggleChat
accordingly and remove the object destructuring usage of useAI.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: cbd4e4a2-2cfc-4911-8ecf-294e8d993f19

📥 Commits

Reviewing files that changed from the base of the PR and between 80da20e and 1892967.

📒 Files selected for processing (1)

• modules/playground/components/MainPlaygroundPage.tsx

[piyushdotcomm]

see the coderabbit suggestions

[aasthakhatri11]

Fixed the missing AlertCircle and FolderOpen imports as flagged by CodeRabbit.
Both of them have been restored now

[coderabbitai]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@modules/playground/components/MainPlaygroundPage.tsx`:
- Around line 126-164: The async effect can subscribe after the component
unmounted, causing a leaked listener; after awaiting
fetchCollabToken/getOrCreateYDoc check the `cancelled` flag before calling
`provider.awareness.on("change", updateCollaborators)` and before assigning
`cleanup` (or alternatively move the `cancelled` guard to immediately after the
awaits and return early if set) so that `updateCollaborators` is never
subscribed when `cancelled` is true; make these checks around the subscription
and cleanup assignment in the block that uses `provider`, referencing the
existing functions/variables `fetchCollabToken`, `getOrCreateYDoc`,
`provider.awareness`, `updateCollaborators`, `cleanup`, and `cancelled`.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: bcc234ed-76a3-4fbd-85e4-036b9d84126a

📥 Commits

Reviewing files that changed from the base of the PR and between 1892967 and 75e800a.

📒 Files selected for processing (1)

• modules/playground/components/MainPlaygroundPage.tsx

[piyushdotcomm]

resolve the merge conflict

[aasthakhatri11]

Hi @piyushdotcomm,
It looks like MainPlaygroundPage.tsx no longer exists in main so should I fix the new files?