feat(agents-chat-starter): dark mode toggle + docs fixes (#4227)

Author: balegas

examples/agents-chat-starter/src/ui/components/MembersSidebar.tsx

@@ -63,12 +63,12 @@ export function MembersSidebar({
               style={{
                 background:
                   agent.status === `running`
-                    ? `#3b82f6`
+                    ? `var(--blue-9)`
                     : agent.status === `idle`
-                      ? `#22c55e`
+                      ? `var(--green-9)`
                       : agent.status === `spawning`
-                        ? `#eab308`
-                        : `#cbd5e1`,
+                        ? `var(--yellow-9)`
+                        : `var(--gray-7)`,
               }}
             />
             <Box style={{ minWidth: 0 }}>

examples/agents-chat-starter/src/ui/hooks/useDarkMode.tsx

@@ -0,0 +1,91 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+const STORAGE_KEY = `electric-agents-chat.dark-mode`
+
+export type ThemePreference = `light` | `dark` | `system`
+
+type DarkModeContextValue = {
+  darkMode: boolean
+  preference: ThemePreference
+  cyclePreference: () => void
+}
+
+const DarkModeContext = createContext<DarkModeContextValue | null>(null)
+
+function readInitialPreference(): ThemePreference {
+  if (typeof window === `undefined`) return `system`
+  const stored = window.localStorage.getItem(STORAGE_KEY)
+  if (stored === `true` || stored === `dark`) return `dark`
+  if (stored === `false` || stored === `light`) return `light`
+  return `system`
+}
+
+function systemPrefersDark(): boolean {
+  if (typeof window === `undefined`) return false
+  return window.matchMedia?.(`(prefers-color-scheme: dark)`).matches ?? false
+}
+
+const cycleOrder: Record<ThemePreference, ThemePreference> = {
+  light: `dark`,
+  dark: `system`,
+  system: `light`,
+}
+
+export function DarkModeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.ReactElement {
+  const [preference, setPreference] = useState<ThemePreference>(
+    readInitialPreference
+  )
+  const [systemDark, setSystemDark] = useState<boolean>(systemPrefersDark)
+
+  useEffect(() => {
+    if (typeof window === `undefined`) return
+    const mql = window.matchMedia(`(prefers-color-scheme: dark)`)
+    const onChange = (e: MediaQueryListEvent): void => setSystemDark(e.matches)
+    mql.addEventListener(`change`, onChange)
+    return () => mql.removeEventListener(`change`, onChange)
+  }, [])
+
+  const darkMode = preference === `system` ? systemDark : preference === `dark`
+
+  useEffect(() => {
+    document.documentElement.classList.toggle(`dark`, darkMode)
+  }, [darkMode])
+
+  const cyclePreference = useCallback(() => {
+    setPreference((current) => {
+      const next = cycleOrder[current]
+      window.localStorage.setItem(STORAGE_KEY, next)
+      return next
+    })
+  }, [])
+
+  const value = useMemo(
+    () => ({ darkMode, preference, cyclePreference }),
+    [darkMode, preference, cyclePreference]
+  )
+
+  return (
+    <DarkModeContext.Provider value={value}>
+      {children}
+    </DarkModeContext.Provider>
+  )
+}
+
+export function useDarkModeContext(): DarkModeContextValue {
+  const value = useContext(DarkModeContext)
+  if (!value) {
+    throw new Error(`useDarkModeContext must be used inside DarkModeProvider`)
+  }
+  return value
+}

examples/agents-chat-starter/src/ui/main.tsx

@@ -1,14 +1,32 @@
 import { StrictMode, useState, useCallback, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
-import { Theme, Flex, Text, Box, Heading } from '@radix-ui/themes'
+import { Theme, Flex, Text, Heading, IconButton } from '@radix-ui/themes'
+import { SunIcon, MoonIcon, DesktopIcon } from '@radix-ui/react-icons'
 import '@radix-ui/themes/styles.css'
 import { useChatroom } from './hooks/useChatroom.js'
 import { useEntityTypes } from './hooks/useEntityTypes.js'
+import {
+  DarkModeProvider,
+  useDarkModeContext,
+  type ThemePreference,
+} from './hooks/useDarkMode.js'
 import { RoomsSidebar } from './components/RoomsSidebar.js'
 import { ChatArea } from './components/ChatArea.js'
 import { MembersSidebar } from './components/MembersSidebar.js'
 import './main.css'
 
+function themeButtonIcon(preference: ThemePreference) {
+  if (preference === `light`) return <SunIcon />
+  if (preference === `dark`) return <MoonIcon />
+  return <DesktopIcon />
+}
+
+function themeButtonAriaLabel(preference: ThemePreference): string {
+  if (preference === `light`) return `Switch to dark mode`
+  if (preference === `dark`) return `Switch to system theme`
+  return `Switch to light mode`
+}
+
 interface Room {
   id: string
   name: string
@@ -21,6 +39,35 @@ function getRoomFromHash(): string | null {
   return hash || null
 }
 
+function ThemeToggle() {
+  const { preference, cyclePreference } = useDarkModeContext()
+  return (
+    <IconButton
+      variant="ghost"
+      size="2"
+      color="gray"
+      onClick={cyclePreference}
+      aria-label={themeButtonAriaLabel(preference)}
+    >
+      {themeButtonIcon(preference)}
+    </IconButton>
+  )
+}
+
+function ThemedApp() {
+  const { darkMode } = useDarkModeContext()
+  return (
+    <Theme
+      accentColor="indigo"
+      grayColor="mauve"
+      radius="medium"
+      appearance={darkMode ? `dark` : `light`}
+    >
+      <App />
+    </Theme>
+  )
+}
+
 function App() {
   const [config, setConfig] = useState<{ agentsUrl: string } | null>(null)
   const [rooms, setRooms] = useState<Room[]>([])
@@ -137,7 +184,13 @@ function App() {
         creating={creating}
       />
       <Flex direction="column" flexGrow="1" style={{ minWidth: 0 }}>
-        <Box px="3" py="3" className="chat-header">
+        <Flex
+          px="3"
+          py="3"
+          align="center"
+          justify="between"
+          className="chat-header"
+        >
           {activeRoom ? (
             <Heading size="3">
               <Text color="gray"># </Text>
@@ -148,7 +201,8 @@ function App() {
               Chat
             </Heading>
           )}
-        </Box>
+          <ThemeToggle />
+        </Flex>
         <Flex flexGrow="1" style={{ minHeight: 0 }}>
           <ChatArea
             messagesCollection={messagesCollection}
@@ -173,8 +227,8 @@ function App() {
 
 createRoot(document.getElementById(`root`)!).render(
   <StrictMode>
-    <Theme accentColor="indigo" grayColor="mauve" radius="medium">
-      <App />
-    </Theme>
+    <DarkModeProvider>
+      <ThemedApp />
+    </DarkModeProvider>
   </StrictMode>
 )

examples/deep-survey/README.md

@@ -88,9 +88,8 @@ pnpm install && pnpm --filter @electric-ax/agents-runtime build
 Create a `.env` file in this directory:
 
 ```bash
-ANTHROPIC_API_KEY=sk-ant-...       # https://console.anthropic.com/ (optional if MOONSHOT_API_KEY is set)
-MOONSHOT_API_KEY=sk-...            # https://platform.moonshot.ai/ (optional if ANTHROPIC_API_KEY is set)
-BRAVE_SEARCH_API_KEY=...           # https://brave.com/search/api/ (optional)
+ANTHROPIC_API_KEY=sk-ant-...
+BRAVE_SEARCH_API_KEY=...           # optional
 ```
 
 ### 3. Start the Electric Agents server