@eeacms/volto-eea-chatbot 1.0.9 → 1.0.11

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

@@ -0,0 +1,121 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useScrollonStream } from '../hooks/useScrollonStream';
+
+describe('useScrollonStream', () => {
+  let addEventListenerSpy;
+  let removeEventListenerSpy;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+    removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    addEventListenerSpy.mockRestore();
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it('sets up event listeners when enabled and streaming', () => {
+    const bottomRef = { current: document.createElement('div') };
+    renderHook(() =>
+      useScrollonStream({
+        bottomRef,
+        isStreaming: true,
+        enabled: true,
+      }),
+    );
+
+    const eventTypes = addEventListenerSpy.mock.calls.map((c) => c[0]);
+    expect(eventTypes).toContain('wheel');
+    expect(eventTypes).toContain('touchstart');
+    expect(eventTypes).toContain('keydown');
+    expect(eventTypes).toContain('mousedown');
+  });
+
+  it('disables scrolling on user wheel event', () => {
+    const bottomRef = { current: document.createElement('div') };
+    renderHook(() =>
+      useScrollonStream({
+        bottomRef,
+        isStreaming: true,
+        enabled: true,
+      }),
+    );
+
+    act(() => {
+      window.dispatchEvent(new Event('wheel'));
+    });
+
+    // After wheel event, the scroll listener should be removed
+    expect(removeEventListenerSpy).toHaveBeenCalled();
+  });
+
+  it('sets isActive to false after streaming stops with grace period', () => {
+    const bottomRef = { current: document.createElement('div') };
+    const { rerender } = renderHook(
+      ({ isStreaming }) =>
+        useScrollonStream({
+          bottomRef,
+          isStreaming,
+          enabled: true,
+        }),
+      { initialProps: { isStreaming: true } },
+    );
+
+    // Stop streaming
+    rerender({ isStreaming: false });
+
+    // Should still be active before timeout
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+  });
+
+  it('does not set up event listeners when disabled', () => {
+    const bottomRef = { current: document.createElement('div') };
+    const callsBefore = addEventListenerSpy.mock.calls.length;
+
+    renderHook(() =>
+      useScrollonStream({
+        bottomRef,
+        isStreaming: true,
+        enabled: false,
+      }),
+    );
+
+    // Only the streaming state listener calls, not user input listeners
+    const newCalls = addEventListenerSpy.mock.calls
+      .slice(callsBefore)
+      .map((c) => c[0]);
+    expect(newCalls).not.toContain('wheel');
+  });
+
+  it('handles missing bottomRef gracefully', () => {
+    const bottomRef = { current: null };
+    expect(() => {
+      renderHook(() =>
+        useScrollonStream({
+          bottomRef,
+          isStreaming: true,
+          enabled: true,
+        }),
+      );
+    }).not.toThrow();
+  });
+
+  it('cleans up on unmount', () => {
+    const bottomRef = { current: document.createElement('div') };
+    const { unmount } = renderHook(() =>
+      useScrollonStream({
+        bottomRef,
+        isStreaming: true,
+        enabled: true,
+      }),
+    );
+
+    unmount();
+    expect(removeEventListenerSpy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,241 @@
+import { act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import '@testing-library/jest-dom/extend-expect';
+import {
+  EMAIL_REGEX,
+  transformEmailsToLinks,
+  debounce,
+  useCopyToClipboard,
+  convertToPercentage,
+  createChatMessageFeedback,
+} from '../utils';
+
+describe('utils', () => {
+  describe('EMAIL_REGEX', () => {
+    it('matches valid email addresses', () => {
+      expect('test@example.com').toMatch(EMAIL_REGEX);
+      expect('user.name@domain.org').toMatch(EMAIL_REGEX);
+      expect('user+tag@example.co.uk').toMatch(EMAIL_REGEX);
+    });
+
+    it('does not match invalid email addresses', () => {
+      expect('not-an-email').not.toMatch(EMAIL_REGEX);
+      expect('@missing-local.com').not.toMatch(EMAIL_REGEX);
+    });
+  });
+
+  describe('transformEmailsToLinks', () => {
+    it('transforms email addresses to mailto links', () => {
+      const text = 'Contact us at test@example.com';
+      const result = transformEmailsToLinks(text);
+      // Result includes: ['Contact us at ', <a>email</a>, '']
+      expect(result.length).toBeGreaterThanOrEqual(2);
+      expect(result[0]).toBe('Contact us at ');
+    });
+
+    it('handles text without email addresses', () => {
+      const text = 'No email here';
+      const result = transformEmailsToLinks(text);
+      expect(result).toHaveLength(1);
+      expect(result[0]).toBe('No email here');
+    });
+
+    it('handles multiple email addresses', () => {
+      const text = 'Email one@test.com and two@test.com';
+      const result = transformEmailsToLinks(text);
+      expect(result.length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('debounce', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('calls the function immediately on first call', () => {
+      const callable = jest.fn();
+      const clickSignal = { current: null };
+
+      debounce(callable, clickSignal);
+
+      expect(callable).toHaveBeenCalledTimes(1);
+    });
+
+    it('prevents multiple calls within debounce period', () => {
+      const callable = jest.fn();
+      const clickSignal = { current: null };
+
+      debounce(callable, clickSignal);
+      debounce(callable, clickSignal);
+      debounce(callable, clickSignal);
+
+      expect(callable).toHaveBeenCalledTimes(1);
+    });
+
+    it('allows call after debounce period', () => {
+      const callable = jest.fn();
+      const clickSignal = { current: null };
+
+      debounce(callable, clickSignal);
+      expect(callable).toHaveBeenCalledTimes(1);
+
+      jest.advanceTimersByTime(1000);
+
+      debounce(callable, clickSignal);
+      expect(callable).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('useCopyToClipboard', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      Object.assign(navigator, {
+        clipboard: {
+          writeText: jest.fn().mockResolvedValue(undefined),
+        },
+      });
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('returns initial state as not copied', () => {
+      const { result } = renderHook(() => useCopyToClipboard('test'));
+      expect(result.current[0]).toBe(false);
+    });
+
+    it('copies text to clipboard when copy is called', async () => {
+      const { result } = renderHook(() => useCopyToClipboard('test text'));
+
+      await act(async () => {
+        result.current[1]();
+      });
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test text');
+      expect(result.current[0]).toBe(true);
+    });
+
+    it('resets copied state after timeout', async () => {
+      const { result } = renderHook(() => useCopyToClipboard('test'));
+
+      await act(async () => {
+        result.current[1]();
+      });
+
+      expect(result.current[0]).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      expect(result.current[0]).toBe(false);
+    });
+
+    it('handles clipboard write failure', async () => {
+      navigator.clipboard.writeText = jest.fn().mockRejectedValue(new Error());
+
+      const { result } = renderHook(() => useCopyToClipboard('test'));
+
+      await act(async () => {
+        result.current[1]();
+      });
+
+      expect(result.current[0]).toBe(false);
+    });
+  });
+
+  describe('convertToPercentage', () => {
+    it('converts float to percentage string', () => {
+      expect(convertToPercentage(0.5)).toBe('50.00%');
+      expect(convertToPercentage(0.123)).toBe('12.30%');
+      expect(convertToPercentage(1)).toBe('100.00%');
+      expect(convertToPercentage(0)).toBe('0.00%');
+    });
+
+    it('handles custom digit precision', () => {
+      expect(convertToPercentage(0.5, 0)).toBe('50%');
+      expect(convertToPercentage(0.5, 1)).toBe('50.0%');
+      expect(convertToPercentage(0.123, 1)).toBe('12.3%');
+    });
+
+    it('returns 0% for values outside 0-1 range', () => {
+      expect(convertToPercentage(-0.5)).toBe('0%');
+      expect(convertToPercentage(1.5)).toBe('0%');
+      expect(convertToPercentage(-1)).toBe('0%');
+    });
+  });
+
+  describe('createChatMessageFeedback', () => {
+    beforeEach(() => {
+      global.fetch = jest.fn();
+    });
+
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it('sends positive feedback correctly', async () => {
+      const mockResponse = { success: true };
+      global.fetch.mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(mockResponse),
+      });
+
+      await createChatMessageFeedback({
+        chat_message_id: '123',
+        is_positive: true,
+        feedback_text: 'Great response!',
+      });
+
+      expect(fetch).toHaveBeenCalledWith(
+        '/_da/chat/create-chat-message-feedback',
+        expect.objectContaining({
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      );
+
+      const callBody = JSON.parse(fetch.mock.calls[0][1].body);
+      expect(callBody.chat_message_id).toBe('123');
+      expect(callBody.is_positive).toBe(true);
+      expect(callBody.predefined_feedback).toBeUndefined();
+    });
+
+    it('sends negative feedback with predefined reason', async () => {
+      const mockResponse = { success: true };
+      global.fetch.mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(mockResponse),
+      });
+
+      await createChatMessageFeedback({
+        chat_message_id: '123',
+        is_positive: false,
+        predefined_feedback: 'Incorrect information',
+      });
+
+      const callBody = JSON.parse(fetch.mock.calls[0][1].body);
+      expect(callBody.is_positive).toBe(false);
+      expect(callBody.predefined_feedback).toBe('Incorrect information');
+    });
+
+    it('throws error on failed request', async () => {
+      global.fetch.mockResolvedValue({
+        ok: false,
+        status: 500,
+      });
+
+      await expect(
+        createChatMessageFeedback({
+          chat_message_id: '123',
+          is_positive: true,
+        }),
+      ).rejects.toThrow('Failed to submit feedback.');
+    });
+  });
+});

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

@@ -0,0 +1,81 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import withOnyxData from '../hocs/withOnyxData';
+
+describe('withOnyxData', () => {
+  it('shows loader initially', () => {
+    const TestComponent = ({ data }) => <div>Data: {data}</div>;
+    const callback = () => ['data', null, 'test'];
+    const WrappedComponent = withOnyxData(callback)(TestComponent);
+
+    render(<WrappedComponent />);
+
+    // The Placeholder component should be rendered
+    expect(screen.queryByText('Data:')).not.toBeInTheDocument();
+  });
+
+  it('renders component with fetched data', async () => {
+    const TestComponent = ({ testData }) => <div>Data: {testData}</div>;
+    const mockFetcher = Promise.resolve({ body: 'fetched value' });
+    const callback = () => ['testData', mockFetcher, 'test-key'];
+    const WrappedComponent = withOnyxData(callback)(TestComponent);
+
+    render(<WrappedComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Data: fetched value')).toBeInTheDocument();
+    });
+  });
+
+  it('passes original props to wrapped component', async () => {
+    const TestComponent = ({ testData, originalProp }) => (
+      <div>
+        Data: {testData}, Original: {originalProp}
+      </div>
+    );
+    const mockFetcher = Promise.resolve({ body: 'fetched value' });
+    const callback = () => ['testData', mockFetcher, 'test-key'];
+    const WrappedComponent = withOnyxData(callback)(TestComponent);
+
+    render(<WrappedComponent originalProp="original value" />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Data: fetched value, Original: original value'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('handles null fetcher', async () => {
+    const TestComponent = ({ data }) => <div>Data: {data || 'none'}</div>;
+    const callback = () => ['data', null, 'test'];
+    const WrappedComponent = withOnyxData(callback)(TestComponent);
+
+    render(<WrappedComponent />);
+
+    // Should stay in loading state
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(screen.queryByText('Data: none')).not.toBeInTheDocument();
+  });
+
+  it('refetches when depKey changes', async () => {
+    const TestComponent = ({ testData }) => <div>Data: {testData}</div>;
+    const callback = (props) => {
+      const mockFetcher = Promise.resolve({ body: `value-${props.depKey}` });
+      return ['testData', mockFetcher, props.depKey];
+    };
+    const WrappedComponent = withOnyxData(callback)(TestComponent);
+
+    const { rerender } = render(<WrappedComponent depKey="key1" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Data: value-key1')).toBeInTheDocument();
+    });
+
+    rerender(<WrappedComponent depKey="key2" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Data: value-key2')).toBeInTheDocument();
+    });
+  });
+});

package/src/ChatBlock/utils/citations.ts

@@ -18,7 +18,7 @@ export function addCitations(text: string, message: Message): string {
   return text.replaceAll(CITATION_MATCH, (match) => {
     const number = match.match(/\d+/)?.[0];
     if (!number || !message.citations) {
-      return text;
+      return match;
     }
     return `[${match}](${message.citations[number]})`;
   });

package/src/halloumi/generative.js

@@ -79,6 +79,7 @@ async function getLLMResponse(model, prompt) {
     const filePath = process.env.MOCK_HALLOUMI_FILE_PATH;
     const fileContent = fs.readFileSync(filePath, 'utf-8');
     jsonData = JSON.parse(fileContent);
+    await new Promise((resolve) => setTimeout(resolve, 2000));
     return jsonData;
   }