mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Tyler Slaton
442d2150c3
## What does this PR do? Adds a `position?: \"left\" | \"right\"` prop to the v2 `CopilotSidebar` (and the underlying `CopilotSidebarView`), letting consumers anchor the sidebar to either side of the viewport. Defaults to `\"right\"` so existing usage is unchanged. ```tsx <CopilotSidebar position=\"left\" /> ``` ### What changes when `position` flips - **Anchor:** `cpk:right-0` ↔ `cpk:left-0` - **Border side:** `cpk:border-l` ↔ `cpk:border-r` - **Off-screen translate (closed state):** `cpk:translate-x-full` ↔ `cpk:-translate-x-full` - **Body push margin:** `document.body.style.marginInlineEnd` ↔ `marginInlineStart` (with the matching `transition` CSS property name) - **Aside element:** picks up a `data-position` attribute for styling/test hooks `position` is in the `useLayoutEffect` deps, so toggling it at runtime cleans up the prior side's body margin before applying the new one. ### Tests New `CopilotSidebarView.position.test.tsx` (7 cases) — default/right/left class assertions, off-screen translate direction, and verification that the wrapper forwards through to the view. All 32 sidebar-area tests pass; full react-core suite (1167 tests) green with no regressions. ### Storybook Added `RightPosition` and `LeftPosition` stories under `UI/CopilotSidebarView` for visual diffing. ## Related PRs and Issues - N/A ## Checklist - [x] I have read the [Contribution Guide](https://github.com/copilotkit/copilotkit/blob/master/CONTRIBUTING.md) - [ ] If the PR changes or adds functionality, I have updated the relevant documentation - [x] \"Allow edits by maintainers\" is checked 🤖 Generated with [Claude Code](https://claude.com/claude-code)