import { Box, Divider, HStack, Heading, Text, VStack } from "@chakra-ui/react"; import { useEffect, useState } from "react"; import { DiscordIcon, GithubIcon, InfoIcon, JupyterIcon, PlusIcon, PythonIcon, } from "../../assets/icons"; import ConnectionManager from "../../services/connection/connectionManager"; import { useNotebookStore } from "../notebook/store/NotebookStore"; const { createNewNotebook } = useNotebookStore.getState(); // Component to handle kernel logo with fallback const KernelLogo = ({ logoUrl, alt, fallback, }: { logoUrl: string | undefined | null; alt: string; fallback: JSX.Element; }) => { const [hasError, setHasError] = useState(false); if (!logoUrl || hasError) { return fallback; } return (

{ console.warn(`Failed to load logo: ${logoUrl}`); setHasError(true); }} /> ); }; const Section = ({ title, icon: SectionIcon, items, fallbackMessage, }: { title: string; icon: any; items: { label: string; icon: any; actionHandler: () => void }[]; fallbackMessage?: string; }) => { return ( {SectionIcon} {title} {items.length > 0 ? ( {items.map((item, index) => ( {item.icon} {item.label} ))} ) : ( {fallbackMessage} )} ); }; const Launcher = () => { const [notebookItems, setNotebookItems] = useState< { label: string; icon: JSX.Element; actionHandler: () => void }[] >([]); const files = useNotebookStore((state) => state.files); const existingNotebooks = files.filter((file) => file.type === "notebook"); useEffect(() => { const fetchKernelSpecs = async () => { try { const connectionManager = ConnectionManager.getInstance(); await connectionManager.ready; await connectionManager.serviceManager?.ready; const kernelSpecs = await connectionManager.serviceManager ?.kernelspecs.specs; if (kernelSpecs) { // Debug: Print kernelspecs structure console.log("Kernelspecs data:", kernelSpecs); console.log("Kernelspecs keys:", Object.keys(kernelSpecs.kernelspecs)); // Get the Jupyter server URL from ConnectionManager const serverUrl = connectionManager.serverUrl || "http://127.0.0.1:8888"; const urlParams = new URLSearchParams(window.location.search); const token = urlParams.get("token") || "123"; const newItems = Object.keys(kernelSpecs.kernelspecs) .filter( (key) => kernelSpecs.kernelspecs[key]?.display_name, ) .map((key) => { const kernel = kernelSpecs.kernelspecs[key]; // Debug: Print each kernel's data console.log(`Kernel ${key}:`, { display_name: kernel?.display_name, resources: kernel?.resources, logo_svg: kernel?.resources?.["logo-svg"], }); let logoUrl = kernel?.resources?.["logo-svg"]; // Transform relative logo URLs to absolute URLs using the Jupyter server URL // Convert /kernelspecs/... to http://127.0.0.1:8888/kernelspecs/... if (logoUrl && logoUrl.startsWith("/")) { logoUrl = `${serverUrl}${logoUrl}?token=${token}`; } return { label: kernel!.display_name, icon: ( } /> ), actionHandler: () => { createNewNotebook(key); }, }; }); setNotebookItems(newItems); } else { console.error("Failed to fetch kernelspecs"); } } catch (error) { console.error("Error fetching kernelspecs:", error); } }; fetchKernelSpecs(); }, []); const sections = [ { title: "New notebook", icon: , items: notebookItems, fallbackMessage: "No kernels could be found", }, ...(existingNotebooks && existingNotebooks.length > 0 ? [ { title: "Notebooks in directory", icon: , items: existingNotebooks.map((notebook) => ({ label: notebook.name, icon: , actionHandler: () => { useNotebookStore .getState() .handleNotebookClick(notebook); }, })), }, ] : []), { title: "Join the community", icon: , items: [ { label: "GitHub", icon: , actionHandler: () => window.open( "https://github.com/alishobeiri/thread", "_blank", ), }, { label: "Discord", icon: , actionHandler: () => window.open("https://discord.gg/ZuHq9hDs2y", "_blank"), }, ], }, ]; return ( {sections.map((section, index) => (

))} ); }; export default Launcher;