Function Loading

src/components/loading.tsx:80–249

({
  status = "idle",
  explanation,
  mapping,
  diagram,
  cost,
}: LoadingProps)

};

export default function Loading({
  status = "idle",
  explanation,
  mapping,
  diagram,
  cost,
}: LoadingProps) {
  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentMessageIndex((prevIndex) => (prevIndex + 1) % messages.length);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  // Auto-scroll effect
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [explanation, mapping, diagram]);

  const shouldShowReasoning = (currentStatus: string) => {
    if (
      currentStatus === "explanation_sent" ||
      (currentStatus.startsWith("explanation") && !explanation)
    ) {
      return "explanation";
    }
    if (
      currentStatus === "mapping_sent" ||
      (currentStatus.startsWith("mapping") && !mapping)
    ) {
      return "mapping";
    }
    if (
      currentStatus === "diagram_sent" ||
      (currentStatus.startsWith("diagram") && !diagram)
    ) {
      return "diagram";
    }
    return null;
  };

  const renderReasoningMessage = () => {
    const reasoningType = shouldShowReasoning(status);
    switch (reasoningType) {
      case "explanation":
        return "Model is analyzing the repository structure and codebase...";
      case "mapping":
        return "Model is identifying component relationships and dependencies...";
      case "diagram":
        return "Model is planning the diagram layout and connections...";
      default:
        return null;