@eeacms/volto-eea-chatbot 4.1.4 → 4.1.5

package/CHANGELOG.md

@@ -4,6 +4,8 @@ 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).
 
+### [4.1.5](https://github.com/eea/volto-eea-chatbot/compare/4.1.4...4.1.5) - 13 October 2026
+
 ### [4.1.4](https://github.com/eea/volto-eea-chatbot/compare/4.1.3...4.1.4) - 12 October 2026
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-chatbot",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "@eeacms/volto-eea-chatbot: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ChatBlock/components/HalloumiFeedback.jsx

@@ -4,7 +4,7 @@ import { Button, Message, MessageContent } from 'semantic-ui-react';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 import Spinner from './Spinner';
 import SVGIcon from './Icon';
-import { getSupportedBgColor } from './markdown/colors';
+import { getVerdictBgColor } from './markdown/colors';
 
 import GlassesIcon from '@eeacms/volto-eea-chatbot/icons/glasses.svg';
 import RotateIcon from '@eeacms/volto-eea-chatbot/icons/rotate.svg';
@@ -114,9 +114,13 @@ const HalloumiFeedback = ({
           color={scoreColor}
           className={cx(
             'claim-message',
+            // The summary chip wears the same three hues as the claims it
+            // summarises - the old eight-step red-to-green gradient implied a
+            // precision the score never had, skipped yellow entirely, and gave a
+            // colour-blind reader one ramp instead of three findings.
             emptyClaims
               ? 'claim-empty claim-gray-500'
-              : getSupportedBgColor(score / 100, 'claim'),
+              : getVerdictBgColor(score / 100),
           )}
           icon
         >

package/src/ChatBlock/components/markdown/ClaimModal.jsx

@@ -38,9 +38,17 @@ export function ClaimModal({ claim, markers, text, citedSources }) {
 
   return (
     <Modal
-      className={cx('claim-modal', getVerdictBgColor(claim.score))}
+      className={cx(
+        'claim-modal',
+        getVerdictBgColor(claim.score, claim.context_limited),
+      )}
       trigger={
-        <span className={cx('claim', getVerdictBgColor(claim.score))}>
+        <span
+          className={cx(
+            'claim',
+            getVerdictBgColor(claim.score, claim.context_limited),
+          )}
+        >
           {text}
         </span>
       }

package/src/ChatBlock/components/markdown/colors.js

@@ -1,51 +1,32 @@
-export function getSupportedTextColor(score) {
-  if (0 <= score && score < 0.5) {
-    return 'text-red-500';
-  } else if (0.5 <= score && score <= 1) {
-    return 'text-green-500';
-  }
-  return 'text-gray-500';
-}
-
 /**
- * Colour for a single verified claim.
+ * Colour for a verdict: one per claim (`ClaimModal`) and one for the
+ * answer-level summary (`HalloumiFeedback`).
  *
  * A per-claim score is a verdict (supported 1.0, not_enough_info 0.4,
- * contradicted 0.0), not a measurement on a 0-1 scale, so the eight-step gradient
- * in `getSupportedBgColor` implied a confidence level that was never computed -
- * and it put `not_enough_info` in the red family, which reads as "the sources
- * contradict this" when they actually said nothing. Three bands on one green ladder
- * plus red: dark green for support, pale green for sources that said nothing, red for
- * a conflict. The two greens are far apart in lightness on purpose - adjacent greens
- * read as one colour.
+ * contradicted 0.0 - see `scoreToVerdict`), not a measurement on a 0-1 scale, so
+ * the eight-step red-to-green gradient that used to live in this file implied a
+ * confidence level that was never computed, and it put `not_enough_info` in the
+ * red family, which reads as "the sources contradict this" when they actually
+ * said nothing.
+ *
+ * Three verdicts, three hues: red for a conflict, yellow for silence, green for
+ * support. Hue alone is not enough - for red-green colour blindness the two ends
+ * of that ramp are the same colour - so each hue also gets its own underline
+ * style (see `.claim` in `ChatBlock/style.less`) and the modal names the verdict
+ * in words.
  *
- * The class names must exist in `colors.less`: the `claim-*` utilities come from an
- * explicit list of `.generate-colors()` calls, and an unlisted class renders unstyled,
- * silently. `colors.test.js` asserts the two stay in step.
+ * A claim whose sources were only partly loaded (`contextLimited`) is yellow
+ * whatever score it got: the header already refuses to name a verdict for it
+ * ("Couldn't be checked"), so colouring it green or red would claim more than the
+ * check established.
+ *
+ * The class names must exist in `colors.less`: the `claim-*` utilities come from
+ * an explicit list of `.generate-colors()` calls, and an unlisted class renders
+ * unstyled, silently. `colors.test.js` asserts the two stay in step.
  */
-export function getVerdictBgColor(score, prefix = 'claim') {
-  if (score >= 0.8) return `${prefix}-green-700`;
-  if (score >= 0.1) return `${prefix}-green-300`;
-  return `${prefix}-red-500`;
-}
-
-export function getSupportedBgColor(score, prefix = 'bg') {
-  if (0 <= score && score < 0.125) {
-    return `${prefix}-red-500`;
-  } else if (0.125 <= score && score < 0.25) {
-    return `${prefix}-red-400`;
-  } else if (0.25 <= score && score < 0.375) {
-    return `${prefix}-red-300`;
-  } else if (0.375 <= score && score < 0.5) {
-    return `${prefix}-red-200`;
-  } else if (0.5 <= score && score < 0.625) {
-    return `${prefix}-green-200`;
-  } else if (0.625 <= score && score < 0.75) {
-    return `${prefix}-green-300`;
-  } else if (0.75 <= score && score < 0.875) {
-    return `${prefix}-green-400`;
-  } else if (0.875 <= score && score <= 1) {
-    return `${prefix}-green-500`;
-  }
-  return `${prefix}-gray-500`;
+export function getVerdictBgColor(score, contextLimited = false) {
+  if (contextLimited) return 'claim-yellow-500';
+  if (score >= 0.8) return 'claim-green-500';
+  if (score >= 0.1) return 'claim-yellow-500';
+  return 'claim-red-500';
 }

package/src/ChatBlock/components/markdown/colors.less

@@ -16,7 +16,6 @@
 @green-400: #4ade80;
 @green-500: #22c55e;
 @green-100: #dcfce7; //
-@green-700: #166534; //
 
 @yellow-500: #eab308; //
 @yellow-400: #facc15; //
@@ -30,7 +29,7 @@
 
 @lime-500: #84cc16; //
 
-.generate-colors(@namespace, @name, @color, @lighter-value: 20, @darker-value: 20) {
+.generate-colors(@namespace, @name, @color, @lighter-value: 20, @darker-value: 20, @stroke-value: 0) {
   @var-name: ~'--@{namespace}-color';
 
   .@{namespace}-@{name} {
@@ -38,24 +37,34 @@
     --@{namespace}-color: @color;
     --@{namespace}-lighter-color: lighten(@color, @lighter-value);
     --@{namespace}-darker-color: darken(@color, @darker-value);
+    // The colour for thin strokes - the claim underline, the verdict scale. A hue
+    // that is a fine fill is too light as a 2px line on white: yellow-500 is
+    // 1.92:1 there and green-500 2.28:1. Each call below darkens its stroke just
+    // enough to clear 3:1 (WCAG 1.4.11, non-text contrast) without moving the
+    // hue: red-500 3.76:1 untouched, green-500 -8 -> 3.32:1, yellow-500 -12 ->
+    // 3.37:1.
+    --@{namespace}-stroke-color: darken(@color, @stroke-value);
   }
 }
 
+// Only the classes `getVerdictBgColor` emits are generated - an unlisted class
+// renders unstyled, silently, with no colour and no error. `colors.test.js`
+// asserts the two lists stay in step.
+//
+// The three verdicts get three hues, not a ladder: red = contradicted, yellow =
+// not_enough_info, green = supported. Two greens were tried and failed - they
+// read as one colour, and for red-green colour blindness red and green read as
+// one colour too, which is why the underline *style* also changes per verdict
+// (see `.claim` in `../style.less`).
+//
+// lighter/darker are set so the chip's text (`--claim-darker-color`) on the
+// chip's background (`--claim-lighter-color`) clears WCAG AA: 5.51:1 red,
+// 4.81:1 yellow, 5.55:1 green.
 .generate-colors(claim, gray-500, @gray-500, 45, 20);
 .generate-colors(claim, red-500, @red-500, 35, 20);
-.generate-colors(claim, red-400, @red-400, 25, 25);
-.generate-colors(claim, red-300, @red-300, 15, 25);
-.generate-colors(claim, red-200, @red-200, 8, 30);
-.generate-colors(claim, green-500, @green-500, 45, 20);
-.generate-colors(claim, green-400, @green-400, 35, 25);
-.generate-colors(claim, green-300, @green-300, 20, 48);
-.generate-colors(claim, green-200, @green-200, 10, 45);
-
-// The three claim verdicts are a green ladder plus red: green-700 = supported, the
-// darkest, green-300 = not confirmed by the sources, red-500 = contradicted. Kept
-// deliberately far apart in lightness - two adjacent greens read as one colour and the
-// distinction is lost. The darken value on green-300 is high (48) because it is the
-// chip's text colour on a pale background: at 35 the pair was 2.7:1, unreadable.
-// `getVerdictBgColor` emits these class names, and a test asserts every emitted class
-// is generated here.
-.generate-colors(claim, green-700, @green-700, 32, 8);
+// not_enough_info: the sources said nothing. Not red - that means they said
+// something else - and not gray, which is reserved for the no-verdict-at-all
+// state. It sits alongside the yellow citation highlights, which are fills
+// (@yellow-100/200) while a claim is a stroke, so the two do not read alike.
+.generate-colors(claim, yellow-500, @yellow-500, 45, 20, 12);
+.generate-colors(claim, green-500, @green-500, 45, 20, 8);

package/src/ChatBlock/components/markdown/colors.test.js

@@ -1,38 +1,68 @@
-import {
-  getSupportedTextColor,
-  getSupportedBgColor,
-  getVerdictBgColor,
-} from './colors';
+import fs from 'fs';
+import path from 'path';
+import { scoreToVerdict } from '../../utils';
+import { getVerdictBgColor } from './colors';
+
+const VERDICT_SCORES = [
+  ['supported', 1.0],
+  ['not_enough_info', 0.4],
+  ['contradicted', 0.0],
+];
+
+const hueOf = (cls) => cls.match(/claim-([a-z]+)-/)[1];
 
 describe('getVerdictBgColor', () => {
   it('gives each verdict one colour band', () => {
-    expect(getVerdictBgColor(1.0)).toBe('claim-green-700');
-    expect(getVerdictBgColor(0.8)).toBe('claim-green-700');
-    expect(getVerdictBgColor(0.4)).toBe('claim-green-300');
-    expect(getVerdictBgColor(0.1)).toBe('claim-green-300');
+    expect(getVerdictBgColor(1.0)).toBe('claim-green-500');
+    expect(getVerdictBgColor(0.8)).toBe('claim-green-500');
+    expect(getVerdictBgColor(0.4)).toBe('claim-yellow-500');
+    expect(getVerdictBgColor(0.1)).toBe('claim-yellow-500');
     expect(getVerdictBgColor(0.0)).toBe('claim-red-500');
   });
 
+  it('uses three different hue families, one per verdict', () => {
+    // A reader who cannot separate red from green must still tell the verdicts
+    // apart, so no two of them may share a hue family. The green ladder this
+    // replaced (green-700 / green-300 / red-500) failed that: two of the three
+    // verdicts were "green".
+    const hues = VERDICT_SCORES.map(([, score]) =>
+      hueOf(getVerdictBgColor(score)),
+    );
+    expect(new Set(hues)).toEqual(new Set(['green', 'yellow', 'red']));
+  });
+
   it('keeps not_enough_info out of the red family', () => {
     // red reads as "the sources contradict this"; they said nothing
-    expect(getVerdictBgColor(0.4)).not.toContain('red');
+    expect(hueOf(getVerdictBgColor(0.4))).not.toBe('red');
   });
 
-  it('separates the two greens by more than one step', () => {
-    // adjacent greens read as one colour, which would erase the distinction
-    const step = (cls) => Number(cls.match(/green-(\d+)/)[1]);
-    expect(
-      step(getVerdictBgColor(1.0)) - step(getVerdictBgColor(0.4)),
-    ).toBeGreaterThanOrEqual(300);
+  it('marks claims that could not be checked yellow, whatever the score', () => {
+    // a claim checked against only part of its sources gets no verdict in the
+    // header ("Couldn't be checked"), so the colour must not claim one either
+    expect(getVerdictBgColor(1.0, true)).toBe('claim-yellow-500');
+    expect(getVerdictBgColor(0.0, true)).toBe('claim-yellow-500');
+  });
+
+  it('colours verdicts exactly where scoreToVerdict names them', () => {
+    // the colour bands and the wording in the modal are computed separately from
+    // the same thresholds; if they drift, the chip says one thing and the header
+    // another
+    const hueForVerdict = {
+      'claim-green-500': 'supported',
+      'claim-yellow-500': 'not_enough_info',
+      'claim-red-500': 'contradicted',
+    };
+    for (const score of [0, 0.05, 0.09, 0.1, 0.4, 0.79, 0.8, 1]) {
+      expect(hueForVerdict[getVerdictBgColor(score)]).toBe(
+        scoreToVerdict(score),
+      );
+    }
   });
 
   it('only emits classes that colors.less actually generates', () => {
     // an unlisted .generate-colors() call means the class renders unstyled, which
     // fails silently - no colour, no error
-    const less = require('fs').readFileSync(
-      require('path').join(__dirname, 'colors.less'),
-      'utf-8',
-    );
+    const less = fs.readFileSync(path.join(__dirname, 'colors.less'), 'utf-8');
     for (const cls of [
       getVerdictBgColor(1.0),
       getVerdictBgColor(0.4),
@@ -43,72 +73,27 @@ describe('getVerdictBgColor', () => {
       );
     }
   });
-});
-
-describe('getSupportedTextColor', () => {
-  it('should return "text-red-500" for scores between 0 and 0.5', () => {
-    expect(getSupportedTextColor(0)).toBe('text-red-500');
-    expect(getSupportedTextColor(0.4)).toBe('text-red-500');
-    expect(getSupportedTextColor(0.499)).toBe('text-red-500');
-  });
-
-  it('should return "text-green-500" for scores between 0.5 and 1', () => {
-    expect(getSupportedTextColor(0.5)).toBe('text-green-500');
-    expect(getSupportedTextColor(0.75)).toBe('text-green-500');
-    expect(getSupportedTextColor(1)).toBe('text-green-500');
-  });
-
-  it('should return "text-gray-500" for invalid scores', () => {
-    expect(getSupportedTextColor(-1)).toBe('text-gray-500');
-    expect(getSupportedTextColor(1.5)).toBe('text-gray-500');
-  });
-});
 
-describe('getSupportedBgColor', () => {
-  it('should return correct background colors based on score', () => {
-    // Test for scores in the range [0, 0.125)
-    expect(getSupportedBgColor(0)).toBe('bg-red-500');
-    expect(getSupportedBgColor(0.1)).toBe('bg-red-500');
-    expect(getSupportedBgColor(0.124)).toBe('bg-red-500');
-
-    // Test for scores in the range [0.125, 0.25)
-    expect(getSupportedBgColor(0.125)).toBe('bg-red-400');
-    expect(getSupportedBgColor(0.2)).toBe('bg-red-400');
-    expect(getSupportedBgColor(0.249)).toBe('bg-red-400');
-
-    // Test for scores in the range [0.25, 0.375)
-    expect(getSupportedBgColor(0.25)).toBe('bg-red-300');
-    expect(getSupportedBgColor(0.3)).toBe('bg-red-300');
-    expect(getSupportedBgColor(0.374)).toBe('bg-red-300');
-
-    // Test for scores in the range [0.375, 0.5)
-    expect(getSupportedBgColor(0.375)).toBe('bg-red-200');
-    expect(getSupportedBgColor(0.45)).toBe('bg-red-200');
-    expect(getSupportedBgColor(0.499)).toBe('bg-red-200');
-
-    // Test for scores in the range [0.5, 0.625)
-    expect(getSupportedBgColor(0.5)).toBe('bg-green-200');
-    expect(getSupportedBgColor(0.55)).toBe('bg-green-200');
-    expect(getSupportedBgColor(0.624)).toBe('bg-green-200');
-
-    // Test for scores in the range [0.625, 0.75)
-    expect(getSupportedBgColor(0.625)).toBe('bg-green-300');
-    expect(getSupportedBgColor(0.7)).toBe('bg-green-300');
-    expect(getSupportedBgColor(0.749)).toBe('bg-green-300');
-
-    // Test for scores in the range [0.75, 0.875)
-    expect(getSupportedBgColor(0.75)).toBe('bg-green-400');
-    expect(getSupportedBgColor(0.8)).toBe('bg-green-400');
-    expect(getSupportedBgColor(0.874)).toBe('bg-green-400');
-
-    // Test for scores in the range [0.875, 1]
-    expect(getSupportedBgColor(0.875)).toBe('bg-green-500');
-    expect(getSupportedBgColor(0.9)).toBe('bg-green-500');
-    expect(getSupportedBgColor(1)).toBe('bg-green-500');
-  });
-
-  it('should return "bg-gray-500" for invalid scores', () => {
-    expect(getSupportedBgColor(-1)).toBe('bg-gray-500');
-    expect(getSupportedBgColor(1.1)).toBe('bg-gray-500');
+  it('gives each verdict class its own underline style in style.less', () => {
+    // colour is not the only signal: each hue also has a line style (wavy /
+    // dotted / dashed). Renaming a class here without renaming the LESS selector
+    // would drop the shape distinction silently, so assert both lists agree.
+    const less = fs.readFileSync(
+      path.join(__dirname, '..', '..', 'style.less'),
+      'utf-8',
+    );
+    const styles = {};
+    for (const cls of [
+      getVerdictBgColor(1.0),
+      getVerdictBgColor(0.4),
+      getVerdictBgColor(0.0),
+    ]) {
+      const rule = less.match(
+        new RegExp(`&\\.${cls} \\{\\s*text-decoration-style: ([a-z]+);`),
+      );
+      expect(rule).not.toBeNull();
+      styles[cls] = rule[1];
+    }
+    expect(new Set(Object.values(styles)).size).toBe(3);
   });
 });

package/src/ChatBlock/style.less

@@ -693,13 +693,35 @@ mark {
   font-size: 14px;
 }
 
+// The underline on a checked claim carries the verdict, and hue alone cannot do
+// that job: for red-green colour blindness the good and the bad end of the ramp
+// are the same colour. So hue and line style change together -
+//   contradicted     ~~~~ wavy ~~~~    red
+//   not_enough_info  ···· dotted ····  yellow
+//   supported        ---- dashed ----  green
+// The stroke uses `--claim-stroke-color` (see `components/markdown/colors.less`),
+// a darkened variant of the hue: these hues are fine as large fills but a 2px
+// line of yellow-500 is 1.92:1 against white and green-500 is 2.28:1.
 .claim {
   position: relative;
   display: inline;
   cursor: pointer;
-  text-decoration: underline;
-  text-decoration-color: var(--claim-color);
-  text-decoration-style: wavy;
+  text-decoration-color: var(--claim-stroke-color);
+  text-decoration-line: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.2em;
+
+  &.claim-red-500 {
+    text-decoration-style: wavy;
+  }
+
+  &.claim-yellow-500 {
+    text-decoration-style: dotted;
+  }
+
+  &.claim-green-500 {
+    text-decoration-style: dashed;
+  }
 
   &:hover {
     background-color: var(--claim-lighter-color);
@@ -753,7 +775,7 @@ mark {
     padding: 1em 1.25em;
     border: none;
     border-radius: 0 @borderRadius @borderRadius 0;
-    border-left: 4px solid var(--claim-color);
+    border-left: 4px solid var(--claim-stroke-color);
     margin: 0;
     background-color: @gray-50;
     color: @grey;
@@ -827,25 +849,29 @@ mark {
     flex: 1;
     border-radius: 3px;
     background-color: @gray-200;
-    // An inset ring rather than a border: the green of `not_enough_info` is about
-    // 2.8:1 against white, so without an outline the middle position - the one that
-    // needs pointing out most - reads as empty. No layout shift, unlike a border.
+    // An inset ring rather than a border: the filled step is a thin bar of a hue
+    // that is under 3:1 against white (yellow-500 is 1.92:1), so without an
+    // outline the middle position - the one that needs pointing out most - reads
+    // as empty. No layout shift, unlike a border.
     box-shadow: inset 0 0 0 1px @gray-300;
   }
 
+  // The three hues match the claim underlines: red contradicted, yellow
+  // not_enough_info, green supported. Colour is decoration here - which step is
+  // filled is the finding, and it reads with no colour vision at all.
   .verdict-scale[data-verdict='contradicted'] .verdict-step:nth-child(1) {
     background-color: @red-500;
   }
 
-  // Not red: sources saying nothing is not the same finding as sources saying
-  // something else. green-500 rather than the chip's green-300 because a solid bar
-  // on white needs more weight than a pale background does (green-300 is 1.7:1).
+  // Yellow, not red: sources saying nothing is not the same finding as sources
+  // saying something else. Grey is reserved for the `unknown` state below, where
+  // there is no verdict at all.
   .verdict-scale[data-verdict='not_enough_info'] .verdict-step:nth-child(2) {
-    background-color: @green-500;
+    background-color: @yellow-500;
   }
 
   .verdict-scale[data-verdict='supported'] .verdict-step:nth-child(3) {
-    background-color: @green-700;
+    background-color: @green-500;
   }
 
   // Checked over search snippets only: no position can be claimed.