otherwise-cli 0.1.0

package/src/ui/components/ThinkingIndicator.jsx

@@ -0,0 +1,365 @@
+/**
+ * ThinkingIndicator component
+ * Displays an animated thinking/reasoning indicator with elapsed time and char count
+ * Features gradient cycling colors and smooth animations
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { formatElapsed, formatCharCount } from '../utils/formatters.js';
+
+/**
+ * Gradient color palette for shimmer effect
+ */
+const GRADIENT_COLORS = [
+  '#a855f7', // Purple 500
+  '#c084fc', // Purple 400
+  '#d8b4fe', // Purple 300
+  '#e9d5ff', // Purple 200
+  '#d8b4fe', // Purple 300
+  '#c084fc', // Purple 400
+];
+
+/**
+ * Braille spinner frames for smooth animation
+ */
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+/**
+ * Dots spinner frames
+ */
+const DOTS_FRAMES = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
+
+/**
+ * Bouncing bar frames
+ */
+const BOUNCE_FRAMES = ['▐', '▐', '▐', '▌', '▌', '▌'];
+
+/**
+ * Custom animated spinner with gradient colors
+ */
+function GradientSpinner({ type = 'braille', speed = 80 }) {
+  const [frame, setFrame] = useState(0);
+  const [colorIndex, setColorIndex] = useState(0);
+  
+  const frames = useMemo(() => {
+    switch (type) {
+      case 'dots': return DOTS_FRAMES;
+      case 'bounce': return BOUNCE_FRAMES;
+      default: return SPINNER_FRAMES;
+    }
+  }, [type]);
+  
+  useEffect(() => {
+    const spinnerTimer = setInterval(() => {
+      setFrame(f => (f + 1) % frames.length);
+    }, speed);
+    
+    const colorTimer = setInterval(() => {
+      setColorIndex(c => (c + 1) % GRADIENT_COLORS.length);
+    }, 150);
+    
+    return () => {
+      clearInterval(spinnerTimer);
+      clearInterval(colorTimer);
+    };
+  }, [frames.length, speed]);
+  
+  return (
+    <Text color={GRADIENT_COLORS[colorIndex]} bold>
+      {frames[frame]}
+    </Text>
+  );
+}
+
+/**
+ * Pulsing dots animation
+ */
+function PulsingDots({ count = 3, speed = 300 }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setActiveIndex(i => (i + 1) % (count + 1));
+    }, speed);
+    return () => clearInterval(timer);
+  }, [count, speed]);
+  
+  return (
+    <Text>
+      {Array.from({ length: count }).map((_, i) => (
+        <Text key={i} color={i < activeIndex ? '#a855f7' : '#4b5563'}>●</Text>
+      ))}
+    </Text>
+  );
+}
+
+/**
+ * Shimmer text effect - cycles gradient through text
+ */
+function ShimmerText({ text, speed = 100 }) {
+  const [offset, setOffset] = useState(0);
+  
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setOffset(o => (o + 1) % GRADIENT_COLORS.length);
+    }, speed);
+    return () => clearInterval(timer);
+  }, [speed]);
+  
+  return (
+    <Text>
+      {text.split('').map((char, i) => (
+        <Text 
+          key={i} 
+          color={GRADIENT_COLORS[(i + offset) % GRADIENT_COLORS.length]}
+        >
+          {char}
+        </Text>
+      ))}
+    </Text>
+  );
+}
+
+/**
+ * ThinkingIndicator component
+ * @param {object} props - Component props
+ * @param {number} props.charCount - Character count of thinking content
+ * @param {number} props.startTime - Start timestamp
+ * @param {string} props.label - Custom label (default: "Reasoning")
+ * @param {string} props.suffix - Optional suffix text (e.g., "(web)")
+ * @param {boolean} props.shimmer - Enable shimmer effect on label
+ * @param {string} props.spinnerType - Spinner type: 'braille', 'dots', 'bounce'
+ */
+export function ThinkingIndicator({ 
+  charCount = 0, 
+  startTime, 
+  label = 'Reasoning',
+  suffix = '',
+  shimmer = true,
+  spinnerType = 'braille',
+}) {
+  const [elapsed, setElapsed] = useState(0);
+  const [colorIndex, setColorIndex] = useState(0);
+  
+  // Update elapsed time every 100ms
+  useEffect(() => {
+    if (!startTime) return;
+    
+    const timer = setInterval(() => {
+      setElapsed(Date.now() - startTime);
+    }, 100);
+    
+    return () => clearInterval(timer);
+  }, [startTime]);
+  
+  // Gradient color cycling for the label
+  useEffect(() => {
+    if (!shimmer) return;
+    
+    const timer = setInterval(() => {
+      setColorIndex(c => (c + 1) % GRADIENT_COLORS.length);
+    }, 200);
+    
+    return () => clearInterval(timer);
+  }, [shimmer]);
+  
+  const elapsedStr = formatElapsed(elapsed);
+  const charStr = charCount > 0 ? formatCharCount(charCount) : '';
+  const labelColor = shimmer ? GRADIENT_COLORS[colorIndex] : '#a855f7';
+  
+  return (
+    <Box>
+      <GradientSpinner type={spinnerType} />
+      <Text color={labelColor}> {label}</Text>
+      {charStr && (
+        <Text dimColor> · {charStr}</Text>
+      )}
+      {elapsedStr && (
+        <Text dimColor> ({elapsedStr})</Text>
+      )}
+      {suffix && (
+        <Text dimColor> {suffix}</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Loading indicator with customizable style
+ */
+export function LoadingIndicator({ 
+  text = 'Loading', 
+  type = 'spinner', // 'spinner', 'dots', 'bar', 'shimmer'
+  color = '#a855f7',
+}) {
+  if (type === 'shimmer') {
+    return (
+      <Box>
+        <ShimmerText text={text} />
+      </Box>
+    );
+  }
+  
+  if (type === 'dots') {
+    return (
+      <Box>
+        <Text color={color}>{text}</Text>
+        <Text> </Text>
+        <PulsingDots />
+      </Box>
+    );
+  }
+  
+  return (
+    <Box>
+      <GradientSpinner type={type === 'bar' ? 'bounce' : 'braille'} />
+      <Text color={color}> {text}</Text>
+    </Box>
+  );
+}
+
+/**
+ * CompletedThinking component
+ * Shows a summary of completed thinking with fade-in effect
+ */
+export function CompletedThinking({ charCount, elapsed, animate = true }) {
+  const [opacity, setOpacity] = useState(animate ? 0 : 1);
+  const charStr = charCount > 0 ? formatCharCount(charCount) : '';
+  const elapsedStr = formatElapsed(elapsed);
+  
+  // Fade in effect
+  useEffect(() => {
+    if (!animate) return;
+    
+    const steps = [0.3, 0.6, 1];
+    let step = 0;
+    
+    const timer = setInterval(() => {
+      if (step < steps.length) {
+        setOpacity(steps[step]);
+        step++;
+      } else {
+        clearInterval(timer);
+      }
+    }, 100);
+    
+    return () => clearInterval(timer);
+  }, [animate]);
+  
+  const color = opacity < 1 ? '#6b7280' : '#a855f7';
+  
+  return (
+    <Box>
+      <Text color={color}>💭</Text>
+      <Text color={color === '#a855f7' ? undefined : '#6b7280'} dimColor={opacity >= 1}>
+        {' '}Reasoned
+      </Text>
+      {charStr && (
+        <Text dimColor> · {charStr}</Text>
+      )}
+      {elapsedStr && (
+        <Text dimColor> · {elapsedStr}</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Success indicator with checkmark animation
+ */
+export function SuccessIndicator({ text = 'Done', animate = true }) {
+  const [frame, setFrame] = useState(animate ? 0 : 2);
+  const frames = ['○', '◐', '✓'];
+  const colors = ['#f59e0b', '#22c55e', '#22c55e'];
+  
+  useEffect(() => {
+    if (!animate || frame >= 2) return;
+    
+    const timer = setTimeout(() => {
+      setFrame(f => f + 1);
+    }, 150);
+    
+    return () => clearTimeout(timer);
+  }, [animate, frame]);
+  
+  return (
+    <Box>
+      <Text color={colors[frame]} bold>{frames[frame]}</Text>
+      <Text color="#22c55e"> {text}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Error indicator with shake effect (visual via color pulse)
+ */
+export function ErrorIndicator({ text = 'Error', details = '' }) {
+  const [pulse, setPulse] = useState(true);
+  
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setPulse(p => !p);
+    }, 500);
+    
+    // Stop pulsing after 3 seconds
+    const stopTimer = setTimeout(() => {
+      clearInterval(timer);
+      setPulse(true);
+    }, 3000);
+    
+    return () => {
+      clearInterval(timer);
+      clearTimeout(stopTimer);
+    };
+  }, []);
+  
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color={pulse ? '#ef4444' : '#dc2626'} bold>✗</Text>
+        <Text color="#ef4444"> {text}</Text>
+      </Box>
+      {details && (
+        <Box marginLeft={2}>
+          <Text dimColor>{details}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Warning indicator
+ */
+export function WarningIndicator({ text, details = '' }) {
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color="#f59e0b" bold>⚠</Text>
+        <Text color="#f59e0b"> {text}</Text>
+      </Box>
+      {details && (
+        <Box marginLeft={2}>
+          <Text dimColor>{details}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Info indicator
+ */
+export function InfoIndicator({ text }) {
+  return (
+    <Box>
+      <Text color="#3b82f6" bold>ℹ</Text>
+      <Text color="#3b82f6"> {text}</Text>
+    </Box>
+  );
+}
+
+// Export all components
+export { GradientSpinner, PulsingDots, ShimmerText };
+export default ThinkingIndicator;