Merge branch 'develop' into develop

client/src/components/app-sidebar.tsx

@@ -1,16 +1,17 @@
 import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
 import { useParams } from "react-router-dom";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 import {
     Sidebar,
     SidebarContent,
+    SidebarFooter,
     SidebarGroup,
     SidebarGroupContent,
     SidebarGroupLabel,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
-    SidebarTrigger,
 } from "@/components/ui/sidebar";
 
 // Menu items.
@@ -51,6 +52,9 @@ export function AppSidebar() {
                     </SidebarGroupContent>
                 </SidebarGroup>
             </SidebarContent>
+            <SidebarFooter>
+                <ThemeToggle />
+            </SidebarFooter>
         </Sidebar>
     );
 }

client/src/components/theme-toggle.tsx

@@ -0,0 +1,19 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/hooks/use-theme";
+
+export function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+
+    return (
+        <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+        >
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    );
+}

client/src/hooks/use-theme.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+function useTheme() {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem("theme") as Theme) || "system"
+    );
+
+    useEffect(() => {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+        function applyTheme() {
+            const root = window.document.documentElement;
+            const systemTheme = media.matches ? "dark" : "light";
+            const activeTheme = theme === "system" ? systemTheme : theme;
+
+            root.classList.remove("light", "dark");
+            root.classList.add(activeTheme);
+            localStorage.setItem("theme", theme);
+        }
+
+        applyTheme();
+        media.addEventListener("change", applyTheme);
+        return () => media.removeEventListener("change", applyTheme);
+    }, [theme]);
+
+    return { theme, setTheme } as const;
+}
+
+export { useTheme };
+export type { Theme };

client/src/main.tsx

@@ -5,6 +5,12 @@ import "./index.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
+
+// Initialize theme
+const theme = localStorage.getItem("theme") || "system";
+const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+document.documentElement.classList.add(theme === "system" ? systemTheme : theme);
+
 // Create a client
 const queryClient = new QueryClient();
 

packages/core/src/test_resources/createRuntime.ts

@@ -18,15 +18,15 @@ import {
 import { User } from "./types.ts";
 
 /**
- * Create a runtime environment with the specified configurations.
- *
- * @param {Object} options - The options for creating the runtime environment.
- * @param {Record<string, string> | NodeJS.ProcessEnv} [options.env] - The environment variables.
- * @param {number} [options.conversationLength] - The length of the conversation.
- * @param {Evaluator[]} [options.evaluators] - The array of evaluators.
- * @param {Action[]} [options.actions] - The array of actions.
- * @param {Provider[]} [options.providers] - The array of providers.
- * @returns {Object} - An object containing the created user, session, and runtime.
+ * Creates a runtime environment for the agent.
+ * 
+ * @param {Object} param - The parameters for creating the runtime.
+ * @param {Record<string, string> | NodeJS.ProcessEnv} [param.env] - The environment variables.
+ * @param {number} [param.conversationLength] - The length of the conversation.
+ * @param {Evaluator[]} [param.evaluators] - The evaluators to be used.
+ * @param {Action[]} [param.actions] - The actions to be used.
+ * @param {Provider[]} [param.providers] - The providers to be used.
+ * @returns {Object} An object containing the created user, session, and runtime.
  */
 export async function createRuntime({
     env,

packages/core/src/test_resources/types.ts

@@ -1,10 +1,10 @@
 /**
- * Interface representing a user.
+ * Interface representing a User.
  * @typedef {Object} User
- * @property {string} id - The unique identifier for the user.
- * @property {string} [email] - The email address of the user (optional).
- * @property {string} [phone] - The phone number of the user (optional).
- * @property {string} [role] - The role of the user (optional).
+ * @property {string} id - The user's ID.
+ * @property {string} [email] - The user's email (optional).
+ * @property {string} [phone] - The user's phone number (optional).
+ * @property {string} [role] - The user's role (optional).
  */
 export interface User {
     id: string;