langchain-go/frontend/src/App.tsx

import { useState } from "react";
import { ProgressBar, Label } from "@heroui/react";
import Card from "./components/Card";
import Guodegang from "./components/Guodegang";
import Mermaid from "./components/Mermaid";
import Topic from "./components/Topic";

function App() {
  const [topic, setTopic] = useState('');
  const [cardLoaded, setCardLoaded] = useState(false);
  const [guodegangLoaded, setGuodegangLoaded] = useState(false);
  const [mermaidLoaded, setMermaidLoaded] = useState(false);

  const progress = (() => {
    if (!topic) return 0;
    if (cardLoaded && guodegangLoaded && mermaidLoaded) return 100;
    if (cardLoaded && guodegangLoaded) return 67;
    if (cardLoaded && mermaidLoaded) return 67;
    if (guodegangLoaded && mermaidLoaded) return 67;
    if (cardLoaded || guodegangLoaded || mermaidLoaded) return 33;
    return 10;
  })();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
        <Topic onTopicSubmit={setTopic}/>
        {topic && (
            <div className="w-64">
                <ProgressBar value={progress} color="accent">
                    <Label>Data Loading</Label>
                    <ProgressBar.Output />
                    <ProgressBar.Track>
                        <ProgressBar.Fill />
                    </ProgressBar.Track>
                </ProgressBar>
            </div>
        )}
        <div style={{ display: 'grid', gap: '10px' }}>
            <Card topic={topic} onLoaded={setCardLoaded} />
            <Guodegang topic={topic} onLoaded={setGuodegangLoaded} />
            <Mermaid topic={topic} onLoaded={setMermaidLoaded} />
        </div>
    </div>
  );
}

export default App;