fix: preserve custom chat widget URL and icon on deselect (NES-1522) by jianwei1 · Pull Request #8940 · JesusFilm/core

jianwei1 · 2026-03-31T22:32:02Z

Summary

Bug: Custom chat widget loses URL and icon selection when unchecked and re-checked — dedicated platforms (Facebook, WhatsApp, Telegram) preserve their data but custom widgets do not
Root cause: Dynamic React key prop on custom ChatOption components changes when the button is deleted, causing React to unmount/remount and destroy local useState state
Fix: Use stable keys ("custom-0", "custom-1") to preserve the component instance, plus a render-time state reset to handle the shift case (2 custom buttons where the first is deleted)

Changes

File	Change
`Chat.tsx`	Changed dynamic keys to static keys on custom `ChatOption` slots
`ChatOption.tsx`	Added `trackedId` state + render-time sync guard to handle button identity changes
`ChatOption.spec.tsx`	Added 2 tests: state sync on button change + state preservation on deselect

Test plan

All 15 existing + new tests pass (Chat.spec.tsx + ChatOption.spec.tsx)
Scenario A: Select custom widget → set icon + URL → uncheck → re-check → URL and icon preserved
Scenario B: Select 2 custom widgets with different URLs/icons → uncheck first → second shifts correctly
Scenario C: Select 2 custom widgets → uncheck second → first unchanged
Scenario D: Deselect → re-select → refresh page → data persisted on server
Scenario E: Toggle dedicated platforms (Facebook/WhatsApp/Telegram) off and on → regression check

Post-Deploy Monitoring & Validation

No additional operational monitoring required: UI-only change scoped to the Chat Widget editor panel. No backend, API, or data model changes.

🤖 Generated with Claude Code

Summary by CodeRabbit

Bug Fixes
- Fixed an issue where custom chat options could lose their configured URL and icon when deselected and then reselected by stabilizing component identity and preserving local state.
Tests
- Added tests covering chat option state synchronization on reconfiguration and state preservation when options are deselected.
Documentation
- Added a plan describing the fix, verification scenarios, and test coverage.

Use stable React keys on custom ChatOption slots to prevent unmount/remount when the backing button is deleted. Add render-time state reset to sync local state when a different button shifts into the same slot. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

linear · 2026-03-31T22:32:06Z

NES-1522 Custom chat widget clears URL and icon selection when deselected

coderabbitai · 2026-03-31T22:32:27Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 17a9e4f1-6602-49b3-9602-3261e0fe5dd6

📥 Commits

Reviewing files that changed from the base of the PR and between ddec1d4 and f99ca7b.

📒 Files selected for processing (2)

apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/JourneyAppearance/Chat/ChatOption/ChatOption.spec.tsx
docs/plans/2026-03-31-001-fix-custom-chat-widget-clears-url-icon-on-deselect-plan.md

✅ Files skipped from review due to trivial changes (2)

apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/JourneyAppearance/Chat/ChatOption/ChatOption.spec.tsx
docs/plans/2026-03-31-001-fix-custom-chat-widget-clears-url-icon-on-deselect-plan.md

Walkthrough

Stabilizes React reconciliation for two custom chat slots by using static keys and adds per-instance identity tracking in ChatOption to sync state from a new chatButton ID while preserving local state when chatButton becomes undefined. Tests and a plan document were added.

Changes

Cohort / File(s)	Summary
React Key Stabilization `apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/JourneyAppearance/Chat/Chat.tsx`	Replaced dynamic keys derived from `customButtons[n]?.id` with static keys (`"custom-0"`, `"custom-1"`) for custom ChatOption slots to preserve component identity when underlying data is temporarily `undefined`.
State Synchronization Logic `apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/JourneyAppearance/Chat/ChatOption/ChatOption.tsx`	Added `trackedId` local state and logic to update `currentLink` and `currentPlatform` when `chatButton?.id` changes to a new ID; explicitly avoids resetting state when `chatButton` becomes `undefined` to retain user-entered values.
Test Coverage `apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/JourneyAppearance/Chat/ChatOption/ChatOption.spec.tsx`	Added tests verifying: (1) prop-driven state updates when `chatButton` changes identity, and (2) state preservation when `chatButton` is set to `undefined` after being active.
Documentation / Plan `docs/plans/2026-03-31-001-fix-custom-chat-widget-clears-url-icon-on-deselect-plan.md`	New plan describing the behavior changes, verification scenarios, and rationale for static keys and identity-based state sync.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main bug fix—preserving custom chat widget URL and icon on deselect—which aligns with the PR's primary objective and all code changes.

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

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch jianweichong/nes-1522-custom-chat-widget-clears-url-and-icon-selection-when

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

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

nx-cloud · 2026-03-31T22:33:24Z

View your CI Pipeline Execution ↗ for commit f99ca7b

Command	Status	Duration	Result
`nx run journeys-admin-e2e:e2e`	✅ Succeeded	29s	View ↗
`nx run-many --target=vercel-alias --projects=jo...`	✅ Succeeded	2s	View ↗
`nx run-many --target=upload-sourcemaps --projec...`	✅ Succeeded	9s	View ↗
`nx run-many --target=deploy --projects=journeys...`	✅ Succeeded	3m 15s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-31 22:46:43 UTC

github-actions · 2026-03-31T22:43:26Z

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys-admin	✅ Ready	journeys-admin preview	Wed Apr 1 11:43:25 NZDT 2026

jianwei1 self-assigned this Mar 31, 2026

jianwei1 requested a review from csiyang March 31, 2026 22:32

github-actions bot requested a deployment to Preview - journeys-admin March 31, 2026 22:33 Pending

fix: lint issues

f99ca7b

github-actions bot temporarily deployed to Preview - journeys-admin March 31, 2026 22:38 Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: preserve custom chat widget URL and icon on deselect (NES-1522)#8940

fix: preserve custom chat widget URL and icon on deselect (NES-1522)#8940
jianwei1 wants to merge 2 commits intomainfrom
jianweichong/nes-1522-custom-chat-widget-clears-url-and-icon-selection-when

jianwei1 commented Mar 31, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

linear bot commented Mar 31, 2026

Uh oh!

coderabbitai bot commented Mar 31, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

nx-cloud bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

jianwei1 commented Mar 31, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Post-Deploy Monitoring & Validation

Summary by CodeRabbit

Uh oh!

linear bot commented Mar 31, 2026

Uh oh!

coderabbitai bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

nx-cloud bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jianwei1 commented Mar 31, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 31, 2026 •

edited

Loading

nx-cloud bot commented Mar 31, 2026 •

edited

Loading