38648ae5f4
- Add SessionManager class to handle PTY sessions with WebSocket connections. - Implement methods for creating, retrieving, and destroying sessions. - Handle PTY output and WebSocket messages for terminal interaction. - Ensure graceful session destruction and cleanup. feat: initialize web application with Next.js and Tailwind CSS - Create initial Next.js application structure with TypeScript support. - Set up Tailwind CSS for styling with custom theme configurations. - Add ESLint configuration for code quality and consistency. feat: implement chat API and UI components - Create chat API route to handle chat requests and responses. - Develop chat layout with sidebar, header, chat window, and input components. - Integrate Zustand for state management of conversations and messages. - Add utility functions for formatting dates and managing class names. chore: add environment variables and configuration files - Create .env.example for environment variable setup. - Add configuration files for PostCSS, Tailwind CSS, and TypeScript. - Set up package.json with necessary dependencies and scripts for development.
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { createContext, useContext, useEffect, useState } from "react";
|
|
import { useChatStore } from "@/lib/store";
|
|
|
|
type Theme = "light" | "dark" | "system";
|
|
|
|
interface ThemeContextValue {
|
|
theme: Theme;
|
|
setTheme: (theme: Theme) => void;
|
|
resolvedTheme: "light" | "dark";
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextValue>({
|
|
theme: "dark",
|
|
setTheme: () => {},
|
|
resolvedTheme: "dark",
|
|
});
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const { settings, updateSettings } = useChatStore();
|
|
const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("dark");
|
|
|
|
useEffect(() => {
|
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
const resolve = () => {
|
|
if (settings.theme === "system") {
|
|
return mediaQuery.matches ? "dark" : "light";
|
|
}
|
|
return settings.theme;
|
|
};
|
|
|
|
const apply = () => {
|
|
const resolved = resolve();
|
|
setResolvedTheme(resolved);
|
|
document.documentElement.classList.toggle("dark", resolved === "dark");
|
|
};
|
|
|
|
apply();
|
|
mediaQuery.addEventListener("change", apply);
|
|
return () => mediaQuery.removeEventListener("change", apply);
|
|
}, [settings.theme]);
|
|
|
|
const setTheme = (theme: Theme) => {
|
|
updateSettings({ theme });
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme: settings.theme, setTheme, resolvedTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export const useTheme = () => useContext(ThemeContext);
|