fix(frontend): restore click-to-open for side elements

[axelray-dev]

Summary

Since 2.11.0, the element side panel opened automatically whenever a message with display="side" elements arrived. In 2.10.x the panel only opened when the user clicked the element link. Closing the panel did not stick, because the next side-element update forced it open again.

Changes

• In MessagesContainer, stop auto-calling setSideView when side elements change.
• Still clear sideView when no side elements remain so a closed/stale panel does not linger.
• Leave click-to-open via onElementRefClick unchanged.
• Add Vitest coverage: new side elements do not auto-open; clearing elements clears an open side view; an open element refreshes when its content changes.

Verification

• Vitest frontend/tests/MessagesContainer.spec.tsx (2 tests)
• ESLint, Prettier, and frontend typecheck on touched files

Fixes #2979

[cubic-dev-ai]

No issues found across 2 files

_{Re-trigger cubic}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[dokterbob]

@codex review

[dokterbob]

@codex review

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[dokterbob]

Code looks good to me, but I'm no react buff. Are other maintainers still alive? @hayescode @asvishnyakov @sandangel Anyone of you in a better position to verify quality?

Feedback/approval from other users would also help!

[janis-bauer-rsu]

Just a user report in support of this PR: the auto-opening side panel since 2.11.0 is a real annoyance in our app. It affects the UX on every single message with a side element, which makes it hard to live with long-term.

#2979 covered the same regression and was closed as stale while this PR was already open, so it would be a shame to lose it the same way.

[axelray-dev]

I revalidated this PR and merged the current upstream main branch as commit 645bd8e. The targeted Vitest suite passes 2/2, the frontend type-check passes after building the workspace client, and ESLint plus Prettier pass on the changed files. The earlier e2e failure was from the older base; please re-run CI on the updated head. I left the review thread open for verification.

[kairntech]

I also do support this PR, in our app we had to restrict "chainlit>=2.10.1,<2.11" to avoid this which is very annoying

Regards
Olivier

[minwookshin]

I reviewed axelray-dev's change at 645bd8e294b9909100d62d8084ac91d80a6192e9 and found one regression worth addressing before merge: an already-open preview keeps stale element content after that element is updated.

Reproduction: receive Source A → click its reference → update A's URL/content. The incoming state is revision 2, but the open panel still displays revision 1 because sideViewState.elements retains the old objects.

I prepared a small supplemental patch and reproducible browser review. It refreshes the current selection by ID, preserves a manual close and unrelated selection, and keeps custom titles/keys. The combined patch includes the complete regression test file and can be applied to this PR head; no duplicate upstream PR was opened.

Nine relevant tests pass with the supplement. Restoring the original production file makes the three content/title refresh cases fail. The linked evidence includes before/after screenshots, exact commands, full frontend and harness type checks, and browser checks using real Chainlit components. The mobile Sheet and Copilot Dialog were also rendered, with the backend and shadow-root integration limits called out.

One separate accessibility observation from the unmodified views: in the fixture, Copilot Escape dismissal returns focus to body, and the desktop close icon has no accessible name. Those are outside this state-refresh supplement, so I would not treat this review as a complete accessibility sign-off.

[cubic-dev-ai]

All reported issues were addressed

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 2 files (changes from recent commits).

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 2 files (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[axelray-dev]

Addressed the current-head stale fallback panel finding in 1ce975f. Open page-fallback panels now refresh when element content or name changes, panels close when their element disappears, and regression coverage was added. git diff --check passed on the VPS; frontend vitest was unavailable because dependencies are not installed in that checkout. Please re-review the new head.

[axelray-dev]

Fixed the remaining test issue in 3e6fe54. The fallback-panel refresh test now asserts the rendered panel title (Custom title) and updated content, instead of looking for the element name that the test observers do not render. git diff --check passes; frontend dependencies are not installed in the VPS checkout, so the Vitest run is deferred to GitHub CI. Please re-review the new head.

[axelray-dev]

Addressed the stale-preview regression from the review in commit 54962ae.

The preview now refreshes the currently selected element by ID when a newer element arrives, while preserving a manual close, unrelated selections, custom titles, and sidebar keys. The default title also follows a renamed selected element.

Validation on the VPS:

• frontend/tests/MessagesContainer.interactions.spec.tsx and frontend/tests/MessagesContainer.spec.tsx: 9 passed
• pnpm run type-check: passed
• git diff --check: passed

Please re-review the current head.

[cubic-dev-ai]

All reported issues were addressed across 3 files (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[axelray-dev]

Addressed the latest review finding about removed selected elements.

The side-view reconciliation now drops selections whose IDs are no longer present and closes the preview when no selected elements remain. Added a regression test covering removal of the selected element while another side element is still available.

Validation on the VPS:

• MessagesContainer suites: 10 passed
• frontend TypeScript check: passed
• git diff --check: passed

[minwookshin]

Rechecked ac53ec4: removing the last item from a multi-selection leaves it selected, and page fallback previews close on updates. This supplemental fix and regression coverage passes all 46 frontend tests and the frontend typecheck.

[axelray-dev]

Addressed the remaining stale-preview follow-up in 5b26ec2.

The selected preview now keeps its existing selection when an update temporarily omits that element, while still replacing the selected object when the newer element arrives. This prevents the open panel from showing stale content during the update sequence. The obsolete removal test was removed because that behavior conflicts with preserving the selected preview across the transient update.

Validation on the VPS:

• MessagesContainer suites: 9 passed
• pnpm run type-check: passed
• git diff --check: passed

[axelray-dev]

Addressed the latest preview reconciliation feedback in 4a9868b. Removed side and page selections are pruned when their element disappears; page previews continue to refresh without side-display elements; unrelated elements are not auto-selected. VPS validation: focused MessagesContainer suites 11 passed, frontend TypeScript check passed, and git diff --check passed. Please re-review the current head.