feat(dashboard, api-service, framework, worker): Rich content for chat channels#10816
Draft
feat(dashboard, api-service, framework, worker): Rich content for chat channels#10816
Conversation
Introduce a rich chat card editor and preview pipeline across dashboard and API. Adds a full editor UI (card types, serializer, block list/menu, header editor, and sync hook) and preview renderers for text, Slack, Teams (adaptive cards) and Discord embeds in the dashboard. Server-side: wire ChatContentCompiler into NovuBridgeModule and ChatOutputRendererUsecase to render Liquid in card leaves, compile multi-platform previews and return ChatCompiledPreviews; fall back to legacy text when no card is present. Also add chat content-compiler service and platform-specific adapters in application-generic, plus small schema and provider updates to support the new features.
Keep editor-side block ids in CardElement JSON and adjust chat/send-message typing edges.
- Dashboard: add ID_KEY ('_editorId') and readId() to persist per-block editor ids through the form→JSON→form round-trip so inputs don't remount and lose focus; include these ids when serializing blocks/fields/actions. Stop filtering out empty blocks in docToCardElement so in-progress empty blocks are preserved; remove isBlockEmpty. Doc-to-fallback rendering now skips empty content for presentation only.
- API: annotate why ChatOutputRendererUsecase results are cast at the call site and cast the result in construct-framework-workflow to bridge the loose shared DTO shape (Record<string, unknown>) with the framework's stricter inferred card type.
- Worker: change conditional spreads to ternary spreads for compiled adaptiveCard/discordEmbeds/slackBlocks to satisfy TypeScript when those fields are typed as unknown.
These changes avoid UI focus/jank, make type boundaries explicit, and fix TS spread errors while keeping runtime payload compatibility.
Add a full-featured Novu card preview and overhaul the chat rich-body editor UI and interactions. Introduces a ChatMessageFrame and NovuCard renderer (images, links, fields, actions) used as the default preview tab (renamed from text to 'Novu'), with improved handling for mini/default variants and preview pending state. Replace legacy flat text preview with a faithful card rendering and update Slack/Teams/Discord previews to use shared button styling. Refactor the rich-body editor: group Add Block menu items (Content / Layout / Interactive), add quick-insert buttons for common blocks, and rework BlockListItem to a compact, focused layout with inline controls. Implement new editors for text, link, image, fields, and actions using Popover and Button primitives, editable styles for text and action buttons, and safer image fallbacks. Card header now supports image editing via popover. Many styling and UX tweaks to improve consistency and preview fidelity.
✅ Deploy preview added
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
@novu/shared
@novu/worker
@novu/dashboard
@novu/api-service
labels
Contributor
|
Hey there and thank you for opening this pull request! 👋 We require pull request titles to follow specific formatting rules and it looks like your proposed title needs to be adjusted. Your PR title is: Requirements:
Expected format: Details: PR title must end with 'fixes TICKET-ID' (e.g., 'fixes NOV-123') or include ticket ID in branch name |
Contributor
LaunchDarkly flag references🔍 1 flag added or modified
|
@novu/framework
novu
@novu/providers
@novu/shared
@novu/stateless
commit: |
Add support for transient paragraph nodes inserted by Maily's "+" slash menu: register @tiptap/extension-paragraph in the chat editor and treat surviving paragraph nodes as plain cardText during serialization and fallback-text generation. Refactor block commands by introducing replaceBlockWithAtom and setCardTextStyle helpers so selecting a slash-menu block replaces the whole parent block (avoids leaving empty paragraphs). Also import Editor/Range types and bump left padding in the chat rich-body layout.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed? Why was the change needed?
@coderabbitai summary
Screenshots
Expand for optional sections
Related enterprise PR
Special notes for your reviewer