@eeacms/volto-eea-chatbot 4.1.3 → 4.1.5

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,10 +38,16 @@ export function ClaimModal({ claim, markers, text, citedSources }) {
 
   return (
     <Modal
-      className={cx('claim-modal', getSupportedBgColor(claim.score, 'claim'))}
+      className={cx(
+        'claim-modal',
+        getVerdictBgColor(claim.score, claim.context_limited),
+      )}
       trigger={
         <span
-          className={cx('claim', getSupportedBgColor(claim.score, 'claim'))}
+          className={cx(
+            'claim',
+            getVerdictBgColor(claim.score, claim.context_limited),
+          )}
         >
           {text}
         </span>
@@ -49,7 +59,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 +82,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

@@ -1,29 +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';
-}
-
-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`;
+/**
+ * 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 - 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.
+ *
+ * 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, 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,15 +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, 35);
-.generate-colors(claim, green-200, @green-200, 10, 45);
+// 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,69 +1,99 @@
-import { getSupportedTextColor, getSupportedBgColor } from './colors';
+import fs from 'fs';
+import path from 'path';
+import { scoreToVerdict } from '../../utils';
+import { getVerdictBgColor } from './colors';
 
-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');
-  });
+const VERDICT_SCORES = [
+  ['supported', 1.0],
+  ['not_enough_info', 0.4],
+  ['contradicted', 0.0],
+];
 
-  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');
-  });
+const hueOf = (cls) => cls.match(/claim-([a-z]+)-/)[1];
 
-  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('getVerdictBgColor', () => {
+  it('gives each verdict one colour band', () => {
+    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');
   });
-});
-
-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');
+  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']));
+  });
 
-    // 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');
+  it('keeps not_enough_info out of the red family', () => {
+    // red reads as "the sources contradict this"; they said nothing
+    expect(hueOf(getVerdictBgColor(0.4))).not.toBe('red');
+  });
 
-    // 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');
+  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');
+  });
 
-    // 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');
+  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),
+      );
+    }
+  });
 
-    // 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('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 = fs.readFileSync(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-', '')},`,
+      );
+    }
   });
 
-  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/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',