@eeacms/volto-eea-chatbot 4.1.3 → 4.1.4

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

@@ -1,8 +1,12 @@
 import { Modal, ModalContent, ModalHeader } from 'semantic-ui-react';
 import cx from 'classnames';
-import { scoreToLabel } from '@eeacms/volto-eea-chatbot/ChatBlock/utils';
+import {
+  claimBadgeLabel,
+  claimHeaderLabel,
+  claimScaleState,
+} from '@eeacms/volto-eea-chatbot/ChatBlock/utils';
 import SVGIcon from '@eeacms/volto-eea-chatbot/ChatBlock/components/Icon';
-import { getSupportedBgColor } from './colors';
+import { getVerdictBgColor } from './colors';
 import { ClaimSegments } from './ClaimSegments';
 
 import BotIcon from '@eeacms/volto-eea-chatbot/icons/bot.svg';
@@ -34,11 +38,9 @@ export function ClaimModal({ claim, markers, text, citedSources }) {
 
   return (
     <Modal
-      className={cx('claim-modal', getSupportedBgColor(claim.score, 'claim'))}
+      className={cx('claim-modal', getVerdictBgColor(claim.score))}
       trigger={
-        <span
-          className={cx('claim', getSupportedBgColor(claim.score, 'claim'))}
-        >
+        <span className={cx('claim', getVerdictBgColor(claim.score))}>
           {text}
         </span>
       }
@@ -49,7 +51,9 @@ export function ClaimModal({ claim, markers, text, citedSources }) {
             <div className="circle assistant">
               <SVGIcon name={BotIcon} size="20" color="white" />
             </div>
-            <span className="claim-label">Verified Claim</span>
+            <span className="claim-label">
+              {claimHeaderLabel(claim.score, claim.context_limited)}
+            </span>
           </div>
           <blockquote className="claim-quote">
             &ldquo;
@@ -70,20 +74,30 @@ export function ClaimModal({ claim, markers, text, citedSources }) {
           <div className="score-badge-section">
             <div className="score-badge">
               <span className="score-percentage">
-                {scoreToLabel(claim.score)}
+                {claimBadgeLabel(claim.score, claim.context_limited)}
               </span>
-              <span className="score-label">Verification</span>
+              <span className="score-label">Fact check</span>
             </div>
-            <div className="score-progress-bar">
-              <div
-                className="score-progress-fill"
-                style={{ width: `${claim.score * 100}%` }}
-              />
+            {/* Three discrete positions, not a fill. The per-claim score is a
+                verdict, not a probability: the old proportional bar made
+                not_enough_info look like "40% verified", which was never
+                measured. Decorative — the badge text carries the verdict. */}
+            <div
+              className="verdict-scale"
+              data-verdict={claimScaleState(claim.score, claim.context_limited)}
+              aria-hidden="true"
+            >
+              <span className="verdict-step" />
+              <span className="verdict-step" />
+              <span className="verdict-step" />
             </div>
           </div>
           <div className="rationale-section">
             <h5 className="rationale-header">Rationale</h5>
             <p className="claim-rationale">{claim.rationale}</p>
+            {/* No snippet caveat here: the header already says "Couldn't be
+                checked" and the badge says "Unverified". The explanation lives
+                once, at answer level, in HalloumiFeedback. */}
           </div>
         </div>
 

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

@@ -27,18 +27,50 @@ export function ClaimSegments({ segmentIds, segments, citedSources }) {
     .map((segment) => {
       const startOffset = Math.max(0, segment.startOffset); // sometimes startOffset comes as -1
       const endOffset = segment.endOffset;
-      const text = joinedSources.slice(startOffset, endOffset);
-      const source = citedSources.find(
-        (source) =>
-          startOffset >= source.startIndex &&
-          endOffset <= source.halloumiContext.length + source.startIndex,
+
+      // A claim can cite several passages, possibly in different documents.
+      // Attribute by containment instead of requiring the segment to fit
+      // entirely inside one source — a segment that straddles a boundary
+      // would otherwise disappear from the modal without any warning.
+      const source =
+        citedSources.find(
+          (source) =>
+            startOffset >= source.startIndex &&
+            startOffset < source.startIndex + source.halloumiContext.length,
+        ) ||
+        citedSources.find(
+          (source) =>
+            endOffset > source.startIndex &&
+            endOffset <= source.startIndex + source.halloumiContext.length,
+        );
+
+      if (!source) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Could not attribute segment ${segment.id} to a source`,
+          { startOffset, endOffset },
+          citedSources,
+        );
+        return null;
+      }
+
+      // Clamp to the attributed source so the snippet never renders text that
+      // belongs to the neighbouring document.
+      const clippedStart = Math.max(startOffset, source.startIndex);
+      const clippedEnd = Math.min(
+        endOffset,
+        source.startIndex + source.halloumiContext.length,
       );
+
       return {
         ...segment,
-        text,
-        source_id: source?.id,
+        startOffset: clippedStart,
+        endOffset: clippedEnd,
+        text: joinedSources.slice(clippedStart, clippedEnd),
+        source_id: source.id,
       };
-    });
+    })
+    .filter((snippet) => !!snippet && snippet.endOffset > snippet.startOffset);
 
   const sourcesWithSnippets = citedSources
     .map((source) => ({

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

@@ -1,5 +1,19 @@
 import React from 'react';
 
+/**
+ * Render a source document with the evidence segments of a claim highlighted.
+ *
+ * Segment offsets are half-open ranges `[startOffset, endOffset)` expressed in
+ * the coordinates of the *joined* sources string, so they are shifted by
+ * `sourceStartIndex` before slicing this source's text.
+ *
+ * A claim can be supported by several evidence quotes, and those quotes can
+ * overlap (two passages covering the same sentence, for example). Because the
+ * renderer splits the text on segment boundaries, overlapping segments would
+ * emit the same characters twice — segments are therefore clipped to what is
+ * still uncovered, and a fully covered segment keeps its id on the segment that
+ * covers it so its "Jump to citation" chip still scrolls somewhere sensible.
+ */
 export const RenderClaimView = (props) => {
   const {
     value,
@@ -10,16 +24,36 @@ export const RenderClaimView = (props) => {
     sourceStartIndex = 0,
   } = props;
 
-  const sortedSegments = [...segments].sort(
-    (a, b) => a.startOffset - b.startOffset,
-  );
+  const sortedSegments = [...segments]
+    .filter(
+      (segment) =>
+        Number.isFinite(segment.startOffset) &&
+        Number.isFinite(segment.endOffset),
+    )
+    .sort((a, b) => a.startOffset - b.startOffset);
 
   const parts = [];
   let lastIndex = 0;
+  let lastSegmentPart = null;
 
   sortedSegments.forEach((segment) => {
-    const segmentStart = segment.startOffset - sourceStartIndex;
-    const segmentEnd = segment.endOffset - sourceStartIndex + 1;
+    const segmentStart = Math.max(
+      0,
+      segment.startOffset - sourceStartIndex,
+      lastIndex,
+    );
+    const segmentEnd = Math.min(
+      value.length,
+      segment.endOffset - sourceStartIndex,
+    );
+
+    if (segmentEnd <= segmentStart) {
+      // Nothing left of this segment — it is covered by the previous one.
+      if (lastSegmentPart) {
+        lastSegmentPart.ids.push(segment.id);
+      }
+      return;
+    }
 
     // Add the text part before the current segment
     if (segmentStart > lastIndex) {
@@ -30,12 +64,13 @@ export const RenderClaimView = (props) => {
     }
 
     // Add the segment part
-    parts.push({
+    const part = {
       type: 'segment',
-      ...segment,
+      ids: [segment.id],
       content: value.slice(segmentStart, segmentEnd),
-    });
-
+    };
+    parts.push(part);
+    lastSegmentPart = part;
     lastIndex = segmentEnd;
   });
 
@@ -55,12 +90,16 @@ export const RenderClaimView = (props) => {
           const content = part.content.split('\n');
 
           if (part.type === 'segment') {
-            const isSelectedSegment = part.id === visibleSegmentId;
+            const isSelectedSegment = part.ids.includes(visibleSegmentId);
             return (
-              <React.Fragment key={part.id || index}>
+              <React.Fragment key={part.ids.join('-') || index}>
                 <span
                   ref={(el) => {
-                    if (el) spanRefs.current[part.id] = el;
+                    if (el) {
+                      part.ids.forEach((id) => {
+                        spanRefs.current[id] = el;
+                      });
+                    }
                   }}
                   className={`citation-segment ${
                     isSelectedSegment ? 'active' : ''
@@ -68,7 +107,11 @@ export const RenderClaimView = (props) => {
                 >
                   <mark className="citation-highlight">
                     {part.content.trim()}
-                    <sup className="citation-ref">{part.id}</sup>
+                    {part.ids.map((id) => (
+                      <sup key={id} className="citation-ref">
+                        {id}
+                      </sup>
+                    ))}
                   </mark>
                   {!endline && <>&nbsp;</>}
                 </span>

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

@@ -7,6 +7,28 @@ export function getSupportedTextColor(score) {
   return 'text-gray-500';
 }
 
+/**
+ * Colour for a single verified claim.
+ *
+ * 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.
+ *
+ * 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`;

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

@@ -48,5 +48,14 @@
 .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, 35);
+.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);

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

@@ -1,4 +1,49 @@
-import { getSupportedTextColor, getSupportedBgColor } from './colors';
+import {
+  getSupportedTextColor,
+  getSupportedBgColor,
+  getVerdictBgColor,
+} from './colors';
+
+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(0.0)).toBe('claim-red-500');
+  });
+
+  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');
+  });
+
+  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('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',
+    );
+    for (const cls of [
+      getVerdictBgColor(1.0),
+      getVerdictBgColor(0.4),
+      getVerdictBgColor(0.0),
+    ]) {
+      expect(less).toContain(
+        `.generate-colors(claim, ${cls.replace('claim-', '')},`,
+      );
+    }
+  });
+});
 
 describe('getSupportedTextColor', () => {
   it('should return "text-red-500" for scores between 0 and 0.5', () => {

package/src/ChatBlock/hooks/index.ts

@@ -5,3 +5,4 @@ export { useMarked } from './useMarked';
 export { useQualityMarkers } from './useQualityMarkers';
 export { useDeepCompareMemoize } from './useDeepCompareMemoize';
 export { useScrollonStream } from './useScrollonStream';
+export { useChunkEvidence } from './useChunkEvidence';

package/src/ChatBlock/hooks/useChunkEvidence.ts

@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  CHUNK_EVIDENCE_WINDOW,
+  fetchEvidence,
+} from '@eeacms/volto-eea-chatbot/ChatBlock/services/chunkEvidence';
+
+/**
+ * Resolve real Onyx chunk text for the documents about to be sent to the
+ * fact-checker.
+ *
+ * Only runs when `enabled` (i.e. quality control is being requested), and
+ * re-runs only when the set of `document_id` + `chunk_ind` values changes.
+ *
+ * `evidenceSettled` is what callers must gate the fact-check call on. It is
+ * false for a key that has not been resolved yet, so the check cannot fire with
+ * blurbs in the same commit that started the evidence fetch. It also becomes
+ * true when a fetch fails — falling back to blurbs is better than never
+ * verifying at all.
+ */
+export function useChunkEvidence(
+  docs: any[],
+  {
+    enabled = true,
+    window = CHUNK_EVIDENCE_WINDOW,
+  }: { enabled?: boolean; window?: number } = {},
+) {
+  const [evidence, setEvidence] = useState<Record<string, any>>({});
+  const [isFetchingEvidence, setIsFetchingEvidence] = useState(false);
+  const [settledKey, setSettledKey] = useState('');
+
+  const docsRef = useRef(docs);
+  docsRef.current = docs;
+
+  const key = useMemo(
+    () =>
+      (docs || [])
+        .map((doc: any) => `${doc?.document_id}@@${doc?.chunk_ind ?? 0}`)
+        .filter((part: string) => !part.startsWith('undefined'))
+        .join('|'),
+    [docs],
+  );
+
+  useEffect(() => {
+    if (!enabled || !key) {
+      setIsFetchingEvidence(false);
+      return;
+    }
+
+    let cancelled = false;
+    setIsFetchingEvidence(true);
+
+    fetchEvidence(docsRef.current, { window })
+      .then((result) => {
+        if (cancelled) {
+          return;
+        }
+        setEvidence(result);
+        setIsFetchingEvidence(false);
+        setSettledKey(key);
+      })
+      .catch(() => {
+        // Fall back to whatever the stream gave us (blurbs).
+        if (!cancelled) {
+          setIsFetchingEvidence(false);
+          setSettledKey(key);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [key, enabled, window]);
+
+  return {
+    evidence,
+    isFetchingEvidence,
+    evidenceSettled: key === '' || settledKey === key,
+  };
+}

package/src/ChatBlock/schema.jsx

@@ -95,6 +95,7 @@ export function ChatBlockSchema({ assistants, data }) {
                 'batchSize',
                 'noSupportDocumentsMessage',
                 'qualityCheckContext',
+                'chunkEvidenceWindow',
                 'qualityCheckStages',
               ]
             : []),
@@ -214,6 +215,17 @@ export function ChatBlockSchema({ assistants, data }) {
           ['all', 'All documents passed to LLM'],
         ],
       },
+      chunkEvidenceWindow: {
+        title: 'Evidence window (chunks around each source)',
+        type: 'number',
+        default: 2,
+        description:
+          'How many Onyx chunks to fetch on each side of the matched chunk before ' +
+          'fact-checking. 0 = centre chunk only (usually not enough), 2 = what Onyx ' +
+          'feeds the answer generator by default, 5 = Onyx at its widest. Each extra ' +
+          'step costs two more chunk requests per document, and values above 20 are ' +
+          'clamped.',
+      },
       qualityCheckStages: {
         title: 'Score ranges',
         widget: 'object_list',