import { configureTracking } from "@agent-native/core/client/analytics";
import { appPath } from "@agent-native/core/client/api-path";
import { useDbSync } from "@agent-native/core/client/hooks";
import { createAgentNativeQueryClient } from "@agent-native/core/client/hooks";
import { getLocaleInitScript, useT } from "@agent-native/core/client/i18n";
import { getThemeInitScript } from "@agent-native/core/client/theme";
import { AppProviders } from "@agent-native/toolkit/app/providers";
import { useCommandMenuShortcut } from "@agent-native/toolkit/app/shared";
import { CommandMenu } from "@agent-native/toolkit/app/shared";
import { useQueryClient } from "@tanstack/react-query";
import { useTheme } from "next-themes";
import { useCallback, useState } from "react";
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLocation,
useNavigate,
} from "react-router";
import type { LinksFunction } from "react-router";
import { Layout as AppLayout } from "@/components/layout/Layout";
import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
import { useNavigationState } from "@/hooks/use-navigation-state";
import { APP_TITLE } from "@/lib/app-config";
import {
HOME_PATH,
isChatPathname,
NEW_CHAT_PATH,
skeletonLayoutForPath,
threadIdFromPath,
} from "@/lib/chat-paths";
import { TAB_ID } from "@/lib/tab-id";
import { i18nCatalog } from "./i18n";
import stylesheet from "./global.css?url";
configureTracking({
getDefaultProps: (_name, properties) => ({
...properties,
app: "chat",
}),
});
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
];
const THEME_INIT_SCRIPT = getThemeInitScript();
const LOCALE_INIT_SCRIPT = getLocaleInitScript();
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
function DbSyncSetup() {
const qc = useQueryClient();
useNavigationState();
useDbSync({
queryClient: qc,
ignoreSource: TAB_ID,
});
return null;
}
function ThemeToggleItem() {
const { resolvedTheme, setTheme } = useTheme();
const t = useT();
const isDark = resolvedTheme === "dark";
return (
setTheme(isDark ? "light" : "dark")}
keywords={["theme", "dark", "light", "mode"]}
>
{t("root.toggleTheme")}
);
}
function AppContent() {
const [cmdkOpen, setCmdkOpen] = useState(false);
const navigate = useNavigate();
const t = useT();
const location = useLocation();
const isChatThread = threadIdFromPath(location.pathname) !== null;
useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
return (
<>
{isChatThread ? (
window.dispatchEvent(new Event("agent-chat:new-chat"))
}
>
{t("chat.newChat")}
) : null}
{location.pathname !== HOME_PATH ? (
navigate(HOME_PATH)}>
{t("navigation.home")}
) : null}
{!isChatPathname(location.pathname) ? (
navigate(NEW_CHAT_PATH)}>
{t("navigation.chat")}
) : null}
navigate("/settings/agent")}
keywords={[
"agent",
"context",
"files",
"connections",
"jobs",
"access",
]}
>
{t("settings.openAgentSettings")}
);
}
export default function Root() {
const [queryClient] = useState(() => createAgentNativeQueryClient());
// The path, not the visitor, picks the shell, so the SSR shell stays one
// cached page per URL.
const { pathname } = useLocation();
return (
);
}
export { ErrorBoundary } from "@agent-native/toolkit/app/shared/ErrorBoundary";