@hef2024/llmasaservice-ui 0.22.11 → 0.23.0

package/src/components/ui/ThinkingBlock.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+export type ThinkingBlockType = 'thinking' | 'reasoning' | 'searching';
+
+export interface ThinkingBlockProps {
+  type: ThinkingBlockType;
+  content: string;
+  isStreaming: boolean;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  /** Optional custom title override */
+  title?: string;
+}
+
+// Icons for each thinking type
+const ThinkingIcon = () => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round" 
+    className="thinking-block__icon"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4" />
+    <path d="M12 8h.01" />
+  </svg>
+);
+
+const ReasoningIcon = () => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round" 
+    className="thinking-block__icon"
+  >
+    <path d="M12 2a8 8 0 0 0-8 8c0 3.4 2.1 6.3 5 7.5V20a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2.5c2.9-1.2 5-4.1 5-7.5a8 8 0 0 0-8-8z" />
+    <path d="M9 22h6" />
+  </svg>
+);
+
+const SearchingIcon = () => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round" 
+    className="thinking-block__icon"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+);
+
+const ChevronIcon = ({ isCollapsed }: { isCollapsed: boolean }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round" 
+    className={`thinking-block__chevron ${isCollapsed ? 'thinking-block__chevron--collapsed' : ''}`}
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+const getIcon = (type: ThinkingBlockType) => {
+  switch (type) {
+    case 'thinking':
+      return <ThinkingIcon />;
+    case 'reasoning':
+      return <ReasoningIcon />;
+    case 'searching':
+      return <SearchingIcon />;
+  }
+};
+
+const getDefaultTitle = (type: ThinkingBlockType): string => {
+  switch (type) {
+    case 'thinking':
+      return 'Thinking';
+    case 'reasoning':
+      return 'Reasoning';
+    case 'searching':
+      return 'Searching';
+  }
+};
+
+/**
+ * ThinkingBlock - A collapsible block for displaying thinking/reasoning/searching content
+ * with streaming support. Content streams in naturally as it arrives.
+ */
+export const ThinkingBlock: React.FC<ThinkingBlockProps> = ({
+  type,
+  content,
+  isStreaming,
+  isCollapsed,
+  onToggleCollapse,
+  title,
+}) => {
+  const displayTitle = title || getDefaultTitle(type);
+  const icon = getIcon(type);
+
+  return (
+    <div 
+      className={`thinking-block thinking-block--${type} ${isCollapsed ? 'thinking-block--collapsed' : ''}`}
+    >
+      <button 
+        className="thinking-block__header"
+        onClick={onToggleCollapse}
+        type="button"
+        aria-expanded={!isCollapsed}
+      >
+        <div className="thinking-block__header-left">
+          {icon}
+          <span className="thinking-block__title">{displayTitle}</span>
+          {isStreaming && (
+            <span className="thinking-block__streaming-indicator">
+              <span className="thinking-block__streaming-dot" />
+              <span className="thinking-block__streaming-dot" />
+              <span className="thinking-block__streaming-dot" />
+            </span>
+          )}
+        </div>
+        <ChevronIcon isCollapsed={isCollapsed} />
+      </button>
+      <div className="thinking-block__content-wrapper">
+        <div className="thinking-block__content">
+          {content}
+          {isStreaming && <span className="thinking-block__cursor">|</span>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ThinkingBlock;

package/src/components/ui/WordFadeIn.tsx

@@ -0,0 +1,101 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+export interface WordFadeInProps {
+  content: string;
+  className?: string;
+  /** Animation duration in ms */
+  animationDuration?: number;
+}
+
+/**
+ * WordFadeIn - A component that applies fade-in animation to new content chunks
+ * as they arrive during streaming. Each new chunk fades in smoothly.
+ */
+export const WordFadeIn: React.FC<WordFadeInProps> = ({
+  content,
+  className = '',
+  animationDuration = 300,
+}) => {
+  // Track segments: each segment is content that arrived together
+  const [segments, setSegments] = useState<Array<{ text: string; key: number }>>([]);
+  const prevContentRef = useRef<string>('');
+  const keyCounterRef = useRef(0);
+  const animationTimeoutsRef = useRef<Set<NodeJS.Timeout>>(new Set());
+
+  useEffect(() => {
+    const prevContent = prevContentRef.current;
+    
+    // If content is shorter or same, reset (new response started)
+    if (content.length <= prevContent.length && content !== prevContent) {
+      setSegments([{ text: content, key: keyCounterRef.current++ }]);
+      prevContentRef.current = content;
+      return;
+    }
+
+    if (content === prevContent) {
+      return;
+    }
+
+    // Find the new content (what was added since last update)
+    const newContent = content.slice(prevContent.length);
+    
+    if (newContent) {
+      const newKey = keyCounterRef.current++;
+      setSegments(prev => [...prev, { text: newContent, key: newKey }]);
+      prevContentRef.current = content;
+    }
+  }, [content]);
+
+  // Consolidate segments periodically to prevent too many DOM elements
+  useEffect(() => {
+    if (segments.length > 20) {
+      // Merge older segments, keep recent ones for animation
+      const timer = setTimeout(() => {
+        setSegments(prev => {
+          if (prev.length <= 5) return prev;
+          const olderText = prev.slice(0, -5).map(s => s.text).join('');
+          const recentSegments = prev.slice(-5);
+          return [{ text: olderText, key: -1 }, ...recentSegments];
+        });
+      }, animationDuration + 100);
+      animationTimeoutsRef.current.add(timer);
+      return () => {
+        animationTimeoutsRef.current.delete(timer);
+        clearTimeout(timer);
+      };
+    }
+  }, [segments.length, animationDuration]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      animationTimeoutsRef.current.forEach(timer => clearTimeout(timer));
+    };
+  }, []);
+
+  // Reset when content is cleared
+  useEffect(() => {
+    if (!content && segments.length > 0) {
+      setSegments([]);
+      prevContentRef.current = '';
+    }
+  }, [content, segments.length]);
+
+  return (
+    <span className={className}>
+      {segments.map((segment, index) => (
+        <span
+          key={segment.key}
+          className={segment.key >= 0 ? 'streaming-text-chunk' : ''}
+          style={{
+            '--fade-duration': `${animationDuration}ms`,
+          } as React.CSSProperties}
+        >
+          {segment.text}
+        </span>
+      ))}
+    </span>
+  );
+};
+
+export default WordFadeIn;

package/src/components/ui/index.ts

@@ -16,6 +16,12 @@ export type { TooltipProps } from './Tooltip';
 export { Dialog, DialogFooter } from './Dialog';
 export type { DialogProps, DialogFooterProps } from './Dialog';
 
+export { WordFadeIn } from './WordFadeIn';
+export type { WordFadeInProps } from './WordFadeIn';
+
+export { ThinkingBlock } from './ThinkingBlock';
+export type { ThinkingBlockProps, ThinkingBlockType } from './ThinkingBlock';
+