feat(ai-assistant): add support for codeblocks by davids-ensemble · Pull Request #650 · AdobeDocs/adp-devsite

davids-ensemble · 2026-06-08T11:51:51Z

Jira: https://jira.corp.adobe.com/browse/ADPGENAI-67

This is trying to reuse our existing code blocks powered by Prism in the AI Assistant bubbles.

A few notes about this:

I extracted the import for Prism in a reusable function because it only got imported on pages with code blocks.
I import Prism if a codeblock is detected in a chat bubble
I added a "condensed copy button" mode that collapses the label into an icon
Let me know if I should move the prism-loader into a different location

Test existing codeblock

STAGE: https://developer-stage.adobe.com/express/add-ons/docs/guides/getting-started/hello-world#edit-the-script
PR: https://feat-ai-assistant-code-block-decoration--adp-devsite--adobedocs.aem.page/express/add-ons/docs/guides/getting-started/hello-world#edit-the-script

Test with AI Assistant

STAGE: https://developer-stage.adobe.com/express/add-ons/docs/guides/
PR: https://feat-ai-assistant-code-block-decoration--adp-devsite--adobedocs.aem.page/express/add-ons/docs/guides/

For both environments do the following in your browser console

// 1. Modify sessionStorage with an example response
sessionStorage.setItem('ai-assistant-chat-history', JSON.stringify([{"content":"Hello, welcome to Adobe Developer Website!","source":"ai"},{"content":"What would you like to know today?","source":"ai","timestamp":1780921148269},{"content":"How do I initialize my App Builder application and what CLI commands are available for generating manifests, schemas, and runtime actions?","source":"user","timestamp":1780921154212},{"id":"2bde5a79-0857-466c-810d-f6dc55033a9a","content":"\n## Initializing Your App Builder Application\n\nBefore initializing your App Builder application, you need to complete these prerequisites:\n\n1. **Create a project in the Adobe Developer Console** - Create a new project or use an existing one\n2. **Add required services** to your project:\n   - **I/O Management API** (required for App Builder runtime actions)\n   - **I/O Events** (only if your app uses events)\n   - **I/O Events for Adobe Commerce** (only if your app uses events)\n   - **Adobe Commerce as a Cloud Service** (only for Adobe Commerce as a Cloud Service instances)\n3. **Set up App Builder** - Ensure you have the Adobe I/O CLI installed and configured\n\n### Running the Initialization\n\nTo initialize your App Builder project, run the following command based on your package manager:\n\n**npm:**\n```bash\nnpx @adobe/aio-commerce-lib-app init\n```\n\n**yarn:**\n```bash\n# For Yarn classic (v1), install first\nyarn add @adobe/aio-commerce-lib-app\nyarn exec aio-commerce-lib-app init\n\n# For Yarn Berry (v2+), pull directly from remote\nyarn dlx @adobe/aio-commerce-lib-app init\n```\n\n**pnpm:**\n```bash\npnpm dlx @adobe/aio-commerce-lib-app init\n```\n\n**bun:**\n```bash\nbun x @adobe/aio-commerce-lib-app init\n```\n\nThe initialization process will:\n- Create `app.commerce.config` with a template\n- Install required dependencies\n- Add a `postinstall` hook to `package.json`\n- Generate all required artifacts\n- Update `app.config.yaml` and `install.yaml` with appropriate extension references\n\n## Available CLI Commands\n\nAfter initialization, you can use the following CLI commands to generate different artifacts:\n\n| Command | Description |\n|---------|-------------|\n| `npx aio-commerce-lib-app generate all` | Generate all artifacts (manifest, schema, and runtime actions). If your schema contains password fields, configure an encryption key |\n| `npx aio-commerce-lib-app generate manifest` | Generate only the app manifest file |\n| `npx aio-commerce-lib-app generate actions` | Generate only runtime actions |\n| `npx aio-commerce-lib-app generate schema` | Generate only the configuration schema |\n\n**Note:** Replace `npx` with your package manager's equivalent:\n- **Yarn:** `yarn exec`\n- **PNPM:** `pnpm exec`\n- **Bun:** `bun x`\n\nThe `postinstall` hook automatically refreshes generated artifacts when you install or update the library. Additionally, `aio app build` runs `pre-app-build`, which regenerates runtime action sources from your current `app.commerce.config`.\n","source":"ai","references":[{"url":"https://developer.adobe.com/commerce/extensibility/app-management/initialize-app","title":"Initialize your app"}],"timestamp":1780921154223}]));
// 2. enable and reload page to pick up new sessionStorage data
ENABLE_AI_ASSISTANT();

This history should have a few code blocks that are rendered differently in the two environments.

STAGE	PR

aem-code-sync · 2026-06-08T11:51:54Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run all PSI checks
Re-run failed PSI checks
Re-sync branch

Commits

808da70 ✅ (latest)
5e9854d ✅

github-actions · 2026-06-08T11:52:35Z

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests

📁 test/blocks/code/code.test.js:

❌ Code block > code > data-playground attributes from class
      AssertionError: expected null to equal 'code-session'
        at n.<anonymous> (test/blocks/code/code.test.js:29:63)


📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab-playground.test.js:

❌ Tab block playground metadata > extracts data-playground attributes via decoratePreformattedCode
      AssertionError: expected null to equal 'tab-session'
        at n.<anonymous> (test/blocks/tab/tab-playground.test.js:17:63)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)

Test Coverage Report

Overall Coverage Summary

Metric	Percentage	Coverage
Statements	57.94%	3486/6016
Branches	84.61%	473/559
Functions	52.55%	113/215
Lines	57.94%	3486/6016

Coverage by File/Directory

File	Statements	Branches	Functions	Lines
blocks/accordion	100%	100%	100%	100%
blocks/announcement	76.69%	60%	100%	76.69%
blocks/banner	94.28%	62.5%	100%	94.28%
blocks/cards	94.04%	94.73%	100%	94.04%
blocks/carousel	76.9%	77.77%	75%	76.9%
blocks/code	81.81%	60%	100%	81.81%
blocks/columns	67.78%	76.31%	100%	67.78%
blocks/contributors	84.23%	56%	100%	84.23%
blocks/edition	91.37%	57.14%	100%	91.37%
blocks/fragment	17.03%	100%	0%	17.03%
blocks/image-text	57.5%	55.55%	100%	57.5%
blocks/info	96.87%	100%	100%	96.87%
blocks/info-card	100%	100%	100%	100%
blocks/info-columns	75%	100%	100%	75%
blocks/list	59.09%	85.71%	100%	59.09%
blocks/mini-resource-card	97.89%	87.5%	100%	97.89%
blocks/product-card	78.57%	94.11%	100%	78.57%
blocks/profile-card	96.29%	100%	100%	96.29%
blocks/site-hero	93.93%	80%	100%	93.93%
blocks/summary	98.36%	88.88%	100%	98.36%
blocks/tab	93.25%	96.87%	100%	93.25%
blocks/table	100%	84.61%	100%	100%
blocks/text	49.01%	83.33%	50%	49.01%
blocks/title	84%	66.66%	100%	84%
components	57.83%	78.68%	58.33%	57.83%
scripts	46.48%	93.15%	40.52%	46.48%

Coverage report generated at 2026-06-08T11:52:35.549Z

aem-code-sync · 2026-06-08T12:00:05Z

	Page	Audits
📱	/express/add-ons/docs/guides/
🖥️	/express/add-ons/docs/guides/
📱	/express/add-ons/docs/guides/getting-started/hello-world	Lighthouse returned error: Something went wrong.
🖥️	/express/add-ons/docs/guides/getting-started/hello-world

github-actions · 2026-06-08T12:37:01Z

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests

📁 test/blocks/code/code.test.js:

❌ Code block > code > data-playground attributes from class
      AssertionError: expected null to equal 'code-session'
        at n.<anonymous> (test/blocks/code/code.test.js:29:63)


📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab-playground.test.js:

❌ Tab block playground metadata > extracts data-playground attributes via decoratePreformattedCode
      AssertionError: expected null to equal 'tab-session'
        at n.<anonymous> (test/blocks/tab/tab-playground.test.js:17:63)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)

Test Coverage Report

Overall Coverage Summary

Metric	Percentage	Coverage
Statements	57.94%	3486/6016
Branches	84.61%	473/559
Functions	52.55%	113/215
Lines	57.94%	3486/6016

Coverage by File/Directory

File	Statements	Branches	Functions	Lines
blocks/accordion	100%	100%	100%	100%
blocks/announcement	76.69%	60%	100%	76.69%
blocks/banner	94.28%	62.5%	100%	94.28%
blocks/cards	94.04%	94.73%	100%	94.04%
blocks/carousel	76.9%	77.77%	75%	76.9%
blocks/code	81.81%	60%	100%	81.81%
blocks/columns	67.78%	76.31%	100%	67.78%
blocks/contributors	84.23%	56%	100%	84.23%
blocks/edition	91.37%	57.14%	100%	91.37%
blocks/fragment	17.03%	100%	0%	17.03%
blocks/image-text	57.5%	55.55%	100%	57.5%
blocks/info	96.87%	100%	100%	96.87%
blocks/info-card	100%	100%	100%	100%
blocks/info-columns	75%	100%	100%	75%
blocks/list	59.09%	85.71%	100%	59.09%
blocks/mini-resource-card	97.89%	87.5%	100%	97.89%
blocks/product-card	78.57%	94.11%	100%	78.57%
blocks/profile-card	96.29%	100%	100%	96.29%
blocks/site-hero	93.93%	80%	100%	93.93%
blocks/summary	98.36%	88.88%	100%	98.36%
blocks/tab	93.25%	96.87%	100%	93.25%
blocks/table	100%	84.61%	100%	100%
blocks/text	49.01%	83.33%	50%	49.01%
blocks/title	84%	66.66%	100%	84%
components	57.83%	78.68%	58.33%	57.83%
scripts	46.48%	93.15%	40.52%	46.48%

Coverage report generated at 2026-06-08T12:37:00.894Z

timkim · 2026-06-10T17:52:19Z

At my resolution, the copy button is pretty squished. Might need to make the copy button into an icon?

github-actions · 2026-06-12T13:29:12Z

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests

📁 test/blocks/code/code.test.js:

❌ Code block > code > data-playground attributes from class
      AssertionError: expected null to equal 'code-session'
        at n.<anonymous> (test/blocks/code/code.test.js:29:63)


📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab-playground.test.js:

❌ Tab block playground metadata > extracts data-playground attributes via decoratePreformattedCode
      AssertionError: expected null to equal 'tab-session'
        at n.<anonymous> (test/blocks/tab/tab-playground.test.js:17:63)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)

Test Coverage Report

Overall Coverage Summary

Metric	Percentage	Coverage
Statements	58.03%	3494/6020
Branches	84.49%	474/561
Functions	53.02%	114/215
Lines	58.03%	3494/6020

Coverage by File/Directory

File	Statements	Branches	Functions	Lines
blocks/accordion	100%	100%	100%	100%
blocks/announcement	76.69%	60%	100%	76.69%
blocks/banner	94.28%	62.5%	100%	94.28%
blocks/cards	94.04%	94.73%	100%	94.04%
blocks/carousel	76.9%	77.77%	75%	76.9%
blocks/code	81.81%	60%	100%	81.81%
blocks/columns	67.78%	76.31%	100%	67.78%
blocks/contributors	84.23%	56%	100%	84.23%
blocks/edition	91.37%	57.14%	100%	91.37%
blocks/fragment	17.03%	100%	0%	17.03%
blocks/image-text	57.5%	55.55%	100%	57.5%
blocks/info	96.87%	100%	100%	96.87%
blocks/info-card	100%	100%	100%	100%
blocks/info-columns	75%	100%	100%	75%
blocks/list	59.09%	85.71%	100%	59.09%
blocks/mini-resource-card	97.89%	87.5%	100%	97.89%
blocks/product-card	78.57%	94.11%	100%	78.57%
blocks/profile-card	96.29%	100%	100%	96.29%
blocks/site-hero	93.93%	80%	100%	93.93%
blocks/summary	98.36%	88.88%	100%	98.36%
blocks/tab	93.25%	96.87%	100%	93.25%
blocks/table	100%	84.61%	100%	100%
blocks/text	49.01%	83.33%	50%	49.01%
blocks/title	84%	66.66%	100%	84%
components	57.83%	78.68%	58.33%	57.83%
scripts	46.66%	92.7%	41.17%	46.66%

Coverage report generated at 2026-06-12T13:29:11.806Z

davids-ensemble · 2026-06-12T13:29:45Z

@timkim I added some CSS that collapses the copy button to an icon only mode if a class name is found.
Please take a look again

davids-ensemble requested a review from timkim June 8, 2026 11:52

feat(ai-assistant): initial support for codeblocks

5e9854d

davids-ensemble force-pushed the feat/ai-assistant-code-block-decoration branch from 7c00875 to 5e9854d Compare June 8, 2026 12:34

aem-code-sync Bot temporarily deployed to feat/ai-assistant-code-block-decoration June 8, 2026 12:34 Inactive

feat(codeblock): add condensed copy icon mode

808da70

aem-code-sync Bot deployed to feat/ai-assistant-code-block-decoration June 12, 2026 13:28 View deployment

timkim requested a review from melissag-ensemble June 16, 2026 18:28

melissag-ensemble approved these changes Jun 16, 2026

View reviewed changes

timkim approved these changes Jun 16, 2026

View reviewed changes

timkim merged commit c8290a7 into stage Jun 16, 2026
1 of 4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ai-assistant): add support for codeblocks#650

feat(ai-assistant): add support for codeblocks#650
timkim merged 2 commits into
stagefrom
feat/ai-assistant-code-block-decoration

davids-ensemble commented Jun 8, 2026 •

edited

Loading

Uh oh!

aem-code-sync Bot commented Jun 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 8, 2026

Uh oh!

aem-code-sync Bot commented Jun 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 8, 2026

Uh oh!

timkim commented Jun 10, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

davids-ensemble commented Jun 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

davids-ensemble commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test existing codeblock

Test with AI Assistant

Uh oh!

aem-code-sync Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 8, 2026

❌ Test Results

Test Coverage Report

Overall Coverage Summary

Coverage by File/Directory

Uh oh!

aem-code-sync Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 8, 2026

❌ Test Results

Test Coverage Report

Overall Coverage Summary

Coverage by File/Directory

Uh oh!

timkim commented Jun 10, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026

❌ Test Results

Test Coverage Report

Overall Coverage Summary

Coverage by File/Directory

Uh oh!

davids-ensemble commented Jun 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

davids-ensemble commented Jun 8, 2026 •

edited

Loading

aem-code-sync Bot commented Jun 8, 2026 •

edited

Loading

aem-code-sync Bot commented Jun 8, 2026 •

edited

Loading