@eeacms/volto-eea-chatbot 1.0.9

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

@@ -0,0 +1,59 @@
+import type {
+  FetchToolPacket,
+  FetchToolStart,
+} from '../../types/streamingModels';
+import type { MessageRenderer } from '../../types/interfaces';
+import { useEffect } from 'react';
+import { PacketType } from '../../types/streamingModels';
+
+export const FetchToolRenderer: MessageRenderer<FetchToolPacket> = ({
+  packets,
+  onComplete,
+  children,
+}) => {
+  const fetchStart = packets.find(
+    (packet) => packet.obj.type === PacketType.FETCH_TOOL_START,
+  )?.obj as FetchToolStart | undefined;
+
+  const queries = fetchStart?.queries || [];
+  const documents = fetchStart?.documents || [];
+
+  const isComplete = packets.some(
+    (packet) => packet.obj.type === PacketType.SECTION_END,
+  );
+
+  useEffect(() => {
+    if (isComplete) {
+      onComplete();
+    }
+  }, [isComplete, onComplete]);
+
+  const content = (
+    <div className="fetch-tool-renderer">
+      <div className="fetch-header">
+        <span className="fetch-icon">📥</span>
+        <strong>Fetching Documents</strong>
+      </div>
+      {queries.length > 0 && (
+        <div className="fetch-queries">
+          {queries.map((query, i) => (
+            <div key={i} className="query-item">
+              {query}
+            </div>
+          ))}
+        </div>
+      )}
+      {documents.length > 0 && (
+        <div className="fetch-results">
+          <div>Fetched {documents.length} documents</div>
+        </div>
+      )}
+    </div>
+  );
+
+  return children({
+    icon: null,
+    status: isComplete ? 'Fetch complete' : 'Fetching...',
+    content,
+  });
+};

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

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import type {
+  ImageGenerationToolPacket,
+  ImageGenerationToolDelta,
+  GeneratedImage,
+} from '../../types/streamingModels';
+import type { MessageRenderer } from '../../types/interfaces';
+import { PacketType } from '../../types/streamingModels';
+
+export const ImageToolRenderer: MessageRenderer<ImageGenerationToolPacket> = ({
+  packets,
+  onComplete,
+  children,
+}) => {
+  const imageDeltas = packets
+    .filter(
+      (packet) => packet.obj.type === PacketType.IMAGE_GENERATION_TOOL_DELTA,
+    )
+    .map((packet) => packet.obj as ImageGenerationToolDelta);
+
+  const images: GeneratedImage[] = imageDeltas.flatMap(
+    (delta) => delta.images || [],
+  );
+
+  const isComplete = packets.some(
+    (packet) => packet.obj.type === PacketType.SECTION_END,
+  );
+
+  useEffect(() => {
+    if (isComplete) {
+      onComplete();
+    }
+  }, [isComplete, onComplete]);
+
+  const content = (
+    <div className="image-tool-renderer">
+      <div className="images-header">
+        <strong>Generated Images</strong>
+      </div>
+      <div className="images-grid">
+        {images.map((image, i) => (
+          <div key={image.file_id} className="image-item">
+            <img
+              src={image.url}
+              alt={image.revised_prompt}
+              className={`image-shape-${image.shape || 'square'}`}
+            />
+            {image.revised_prompt && (
+              <div className="image-prompt">{image.revised_prompt}</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  return children({
+    icon: null,
+    status: isComplete ? 'Images generated' : 'Generating images...',
+    content,
+  });
+};

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

@@ -0,0 +1,172 @@
+import type { ChatPacket } from '../../types/streamingModels';
+import type { MessageRenderer } from '../../types/interfaces';
+import { useEffect, useMemo, useState } from 'react';
+import loadable from '@loadable/component';
+import { components } from '../../components/markdown';
+import { isFinalAnswerComplete } from '../../services/packetUtils';
+import { PacketType } from '../../types/streamingModels';
+import { BlinkingDot } from '../../components/BlinkingDot';
+
+const Markdown: any = loadable(() => import('react-markdown'));
+
+// Control the rate of packet streaming (packets per second)
+const PACKET_DELAY_MS = 10;
+// Number of packets to show per animation tick when catching up
+const PACKETS_PER_TICK = 5;
+// Adaptive animation constants for fast streams
+const MIN_REVEAL_DURATION_MS = 400; // Minimum typing animation duration
+const PACKET_VALUE_MS = 1.5; // Additional time per packet (scales with length)
+const MAX_REVEAL_DURATION_MS = 2000; // Cap to prevent slow reveals
+const CATCH_UP_THRESHOLD = 20; // Threshold for catch-up mode
+
+export const MessageTextRenderer: MessageRenderer<ChatPacket> = ({
+  packets,
+  onComplete,
+  animate,
+  stopPacketSeen,
+  children,
+  message,
+  libs,
+  markers,
+  stableContextSources,
+  addQualityMarkersPlugin,
+}) => {
+  const { remarkGfm } = libs;
+
+  // Check if stream is finished
+  const isStreamFinished = isFinalAnswerComplete(packets);
+
+  // If we're animating and the final answer is already complete, show more packets initially
+  const initialPacketCount = animate
+    ? packets.length > 0
+      ? 1 // Start with 1 packet
+      : 0
+    : -1; // Show all if not animating
+
+  const [displayedPacketCount, setDisplayedPacketCount] =
+    useState(initialPacketCount);
+
+  // Animation effect - gradually increase displayed packets at controlled rate
+  // Adaptive animation: ensures visible typing effect even for fast streams
+  useEffect(() => {
+    if (!animate) {
+      setDisplayedPacketCount(-1); // Show all packets
+      return;
+    }
+
+    if (displayedPacketCount >= 0 && displayedPacketCount < packets.length) {
+      // CASE 1: Stream finished - apply adaptive animation
+      if (isStreamFinished) {
+        const remainingPackets = packets.length - displayedPacketCount;
+
+        // Calculate adaptive reveal velocity
+        const targetDuration =
+          MIN_REVEAL_DURATION_MS + remainingPackets * PACKET_VALUE_MS;
+        const cappedDuration = Math.min(targetDuration, MAX_REVEAL_DURATION_MS);
+        const ticksNeeded = Math.max(1, cappedDuration / PACKET_DELAY_MS);
+        const packetsPerTick = Math.ceil(remainingPackets / ticksNeeded);
+
+        const timer = setTimeout(() => {
+          setDisplayedPacketCount((prev) => {
+            return Math.min(prev + packetsPerTick, packets.length);
+          });
+        }, PACKET_DELAY_MS);
+
+        return () => clearTimeout(timer);
+      }
+
+      // CASE 2: Normal streaming - existing catch-up logic
+      const timer = setTimeout(() => {
+        setDisplayedPacketCount((prev) => {
+          const remaining = packets.length - prev;
+          // If we're far behind, catch up faster
+          const increment =
+            remaining > CATCH_UP_THRESHOLD ? PACKETS_PER_TICK : 1;
+          return Math.min(prev + increment, packets.length);
+        });
+      }, PACKET_DELAY_MS);
+
+      return () => clearTimeout(timer);
+    }
+  }, [animate, displayedPacketCount, packets.length, isStreamFinished]);
+
+  // Reset displayed count when packet array changes significantly (e.g., new message)
+  useEffect(() => {
+    if (animate && packets.length < displayedPacketCount) {
+      const resetCount = isStreamFinished
+        ? packets.length // Show all if stream is finished
+        : packets.length > 0
+        ? 1
+        : 0;
+      setDisplayedPacketCount(resetCount);
+    }
+  }, [animate, packets.length, displayedPacketCount, isStreamFinished]);
+
+  // Only mark as complete when all packets are received AND displayed
+  useEffect(() => {
+    if (isStreamFinished) {
+      // If animating, wait until all packets are displayed
+      if (
+        animate &&
+        displayedPacketCount >= 0 &&
+        displayedPacketCount < packets.length
+      ) {
+        return;
+      }
+      onComplete();
+    }
+  }, [
+    packets.length,
+    onComplete,
+    animate,
+    displayedPacketCount,
+    isStreamFinished,
+  ]);
+
+  // Get content based on displayed packet count
+  const content = useMemo(() => {
+    if (!animate || displayedPacketCount === -1) {
+      return message.message; // Show all content
+    }
+
+    // Only show content from packets up to displayedPacketCount
+    return packets
+      .slice(0, displayedPacketCount)
+      .map((packet) => {
+        if (
+          packet.obj.type === PacketType.MESSAGE_DELTA ||
+          packet.obj.type === PacketType.MESSAGE_START
+        ) {
+          return packet.obj.content;
+        }
+        return '';
+      })
+      .join('');
+  }, [animate, displayedPacketCount, message.message, packets]);
+
+  // Add blinking cursor when streaming
+  const displayContent = stopPacketSeen ? content : content + ' ▊';
+
+  const renderedContent = (
+    <div className="message-text-content">
+      <Markdown
+        components={components(message, markers, stableContextSources)}
+        remarkPlugins={remarkGfm ? [remarkGfm.default] : []}
+        rehypePlugins={addQualityMarkersPlugin ? [addQualityMarkersPlugin] : []}
+      >
+        {displayContent}
+      </Markdown>
+    </div>
+  );
+
+  return children({
+    icon: null,
+    status: null,
+    content:
+      content.length > 0 || packets.length > 0 ? (
+        renderedContent
+      ) : (
+        <BlinkingDot addMargin />
+      ),
+  });
+};

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

@@ -0,0 +1,122 @@
+import type {
+  ReasoningPacket,
+  ReasoningDelta,
+} from '../../types/streamingModels';
+import type { MessageRenderer } from '../../types/interfaces';
+import { useEffect, useState, useRef, useMemo } from 'react';
+import loadable from '@loadable/component';
+import { PacketType } from '../../types/streamingModels';
+import { components } from '../../components/markdown';
+import { addCitations } from '../../utils/citations';
+
+const Markdown: any = loadable(() => import('react-markdown'));
+
+const THINKING_MIN_DURATION_MS = 500; // 0.5 second minimum for "Thinking" state
+const THINKING_STATUS = 'Thinking';
+
+function constructCurrentReasoningState(packets: ReasoningPacket[]) {
+  const hasStart = packets.some(
+    (p) => p.obj.type === PacketType.REASONING_START,
+  );
+  const hasEnd = packets.some(
+    (p) =>
+      p.obj.type === PacketType.SECTION_END ||
+      // Support either convention for reasoning completion
+      (p.obj as any).type === PacketType.REASONING_END,
+  );
+  const deltas = packets
+    .filter((p) => p.obj.type === PacketType.REASONING_DELTA)
+    .map((p) => p.obj as ReasoningDelta);
+
+  const content = deltas.map((d) => d.reasoning).join('');
+
+  return {
+    hasStart,
+    hasEnd,
+    content,
+  };
+}
+
+export const ReasoningRenderer: MessageRenderer<ReasoningPacket> = ({
+  packets,
+  onComplete,
+  animate,
+  children,
+  message,
+  libs,
+}) => {
+  const { remarkGfm } = libs;
+
+  const { hasStart, hasEnd, content } = useMemo(() => {
+    return constructCurrentReasoningState(packets);
+  }, [packets]);
+
+  // Track reasoning timing for minimum display duration
+  const [reasoningStartTime, setReasoningStartTime] = useState<number | null>(
+    null,
+  );
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const completionHandledRef = useRef(false);
+
+  // Track when reasoning starts
+  useEffect(() => {
+    if ((hasStart || hasEnd) && reasoningStartTime === null) {
+      setReasoningStartTime(Date.now());
+    }
+  }, [hasStart, hasEnd, reasoningStartTime]);
+
+  // Handle reasoning completion with minimum duration
+  useEffect(() => {
+    if (
+      hasEnd &&
+      reasoningStartTime !== null &&
+      !completionHandledRef.current
+    ) {
+      completionHandledRef.current = true;
+      const elapsedTime = Date.now() - reasoningStartTime;
+      const minimumThinkingDuration = animate ? THINKING_MIN_DURATION_MS : 0;
+
+      if (elapsedTime >= minimumThinkingDuration) {
+        // Enough time has passed, complete immediately
+        onComplete();
+      } else {
+        // Not enough time has passed, delay completion
+        const remainingTime = minimumThinkingDuration - elapsedTime;
+        timeoutRef.current = setTimeout(() => {
+          onComplete();
+        }, remainingTime);
+      }
+    }
+  }, [hasEnd, reasoningStartTime, animate, onComplete]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const renderedContent = (
+    <div className="reasoning-content">
+      <Markdown
+        remarkPlugins={remarkGfm ? [remarkGfm.default] : []}
+        components={components(message)}
+      >
+        {addCitations(content, message)}
+      </Markdown>
+    </div>
+  );
+
+  if (!hasStart && !hasEnd && content.length === 0) {
+    return children({ icon: null, status: null, content: <></> });
+  }
+
+  return children({
+    icon: null,
+    status: THINKING_STATUS,
+    content: renderedContent,
+    expandedText: renderedContent,
+  });
+};