fix extensions page

Author: Josh-XT

app/settings/abilities/page.tsx

@@ -10,7 +10,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import MarkdownBlock from '@/components/conversation/Message/MarkdownBlock';
-import { useCompany } from '@/components/interactive/useUser';
+import { useCompany, CompanyWithExtensions } from '@/components/interactive/useUser';
 import { Input } from '@/components/ui/input';
 import { SidebarPage } from '@/components/layout/SidebarPage';
 import { useToast } from '@/components/layout/toast';

app/settings/extensions/page.tsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { getCookie } from 'cookies-next';
 import { useSearchParams } from 'next/navigation';
 import { useAgent } from '@/components/interactive/useAgent';
-import { useCompany } from '@/components/interactive/useUser';
+import { useCompany, CompanyWithExtensions } from '@/components/interactive/useUser';
 import { useEffect, useState } from 'react';
 import OAuth2Login from 'react-simple-oauth2-login';
 import { providers as oAuth2Providers, loadProviders as loadOAuthProviders } from '@/components/auth/OAuth';

components/interactive/useAgent.ts

@@ -28,6 +28,7 @@ export function useAgents(): SWRResponse<Agent[]> {
         company.agents.map((agent) => ({
           ...agent,
           companyName: company.name,
+          settings: [], // Add empty settings array to match Agent type
         })),
       ) || [],
     { fallbackData: [] },
@@ -45,6 +46,7 @@ export function useAgent(
   agent: Agent | null;
   commands: string[];
   settings: any[];
+  extensions: any[];
 }> {
   const getDefaultAgent = () => {
     const primaryCompany = companies.find((c) => c.primary);
@@ -67,18 +69,18 @@ export function useAgent(
   if (!searchName && companies?.length) {
     foundEarly = getDefaultAgent();
   }
-  const swrHook = useSWR<{ agent: Agent | null; commands: string[]; settings: any[] }>(
+  const swrHook = useSWR<{ agent: Agent | null; commands: string[]; settings: any[]; extensions: any[] }>(
     [`/agent?name=${searchName}`, companies, withSettings],
-    async (): Promise<{ agent: Agent | null; commands: string[]; settings: any[] }> => {
+    async (): Promise<{ agent: Agent | null; commands: string[]; settings: any[]; extensions: any[] }> => {
       try {
         if (withSettings) {
           const client = createGraphQLClient();
           const query = AgentSchema.toGQL('query', 'GetAgent', { name: searchName });
           const response = await client.request<{ agent: Agent }>(query, { name: searchName });
           const agent = AgentSchema.parse(response.agent);
-          return { agent, commands: [], settings: [] };
+          return { agent, commands: [], settings: [], extensions: [] };
         } else {
-          const toReturn = { agent: foundEarly, commands: [], settings: [] };
+          const toReturn = { agent: foundEarly, commands: [], settings: [], extensions: [] };
           if (companies?.length && !toReturn.agent) {
             for (const company of companies) {
               const agent = company.agents.find((a) => a.name === searchName);
@@ -91,7 +93,7 @@ export function useAgent(
             toReturn.agent = getDefaultAgent();
           }
           if (toReturn.agent) {
-            toReturn.settings = (
+            toReturn.extensions = (
               await axios.get(`${process.env.NEXT_PUBLIC_AGIXT_SERVER}/api/agent/${toReturn.agent.name}/extensions`, {
                 headers: {
                   Authorization: getCookie('jwt'),
@@ -105,10 +107,10 @@ export function useAgent(
         }
       } catch (error) {
         console.error('Error fetching agent:', error);
-        return { agent: null, commands: [], settings: [] };
+        return { agent: null, commands: [], settings: [], extensions: [] };
       }
     },
-    { fallbackData: { agent: null, commands: [], settings: [] } },
+    { fallbackData: { agent: null, commands: [], settings: [], extensions: [] } },
   );
   const originalMutate = swrHook.mutate;
   swrHook.mutate = chainMutations(companiesHook, originalMutate);

components/interactive/useUser.ts

@@ -24,6 +24,11 @@ export const CompanySchema = z.object({
 
 export type Company = z.infer<typeof CompanySchema>;
 
+// Extended Company type that includes dynamically loaded extensions
+export type CompanyWithExtensions = Company & {
+  extensions?: any[];
+};
+
 export function useCompanies(): SWRResponse<Company[]> {
   const userHook = useUser();
   const { data: user } = userHook;
@@ -36,12 +41,12 @@ export function useCompanies(): SWRResponse<Company[]> {
   return swrHook;
 }
 
-export function useCompany(id?: string): SWRResponse<Company | null> {
+export function useCompany(id?: string): SWRResponse<CompanyWithExtensions | null> {
   const companiesHook = useCompanies();
   const { data: companies } = companiesHook;
-  const swrHook = useSWR<Company | null>(
+  const swrHook = useSWR<CompanyWithExtensions | null>(
     [`/company?id=${id}`, companies, getCookie('jwt')],
-    async (): Promise<Company | null> => {
+    async (): Promise<CompanyWithExtensions | null> => {
       if (!getCookie('jwt')) return null;
       try {
         if (id) {
@@ -52,7 +57,8 @@ export function useCompany(id?: string): SWRResponse<Company | null> {
             companies?.find((c) => (agentName ? c.agents.some((a) => a.name === agentName) : c.primary)) || null;
           if (!targetCompany) return null;
           setCookie('agixt-company', targetCompany.id);
-          targetCompany.extensions = (
+          const extendedCompany = targetCompany as CompanyWithExtensions;
+          extendedCompany.extensions = (
             await axios.get(
               `${process.env.NEXT_PUBLIC_AGIXT_SERVER}/v1/companies/${targetCompany.id}/extensions`,
 
@@ -63,7 +69,7 @@ export function useCompany(id?: string): SWRResponse<Company | null> {
               },
             )
           ).data.extensions;
-          return targetCompany;
+          return extendedCompany;
         }
       } catch (error) {
         console.error('Error fetching company:', error);