All files / src/components EmptyState.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { useLabState } from '../useLabState';
import { Atom, Zap, Globe, Map } from 'lucide-react';
import JournalSidebar from './JournalSidebar';
 
export default function EmptyState() {
  const { selectedModelObj, webGroundingEnabled, isAutoLoopEnabled, journalOpen } = useLabState();
 
  return (
    <div className="flex-1 flex flex-row h-full overflow-hidden">
      <div className="flex-1 flex flex-col items-center justify-center p-8 text-center bg-lab-bg/50">
        <div className="relative mb-8">
          <div className="absolute inset-0 bg-lab-accent/5 rounded-full blur-3xl scale-150" />
          <Atom className="w-20 h-20 text-lab-accent/15 animate-pulse relative" />
        </div>
        <h2 className="text-lg font-bold mb-2 text-lab-fg tracking-wide">Ready for Research</h2>
        <p className="text-lab-fg-muted text-xs max-w-xs leading-relaxed mb-6">
          Describe a scientific concept to explore. The agent will build an interactive simulation.
        </p>
        <div className="flex items-center gap-2 text-[10px] text-lab-fg-muted">
          <span className="flex items-center gap-1"><Zap className="w-3 h-3" /> {selectedModelObj?.name || 'Model'}</span>
          <span className="text-lab-fg-muted">|</span>
          <span className="flex items-center gap-1">{webGroundingEnabled ? <><Globe className="w-3 h-3 text-lab-accent" /> Grounded</> : <><Globe className="w-3 h-3" /> No grounding</>}</span>
          {isAutoLoopEnabled && <><span className="text-lab-fg-muted">|</span><span className="flex items-center gap-1 text-lab-warning"><Map className="w-3 h-3" /> Auto-loop</span></>}
        </div>
      </div>
      {journalOpen && <JournalSidebar />}
    </div>
  );
}