Changes to add support for theme

Author: vipinnair22

src/frontend/src/components/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import { AgentPreview } from "./agents/AgentPreview";
+import { ThemeProvider } from "./core/theme/ThemeProvider";
 
 const App: React.FC = () => {
   // Sample agent details - in a real application, this would come from an API
@@ -12,14 +12,14 @@ const App: React.FC = () => {
   };
 
   return (
-    <FluentProvider theme={webLightTheme}>
+    <ThemeProvider>
       <div className="app-container">
         <AgentPreview
           resourceId="sample-resource-id"
           agentDetails={mockAgentDetails}
         />
       </div>
-    </FluentProvider>
+    </ThemeProvider>
   );
 };
 

src/frontend/src/components/agents/AgentPreview.tsx

@@ -3,7 +3,7 @@ import { Body1, Button, Caption1, Title2 } from "@fluentui/react-components";
 import { ChatRegular, MoreHorizontalRegular } from "@fluentui/react-icons";
 
 import { AgentIcon } from "./AgentIcon";
-import { SettingsPanel } from "../core/SettingsPanel";
+// import { SettingsPanel } from "../core/SettingsPanel";
 import { AgentPreviewChatBot } from "./AgentPreviewChatBot";
 import { MenuButton } from "../core/MenuButton/MenuButton";
 import { IChatItem } from "./chatbot/types";
@@ -23,13 +23,13 @@ interface IAgentPreviewProps {
 }
 
 export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
-  const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
+  // const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
   const [messageList, setMessageList] = useState<IChatItem[]>([]);
   const [isResponding, setIsResponding] = useState(false);
 
-  const handleSettingsPanelOpenChange = (isOpen: boolean) => {
-    setIsSettingsPanelOpen(isOpen);
-  };
+  // const handleSettingsPanelOpenChange = (isOpen: boolean) => {
+  //   setIsSettingsPanelOpen(isOpen);
+  // };
 
   const newThread = () => {
     setMessageList([]);
@@ -61,13 +61,13 @@ export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
     }, 1000);
   };
   const menuItems = [
-    {
-      key: "settings",
-      children: "Settings",
-      onClick: () => {
-        setIsSettingsPanelOpen(true);
-      },
-    },
+    // {
+    //   key: "settings",
+    //   children: "Settings",
+    //   onClick: () => {
+    //     setIsSettingsPanelOpen(true);
+    //   },
+    // },
     {
       key: "terms",
       children: (
@@ -167,10 +167,10 @@ export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
       </div>
 
       {/* Settings Panel */}
-      <SettingsPanel
+      {/* <SettingsPanel
         isOpen={isSettingsPanelOpen}
         onOpenChange={handleSettingsPanelOpenChange}
-      />
+      /> */}
     </div>
   );
 }

src/frontend/src/components/core/SettingsPanel.tsx

@@ -9,6 +9,7 @@ import {
 import { Dismiss24Regular } from "@fluentui/react-icons";
 
 import styles from "./SettingsPanel.module.css";
+import { ThemePicker } from "./theme/ThemePicker";
 
 export interface ISettingsPanelProps {
   isOpen: boolean;
@@ -44,10 +45,9 @@ export function SettingsPanel({
         >
           Settings
         </DrawerHeaderTitle>
-      </DrawerHeader>
+      </DrawerHeader>{" "}
       <DrawerBody className={styles.content}>
-        {/* Content will go here */}
-        <p>Settings panel content</p>
+        <ThemePicker />
       </DrawerBody>
     </Drawer>
   );

src/frontend/src/components/core/theme/ThemeContext.ts

@@ -0,0 +1,33 @@
+import { createContext, useContext } from "react";
+import { Theme as FluentTheme } from "@fluentui/react-components";
+import { lightTheme } from "./themes";
+
+export type Theme = "Light" | "Dark" | "System";
+
+export interface IThemeContextValue {
+  theme: Theme;
+  savedTheme: Theme;
+  currentTheme: "Light" | "Dark";
+  themeStyles: FluentTheme;
+  setTheme: (theme: Theme) => void;
+  isDarkMode: boolean;
+}
+
+export const ThemeContext = createContext<IThemeContextValue>({
+  theme: "Light",
+  savedTheme: "Light",
+  currentTheme: "Light",
+  themeStyles: lightTheme,
+  setTheme(theme: Theme) {
+    console.log(`Theme set to ${theme}`);
+  },
+  isDarkMode: false,
+});
+
+export function useThemeContext(): IThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+}

src/frontend/src/components/core/theme/ThemePicker.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from "react";
+import { Dropdown, Option, Label } from "@fluentui/react-components";
+import { Theme, useThemeContext } from "./ThemeContext";
+
+interface IDropdownItem {
+  key: Theme;
+  value: Theme;
+  text: string;
+}
+
+export const ThemePicker: React.FC = () => {
+  const { savedTheme, setTheme } = useThemeContext();
+
+  const options: IDropdownItem[] = useMemo(
+    () => [
+      {
+        key: "Light",
+        value: "Light",
+        text: "Light theme",
+      },
+      {
+        key: "Dark",
+        value: "Dark",
+        text: "Dark theme",
+      },
+      {
+        key: "System",
+        value: "System",
+        text: "System theme",
+      },
+    ],
+    []
+  );
+
+  const selectedThemeText = useMemo(
+    () =>
+      options.find((opt) => opt.key === (savedTheme ?? "Light"))?.text ??
+      "Light theme",
+    [savedTheme, options]
+  );
+
+  const selectedOptions = useMemo(
+    () => (savedTheme ? [savedTheme] : []),
+    [savedTheme]
+  );
+  return (
+    <>
+      <Label htmlFor="ThemePickerDropdown">Theme</Label>
+      <Dropdown
+        id="ThemePickerDropdown"
+        onOptionSelect={(_, { optionValue }) => {
+          if (optionValue !== undefined) {
+            setTheme(optionValue as Theme);
+          }
+        }}
+        selectedOptions={selectedOptions}
+        value={selectedThemeText}
+      >
+        {options.map((option) => (
+          <Option key={option.key} value={option.value}>
+            {option.text}
+          </Option>
+        ))}
+      </Dropdown>
+    </>
+  );
+};

src/frontend/src/components/core/theme/ThemeProvider.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+import { FluentProvider } from "@fluentui/react-components";
+import { ThemeContext } from "./ThemeContext";
+import { useThemeProvider } from "./useThemeProvider";
+
+export function ThemeProvider({ children }: PropsWithChildren): JSX.Element {
+  const themeContext = useThemeProvider();
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      <FluentProvider theme={themeContext.themeStyles}>
+        {children}
+      </FluentProvider>
+    </ThemeContext.Provider>
+  );
+}

src/frontend/src/components/core/theme/themes.ts

@@ -0,0 +1,37 @@
+import {
+  BrandVariants,
+  createDarkTheme,
+  createLightTheme,
+  Theme,
+} from "@fluentui/react-components";
+
+// Define our brand colors for the theme
+const brandColors: BrandVariants = {
+  10: "#010306",
+  20: "#071926",
+  30: "#002A41",
+  40: "#003653",
+  50: "#004365",
+  60: "#005078",
+  70: "#005E8B",
+  80: "#007BB4",
+  90: "#007BB4",
+  100: "#008AC9",
+  110: "#0099DE",
+  120: "#00A8F4",
+  130: "#3FB6FF",
+  140: "#73C3FF",
+  150: "#98D0FF",
+  160: "#B8DEFF",
+};
+
+export const lightTheme: Theme = {
+  ...createLightTheme(brandColors),
+};
+
+export const darkTheme: Theme = {
+  ...createDarkTheme(brandColors),
+  colorBrandForeground1: brandColors[110],
+  colorBrandForeground2: brandColors[120],
+  colorBrandForegroundLink: brandColors[140],
+};

src/frontend/src/components/core/theme/useThemeProvider.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useState } from "react";
+import { IThemeContextValue, Theme } from "./ThemeContext";
+import { darkTheme, lightTheme } from "./themes";
+
+const LOCAL_STORAGE_THEME_KEY = "app-theme-preference";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const mediaQuery = window.matchMedia(query);
+      const updateMatches = () => {
+        setMatches(mediaQuery.matches);
+      };
+
+      mediaQuery.addEventListener("change", updateMatches);
+
+      updateMatches();
+      return () => {
+        mediaQuery.removeEventListener("change", updateMatches);
+      };
+    }
+    return () => {
+      // Cleanup if needed
+    };
+  }, [query]);
+
+  return matches;
+}
+
+export const useThemeProvider = (): IThemeContextValue => {
+  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const [savedTheme, setSavedTheme] = useState<Theme>(() => {
+    if (typeof localStorage !== "undefined") {
+      const storedTheme = localStorage.getItem(
+        LOCAL_STORAGE_THEME_KEY
+      ) as Theme;
+      if (storedTheme && ["Light", "Dark", "System"].includes(storedTheme)) {
+        return storedTheme;
+      }
+    }
+    return "System";
+  });
+
+  const isDarkMode =
+    savedTheme === "System" ? prefersDark : savedTheme === "Dark";
+
+  const currentTheme = isDarkMode ? "Dark" : "Light";
+
+  const themeStyles = isDarkMode ? darkTheme : lightTheme;
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    setSavedTheme(newTheme);
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Update document color scheme for browser UI
+    if (typeof document !== "undefined") {
+      document.documentElement.style.colorScheme = isDarkMode
+        ? "dark"
+        : "light";
+    }
+  }, [isDarkMode]);
+
+  return {
+    theme: savedTheme,
+    savedTheme,
+    currentTheme,
+    themeStyles,
+    setTheme,
+    isDarkMode,
+  };
+};