@eeacms/volto-cca-policy 1.0.13 → 1.0.15

package/src/components/manage/Blocks/ChatbotCatalogue/catalogue-chat.less

@@ -0,0 +1,136 @@
+// Styles for the inline document cards in the CCA "catalogue" chatbot
+// presentation. The rest of the chat layout (conversation, rows, user
+// bubbles, "New chat" button, streaming placeholder, ...) is provided by the
+// classic chatbot `style.less` because this variation reuses the classic
+// `ChatWindow`.
+
+.catalogue-chat-navigator-card {
+  width: 100%;
+
+  .navigator-catalogue-item {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.catalogue-chat-card-inline {
+  margin: 8px 0;
+}
+
+// Basic fallback card, shown until the globalsearch `_doc` lookup (by URL)
+// resolves and upgrades it to the full Navigator card.
+.catalogue-chat-card {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: white;
+  gap: 6px;
+
+  &:hover {
+    border-color: #0067b1;
+  }
+
+  .catalogue-chat-card-header {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+
+    .chat-citation {
+      cursor: default;
+    }
+  }
+
+  .catalogue-chat-card-title {
+    color: #0067b1;
+    font-weight: 600;
+    line-height: 1.3;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .catalogue-chat-card-blurb {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    color: #555;
+    font-size: 0.85em;
+    -webkit-line-clamp: 3;
+  }
+
+  .catalogue-chat-card-footer {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 6px;
+    border-top: 1px solid #eee;
+    margin-top: auto;
+    color: #888;
+    font-size: 0.75em;
+  }
+}
+
+// "Suggested next steps" callout box
+.cca-suggested-next-steps {
+  padding: 1rem 1.25rem;
+  border: 1px solid #dbe7e1;
+  border-radius: 8px;
+  margin: 1.25rem 0;
+  background-color: #f4f9f7;
+
+  .cca-suggested-next-steps-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    gap: 0.5rem;
+
+    .icon {
+      margin: 0;
+      color: #008369;
+      font-size: 1.25rem;
+      line-height: 1;
+    }
+
+    .cca-suggested-next-steps-title {
+      color: #004b3b;
+      font-size: 1rem;
+      font-weight: 600;
+      line-height: 1.3;
+    }
+  }
+
+  .cca-suggested-next-steps-content {
+    ol,
+    ul {
+      padding-left: 1.25rem;
+      margin: 0;
+
+      li {
+        margin-bottom: 0.5rem;
+        color: #333;
+        line-height: 1.5;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        strong {
+          color: #111;
+          font-weight: 600;
+        }
+      }
+    }
+
+    p {
+      margin-bottom: 0.5rem;
+      color: #333;
+      line-height: 1.5;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

package/src/components/manage/Blocks/ChatbotCatalogue/docCards.js

@@ -0,0 +1,74 @@
+/**
+ * Remark plugin: converts `![[doc: Document Title]]` markers in the answer
+ * text into custom `cca-doc-card` elements.
+ *
+ * react-markdown maps the custom element (via `data.hName`) to a component
+ * supplied by the caller through `extraMarkdownComponents`
+ * (see MessageTextRenderer pass-through in @eeacms/volto-eea-chatbot).
+ *
+ * Markers are matched in ANY text node (own line, inside list items,
+ * mid-sentence), not only whole paragraphs — the LLM does not always put
+ * them on a line of their own.
+ *
+ * The assistant is prompted (Onyx side) to list relevant documents with
+ * markers, e.g.:
+ *
+ *   ![[doc: Europe 2020: The EU's platform for climate action]]
+ *   ![[doc: France: National Adaptation Strategy]]
+ */
+
+const DOC_MARKER_RE = /!\[\[\s*doc:\s*([^\]\r\n]+)\]\]/g;
+
+function makeCardNode(title) {
+  return {
+    type: 'ccaDocCard',
+    value: title,
+    data: { hName: 'cca-doc-card', hProperties: { title } },
+  };
+}
+
+function walkNodes(children, visit) {
+  for (let i = 0; i < children.length; i += 1) {
+    const replaced = visit(children[i], i, children);
+    if (Array.isArray(replaced)) {
+      // Splice the replacement nodes in place of the visited one. The
+      // replacement nodes (text / ccaDocCard) have no children to walk.
+      children.splice(i, 1, ...replaced);
+      i += replaced.length - 1;
+    } else if (children[i].children) {
+      walkNodes(children[i].children, visit);
+    }
+  }
+}
+
+export const remarkCcaDocCards = () => (tree) => {
+  walkNodes(tree.children || [], (node) => {
+    if (node.type !== 'text' || typeof node.value !== 'string') {
+      return undefined;
+    }
+    DOC_MARKER_RE.lastIndex = 0;
+    if (!DOC_MARKER_RE.test(node.value)) {
+      return undefined;
+    }
+
+    const parts = [];
+    let last = 0;
+    let match;
+    DOC_MARKER_RE.lastIndex = 0;
+    while ((match = DOC_MARKER_RE.exec(node.value)) !== null) {
+      if (match.index > last) {
+        parts.push({
+          type: 'text',
+          value: node.value.slice(last, match.index),
+        });
+      }
+      parts.push(makeCardNode(match[1].trim()));
+      last = match.index + match[0].length;
+    }
+    if (last < node.value.length) {
+      parts.push({ type: 'text', value: node.value.slice(last) });
+    }
+    return parts;
+  });
+  return tree;
+};

package/src/components/manage/Blocks/ChatbotCatalogue/docCards.test.js

@@ -0,0 +1,145 @@
+import { remarkCcaDocCards } from './docCards';
+
+const applyPlugin = (tree) => remarkCcaDocCards()(tree);
+
+const cards = (tree) =>
+  tree.children.filter((n) => n.type === 'ccaDocCard').map((n) => n.value);
+
+const cardHNames = (tree) =>
+  tree.children.filter((n) => n.type === 'ccaDocCard').map((n) => n.data.hName);
+
+describe('remarkCcaDocCards', () => {
+  it('leaves text without markers untouched', () => {
+    const tree = {
+      type: 'root',
+      children: [{ type: 'text', value: 'No documents here.' }],
+    };
+    const result = applyPlugin(tree);
+    expect(result).toBe(tree);
+    expect(cards(result)).toHaveLength(0);
+  });
+
+  it('converts a marker on its own line into a cca-doc-card element', () => {
+    const tree = {
+      type: 'root',
+      children: [{ type: 'text', value: '![[doc: France NAS]]' }],
+    };
+    const result = applyPlugin(tree);
+    expect(result.children).toHaveLength(1);
+    expect(result.children[0]).toEqual({
+      type: 'ccaDocCard',
+      value: 'France NAS',
+      data: { hName: 'cca-doc-card', hProperties: { title: 'France NAS' } },
+    });
+    expect(cardHNames(result)).toEqual(['cca-doc-card']);
+  });
+
+  it('trims whitespace around the title', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        { type: 'text', value: '![[   doc:    Climate Action Plan   ]]' },
+      ],
+    };
+    const result = applyPlugin(tree);
+    expect(cards(result)).toEqual(['Climate Action Plan']);
+  });
+
+  it('keeps text before and after a mid-sentence marker', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'text',
+          value: 'See ![[doc: EU Adaptation Strategy]] for details, and more.',
+        },
+      ],
+    };
+    const result = applyPlugin(tree);
+    expect(result.children).toHaveLength(3);
+    expect(result.children[0]).toEqual({
+      type: 'text',
+      value: 'See ',
+    });
+    expect(result.children[1]).toEqual({
+      type: 'ccaDocCard',
+      value: 'EU Adaptation Strategy',
+      data: {
+        hName: 'cca-doc-card',
+        hProperties: { title: 'EU Adaptation Strategy' },
+      },
+    });
+    expect(result.children[2]).toEqual({
+      type: 'text',
+      value: ' for details, and more.',
+    });
+  });
+
+  it('converts several markers in the same text node', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'text',
+          value: '![[doc: One]]\n![[doc: Two]]',
+        },
+      ],
+    };
+    const result = applyPlugin(tree);
+    expect(cards(result)).toEqual(['One', 'Two']);
+  });
+
+  it('matches markers with a colon in the title', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        { type: 'text', value: '![[doc: Europe 2020: The EU platform]]' },
+      ],
+    };
+    const result = applyPlugin(tree);
+    expect(cards(result)).toEqual(['Europe 2020: The EU platform']);
+  });
+
+  it('converts markers nested inside list items', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'list',
+          children: [
+            {
+              type: 'listItem',
+              children: [
+                {
+                  type: 'paragraph',
+                  children: [
+                    { type: 'text', value: 'See ![[doc: France NAS]] too' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+    const result = applyPlugin(tree);
+    const paragraph = result.children[0].children[0].children[0];
+    expect(paragraph.children).toHaveLength(3);
+    expect(paragraph.children[1].type).toBe('ccaDocCard');
+    expect(paragraph.children[1].value).toBe('France NAS');
+    expect(paragraph.children[2]).toEqual({ type: 'text', value: ' too' });
+  });
+
+  it('ignores non-text nodes', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        { type: 'html', value: '![[doc: not a text node]]' },
+        { type: 'text', value: '![[doc: real]]' },
+      ],
+    };
+    const result = applyPlugin(tree);
+    expect(cards(result)).toEqual(['real']);
+    expect(result.children[0].value).toBe('![[doc: not a text node]]');
+  });
+});

package/src/components/manage/Blocks/ChatbotCatalogue/index.js

@@ -0,0 +1,24 @@
+import CatalogueChatView from './CatalogueChatView';
+
+/**
+ * Registers the CCA "catalogue" presentation variation on the AI Chatbot
+ * block (from @eeacms/volto-eea-chatbot).
+ *
+ * Pattern: cross-addon variation push, same as ./TabsBlock pushing the
+ * "spotlight" variation onto the tabs block.
+ */
+export default function applyConfig(config) {
+  const block = config.blocks.blocksConfig.eeaChatbot;
+  if (block) {
+    block.variations = block.variations || [];
+    if (!block.variations.find((v) => v.id === 'catalogue')) {
+      block.variations.push({
+        id: 'catalogue',
+        title: 'Catalogue (CCA)',
+        isDefault: false,
+        view: CatalogueChatView,
+      });
+    }
+  }
+  return config;
+}

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

@@ -0,0 +1,44 @@
+import applyConfig from './index';
+
+jest.mock('./CatalogueChatView', () => () => <div />);
+
+const makeConfig = (variations) => ({
+  blocks: {
+    blocksConfig: {
+      eeaChatbot: variations ? { variations } : {},
+    },
+  },
+});
+
+describe('ChatbotCatalogue applyConfig', () => {
+  it('registers the catalogue variation on the eeaChatbot block', () => {
+    const config = applyConfig(makeConfig());
+    const variations = config.blocks.blocksConfig.eeaChatbot.variations;
+    expect(variations).toHaveLength(1);
+    expect(variations[0]).toMatchObject({
+      id: 'catalogue',
+      title: 'Catalogue (CCA)',
+      isDefault: false,
+    });
+    expect(typeof variations[0].view).toBe('function');
+  });
+
+  it('does not register a duplicate when called twice', () => {
+    let config = applyConfig(makeConfig());
+    config = applyConfig(config);
+    const variations = config.blocks.blocksConfig.eeaChatbot.variations;
+    expect(variations.filter((v) => v.id === 'catalogue')).toHaveLength(1);
+  });
+
+  it('keeps existing variations and their order', () => {
+    const classic = { id: 'classic', isDefault: true, view: () => <div /> };
+    const config = applyConfig(makeConfig([classic]));
+    const variations = config.blocks.blocksConfig.eeaChatbot.variations;
+    expect(variations.map((v) => v.id)).toEqual(['classic', 'catalogue']);
+  });
+
+  it('is a no-op when the eeaChatbot block is not registered', () => {
+    const config = { blocks: { blocksConfig: {} } };
+    expect(applyConfig(config)).toEqual(config);
+  });
+});

package/src/components/manage/Blocks/ChatbotCatalogue/nextSteps.js

@@ -0,0 +1,79 @@
+/**
+ * Remark plugin: transforms "Suggested next steps" (or "How to use them")
+ * headings and their following lists/content into a custom
+ * `cca-suggested-next-steps` container element.
+ *
+ * react-markdown maps the custom element (via `data.hName`) to a component
+ * supplied by the caller through `extraMarkdownComponents`
+ * (see CatalogueChatView and MessageTextRenderer).
+ */
+
+export const NEXT_STEPS_HEADING_RE =
+  /^(suggested\s+next\s+steps|next\s+steps|how\s+to\s+use(\s+(them|these|this|the\s+tools))?)\b/i;
+
+export function getNodeText(node) {
+  if (!node) return '';
+  if (typeof node.value === 'string') return node.value;
+  if (Array.isArray(node.children)) {
+    return node.children.map(getNodeText).join('');
+  }
+  return '';
+}
+
+export function isNextStepsHeading(node) {
+  if (!node || node.type !== 'heading') return false;
+  const text = getNodeText(node).trim();
+  return NEXT_STEPS_HEADING_RE.test(text);
+}
+
+function transformContainer(children) {
+  for (let i = 0; i < children.length; i += 1) {
+    const node = children[i];
+    if (isNextStepsHeading(node)) {
+      const rawTitle = getNodeText(node).trim().replace(/:$/, '').trim();
+      const title = rawTitle || 'Suggested next steps';
+
+      const collected = [];
+      let j = i + 1;
+      while (j < children.length) {
+        const sibling = children[j];
+        if (
+          sibling.type === 'heading' ||
+          sibling.type === 'thematicBreak' ||
+          sibling.type === 'ccaDocCard'
+        ) {
+          break;
+        }
+        collected.push(sibling);
+        j += 1;
+      }
+
+      const containerNode = {
+        type: 'ccaNextSteps',
+        data: {
+          hName: 'cca-suggested-next-steps',
+          hProperties: {
+            title,
+          },
+        },
+        children: collected,
+      };
+
+      // Replace heading and all collected siblings with the container node
+      children.splice(i, 1 + collected.length, containerNode);
+    } else if (
+      node.children &&
+      Array.isArray(node.children) &&
+      node.type !== 'ccaNextSteps'
+    ) {
+      transformContainer(node.children);
+    }
+  }
+}
+
+export const remarkCcaNextSteps = () => (tree) => {
+  if (tree && Array.isArray(tree.children)) {
+    transformContainer(tree.children);
+  }
+  return tree;
+};

package/src/components/manage/Blocks/ChatbotCatalogue/nextSteps.test.js

@@ -0,0 +1,168 @@
+import {
+  remarkCcaNextSteps,
+  isNextStepsHeading,
+  getNodeText,
+} from './nextSteps';
+
+const applyPlugin = (tree) => remarkCcaNextSteps()(tree);
+
+describe('nextSteps utilities', () => {
+  it('extracts nested text recursively', () => {
+    const node = {
+      type: 'heading',
+      children: [
+        { type: 'text', value: 'Suggested ' },
+        {
+          type: 'strong',
+          children: [{ type: 'text', value: 'next steps' }],
+        },
+      ],
+    };
+    expect(getNodeText(node)).toBe('Suggested next steps');
+  });
+
+  it('recognises next steps heading patterns', () => {
+    const makeHeading = (text) => ({
+      type: 'heading',
+      depth: 3,
+      children: [{ type: 'text', value: text }],
+    });
+
+    expect(isNextStepsHeading(makeHeading('Suggested next steps'))).toBe(true);
+    expect(isNextStepsHeading(makeHeading('Suggested next steps:'))).toBe(true);
+    expect(isNextStepsHeading(makeHeading('### Suggested Next Steps'))).toBe(
+      false, // mdast value does not have ### prefixes
+    );
+    expect(isNextStepsHeading(makeHeading('Next steps'))).toBe(true);
+    expect(isNextStepsHeading(makeHeading('How to use them'))).toBe(true);
+    expect(isNextStepsHeading(makeHeading('How to use these tools'))).toBe(
+      true,
+    );
+    expect(isNextStepsHeading(makeHeading('Overview'))).toBe(false);
+    expect(isNextStepsHeading(makeHeading('Documents consulted'))).toBe(false);
+  });
+});
+
+describe('remarkCcaNextSteps plugin', () => {
+  it('leaves trees without matching headings untouched', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'paragraph',
+          children: [{ type: 'text', value: 'Regular paragraph' }],
+        },
+      ],
+    };
+    const result = applyPlugin(tree);
+    expect(result).toBe(tree);
+    expect(result.children).toHaveLength(1);
+    expect(result.children[0].type).toBe('paragraph');
+  });
+
+  it('transforms heading and following ordered list into ccaNextSteps container', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'paragraph',
+          children: [{ type: 'text', value: 'Here is an introduction.' }],
+        },
+        {
+          type: 'heading',
+          depth: 3,
+          children: [{ type: 'text', value: 'Suggested next steps' }],
+        },
+        {
+          type: 'list',
+          ordered: true,
+          children: [
+            {
+              type: 'listItem',
+              children: [
+                {
+                  type: 'paragraph',
+                  children: [
+                    { type: 'text', value: 'Run a hazard screening.' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'heading',
+          depth: 2,
+          children: [{ type: 'text', value: 'Limitations' }],
+        },
+      ],
+    };
+
+    const result = applyPlugin(tree);
+    expect(result.children).toHaveLength(3);
+    expect(result.children[0].type).toBe('paragraph');
+
+    const nextStepsNode = result.children[1];
+    expect(nextStepsNode.type).toBe('ccaNextSteps');
+    expect(nextStepsNode.data).toEqual({
+      hName: 'cca-suggested-next-steps',
+      hProperties: { title: 'Suggested next steps' },
+    });
+    expect(nextStepsNode.children).toHaveLength(1);
+    expect(nextStepsNode.children[0].type).toBe('list');
+
+    expect(result.children[2].type).toBe('heading');
+    expect(getNodeText(result.children[2])).toBe('Limitations');
+  });
+
+  it('stops collecting siblings at thematicBreak or ccaDocCard', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'heading',
+          depth: 2,
+          children: [{ type: 'text', value: 'How to use them:' }],
+        },
+        {
+          type: 'list',
+          ordered: true,
+          children: [],
+        },
+        {
+          type: 'thematicBreak',
+        },
+        {
+          type: 'ccaDocCard',
+          value: 'Some Card',
+        },
+      ],
+    };
+
+    const result = applyPlugin(tree);
+    expect(result.children).toHaveLength(3);
+    expect(result.children[0].type).toBe('ccaNextSteps');
+    expect(result.children[0].data.hProperties.title).toBe('How to use them');
+    expect(result.children[0].children).toHaveLength(1); // list only
+    expect(result.children[1].type).toBe('thematicBreak');
+    expect(result.children[2].type).toBe('ccaDocCard');
+  });
+
+  it('handles heading with no following siblings gracefully', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'heading',
+          depth: 3,
+          children: [{ type: 'text', value: 'Suggested next steps' }],
+        },
+      ],
+    };
+
+    const result = applyPlugin(tree);
+    expect(result.children).toHaveLength(1);
+    expect(result.children[0].type).toBe('ccaNextSteps');
+    expect(result.children[0].children).toHaveLength(0);
+  });
+});