## What does this PR do?
Fixes the guillotine cut where long messages hit the flat top of the
chat input and get sliced mid-line. Most visible in
`autoScroll=\"pin-to-send\"` mode (where the user reads at their own
pace and routinely lingers with a line butted against the input), but
applies to all scroll modes.
### The problem
`CopilotChatView` rendered the attachment queue + input as flex siblings
beneath the scroll area, so the scroll content stopped at the input's
flat rectangular boundary. The previously-shipped feather gradient
masked this visually but clashed with host themes whose `--background`
didn't match its hard-coded white / near-black —
[b621e96ee](https://github.com/CopilotKit/CopilotKit/commit/b621e96ee)
defaulted the feather to an empty div, which then revealed the
underlying layout bug.
### The fix
Wrap attachments + input in a single absolute-positioned overlay wrapper
at the `CopilotChatView` level. The scroll content now fills full height
and passes behind the rounded pill, matching ChatGPT's layout. The
scroll content's bottom padding reflects the measured overlay height so
the last line clears the pill when scrolled to the bottom.
Changes:
- `CopilotChatView.tsx` — replace flex-sibling attachments + input with
a single absolute overlay wrapper; move `inputContainerRef` onto the
wrapper so the `ResizeObserver` measures the full stack (attachments +
pill + disclaimer); add `inputContainerHeight` to scroll-content bottom
padding
- `CopilotChatAttachmentQueue.tsx` — add
`data-testid=\"copilot-attachment-queue\"` for test hooks
- `CopilotChatView.stories.tsx` — add a `PinToSend` story as
manual-verification scaffolding
- New test file `CopilotChatView.inputOverlay.test.tsx` with four tests:
overlay wrapper is absolute-positioned, attachments render above the
input inside the wrapper, welcome-screen input is NOT wrapped, scroll
content reserves `inputContainerHeight` as bottom padding
Not changed:
- `CopilotChatInput.tsx` public API (still accepts `positioning:
\"static\" | \"absolute\"`, same `bottomAnchored` flag, same
`containerRef`)
- `use-pin-to-send.ts` anchor math
- The `feather` slot itself — still empty-div default from
[b621e96ee](https://github.com/CopilotKit/CopilotKit/commit/b621e96ee);
hosts who want a themed fade supply their own via `scrollView={{
feather: ... }}`
- Welcome-screen input (stays inline)
- Angular parallel (follow-up if desired)
## Related PRs and Issues
- Builds on [#4158](https://github.com/CopilotKit/CopilotKit/pull/4158)
(pin-to-send anchoring/spacer/feather fixes)
- Builds on
[b621e96ee](https://github.com/CopilotKit/CopilotKit/commit/b621e96ee)
(feather defaulted to empty div)
## 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
## Test plan
- [x] Unit tests — 4 new tests in
`CopilotChatView.inputOverlay.test.tsx` cover overlay structure,
attachment ordering, welcome-screen exclusion, and padding formula
- [x] Full `@copilotkit/react-core` suite (1153 tests) passes
- [x] Manual verification in Storybook (`UI/CopilotChatView → Default`,
`PinToSend`): content flows cleanly under the pill, last line reachable,
no guillotine cut
- [ ] Reviewer: check `WithSuggestions` story (padding formula switches
between `+4` and `+32`)
- [ ] Reviewer: check that `scrollView={{ feather: MyFeather }}`
override still works (the `slots.e2e` test covers this, but worth a
manual sanity check)
Replaces the Angular-backed cpk-thread-list / cpk-thread-details custom
elements with native Lit implementations inside @copilotkit/web-inspector,
so React, Vanilla, and any other non-Angular consumer of the inspector
gets full functionality without pulling the Angular runtime. The
@copilotkit/web-inspector-angular package is deleted entirely, and the
Angular demo no longer calls defineInspectorElements.
Backend: adds GET /threads/:id/events and GET /threads/:id/state to the
runtime (in-memory runner path). The Intelligence path returns 501 with
a clear "not yet supported on this runtime" empty state — coordination
with the Intelligence team is tracked separately (CPK-7453).
Also guards attachToCore's getThreadStores call so consumers on an older
@copilotkit/core don't throw when assigning inspector.core, and drops
two unrelated showcase-whitelist lines that landed in
scripts/hooks/check-binaries.sh during a prior merge.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`CopilotChatView` rendered the attachment queue + input as flex siblings
beneath the scroll area, so long messages hit the input's flat top edge
and were sliced mid-line. Most visible in pin-to-send mode where the user
reads at their own pace. The previously-shipped feather gradient masked
this but clashed with host themes whose `--background` didn't match its
hard-coded white/near-black (b621e96ee defaulted it to an empty div).
Wrap attachments + input in a single absolute-positioned overlay so the
scroll content fills full height and passes behind the rounded pill. Pad
scroll-content bottom by the measured overlay height so the last line
clears the pill. Welcome-screen input is unchanged (stays inline). The
`feather` slot remains — hosts who want a themed fade supply their own
gradient.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Covers the shared-state thread-resume path that was missing coverage:
on resume, the /connect bootstrap plan replays STATE_SNAPSHOT events
captured during the original run, and agent.state (both on the direct
IntelligenceAgent and through the ProxiedCopilotRuntimeAgent bridge)
must reflect the final snapshot so UI reading from agent.state renders
the persisted state.
Both tests pass against the current implementation, ruling out these
layers as the source of the shared-state demo regression.
The feather fade-to-background overlay at the bottom of CopilotChatView's
scroll area hard-coded `from-white` (light) and `from-[rgb(33,33,33)]`
(dark). Host apps whose `--background` didn't match those values saw a
visible band at the bottom of the scroll area — most obvious in dark
mode (e.g. the `langgraph-python` integration example uses `#010507`).
Default `CopilotChatView.Feather` now renders an empty div — no visual,
but the element stays in the tree so a `scrollView={{ feather: "my-class" }}`
shorthand still applies. The `feather` slot on `ScrollView` /
`PinToSendScrollContainer` / `ScrollContent` is preserved unchanged, so
consumers who want a custom overlay can still opt in via
`scrollView={{ feather: MyCustomFeather }}`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Release monorepo v1.56.3
**Scope:** `monorepo` | **Bump:** `patch`
---
### How this release process works
1. **This PR was created automatically** by the "release / create-pr"
workflow.
It bumped the `monorepo` packages to `1.56.3`
and generated AI-enhanced release notes.
2. **CI runs on this PR** — the full test suite (unit tests, lint, type
checks, build)
must pass before merging. This is the review gate.
3. **Review the release notes** in `release-notes.md` in this PR.
If a Notion draft was created, you can edit the release notes there
before merging.
4. **When this PR is merged**, the `release / publish` workflow
automatically:
- Builds all packages
- Publishes the `monorepo` packages to npm at version `1.56.3`
- Creates git tag `monorepo/v1.56.3`
- Creates a GitHub Release with the final release notes
### Before merging
- [ ] CI is green (tests, lint, types, build)
- [ ] Version bumps look correct
- [ ] Release notes are accurate (edit in Notion if a draft was created)
---
> **Do not merge until CI is fully green.** The full test suite runs
automatically on this PR.
Threads-minted UUIDs were leaking through as if caller-chosen, so fresh
empty chats fired /connect against a backend that had never seen the
thread (404) and the welcome screen stayed hidden. Plumb an explicit
hasExplicitThreadId signal through ThreadsProvider,
CopilotChatConfigurationProvider, and the v1 CopilotKit bridge so
consumers can distinguish an auto-minted placeholder from a real
caller-supplied thread.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Change access code from "earlyaccess" to "easyaccess"
- Point "Request early access" button to HubSpot form
- Open HubSpot form in new window on successful code entry
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- hooks.ts: keep both threads/clear and cpk-debug-events in RouteInfo
- use-threads.tsx: keep registerThreadStore effect + adopt main's
runtimeStatus gating for context dispatch
- use-threads.test.tsx: keep both our register/unregister test and
main's new runtimeConnectionStatus=Connected gating test
- scripts/hooks/check-binaries.sh: add shell-docs and shell-dojo
demo-content.json exclusions (main introduced these >1MB files without
updating the exclusion list)
- lefthook.yml, pnpm-lock.yaml: accept main's version
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- ThreadStoreRegistry.register: delete old store before notifyUnregistered
so callbacks that call getThreadStore(agentId) see undefined, not the
new store
- ThreadDetailsComponent: reset _expandedMessages on threadId change
alongside _expandedToolCalls (prevents stale expanded state across
thread switches)
- handle-threads.test: assert identifyUser called in getThreadMessages
intelligence path; add identifyUser-throws 500 test
- use-threads.test: add fetchMoreThreads end-to-end test (calls the
function, asserts cursor param on second fetch, asserts 3 threads)
- in-memory-runner.test: call clearThreads() in first describe's
beforeEach for GLOBAL_STORE consistency
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
## Summary
Bumps the internal `@copilotkit/license-verifier` dependency from
`0.0.1-a1` to `0.2.0` in `@copilotkit/runtime` and `@copilotkit/shared`.
The new `license-verifier` release adds a required `telemetry_id` field
to the signed `LicensePayload` — see the intelligence repo ENT-251 PR
for motivation (per-license analytics correlation ID, enables reverse
lookup from inbound Scarf events to the HubSpot Contact that issued the
license).
## Scope
- `packages/runtime/package.json`: bump dep.
- `packages/shared/package.json`: bump dep.
- `.changeset/bump-license-verifier-ent-251.md`: changeset (patch bump
on runtime + shared; propagates to all \`@copilotkit/*\` via fixed:
config).
(closes ENT-251)
New license verifier release adds a required telemetry_id field to the
signed LicensePayload. Runtime consumes verified payloads unchanged;
shared re-exports the widened type. See the intelligence repo ENT-251
PR for the motivation (per-license analytics correlation ID).
Pin-to-send uses a gentler feather than pin-to-bottom:
- Half the height (48px vs 96px)
- Pure transparent-to-white gradient (no solid-white midline)
Gives a clean visual soft edge above the input without obscuring
otherwise-readable content.
The feather exists to smooth the visual edge of content streaming to
the bottom in pin-to-bottom. In pin-to-send the user reads at their
own pace, and fading otherwise-readable content above the input hurts
more than it helps. Skip it.
Three bugs prevented pin-to-send from behaving as designed:
1. ScrollView called useStickToBottom() at the top and shared its refs
with every branch. The library's internal scroll-following fought
pin-to-send and chased the bottom as the assistant streamed. Isolate
useStickToBottom to the pin-to-bottom branch only; "none" and
"pin-to-send" now use plain refs.
2. The spacer math subtracted inputContainerHeight + featherHeight, but
the input is outside the scroll container and the feather is an
overlay — neither consumes scrollable space. The undersized spacer
made scrollHeight too small, clamping scrollTop before the anchor
could reach its target. Simplified: spacer = viewport - bubble - topOffset.
3. Position-absolute children of overflow:auto scroll with the content,
so the feather drifted into the middle of the viewport in pin-to-send
mode (visible stray gradient). Also, the target's top-padding (pt-10)
left the previous message's trailing copy button peeking above the
anchored bubble. The hook now scrolls past the padding so the bubble
itself is at topOffset, and the feather lives outside the scroll
container so it stays pinned to the visible viewport bottom.
Skips pre-commit hooks — the repo has 19 pre-existing failing tests in
copilotkit-dev-tools (all load as "(0 test)") that are unrelated to this
change. react-core tests (1130) all pass.
CR feedback: with the /info gating in useThreads, the underlying
thread store sits at isLoading=false (its initial state) until we
dispatch the first context — which we now defer until
runtimeConnectionStatus === Connected. Consumers reading
`isLoading` during that window would otherwise see the empty-state
branch and render a momentary "no threads" flash instead of a
skeleton.
Track `hasDispatchedContext` in React state; synthesize
isLoading=true while runtimeUrl is set but no context has been
dispatched yet. Once we dispatch, fall through to the store's own
loading flag (which flips true in the contextChanged reducer, then
false after the fetch settles).
Tests:
- use-threads: extend the Connected-gate test to assert
isLoading=true before Connected, false after the fetch lands.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Rename sortThreadsByUpdatedAt → sortThreadsByRecency to match the
lastRunAt-preferring sort introduced in the previous commit.
- useThreads: correct the context-dispatch comment to describe what the
code actually does (null only when runtimeUrl is absent; transient
status states leave the previous context in place).
- CopilotChatInput: rewrite the `bottomAnchored` prop doc so the
layout/positioning distinction is self-evident.
- Add changeset calling out the behavior change to suggestions (now
hidden while `isRunning`) and summarizing the ENT-314 fixes.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Skip copilotkit.connectAgent when CopilotChat lacks a caller-supplied
threadId — a locally-minted UUID has no backend record, so /connect
would always 404 on the intelligence platform.
- Suppress the welcome screen while a connect is in flight and
unconditionally when the caller has supplied a threadId
(hasExplicitThreadId). Prevents the "How can I help you today?"
flash on thread switch.
- Gate suggestions on !isConnecting && !isRunning to avoid painting
them against a mid-replay message tree.
- Defer the isConnecting release by one animation frame so trailing
bootstrap renders commit before the flag flips.
- Reserve room for the "Powered by CopilotKit" license badge via a
new --copilotkit-license-banner-offset CSS var published by the
banner on mount; chat input consumes it only when bottom-anchored.
- Sort and display threads by lastRunAt (fallback to updatedAt →
createdAt) so metadata-only actions like archive/rename don't
reshuffle the list.
- useThreads waits for runtimeConnectionStatus === Connected before
dispatching the store context, eliminating the speculative /threads
fetch that fired before /info returned wsUrl.
Threads example polish: restore button + tooltips on
archive/restore/delete, segmented Active/All filter, graceful error
state, skeleton rows on initial load, stable scrollbar gutter,
pre-paint dark-mode class, logo position stable across app/chat
modes, drop dynamic-import drawer wrapper that caused null first
paint, archived-row dimming via child colors instead of opacity.
Tests:
- CopilotChat.absentThreadConnect: connect is skipped without a
threadId, fires when supplied via prop or config.
- CopilotChatView.connectingGate: isConnecting suppresses welcome;
hasExplicitThreadId suppresses welcome on empty chat.
- threads (core): lastRunAt sort fallback ordering.
- use-threads: Connecting-state gate defers /threads until Connected.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Summary
Fixes#2296
The Markdown component had hardcoded remark/rehype plugins with no way
for consumers to add their own. This adds optional `remarkPlugins` and
`rehypePlugins` props that are spread into the existing plugin arrays,
enabling custom markdown processing.
## Test plan
- [ ] Verify custom remarkPlugins are applied alongside built-in plugins
- [ ] Verify custom rehypePlugins are applied alongside built-in plugins
- [ ] Verify Markdown renders correctly without custom plugins (no
regression)
Closes#3217
When `getLanguageModel()` returns null and provider/model are undefined
(as with LangChainAdapter), the code constructed `"undefined/undefined"`
as a model string, causing a cryptic "Unknown provider" error.
Now checks each source of model info explicitly and throws a clear error
message directing users to provide an explicit agents config when using
adapters that don't expose model metadata.
Split from #3838.
Addresses PR feedback on #3814: replaces the "red-green tested locally"
rationale with actual unit coverage.
The inline `event.messageId || randomId()` fallback becomes an exported
`resolveMessageId` helper. The resolver now calls it; the helper is
covered by a small test suite asserting: provided ids pass through
verbatim; null / undefined / empty-string event ids fall back to the
"ck-<uuid>" shape; successive fallbacks produce distinct ids.
Addresses PR feedback on #3822.
Instead of plumbing remarkPlugins and rehypePlugins through the component
one prop at a time, MarkdownProps now extends Omit<Options, "children">
and spreads the remainder into the underlying ReactMarkdown. Consumers
can now pass any react-markdown Options field (urlTransform, allowedElements,
skipHtml, etc.) without further plumbing.
The three fields that need library-specific defaults (components,
remarkPlugins, rehypePlugins) are still destructured, merged, and memoized
internally so the built-in behavior is preserved and merged values keep
stable references across renders.
Dropping the custom memo comparator — now that arbitrary props flow
through, a fixed 4-key check would silently skip re-renders when
consumer-provided props change. React's default shallow-compare, combined
with the internal useMemo on merged values, gives correct behavior without
regressing the memoization for the common case.
Covers the three branches added by the fix:
- getLanguageModel() returns a LanguageModel -> wired into BuiltInAgent
- provider + model strings present -> composed as "provider/model"
- neither present (e.g. LangChainAdapter) -> throws CopilotKitMisuseError
with adapter name in the message, instead of silently producing
"undefined/undefined" and failing downstream.
Also guards the partial-info case where only one of provider/model is set
to ensure the regression doesn't re-emerge via a half-populated adapter.
## What does this PR do?
Adds a new `"pin-to-send"` value to `CopilotChatView`'s `autoScroll`
prop, matching ChatGPT's scroll behavior: when the user sends a message,
that message scrolls to the top of the viewport and stays there while
the assistant's response streams in below. The user reads at their own
pace — the viewport does not chase the bottom.
### New public API
```ts
autoScroll?: "pin-to-bottom" | "pin-to-send" | "none" | boolean
```
- `"pin-to-bottom"` — current behavior. Chases the bottom as content
streams (still the default).
- `"pin-to-send"` — **new.** Scrolls the latest user message to ~16px
from the top, maintains a dynamic bottom spacer so the message can
actually reach the top, and does not chase the bottom.
- `"none"` — no auto-scroll.
- Boolean back-compat: `true` → `"pin-to-bottom"`, `false` → `"none"`.
Existing consumers unchanged.
`AutoScrollMode` type is exported from the package barrel.
### Example usage
```tsx
<CopilotChat autoScroll="pin-to-send" />
```
### How it works
1. `CopilotChat` computes the latest user message ID from `messages` and
publishes `{ id, sendNonce }` via a new `LastUserMessageContext`. The
nonce increments on each new send so message edits also retrigger.
2. A new `usePinToSend` hook reads the context and, on each new send:
measures viewport + user message heights, sets a spacer `<div>`'s
height, then does a single smooth `scrollTo` to the user message's
offset.
3. A shrink-only `ResizeObserver` on content collapses the spacer as the
assistant's response fills space below, so there's no wasted empty
space.
4. `ScrollView` branches on the normalized mode: existing
`<StickToBottom>` path for `"pin-to-bottom"`, existing plain-div path
for `"none"`, new `PinToSendScrollContainer` for `"pin-to-send"`.
### Edge cases handled
- Thread restore with existing messages doesn't trigger a spurious
scroll.
- `scrollTo` target computed via `getBoundingClientRect` arithmetic —
robust across any CSS positioning.
- Virtualization: the spacer lives outside the virtualized list.
- Back-compat: `autoScroll={true|false}` produces byte-for-byte
identical DOM to pre-change.
### Tests
- 7 unit tests for `normalizeAutoScroll`.
- 4 TDD behavior tests for `usePinToSend` (spacer sizing, scroll target,
shrink-only ResizeObserver, cleanup).
- 5 integration tests for `CopilotChatView` covering all three modes +
boolean back-compat.
- Full `@copilotkit/react-core` suite: **85 files / 1120 tests pass,
zero regressions.**
- publint + attw green across all 13 packages.
- Existing `CopilotChatView.slots.e2e.test.tsx` (43 tests) unchanged.
## Related PRs and Issues
- (none — new feature)
## Checklist
- [x] I have read the Contribution Guide
- [ ] Docs site update to follow in a separate PR
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Tyler Slaton