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) <noreply@anthropic.com>

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

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

View your CI Pipeline Execution ↗ for commit 2bdb378

Command	Status	Duration	Result
`nx run journeys-admin-e2e:e2e`	❌ Failed	6m 17s	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	2m 23s	View ↗

☁️ Nx Cloud last updated this comment at 2026-04-10 04:17:44 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	Fri Apr 10 16:08:47 NZST 2026

…ars-url-and-icon-selection-when

blacksmith-sh · 2026-04-10T04:18:00Z

Found 2 test failures on Blacksmith runners:

Failures

Test	View Logs
`src/smoke/create-journey.spec.ts/admin can create a journey`	View Logs
`src/smoke/login.spec.ts/admin can log in`	View Logs

…8940) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

Merge branch 'main' into jianweichong/nes-1522-custom-chat-widget-cle…

67968dc

…ars-url-and-icon-selection-when

github-actions bot temporarily deployed to Preview - journeys-admin April 6, 2026 21:34 Inactive

Merge branch 'main' into jianweichong/nes-1522-custom-chat-widget-cle…

5ac8f74

…ars-url-and-icon-selection-when

github-actions bot temporarily deployed to Preview - journeys-admin April 7, 2026 03:30 Inactive

Merge branch 'main' into jianweichong/nes-1522-custom-chat-widget-cle…

67a86af

…ars-url-and-icon-selection-when

github-actions bot temporarily deployed to Preview - journeys-admin April 8, 2026 20:59 Inactive

csiyang approved these changes Apr 8, 2026

View reviewed changes

Merge branch 'main' into jianweichong/nes-1522-custom-chat-widget-cle…

2e100c1

…ars-url-and-icon-selection-when

github-actions bot temporarily deployed to Preview - journeys-admin April 10, 2026 00:33 Inactive

Merge branch 'main' into jianweichong/nes-1522-custom-chat-widget-cle…

2bdb378

…ars-url-and-icon-selection-when

jianwei1 enabled auto-merge April 10, 2026 04:03

github-actions bot temporarily deployed to Preview - journeys-admin April 10, 2026 04:05 Inactive

jianwei1 added this pull request to the merge queue Apr 10, 2026

Merged via the queue into main with commit 84cb0f4 Apr 10, 2026
19 of 20 checks passed

jianwei1 deleted the jianweichong/nes-1522-custom-chat-widget-clears-url-and-icon-selection-when branch April 10, 2026 04:12

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 merged 7 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 •

edited

Loading

Uh oh!

Uh oh!

blacksmith-sh bot commented Apr 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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!

🤖 Nx Cloud AI Fix Eligible

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

blacksmith-sh bot commented Apr 10, 2026

Failures

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

github-actions bot commented Mar 31, 2026 •

edited

Loading