@eeacms/volto-cca-policy 1.0.13 → 1.0.15

package/.eslintrc.js

@@ -40,7 +40,7 @@ const defaultConfig = {
           ['@root', `${__dirname}/src`],
           ['~', `${__dirname}/src`],
         ],
-        extensions: ['.js', '.jsx', '.json'],
+        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
       },
       'babel-plugin-root-import': {
         rootPathSuffix: 'src',

package/CHANGELOG.md

@@ -4,6 +4,39 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.15](https://github.com/eea/volto-cca-policy/compare/1.0.14...1.0.15) - 4 September 2026
+
+#### :rocket: New Features
+
+- feat: implement suggested next steps callout in catalogue chatbot [Tiberiu Ichim - [`ec91671`](https://github.com/eea/volto-cca-policy/commit/ec91671e11f232e59431a26108d82f342f439fef)]
+- feat: match chatbot document cards to navigator catalogue cards [Tiberiu Ichim - [`39b21c0`](https://github.com/eea/volto-cca-policy/commit/39b21c071d7e7943dffdb6a9fcdf2dcb61a92601)]
+- feat: register CCA 'catalogue' chatbot presentation variation [Tiberiu Ichim - [`1eb8690`](https://github.com/eea/volto-cca-policy/commit/1eb86902968225d20a77c6aa99488ca957c52b2d)]
+
+#### :bug: Bug Fixes
+
+- fix: eliminate regex backtracking / ReDoS vulnerabilities flagged by SonarQube [Tiberiu Ichim - [`728ef5f`](https://github.com/eea/volto-cca-policy/commit/728ef5f63dc1ae07881f647963347c99a83bd019)]
+- fix: tolerate older chatbot without ChatMessageContext export [Tiberiu Ichim - [`be7f1d0`](https://github.com/eea/volto-cca-policy/commit/be7f1d06f70cdae46bcb532cae170fba6c3e9adb)]
+- fix: let eslint alias resolver resolve .ts/.tsx entrypoints (chatbot deep imports) [Tiberiu Ichim - [`a007606`](https://github.com/eea/volto-cca-policy/commit/a007606cf127183fb2830e02f18c18f0a85d1137)]
+- fix: declare @eeacms/volto-eea-chatbot dependency (CI lint resolution) [Tiberiu Ichim - [`dcb9759`](https://github.com/eea/volto-cca-policy/commit/dcb9759c97a7585e4c3e309fbe382767c8c276be)]
+- fix: align the "Compare" checkbox label in chat doc cards [Tiberiu Ichim - [`f00333c`](https://github.com/eea/volto-cca-policy/commit/f00333c735f94b587a2f03fcf4794036caafd59b)]
+- fix: style chat doc cards & robust marker matching [Tiberiu Ichim - [`2eede11`](https://github.com/eea/volto-cca-policy/commit/2eede11a5c9f4b0f309fe2b3cc3c6470d1a4606f)]
+
+#### :nail_care: Enhancements
+
+- perf: stop doc-card flicker while the answer streams [Tiberiu Ichim - [`5f5761c`](https://github.com/eea/volto-cca-policy/commit/5f5761c9534d1c64fc222510a0bacb5cd25ade68)]
+- refactor: base catalogue chat on the classic ChatWindow [Tiberiu Ichim - [`2511c11`](https://github.com/eea/volto-cca-policy/commit/2511c115b9ee4b825293e08501f3d989ad07b5b3)]
+
+#### :house: Internal changes
+
+- chore: require @eeacms/volto-eea-chatbot ^4.1.0 (block presentation variations) [Tiberiu Ichim - [`03a9fa3`](https://github.com/eea/volto-cca-policy/commit/03a9fa3b538429b81667300ebcac3130f9103092)]
+
+#### :hammer_and_wrench: Others
+
+- test: add unit tests for the chatbot catalogue variation [Tiberiu Ichim - [`67025f9`](https://github.com/eea/volto-cca-policy/commit/67025f92ba74bade06bcca26fcd8e11bd2825efa)]
+- perf: stop doc-card flicker while the answer streams [Tiberiu Ichim - [`5f5761c`](https://github.com/eea/volto-cca-policy/commit/5f5761c9534d1c64fc222510a0bacb5cd25ade68)]
+- fix+feat: catalogue presentation — live streaming, block data, document cards [Tiberiu Ichim - [`e1a9f7a`](https://github.com/eea/volto-cca-policy/commit/e1a9f7a8eaacbf850b3069f34716b12ad1af0a8d)]
+### [1.0.14](https://github.com/eea/volto-cca-policy/compare/1.0.13...1.0.14) - 1 September 2026
+
 ### [1.0.13](https://github.com/eea/volto-cca-policy/compare/1.0.12...1.0.13) - 31 August 2026
 
 #### :hammer_and_wrench: Others
@@ -307,8 +340,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test: pin Chromium version 149 to work with Cypress [valentinab25 - [`659ec82`](https://github.com/eea/volto-cca-policy/commit/659ec823dd71fe592a3a7accda22effbe1fb07bc)]
-## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.26...1.0.0) - 12 June 2026
+## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.27...1.0.0) - 12 June 2026
+
+### [1.0.0-alpha.27](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.26...1.0.0-alpha.27) - 31 August 2026
+
+#### :hammer_and_wrench: Others
 
+- Refs #307732 - Remove volto-banner override. [GhitaB - [`44250da`](https://github.com/eea/volto-cca-policy/commit/44250da7145a69be41f6a4f11c84ef7c4a62d5c9)]
 ### [1.0.0-alpha.26](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.25...1.0.0-alpha.26) - 28 August 2026
 
 ### [1.0.0-alpha.25](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.24...1.0.0-alpha.25) - 27 August 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,6 +17,7 @@
     "url": "git@github.com:eea/volto-cca-policy.git"
   },
   "addons": [
+    "@eeacms/volto-eea-chatbot",
     "@eeacms/volto-openlayers-map",
     "@eeacms/volto-slate-label",
     "@eeacms/volto-datablocks",
@@ -29,6 +30,7 @@
   ],
   "dependencies": {
     "@eeacms/volto-datablocks": "*",
+    "@eeacms/volto-eea-chatbot": "^4.1.0",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-embed": "*",

package/src/components/manage/Blocks/ChatbotCatalogue/CatalogueChatView.jsx

@@ -0,0 +1,48 @@
+import { ChatWindow } from '@eeacms/volto-eea-chatbot/ChatBlock/chat';
+
+import { CcaDocCard } from './DocumentCard';
+import { remarkCcaDocCards } from './docCards';
+import { remarkCcaNextSteps } from './nextSteps';
+import SuggestedNextSteps from './SuggestedNextSteps';
+import './catalogue-chat.less';
+
+// Stable object/component identity so react-markdown does not treat the
+// custom element as a new component type on every render.
+const extraMarkdownComponents = {
+  'cca-doc-card': CcaDocCard,
+  'cca-suggested-next-steps': SuggestedNextSteps,
+};
+
+const extraRemarkPlugins = [remarkCcaDocCards, remarkCcaNextSteps];
+
+/**
+ * The CCA "catalogue" presentation for the AI Chatbot block.
+ *
+ * It reuses the classic `ChatWindow` (and therefore keeps all the classic
+ * functionality — the "Thinking"/tools accordion, styled "New chat" button,
+ * streaming placeholder, quality check, related questions, feedback, etc.)
+ * and only customises two things:
+ *
+ *  1. `hideSourcesTab` — the classic "Sources" tab/sidebar/inline list is
+ *     suppressed, because the cited documents are presented as inline
+ *     catalogue cards instead.
+ *  2. `extraRemarkPlugins` + `extraMarkdownComponents` — the
+ *     `![[doc: Title]]` markers in the answer text (see `docCards.js`) are
+ *     turned into inline Navigator-style catalogue cards (`CcaDocCard`),
+ *     and "Suggested next steps" sections are turned into styled callout boxes.
+ *
+ * `ChatBlockView` renders this as `<Presentation persona {...blockData} />`,
+ * so all block fields arrive as top-level props and are forwarded unchanged.
+ */
+function CatalogueChatView(props) {
+  return (
+    <ChatWindow
+      {...props}
+      hideSourcesTab
+      extraRemarkPlugins={extraRemarkPlugins}
+      extraMarkdownComponents={extraMarkdownComponents}
+    />
+  );
+}
+
+export default CatalogueChatView;

package/src/components/manage/Blocks/ChatbotCatalogue/CatalogueChatView.test.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+import { ChatWindow } from '@eeacms/volto-eea-chatbot/ChatBlock/chat';
+import { remarkCcaDocCards } from './docCards';
+import { remarkCcaNextSteps } from './nextSteps';
+import CatalogueChatView from './CatalogueChatView';
+
+jest.mock('@eeacms/volto-eea-chatbot/ChatBlock/chat', () => ({
+  ChatWindow: jest.fn((props) => (
+    <div
+      data-testid="chat-window"
+      data-hide-sources-tab={String(props.hideSourcesTab)}
+      data-persona={props.persona?.name || ''}
+    />
+  )),
+}));
+
+describe('CatalogueChatView', () => {
+  beforeEach(() => {
+    ChatWindow.mockClear();
+  });
+
+  it('forwards the block fields (top-level props) to the classic ChatWindow', () => {
+    const { getByTestId } = render(
+      <CatalogueChatView
+        persona={{ name: 'Assistanta' }}
+        block_id="block-1"
+        assistant="57"
+      />,
+    );
+    const chatWindow = getByTestId('chat-window');
+    expect(chatWindow).toHaveAttribute('data-persona', 'Assistanta');
+    expect(ChatWindow.mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        persona: { name: 'Assistanta' },
+        block_id: 'block-1',
+        assistant: '57',
+      }),
+    );
+  });
+
+  it('suppresses the classic sources UI', () => {
+    const { getByTestId } = render(<CatalogueChatView persona={{}} />);
+    expect(getByTestId('chat-window')).toHaveAttribute(
+      'data-hide-sources-tab',
+      'true',
+    );
+  });
+
+  it('plugs the doc-card and next-steps remark plugins and components', () => {
+    render(<CatalogueChatView persona={{}} />);
+    const { extraRemarkPlugins, extraMarkdownComponents } =
+      ChatWindow.mock.calls[0][0];
+    expect(extraRemarkPlugins).toEqual([remarkCcaDocCards, remarkCcaNextSteps]);
+    expect(typeof extraMarkdownComponents['cca-doc-card']).toBe('function');
+    expect(typeof extraMarkdownComponents['cca-suggested-next-steps']).toBe(
+      'function',
+    );
+  });
+
+  it('keeps the extraMarkdownComponents and extraRemarkPlugins identity stable across renders', () => {
+    const { rerender } = render(<CatalogueChatView persona={{}} />);
+    const firstMd = ChatWindow.mock.calls[0][0].extraMarkdownComponents;
+    const firstPlugins = ChatWindow.mock.calls[0][0].extraRemarkPlugins;
+    rerender(<CatalogueChatView persona={{}} />);
+    const secondMd = ChatWindow.mock.calls[1][0].extraMarkdownComponents;
+    const secondPlugins = ChatWindow.mock.calls[1][0].extraRemarkPlugins;
+    expect(secondMd).toBe(firstMd);
+    expect(secondPlugins).toBe(firstPlugins);
+  });
+});

package/src/components/manage/Blocks/ChatbotCatalogue/DocumentCard.jsx

@@ -0,0 +1,226 @@
+import React, { useContext, memo } from 'react';
+import { Icon } from 'semantic-ui-react';
+import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
+
+import NavigatorCatalogueCardItem from '@eeacms/volto-cca-policy/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem';
+// The `ChatMessageContext` seam only exists in @eeacms/volto-eea-chatbot from
+// the release that follows the "block variations" work
+// (eea/volto-eea-chatbot#32). Environments that resolve the published ^4.0.0
+// package (e.g. the standalone CI build) don't have the named export, and a
+// static named import would make webpack fail the whole app build there. So
+// import the module namespace instead and degrade gracefully when the seam
+// is missing (the cards then fall back to the basic metadata card).
+import * as ChatBlockChat from '@eeacms/volto-eea-chatbot/ChatBlock/chat';
+import { useCatalogueDoc } from './useCatalogueDoc';
+
+// Fall back to an inert context (default value `undefined`) when the seam is
+// absent, so `useContext` below is always called with a stable context object.
+const ChatMessageContext =
+  ChatBlockChat.ChatMessageContext || React.createContext(undefined);
+
+/**
+ * Clean page titles returned from Onyx/scrapers that append pipeline/section suffixes,
+ * e.g. "Climate policy radar | Tools | Discover the key services...".
+ */
+export function cleanDocumentTitle(title) {
+  if (!title || typeof title !== 'string') return '';
+  const pipeIndex = title.indexOf('|');
+  const firstPart = pipeIndex === -1 ? title : title.slice(0, pipeIndex);
+  return firstPart.trim() || title.trim();
+}
+
+/**
+ * Robust title matching between the assistant's marker and the message's cited documents.
+ * Tolerates case differences, clean vs noisy pipeline titles, and prefixes.
+ */
+export function matchesDocumentTitle(docTitle, searchTitle) {
+  if (!docTitle || !searchTitle) return false;
+  const d1 = docTitle.trim().toLowerCase();
+  const s1 = searchTitle.trim().toLowerCase();
+  if (d1 === s1) return true;
+
+  const dClean = cleanDocumentTitle(docTitle).toLowerCase();
+  const sClean = cleanDocumentTitle(searchTitle).toLowerCase();
+  if (dClean && sClean && dClean === sClean) return true;
+
+  if (d1.startsWith(sClean) || s1.startsWith(dClean)) return true;
+  if (
+    dClean &&
+    sClean &&
+    (dClean.includes(sClean) || sClean.includes(dClean))
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function formatDate(value) {
+  if (!value) return null;
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return null;
+  return d.toLocaleDateString('en-GB', {
+    day: '2-digit',
+    month: 'short',
+    year: '2-digit',
+  });
+}
+
+// `InlineDocCard` rebuilds the `source` object on every render (the answer is
+// re-rendered on each streaming tick), so a plain `===` prop comparison would
+// never memoize. Compare the actual fields instead.
+function sourceEqual(prevSource, nextSource) {
+  return (
+    prevSource?.semantic_identifier === nextSource?.semantic_identifier &&
+    prevSource?.blurb === nextSource?.blurb &&
+    prevSource?.updated_at === nextSource?.updated_at &&
+    prevSource?.source_type === nextSource?.source_type &&
+    prevSource?.link === nextSource?.link
+  );
+}
+
+function sourcePropsEqual(prev, next) {
+  return prev.index === next.index && sourceEqual(prev.source, next.source);
+}
+
+/**
+ * Document card styled to match the Navigator catalogue cards
+ * (volto-cca-policy NavigatorCatalogueCardItem), used when full searchlib
+ * metadata is not yet loaded or for external/unindexed sources.
+ */
+const DocumentCard = memo(function DocumentCard({ source, index }) {
+  if (!source || typeof source !== 'object' || !source.semantic_identifier) {
+    return null;
+  }
+  const {
+    semantic_identifier: rawTitle,
+    blurb,
+    updated_at,
+    source_type,
+    link,
+  } = source;
+  const isWeb = source_type === 'web';
+  const title = cleanDocumentTitle(rawTitle);
+  const formattedDate = formatDate(updated_at);
+  const typeLabel = isWeb ? 'Web' : 'Document';
+
+  return (
+    <div className="catalogue-chat-navigator-card">
+      <div className="navigator-catalogue-item">
+        <div className="navigator-tool-icon large" aria-hidden="true">
+          <Icon className="ri-file-line" />
+        </div>
+
+        <div className="catalogue-item-main">
+          <div className="catalogue-item-top">
+            <div className="navigator-tool-provider">
+              {typeof index === 'number' && (
+                <span className="chat-citation">{index} </span>
+              )}
+              {typeLabel}
+            </div>
+            {formattedDate && (
+              <span className="catalogue-date">{formattedDate}</span>
+            )}
+          </div>
+
+          <div className="catalogue-item-heading">
+            <h4>
+              {link ? (
+                <ExternalLink href={link} title={title}>
+                  {title}
+                </ExternalLink>
+              ) : (
+                <span title={title}>{title}</span>
+              )}
+            </h4>
+          </div>
+
+          {blurb && <p className="catalogue-description">{blurb}</p>}
+
+          <div className="catalogue-item-footer">
+            <div className="catalogue-meta license-type">
+              <span className="catalogue-type">Type: {typeLabel}</span>
+            </div>
+
+            <div className="catalogue-actions">
+              {link && (
+                <ExternalLink
+                  href={link}
+                  className="ui button primary icon"
+                  labelPosition="left"
+                >
+                  View
+                  <Icon className="ri-arrow-right-line" />
+                </ExternalLink>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}, sourcePropsEqual);
+
+/**
+ * Document card that upgrades itself: while it has only the Onyx-provided
+ * fields it renders the basic `DocumentCard`; once the globalsearch ES
+ * lookup (by document URL) resolves it re-renders as the full Navigator
+ * catalogue card.
+ *
+ * Memoized: the answer markdown is re-rendered on every streaming tick, but
+ * the (already-shown, potentially heavy) card should only re-render when its
+ * own data changes, not on every tick. Its own basic→full upgrade is driven
+ * by internal state, which still re-renders it exactly once.
+ */
+const EnhancedDocCard = memo(function EnhancedDocCard({ source, index }) {
+  const { result } = useCatalogueDoc(source?.link);
+
+  if (result) {
+    return (
+      <div className="catalogue-chat-navigator-card">
+        <NavigatorCatalogueCardItem result={result} />
+      </div>
+    );
+  }
+  return <DocumentCard source={source} index={index} />;
+}, sourcePropsEqual);
+
+/**
+ * Inline document card, rendered in the message text where the assistant
+ * emitted a `![[doc: Title]]` marker (see docCards.js). Tries to match the
+ * title against the message's cited documents to enrich with link/blurb.
+ */
+export function InlineDocCard({ title, documents = [] }) {
+  const doc = (documents || []).find(
+    (d) =>
+      d.semantic_identifier &&
+      title &&
+      matchesDocumentTitle(d.semantic_identifier, title),
+  );
+  const source = {
+    semantic_identifier: title,
+    blurb: doc?.blurb,
+    updated_at: doc?.updated_at,
+    source_type: doc?.source_type,
+    link: doc?.link,
+  };
+  return (
+    <div className="catalogue-chat-card-inline">
+      <EnhancedDocCard source={source} />
+    </div>
+  );
+}
+
+/**
+ * Stable react-markdown component for the `cca-doc-card` element emitted by
+ * the `remarkCcaDocCards` plugin. It reads the owning message from
+ * `ChatMessageContext` (set by the core `ChatMessage`) to match the marker
+ * title against that message's cited documents.
+ *
+ * Kept as a top-level (stable) component type so react does not remount it
+ * on every render while the answer streams.
+ */
+export function CcaDocCard({ title }) {
+  const message = useContext(ChatMessageContext);
+  return <InlineDocCard title={title} documents={message?.documents} />;
+}

package/src/components/manage/Blocks/ChatbotCatalogue/DocumentCard.test.jsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+
+import { ChatMessageContext } from '@eeacms/volto-eea-chatbot/ChatBlock/chat';
+import { useCatalogueDoc } from './useCatalogueDoc';
+import { CcaDocCard, InlineDocCard } from './DocumentCard';
+
+jest.mock('@eeacms/volto-eea-chatbot/ChatBlock/chat', () => ({
+  ChatMessageContext:
+    // eslint-disable-next-line global-require
+    require('react').createContext(null),
+}));
+
+jest.mock(
+  '@eeacms/volto-cca-policy/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem',
+  () =>
+    ({ result }) => <div data-testid="navigator-card" />,
+);
+
+jest.mock('./useCatalogueDoc', () => ({
+  useCatalogueDoc: jest.fn(() => ({ result: null, loading: true })),
+}));
+
+const doc = {
+  semantic_identifier: 'France: National Adaptation Strategy',
+  blurb: 'The French NAS.',
+  updated_at: '2023-05-01T00:00:00Z',
+  source_type: 'document',
+  link: 'https://example.com/france-nas',
+};
+
+const webDoc = {
+  semantic_identifier: 'Some Web Source',
+  blurb: 'A web page.',
+  updated_at: '2023-05-01T00:00:00Z',
+  source_type: 'web',
+  link: 'https://example.com/web',
+};
+
+describe('InlineDocCard', () => {
+  beforeEach(() => {
+    useCatalogueDoc.mockReset();
+    useCatalogueDoc.mockReturnValue({ result: null, loading: true });
+  });
+
+  it('renders a basic card with the marker title when no document matches', () => {
+    render(<InlineDocCard title="Unknown Title" documents={[doc]} />);
+    expect(screen.getByText('Unknown Title')).toBeInTheDocument();
+    expect(screen.getByText('Document')).toBeInTheDocument();
+    expect(screen.queryByText('The French NAS.')).not.toBeInTheDocument();
+  });
+
+  it('matches the title case-insensitively and enriches with the document metadata', () => {
+    render(
+      <InlineDocCard
+        title="  france: NATIONAL adaptation strategy  "
+        documents={[doc]}
+      />,
+    );
+    expect(screen.getByText('The French NAS.')).toBeInTheDocument();
+    expect(screen.getByText('01 May 23')).toBeInTheDocument();
+  });
+
+  it('renders the title as a link for web documents', () => {
+    render(<InlineDocCard title="Some Web Source" documents={[webDoc]} />);
+    const link = screen.getByRole('link', { name: 'Some Web Source' });
+    expect(link).toHaveAttribute('href', 'https://example.com/web');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(screen.getByText('Web')).toBeInTheDocument();
+  });
+
+  it('omits the date when updated_at is missing or invalid', () => {
+    const noDate = { ...doc, updated_at: undefined };
+    render(
+      <InlineDocCard title={doc.semantic_identifier} documents={[noDate]} />,
+    );
+    expect(screen.queryByText('01 May 23')).not.toBeInTheDocument();
+    cleanup();
+
+    const badDate = { ...doc, updated_at: 'not-a-date' };
+    render(
+      <InlineDocCard title={doc.semantic_identifier} documents={[badDate]} />,
+    );
+    expect(screen.queryByText('01 May 23')).not.toBeInTheDocument();
+    cleanup();
+
+    render(<InlineDocCard title={doc.semantic_identifier} documents={[]} />);
+    expect(screen.getByText(doc.semantic_identifier)).toBeInTheDocument();
+  });
+
+  it('upgrades to the full Navigator card once the ES lookup resolves', () => {
+    useCatalogueDoc.mockReturnValue({
+      result: { found: true, uid: 'https://example.com/france-nas' },
+      loading: false,
+    });
+    render(<InlineDocCard title={doc.semantic_identifier} documents={[doc]} />);
+    expect(screen.getByTestId('navigator-card')).toBeInTheDocument();
+    expect(useCatalogueDoc).toHaveBeenCalledWith(doc.link);
+  });
+
+  it('cleans pipeline title noise and matches cleanly', () => {
+    const noisyDoc = {
+      ...doc,
+      semantic_identifier:
+        'Climate policy radar | Tools | Discover the key services, thematic features and tools of Climate-ADAPT Climate-ADAPT',
+    };
+    render(
+      <InlineDocCard title="Climate policy radar" documents={[noisyDoc]} />,
+    );
+    expect(screen.getByText('Climate policy radar')).toBeInTheDocument();
+    expect(screen.getByText('The French NAS.')).toBeInTheDocument();
+  });
+
+  it('renders a View button when link is present', () => {
+    render(<InlineDocCard title="Some Web Source" documents={[webDoc]} />);
+    const viewButton = screen.getByRole('link', { name: 'View' });
+    expect(viewButton).toHaveAttribute('href', 'https://example.com/web');
+    expect(viewButton).toHaveClass('ui button primary icon');
+  });
+
+  it('calls the lookup with the document link (or undefined) from the card', () => {
+    useCatalogueDoc.mockReturnValue({ result: null, loading: true });
+    render(<InlineDocCard title="No Match" documents={[]} />);
+    expect(useCatalogueDoc).toHaveBeenCalledWith(undefined);
+  });
+});
+
+describe('CcaDocCard', () => {
+  it('matches the marker against the owning message documents via context', () => {
+    render(
+      <ChatMessageContext.Provider value={{ documents: [doc] }}>
+        <CcaDocCard title={doc.semantic_identifier} />
+      </ChatMessageContext.Provider>,
+    );
+    expect(screen.getByText('The French NAS.')).toBeInTheDocument();
+  });
+
+  it('falls back to the basic card when the message context is absent', () => {
+    render(<CcaDocCard title={doc.semantic_identifier} />);
+    expect(screen.getByText(doc.semantic_identifier)).toBeInTheDocument();
+    expect(screen.queryByText('The French NAS.')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the basic card when the message has no documents', () => {
+    render(
+      <ChatMessageContext.Provider value={{ documents: [] }}>
+        <CcaDocCard title={doc.semantic_identifier} />
+      </ChatMessageContext.Provider>,
+    );
+    expect(screen.queryByText('The French NAS.')).not.toBeInTheDocument();
+  });
+});

package/src/components/manage/Blocks/ChatbotCatalogue/SuggestedNextSteps.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+
+/**
+ * Renders the "Suggested next steps" callout box in the CCA chatbot
+ * catalogue presentation.
+ */
+function SuggestedNextSteps({ title = 'Suggested next steps', children }) {
+  return (
+    <div className="cca-suggested-next-steps">
+      <div className="cca-suggested-next-steps-header">
+        <Icon className="ri-list-check-2" aria-hidden="true" />
+        <span className="cca-suggested-next-steps-title">{title}</span>
+      </div>
+      <div className="cca-suggested-next-steps-content">{children}</div>
+    </div>
+  );
+}
+
+export default SuggestedNextSteps;

package/src/components/manage/Blocks/ChatbotCatalogue/SuggestedNextSteps.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import SuggestedNextSteps from './SuggestedNextSteps';
+
+describe('SuggestedNextSteps component', () => {
+  it('renders default title and icon', () => {
+    const { container } = render(
+      <SuggestedNextSteps>
+        <ol>
+          <li>Step one</li>
+        </ol>
+      </SuggestedNextSteps>,
+    );
+
+    expect(screen.getByText('Suggested next steps')).toBeInTheDocument();
+    expect(screen.getByText('Step one')).toBeInTheDocument();
+
+    const icon = container.querySelector('.ri-list-check-2');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('renders custom title when provided', () => {
+    render(
+      <SuggestedNextSteps title="How to use them">
+        <p>Follow instructions.</p>
+      </SuggestedNextSteps>,
+    );
+
+    expect(screen.getByText('How to use them')).toBeInTheDocument();
+    expect(screen.getByText('Follow instructions.')).toBeInTheDocument();
+  });
+});