langchain-go/frontend/src/App.tsx

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

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

  useEffect(() => {
    setCardLoaded(false);
    setGuodegangLoaded(false);
  }, [topic]);

  const progress = (() => {
    if (!topic) return 0;
    if (cardLoaded && guodegangLoaded) return 100;
    if (cardLoaded || guodegangLoaded) return 50;
    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: 'flex', gap: '20px' }}>
            <Card topic={topic} onLoaded={setCardLoaded} />
            <Guodegang topic={topic} onLoaded={setGuodegangLoaded} />
        </div>
    </div>
  );
}

export default App;