feat: add subscription and org details to Chatwoot support widget

[dzienisz]

Summary by CodeRabbit

• New Features
  • The in-app help chat now adapts to your account. When an organization is selected, it shares your subscription plan, status, organization details, and enabled features with support, enabling more relevant, faster assistance. If details aren’t available, it defaults to a free/inactive profile. No action needed—applies when opening the chat.

[coderabbitai]

Walkthrough

Adds conditional logic in HelpMenu’s chat open flow to set Chatwoot widget attributes based on the user’s preferred organization and active cloud subscription, with defaults when absent, then toggles the widget.

Changes

Cohort / File(s)	Summary
Chat widget org/subscription attributes webapp/src/component/HelpMenu.tsx	After initializing Chatwoot, conditionally sets attributes (plan, subscriptionStatus, organizationId, organizationName, enabledFeatures) from preferredOrganization/activeCloudSubscription before calling window.$chatwoot.toggle(); defaults to 'free' and 'inactive' when missing.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant HelpMenu
  participant Chatwoot as window.$chatwoot

  User->>HelpMenu: Click "Help" / open chat
  HelpMenu->>Chatwoot: initialize()
  rect rgba(230, 245, 255, 0.5)
    Note over HelpMenu: Prepare attributes
    alt preferredOrganization exists
      HelpMenu->>HelpMenu: Read activeCloudSubscription
      HelpMenu->>Chatwoot: setAttributes({ plan, subscriptionStatus, organizationId, organizationName, enabledFeatures })
    else no preferredOrganization
      Note over HelpMenu: Use defaults (plan: "free", status: "inactive")
    end
  end
  HelpMenu->>Chatwoot: toggle()

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I twitch my ears at chats that bloom,
Set plans and flags—no more gloom.
Org names hop in, features too,
If none are found, free fields will do.
With a toggle—boop!—the widget springs,
A happy hare of helpful things. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly describes the addition of subscription and organization details to the Chatwoot support widget, directly reflecting the main change of setting custom attributes on the chat widget for paying customers in the openChatwoot flow. It follows the conventional feat prefix, avoids vague terms, and is concise enough to convey the primary update at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/chatwood-custom-attributes

---

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]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d46d827 and 905e8e9.

📒 Files selected for processing (1)

• webapp/src/component/HelpMenu.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (24)

• GitHub Check: E2E testing ‍🔎 (15, 12)
• GitHub Check: E2E testing ‍🔎 (15, 14)
• GitHub Check: E2E testing ‍🔎 (15, 9)
• GitHub Check: E2E testing ‍🔎 (15, 13)
• GitHub Check: E2E testing ‍🔎 (15, 11)
• GitHub Check: E2E testing ‍🔎 (15, 7)
• GitHub Check: E2E testing ‍🔎 (15, 10)
• GitHub Check: E2E testing ‍🔎 (15, 4)
• GitHub Check: E2E testing ‍🔎 (15, 6)
• GitHub Check: E2E testing ‍🔎 (15, 8)
• GitHub Check: E2E testing ‍🔎 (15, 3)
• GitHub Check: E2E testing ‍🔎 (15, 5)
• GitHub Check: E2E testing ‍🔎 (15, 0)
• GitHub Check: E2E testing ‍🔎 (15, 2)
• GitHub Check: E2E testing ‍🔎 (15, 1)
• GitHub Check: BT ‍🔎 (server-app:runWithoutEeTests)
• GitHub Check: BT ‍🔎 (data:test)
• GitHub Check: BT ‍🔎 (ktlint:test)
• GitHub Check: BT ‍🔎 (security:test)
• GitHub Check: BT ‍🔎 (server-app:runContextRecreatingTests)
• GitHub Check: BT ‍🔎 (server-app:runWebsocketTests)
• GitHub Check: BT ‍🔎 (server-app:runStandardTests)
• GitHub Check: BT ‍🔎 (ee-test:test)
• GitHub Check: Frontend static check 🪲

🔇 Additional comments (1)

webapp/src/component/HelpMenu.tsx (1)

129-139: Implementation looks correct with appropriate fallbacks.

The custom attributes are properly set with defensive fallbacks:

• Optional chaining prevents errors if activeCloudSubscription is undefined
• Fallback values ('free', 'inactive') handle edge cases where support features exist but no active subscription is present
• Direct access to enabledFeatures is safe given the type guarantees (consistent with usage at lines 154, 157-158)

The timing is correct—attributes are set after user initialization and before toggling the widget.

[JanCizmar]

Hmm, this looks like potential issue when the $chatwoot is not defined. I wouldn't use @ts-ignore ignore here.

Also I would move this to separate hook usePrepareChatwootAttributes. This component us already long enough.