feat: Add copilot sidebar mode with drag-to-resize by EyalAmitay · Pull Request #2785 · Chainlit/chainlit

EyalAmitay · 2026-02-18T11:38:05Z

Summary

Adds a new sidebar display mode for the copilot widget. Instead of the default floating popover, the copilot can now render as a full-height side panel anchored to the right edge of the viewport, pushing the host page content to make room. Users can drag the left edge to resize and switch between sidebar and floating modes via a dropdown in the header.

Changes

Sidebar display mode: Right-side sidebar panel as an alternative to the floating popover
Drag-to-resize: Left-edge drag handle (300px min, 50% viewport max) with smooth transitions
Display mode toggle: Header dropdown to switch between "Floating" and "Sidebar"; close button in sidebar mode
Persistence: Sidebar width and display mode saved to localStorage across sessions
Config-over-localStorage precedence: Explicit displayMode passed via mountChainlitWidget() takes priority over a stale localStorage value; localStorage is only used as a fallback when displayMode is omitted
resolveDisplayMode helper: Extracted display mode resolution logic into a standalone pure function (libs/copilot/src/resolveDisplayMode.ts)
useSidebarResize hook: Encapsulates resize logic, body margin management, and drag lifecycle (including window.blur handling for edge cases)
DisplayMode type: Consolidated into types.ts, replacing inline string unions

Backward Compatibility

Fully backward compatible — no breaking changes to any existing API or behavior.

The displayMode option in IWidgetConfig is additive and optional; defaults to 'floating' when not specified, preserving existing behavior
Existing mountChainlitWidget() calls without displayMode work unchanged
unmountChainlitWidget() continues to work as before
Two new localStorage keys are introduced (chainlit-copilot-displayMode, chainlit-copilot-sidebarWidth) — only read/written when the feature is used, no effect on existing deployments

Configuration

To default to the sidebar mode:

window.mountChainlitWidget({
  chainlitServer: 'http://localhost:8000',
  displayMode: 'sidebar',
});

Test plan

Screen.Recording.2026-02-18.at.5.54.15.PM.mov

Add sidebar display mode as an alternative to the floating popover. The sidebar opens as a fixed panel on the right edge with a drag handle on the left edge for Notion-style resize (300px min, 50% viewport max). Width persists to localStorage. Includes display mode toggle in header and E2E tests for sidebar open/close/resize/mode-switch.

- Fix stale originalMargin capture by splitting into lifecycle + sync effects so the true original margin is captured once on open via ref, not re-captured on every width change - Fix userSelect not restored on unmount when drag is in progress - Fix CSS transition lag during drag by disabling transition on mousedown and re-enabling on mouseup - Add window.blur handler to cancel stuck drags when mouse released outside browser - Extract resize logic into useSidebarResize hook, consolidate DisplayMode type - Deduplicate chatContent and renderButtonIcon in widget.tsx - Add E2E tests for unmount cleanup and localStorage persistence across remounts

Replace drag-based resize test with localStorage pre-set approach. The Cypress trigger-based drag simulation was unreliable in CI headless mode, causing the test to fail with 'expected 400 to be above 400'.

- Add copilot.displayMode translation keys to all 20 language files - Use useTranslation in Header for Floating/Sidebar dropdown labels - Remove unnecessary code comments across modified files

- Remove backward-compat regression: stop clearing body margin/transition in unmountChainlitWidget (React cleanup handles it) - Guard localStorage write to only persist sidebar width in sidebar mode - Gate mousemove/mouseup/blur listeners on sidebar mode and open state - Remove hidden test-only button from sidebar production code - Remove renderButtonIcon and inline icon in sidebar closed-state button - Revert unrelated formatting changes in test file - Remove unnecessary non-null assertions in tests

…nts" This reverts commit c90790d.

Disable Radix UI's modal scroll-lock on the display mode DropdownMenu, which was adding overflow:hidden and padding-right to document.body.

cubic-dev-ai

No issues found across 6 files

github-actions · 2026-03-05T02:18:53Z

This PR is stale because it has been open for 14 days with no activity.

EyalAmitay · 2026-03-05T08:12:42Z

@hayescode

EyalAmitay · 2026-03-29T06:40:46Z

@asvishnyakov

hayescode

Thanks @EyalAmitay. I like the feature, but I can't approve it yet because the persisted display mode currently overrides an explicit displayMode passed by the host page. Please flip that precedence and add a focused regression test for config-vs-localStorage precedence, then this should be in good shape.

hayescode · 2026-04-01T16:48:15Z

  const [isOpen, setIsOpen] = useState(config?.opened || false);
+  const [displayMode, setDisplayMode] = useState<DisplayMode>(
+    () =>
+      (localStorage.getItem(LS_DISPLAY_MODE_KEY) as DisplayMode) ||


This initialization order lets a previously saved localStorage value override an explicit mountChainlitWidget({ displayMode }) setting. That means an embed can ask for sidebar and still come up floating because of an older user preference. Can we flip this so the explicit config wins, and only fall back to localStorage when displayMode is omitted?

Fixed - flipped the precedence so config.displayMode wins over localStorage. Also extracted the resolution logic into resolveDisplayMode() and added a focused regression test covering all three cases (config wins over localStorage, localStorage fallback when config omits displayMode, default to floating).

Flip initialization order so an explicit displayMode passed via mountChainlitWidget() wins over a stale localStorage value. Add focused regression test for config-vs-localStorage precedence.

EyalAmitay · 2026-04-03T11:23:27Z

@hayescode Thanks for the review! Both items addressed:

Precedence flipped -config.displayMode now takes priority over localStorage. localStorage is only used as a fallback when no explicit config is passed.
Regression test added - frontend/tests/displayModePrecedence.spec.ts covers config-wins-over-localStorage, localStorage-fallback, and default-to-floating cases.

Extracted the resolution logic into a standalone resolveDisplayMode() function (libs/copilot/src/resolveDisplayMode.ts) to keep the test focused and free of component dependencies.

Cfh-GitHub · 2026-04-20T00:44:56Z

      >
        <div id="chainlit-copilot-chat" className="flex flex-col h-full w-full">
-          {error ? (
-            <Alert variant="error">{error}</Alert>


If the widget encountered an error (like a network failure), the original PR logic used error ? - :
..., meaning it entirely skipped rendering the component when an error was present.

In the old "floating" popover mode, this is somewhat okay because the user can click outside the popover to close it. However, this new "sidebar" mode renders as a fixed, full-height element with no click-outside handler. Without the
component (which contains the close button), a user who encountered an error while in sidebar mode would be left permanently stuck with an uncloseable error overlay covering the side of their screen.

So, it may be a good idea to remove this ---error ? (alert variant=""error" ... --- line.

EyalAmitay and others added 9 commits February 18, 2026 13:37

fix: simplify sidebar persistence test to avoid flaky drag simulation

9ead862

Replace drag-based resize test with localStorage pre-set approach. The Cypress trigger-based drag simulation was unreliable in CI headless mode, causing the test to fail with 'expected 400 to be above 400'.

Merge branch 'main' into feat/copilot-sidebar-with-resize

ccb5dd1

feat: add i18n for sidebar display mode and remove code comments

c90790d

- Add copilot.displayMode translation keys to all 20 language files - Use useTranslation in Header for Floating/Sidebar dropdown labels - Remove unnecessary code comments across modified files

Revert "feat: add i18n for sidebar display mode and remove code comme…

9d70964

…nts" This reverts commit c90790d.

fix: prevent host page content shift when opening display mode dropdown

9191d11

Disable Radix UI's modal scroll-lock on the display mode DropdownMenu, which was adding overflow:hidden and padding-right to document.body.

Removed redaundant comments

25a1c60

EyalAmitay marked this pull request as ready for review February 18, 2026 15:33

EyalAmitay requested review from asvishnyakov, hayescode and sandangel as code owners February 18, 2026 15:33

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. frontend Pertains to the frontend. labels Feb 18, 2026

cubic-dev-ai bot reviewed Feb 18, 2026

View reviewed changes

github-actions bot added the stale Issue has not had recent activity or appears to be solved. Stale issues will be automatically closed label Mar 5, 2026

Merge branch 'main' into feat/copilot-sidebar-with-resize

f2eebc6

github-actions bot removed the stale Issue has not had recent activity or appears to be solved. Stale issues will be automatically closed label Mar 6, 2026

Merge branch 'main' into feat/copilot-sidebar-with-resize

23a690d

hayescode requested changes Apr 1, 2026

View reviewed changes

fix: config displayMode takes precedence over localStorage

9401658

Flip initialization order so an explicit displayMode passed via mountChainlitWidget() wins over a stale localStorage value. Add focused regression test for config-vs-localStorage precedence.

Merge branch 'main' into feat/copilot-sidebar-with-resize

5ae64a3

EyalAmitay requested a review from hayescode April 3, 2026 11:47

hayescode approved these changes Apr 3, 2026

View reviewed changes

hayescode added this pull request to the merge queue Apr 3, 2026

Merged via the queue into Chainlit:main with commit 08dc94e Apr 3, 2026
10 checks passed

Cfh-GitHub reviewed Apr 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add copilot sidebar mode with drag-to-resize#2785

feat: Add copilot sidebar mode with drag-to-resize#2785
hayescode merged 13 commits intoChainlit:mainfrom
EyalAmitay:feat/copilot-sidebar-with-resize

EyalAmitay commented Feb 18, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

github-actions bot commented Mar 5, 2026

Uh oh!

EyalAmitay commented Mar 5, 2026

Uh oh!

EyalAmitay commented Mar 29, 2026

Uh oh!

hayescode left a comment

Uh oh!

hayescode Apr 1, 2026

Uh oh!

EyalAmitay Apr 3, 2026 •

edited

Loading

Uh oh!

EyalAmitay commented Apr 3, 2026 •

edited

Loading

Uh oh!

Uh oh!

Cfh-GitHub Apr 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

EyalAmitay commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Backward Compatibility

Configuration

Test plan

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 5, 2026

Uh oh!

EyalAmitay commented Mar 5, 2026

Uh oh!

EyalAmitay commented Mar 29, 2026

Uh oh!

hayescode left a comment

Choose a reason for hiding this comment

Uh oh!

hayescode Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

EyalAmitay Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EyalAmitay commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Cfh-GitHub Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

EyalAmitay commented Feb 18, 2026 •

edited

Loading

EyalAmitay Apr 3, 2026 •

edited

Loading

EyalAmitay commented Apr 3, 2026 •

edited

Loading