🔒 fix: Agents Config/Permission Checks after Streamline Change (#8089)

* refactor: access control logic to TypeScript

* chore: Change EndpointURLs to a constant object for improved type safety

* 🐛 fix: Enhance agent access control by adding skipAgentCheck functionality

* 🐛 fix: Add endpointFileConfig prop to AttachFileMenu and update file handling logic

* 🐛 fix: Update tool handling logic to support optional groupedTools and improve null checks, add dedicated tool dialog for Assistants

* chore: Export Accordion component from UI index for improved modularity

* feat: Add ActivePanelContext for managing active panel state across components

* chore: Replace string IDs with EModelEndpoint constants for assistants and agents in useSideNavLinks

* fix: Integrate access checks for agent creation and deletion routes in actions.js

client/src/Providers/ActivePanelContext.tsx

@@ -0,0 +1,37 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+interface ActivePanelContextType {
+  active: string | undefined;
+  setActive: (id: string) => void;
+}
+
+const ActivePanelContext = createContext<ActivePanelContextType | undefined>(undefined);
+
+export function ActivePanelProvider({
+  children,
+  defaultActive,
+}: {
+  children: ReactNode;
+  defaultActive?: string;
+}) {
+  const [active, _setActive] = useState<string | undefined>(defaultActive);
+
+  const setActive = (id: string) => {
+    localStorage.setItem('side:active-panel', id);
+    _setActive(id);
+  };
+
+  return (
+    <ActivePanelContext.Provider value={{ active, setActive }}>
+      {children}
+    </ActivePanelContext.Provider>
+  );
+}
+
+export function useActivePanel() {
+  const context = useContext(ActivePanelContext);
+  if (context === undefined) {
+    throw new Error('useActivePanel must be used within an ActivePanelProvider');
+  }
+  return context;
+}

client/src/Providers/AgentPanelContext.tsx

@@ -40,41 +40,40 @@ export function AgentPanelProvider({ children }: { children: React.ReactNode })
       agent_id: agent_id || '',
     })) || [];
 
-  const groupedTools =
-    tools?.reduce(
-      (acc, tool) => {
-        if (tool.tool_id.includes(Constants.mcp_delimiter)) {
-          const [_toolName, serverName] = tool.tool_id.split(Constants.mcp_delimiter);
-          const groupKey = `${serverName.toLowerCase()}`;
-          if (!acc[groupKey]) {
-            acc[groupKey] = {
-              tool_id: groupKey,
-              metadata: {
-                name: `${serverName}`,
-                pluginKey: groupKey,
-                description: `${localize('com_ui_tool_collection_prefix')} ${serverName}`,
-                icon: tool.metadata.icon || '',
-              } as TPlugin,
-              agent_id: agent_id || '',
-              tools: [],
-            };
-          }
-          acc[groupKey].tools?.push({
-            tool_id: tool.tool_id,
-            metadata: tool.metadata,
-            agent_id: agent_id || '',
-          });
-        } else {
-          acc[tool.tool_id] = {
-            tool_id: tool.tool_id,
-            metadata: tool.metadata,
+  const groupedTools = tools?.reduce(
+    (acc, tool) => {
+      if (tool.tool_id.includes(Constants.mcp_delimiter)) {
+        const [_toolName, serverName] = tool.tool_id.split(Constants.mcp_delimiter);
+        const groupKey = `${serverName.toLowerCase()}`;
+        if (!acc[groupKey]) {
+          acc[groupKey] = {
+            tool_id: groupKey,
+            metadata: {
+              name: `${serverName}`,
+              pluginKey: groupKey,
+              description: `${localize('com_ui_tool_collection_prefix')} ${serverName}`,
+              icon: tool.metadata.icon || '',
+            } as TPlugin,
             agent_id: agent_id || '',
+            tools: [],
           };
         }
-        return acc;
-      },
-      {} as Record<string, AgentToolType & { tools?: AgentToolType[] }>,
-    ) || {};
+        acc[groupKey].tools?.push({
+          tool_id: tool.tool_id,
+          metadata: tool.metadata,
+          agent_id: agent_id || '',
+        });
+      } else {
+        acc[tool.tool_id] = {
+          tool_id: tool.tool_id,
+          metadata: tool.metadata,
+          agent_id: agent_id || '',
+        };
+      }
+      return acc;
+    },
+    {} as Record<string, AgentToolType & { tools?: AgentToolType[] }>,
+  );
 
   const value = {
     action,

client/src/Providers/index.ts

@@ -1,6 +1,7 @@
 export { default as AssistantsProvider } from './AssistantsContext';
 export { default as AgentsProvider } from './AgentsContext';
 export { default as ToastProvider } from './ToastContext';
+export * from './ActivePanelContext';
 export * from './AgentPanelContext';
 export * from './ChatContext';
 export * from './ShareContext';