import { NextPage } from "next"; import Head from "next/head"; import dynamic from "next/dynamic"; import Script from "next/script"; import React, { useEffect } from "react"; import { ResponsiveWidth, useLayoutStore } from "@/store"; // Use dynamic import to avoid page hydrated. // reference: https://github.com/pmndrs/zustand/issues/1145#issuecomment-1316431268 const ConnectionSidebar = dynamic(() => import("@/components/ConnectionSidebar"), { ssr: false, }); const ChatView = dynamic(() => import("@/components/ChatView"), { ssr: false, }); const QueryDrawer = dynamic(() => import("@/components/QueryDrawer"), { ssr: false, }); const ChatPage: NextPage = () => { const layoutStore = useLayoutStore(); useEffect(() => { const handleWindowResize = () => { if (window.innerWidth < ResponsiveWidth.lg) { layoutStore.toggleSidebar(false); } else { layoutStore.toggleSidebar(true); } }; handleWindowResize(); window.addEventListener("resize", handleWindowResize); return () => { window.removeEventListener("resize", handleWindowResize); }; }, []); return (
SQL Chat
layoutStore.toggleSidebar(e.target.checked)} /> {/* Render sidebar after chatview to prevent z-index problem */}