Skip to content

feat(core/chat): ix-markdown and ix-code-block - #2912

Open
danielleroux wants to merge 32 commits into
mainfrom
feat/ai-chat-improvements
Open

danielleroux wants to merge 32 commits into
mainfrom
feat/ai-chat-improvements

Conversation

@danielleroux

Copy link
Copy Markdown
Collaborator

🆕 What is the new behavior?

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

  • 🦮 Accessibility (a11y) features were implemented
  • 🗺️ Internationalization (i18n) - no hard coded strings
  • 📲 Responsiveness - components handle viewport changes and content overflow gracefully
  • 📕 Add or update a Storybook story
  • 📄 Documentation was reviewed/updated siemens/ix-docs
  • 🧪 Unit tests were added/updated and pass (pnpm test)
  • 📸 Visual regression tests were added/updated and pass (Guide)
  • 🧐 Static code analysis passes (pnpm lint)
  • 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

Add `ix-markdown`, a scoped light-DOM component that renders Markdown
(CommonMark, GFM, directives via unified/remark) with iX tokens on the
client only. Raw HTML renders as text except `<br>`; links are limited to
http(s), mailto and relative URLs and images to http(s) URLs.

Add `ix-code-block` with filename, language label, copy button with a
temporary Copied state, localizable labels and an optional `highlight`
hook that returns a DOM node.

Refs: IX-2, IX-3
Add Example/Markdown (Default, InChatMessage, Security, Empty) and
Example/Code Block (Default, WithFilename, LongLines, Localized,
CustomHighlight) stories for review.

Fix ix-code-block collapsing whitespace and line breaks of
highlighted output.

Refs: IX-2, IX-3
# Conflicts:
#	.changeset/add-markdown-and-code-block.md
#	packages/core/src/components/markdown/markdown-renderer.ts
#	packages/core/src/components/markdown/markdown.tsx
…ributes, restrict actionClick payload

Refs: IX-1
…onent stories

Add Example/Markdown stories that demonstrate:
- Streaming: a replayable simulated LLM stream inside ix-chat-ai-message
  with Settled blocks, tables, code, task lists, callouts, Directive
  buttons and Custom components.
- Directives: all built-in Directives with a visible Markdown action log.
- CustomComponents: tag-name and factory Component mappings, a nested
  ix-markdown, emitAction and overriding a built-in node type.

Each story has a play function so the storybook vitest run checks it.

Refs: IX-1
Runs the real ix-markdown element in Jest and checks mount, in-place
update, destroy and injection of an app-provided service.

Refs IX-11
Adds markdown, markdown-custom-component and code-block examples for
HTML, Angular (module and standalone), React and Vue, with shared aria
snapshots and axe smoke tests.

Refs IX-13
@netlify

netlify Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for ix-storybook ready!

Name Link
🔨 Latest commit f395128
🔍 Latest deploy log https://app.netlify.com/projects/ix-storybook/deploys/6ad8785a2fb35bfeb5ab080c
😎 Deploy Preview https://deploy-preview-2912--ix-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@changeset-bot

changeset-bot Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f395128

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@siemens/ix Minor
@siemens/ix-angular Minor
@siemens/ix-react Minor
@siemens/ix-vue Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 59 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 2 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository: siemens/ix/.coderabbit.yaml
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: f2291399-c54a-4ebc-8b75-bc2af3d92460
📥 Commits

Reviewing files that changed from the base of the PR and between 8e1ddae and f395128.

⛔ Files ignored due to path filters: 18
  • packages/angular/standalone/src/components.ts is excluded by !packages/angular/standalone/src/components.ts
  • packages/react/src/components/components.server.ts is excluded by !packages/react/src/components/**
  • packages/react/src/components/components.ts is excluded by !packages/react/src/components/**
  • packages/vue/src/components/components.ts is excluded by !packages/vue/src/components/**
  • packages/vue/src/components/ix-code-block.ts is excluded by !packages/vue/src/components/**
  • packages/vue/src/components/ix-markdown.ts is excluded by !packages/vue/src/components/**
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • testing/framework-tests/tests/generated/axe.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/code-block-axe.spec.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/code-block.spec.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/index.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/markdown-axe.spec.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/markdown-custom-component-axe.spec.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/markdown-custom-component.spec.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/markdown.spec.ts is excluded by !**/generated/**
  • testing/framework-tests/tests/generated/test-ids.autogenerated.ts is excluded by !**/generated/**
  • testing/visual-testing/__screenshots__/tests/chat/chat.e2e.ts/chat-markdown-in-ai-message-1-chromium---classic-dark-linux.png is excluded by !**/*.png
  • testing/visual-testing/__screenshots__/tests/chat/chat.e2e.ts/chat-markdown-in-ai-message-1-chromium---classic-light-linux.png is excluded by !**/*.png
📒 Files selected for processing: 89
  • .changeset/add-markdown-and-code-block.md
  • .changeset/angular-markdown-component-helper.md
  • .changeset/message-bar-decorative-icon.md
  • .changeset/react-markdown-custom-component.md
  • .changeset/vue-markdown-custom-component.md
  • examples/angular-examples/src/app/app-routing.module.ts
  • examples/angular-examples/src/app/app.module.ts
  • examples/angular-examples/src/preview-examples/code-block.html
  • examples/angular-examples/src/preview-examples/code-block.ts
  • examples/angular-examples/src/preview-examples/markdown-custom-component.html
  • examples/angular-examples/src/preview-examples/markdown-custom-component.ts
  • examples/angular-examples/src/preview-examples/markdown.html
  • examples/angular-examples/src/preview-examples/markdown.ts
  • examples/angular-standalone-examples/src/app/app.routes.ts
  • examples/angular-standalone-examples/src/preview-examples/code-block.html
  • examples/angular-standalone-examples/src/preview-examples/code-block.ts
  • examples/angular-standalone-examples/src/preview-examples/markdown-custom-component.html
  • examples/angular-standalone-examples/src/preview-examples/markdown-custom-component.ts
  • examples/angular-standalone-examples/src/preview-examples/markdown.html
  • examples/angular-standalone-examples/src/preview-examples/markdown.ts
  • examples/html-examples/src/preview-examples/code-block.html
  • examples/html-examples/src/preview-examples/markdown-custom-component.html
  • examples/html-examples/src/preview-examples/markdown.html
  • examples/react-examples/src/main.tsx
  • examples/react-examples/src/preview-examples/code-block.tsx
  • examples/react-examples/src/preview-examples/markdown-custom-component.tsx
  • examples/react-examples/src/preview-examples/markdown.tsx
  • examples/vue-examples/src/Root.vue
  • examples/vue-examples/src/preview-examples/code-block.vue
  • examples/vue-examples/src/preview-examples/markdown-custom-component.vue
  • examples/vue-examples/src/preview-examples/markdown.vue
  • packages/angular/common/src/index.ts
  • packages/angular/common/src/utils/markdown-component.render.spec.ts
  • packages/angular/common/src/utils/markdown-component.spec.ts
  • packages/angular/common/src/utils/markdown-component.ts
  • packages/angular/jest.config.js
  • packages/angular/src/components.ts
  • packages/angular/src/declare-components.ts
  • packages/angular/src/index.ts
  • packages/angular/standalone/src/index.ts
  • packages/angular/tsconfig.spec.json
  • packages/core/component-api.json
  • packages/core/package.json
  • packages/core/src/components.d.ts
  • packages/core/src/components/code-block/code-block.scss
  • packages/core/src/components/code-block/code-block.tsx
  • packages/core/src/components/code-block/code-block.types.ts
  • packages/core/src/components/code-block/code-block.vars.scss
  • packages/core/src/components/code-block/test/code-block.ct.ts
  • packages/core/src/components/markdown/markdown-directives.ts
  • packages/core/src/components/markdown/markdown-footnotes.ts
  • packages/core/src/components/markdown/markdown-html.ts
  • packages/core/src/components/markdown/markdown-identifier.ts
  • packages/core/src/components/markdown/markdown-renderer.ts
  • packages/core/src/components/markdown/markdown-stream.ts
  • packages/core/src/components/markdown/markdown-table.ts
  • packages/core/src/components/markdown/markdown-text.ts
  • packages/core/src/components/markdown/markdown-url.ts
  • packages/core/src/components/markdown/markdown.scss
  • packages/core/src/components/markdown/markdown.tsx
  • packages/core/src/components/markdown/markdown.types.ts
  • packages/core/src/components/markdown/markdown.vars.scss
  • packages/core/src/components/markdown/test/markdown-blocks.ct.ts
  • packages/core/src/components/markdown/test/markdown-directives.ct.ts
  • packages/core/src/components/markdown/test/markdown-options.ct.ts
  • packages/core/src/components/markdown/test/markdown-streaming.ct.ts
  • packages/core/src/components/markdown/test/markdown-table.ct.ts
  • packages/core/src/components/markdown/test/markdown.ct.ts
  • packages/core/src/components/markdown/vendor/decode-named-character-reference.ts
  • packages/core/src/components/message-bar/message-bar.tsx
  • packages/core/src/public-api.ts
  • packages/core/stencil.config.ts
  • packages/react/src/index.ts
  • packages/react/src/markdown/create-markdown-component.tsx
  • packages/react/src/markdown/index.ts
  • packages/react/src/tests/markdown/custom-component.test.tsx
  • packages/storybook-docs/.storybook/define-custom-elements.ts
  • packages/storybook-docs/src/stories/code-block.stories.tsx
  • packages/storybook-docs/src/stories/markdown.stories.tsx
  • packages/vue/src/index.ts
  • packages/vue/src/markdown-component.ts
  • packages/vue/src/tests/markdown-component.spec.ts
  • testing/framework-tests/__snapshots__/code-block-aria-snapshot.yaml
  • testing/framework-tests/__snapshots__/markdown-aria-snapshot.yaml
  • testing/framework-tests/__snapshots__/markdown-custom-component-aria-snapshot.yaml
  • testing/framework-tests/tests/working-with-axe.spec.ts
  • testing/framework-tests/tests/working.spec.ts
  • testing/visual-testing/tests/chat/chat.e2e.ts
  • testing/visual-testing/tests/chat/markdown/index.html
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@danielleroux danielleroux changed the title Feat/ai chat improvements feat(core/chat): ix-markdown and ix-code-blcok Oct 21, 2026
@danielleroux danielleroux changed the title feat(core/chat): ix-markdown and ix-code-blcok feat(core/chat): ix-markdown and ix-code-block Oct 21, 2026
The browser build of decode-named-character-reference created a DOM element
at module load, so importing ix-markdown failed during Next.js prerendering.
Resolve it to a local copy that creates the element on first use.

Mark the React createMarkdownComponent helper as a client module because it
uses react-dom/client.

Refs IX-13
Narrow node offsets and directive names explicitly so the core lint passes.

Refs IX-13
@sonarqubecloud

Copy link
Copy Markdown

@danielleroux
danielleroux added this pull request to stack #2916 October 21, 2026 11:17
@danielleroux
danielleroux marked this pull request as ready for review October 21, 2026 11:18
@danielleroux
danielleroux requested review from a team as code owners October 21, 2026 11:18
@flxlst09 flxlst09 added this to the 6.1.0 milestone Oct 22, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants