@eeacms/volto-eea-chatbot 1.0.9

package/src/ChatBlock/hooks/useScrollonStream.ts

@@ -0,0 +1,131 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+type ScrollonStreamProps = {
+  bottomRef?: React.RefObject<HTMLDivElement>;
+  isStreaming: boolean;
+  enabled?: boolean;
+};
+
+export function useScrollonStream({
+  bottomRef,
+  isStreaming,
+  ...props
+}: ScrollonStreamProps) {
+  const [enabled, setEnabled] = useState(props.enabled ?? true);
+  const scrollIntervalRef = useRef<number | null>(null);
+  const stopStreamingTimeoutRef = useRef<number | null>(null);
+  const [isActive, setIsActive] = useState(isStreaming);
+
+  function clearScrollInterval() {
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  }
+
+  const disableScroll = useCallback((e: any) => {
+    const items = document.querySelectorAll('.tools-collapsed-header');
+    const expandToolsEl = items[items.length - 1];
+    if (expandToolsEl && e?.target && expandToolsEl.contains(e.target)) {
+      return;
+    }
+    clearScrollInterval();
+    setEnabled(false);
+  }, []);
+
+  // Track streaming state with grace period for brief interruptions
+  useEffect(() => {
+    if (stopStreamingTimeoutRef.current) {
+      clearTimeout(stopStreamingTimeoutRef.current);
+    }
+
+    if (isStreaming) {
+      setIsActive(true);
+    } else {
+      // Wait before considering streaming stopped
+      stopStreamingTimeoutRef.current = window.setTimeout(() => {
+        setIsActive(false);
+      }, 500);
+    }
+
+    return () => {
+      if (stopStreamingTimeoutRef.current) {
+        clearTimeout(stopStreamingTimeoutRef.current);
+      }
+    };
+  }, [isStreaming]);
+
+  // Listen for user input events that indicate scrolling intent
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const userEvents = ['wheel', 'touchstart', 'keydown', 'mousedown'];
+
+    userEvents.forEach((e) => {
+      window.addEventListener(e, disableScroll, { passive: true });
+    });
+
+    return () => {
+      userEvents.forEach((e) => {
+        window.removeEventListener(e, disableScroll);
+      });
+    };
+  }, [disableScroll, enabled]);
+
+  // Scroll to bottom when new content streams in
+  useEffect(() => {
+    function scrollToBottom() {
+      const bottomEl = bottomRef?.current;
+      if (!bottomEl) return;
+
+      const rect = bottomEl.getBoundingClientRect();
+      const offset = 24;
+
+      // Check if bottom element is already visible in viewport
+      const isVisible =
+        rect.top >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.left >= 0 &&
+        rect.right <= window.innerWidth;
+
+      // Don't scroll if element is already fully visible
+      if (isVisible) {
+        return;
+      }
+
+      const targetScrollY =
+        window.scrollY + rect.bottom - window.innerHeight + offset;
+
+      // Already at target position
+      if (Math.abs(targetScrollY - window.scrollY) < 1) {
+        return;
+      }
+
+      window.scrollTo({
+        top: targetScrollY,
+        behavior: 'smooth',
+      });
+    }
+
+    if (!enabled) {
+      return;
+    }
+
+    if (!isActive) {
+      // One final scroll when streaming stops
+      setTimeout(() => {
+        disableScroll(null);
+        scrollToBottom();
+      }, 100);
+      return;
+    }
+
+    scrollIntervalRef.current = window.setInterval(scrollToBottom, 100);
+
+    return () => {
+      clearScrollInterval();
+    };
+  }, [isActive, bottomRef, disableScroll, enabled]);
+}

package/src/ChatBlock/hooks/useToolDisplayTiming.ts

@@ -0,0 +1,80 @@
+import type { Packet } from '../types/streamingModels';
+import { useMemo, useState, useCallback, useEffect } from 'react';
+
+interface ToolState {
+  isVisible: boolean;
+  isCompleted: boolean;
+}
+
+/**
+ * Simplified hook for tracking tool visibility and completion.
+ * All tools are shown immediately as they arrive (collapsed).
+ * No artificial delays - tools complete as soon as their rendering finishes.
+ */
+export function useToolDisplayTiming(
+  toolGroups: { ind: number; packets: Packet[] }[],
+  isFinalMessageComing: boolean,
+  _isComplete: boolean,
+) {
+  const [toolStates, setToolStates] = useState<Map<number, ToolState>>(
+    () => new Map(),
+  );
+
+  // Make all tools visible immediately as they arrive
+  useEffect(() => {
+    if (toolGroups.length === 0) return;
+
+    setToolStates((prev) => {
+      const newStates = new Map(prev);
+      let hasChanges = false;
+
+      toolGroups.forEach((group) => {
+        if (!newStates.has(group.ind)) {
+          newStates.set(group.ind, {
+            isVisible: true,
+            isCompleted: false,
+          });
+          hasChanges = true;
+        }
+      });
+
+      return hasChanges ? newStates : prev;
+    });
+  }, [toolGroups]);
+
+  // Mark tool as completed immediately when called
+  const handleToolComplete = useCallback((toolInd: number) => {
+    setToolStates((prev) => {
+      const currentState = prev.get(toolInd);
+      if (!currentState || currentState.isCompleted) return prev;
+
+      const newStates = new Map(prev);
+      newStates.set(toolInd, { ...currentState, isCompleted: true });
+      return newStates;
+    });
+  }, []);
+
+  // All tools are visible immediately
+  const visibleTools = useMemo(
+    () => new Set(toolGroups.map((group) => group.ind)),
+    [toolGroups],
+  );
+
+  // All tools are displayed when all are completed and final message is coming
+  const allToolsDisplayed = useMemo(() => {
+    if (toolGroups.length === 0) return true;
+
+    const allCompleted = toolGroups.every((group) => {
+      const state = toolStates.get(group.ind);
+      return state?.isCompleted;
+    });
+
+    return allCompleted && isFinalMessageComing;
+  }, [toolGroups, toolStates, isFinalMessageComing]);
+
+  return {
+    visibleTools,
+    handleToolComplete,
+    allToolsDisplayed,
+  };
+}

package/src/ChatBlock/index.js

@@ -0,0 +1,32 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import ChatBlockView from './ChatBlockView';
+import ChatBlockEdit from './ChatBlockEdit';
+import { ChatBlockSchema } from './schema';
+
+export default function installChatBlock(config) {
+  config.blocks.blocksConfig.eeaChatbot = {
+    id: 'eea_chatbot',
+    title: 'AI Chatbot',
+    icon: codeSVG,
+    group: 'common',
+    view: ChatBlockView,
+    edit: ChatBlockEdit,
+    restricted: function ({ user }) {
+      if (user?.roles) {
+        return !user.roles.find((role) => role === 'Manager');
+      }
+      // backward compatibility for older Volto versions
+      return false;
+    },
+    mostUsed: false,
+    blockHasOwnFocusManagement: false,
+    sidebarTab: 1,
+    schema: ChatBlockSchema,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+  };
+  return config;
+}

package/src/ChatBlock/packets/MultiToolRenderer.tsx

@@ -0,0 +1,235 @@
+import type { Packet } from '../types/streamingModels';
+import type { Message } from '../types/interfaces';
+import React, { useState, useEffect, useMemo } from 'react';
+import cx from 'classnames';
+import { PacketType } from '../types/streamingModels';
+import { RendererComponent } from './RendererComponent';
+import { useToolDisplayTiming } from '../hooks/useToolDisplayTiming';
+import SVGIcon from '../components/Icon';
+import DoneIcon from '../../icons/done.svg';
+import ChevronIcon from '../../icons/chevron.svg';
+
+interface MultiToolRendererProps {
+  toolGroups: { ind: number; packets: Packet[] }[];
+  showTools?: PacketType[];
+  message: Message;
+  libs: any;
+  onAllToolsDisplayed?: () => void;
+}
+
+export function MultiToolRenderer({
+  toolGroups,
+  showTools = [PacketType.SEARCH_TOOL_START],
+  message,
+  libs,
+  onAllToolsDisplayed,
+}: MultiToolRendererProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { isFinalMessageComing = false, isComplete = false } = message;
+
+  // Filter tool groups based on allowed tool types
+  const filteredToolGroups = useMemo(
+    () =>
+      toolGroups.filter(
+        (group) =>
+          group.packets?.some(
+            (packet) => showTools?.includes(packet.obj.type as PacketType),
+          ),
+      ),
+    [toolGroups, showTools],
+  );
+
+  // Manage tool display timing
+  const { allToolsDisplayed, handleToolComplete } = useToolDisplayTiming(
+    filteredToolGroups,
+    isFinalMessageComing,
+    isComplete,
+  );
+
+  // Notify parent when all tools are displayed
+  useEffect(() => {
+    if (allToolsDisplayed && onAllToolsDisplayed) {
+      onAllToolsDisplayed();
+      setIsExpanded(false);
+    }
+  }, [allToolsDisplayed, onAllToolsDisplayed]);
+
+  const toggleExpanded = () => setIsExpanded(!isExpanded);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleExpanded();
+    }
+  };
+
+  if (filteredToolGroups.length === 0) return null;
+
+  const isStreaming = !allToolsDisplayed;
+
+  const count = filteredToolGroups.length;
+
+  const ariaLabel = `${count} ${isStreaming ? 'processing' : 'completed'} ${
+    count === 1 ? 'step' : 'steps'
+  }, ${isExpanded ? 'expanded' : 'collapsed'}`;
+
+  return (
+    <div
+      className={cx('multi-tool-renderer', {
+        streaming: isStreaming,
+        complete: !isStreaming,
+      })}
+    >
+      {/* Header */}
+      <div className={cx({ 'tools-container collapsed-view': isStreaming })}>
+        <div
+          className={cx({
+            'tools-collapsed-header': isStreaming,
+            'tools-summary-header': !isStreaming,
+          })}
+          onClick={toggleExpanded}
+          role="button"
+          tabIndex={0}
+          aria-expanded={isExpanded}
+          aria-label={ariaLabel}
+          onKeyDown={handleKeyDown}
+        >
+          <div className="tools-count">
+            <span className="tools-count-value">
+              {filteredToolGroups.length}
+            </span>
+            <span className="tools-count-label">
+              {filteredToolGroups.length === 1 ? 'step' : 'steps'}
+            </span>
+          </div>
+          <span className={cx('expand-chevron', { expanded: isExpanded })}>
+            <SVGIcon name={ChevronIcon} size={24} />
+          </span>
+        </div>
+
+        {/* Tools List */}
+        <div
+          className={cx({
+            'tools-collapsed-list': isStreaming,
+            'tools-expanded-content': !isStreaming,
+            expanded: isExpanded && isStreaming,
+            visible: isExpanded && !isStreaming,
+          })}
+        >
+          <div className={cx({ 'tools-list': isStreaming })}>
+            <div>
+              {filteredToolGroups.map((toolGroup, index) => {
+                const isLastItem = index === filteredToolGroups.length - 1;
+
+                return (
+                  <div
+                    key={toolGroup.ind}
+                    className={cx({ 'tool-collaps ed-wrapper': isStreaming })}
+                  >
+                    <RendererComponent
+                      packets={toolGroup.packets}
+                      message={message}
+                      libs={libs}
+                      onComplete={() => {
+                        if (toolGroup.ind !== undefined) {
+                          handleToolComplete(toolGroup.ind);
+                        }
+                      }}
+                      stopPacketSeen={isComplete}
+                      animate={false}
+                    >
+                      {({ icon, content, status, expandedText }) => {
+                        const finalIcon = icon ? (
+                          React.createElement(icon, { size: 14 })
+                        ) : (
+                          <span
+                            className={cx({
+                              'tool-icon-dot': isStreaming,
+                              'tool-icon-default': !isStreaming,
+                            })}
+                          />
+                        );
+
+                        // Streaming: collapsed view (status only)
+                        if (isStreaming) {
+                          return (
+                            <div
+                              className={cx('tool-item-collapsed', {
+                                active: isLastItem,
+                                completed: !isLastItem,
+                              })}
+                            >
+                              <div className="tool-collapsed-icon">
+                                {finalIcon}
+                              </div>
+                              <span className="tool-collapsed-status">
+                                {status}
+                              </span>
+                            </div>
+                          );
+                        }
+
+                        // Complete: expanded view (full content)
+                        return (
+                          <div className="tool-item-expanded">
+                            <div className="tool-connector-line" />
+
+                            <div className="tool-item-row">
+                              <div className="tool-icon-wrapper">
+                                <div className="tool-icon-circle">
+                                  {finalIcon}
+                                </div>
+                              </div>
+
+                              <div
+                                className={cx('tool-content', {
+                                  'with-padding': !isLastItem,
+                                })}
+                              >
+                                {status && !expandedText && (
+                                  <div className="tool-status-row">
+                                    <div className="tool-status">{status}</div>
+                                  </div>
+                                )}
+
+                                <div
+                                  className={cx('tool-text', {
+                                    expanded: expandedText,
+                                  })}
+                                >
+                                  {expandedText || content}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      }}
+                    </RendererComponent>
+                  </div>
+                );
+              })}
+
+              {/* Done node - only in complete state */}
+              {allToolsDisplayed && (
+                <div className="tool-done-node">
+                  <div className="tool-done-row">
+                    <div className="tool-icon-wrapper">
+                      <div className="tool-icon-circle">
+                        <span className="check-icon">
+                          <SVGIcon name={DoneIcon} size={14} />
+                        </span>
+                      </div>
+                    </div>
+                    <div className="tool-done-content">
+                      <div className="tool-done-text">Done</div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ChatBlock/packets/RendererComponent.tsx

@@ -0,0 +1,115 @@
+import type { Packet } from '../types/streamingModels';
+import type { RendererResult, Message } from '../types/interfaces';
+import { PacketType } from '../types/streamingModels';
+import {
+  MessageTextRenderer,
+  SearchToolRenderer,
+  ImageToolRenderer,
+  ReasoningRenderer,
+  CustomToolRenderer,
+  FetchToolRenderer,
+} from './renderers';
+
+interface GroupedPackets {
+  packets: Packet[];
+}
+
+function isChatPacket(packet: Packet): boolean {
+  return (
+    packet.obj.type === PacketType.MESSAGE_START ||
+    packet.obj.type === PacketType.MESSAGE_DELTA ||
+    packet.obj.type === PacketType.MESSAGE_END
+  );
+}
+
+function isSearchToolPacket(packet: Packet): boolean {
+  return packet.obj.type === PacketType.SEARCH_TOOL_START;
+}
+
+function isImageToolPacket(packet: Packet): boolean {
+  return packet.obj.type === PacketType.IMAGE_GENERATION_TOOL_START;
+}
+
+function isCustomToolPacket(packet: Packet): boolean {
+  return packet.obj.type === PacketType.CUSTOM_TOOL_START;
+}
+
+function isFetchToolPacket(packet: Packet): boolean {
+  return packet.obj.type === PacketType.FETCH_TOOL_START;
+}
+
+function isReasoningPacket(packet: Packet): boolean {
+  return (
+    packet.obj.type === PacketType.REASONING_START ||
+    packet.obj.type === PacketType.REASONING_DELTA
+  );
+}
+
+export function findRenderer(groupedPackets: GroupedPackets): any | null {
+  if (groupedPackets.packets.some((packet) => isChatPacket(packet))) {
+    return MessageTextRenderer;
+  }
+  if (groupedPackets.packets.some((packet) => isSearchToolPacket(packet))) {
+    return SearchToolRenderer;
+  }
+  if (groupedPackets.packets.some((packet) => isImageToolPacket(packet))) {
+    return ImageToolRenderer;
+  }
+  if (groupedPackets.packets.some((packet) => isCustomToolPacket(packet))) {
+    return CustomToolRenderer;
+  }
+  if (groupedPackets.packets.some((packet) => isFetchToolPacket(packet))) {
+    return FetchToolRenderer;
+  }
+  if (groupedPackets.packets.some((packet) => isReasoningPacket(packet))) {
+    return ReasoningRenderer;
+  }
+  return null;
+}
+
+// React component wrapper that directly uses renderer components
+export function RendererComponent({
+  packets,
+  onComplete,
+  animate,
+  stopPacketSeen,
+  children,
+  message,
+  libs,
+  markers,
+  stableContextSources,
+  addQualityMarkersPlugin,
+}: {
+  packets: Packet[];
+  onComplete: () => void;
+  animate: boolean;
+  stopPacketSeen: boolean;
+  children: (result: RendererResult) => JSX.Element;
+  libs: any;
+  message?: Message;
+  markers?: any;
+  stableContextSources?: any;
+  addQualityMarkersPlugin?: any;
+}) {
+  const RendererFn = findRenderer({ packets });
+
+  if (!RendererFn) {
+    return children({ icon: null, status: null, content: <></> });
+  }
+
+  return (
+    <RendererFn
+      packets={packets as any}
+      onComplete={onComplete}
+      animate={animate}
+      stopPacketSeen={stopPacketSeen}
+      message={message}
+      libs={libs}
+      markers={markers}
+      stableContextSources={stableContextSources}
+      addQualityMarkersPlugin={addQualityMarkersPlugin}
+    >
+      {children}
+    </RendererFn>
+  );
+}

package/src/ChatBlock/packets/index.ts

@@ -0,0 +1,4 @@
+export * from './renderers';
+
+export { MultiToolRenderer } from './MultiToolRenderer';
+export { RendererComponent } from './RendererComponent';

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

@@ -0,0 +1,63 @@
+import type {
+  CustomToolPacket,
+  CustomToolStart,
+  CustomToolDelta,
+} from '../../types/streamingModels';
+import type { MessageRenderer } from '../../types/interfaces';
+import { useEffect } from 'react';
+import { PacketType } from '../../types/streamingModels';
+
+export const CustomToolRenderer: MessageRenderer<CustomToolPacket> = ({
+  packets,
+  onComplete,
+  children,
+}) => {
+  const toolStart = packets.find(
+    (packet) => packet.obj.type === PacketType.CUSTOM_TOOL_START,
+  )?.obj as CustomToolStart | undefined;
+
+  const toolDeltas = packets
+    .filter((packet) => packet.obj.type === PacketType.CUSTOM_TOOL_DELTA)
+    .map((packet) => packet.obj as CustomToolDelta);
+
+  const isComplete = packets.some(
+    (packet) => packet.obj.type === PacketType.SECTION_END,
+  );
+
+  useEffect(() => {
+    if (isComplete) {
+      onComplete();
+    }
+  }, [isComplete, onComplete]);
+
+  const toolName = toolStart?.tool_name || 'Custom Tool';
+
+  const content = (
+    <div className="custom-tool-renderer">
+      <div className="tool-header">
+        <span className="tool-icon">🔧</span>
+        <strong>{toolName}</strong>
+      </div>
+      <div className="tool-results">
+        {toolDeltas.map((delta, i) => (
+          <div key={i} className="tool-result-item">
+            {delta.response_type && (
+              <div className="response-type">{delta.response_type}</div>
+            )}
+            {delta.data && (
+              <pre className="tool-data">
+                {JSON.stringify(delta.data, null, 2)}
+              </pre>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  return children({
+    icon: null,
+    status: isComplete ? 'Tool complete' : 'Running tool...',
+    content,
+  });
+};