🔒 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/components/SidePanel/Agents/AgentConfig.tsx

@@ -168,7 +168,7 @@ export default function AgentConfig({
   const visibleToolIds = new Set(selectedToolIds);
 
   // Check what group parent tools should be shown if any subtool is present
-  Object.entries(allTools).forEach(([toolId, toolObj]) => {
+  Object.entries(allTools ?? {}).forEach(([toolId, toolObj]) => {
     if (toolObj.tools?.length) {
       // if any subtool of this group is selected, ensure group parent tool rendered
       if (toolObj.tools.some((st) => selectedToolIds.includes(st.tool_id))) {
@@ -299,6 +299,7 @@ export default function AgentConfig({
             <div className="mb-1">
               {/* // Render all visible IDs (including groups with subtools selected) */}
               {[...visibleToolIds].map((toolId, i) => {
+                if (!allTools) return null;
                 const tool = allTools[toolId];
                 if (!tool) return null;
                 return (

client/src/components/SidePanel/Agents/AgentTool.tsx

@@ -19,7 +19,7 @@ export default function AgentTool({
   allTools,
 }: {
   tool: string;
-  allTools: Record<string, AgentToolType & { tools?: AgentToolType[] }>;
+  allTools?: Record<string, AgentToolType & { tools?: AgentToolType[] }>;
   agent_id?: string;
 }) {
   const [isHovering, setIsHovering] = useState(false);
@@ -30,8 +30,10 @@ export default function AgentTool({
   const { showToast } = useToastContext();
   const updateUserPlugins = useUpdateUserPluginsMutation();
   const { getValues, setValue } = useFormContext<AgentForm>();
+  if (!allTools) {
+    return null;
+  }
   const currentTool = allTools[tool];
-
   const getSelectedTools = () => {
     if (!currentTool?.tools) return [];
     const formTools = getValues('tools') || [];

client/src/components/SidePanel/Builder/AssistantPanel.tsx

@@ -17,9 +17,9 @@ import {
 } from '~/data-provider';
 import { cn, cardStyle, defaultTextProps, removeFocusOutlines } from '~/utils';
 import AssistantConversationStarters from './AssistantConversationStarters';
+import AssistantToolsDialog from '~/components/Tools/AssistantToolsDialog';
 import { useAssistantsMapContext, useToastContext } from '~/Providers';
 import { useSelectAssistant, useLocalize } from '~/hooks';
-import { ToolSelectDialog } from '~/components/Tools';
 import AppendDateCheckbox from './AppendDateCheckbox';
 import CapabilitiesForm from './CapabilitiesForm';
 import { SelectDropDown } from '~/components/ui';
@@ -468,11 +468,10 @@ export default function AssistantPanel({
             </button>
           </div>
         </div>
-        <ToolSelectDialog
+        <AssistantToolsDialog
+          endpoint={endpoint}
           isOpen={showToolDialog}
           setIsOpen={setShowToolDialog}
-          toolsFormKey="functions"
-          endpoint={endpoint}
         />
       </form>
     </FormProvider>

client/src/components/SidePanel/Nav.tsx

@@ -1,21 +1,15 @@
-import { useState } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import type { NavLink, NavProps } from '~/common';
-import { Accordion, AccordionItem, AccordionContent } from '~/components/ui/Accordion';
-import { TooltipAnchor, Button } from '~/components';
+import { AccordionContent, AccordionItem, TooltipAnchor, Accordion, Button } from '~/components/ui';
+import { ActivePanelProvider, useActivePanel } from '~/Providers';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
-export default function Nav({ links, isCollapsed, resize, defaultActive }: NavProps) {
+function NavContent({ links, isCollapsed, resize }: Omit<NavProps, 'defaultActive'>) {
   const localize = useLocalize();
-  const [active, _setActive] = useState<string | undefined>(defaultActive);
+  const { active, setActive } = useActivePanel();
   const getVariant = (link: NavLink) => (link.id === active ? 'default' : 'ghost');
 
-  const setActive = (id: string) => {
-    localStorage.setItem('side:active-panel', id + '');
-    _setActive(id);
-  };
-
   return (
     <div
       data-collapsed={isCollapsed}
@@ -105,3 +99,11 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
     </div>
   );
 }
+
+export default function Nav({ links, isCollapsed, resize, defaultActive }: NavProps) {
+  return (
+    <ActivePanelProvider defaultActive={defaultActive}>
+      <NavContent links={links} isCollapsed={isCollapsed} resize={resize} />
+    </ActivePanelProvider>
+  );
+}