Chatwoot

[bordalix]

Adds support powered by Chatwoot.

Go to Settings > Support to try it.

Summary by CodeRabbit

• New Features

  • Added a Support section in Settings with an integrated customer chat so users can contact support directly.
  • Added a support icon and settings option entry to access Support quickly.

• Documentation

  • README updated with new environment variable entries for the chat integration.

• UI/UX Improvements

  • Increased vertical padding for menu and selection rows for improved touch/visual spacing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[cloudflare-workers-and-pages]

Deploying wallet-mutinynet with    Cloudflare Pages

Latest commit:	dae168a
Status:	✅  Deploy successful!
Preview URL:	https://56d45d66.arkade-wallet.pages.dev
Branch Preview URL:	https://chatwoot.arkade-wallet.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-bitcoin with    Cloudflare Pages

Latest commit:	8eea4d3
Status:	✅  Deploy successful!
Preview URL:	https://ed060e1e.wallet-bitcoin.pages.dev
Branch Preview URL:	https://chatwoot.wallet-bitcoin.pages.dev

View logs

[coderabbitai]

Walkthrough

Adds Chatwoot support: environment variables, a chatwoot library with script injection, a Chatwoot React component, a Support settings screen and icon, and wires the Support option into settings navigation.

Changes

Cohort / File(s)	Summary
Chatwoot library & types src/lib/chatwoot.ts, src/lib/types.ts, README.md	Adds Chatwoot interfaces (ChatwootSDK, ChatwootVars, ChatwootSettings), helpers (getChatwootVars, hasChatwootVars, getChatwootSettings), script injection (injectAndRunChatwootScript) and a new SettingsOptions.Support enum member; documents VITE_CHATWOOT_WEBSITE_TOKEN and VITE_CHATWOOT_BASE_URL.
Support UI & integration src/components/ChatWoot.tsx, src/screens/Settings/Support.tsx, src/icons/Support.tsx	Adds ChatwootWidget component that conditionally loads the SDK and cleans up, a Support settings screen that initializes user context and custom attributes in Chatwoot and fetches addresses, and a Support SVG icon.
Settings registration & routing src/providers/options.tsx, src/screens/Settings/Index.tsx	Registers the Support option in settings options and renders the Support screen when selected.
UI spacing tweaks src/components/Menu.tsx, src/components/Select.tsx, src/screens/Settings/General.tsx	Increases vertical padding in menu/select/row option elements from 0.5rem to 0.8rem (and Menu adjusted accordingly) to enlarge clickable areas.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant SettingsUI
    participant SupportScreen
    participant ChatwootWidget
    participant ChatwootLib
    participant Browser as "window.chatwootSDK"

    User->>SettingsUI: open Settings → Support
    SettingsUI->>SupportScreen: render Support
    SupportScreen->>ChatwootWidget: mount
    ChatwootWidget->>ChatwootLib: getChatwootVars()
    ChatwootLib-->>ChatwootWidget: vars (websiteToken, baseUrl)
    ChatwootWidget->>ChatwootLib: injectAndRunChatwootScript(vars)
    ChatwootLib->>Browser: insert SDK script (packs/js/sdk.js)
    Note right of ChatwootLib: poll for window.chatwootSDK (5s timeout)
    Browser-->>ChatwootLib: SDK ready
    ChatwootLib->>Browser: run(vars)
    SupportScreen->>Browser: setUser(...) / setCustomAttributes(...)
    Browser-->>User: chat widget active

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Pay attention to:
  • src/lib/chatwoot.ts — script injection, polling/timeout behavior, global Window augmentation and typings.
  • src/screens/Settings/Support.tsx — async address fetching, context usage (AspContext, WalletContext, ConfigContext, LightningContext), mapping of attributes to Chatwoot.
  • src/components/ChatWoot.tsx — mount/unmount cleanup and script removal correctness.

Possibly related PRs

• add backups to Nostr #209 — Modifies the same SettingsOptions enum (this PR adds Support; that PR removes Nostr), indicating overlap in settings options changes.

Suggested reviewers

• louisinger

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	The PR title 'Chatwoot' is vague and lacks specificity about what was actually implemented. While it references the tool being integrated, it doesn't convey the meaningful change: adding a Support feature via Chatwoot.	Consider a more descriptive title such as 'Add Chatwoot-powered Support feature to Settings' or 'Integrate Chatwoot support chat in Settings menu' to better clarify the main change for developers reviewing history.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ 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 chatwoot

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ee5def7 and 8eea4d3.

📒 Files selected for processing (3)

• src/components/Menu.tsx (1 hunks)
• src/components/Select.tsx (1 hunks)
• src/screens/Settings/General.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/Menu.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

src/screens/Settings/General.tsx (1)

src/components/FlexRow.tsx (1)

• FlexRow (17-48)

src/components/Select.tsx (1)

src/components/FlexRow.tsx (1)

• FlexRow (17-48)

⏰ 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). (2)

• GitHub Check: test
• GitHub Check: Cloudflare Pages: wallet-bitcoin

🔇 Additional comments (2)

src/components/Select.tsx (1)

34-34: LGTM! Consistent UI spacing improvement.

The increased padding improves touch target size and visual spacing for option rows, aligning with similar adjustments across other settings UI components.

src/screens/Settings/General.tsx (1)

18-18: LGTM! Consistent UI spacing improvement.

The padding adjustment aligns with the Select component changes, providing improved touch targets and consistent vertical spacing across settings screens.

---

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: 3

🧹 Nitpick comments (6)

src/icons/Support.tsx (1)

1-10: Optional: add an explicit return type for the icon component

The icon implementation is fine. For stricter TypeScript setups and consistency with other icon components, you might want to make the return type explicit.

-export default function SupportIcon() {
+export default function SupportIcon(): JSX.Element {

src/components/ChatWoot.tsx (1)

1-23: Chatwoot widget wrapper is correct; consider small robustness improvements

The lifecycle around initializing and tearing down the Chatwoot SDK looks sound: you guard on env vars, set window.chatwootSettings, inject the script once, and remove it on unmount.

Two small improvements you might consider:

• Log or otherwise surface when websiteToken or baseUrl is missing so misconfigurations are easier to diagnose instead of silently doing nothing.
• Optionally make the cleanup selector a bit stricter (e.g., exact src === \${vars.baseUrl}/packs/js/sdk.js``) if there’s any chance of multiple Chatwoot instances using similar paths.

These are non-blocking; the current implementation is functionally fine.

src/screens/Settings/Support.tsx (1)

25-70: Align effect dependencies with used values and avoid window in deps

The overall flow—wait for chatwoot:ready, then configure the user and attributes once addresses and wallet.pubkey are available—is solid. A few hook-related tweaks would make this more robust and lint‑friendly:

• The effect at Line 48 uses addresses, supportChatLoaded, wallet.pubkey, wallet.network, swapProvider, aspInfo, and config, but only some of these are in the dependency array. This can lead to stale values if, for example, the network or ASP URL changes while the Support screen is open.
• Including window.$chatwoot directly in the dependency array is unconventional; it’s a global mutable value and doesn’t need to be there. The existing supportChatLoaded flag is already your “SDK ready” signal.

A minimal adjustment would be:

-  useEffect(() => {
+  useEffect(() => {
     if (!addresses || !supportChatLoaded || !window.$chatwoot || !wallet.pubkey) return
@@
-      explorer_url: wallet.network ? getWebExplorerURL(wallet.network as NetworkName) : 'not available',
+      explorer_url: wallet.network ? getWebExplorerURL(wallet.network as NetworkName) : 'not available',
     })
-  }, [addresses, supportChatLoaded, wallet.pubkey, window.$chatwoot])
+  }, [
+    addresses,
+    supportChatLoaded,
+    wallet.pubkey,
+    wallet.network,
+    swapProvider,
+    aspInfo,
+    config,
+  ])

and you can read window.$chatwoot directly inside the effect without listing it in deps.

Optionally, you might also:

• Clear addresses when svcWallet becomes undefined so you don’t accidentally reuse stale addresses.
• Add an abort/flag in the “fetch addresses” effect to avoid calling setAddresses after unmount.

src/lib/chatwoot.ts (3)

15-17: Replace any with proper type for better type safety.

Using any reduces type safety and defeats the purpose of TypeScript. Consider using the ChatwootSettings type instead.

Apply this diff:

-    chatwootSettings: {
-      [key: string]: any
-    }
+    chatwootSettings: ChatwootSettings

---

36-36: Consider adding 'dark' option to darkMode.

The darkMode type only includes 'auto' and 'light'. Most applications also support an explicit 'dark' option for users who prefer dark mode regardless of system settings.

Apply this diff:

-  darkMode: 'auto' | 'light'
+  darkMode: 'auto' | 'light' | 'dark'

---

49-51: Complete the JSDoc comment.

The JSDoc comment is empty. Add a description and document the parameter.

Apply this diff:

 /**
- *
- * @param settings
+ * Injects the Chatwoot SDK script into the page and initializes it with the provided configuration.
+ * @param vars - Chatwoot configuration containing websiteToken and baseUrl
  */

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8bb383f and be2deee.

📒 Files selected for processing (8)

• README.md (1 hunks)
• src/components/ChatWoot.tsx (1 hunks)
• src/icons/Support.tsx (1 hunks)
• src/lib/chatwoot.ts (1 hunks)
• src/lib/types.ts (1 hunks)
• src/providers/options.tsx (2 hunks)
• src/screens/Settings/Index.tsx (2 hunks)
• src/screens/Settings/Support.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (4)

src/components/ChatWoot.tsx (1)

src/lib/chatwoot.ts (3)

• getChatwootVars (26-31)
• getChatwootSettings (40-47)
• injectAndRunChatwootScript (53-72)

src/screens/Settings/Support.tsx (13)

src/providers/asp.tsx (1)

• AspContext (15-20)

src/providers/config.tsx (1)

• ConfigContext (32-41)

src/providers/lightning.tsx (1)

• LightningContext (24-30)

src/providers/wallet.tsx (1)

• WalletContext (42-56)

src/lib/types.ts (1)

• Addresses (3-6)

src/lib/asp.ts (1)

• getReceivingAddresses (144-150)

src/lib/explorers.ts (1)

• getWebExplorerURL (38-40)

src/components/FlexCol.tsx (1)

• FlexCol (15-40)

src/components/Text.tsx (2)

• Text (25-79)
• TextSecondary (91-97)

src/components/Content.tsx (1)

• Content (9-16)

src/components/Padded.tsx (1)

• Padded (7-14)

src/components/ButtonsOnBottom.tsx (1)

• ButtonsOnBottom (10-26)

src/components/Button.tsx (1)

• Button (21-64)

src/providers/options.tsx (1)

src/icons/Support.tsx (1)

• SupportIcon (1-10)

src/screens/Settings/Index.tsx (1)

src/screens/Settings/Support.tsx (1)

• Support (19-114)

⏰ 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). (1)

• GitHub Check: test

🔇 Additional comments (9)

src/screens/Settings/Index.tsx (1)

10-38: Support settings routing is wired correctly

Importing Support and adding the SettingsOptions.Support branch keeps the settings routing consistent with existing options. No issues from a control-flow or type perspective.

README.md (1)

25-26: Chatwoot env var documentation looks consistent

The new VITE_CHATWOOT_WEBSITE_TOKEN and VITE_CHATWOOT_BASE_URL entries match the code-level usage and follow the existing table conventions. No changes requested.

src/lib/types.ts (1)

45-63: SettingsOptions.Support enum extension is sound

Adding Support = 'support' cleanly extends the settings options and matches its usage in the options provider and settings router. No structural or typing concerns here.

src/providers/options.tsx (1)

10-77: Support option integration into settings options looks consistent

Importing SupportIcon and adding the SettingsOptions.Support entry in the General section fits cleanly into the existing options and allOptions patterns. goBack behavior for this option will correctly route back to the menu via the General branch.

src/screens/Settings/Support.tsx (2)

76-111: Support screen UX and widget placement look coherent

Defining the small Section helper, stacking the explanatory sections, embedding <ChatwootWidget /> in the content, and using ButtonsOnBottom with an “Open Support Chat” button create a clear and focused support experience. The separation between widget bootstrap (via ChatwootWidget) and user-triggered open (handleOpenChat) is clean.

---

55-69: Data sharing with Chatwoot is intentional and documented—no code changes required

Verification confirms the Chatwoot integration is designed and documented:

• Git history shows this feature was deliberately added ("add chatwoot support", commit be2deee)
• README documents Chatwoot env variables (VITE_CHATWOOT_WEBSITE_TOKEN, VITE_CHATWOOT_BASE_URL)
• All sent values are safe: wallet.pubkey is a public key (not private), network names, and infrastructure URLs without tokens
• VITE_* environment variables are build-time public constants, not secrets
• No private keys, seeds, or authentication credentials are exposed

The attributes you're sending are appropriate for support context. The data-sharing boundary you identified is valid and intentional.

src/lib/chatwoot.ts (3)

1-6: LGTM! Well-structured interface.

The ChatwootSDK interface provides clear type definitions for the Chatwoot SDK methods.

---

21-24: LGTM!

Clean interface definition for Chatwoot configuration variables.

---

40-47: LGTM!

The function returns sensible default values for Chatwoot settings.

[cloudflare-workers-and-pages]

Deploying wallet-signet with    Cloudflare Pages

Latest commit:	dae168a
Status:	✅  Deploy successful!
Preview URL:	https://81675709.wallet-23u.pages.dev
Branch Preview URL:	https://chatwoot.wallet-23u.pages.dev

View logs