@eeacms/volto-eea-chatbot 1.0.9 → 1.0.11

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

@@ -0,0 +1,178 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ImageToolRenderer } from '../packets/renderers/ImageToolRenderer';
+import { PacketType } from '../types/streamingModels';
+
+describe('ImageToolRenderer', () => {
+  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 generating state when not complete', () => {
+    const props = {
+      packets: [
+        { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+      ],
+      onComplete: jest.fn(),
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<ImageToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+    expect(props.onComplete).not.toHaveBeenCalled();
+  });
+
+  it('renders complete state with images', () => {
+    const props = {
+      packets: [
+        { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.IMAGE_GENERATION_TOOL_DELTA,
+            images: [
+              {
+                file_id: 'img1',
+                url: 'https://example.com/image1.png',
+                revised_prompt: 'A beautiful landscape',
+                shape: 'landscape',
+              },
+            ],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete: jest.fn(),
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<ImageToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders multiple images', () => {
+    const props = {
+      packets: [
+        { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.IMAGE_GENERATION_TOOL_DELTA,
+            images: [
+              {
+                file_id: 'img1',
+                url: 'https://example.com/image1.png',
+                revised_prompt: 'First image',
+                shape: 'square',
+              },
+              {
+                file_id: 'img2',
+                url: 'https://example.com/image2.png',
+                revised_prompt: 'Second image',
+                shape: 'portrait',
+              },
+            ],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete: jest.fn(),
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<ImageToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles image without revised_prompt', () => {
+    const props = {
+      packets: [
+        { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.IMAGE_GENERATION_TOOL_DELTA,
+            images: [
+              {
+                file_id: 'img1',
+                url: 'https://example.com/image1.png',
+                revised_prompt: '',
+              },
+            ],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete: jest.fn(),
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<ImageToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles image without shape (defaults to square)', () => {
+    const props = {
+      packets: [
+        { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+        {
+          ind: 1,
+          obj: {
+            type: PacketType.IMAGE_GENERATION_TOOL_DELTA,
+            images: [
+              {
+                file_id: 'img1',
+                url: 'https://example.com/image1.png',
+                revised_prompt: 'Test',
+              },
+            ],
+          },
+        },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete: jest.fn(),
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<ImageToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles empty packets array', () => {
+    const props = {
+      packets: [],
+      onComplete: jest.fn(),
+      children: mockChildRenderer,
+    };
+
+    const component = renderer.create(<ImageToolRenderer {...props} />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('calls onComplete when section end is received', () => {
+    const onComplete = jest.fn();
+    const props = {
+      packets: [
+        { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+        { ind: 1, obj: { type: PacketType.SECTION_END } },
+      ],
+      onComplete,
+      children: mockChildRenderer,
+    };
+
+    act(() => {
+      renderer.create(<ImageToolRenderer {...props} />);
+    });
+    expect(onComplete).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,227 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { MessageTextRenderer } from '../packets/renderers/MessageTextRenderer';
+import { PacketType } from '../types/streamingModels';
+
+// Mock AudioContext
+const mockClose = jest.fn();
+global.AudioContext = jest.fn().mockImplementation(() => ({
+  close: mockClose,
+}));
+
+jest.mock('@loadable/component', () => {
+  const loadable = () => {
+    const MockMarkdown = ({ children }) => (
+      <div data-testid="markdown">{children}</div>
+    );
+    return MockMarkdown;
+  };
+  loadable.lib = () => {
+    const MockComponent = ({ children }) =>
+      children ? children({ default: {} }) : null;
+    return MockComponent;
+  };
+  return { __esModule: true, default: loadable };
+});
+
+describe('MessageTextRenderer', () => {
+  const mockChildRenderer = (result) => (
+    <div data-testid="renderer-result">
+      <div data-testid="status">{result.status}</div>
+      <div data-testid="content">{result.content}</div>
+    </div>
+  );
+
+  const defaultMessage = {
+    messageId: 1,
+    nodeId: 1,
+    message: 'Hello world',
+    type: 'assistant',
+    packets: [],
+    files: [],
+    toolCall: null,
+    parentNodeId: null,
+  };
+
+  const defaultLibs = { remarkGfm: { default: [] } };
+
+  it('renders message content without animation', () => {
+    const packets = [
+      {
+        ind: 1,
+        obj: {
+          type: PacketType.MESSAGE_START,
+          content: 'Hello',
+          final_documents: null,
+        },
+      },
+      { ind: 1, obj: { type: PacketType.MESSAGE_DELTA, content: ' world' } },
+      { ind: 1, obj: { type: PacketType.MESSAGE_END } },
+      { ind: 1, obj: { type: PacketType.STOP } },
+    ];
+
+    let component;
+    act(() => {
+      component = renderer.create(
+        <MessageTextRenderer
+          packets={packets}
+          onComplete={jest.fn()}
+          animate={false}
+          stopPacketSeen={true}
+          message={defaultMessage}
+          libs={defaultLibs}
+        >
+          {mockChildRenderer}
+        </MessageTextRenderer>,
+      );
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders blinking dot when no content and no packets', () => {
+    const emptyMessage = { ...defaultMessage, message: '' };
+
+    let component;
+    act(() => {
+      component = renderer.create(
+        <MessageTextRenderer
+          packets={[]}
+          onComplete={jest.fn()}
+          animate={false}
+          stopPacketSeen={false}
+          message={emptyMessage}
+          libs={defaultLibs}
+        >
+          {mockChildRenderer}
+        </MessageTextRenderer>,
+      );
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('calls onComplete when stream is finished', () => {
+    const onComplete = jest.fn();
+    const packets = [
+      {
+        ind: 1,
+        obj: {
+          type: PacketType.MESSAGE_START,
+          content: 'Hi',
+          final_documents: null,
+        },
+      },
+      { ind: 1, obj: { type: PacketType.MESSAGE_END } },
+      { ind: 1, obj: { type: PacketType.SECTION_END } },
+    ];
+
+    act(() => {
+      renderer.create(
+        <MessageTextRenderer
+          packets={packets}
+          onComplete={onComplete}
+          animate={false}
+          stopPacketSeen={true}
+          message={defaultMessage}
+          libs={defaultLibs}
+        >
+          {mockChildRenderer}
+        </MessageTextRenderer>,
+      );
+    });
+
+    expect(onComplete).toHaveBeenCalled();
+  });
+
+  it('shows cursor when stream is not complete', () => {
+    const packets = [
+      {
+        ind: 1,
+        obj: {
+          type: PacketType.MESSAGE_START,
+          content: 'Starting...',
+          final_documents: null,
+        },
+      },
+    ];
+
+    let component;
+    act(() => {
+      component = renderer.create(
+        <MessageTextRenderer
+          packets={packets}
+          onComplete={jest.fn()}
+          animate={false}
+          stopPacketSeen={false}
+          message={{ ...defaultMessage, message: 'Starting...' }}
+          libs={defaultLibs}
+        >
+          {mockChildRenderer}
+        </MessageTextRenderer>,
+      );
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders with remarkGfm plugin when available', () => {
+    const packets = [
+      {
+        ind: 1,
+        obj: {
+          type: PacketType.MESSAGE_START,
+          content: 'test',
+          final_documents: null,
+        },
+      },
+      { ind: 1, obj: { type: PacketType.MESSAGE_END } },
+      { ind: 1, obj: { type: PacketType.STOP } },
+    ];
+
+    let component;
+    act(() => {
+      component = renderer.create(
+        <MessageTextRenderer
+          packets={packets}
+          onComplete={jest.fn()}
+          animate={false}
+          stopPacketSeen={true}
+          message={defaultMessage}
+          libs={{ remarkGfm: { default: () => {} } }}
+        >
+          {mockChildRenderer}
+        </MessageTextRenderer>,
+      );
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders with no remarkGfm', () => {
+    const packets = [
+      {
+        ind: 1,
+        obj: {
+          type: PacketType.MESSAGE_START,
+          content: 'test',
+          final_documents: null,
+        },
+      },
+      { ind: 1, obj: { type: PacketType.STOP } },
+    ];
+
+    let component;
+    act(() => {
+      component = renderer.create(
+        <MessageTextRenderer
+          packets={packets}
+          onComplete={jest.fn()}
+          animate={false}
+          stopPacketSeen={true}
+          message={defaultMessage}
+          libs={{ remarkGfm: null }}
+        >
+          {mockChildRenderer}
+        </MessageTextRenderer>,
+      );
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { MultiToolRenderer } from '../packets/MultiToolRenderer';
+import { PacketType } from '../types/streamingModels';
+
+jest.mock('@loadable/component', () => {
+  const loadable = () => {
+    const MockComponent = ({ children }) => (
+      <div data-testid="loadable">{children}</div>
+    );
+    return MockComponent;
+  };
+  loadable.lib = () => {
+    const MockComponent = ({ children }) =>
+      children ? children({ default: {} }) : null;
+    return MockComponent;
+  };
+  return { __esModule: true, default: loadable };
+});
+
+// Mock SVGIcon
+jest.mock('../components/Icon', () => {
+  return ({ name, size }) => <span data-icon={name} data-size={size} />;
+});
+
+// Mock SVG imports
+jest.mock('../../icons/done.svg', () => 'done-icon');
+jest.mock('../../icons/chevron.svg', () => 'chevron-icon');
+
+describe('MultiToolRenderer', () => {
+  const defaultMessage = {
+    messageId: 1,
+    nodeId: 1,
+    message: 'test',
+    type: 'assistant',
+    packets: [],
+    files: [],
+    toolCall: null,
+    parentNodeId: null,
+    isFinalMessageComing: false,
+    isComplete: false,
+  };
+
+  const defaultLibs = { remarkGfm: { default: [] } };
+
+  it('returns null when no tool groups match showTools filter', () => {
+    const toolGroups = [
+      {
+        ind: 1,
+        packets: [
+          { ind: 1, obj: { type: PacketType.IMAGE_GENERATION_TOOL_START } },
+        ],
+      },
+    ];
+
+    const component = renderer.create(
+      <MultiToolRenderer
+        toolGroups={toolGroups}
+        showTools={[PacketType.SEARCH_TOOL_START]}
+        message={defaultMessage}
+        libs={defaultLibs}
+      />,
+    );
+    expect(component.toJSON()).toBeNull();
+  });
+
+  it('returns null for empty tool groups', () => {
+    const component = renderer.create(
+      <MultiToolRenderer
+        toolGroups={[]}
+        message={defaultMessage}
+        libs={defaultLibs}
+      />,
+    );
+    expect(component.toJSON()).toBeNull();
+  });
+
+  it('renders search tool groups', () => {
+    const toolGroups = [
+      {
+        ind: 1,
+        packets: [
+          { ind: 1, obj: { type: PacketType.SEARCH_TOOL_START } },
+          { ind: 1, obj: { type: PacketType.SECTION_END } },
+        ],
+      },
+    ];
+
+    let component;
+    act(() => {
+      component = renderer.create(
+        <MultiToolRenderer
+          toolGroups={toolGroups}
+          showTools={[PacketType.SEARCH_TOOL_START]}
+          message={defaultMessage}
+          libs={defaultLibs}
+        />,
+      );
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders multiple tool groups', () => {
+    const toolGroups = [
+      {
+        ind: 1,
+        packets: [
+          { ind: 1, obj: { type: PacketType.SEARCH_TOOL_START } },
+          { ind: 1, obj: { type: PacketType.SECTION_END } },
+        ],
+      },
+      {
+        ind: 2,
+        packets: [
+          { ind: 2, obj: { type: PacketType.SEARCH_TOOL_START } },
+          { ind: 2, obj: { type: PacketType.SECTION_END } },
+        ],
+      },
+    ];
+
+    let component;
+    act(() => {
+      component = renderer.create(
+        <MultiToolRenderer
+          toolGroups={toolGroups}
+          showTools={[PacketType.SEARCH_TOOL_START]}
+          message={defaultMessage}
+          libs={defaultLibs}
+        />,
+      );
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,163 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { ReasoningRenderer } from '../packets/renderers/ReasoningRenderer';
+import { PacketType } from '../types/streamingModels';
+
+jest.mock('@loadable/component', () => {
+  const loadable = () => {
+    const MockMarkdown = ({ children }) => (
+      <div data-testid="markdown">{children}</div>
+    );
+    return MockMarkdown;
+  };
+  loadable.lib = () => {
+    const MockComponent = ({ children }) =>
+      children ? children({ default: {} }) : null;
+    return MockComponent;
+  };
+  return { __esModule: true, default: loadable };
+});
+
+describe('ReasoningRenderer', () => {
+  const mockChildRenderer = (result) => (
+    <div data-testid="renderer-result">
+      <div data-testid="status">{result.status}</div>
+      <div data-testid="content">{result.content}</div>
+    </div>
+  );
+
+  const defaultMessage = {
+    messageId: 1,
+    nodeId: 1,
+    message: 'test',
+    type: 'assistant',
+    packets: [],
+    files: [],
+    toolCall: null,
+    parentNodeId: null,
+  };
+
+  const defaultLibs = { remarkGfm: { default: [] } };
+
+  it('renders empty content when no packets', () => {
+    const component = renderer.create(
+      <ReasoningRenderer
+        packets={[]}
+        onComplete={jest.fn()}
+        animate={false}
+        stopPacketSeen={false}
+        message={defaultMessage}
+        libs={defaultLibs}
+      >
+        {mockChildRenderer}
+      </ReasoningRenderer>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders thinking status when reasoning has started', () => {
+    const packets = [
+      { ind: 1, obj: { type: PacketType.REASONING_START } },
+      {
+        ind: 1,
+        obj: { type: PacketType.REASONING_DELTA, reasoning: 'Let me think...' },
+      },
+    ];
+
+    const component = renderer.create(
+      <ReasoningRenderer
+        packets={packets}
+        onComplete={jest.fn()}
+        animate={false}
+        stopPacketSeen={false}
+        message={defaultMessage}
+        libs={defaultLibs}
+      >
+        {mockChildRenderer}
+      </ReasoningRenderer>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('calls onComplete when reasoning ends without animation', () => {
+    const onComplete = jest.fn();
+    const packets = [
+      { ind: 1, obj: { type: PacketType.REASONING_START } },
+      {
+        ind: 1,
+        obj: { type: PacketType.REASONING_DELTA, reasoning: 'Thinking...' },
+      },
+      { ind: 1, obj: { type: PacketType.SECTION_END } },
+    ];
+
+    act(() => {
+      renderer.create(
+        <ReasoningRenderer
+          packets={packets}
+          onComplete={onComplete}
+          animate={false}
+          stopPacketSeen={false}
+          message={defaultMessage}
+          libs={defaultLibs}
+        >
+          {mockChildRenderer}
+        </ReasoningRenderer>,
+      );
+    });
+
+    expect(onComplete).toHaveBeenCalled();
+  });
+
+  it('renders with REASONING_END packet type', () => {
+    const packets = [
+      { ind: 1, obj: { type: PacketType.REASONING_START } },
+      {
+        ind: 1,
+        obj: { type: PacketType.REASONING_DELTA, reasoning: 'Analysis' },
+      },
+      { ind: 1, obj: { type: PacketType.REASONING_END } },
+    ];
+
+    const component = renderer.create(
+      <ReasoningRenderer
+        packets={packets}
+        onComplete={jest.fn()}
+        animate={false}
+        stopPacketSeen={false}
+        message={defaultMessage}
+        libs={defaultLibs}
+      >
+        {mockChildRenderer}
+      </ReasoningRenderer>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('concatenates multiple reasoning deltas', () => {
+    const packets = [
+      { ind: 1, obj: { type: PacketType.REASONING_START } },
+      {
+        ind: 1,
+        obj: { type: PacketType.REASONING_DELTA, reasoning: 'First ' },
+      },
+      {
+        ind: 1,
+        obj: { type: PacketType.REASONING_DELTA, reasoning: 'second' },
+      },
+    ];
+
+    const component = renderer.create(
+      <ReasoningRenderer
+        packets={packets}
+        onComplete={jest.fn()}
+        animate={false}
+        stopPacketSeen={false}
+        message={defaultMessage}
+        libs={defaultLibs}
+      >
+        {mockChildRenderer}
+      </ReasoningRenderer>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});