@inkeep/agents-manage-ui 0.33.1 → 0.34.0

package/src/features/agent/state/use-monaco-store.ts

@@ -1,16 +1,24 @@
 import { shikiToMonaco } from '@shikijs/monaco';
 import type * as Monaco from 'monaco-editor';
 import { createHighlighter, type HighlighterGeneric } from 'shiki';
-import { create } from 'zustand';
+import { create, type StateCreator } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
 import { MONACO_THEME_NAME, TEMPLATE_LANGUAGE, VARIABLE_TOKEN } from '@/constants/theme';
 import monacoCompatibleSchema from '@/lib/monaco-editor/dynamic-ref-compatible-json-schema.json';
 
+const SUPPORTED_LANGUAGES = ['javascript', 'typescript', 'json'] as const;
+const SUPPORTED_THEMES = [MONACO_THEME_NAME.light, MONACO_THEME_NAME.dark] as const;
+
+type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+type SupportedTheme = (typeof SUPPORTED_THEMES)[number];
+
+type ShikiHighlighter = HighlighterGeneric<SupportedLanguage, SupportedTheme>;
+
 interface MonacoStateData {
   monaco: typeof Monaco | null;
   variableSuggestions: string[];
-  highlighter: HighlighterGeneric<any, any> | null;
+  highlighter: ShikiHighlighter | null;
 }
 
 interface MonacoActions {
@@ -33,123 +41,134 @@ const initialMonacoState: MonacoStateData = {
   highlighter: null,
 };
 
-export const monacoStore = create<MonacoState>()(
-  devtools((set, get) => ({
-    ...initialMonacoState,
-    // Separate "namespace" for actions
-    actions: {
-      setVariableSuggestions(variableSuggestions) {
-        set({ variableSuggestions });
-      },
-      setMonacoTheme(isDark) {
-        const monaco = get().monaco;
-        const monacoTheme = isDark ? MONACO_THEME_NAME.dark : MONACO_THEME_NAME.light;
-        monaco?.editor.setTheme(monacoTheme);
-      },
-      async setupHighlighter(isDark) {
-        const { highlighter: prevHighlighter, monaco, actions } = get();
-        const highlighter =
-          prevHighlighter ??
-          (await createHighlighter({
-            themes: [MONACO_THEME_NAME.light, MONACO_THEME_NAME.dark],
-            langs: ['javascript', 'typescript', 'json'],
-          }));
-        // Create the highlighter
-        // Register the themes from Shiki, and provide syntax highlighting for Monaco.
-        shikiToMonaco(highlighter, monaco);
-        actions.setMonacoTheme(isDark);
+let highlighterPromise: Promise<ShikiHighlighter> | null = null;
+
+// Fixes console warning:
+// [Shiki] 10 instances have been created. Shiki is supposed to be used as a singleton, consider refactoring your code
+// to cache your highlighter instance; Or call `highlighter.dispose()` to release unused instances.
+const getHighlighter = async (): Promise<ShikiHighlighter> => {
+  highlighterPromise ??= createHighlighter({
+    themes: [...SUPPORTED_THEMES],
+    langs: [...SUPPORTED_LANGUAGES],
+  });
+  return await highlighterPromise;
+};
+
+const monacoState: StateCreator<MonacoState> = (set, get) => ({
+  ...initialMonacoState,
+  // Separate "namespace" for actions
+  actions: {
+    setVariableSuggestions(variableSuggestions) {
+      set({ variableSuggestions });
+    },
+    setMonacoTheme(isDark) {
+      const monaco = get().monaco;
+      const monacoTheme = isDark ? MONACO_THEME_NAME.dark : MONACO_THEME_NAME.light;
+      monaco?.editor.setTheme(monacoTheme);
+    },
+    async setupHighlighter(isDark) {
+      const { highlighter: prevHighlighter, monaco, actions } = get();
+      const highlighter = prevHighlighter ?? (await getHighlighter());
+      // Create the highlighter
+      // Register the themes from Shiki, and provide syntax highlighting for Monaco.
+      shikiToMonaco(highlighter, monaco);
+      actions.setMonacoTheme(isDark);
+      if (!prevHighlighter) {
         set({ highlighter });
-      },
-      async setMonaco() {
-        const monaco = await import('monaco-editor');
-        // for cypress
-        window.monaco = monaco;
-        set({ monaco });
-        monaco.languages.register({ id: TEMPLATE_LANGUAGE });
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-          // Fixes when `$schema` is `https://json-schema.org/draft/2020-12/schema`
-          // The schema uses meta-schema features ($dynamicRef) that are not yet supported by the validator
-          schemas: [
-            {
-              // Configure JSON language service with Monaco-compatible schema
-              uri: 'https://json-schema.org/draft/2020-12/schema',
-              fileMatch: ['json-schema-*.json'],
-              schema: monacoCompatibleSchema,
-            },
-          ],
-          enableSchemaRequest: true,
-        });
-        return [
-          // Define tokens for template variables
-          monaco.languages.setMonarchTokensProvider(TEMPLATE_LANGUAGE, {
-            tokenizer: {
-              root: [[/\{\{([^}]+)}}/, VARIABLE_TOKEN]],
-            },
-          }),
-          monaco.languages.registerCompletionItemProvider(TEMPLATE_LANGUAGE, {
-            triggerCharacters: ['{'],
-            provideCompletionItems(model, position) {
-              const { variableSuggestions } = get();
-
-              const textUntilPosition = model.getValueInRange({
-                startLineNumber: 1,
-                startColumn: 1,
-                endLineNumber: position.lineNumber,
-                endColumn: position.column,
-              });
-
-              // Check if we're inside a template variable (after {)
-              const match = textUntilPosition.match(/\{([^}]*)$/);
-              if (!match) {
-                console.log('No template variable match found');
-                return { suggestions: [] };
-              }
-
-              const query = match[1].toLowerCase();
-              const filteredSuggestions = variableSuggestions.filter((suggestion) =>
-                suggestion.toLowerCase().includes(query)
-              );
-
-              const word = model.getWordUntilPosition(position);
-              const range = new monaco.Range(
-                position.lineNumber,
-                word.startColumn,
-                position.lineNumber,
-                word.endColumn
-              );
-
-              const completionItems: Omit<
-                Monaco.languages.CompletionItem,
-                'kind' | 'range' | 'insertText'
-              >[] = [
-                // Add context suggestions
-                ...filteredSuggestions.map((label) => ({
-                  label,
-                  detail: 'Context variable',
-                  sortText: '0',
-                })),
-                // Add environment variables
-                {
-                  label: '$env.',
-                  detail: 'Environment variable',
-                  sortText: '1',
-                },
-              ];
-              return {
-                suggestions: completionItems.map((item) => ({
-                  kind: monaco.languages.CompletionItemKind.Module,
-                  range,
-                  insertText: `{${item.label}}}`,
-                  ...item,
-                })),
-              };
-            },
-          }),
-        ];
-      },
+        highlighterPromise = null;
+      }
     },
-  }))
-);
+    async setMonaco() {
+      const monaco = await import('monaco-editor');
+      // for cypress
+      window.monaco = monaco;
+      set({ monaco });
+      monaco.languages.register({ id: TEMPLATE_LANGUAGE });
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        // Fixes when `$schema` is `https://json-schema.org/draft/2020-12/schema`
+        // The schema uses meta-schema features ($dynamicRef) that are not yet supported by the validator
+        schemas: [
+          {
+            // Configure JSON language service with Monaco-compatible schema
+            uri: 'https://json-schema.org/draft/2020-12/schema',
+            fileMatch: ['json-schema-*.json'],
+            schema: monacoCompatibleSchema,
+          },
+        ],
+        enableSchemaRequest: true,
+      });
+      return [
+        // Define tokens for template variables
+        monaco.languages.setMonarchTokensProvider(TEMPLATE_LANGUAGE, {
+          tokenizer: {
+            root: [[/\{\{([^}]+)}}/, VARIABLE_TOKEN]],
+          },
+        }),
+        monaco.languages.registerCompletionItemProvider(TEMPLATE_LANGUAGE, {
+          triggerCharacters: ['{'],
+          provideCompletionItems(model, position) {
+            const { variableSuggestions } = get();
+
+            const textUntilPosition = model.getValueInRange({
+              startLineNumber: 1,
+              startColumn: 1,
+              endLineNumber: position.lineNumber,
+              endColumn: position.column,
+            });
+
+            // Check if we're inside a template variable (after {)
+            const match = textUntilPosition.match(/\{([^}]*)$/);
+            if (!match) {
+              console.log('No template variable match found');
+              return { suggestions: [] };
+            }
+
+            const query = match[1].toLowerCase();
+            const filteredSuggestions = variableSuggestions.filter((suggestion) =>
+              suggestion.toLowerCase().includes(query)
+            );
+
+            const word = model.getWordUntilPosition(position);
+            const range = new monaco.Range(
+              position.lineNumber,
+              word.startColumn,
+              position.lineNumber,
+              word.endColumn
+            );
+
+            const completionItems: Omit<
+              Monaco.languages.CompletionItem,
+              'kind' | 'range' | 'insertText'
+            >[] = [
+              // Add context suggestions
+              ...filteredSuggestions.map((label) => ({
+                label,
+                detail: 'Context variable',
+                sortText: '0',
+              })),
+              // Add environment variables
+              {
+                label: '$env.',
+                detail: 'Environment variable',
+                sortText: '1',
+              },
+            ];
+            return {
+              suggestions: completionItems.map((item) => ({
+                kind: monaco.languages.CompletionItemKind.Module,
+                range,
+                insertText: `{${item.label}}}`,
+                ...item,
+              })),
+            };
+          },
+        }),
+      ];
+    },
+  },
+});
+
+export const monacoStore = create<MonacoState>()(devtools(monacoState));
 
 /**
  * Actions are functions that update values in your store.

package/src/hooks/use-did-update.ts

@@ -0,0 +1,25 @@
+import { type DependencyList, type EffectCallback, useEffect, useRef } from 'react';
+
+/**
+ * Copied from @mantine/hooks
+ * @see https://github.com/mantinedev/mantine/blob/master/packages/@mantine/hooks/src/use-did-update/use-did-update.ts
+ */
+export function useDidUpdate(fn: EffectCallback, dependencies?: DependencyList) {
+  const mounted = useRef(false);
+
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (mounted.current) {
+      return fn();
+    }
+
+    mounted.current = true;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: ignore
+  }, dependencies);
+}

package/src/hooks/use-project-data.ts

@@ -6,8 +6,7 @@ import { fetchProjectAction } from '@/lib/actions/projects';
 import type { Project } from '@/lib/types/project';
 
 export function useProjectData() {
-  const params = useParams();
-  const { tenantId, projectId } = params;
+  const { tenantId, projectId } = useParams();
   const [project, setProject] = useState<Project | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);

package/src/lib/ai/model-factory.ts

@@ -7,9 +7,19 @@ import { anthropic, createAnthropic } from '@ai-sdk/anthropic';
 import { createGateway, gateway } from '@ai-sdk/gateway';
 import { createGoogleGenerativeAI, google } from '@ai-sdk/google';
 import { createOpenAI, openai } from '@ai-sdk/openai';
+import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
 import { createOpenRouter, openrouter } from '@openrouter/ai-sdk-provider';
 import type { LanguageModel } from 'ai';
 
+// NVIDIA NIM default provider instance
+const nimDefault = createOpenAICompatible({
+  name: 'nim',
+  baseURL: 'https://integrate.api.nvidia.com/v1',
+  headers: {
+    Authorization: `Bearer ${process.env.NIM_API_KEY}`,
+  },
+});
+
 export interface ModelSettings {
   model?: string;
   providerOptions?: Record<string, unknown>;
@@ -35,6 +45,38 @@ export class ModelFactory {
         return createOpenRouter(config);
       case 'gateway':
         return createGateway(config);
+      case 'nim': {
+        // Merge custom config with default NIM configuration
+        const nimConfig = {
+          name: 'nim',
+          baseURL: 'https://integrate.api.nvidia.com/v1',
+          headers: {
+            Authorization: `Bearer ${process.env.NIM_API_KEY}`,
+          },
+          ...config,
+        };
+        return createOpenAICompatible(nimConfig);
+      }
+      case 'custom': {
+        // Custom OpenAI-compatible provider - requires baseURL in config
+        if (!config.baseURL && !config.baseUrl) {
+          throw new Error(
+            'Custom provider requires baseURL. Please provide it in providerOptions.baseURL or providerOptions.baseUrl'
+          );
+        }
+        const customConfig = {
+          name: 'custom',
+          baseURL: (config.baseURL || config.baseUrl) as string,
+          headers: {
+            ...(process.env.CUSTOM_LLM_API_KEY && {
+              Authorization: `Bearer ${process.env.CUSTOM_LLM_API_KEY}`,
+            }),
+            ...((config as any).headers || {}),
+          },
+          ...config,
+        };
+        return createOpenAICompatible(customConfig);
+      }
       default:
         throw new Error(`Unsupported provider: ${provider}`);
     }
@@ -57,10 +99,22 @@ export class ModelFactory {
       providerConfig.baseURL = providerOptions.baseUrl || providerOptions.baseURL;
     }
 
+    if (providerOptions.headers) {
+      providerConfig.headers = providerOptions.headers;
+    }
+
     if (providerOptions.gateway) {
       Object.assign(providerConfig, providerOptions.gateway);
     }
 
+    if (providerOptions.nim) {
+      Object.assign(providerConfig, providerOptions.nim);
+    }
+
+    if (providerOptions.custom) {
+      Object.assign(providerConfig, providerOptions.custom);
+    }
+
     return providerConfig;
   }
 
@@ -107,11 +161,17 @@ export class ModelFactory {
         return openrouter(modelName);
       case 'gateway':
         return gateway(modelName);
+      case 'nim':
+        return nimDefault(modelName);
+      case 'custom':
+        throw new Error(
+          'Custom provider requires configuration. Please provide baseURL in providerOptions.custom.baseURL or providerOptions.baseURL'
+        );
       default:
         throw new Error(
           `Unsupported provider: ${provider}. ` +
             `Supported providers are: ${ModelFactory.BUILT_IN_PROVIDERS.join(', ')}. ` +
-            `To access other models, use OpenRouter (openrouter/model-id) or Vercel AI Gateway (gateway/model-id).`
+            `To access other models, use OpenRouter (openrouter/model-id), Vercel AI Gateway (gateway/model-id), NVIDIA NIM (nim/model-id), or Custom OpenAI-compatible (custom/model-id).`
         );
     }
   }
@@ -125,6 +185,8 @@ export class ModelFactory {
     'google',
     'openrouter',
     'gateway',
+    'nim',
+    'custom',
   ] as const;
 
   /**
@@ -141,7 +203,7 @@ export class ModelFactory {
         throw new Error(
           `Unsupported provider: ${normalizedProvider}. ` +
             `Supported providers are: ${ModelFactory.BUILT_IN_PROVIDERS.join(', ')}. ` +
-            `To access other models, use OpenRouter (openrouter/model-id) or Vercel AI Gateway (gateway/model-id).`
+            `To access other models, use OpenRouter (openrouter/model-id), Vercel AI Gateway (gateway/model-id), NVIDIA NIM (nim/model-id), or Custom OpenAI-compatible (custom/model-id).`
         );
       }
 
@@ -163,7 +225,7 @@ export class ModelFactory {
       return {};
     }
 
-    const excludedKeys = ['apiKey', 'baseURL', 'baseUrl', 'maxDuration'];
+    const excludedKeys = ['apiKey', 'baseURL', 'baseUrl', 'maxDuration', 'headers', 'gateway', 'nim', 'custom'];
 
     const params: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(providerOptions)) {

package/src/lib/utils/throttle.ts

@@ -0,0 +1,13 @@
+/**
+ * Throttle ensures a function runs at most once every X milliseconds, no matter how many times the event fires.
+ */
+export function throttle<F extends (...args: any[]) => any>(delay: number, fn: F) {
+  let last = 0;
+  return ((...args: any[]) => {
+    const now = Date.now();
+    if (now - last >= delay) {
+      fn(...args);
+      last = now;
+    }
+  }) as F;
+}