/**
 * StreamingIndicator — 流式加载指示器
 *
 * 仅在流式开始、尚无任何内容输出时显示初始加载状态。
 * 一旦有思考内容或文本输出，AssistantMessage 卡片内部自行展示进度。
 */

import { Box, Typography } from '@mui/material';
import { Loader2 } from 'lucide-react';
import { useAgentStore } from '@renderer/stores/agent-store';

export function StreamingIndicator(): React.JSX.Element | null {
  const isStreaming = useAgentStore((s) => s.isStreaming);
  const streamingContent = useAgentStore((s) => s.streamingContent);
  const messages = useAgentStore((s) => s.messages);

  // 已有内容输出时隐藏（AssistantMessage 内部展示）
  if (!isStreaming) return null;

  const lastMsg = messages[messages.length - 1];
  const hasVisibleContent = !!streamingContent || !!lastMsg?.reasoningContent || !!lastMsg?.toolCalls?.length;
  if (hasVisibleContent) return null;

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, py: 2, pl: 5, animation: 'fadeIn 200ms ease-out' }}>
      <Loader2 size={16} style={{ animation: 'spin 1s linear infinite', color: '#818cf8' }} />
      <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 12 }}>
        正在连接 AI...
      </Typography>
    </Box>
  );
}