import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node"; import { CopilotKit } from "@copilotkit/react-core"; import { Form, Link, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, useNavigation, useSubmit, } from "@remix-run/react"; import appStylesHref from "./app.css?url"; // import cpkStylesHref from "@copilotkit/react-ui/styles.css"; // TODO: Max: unsure why this is required to be this odd way, some loaderfoolery // Actually this broke now too? // import cpkStylesHref from "node_modules/@copilotkit/react-ui/dist/index.css"; import cpkStylesHref from "./cpk.css?url"; import { getInventory } from "./data/inventoryData"; import { useEffect } from "react"; import { CartRecord, getCart } from "./data/cartData"; import { CopilotPopup } from "@copilotkit/react-ui"; import { getAddress } from "./data/settingsData"; import Wrapper from "./wrapper"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: cpkStylesHref }, { rel: "stylesheet", href: appStylesHref }, ]; export const loader = async ({ request }: LoaderFunctionArgs) => { const url = new URL(request.url); const q = url.searchParams.get("q"); const items = await getInventory(q); const cartItems = await getCart(); const address = await getAddress(); return { items, cartItems, address, q, PUBLIC_COPILOT_KIT_PUBLIC_API_KEY: process.env.PUBLIC_COPILOT_KIT_PUBLIC_API_KEY, }; }; export default function App() { const { cartItems, items, address, q, PUBLIC_COPILOT_KIT_PUBLIC_API_KEY } = useLoaderData(); const cartQuantity = Object.values(cartItems as CartRecord[]).reduce( (acc, { quantity }) => acc + quantity, 0, ); const navigation = useNavigation(); const submit = useSubmit(); const searching = navigation.location && new URLSearchParams(navigation.location.search).has("q"); useEffect(() => { const searchField = document.getElementById("q"); if (searchField instanceof HTMLInputElement) { searchField.value = q || ""; } }, [q]); return (