feat(demo-schema-react): render the research card related documents by dguerinCoveo · Pull Request #8675 · coveo/ui-kit

dguerinCoveo · 2026-10-14T17:52:17Z

Jira

https://coveord.atlassian.net/browse/SVCC-6607

Motivation

Stacked on #8710, which adds the documents to the mock service and pins the schema.

The demo's Product Education answer now lists the product's related documents, such as manuals and installation guides, in a "Documentation & manuals" section under the research card. The agent sends them on the card state as relatedDocuments (agent-smith#988), and each client chooses how many to show.

Changes

ProductResearchCard renders the documents below the card, one row each: a file icon, the title, and the file type and size (PDF - 333.2 kB). The whole row opens the document in a new tab. The section is hidden when there are none.
New maxLinks option (default 10), set through createThermidorCatalog({productResearchCard: {maxLinks}}). The demo app shows 5.

Details

Only title is required on a document. File type and size show only when present, a document without a link renders as plain text, and one with neither a title nor a link is skipped.
createThermidorCatalog() without options behaves as before.
Documents carry no id, so the list is keyed by position.
The layout follows the product design; there is no download button. Sizes use decimal units (kB).
The section sits inside the card's component, so it needs no new Thermidor component and no agent change.

Validation

pnpm --filter @coveo/thermidor run build, then in samples/thermidor/demo-schema-react run pnpm exec vitest run src/a2ui/ProductResearchCard. All 28 tests pass.
In the same folder, pnpm exec tsc --noEmit -p .. No errors.
In mock mode: pnpm dev:mock, then send tell me more about the thermoflex winter wetsuit. The card shows, then 5 of the 6 mock documents as rows.
End to end through thermidor-stack on a dev org with agent-smith#988: a Product Education question shows the card, then 5 of the 10 documents the agent sent as rows.

Screenshots

Checklist

PR title follows Conventional Commits 1.0.0 format (feat(<scope>): <description>)
Added a changeset (pnpm changeset) if modifying public package source code: not needed, the demo is a private sample.

🤖 Generated with Claude Code

changeset-bot · 2026-10-14T17:52:23Z

⚠️ No Changeset found

Latest commit: a113755

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

svcsnykcoveo · 2026-10-14T17:52:45Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

pkg-pr-new · 2026-10-14T17:55:30Z

@coveo/pkg-new-template

@samples/thermidor-demo-schema-react

npm i https://pkg.pr.new/@coveo/thermidor@8675

commit: a113755

chromatic-com · 2026-10-14T17:56:09Z

Tip

All tests passed and all changes approved!

🟢 UI Tests: 439 tests unchanged
🟢 UI Review: No changes
Storybook Publish: 471 stories published

chromatic-com · 2026-10-14T17:56:10Z

Tip

All tests passed and all changes approved!

🟢 UI Tests: 439 tests unchanged
🟢 UI Review: No changes
Storybook Publish: 471 stories published

github-actions · 2026-10-14T19:50:10Z

🔗 Scratch Orgs ready to test this PR:

✅ LWS Enabled: Open Org
✅ LWS Disabled: Open Org

fbeaudoincoveo

What this PR is currently lacking is adjustments in the mock service (based on the schema changes in https://github.com/coveo-platform/thermidor-schema/pull/152) to be able to test the feature before actually implementing it in the backend.

See for instance what I did in this PR stack to add breadbox support:

#8640 (simulate breadbox in mock service responses, based on schema changes in https://github.com/coveo-platform/thermidor-schema/pull/158)
#8642 (rendering in demo-schema-react, similar to what you did in this PR)

The ProductResearchCard lists the relatedDocuments the agent sends, with each document's file type and size. createThermidorCatalog takes a productResearchCard.maxLinks option (default 10) that caps the list. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Render a document without a link as plain text, drop the separator when the file type or size is missing, label the section by its heading, and round the size before choosing its unit. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The demo creates its catalog with productResearchCard.maxLinks set to 5. The component default stays 10. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…nentid thermidor-schema#152 ships related documents without permanentid, and only title is required, so file type and size are optional in the list. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The catalog builds the card through createProductResearchCard, so the prebuilt ProductResearchCard and the exported default limit are unused. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

A document with neither a title nor a link no longer takes a maxLinks slot. Tests cover negative, fractional and infinite maxLinks, as the option's doc comment describes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…earch card The documents move out of the card into a full-width "Documentation & manuals" section: one row per document with a file icon, the title and the file type and size. The whole row opens the document. Sizes use decimal units, like 333.2 kB. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dguerinCoveo · 2026-10-16T17:50:12Z

What this PR is currently lacking is adjustments in the mock service (based on the schema changes in coveo-platform/thermidor-schema#152) to be able to test the feature before actually implementing it in the backend.

See for instance what I did in this PR stack to add breadbox support:

feat(platform-mock-api): simulate the breadbox in the mock converse service j:KIT-6335 #8640 (simulate breadbox in mock service responses, based on schema changes in [feat(schema): add the Breadbox component KIT-6334 coveo-platform/thermidor-schema#158](https://github.com/coveo-platform/thermidor-schema/pull/158))

feat(demo-schema-react): render the Breadbox component j:KIT-6336 #8642 (rendering in demo-schema-react, similar to what you did in this PR)

Added a mock server in pr1

Copilot

🟡 Changes recommended

Document metadata contrast falls below WCAG AA requirements on both normal and hover/focus backgrounds.

1 open finding

Increase file metadata text contrast to meet WCAG AA · New

What changed in this PR

Adds related documentation to the React demo’s product research cards, using documents supplied by the agent and mock service.

Changes:

Renders document rows with optional links, file types, and decimal file sizes.
Adds configurable document limits: 10 by default, 5 in the demo.
Extends tests and updates the component documentation.

File	Description
samples/thermidor/demo-schema-react/src/components/AppShell.tsx	Limits displayed documents to five.
samples/thermidor/demo-schema-react/src/a2ui/ProductResearchCard/ProductResearchCard.tsx	Renders documents and formats sizes.
samples/thermidor/demo-schema-react/src/a2ui/ProductResearchCard/ProductResearchCard.test.tsx	Tests rendering, limits, and formatting.
samples/thermidor/demo-schema-react/src/a2ui/ProductResearchCard/ProductResearchCard.module.css	Styles document rows and interaction states.
samples/thermidor/demo-schema-react/src/a2ui/mount-surface.harness.tsx	Supports catalog options in tests.
samples/thermidor/demo-schema-react/src/a2ui/icons/index.ts	Exports the file icon.
samples/thermidor/demo-schema-react/src/a2ui/icons/FileIcon.tsx	Adds a decorative document icon.
samples/thermidor/demo-schema-react/src/a2ui/components.tsx	Passes options to the research-card factory.
samples/thermidor/demo-schema-react/README.md	Documents the related-document input.

🧠 Review effort: Balanced

The file type and size line used the muted text colour, below WCAG AA contrast on the row and its hover background. It now uses the secondary text colour. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dguerinCoveo deployed to pr-workflows October 14, 2026 17:52 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 14, 2026 17:53 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 14, 2026 17:54 — with GitHub Actions Active

dguerinCoveo deployed to pr-workflows October 14, 2026 19:43 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 14, 2026 19:44 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 14, 2026 19:46 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 14, 2026 19:54 — with GitHub Actions Active

fbeaudoincoveo reviewed Oct 15, 2026

View reviewed changes

dguerinCoveo deployed to pr-workflows October 16, 2026 14:42 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 14:43 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 14:45 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 14:54 — with GitHub Actions Active

dguerinCoveo force-pushed the feat/research-card-related-documents branch from f84da2e to d2ba2b3 Compare October 16, 2026 16:08

dguerinCoveo deployed to pr-workflows October 16, 2026 16:08 — with GitHub Actions Active

coveo-code-areas-pr-checks Bot added area:node-dependencies team:dxui labels Oct 16, 2026

dguerinCoveo deployed to PR Artifacts October 16, 2026 16:09 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 16:13 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 16:22 — with GitHub Actions Active

dguerinCoveo deployed to pr-workflows October 16, 2026 17:14 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:14 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:19 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:28 — with GitHub Actions Active

dguerinCoveo and others added 6 commits October 16, 2026 13:30

feat(demo-schema-react): show 5 related documents in the demo

2b5df49

The demo creates its catalog with productResearchCard.maxLinks set to 5. The component default stays 10. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

fix(demo-schema-react): key related documents by index, without perma…

a5f68e0

…nentid thermidor-schema#152 ships related documents without permanentid, and only title is required, so file type and size are optional in the list. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

refactor(demo-schema-react): drop the unused research card exports

036357d

The catalog builds the card through createProductResearchCard, so the prebuilt ProductResearchCard and the exported default limit are unused. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dguerinCoveo force-pushed the feat/research-card-related-documents branch from bb4a65a to 21fb08e Compare October 16, 2026 17:30

dguerinCoveo mentioned this pull request Oct 16, 2026

feat(platform-mock-api): simulate research card related documents in the mock converse service j:SVCC-6607 #8710

Open

1 of 2 tasks

dguerinCoveo deployed to pr-workflows October 16, 2026 17:30 — with GitHub Actions Active

dguerinCoveo changed the base branch from main to feat/mock-research-related-documents October 16, 2026 17:30

coveo-code-areas-pr-checks Bot removed team:dxui area:node-dependencies labels Oct 16, 2026

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:31 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:34 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:43 — with GitHub Actions Active

dguerinCoveo added this pull request to stack #8711 October 16, 2026 17:48

dguerinCoveo marked this pull request as ready for review October 16, 2026 17:49

Copilot AI balanced review requested due to automatic review settings October 16, 2026 17:49

dguerinCoveo requested a review from fbeaudoincoveo October 16, 2026 17:50

Copilot started reviewing on behalf of dguerinCoveo October 16, 2026 17:50

View session

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Comment thread samples/thermidor/demo-schema-react/src/a2ui/ProductResearchCard/ProductResearchCard.module.css Outdated

fix(demo-schema-react): raise the related document metadata contrast

a113755

The file type and size line used the muted text colour, below WCAG AA contrast on the row and its hover background. It now uses the secondary text colour. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dguerinCoveo deployed to pr-workflows October 16, 2026 17:56 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:57 — with GitHub Actions Active

dguerinCoveo deployed to PR Artifacts October 16, 2026 17:58 — with GitHub Actions Active

Navigation Menu

Repository navigation

feat(demo-schema-react): render the research card related documents - #8675

feat(demo-schema-react): render the research card related documents#8675
dguerinCoveo wants to merge 8 commits into
feat/mock-research-related-documentsfrom
feat/research-card-related-documents

dguerinCoveo commented Oct 14, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

svcsnykcoveo commented Oct 14, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

chromatic-com Bot commented Oct 14, 2026

All tests passed and all changes approved!

Uh oh!

chromatic-com Bot commented Oct 14, 2026 •

edited

Loading

All tests passed and all changes approved!

Uh oh!

github-actions Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

fbeaudoincoveo left a comment

Uh oh!

dguerinCoveo commented Oct 16, 2026 •

edited by atlassian Bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

dguerinCoveo commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jira

Motivation

Changes

Details

Validation

Screenshots

Checklist

Uh oh!

changeset-bot Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

svcsnykcoveo commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

pkg-pr-new Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chromatic-com Bot commented Oct 14, 2026

All tests passed and all changes approved!

Uh oh!

chromatic-com Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All tests passed and all changes approved!

Uh oh!

github-actions Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fbeaudoincoveo left a comment

Choose a reason for hiding this comment

Uh oh!

dguerinCoveo commented Oct 16, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dguerinCoveo commented Oct 14, 2026 •

edited

Loading

changeset-bot Bot commented Oct 14, 2026 •

edited

Loading

svcsnykcoveo commented Oct 14, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 14, 2026 •

edited

Loading

chromatic-com Bot commented Oct 14, 2026 •

edited

Loading

github-actions Bot commented Oct 14, 2026 •

edited

Loading

dguerinCoveo commented Oct 16, 2026 •

edited by atlassian Bot

Loading