@eeacms/volto-eea-chatbot 1.0.9 → 1.0.11

package/package.json

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

package/razzle.extend.js

@@ -26,10 +26,14 @@ const modify = (config, { target, dev }, webpack) => {
   include.push(markedPath);
   // include.push(nodeFetch);
 
-  babelLoader.use[0].options.plugins = [
-    ...(babelLoader.use[0].options.plugins || []),
-    '@babel/plugin-proposal-private-methods',
-  ];
+  const plugs = babelLoader.use[0].options.plugins || [];
+
+  if (plugs.indexOf('@babel/plugin-proposal-private-methods') < 0) {
+    babelLoader.use[0].options.plugins = [
+      ...(plugs || []),
+      '@babel/plugin-proposal-private-methods',
+    ];
+  }
 
   return config;
 };

package/src/ChatBlock/ChatBlockView.jsx

@@ -1,12 +1,36 @@
+import { useMemo, useEffect } from 'react';
 import superagent from 'superagent';
+import { parse } from 'qs';
 import withOnyxData from './hocs/withOnyxData';
 import { ChatWindow } from './chat';
 
 function ChatBlockView(props) {
-  const { assistantData, data, isEditMode } = props;
+  const { id, assistantData, data, isEditMode, location } = props;
+
+  const query = useMemo(
+    () => parse(location?.search.replace('?', '')) || {},
+    [location],
+  );
+
+  const isPlaywrightTest = query.playwright === 'yes';
+
+  useEffect(() => {
+    if (isPlaywrightTest) {
+      window.__EEA_CHATBOT_TEST_CONFIG__ = {
+        block_id: id,
+        ...data,
+      };
+    }
+  }, [id, isPlaywrightTest, data]);
 
   return assistantData ? (
-    <ChatWindow persona={assistantData} isEditMode={isEditMode} {...data} />
+    <ChatWindow
+      persona={assistantData}
+      isEditMode={isEditMode}
+      isPlaywrightTest={isPlaywrightTest}
+      block_id={id}
+      {...data}
+    />
   ) : (
     <div>Chatbot</div>
   );

package/src/ChatBlock/chat/AIMessage.tsx

@@ -474,7 +474,10 @@ export function AIMessage({
 
   // Tab panes - conditionally include Sources tab
   const panes = [
-    { menuItem: 'Answer', pane: <Tab.Pane key="answer">{answerTab}</Tab.Pane> },
+    {
+      menuItem: { key: 'answer', content: 'Answer', className: 'answer-tab' },
+      pane: <Tab.Pane key="answer">{answerTab}</Tab.Pane>,
+    },
     ...(showSources && !error
       ? [
           {
@@ -486,6 +489,7 @@ export function AIMessage({
                   <span className="sources-count">({sources.length})</span>
                 </span>
               ),
+              className: 'sources-tab',
             },
             pane: (
               <Tab.Pane key="sources">

package/src/ChatBlock/chat/ChatWindow.tsx

@@ -22,6 +22,7 @@ import PenIcon from '../../icons/square-pen.svg';
 import '../style.less';
 
 interface ChatWindowProps {
+  block_id?: string;
   persona: Persona;
   rehypePrism?: any;
   remarkGfm?: any;
@@ -47,15 +48,18 @@ interface ChatWindowProps {
   enableMatomoTracking?: boolean;
   onDemandInputToggle?: boolean;
   maxContextSegments?: number;
+  isPlaywrightTest?: boolean;
   [key: string]: any;
 }
 
 function ChatWindow({
+  block_id,
   persona,
   rehypePrism,
   remarkGfm,
   placeholderPrompt = 'Ask a question',
   isEditMode,
+  isPlaywrightTest,
   ...data
 }: ChatWindowProps) {
   const {
@@ -141,7 +145,10 @@ function ChatWindow({
   );
 
   return (
-    <div className="chat-window">
+    <div
+      className="chat-window"
+      data-playwright-block-id={isPlaywrightTest ? block_id : undefined}
+    >
       <div className="messages">
         {showLandingPage ? (
           <>
@@ -211,7 +218,7 @@ function ChatWindow({
 
               {isStreaming &&
                 !isFetchingRelatedQuestions &&
-                !messages[messages.length - 1].isFinalMessageComing && (
+                !messages[messages.length - 1]?.isFinalMessageComing && (
                   <div className="comment">
                     <div className="circle assistant placeholder"></div>
                     <div className="comment-content">
@@ -269,7 +276,9 @@ function ChatWindow({
             </div>
           )}
 
-          {deepResearch === 'always_on' && <small>Deep research on</small>}
+          {deepResearch === 'always_on' && (
+            <small className="deep-research-toggle">Deep research on</small>
+          )}
         </div>
         <div ref={chatWindowEndRef} /> {/* End div to mark the bottom */}
       </div>

package/src/ChatBlock/components/AutoResizeTextarea.jsx

@@ -40,6 +40,7 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
             setInput(input + '\n');
           }
         }}
+        disabled={isStreaming}
         {...rest}
         ref={ref}
       />
@@ -52,7 +53,7 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
           onKeyDown={(e) => {
             handleSubmit(e);
           }}
-          disabled={isStreaming}
+          disabled={isStreaming || input.trim() === ''}
           onClick={(e) => {
             handleSubmit(e);
           }}

package/src/ChatBlock/components/QualityCheckToggle.jsx

@@ -10,7 +10,7 @@ const QualityCheckToggle = ({ isEditMode, enabled, setEnabled }) => {
         content="Checks the AI's statements against cited sources to highlight possible inaccuracies and hallucinations."
         trigger={
           <Checkbox
-            id="fact-check-toggle"
+            id="quality-check-toggle"
             toggle
             label="Fact-check AI answer"
             disabled={isEditMode}

package/src/ChatBlock/hooks/useChatController.ts

@@ -18,6 +18,10 @@ interface RelatedQuestion {
 
 // Extract JSON array from related questions response
 function extractRelatedQuestions(str: string): RelatedQuestion[] {
+  if (str.toLowerCase().includes('no_response')) {
+    throw new Error('Related questions were not generated properly');
+  }
+
   const regex = /\[[\s\S]*?\]/;
   const match = str.match(regex);
 
@@ -65,7 +69,7 @@ async function fetchRelatedQuestions(
     };
 
     let result = '';
-    for await (const packets of sendMessage(params)) {
+    for await (const packets of sendMessage(params, true)) {
       for (const packet of packets) {
         if (packet.obj.type === PacketType.MESSAGE_DELTA) {
           result += packet.obj.content;
@@ -88,6 +92,7 @@ export function useChatController({
 }: UseChatControllerProps) {
   const [messages, setMessages] = useState<Message[]>([]);
   const [chatSessionId, setChatSessionId] = useState<string | null>(null);
+  const [chatSessionLoading, setChatSessionLoading] = useState(false);
   const [isDeepResearchEnabled, setIsDeepResearchEnabled] = useState(
     deepResearch === 'always_on' || deepResearch === 'user_on',
   );
@@ -183,6 +188,7 @@ export function useChatController({
         let sessionId = chatSessionId;
 
         if (!sessionId) {
+          setChatSessionLoading(true);
           sessionId = await createChatSession(personaId, 'Chat session');
           setChatSessionId(sessionId);
         }
@@ -241,6 +247,8 @@ export function useChatController({
         );
       } catch (error) {
         console.error('Failed to submit message:', error);
+      } finally {
+        setChatSessionLoading(false);
       }
     },
     [
@@ -319,7 +327,7 @@ export function useChatController({
 
   return {
     messages,
-    isStreaming,
+    isStreaming: isStreaming || chatSessionLoading,
     isCancelled,
     isFetchingRelatedQuestions,
     onSubmit,

package/src/ChatBlock/index.js

@@ -5,7 +5,7 @@ import { ChatBlockSchema } from './schema';
 
 export default function installChatBlock(config) {
   config.blocks.blocksConfig.eeaChatbot = {
-    id: 'eea_chatbot',
+    id: 'eeaChatbot',
     title: 'AI Chatbot',
     icon: codeSVG,
     group: 'common',

package/src/ChatBlock/packets/renderers/MessageTextRenderer.tsx

@@ -46,6 +46,14 @@ export const MessageTextRenderer: MessageRenderer<ChatPacket> = ({
   const [displayedPacketCount, setDisplayedPacketCount] =
     useState(initialPacketCount);
 
+  useEffect(() => {
+    const audioCtx = new AudioContext();
+
+    return () => {
+      audioCtx.close();
+    };
+  }, []);
+
   // Animation effect - gradually increase displayed packets at controlled rate
   // Adaptive animation: ensures visible typing effect even for fast streams
   useEffect(() => {

package/src/ChatBlock/services/streamingService.ts

@@ -8,7 +8,7 @@ export interface SendMessageParams {
   parentMessageId: number | null;
   chatSessionId: string;
   filters: Filters | null;
-  selectedDocumentIds: number[] | null;
+  selectedDocumentIds: number[] | string[] | null;
   queryOverride?: string;
   forceSearch?: boolean;
   modelProvider?: string;
@@ -166,30 +166,33 @@ export async function* handleStream(
 /**
  * Send a message and stream the response
  */
-export async function* sendMessage({
-  regenerate,
-  retrieval_options,
-  message,
-  fileDescriptors,
-  currentMessageFiles,
-  parentMessageId,
-  chatSessionId,
-  filters,
-  selectedDocumentIds,
-  queryOverride,
-  forceSearch,
-  modelProvider,
-  modelVersion,
-  temperature,
-  systemPromptOverride,
-  taskPromptOverride,
-  useExistingUserMessage,
-  alternateAssistantId,
-  signal,
-  useAgentSearch,
-  enabledToolIds,
-  forcedToolIds,
-}: SendMessageParams): AsyncGenerator<Packet[], void, unknown> {
+export async function* sendMessage(
+  {
+    regenerate,
+    retrieval_options,
+    message,
+    fileDescriptors,
+    currentMessageFiles,
+    parentMessageId,
+    chatSessionId,
+    filters,
+    selectedDocumentIds,
+    queryOverride,
+    forceSearch,
+    modelProvider,
+    modelVersion,
+    temperature,
+    systemPromptOverride,
+    taskPromptOverride,
+    useExistingUserMessage,
+    alternateAssistantId,
+    signal,
+    useAgentSearch,
+    enabledToolIds,
+    forcedToolIds,
+  }: SendMessageParams,
+  isRelatedQuestion: boolean = false,
+): AsyncGenerator<Packet[], void, unknown> {
   const documentsAreSelected =
     selectedDocumentIds && selectedDocumentIds.length > 0;
 
@@ -233,7 +236,8 @@ export async function* sendMessage({
 
   const body = JSON.stringify(payload);
 
-  const sendMessageResponse = await fetch('/_da/chat/send-message', {
+  const middleware = isRelatedQuestion ? '_rq' : '_da';
+  const sendMessageResponse = await fetch(`/${middleware}/chat/send-message`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

package/src/ChatBlock/style.less

@@ -610,6 +610,8 @@ mark {
 }
 
 .quality-check-toggle {
+  margin-top: 0;
+
   .ui.toggle.checkbox {
     input:checked ~ label {
       color: @grey !important;
@@ -1306,7 +1308,7 @@ mark {
   }
 }
 
-#fact-check-toggle[disabled] ~ label {
+#quality-check-toggle[disabled] ~ label {
   opacity: 1;
 }
 

package/src/ChatBlock/tests/ChatMessage.test.jsx

@@ -0,0 +1,75 @@
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import { ChatMessage } from '../chat/ChatMessage';
+
+const mockStore = configureStore();
+
+// Mock loadable components
+jest.mock('@loadable/component', () => {
+  const loadable = () => {
+    const MockComponent = ({ children }) => <div>{children}</div>;
+    return MockComponent;
+  };
+  loadable.lib = () => {
+    const MockComponent = ({ children }) =>
+      children ? children({ default: {} }) : null;
+    return MockComponent;
+  };
+  return { __esModule: true, default: loadable };
+});
+
+describe('ChatMessage', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      userSession: { token: '1234' },
+      intl: { locale: 'en', messages: {} },
+    });
+  });
+
+  const renderComponent = (props) =>
+    renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ChatMessage {...props} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+  it('renders error message correctly', () => {
+    const props = {
+      message: {
+        messageId: 3,
+        type: 'error',
+        error: 'Something went wrong',
+      },
+      libs: { remarkGfm: { default: [] } },
+      isLoading: false,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('returns null for unknown message type', () => {
+    const props = {
+      message: {
+        messageId: 4,
+        message: 'Unknown type',
+        type: 'unknown',
+      },
+      libs: { remarkGfm: { default: [] } },
+      isLoading: false,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toBeNull();
+  });
+});

package/src/ChatBlock/tests/ClaimModal.test.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ClaimModal } from '../components/markdown/ClaimModal';
+
+// Mock semantic-ui-react Modal
+jest.mock('semantic-ui-react', () => ({
+  Modal: ({ children, trigger, className }) => (
+    <div className={className} data-testid="modal">
+      <div data-testid="trigger">{trigger}</div>
+      <div data-testid="content">{children}</div>
+    </div>
+  ),
+  ModalHeader: ({ children }) => <div data-testid="header">{children}</div>,
+  ModalContent: ({ children }) => (
+    <div data-testid="modal-content">{children}</div>
+  ),
+}));
+
+// Mock ClaimSegments
+jest.mock('../components/markdown/ClaimSegments', () => ({
+  ClaimSegments: () => <div data-testid="claim-segments">ClaimSegments</div>,
+}));
+
+describe('ClaimModal', () => {
+  const defaultProps = {
+    claim: {
+      score: 0.85,
+      claimString: 'This is a claim about something important.',
+      rationale: 'The claim is supported by multiple sources.',
+      segmentIds: [1, 2, 3],
+    },
+    markers: {
+      segments: {
+        1: { id: 1, text: 'segment 1' },
+        2: { id: 2, text: 'segment 2' },
+        3: { id: 3, text: 'segment 3' },
+      },
+    },
+    text: ['something important'],
+    citedSources: [
+      { id: 1, semantic_identifier: 'Source 1', link: 'https://example.com' },
+    ],
+  };
+
+  it('renders the claim modal with high score', () => {
+    const component = renderer.create(<ClaimModal {...defaultProps} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with low score', () => {
+    const props = {
+      ...defaultProps,
+      claim: {
+        ...defaultProps.claim,
+        score: 0.3,
+      },
+    };
+    const component = renderer.create(<ClaimModal {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with medium score', () => {
+    const props = {
+      ...defaultProps,
+      claim: {
+        ...defaultProps.claim,
+        score: 0.6,
+      },
+    };
+    const component = renderer.create(<ClaimModal {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles empty text array', () => {
+    const props = {
+      ...defaultProps,
+      text: [],
+    };
+    const component = renderer.create(<ClaimModal {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles claim with markdown formatting', () => {
+    const props = {
+      ...defaultProps,
+      claim: {
+        ...defaultProps.claim,
+        claimString: '**Bold claim** with *italic* and [[1]](url)',
+      },
+    };
+    const component = renderer.create(<ClaimModal {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with empty markers', () => {
+    const props = {
+      ...defaultProps,
+      markers: {},
+    };
+    const component = renderer.create(<ClaimModal {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles zero score', () => {
+    const props = {
+      ...defaultProps,
+      claim: {
+        ...defaultProps.claim,
+        score: 0,
+      },
+    };
+    const component = renderer.create(<ClaimModal {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles perfect score', () => {
+    const props = {
+      ...defaultProps,
+      claim: {
+        ...defaultProps.claim,
+        score: 1.0,
+      },
+    };
+    const component = renderer.create(<ClaimModal {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});