@eeacms/volto-eea-chatbot 3.0.0 → 4.0.0

package/src/ChatBlock/packets/MultiToolRenderer.tsx

@@ -133,7 +133,14 @@ export function MultiToolRenderer({
               {filteredToolGroups.map((toolGroup, index) => {
                 const isLastItem = index === filteredToolGroups.length - 1;
                 const toolState = toolStates.get(toolGroup.ind);
-                const isToolCompleted = toolState?.isCompleted;
+                const isToolCompleted = toolState?.isCompleted === true;
+                const isToolActive =
+                  isOverallStreaming && !isToolCompleted && isLastItem;
+                const toolDisplayState = isToolActive
+                  ? 'active'
+                  : isToolCompleted
+                    ? 'completed'
+                    : 'pending';
 
                 return (
                   <div
@@ -141,6 +148,8 @@ export function MultiToolRenderer({
                     className={cx({
                       'tool-collapsed-wrapper': isOverallStreaming,
                     })}
+                    data-state={toolDisplayState}
+                    aria-current={isToolActive ? 'step' : undefined}
                   >
                     <RendererComponent
                       packets={toolGroup.packets}
@@ -158,12 +167,7 @@ export function MultiToolRenderer({
                         const finalIcon = icon ? (
                           React.createElement(icon, { size: 14 })
                         ) : (
-                          <span
-                            className={cx({
-                              'tool-icon-dot': isOverallStreaming,
-                              'tool-icon-default': !isOverallStreaming,
-                            })}
-                          />
+                          <span className="tool-icon-dot" />
                         );
 
                         // If tool is not completed and we are overall streaming, show collapsed view
@@ -184,14 +188,14 @@ export function MultiToolRenderer({
                             return (
                               <div
                                 className={cx('tool-item-collapsed', {
-                                  active: isLastItem,
+                                  active: isToolActive,
                                   completed: isToolCompleted,
                                 })}
                               >
                                 <div className="tool-collapsed-icon">
                                   {finalIcon}
                                 </div>
-                                <span className="tool-collapsed-status">
+                                <span className="tool-status tool-collapsed-status">
                                   {status}
                                 </span>
                               </div>
@@ -199,9 +203,14 @@ export function MultiToolRenderer({
                           }
                         }
 
-                        // Expanded view (full content) - used for completed tools or when overall complete
+                        // Detailed view for streaming reasoning/search tools and completed tools
                         return (
-                          <div className="tool-item-expanded">
+                          <div
+                            className={cx('tool-item-expanded', {
+                              active: isToolActive,
+                              completed: isToolCompleted,
+                            })}
+                          >
                             <div className="tool-connector-line" />
 
                             <div className="tool-item-row">

package/src/ChatBlock/services/messageProcessor.ts

@@ -33,6 +33,7 @@ export class MessageProcessor {
   private _errorContent: string = '';
   private _documents: OnyxDocument[] = [];
   private _citations = new Map<number, string>();
+  private _citationsAreFallback: boolean = false;
   private _isComplete: boolean = false;
   private _isFinalMessageComing: boolean = false;
 
@@ -208,20 +209,29 @@ export class MessageProcessor {
 
     if (newDocuments) {
       this._documents = Array.from(this.documentMap.values());
+    }
 
-      // If we have final_documents and no citations yet, create a fallback mapping
-      // This ensures the Sources tab shows up in v3 when citation_info is missing
-      if (
-        packet.obj.type === PacketType.MESSAGE_START &&
-        data.final_documents &&
-        this._citations.size === 0
-      ) {
-        data.final_documents.forEach((doc: OnyxDocument, index: number) => {
-          if (doc.document_id) {
-            this._citations.set(index + 1, doc.document_id);
-          }
-        });
-      }
+    // If we have final_documents and no citations yet, create a fallback mapping.
+    // This ensures the Sources tab shows up in v3 when citation_info is missing.
+    // The fallback is cleared in processCitations() when real citation_info arrives.
+    if (
+      packet.obj.type === PacketType.MESSAGE_START &&
+      data.final_documents &&
+      this._citations.size === 0
+    ) {
+      data.final_documents.forEach((doc: OnyxDocument, index: number) => {
+        if (doc.document_id) {
+          this._citations.set(index + 1, doc.document_id);
+        }
+      });
+      this._citationsAreFallback = this._citations.size > 0;
+    }
+  }
+
+  private clearFallbackCitations(): void {
+    if (this._citationsAreFallback) {
+      this._citations.clear();
+      this._citationsAreFallback = false;
     }
   }
 
@@ -231,6 +241,10 @@ export class MessageProcessor {
    */
   private processCitations(packet: Packet) {
     if (packet.obj.type === PacketType.CITATION_INFO) {
+      // First real citation_info arrived — discard the fallback mapping
+      // (which mapped ALL final_documents) and start fresh with actual citations.
+      this.clearFallbackCitations();
+
       const citationInfo = packet.obj as any;
       if (citationInfo.citation_number && citationInfo.document_id) {
         this._citations.set(
@@ -244,7 +258,14 @@ export class MessageProcessor {
       return;
     }
     const citationDelta = packet.obj as CitationDelta;
-    citationDelta.citations?.forEach((citation: StreamingCitation) => {
+    const explicitCitations = (citationDelta.citations || []).filter(
+      (citation: StreamingCitation) =>
+        citation.citation_num != null && Boolean(citation.document_id),
+    );
+    if (explicitCitations.length > 0) {
+      this.clearFallbackCitations();
+    }
+    explicitCitations.forEach((citation: StreamingCitation) => {
       if (!this._citations.has(citation.citation_num)) {
         this._citations.set(citation.citation_num, citation.document_id);
       }
@@ -397,6 +418,7 @@ export class MessageProcessor {
     this._errorContent = '';
     this._documents = [];
     this._citations.clear();
+    this._citationsAreFallback = false;
     this._isComplete = false;
     this._isFinalMessageComing = false;
   }

package/src/ChatBlock/style.less

@@ -1604,14 +1604,6 @@ mark {
     }
   }
 
-  .tool-icon-default {
-    display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    background-color: currentColor;
-  }
-
   // Content column
   .tool-content {
     flex: 1;
@@ -1625,17 +1617,6 @@ mark {
     display: flex;
   }
 
-  .tool-status {
-    display: flex;
-    align-items: center;
-    border-radius: 12px;
-    margin-bottom: 0.25rem;
-    color: @teal;
-    font-size: 0.875rem;
-    font-weight: 500;
-    gap: 0.25rem;
-  }
-
   .tool-text {
     color: #6b7280;
     font-size: 0.75rem;
@@ -1651,6 +1632,47 @@ mark {
 .multi-tool-renderer {
   margin-bottom: 1em;
 
+  // Shared tool state styles
+  .tool-icon-dot {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  .tool-status {
+    display: flex;
+    align-items: center;
+    border-radius: 12px;
+    margin-bottom: 0.25rem;
+    color: @teal;
+    font-size: 0.875rem;
+    font-weight: 500;
+    gap: 0.25rem;
+  }
+
+  .tool-item-expanded.active .tool-icon-circle,
+  .tool-item-collapsed.active .tool-collapsed-icon {
+    color: @teal;
+  }
+
+  .active .tool-status {
+    animation: shimmer 2.5s linear infinite;
+    background: linear-gradient(
+      90deg,
+      @teal 0%,
+      @teal 40%,
+      rgba(0, 179, 174, 0.5) 50%,
+      @teal 60%,
+      @teal 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-size: 200% 100%;
+    -webkit-text-fill-color: transparent;
+  }
+
   // Common header styles for both collapsed and summary headers
   .tools-collapsed-header,
   .tools-summary-header {
@@ -1766,29 +1788,6 @@ mark {
       }
     }
 
-    &.active {
-      .tool-collapsed-icon {
-        position: relative;
-        color: @teal;
-      }
-
-      .tool-collapsed-status {
-        animation: shimmer 2.5s linear infinite;
-        background: linear-gradient(
-          90deg,
-          @teal 0%,
-          @teal 40%,
-          rgba(0, 179, 174, 0.5) 50%,
-          @teal 60%,
-          @teal 100%
-        );
-        -webkit-background-clip: text;
-        background-clip: text;
-        background-size: 200% 100%;
-        -webkit-text-fill-color: transparent;
-      }
-    }
-
     .tool-collapsed-icon {
       display: flex;
       width: 1rem;
@@ -1798,17 +1797,8 @@ mark {
       justify-content: center;
     }
 
-    .tool-icon-dot {
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: currentColor;
-    }
-
     .tool-collapsed-status {
       flex: 1;
-      font-weight: 500;
     }
   }
 

package/src/ChatBlock/utils/index.tsx

@@ -58,6 +58,16 @@ export const useCopyToClipboard = (text: string): [boolean, () => void] => {
   return [copied, copy];
 };
 
+/**
+ * Map a 0-1 claim score to a categorical label.
+ * Scores: 1.0 = supported, 0.4 = not_enough_info, 0.0 = contradicted.
+ */
+export function scoreToLabel(score: number): string {
+  if (score >= 0.8) return 'High';
+  if (score >= 0.1) return 'Low';
+  return 'Failed';
+}
+
 export function convertToPercentage(
   floatValue: number,
   digits: number = 2,

package/src/halloumi/README.md

@@ -1 +1,27 @@
-code based on Apache2 licensed https://github.com/oumi-ai/halloumi-demo/tree/d088e1f25e7785326a53bc120113e226ee2f54b7
+# Halloumi Fact-Checking Middleware
+
+This middleware proxies fact-checking requests to the **rag-fact-checker** service (https://github.com/eea/rag-fact-check), which replaces the original Halloumi LLM-based integration.
+
+## Architecture
+
+```
+Frontend (useQualityMarkers.js)
+  → POST /_ha/generate
+    → Express middleware (middleware.js)
+      → POST {RAG_FACT_CHECKER_URL}/halloumi/generate
+        → rag-fact-checker FastAPI service
+```
+
+The rag-fact-checker's `/halloumi/generate` endpoint is a drop-in replacement for the original Halloumi API — it accepts the same request format (`{answer, sources}`) and returns a compatible response (`{claims, segments}`), so all existing frontend components (`HalloumiFeedback`, `useQualityMarkers`, `ClaimSegments`) work without changes.
+
+## Configuration
+
+| Environment Variable   | Default                 | Description                              |
+| ---------------------- | ----------------------- | ---------------------------------------- |
+| `RAG_FACT_CHECKER_URL` | `http://localhost:8000` | Base URL of the rag-fact-checker service |
+
+## Original Halloumi
+
+The original implementation was based on Apache2 licensed https://github.com/oumi-ai/halloumi-demo/tree/d088e1f25e7785326a53bc120113e226ee2f54b7
+
+It used a custom LLM model (HallOumi-8B) accessed via an LLM gateway, with complex prompt preprocessing, chunking, logprob-based postprocessing, and claim filtering. This has been replaced by the rag-fact-checker service which uses a claim extraction + per-claim verification pipeline.

package/src/halloumi/middleware.js

@@ -1,41 +1,18 @@
-// import debug from 'debug';
-import { getVerifyClaimResponse } from './generative';
+import fetch from 'node-fetch';
+import debug from 'debug';
 import { isPathAllowed } from '../middleware';
 
-// const log = debug('halloumi');
+const log = debug('halloumi');
 
 const MSG_INVALID_CONFIGURATION =
-  'Invalid configuration: missing LLMGW_TOKEN or LLMGW_URL';
+  'Invalid configuration: missing RAG_FACT_CHECKER_URL';
 
 // Allowed paths for _ha (Halloumi) proxy.
 // When adding new endpoints, update this list.
-const ALLOWED_HALLOUMI_PATHS = [
-  { path: '/generate', methods: ['POST'] },
-  { path: '/classify', methods: ['POST'] },
-];
+const ALLOWED_HALLOUMI_PATHS = [{ path: '/generate', methods: ['POST'] }];
 
-const LLMGW_URL = process.env.LLMGW_URL;
-const LLMGW_TOKEN = process.env.LLMGW_TOKEN;
-
-const generativeModel = {
-  name: 'Inhouse-LLM/HallOumi-8B',
-  apiUrl: `${LLMGW_URL}/chat/completions`,
-  plattScaling: {
-    a: -0.5764390035379638,
-    b: 0.16648741572432335,
-  },
-  isEmbeddingModel: false,
-};
-
-const classifyModel = {
-  name: 'Inhouse-LLM/HallOumi-8B-classifier',
-  apiUrl: `${LLMGW_URL}/v1/embeddings`,
-  isEmbeddingModel: true,
-  plattScaling: {
-    a: -0.9468640744087437,
-    b: -0.07379217647931409,
-  },
-};
+const RAG_FACT_CHECKER_URL =
+  process.env.RAG_FACT_CHECKER_URL || 'http://localhost:8000';
 
 export default async function middleware(req, res, next) {
   const path = req.url.replace('/_ha/', '/');
@@ -48,39 +25,52 @@ export default async function middleware(req, res, next) {
     return;
   }
 
-  if (!(LLMGW_TOKEN && LLMGW_URL)) {
+  if (!RAG_FACT_CHECKER_URL) {
     res.send({
       error: MSG_INVALID_CONFIGURATION,
     });
     return;
   }
 
-  const model = {
-    ...(path === '/classify' ? classifyModel : generativeModel),
-    apiKey: LLMGW_TOKEN,
-  };
   const body = req.body;
-
-  // log('Halloumi body', body);
   const { sources, answer } = body;
 
+  log('Halloumi request body', {
+    answer,
+    sources: sources?.length,
+  });
+
   res.set('Content-Type', 'application/json');
 
   try {
-    const resp = await getVerifyClaimResponse(
-      model,
-      // TODO: map with citation id
-      sources,
-      answer,
-      { ip: req.headers['x-forwarded-for'] || req.ip },
-    );
-    // log('Halloumi response', resp);
-    res.send(resp);
+    const response = await fetch(`${RAG_FACT_CHECKER_URL}/halloumi/generate`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        answer,
+        sources,
+        max_context_segments: 0,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (!response.ok) {
+      log('Halloumi error response', result);
+      res.status(response.status).send({
+        error: `Fact-checker error: ${result.detail || result.error || 'unknown error'}`,
+      });
+      return;
+    }
+
+    log('Halloumi response', result);
+    res.send(result);
   } catch (error) {
-    res.status(500).send({
-      error: `Halloumi error: ${error}`,
-      traceback: error.stack || null,
+    log('Halloumi fetch error', error);
+    res.status(502).send({
+      error: `Fact-checker unavailable: ${error.message || 'connection failed'}`,
     });
-    // throw error;
   }
 }