feat: Implement AppContext for global state management and navigation handling

Author: devanshjainms

client/src/App.tsx

@@ -20,7 +20,7 @@ import {
   WeatherSunnyRegular,
 } from "@fluentui/react-icons";
 
-import { ChatProvider, WorkspaceProvider } from "./context";
+import { AppProvider, ChatProvider, WorkspaceProvider, useApp } from "./context";
 import {
   ChatPanel,
   CollapsibleSidebar,
@@ -41,14 +41,9 @@ const AppContent: React.FC<AppContentProps> = ({
   onToggleTheme,
 }) => {
   const styles = useStyles();
+  const { state, closeFile } = useApp();
 
   const [isHealthy, setIsHealthy] = useState<boolean | null>(null);
-  const [showJobPanel, setShowJobPanel] = useState(false);
-  const [selectedWorkspaceForJobs, setSelectedWorkspaceForJobs] = useState<string | null>(null);
-  const [selectedFile, setSelectedFile] = useState<{
-    workspaceId: string;
-    fileName: string;
-  } | null>(null);
 
   // Check API health on mount
   useEffect(() => {
@@ -90,20 +85,28 @@ const AppContent: React.FC<AppContentProps> = ({
     );
   };
 
-  const handleWorkspaceSelect = (workspaceId: string, fileName: string) => {
-    setSelectedFile({ workspaceId, fileName });
-    setShowJobPanel(false);
-    setSelectedWorkspaceForJobs(null);
-  };
-
-  const handleJobsClick = (workspaceId: string) => {
-    setSelectedWorkspaceForJobs(workspaceId);
-    setShowJobPanel(true);
-    setSelectedFile(null);
-  };
-
-  const handleCloseFile = () => {
-    setSelectedFile(null);
+  const renderContent = () => {
+    switch (state.currentView) {
+      case "file":
+        return state.selectedFile ? (
+          <WorkspaceFileViewer
+            workspaceId={state.selectedFile.workspaceId}
+            fileName={state.selectedFile.fileName}
+            onClose={closeFile}
+          />
+        ) : (
+          <ChatPanel />
+        );
+      case "jobs":
+        return (
+          <JobExecutionPanel
+            workspaceId={state.selectedWorkspaceForJobs || undefined}
+          />
+        );
+      case "chat":
+      default:
+        return <ChatPanel />;
+    }
   };
 
   return (
@@ -135,25 +138,10 @@ const AppContent: React.FC<AppContentProps> = ({
       {/* Main Content */}
       <div className={styles.mainContainer}>
         {/* Collapsible Sidebar */}
-        <CollapsibleSidebar 
-          onWorkspaceSelect={handleWorkspaceSelect}
-          onJobsClick={handleJobsClick}
-        />
+        <CollapsibleSidebar />
 
         {/* Content Area */}
-        <main className={styles.content}>
-          {selectedFile ? (
-            <WorkspaceFileViewer
-              workspaceId={selectedFile.workspaceId}
-              fileName={selectedFile.fileName}
-              onClose={handleCloseFile}
-            />
-          ) : showJobPanel ? (
-            <JobExecutionPanel workspaceId={selectedWorkspaceForJobs || undefined} />
-          ) : (
-            <ChatPanel />
-          )}
-        </main>
+        <main className={styles.content}>{renderContent()}</main>
       </div>
     </div>
   );
@@ -177,11 +165,13 @@ const App: React.FC = () => {
 
   return (
     <FluentProvider theme={isDarkMode ? webDarkTheme : webLightTheme}>
-      <WorkspaceProvider>
-        <ChatProvider>
-          <AppContent isDarkMode={isDarkMode} onToggleTheme={toggleTheme} />
-        </ChatProvider>
-      </WorkspaceProvider>
+      <AppProvider>
+        <WorkspaceProvider>
+          <ChatProvider>
+            <AppContent isDarkMode={isDarkMode} onToggleTheme={toggleTheme} />
+          </ChatProvider>
+        </WorkspaceProvider>
+      </AppProvider>
     </FluentProvider>
   );
 };

client/src/components/Sidebar/CollapsibleSidebar.tsx

@@ -19,26 +19,24 @@ import {
 import { ConversationSection } from "../Sidebar/ConversationSection";
 import { WorkspaceSection } from "../Sidebar/WorkspaceSection";
 import { JobSection } from "../Sidebar/JobSection";
-import { useChat } from "../../context";
+import { useChat, useApp } from "../../context";
 import { useCollapsibleSidebarStyles as useStyles } from "../../styles";
 
-interface CollapsibleSidebarProps {
-  onWorkspaceSelect?: (workspaceId: string, fileName: string) => void;
-  onJobsClick?: (workspaceId: string) => void;
-}
-
-export const CollapsibleSidebar: React.FC<CollapsibleSidebarProps> = ({
-  onWorkspaceSelect,
-  onJobsClick,
-}) => {
+export const CollapsibleSidebar: React.FC = () => {
   const styles = useStyles();
   const { startNewChat } = useChat();
+  const { navigateToChat } = useApp();
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const toggleSidebar = () => {
     setIsCollapsed(!isCollapsed);
   };
 
+  const handleNewChat = () => {
+    startNewChat();
+    navigateToChat();
+  };
+
   return (
     <div
       className={mergeClasses(
@@ -64,7 +62,7 @@ export const CollapsibleSidebar: React.FC<CollapsibleSidebarProps> = ({
             <Button
               icon={<AddRegular />}
               appearance="transparent"
-              onClick={startNewChat}
+              onClick={handleNewChat}
               className={styles.navButton}
             />
           </Tooltip>
@@ -78,10 +76,7 @@ export const CollapsibleSidebar: React.FC<CollapsibleSidebarProps> = ({
           <ConversationSection />
 
           {/* Workspaces Section */}
-          <WorkspaceSection 
-            onWorkspaceSelect={onWorkspaceSelect}
-            onJobsClick={onJobsClick}
-          />
+          <WorkspaceSection />
 
           {/* Job Execution Section */}
           <JobSection />

client/src/components/Sidebar/ConversationSection.tsx

@@ -37,7 +37,7 @@ import {
   SearchRegular,
   DismissRegular,
 } from "@fluentui/react-icons";
-import { useChat } from "../../context";
+import { useChat, useApp } from "../../context";
 import { APP_STRINGS } from "../../constants";
 import { ConversationListItem } from "../../types";
 import { useConversationSectionStyles as useStyles } from "../../styles";
@@ -86,6 +86,7 @@ export const ConversationSection: React.FC = () => {
     deleteConversation,
     renameConversation,
   } = useChat();
+  const { navigateToChat } = useApp();
 
   const [isExpanded, setIsExpanded] = useState(true);
   const [searchExpanded, setSearchExpanded] = useState(false);
@@ -125,10 +126,12 @@ export const ConversationSection: React.FC = () => {
 
   const handleConversationClick = (conversation: ConversationListItem) => {
     loadConversation(conversation.id);
+    navigateToChat();
   };
 
   const handleNewChat = () => {
     startNewChat();
+    navigateToChat();
   };
 
   const openRenameDialog = (conversation: ConversationListItem) => {

client/src/components/Sidebar/WorkspaceSection.tsx

@@ -45,22 +45,15 @@ import {
   ChatRegular,
   PlayRegular,
 } from "@fluentui/react-icons";
-import { useWorkspace } from "../../context";
+import { useWorkspace, useApp } from "../../context";
 import { workspacesApi } from "../../api";
 import { Workspace } from "../../types";
 import { useWorkspaceSectionStyles as useStyles } from "../../styles";
 
-interface WorkspaceSectionProps {
-  onWorkspaceSelect?: (workspaceId: string, fileName: string) => void;
-  onJobsClick?: (workspaceId: string) => void;
-}
-
-export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({
-  onWorkspaceSelect,
-  onJobsClick,
-}) => {
+export const WorkspaceSection: React.FC = () => {
   const styles = useStyles();
   const { state, loadWorkspaces, selectWorkspace } = useWorkspace();
+  const { navigateToFile, navigateToJobs } = useApp();
 
   const [isExpanded, setIsExpanded] = useState(false);
   const [expandedWorkspace, setExpandedWorkspace] = useState<string | null>(null);
@@ -116,9 +109,7 @@ export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({
   };
 
   const handleFileClick = (workspaceId: string, fileName: string) => {
-    if (onWorkspaceSelect) {
-      onWorkspaceSelect(workspaceId, fileName);
-    }
+    navigateToFile(workspaceId, fileName);
   };
 
   const openCreateDialog = () => {
@@ -148,8 +139,8 @@ export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({
       setNewWorkspaceName("");
 
       // Automatically open sap-parameters.yaml after creation
-      if (useBoilerplate && onWorkspaceSelect) {
-        onWorkspaceSelect(workspaceName, "sap-parameters.yaml");
+      if (useBoilerplate) {
+        navigateToFile(workspaceName, "sap-parameters.yaml");
       }
     } catch (error: any) {
       const errorMsg = error?.response?.data?.detail || error?.message || "Failed to create workspace";
@@ -330,11 +321,7 @@ export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({
                       </div>
                       <div
                         className={styles.fileItem}
-                        onClick={() => {
-                          if (onJobsClick) {
-                            onJobsClick(workspace.workspace_id);
-                          }
-                        }}
+                        onClick={() => navigateToJobs(workspace.workspace_id)}
                       >
                         <PlayRegular className={styles.fileIcon} />
                         <Text>Jobs</Text>

client/src/context/AppContext.tsx

@@ -0,0 +1,124 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * App Context
+ * Global state management for application-level navigation and view state.
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useReducer,
+  useCallback,
+  ReactNode,
+} from "react";
+
+type ViewType = "chat" | "jobs" | "file";
+
+interface SelectedFile {
+  workspaceId: string;
+  fileName: string;
+}
+
+interface AppState {
+  currentView: ViewType;
+  selectedFile: SelectedFile | null;
+  selectedWorkspaceForJobs: string | null;
+}
+
+type AppAction =
+  | { type: "NAVIGATE_TO_CHAT" }
+  | { type: "NAVIGATE_TO_JOBS"; payload: string }
+  | { type: "NAVIGATE_TO_FILE"; payload: SelectedFile }
+  | { type: "CLOSE_FILE" };
+
+const initialState: AppState = {
+  currentView: "chat",
+  selectedFile: null,
+  selectedWorkspaceForJobs: null,
+};
+
+const appReducer = (state: AppState, action: AppAction): AppState => {
+  switch (action.type) {
+    case "NAVIGATE_TO_CHAT":
+      return {
+        ...state,
+        currentView: "chat",
+        selectedFile: null,
+        selectedWorkspaceForJobs: null,
+      };
+    case "NAVIGATE_TO_JOBS":
+      return {
+        ...state,
+        currentView: "jobs",
+        selectedFile: null,
+        selectedWorkspaceForJobs: action.payload,
+      };
+    case "NAVIGATE_TO_FILE":
+      return {
+        ...state,
+        currentView: "file",
+        selectedFile: action.payload,
+        selectedWorkspaceForJobs: null,
+      };
+    case "CLOSE_FILE":
+      return {
+        ...state,
+        currentView: "chat",
+        selectedFile: null,
+      };
+    default:
+      return state;
+  }
+};
+
+interface AppContextType {
+  state: AppState;
+  navigateToChat: () => void;
+  navigateToJobs: (workspaceId: string) => void;
+  navigateToFile: (workspaceId: string, fileName: string) => void;
+  closeFile: () => void;
+}
+
+const AppContext = createContext<AppContextType | undefined>(undefined);
+
+export const AppProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [state, dispatch] = useReducer(appReducer, initialState);
+
+  const navigateToChat = useCallback(() => {
+    dispatch({ type: "NAVIGATE_TO_CHAT" });
+  }, []);
+
+  const navigateToJobs = useCallback((workspaceId: string) => {
+    dispatch({ type: "NAVIGATE_TO_JOBS", payload: workspaceId });
+  }, []);
+
+  const navigateToFile = useCallback((workspaceId: string, fileName: string) => {
+    dispatch({ type: "NAVIGATE_TO_FILE", payload: { workspaceId, fileName } });
+  }, []);
+
+  const closeFile = useCallback(() => {
+    dispatch({ type: "CLOSE_FILE" });
+  }, []);
+
+  const value: AppContextType = {
+    state,
+    navigateToChat,
+    navigateToJobs,
+    navigateToFile,
+    closeFile,
+  };
+
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
+
+export const useApp = (): AppContextType => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error("useApp must be used within an AppProvider");
+  }
+  return context;
+};

client/src/context/index.ts

@@ -6,5 +6,6 @@
  * Re-exports all context providers and hooks.
  */
 
+export { AppProvider, useApp } from "./AppContext";
 export { ChatProvider, useChat } from "./ChatContext";
 export { WorkspaceProvider, useWorkspace } from "./WorkspaceContext";