File size: 1,491 Bytes
b2c86fd | 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import { useState } from "react";
import ChatBox from "./ChatBox";
import McpStudio from "./McpStudio";
import "./styles.css";
export default function App() {
const [activePage, setActivePage] = useState("chat");
return (
<div className="app">
<div className="app-shell">
<aside className="app-sidebar">
<div className="sidebar-brand">
<div className="nav-title">Strata Bio OS</div>
<div className="nav-subtitle">Chat + Available Tool Studio</div>
</div>
<nav className="nav-actions">
<button
type="button"
className={`nav-btn ${activePage === "chat" ? "nav-btn-active" : ""}`}
onClick={() => setActivePage("chat")}
>
Chatbox
</button>
<button
type="button"
className={`nav-btn ${activePage === "mcp" ? "nav-btn-active" : ""}`}
onClick={() => setActivePage("mcp")}
>
Available Tool Studio
</button>
</nav>
</aside>
<div className="page-shell">
<div style={{ display: activePage === "chat" ? "block" : "none", height: "100%" }}>
<ChatBox />
</div>
<div style={{ display: activePage === "mcp" ? "block" : "none", height: "100%" }}>
<McpStudio onOpenChat={() => setActivePage("chat")} />
</div>
</div>
</div>
</div>
);
}
|