Iterate on the image attachment rendering based on review feedback:
- Reduce thumbnail size to 80x80 (down from 300x300) so attachments
read as compact thumbnails like Claude's chat UI
- Render attachments above the message text instead of below, and lay
multiple attachments out in a horizontal row (flex-row + flex-wrap +
justify-end) instead of stacking vertically
- Add a muted background so transparent images stay readable
- Extract Lightbox + useLightbox into a shared module so the rendered
attachment can reuse the same click-to-zoom modal as the queue preview;
clicking a thumbnail now opens it in a fullscreen lightbox with a
view-transition morph
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Constrain image attachments to a 300x300 max size with object-cover and
12px rounded corners so they appear as small thumbnails in chat instead
of filling the message width. Applies to both the v2 renderer (Tailwind)
and the legacy react-ui renderer (CSS).
Co-Authored-By: Claude Opus 4.6 <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.
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.
## Summary
- `sendMessage` returns `Promise<void>` but `usePushToTalk` accessed
`.id` on the result, causing a `TypeError` crash during push-to-talk
transcription
- Added guard to check if `sendFunction` returns a message before
accessing `.id`
- Updated `SendFunction` type to accept `Promise<Message | void>`
Fixes#3011
## Test plan
- [x] Added unit tests verifying void return handling
- [x] Added unit tests verifying message-with-id return handling
- [x] All react-ui tests pass
## Summary
- `.copilotKitMessagesFooter` used `width: 97%` which caused horizontal
overflow in constrained containers
- Changed to `width: 100%` with `box-sizing: border-box` so padding is
included in the width calculation
Fixes#2325
## Test plan
- [x] All react-ui tests pass
- [ ] Visual verification: render CopilotKit chat in a constrained
container (e.g. 300px sidebar) and confirm no horizontal scrollbar
appears
## Summary
Fixes#2194
`CopilotModal` and `CopilotModalProps` were not exported from
`@copilotkit/react-ui`, making them inaccessible to consumers. Adds both
exports to the chat barrel file.
## Test plan
- [ ] Verify `CopilotModal` and `CopilotModalProps` are importable from
`@copilotkit/react-ui`
## Summary
- The loading spinner only appeared when the last message had role
"user"
- During tool execution the last message can have role "tool", hiding
the indicator
- Now also show it when the trailing message is a tool result
Closes#3055
Closes#1921
The Markdown component accepted `components` but not `urlTransform`,
preventing users from customizing URL sanitization. Added `urlTransform`
as an optional prop with passthrough to `MemoizedReactMarkdown`.
Split from #3838.
## Summary
- `checkForUpdates()` in dev console is now gated on `showDevConsole`,
preventing unnecessary network requests when the console is disabled
Closes#2751
## Test plan
- [x] `@copilotkit/react-core` tests pass
🤖 Generated with [Claude Code](https://claude.com/claude-code)
The truthiness check swallowed null, which is a valid value in
react-markdown that explicitly disables the default URL sanitizer.
Changed to an explicit undefined check.
## Summary
- Removes the `key` prop from `CodeBlock` in `Markdown.tsx` entirely
- The original `Math.random()` key caused React to remount the component
on every render, producing visible flickering
- A content-based key (language + content prefix) still changes every
streaming token, causing the same problem
- Without an explicit key, React uses positional identity — stable
across re-renders while content streams in
Closes#2669
## Test plan
- [x] `@copilotkit/react-ui` tests pass
- [x] `@copilotkit/react-ui` build succeeds
- [ ] Manual: verify code blocks no longer flicker during streaming in
chat UI
## Summary
Fixes#2234
React's hydration fails when block-level elements (like `<div>`) are
nested inside `<p>` tags in the Markdown component. Replaces the `<p>`
wrapper with `<div>` (adding `copilotKitParagraph` class for styling) to
prevent SSR hydration mismatches.
## Test plan
- [ ] Verify Markdown rendering in SSR context has no hydration errors
- [ ] Verify paragraph styling is preserved via `copilotKitParagraph`
class
Address review feedback: extract the repeated clipboard availability check +
writeText + error handling pattern into a shared copyToClipboard() utility in
@copilotkit/shared. All 9 call sites across angular, react-core, and react-ui
now use the shared utility instead of duplicating the same code block.
Same bug pattern as console.css and input.css: bare `.dark,` was a
standalone selector leaking all --copilot-kit-* CSS custom properties
onto any element with a .dark class. Also removed broken `:root`
pseudo-element from `body[style*="color-scheme: dark"] :root` — :root
cannot be a descendant of body, so this selector never matched.
Fix: drop standalone `.dark,` (redundant with `html.dark` and
`body.dark`) and remove the non-functional `:root` descendant.
The blockquote.copilotKitMarkdownElement p selector targeted literal <p>
elements inside blockquotes, but paragraphs now render as <div> after
the hydration fix. Updated to target .copilotKitParagraph class instead.
Also removes unused import and adds a regression test for this selector.
Add null checks for navigator.clipboard across all copy-to-clipboard
calls to prevent TypeError in non-localhost environments where the
Clipboard API is unavailable. The copied indicator now only appears
after a confirmed successful write, preventing false positive UX
feedback when the clipboard API is missing or the write fails.
The original Math.random() key caused React to remount the CodeBlock on
every render. The PR's content-based key (language + content prefix) still
changed every streaming token, causing the same flickering. Removing the
key entirely lets React use positional identity, which is stable across
re-renders while content streams in.
Closes#2669
The p tag was changed to div to fix hydration errors, but CSS selectors
still targeted p.copilotKitMarkdownElement. Updated to use the
.copilotKitParagraph class selector so paragraph styling (line-height,
font-size, margin) applies correctly to the new div element.
The Markdown component accepted components but not urlTransform,
preventing users from customizing URL sanitization. Added urlTransform
as an optional prop with passthrough to MemoizedReactMarkdown.
The loading spinner only appeared when the last message had role "user".
During tool execution the last message can have role "tool", hiding the
indicator. Now also show it when the trailing message is a tool result.
checkForUpdates() fired unconditionally on mount, making a network
request even when the dev console was disabled. Now the useEffect
short-circuits when showDevConsole is false.
The .copilotKitMessagesFooter used width:97% which caused horizontal
overflow in constrained containers. Changed to width:100% with
box-sizing:border-box so padding is included in the width calculation.
sendMessage returns Promise<void> but usePushToTalk accessed .id on
the result, causing a TypeError crash. Guard the .id access with an
existence check and update the SendFunction type to accept void.
818e4e767 added min-height: 100vh / height: 100% to
.copilotKitSidebarContentWrapper and its children in an attempt to
support full-height children inside the sidebar. This caused empty
space equal to the full viewport height to appear below the app
content whenever CopilotSidebar was mounted, even when collapsed.
The wrapper only needs to push the page content left (via margin-right)
when the sidebar expands — it does not need to control its own height.
Remove the height rules; child layout is the responsibility of the
app, not the sidebar wrapper.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The drag-and-drop wrapper div added in fc1cfa09d (attachments feature)
broke the flex layout of the chat window. The div had no class when
not dragging, so no CSS rule applied flex-grow — messages and input
collapsed to their natural height instead of filling the window.
Add copilotKitChatBody class to the wrapper and give it flex: 1 1 0%
so it claims the remaining window height, restoring the input-pinned-
to-bottom behaviour present in 1.51.1.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
tylerslaton