@eeacms/volto-eea-chatbot 1.0.9 → 1.0.11

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

@@ -0,0 +1,191 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { RenderClaimView } from '../components/markdown/RenderClaimView';
+
+describe('RenderClaimView', () => {
+  const createRef = () => ({ current: {} });
+
+  it('renders plain text without segments', () => {
+    const props = {
+      value: 'This is plain text without any segments.',
+      segments: [],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders text with a single segment', () => {
+    const props = {
+      value: 'This is text with a segment here.',
+      segments: [
+        {
+          id: 1,
+          startOffset: 20,
+          endOffset: 27,
+        },
+      ],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders text with multiple segments', () => {
+    const props = {
+      value: 'First segment and second segment here.',
+      segments: [
+        { id: 1, startOffset: 0, endOffset: 13 },
+        { id: 2, startOffset: 18, endOffset: 32 },
+      ],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('highlights visible segment', () => {
+    const props = {
+      value: 'This is text with a segment here.',
+      segments: [
+        {
+          id: 1,
+          startOffset: 20,
+          endOffset: 27,
+        },
+      ],
+      sourceStartIndex: 0,
+      visibleSegmentId: 1,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    render(<RenderClaimView {...props} />);
+    const segment = document.querySelector('.citation-segment.active');
+    expect(segment).toBeInTheDocument();
+  });
+
+  it('handles segments with sourceStartIndex offset', () => {
+    const props = {
+      value: 'text with segment.',
+      segments: [
+        {
+          id: 1,
+          startOffset: 110,
+          endOffset: 117,
+        },
+      ],
+      sourceStartIndex: 100,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles text with newlines', () => {
+    const props = {
+      value: 'Line one\nLine two\nLine three',
+      segments: [],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles segment ending with newline', () => {
+    const props = {
+      value: 'Segment text\nMore text',
+      segments: [
+        {
+          id: 1,
+          startOffset: 0,
+          endOffset: 13,
+        },
+      ],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('filters out DOCUMENT and Source lines', () => {
+    const props = {
+      value: 'DOCUMENT 1\nActual content\nSource: test',
+      segments: [],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    render(<RenderClaimView {...props} />);
+    expect(screen.queryByText(/DOCUMENT 1/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Source: test/)).not.toBeInTheDocument();
+    expect(screen.getByText('Actual content')).toBeInTheDocument();
+  });
+
+  it('handles empty segments array', () => {
+    const props = {
+      value: 'Some text content',
+      segments: [],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('sorts segments by startOffset', () => {
+    const props = {
+      value: 'AAAA BBBB CCCC',
+      segments: [
+        { id: 2, startOffset: 5, endOffset: 9 },
+        { id: 1, startOffset: 0, endOffset: 4 },
+        { id: 3, startOffset: 10, endOffset: 14 },
+      ],
+      sourceStartIndex: 0,
+      visibleSegmentId: null,
+      segmentContainerRef: createRef(),
+      spanRefs: createRef(),
+    };
+
+    const component = renderer.create(<RenderClaimView {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { findRenderer, RendererComponent } from '../packets/RendererComponent';
+import { PacketType } from '../types/streamingModels';
+
+// Mock loadable
+jest.mock('@loadable/component', () => {
+  const loadable = (loader) => {
+    const MockComponent = (props) => (
+      <div data-testid="loadable">{props.children}</div>
+    );
+    return MockComponent;
+  };
+  loadable.lib = () => {
+    const MockComponent = ({ children }) =>
+      children ? children({ default: {} }) : null;
+    return MockComponent;
+  };
+  return { __esModule: true, default: loadable };
+});
+
+describe('findRenderer', () => {
+  it('returns MessageTextRenderer for chat packets', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.MESSAGE_START } }],
+    });
+    expect(result).toBeDefined();
+    expect(result.name || result.displayName || '').toBeTruthy();
+  });
+
+  it('returns MessageTextRenderer for MESSAGE_DELTA', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.MESSAGE_DELTA } }],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns MessageTextRenderer for MESSAGE_END', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.MESSAGE_END } }],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns SearchToolRenderer for search packets', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.SEARCH_TOOL_START } }],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns ImageToolRenderer for image packets', () => {
+    const result = findRenderer({
+      packets: [
+        { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+      ],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns CustomToolRenderer for custom tool packets', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.CUSTOM_TOOL_START } }],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns FetchToolRenderer for fetch tool packets', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.FETCH_TOOL_START } }],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns ReasoningRenderer for reasoning packets', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.REASONING_START } }],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns ReasoningRenderer for REASONING_DELTA', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: PacketType.REASONING_DELTA } }],
+    });
+    expect(result).toBeDefined();
+  });
+
+  it('returns null for unknown packet types', () => {
+    const result = findRenderer({
+      packets: [{ ind: 1, obj: { type: 'unknown_type' } }],
+    });
+    expect(result).toBeNull();
+  });
+
+  it('returns null for empty packets', () => {
+    const result = findRenderer({ packets: [] });
+    expect(result).toBeNull();
+  });
+});
+
+describe('RendererComponent', () => {
+  const childRenderer = (result) => (
+    <div>
+      <span>{result.status}</span>
+      <span>{result.content}</span>
+    </div>
+  );
+
+  it('renders fallback for unrecognized packets', () => {
+    const component = renderer.create(
+      <RendererComponent
+        packets={[{ ind: 1, obj: { type: 'unknown_type' } }]}
+        onComplete={jest.fn()}
+        animate={false}
+        stopPacketSeen={false}
+        libs={{ remarkGfm: { default: [] } }}
+      >
+        {childRenderer}
+      </RendererComponent>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders fallback for empty packets', () => {
+    const component = renderer.create(
+      <RendererComponent
+        packets={[]}
+        onComplete={jest.fn()}
+        animate={false}
+        stopPacketSeen={false}
+        libs={{ remarkGfm: { default: [] } }}
+      >
+        {childRenderer}
+      </RendererComponent>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,295 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { SearchToolRenderer } from '../packets/renderers/SearchToolRenderer';
+import { PacketType } from '../types/streamingModels';
+
+describe('SearchToolRenderer', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  const mockChildRenderer = (result) => (
+    <div data-testid="renderer-result">
+      <div data-testid="status">{result.status}</div>
+      <div data-testid="content">{result.content}</div>
+    </div>
+  );
+
+  it('renders searching state for internal documents', () => {
+    const props = {
+      packets: [
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_START,
+            is_internet_search: false,
+          },
+        },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_DELTA,
+            queries: ['test query'],
+            documents: null,
+          },
+        },
+      ],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<SearchToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders searching state for internet search', () => {
+    const props = {
+      packets: [
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_START,
+            is_internet_search: true,
+          },
+        },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_DELTA,
+            queries: ['web query'],
+            documents: null,
+          },
+        },
+      ],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<SearchToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with search results', () => {
+    const props = {
+      packets: [
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_START,
+            is_internet_search: false,
+          },
+        },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_DELTA,
+            queries: ['query'],
+            documents: [
+              {
+                document_id: 'doc1',
+                semantic_identifier: 'Document 1',
+                link: 'https://example.com/1',
+                source_type: 'file',
+              },
+            ],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    let component;
+    act(() => {
+      component = renderer.create(<SearchToolRenderer {...props} />);
+    });
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders empty state when no queries', () => {
+    const props = {
+      packets: [
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_START,
+            is_internet_search: false,
+          },
+        },
+      ],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<SearchToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('removes duplicate queries', () => {
+    const props = {
+      packets: [
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_START,
+            is_internet_search: false,
+          },
+        },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_DELTA,
+            queries: ['duplicate', 'unique', 'duplicate'],
+            documents: null,
+          },
+        },
+      ],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<SearchToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('removes duplicate documents by document_id', () => {
+    const props = {
+      packets: [
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_START,
+            is_internet_search: false,
+          },
+        },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_DELTA,
+            queries: ['query'],
+            documents: [
+              { document_id: 'doc1', semantic_identifier: 'Doc 1' },
+              { document_id: 'doc1', semantic_identifier: 'Doc 1 duplicate' },
+              { document_id: 'doc2', semantic_identifier: 'Doc 2' },
+            ],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    let component;
+    act(() => {
+      component = renderer.create(<SearchToolRenderer {...props} />);
+    });
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles web results with favicon', () => {
+    const props = {
+      packets: [
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_START,
+            is_internet_search: true,
+          },
+        },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_DELTA,
+            queries: ['web search'],
+            documents: [
+              {
+                document_id: 'web1',
+                semantic_identifier: 'Web Result',
+                link: 'https://example.com/page',
+                source_type: 'web',
+              },
+            ],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    let component;
+    act(() => {
+      component = renderer.create(<SearchToolRenderer {...props} />);
+    });
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles empty packets array', () => {
+    const props = {
+      packets: [],
+      onComplete: jest.fn(),
+      animate: false,
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<SearchToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('calls onComplete after animation delay when animate is true', () => {
+    const onComplete = jest.fn();
+    const props = {
+      packets: [
+        { ind: 1, obj: { type: PacketType.SEARCH_TOOL_START } },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.SEARCH_TOOL_DELTA,
+            queries: ['query'],
+            documents: [],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete,
+      animate: true,
+      children: mockChildRenderer,
+    };
+
+    act(() => {
+      renderer.create(<SearchToolRenderer {...props} />);
+    });
+
+    // Initially not called
+    expect(onComplete).not.toHaveBeenCalled();
+
+    // Advance timers for the animation duration
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+
+    expect(onComplete).toHaveBeenCalled();
+  });
+});