@eeacms/volto-eea-chatbot 1.0.9

package/src/ChatBlock/hooks/useChatController.ts

@@ -0,0 +1,333 @@
+import type { Message } from '../types/interfaces';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useChatStreaming } from './useChatStreaming';
+import { createChatSession, sendMessage } from '../services/streamingService';
+import { PacketType } from '../types/streamingModels';
+import { ResearchType } from '../types/interfaces';
+
+interface UseChatControllerProps {
+  personaId: number;
+  enableQgen?: boolean;
+  qgenAsistantId?: number;
+  deepResearch?: string;
+}
+
+interface RelatedQuestion {
+  question: string;
+}
+
+// Extract JSON array from related questions response
+function extractRelatedQuestions(str: string): RelatedQuestion[] {
+  const regex = /\[[\s\S]*?\]/;
+  const match = str.match(regex);
+
+  if (match) {
+    try {
+      return JSON.parse(match[0]);
+    } catch {
+      // Fallback to line-by-line parsing
+      return str
+        .split('\n')
+        .filter((line) => line.trim())
+        .map((question) => ({ question }));
+    }
+  }
+
+  return str
+    .split('\n')
+    .filter((line) => line.trim())
+    .map((question) => ({ question }));
+}
+
+// Fetch related questions using the qgen assistant
+async function fetchRelatedQuestions(
+  query: string,
+  answer: string,
+  qgenAsistantId: number,
+): Promise<RelatedQuestion[]> {
+  try {
+    const chatSessionId = await createChatSession(
+      qgenAsistantId,
+      `Q: ${query}`,
+    );
+
+    const params = {
+      message: `Question: ${query}\nAnswer:\n${answer}`,
+      alternateAssistantId: qgenAsistantId,
+      fileDescriptors: [],
+      parentMessageId: null,
+      chatSessionId,
+      promptId: 0,
+      filters: null,
+      selectedDocumentIds: [],
+      use_agentic_search: false,
+      regenerate: false,
+    };
+
+    let result = '';
+    for await (const packets of sendMessage(params)) {
+      for (const packet of packets) {
+        if (packet.obj.type === PacketType.MESSAGE_DELTA) {
+          result += packet.obj.content;
+        }
+      }
+    }
+
+    return extractRelatedQuestions(result);
+  } catch (error) {
+    console.error('Error fetching related questions:', error);
+    return [];
+  }
+}
+
+export function useChatController({
+  personaId,
+  enableQgen = false,
+  qgenAsistantId,
+  deepResearch,
+}: UseChatControllerProps) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [chatSessionId, setChatSessionId] = useState<string | null>(null);
+  const [isDeepResearchEnabled, setIsDeepResearchEnabled] = useState(
+    deepResearch === 'always_on' || deepResearch === 'user_on',
+  );
+  const [isFetchingRelatedQuestions, setIsFetchingRelatedQuestions] =
+    useState(false);
+  const [isCancelled, setIsCancelled] = useState(false);
+
+  const messagesRef = useRef(messages);
+  const nodeIdCounter = useRef(1);
+  const isCancelledRef = useRef(isCancelled);
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    isCancelledRef.current = isCancelled;
+  }, [isCancelled]);
+
+  const { isStreaming, startStreaming, cancelStreaming } = useChatStreaming({
+    onMessageUpdate: (message) => {
+      setMessages((prev) => {
+        const existingIndex = prev.findIndex(
+          (m) => m.nodeId === message.nodeId,
+        );
+
+        if (existingIndex >= 0) {
+          const updated = [...prev];
+          updated[existingIndex] = { ...message };
+          return updated;
+        }
+        messagesRef.current = [...prev, message];
+        return messagesRef.current;
+      });
+    },
+    onComplete: (completedMessage, processor) => {
+      // Get real database IDs from backend
+      const { userMessageId, assistantMessageId } = processor.messageIds;
+
+      // Update messages with real IDs
+      if (userMessageId || assistantMessageId) {
+        setMessages((prev) => {
+          const updatedMessages = prev.map((msg) => {
+            // Update user message with real ID
+            if (
+              userMessageId &&
+              msg.type === 'user' &&
+              msg.nodeId === completedMessage.parentNodeId
+            ) {
+              return { ...msg, messageId: userMessageId };
+            }
+
+            // Update assistant message with real ID
+            if (
+              assistantMessageId &&
+              msg.type === 'assistant' &&
+              msg.nodeId === completedMessage.nodeId
+            ) {
+              return { ...msg, messageId: assistantMessageId };
+            }
+
+            return msg;
+          });
+          messagesRef.current = updatedMessages;
+          return updatedMessages;
+        });
+      }
+    },
+    onError: (error) => {
+      const errorMessage: Message = {
+        messageId: Date.now(),
+        nodeId: nodeIdCounter.current++,
+        message: '',
+        error: `Error: ${error.message}`,
+        type: 'error',
+        parentNodeId:
+          messages.length > 0 ? messages[messages.length - 1].nodeId : null,
+        packets: [],
+        groupedPackets: [],
+        toolPackets: [],
+        displayPackets: [],
+        files: [],
+        toolCall: null,
+      };
+
+      setMessages((prev) => [...prev, errorMessage]);
+    },
+  });
+
+  const onSubmit = useCallback(
+    async ({ message }: { message?: string }) => {
+      if (isStreaming) return;
+
+      try {
+        // Create session if needed
+        let sessionId = chatSessionId;
+
+        if (!sessionId) {
+          sessionId = await createChatSession(personaId, 'Chat session');
+          setChatSessionId(sessionId);
+        }
+
+        let messageText = message;
+        let parentNodeId: number | null = null;
+        let parentMessageId: number | null = null;
+
+        // For new messages, set parent to the last assistant message
+        const lastMessage = messages
+          .filter((m) => m.type === 'assistant')
+          .pop();
+
+        const lastPacket = lastMessage?.packets.pop();
+
+        if (lastMessage && lastPacket?.obj.type !== PacketType.ERROR) {
+          parentNodeId = lastMessage.nodeId;
+          parentMessageId = lastMessage.messageId || null;
+        }
+
+        if (!messageText?.trim()) return;
+
+        // Add user message
+        const userNodeId = nodeIdCounter.current++;
+        const userMessage: Message = {
+          messageId: Date.now(),
+          nodeId: userNodeId,
+          message: messageText,
+          type: 'user',
+          parentNodeId,
+          packets: [],
+          time_sent: new Date().toISOString(),
+          files: [],
+          toolCall: null,
+          researchType: isDeepResearchEnabled
+            ? ResearchType.Deep
+            : ResearchType.Fast,
+        };
+
+        setMessages((prev) => [...prev, userMessage]);
+
+        // Start streaming assistant response
+        const assistantNodeId = nodeIdCounter.current++;
+        await startStreaming(
+          {
+            message: messageText,
+            chatSessionId: sessionId,
+            parentMessageId: parentMessageId || null,
+            useAgentSearch: isDeepResearchEnabled,
+            regenerate: false,
+            filters: null,
+            selectedDocumentIds: [],
+          },
+          assistantNodeId,
+          userNodeId,
+        );
+      } catch (error) {
+        console.error('Failed to submit message:', error);
+      }
+    },
+    [
+      chatSessionId,
+      personaId,
+      isStreaming,
+      isDeepResearchEnabled,
+      startStreaming,
+      messages,
+    ],
+  );
+
+  const onFetchRelatedQuestions = useCallback(async () => {
+    const latestAssistantMessage = messages
+      .filter((m) => m.type === 'assistant')
+      .pop();
+
+    if (
+      enableQgen &&
+      qgenAsistantId &&
+      latestAssistantMessage?.type === 'assistant'
+    ) {
+      if (isDeepResearchEnabled) {
+        setMessages((prev) => {
+          return prev.map((m) =>
+            m.nodeId === latestAssistantMessage.nodeId
+              ? { ...m, relatedQuestions: null }
+              : m,
+          );
+        });
+        return;
+      }
+
+      let relatedQuestions: RelatedQuestion[] | null = null;
+      setIsFetchingRelatedQuestions(true);
+
+      try {
+        // Get the parent user message directly from the latest assistant message
+        const userMessage = messages.find(
+          (m) => m.nodeId === latestAssistantMessage.parentNodeId,
+        );
+
+        if (userMessage && latestAssistantMessage.message) {
+          relatedQuestions = await fetchRelatedQuestions(
+            userMessage.message,
+            latestAssistantMessage.message,
+            qgenAsistantId,
+          );
+        }
+      } catch (error) {
+        console.error('Failed to fetch related questions:', error);
+      } finally {
+        setMessages((prev) => {
+          return prev.map((m) =>
+            m.nodeId === latestAssistantMessage.nodeId
+              ? { ...m, relatedQuestions }
+              : m,
+          );
+        });
+        setIsFetchingRelatedQuestions(false);
+      }
+    }
+  }, [messages, enableQgen, qgenAsistantId, isDeepResearchEnabled]);
+
+  const clearChat = useCallback(() => {
+    setMessages([]);
+    setChatSessionId(null);
+    nodeIdCounter.current = 1;
+    setIsCancelled(false);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    setIsCancelled(true);
+    cancelStreaming();
+  }, [cancelStreaming]);
+
+  return {
+    messages,
+    isStreaming,
+    isCancelled,
+    isFetchingRelatedQuestions,
+    onSubmit,
+    onFetchRelatedQuestions,
+    clearChat,
+    cancelStreaming: handleCancel,
+    isDeepResearchEnabled,
+    setIsDeepResearchEnabled,
+    chatSessionId,
+  };
+}

package/src/ChatBlock/hooks/useChatStreaming.ts

@@ -0,0 +1,82 @@
+import type { Message } from '../types/interfaces';
+import type { SendMessageParams } from '../services/streamingService';
+import { useState, useCallback, useRef } from 'react';
+import { sendMessage } from '../services/streamingService';
+import { MessageProcessor } from '../services/messageProcessor';
+
+interface UseChatStreamingProps {
+  onMessageUpdate?: (message: Message, processor: MessageProcessor) => void;
+  onComplete?: (message: Message, processor: MessageProcessor) => void;
+  onError?: (error: Error, processor: MessageProcessor) => void;
+}
+
+export function useChatStreaming({
+  onMessageUpdate,
+  onComplete,
+  onError,
+}: UseChatStreamingProps = {}) {
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [currentMessage, setCurrentMessage] = useState<Message | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const processorRef = useRef<MessageProcessor | null>(null);
+
+  const startStreaming = useCallback(
+    async (
+      params: SendMessageParams,
+      nodeId: number,
+      parentNodeId: number | null,
+    ) => {
+      // Cancel any existing streaming
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      // Reset previous processor state
+      setIsStreaming(true);
+      abortControllerRef.current = new AbortController();
+      processorRef.current = new MessageProcessor(nodeId, parentNodeId);
+
+      try {
+        for await (const packets of sendMessage({
+          ...params,
+          signal: abortControllerRef.current.signal,
+        })) {
+          processorRef.current.addPackets(packets);
+          const message = processorRef.current.getMessage();
+
+          setCurrentMessage(message);
+          onMessageUpdate?.(message, processorRef.current);
+
+          if (processorRef.current.isComplete) {
+            onComplete?.(message, processorRef.current);
+            break;
+          }
+        }
+      } catch (error) {
+        if ((error as Error).name !== 'AbortError') {
+          console.error('Streaming error:', error);
+          onError?.(error as Error, processorRef.current);
+        }
+      } finally {
+        setIsStreaming(false);
+        abortControllerRef.current = null;
+        processorRef.current = null;
+      }
+    },
+    [onMessageUpdate, onComplete, onError],
+  );
+
+  const cancelStreaming = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setIsStreaming(false);
+    }
+  }, []);
+
+  return {
+    isStreaming,
+    currentMessage,
+    startStreaming,
+    cancelStreaming,
+  };
+}

package/src/ChatBlock/hooks/useDeepCompareMemoize.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { dequal } from 'dequal';
+
+export function useDeepCompareMemoize(dependencies) {
+  const dependenciesRef = React.useRef(dependencies);
+  const signalRef = React.useRef(0);
+
+  if (!dequal(dependencies, dependenciesRef.current)) {
+    dependenciesRef.current = dependencies;
+    signalRef.current += 1;
+  }
+
+  const currentSignal = signalRef.current;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useMemo(() => dependenciesRef.current, [currentSignal]);
+}

package/src/ChatBlock/hooks/useMarked.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+// import { marked } from 'marked';
+// import { Renderer } from 'marked';
+// import hljs from 'highlight.js';
+
+export function useMarked(libs) {
+  const hljs = libs.highlightJs.default;
+  const { marked, Renderer } = libs.marked;
+
+  const renderer = React.useMemo(() => new Renderer(), [Renderer]);
+
+  renderer.paragraph = (text) => {
+    return text + '\n';
+  };
+  renderer.list = (text) => {
+    return `${text}\n\n`;
+  };
+  renderer.listitem = (text) => {
+    return `\n• ${text}`;
+  };
+  renderer.code = (code, language) => {
+    const validLanguage = hljs.getLanguage(language || '')
+      ? language
+      : 'plaintext';
+    const lang = validLanguage || 'plaintext';
+    const highlightedCode = hljs.highlight(lang, code).value;
+    return `<pre class="highlight bg-gray-700" style="padding: 5px; border-radius: 5px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; display: block; line-height: 1.2">
+<code class="${language}" style="color: #d6e2ef; font-size: 12px; ">${highlightedCode}</code>
+</pre>`;
+  };
+
+  marked.setOptions({ renderer });
+
+  const parser = React.useCallback(
+    async (msg) => {
+      const res = await marked.parse(msg);
+      return res;
+    },
+    [marked],
+  );
+
+  return { parser };
+}

package/src/ChatBlock/hooks/useQualityMarkers.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import loadable from '@loadable/component';
+
+const Sentry = loadable.lib(
+  () => import(/* webpackChunkName: "s_entry-browser" */ '@sentry/browser'), // chunk name avoids ad blockers
+);
+
+async function fetchHalloumi(answer, sources, maxContextSegments) {
+  const halloumiResponse = await fetch('/_ha/generate', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ answer, sources, maxContextSegments }),
+  });
+  return halloumiResponse;
+}
+
+const FAILURE_RATIONALE = 'Answer cannot be verified due to empty sources.';
+// const TOOLARGE_RATIONALE = 'Verification failed: Too many sources provided.';
+const TIMEOUT_RATIONALE =
+  'Verification failed: Halloumi service is unreachable or timed out.';
+
+const empty = (message, rationale, score = 0) => ({
+  claims: [
+    {
+      startOffset: 0,
+      endOffset: message.length,
+      score,
+      rationale,
+    },
+  ],
+  segments: {},
+});
+
+export function useQualityMarkers(
+  doQualityControl,
+  message,
+  sources,
+  maxContextSegments = 0,
+) {
+  const [halloumiResponse, setHalloumiResponse] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const retryHalloumi = React.useCallback(() => {
+    setHalloumiResponse(null);
+  }, []);
+
+  React.useEffect(() => {
+    async function handler() {
+      const textSources = sources.map(({ halloumiContext }) => halloumiContext);
+      if (sources.length === 0) {
+        setHalloumiResponse(empty(message, FAILURE_RATIONALE));
+        return;
+      }
+
+      // // console.log('Halloumi sources:', sources.length, sources);
+      // if (sources.length > 40) {
+      //   // eslint-disable-next-line no-console
+      //   console.warn(
+      //     `Warning: Too many sources (${sources.length}). Skipping quality control.`,
+      //   );
+      //
+      //   setHalloumiResponse(empty(message, TOOLARGE_RATIONALE));
+      //   return;
+      // }
+
+      setIsLoading(true);
+
+      try {
+        const feedback = await fetchHalloumi(
+          message,
+          textSources,
+          maxContextSegments,
+        );
+        const body = await feedback.json();
+        // console.log({ message, sources, body });
+
+        if (body.error) {
+          setHalloumiResponse(empty(message, TIMEOUT_RATIONALE, null));
+          Sentry.load().then((mod) => mod.captureException(body.error));
+        } else {
+          setHalloumiResponse(body);
+        }
+      } catch {
+        setHalloumiResponse(empty(message, TIMEOUT_RATIONALE, null));
+        throw new Error(`Unknown error fetching halloumi response`);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    if (doQualityControl && !halloumiResponse) {
+      handler();
+    }
+  }, [
+    doQualityControl,
+    halloumiResponse,
+    message,
+    sources,
+    maxContextSegments,
+  ]);
+
+  if (halloumiResponse !== null) {
+    halloumiResponse.claims = halloumiResponse.claims.filter((claim) => {
+      const claim_text = message.substring(claim.startOffset, claim.endOffset);
+      const hasSpace = claim_text.trim().includes(' ');
+      const hasSpecialCharacters = /[^a-zA-Z0-9 ]/.test(claim_text);
+      const hasSmallScore = claim.score < 0.07;
+
+      return hasSpace || !hasSpecialCharacters || !hasSmallScore;
+    });
+  }
+  return {
+    markers: halloumiResponse,
+    isLoadingHalloumi: isLoading,
+    retryHalloumi,
+  };
+}