@inkeep/agents-manage-ui 0.41.0 → 0.41.1

package/src/components/agent/sidepane/metadata/metadata-editor.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'next/navigation';
 import { useCallback } from 'react';
 import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
 import { ModelInheritanceInfo } from '@/components/projects/form/model-inheritance-info';
+import { ModelConfiguration } from '@/components/shared/model-configuration';
 import { Checkbox } from '@/components/ui/checkbox';
 import { CopyableSingleLineCode } from '@/components/ui/copyable-single-line-code';
 import { ExternalLink } from '@/components/ui/external-link';
@@ -19,7 +20,7 @@ import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
-import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
+import { agentStore, useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import { useProjectData } from '@/hooks/use-project-data';
 import { ExpandablePromptEditor } from '../../../editors/expandable-prompt-editor';
@@ -74,6 +75,11 @@ function MetadataEditor() {
     [setMetadata, markUnsaved]
   );
 
+  // Helper to get the latest models from the store to avoid stale closure race conditions
+  const getCurrentModels = useCallback(() => {
+    return agentStore.getState().metadata.models;
+  }, []);
+
   const handleIdChange = useCallback(
     (generatedId: string) => {
       updateMetadata('id', generatedId);
@@ -172,65 +178,62 @@ function MetadataEditor() {
             </div>
           }
         />
-        <div className="relative space-y-2">
-          <ModelSelector
-            value={models?.base?.model || ''}
-            inheritedValue={project?.models?.base?.model}
-            onValueChange={(value) => {
-              const newModels = {
-                ...(models || {}),
-                base: value
-                  ? {
-                      ...(models?.base || {}),
-                      model: value,
-                    }
-                  : undefined,
-              };
-              updateMetadata('models', newModels);
-            }}
-            label={
-              <div className="flex items-center gap-2">
-                Base model
-                <InheritanceIndicator
-                  {...getModelInheritanceStatus(
-                    'agent',
-                    models?.base?.model,
-                    project?.models?.base?.model
-                  )}
-                  size="sm"
-                />
-              </div>
+        <ModelConfiguration
+          value={models?.base?.model}
+          providerOptions={models?.base?.providerOptions}
+          inheritedValue={project?.models?.base?.model}
+          label={
+            <div className="flex items-center gap-2">
+              Base model
+              <InheritanceIndicator
+                {...getModelInheritanceStatus(
+                  'agent',
+                  models?.base?.model,
+                  project?.models?.base?.model
+                )}
+                size="sm"
+              />
+            </div>
+          }
+          description="Primary model for general agent responses"
+          onModelChange={(value) => {
+            const currentModels = getCurrentModels();
+            const newModels = {
+              ...(currentModels || {}),
+              base: value
+                ? {
+                    ...(currentModels?.base || {}),
+                    model: value,
+                  }
+                : undefined,
+            };
+            updateMetadata('models', newModels);
+          }}
+          onProviderOptionsChange={(value) => {
+            const currentModels = getCurrentModels();
+            // If there's no base model in the store yet, check the component's `models` prop
+            // which reflects the latest state from the selector (handles timing issues)
+            const baseModel = currentModels?.base?.model || models?.base?.model;
+            if (!baseModel) {
+              return;
             }
-          />
-          <p className="text-xs text-muted-foreground">Primary model for general agent responses</p>
-        </div>
+            const newModels = {
+              ...(currentModels || models || {}),
+              base: {
+                ...(currentModels?.base || models?.base || {}),
+                model: baseModel,
+                providerOptions: value,
+              },
+            };
+            updateMetadata('models', newModels);
+          }}
+          editorNamePrefix="agent-base"
+        />
 
         <CollapsibleSettings
           defaultOpen={!!models?.structuredOutput || !!models?.summarizer}
           title="Advanced model options"
         >
-          {/* Base Model Provider Options */}
-          {models?.base?.model && (
-            <ExpandableJsonEditor
-              name="base-provider-options"
-              label="Base model provider options"
-              onChange={(value) => {
-                updateMetadata('models', {
-                  ...(models || {}),
-                  base: {
-                    model: models.base?.model || '',
-                    providerOptions: value,
-                  },
-                });
-              }}
-              value={models.base.providerOptions || ''}
-              placeholder={`{
-    "temperature": 0.7,
-    "maxOutputTokens": 2048
-}`}
-            />
-          )}
-
           <div className="relative space-y-2">
             <ModelSelector
               value={models?.structuredOutput?.model || ''}
@@ -240,11 +243,12 @@ function MetadataEditor() {
                 project?.models?.base?.model
               }
               onValueChange={(value) => {
+                const currentModels = getCurrentModels();
                 const newModels = {
-                  ...(models || {}),
+                  ...(currentModels || {}),
                   structuredOutput: value
                     ? {
-                        ...(models?.structuredOutput || {}),
+                        ...(currentModels?.structuredOutput || {}),
                         model: value,
                       }
                     : undefined,
@@ -275,10 +279,11 @@ function MetadataEditor() {
               name="structured-provider-options"
               label="Structured output model provider options"
               onChange={(value) => {
+                const currentModels = getCurrentModels();
                 updateMetadata('models', {
-                  ...(models || {}),
+                  ...(currentModels || {}),
                   structuredOutput: {
-                    model: models.structuredOutput?.model || '',
+                    model: currentModels?.structuredOutput?.model || '',
                     providerOptions: value,
                   },
                 });
@@ -299,11 +304,12 @@ function MetadataEditor() {
                 project?.models?.base?.model
               }
               onValueChange={(value) => {
+                const currentModels = getCurrentModels();
                 const newModels = {
-                  ...(models || {}),
+                  ...(currentModels || {}),
                   summarizer: value
                     ? {
-                        ...(models?.summarizer || {}),
+                        ...(currentModels?.summarizer || {}),
                         model: value,
                       }
                     : undefined,
@@ -334,10 +340,11 @@ function MetadataEditor() {
               name="summarizer-provider-options"
               label="Summarizer model provider options"
               onChange={(value) => {
+                const currentModels = getCurrentModels();
                 updateMetadata('models', {
-                  ...(models || {}),
+                  ...(currentModels || {}),
                   summarizer: {
-                    model: models.summarizer?.model || '',
+                    model: currentModels?.summarizer?.model || '',
                     providerOptions: value,
                   },
                 });

package/src/components/agent/sidepane/nodes/model-section.tsx

@@ -1,13 +1,13 @@
 import type { AgentNodeData } from '@/components/agent/configuration/node-types';
-import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
 import { ModelInheritanceInfo } from '@/components/projects/form/model-inheritance-info';
+import { ModelConfiguration } from '@/components/shared/model-configuration';
 import {
   getModelInheritanceStatus,
   InheritanceIndicator,
 } from '@/components/ui/inheritance-indicator';
+import { createProviderOptionsHandler } from '@/lib/utils';
 import { CollapsibleSettings } from '../collapsible-settings';
 import { SectionHeader } from '../section';
-import { ModelSelector } from './model-selector';
 
 interface ModelSectionProps {
   models: AgentNodeData['models'];
@@ -37,145 +37,111 @@ export function ModelSection({
           </div>
         }
       />
-      <div className="relative space-y-2">
-        <ModelSelector
-          value={models?.base?.model || ''}
-          onValueChange={(modelValue) => {
-            updatePath('models.base.model', modelValue || undefined);
-          }}
-          inheritedValue={agentModels?.base?.model || projectModels?.base?.model}
+      <ModelConfiguration
+        value={models?.base?.model}
+        providerOptions={models?.base?.providerOptions}
+        inheritedValue={agentModels?.base?.model || projectModels?.base?.model}
+        label={
+          <div className="flex items-center gap-2">
+            Base model
+            <InheritanceIndicator
+              {...getModelInheritanceStatus(
+                'agent',
+                models?.base?.model,
+                agentModels?.base?.model,
+                projectModels?.base?.model
+              )}
+              size="sm"
+            />
+          </div>
+        }
+        description="Primary model for general sub agent responses"
+        onModelChange={(value) => updatePath('models.base.model', value || undefined)}
+        onProviderOptionsChange={createProviderOptionsHandler((options) => {
+          console.log('model-section updatePath about to be called with options:', options);
+          updatePath('models.base.providerOptions', options);
+          console.log('model-section updatePath completed');
+        })}
+        editorNamePrefix="base"
+      />
+
+      <CollapsibleSettings defaultOpen={!!hasAdvancedOptions} title="Advanced Model Options">
+        <ModelConfiguration
+          value={models?.structuredOutput?.model}
+          providerOptions={models?.structuredOutput?.providerOptions}
+          inheritedValue={
+            agentModels?.structuredOutput?.model ||
+            projectModels?.structuredOutput?.model ||
+            models?.base?.model ||
+            agentModels?.base?.model ||
+            projectModels?.base?.model
+          }
           label={
             <div className="flex items-center gap-2">
-              Base model
+              Structured output model
               <InheritanceIndicator
                 {...getModelInheritanceStatus(
                   'agent',
-                  models?.base?.model,
-                  agentModels?.base?.model,
-                  projectModels?.base?.model
+                  models?.structuredOutput?.model,
+                  agentModels?.structuredOutput?.model,
+                  projectModels?.structuredOutput?.model
                 )}
                 size="sm"
               />
             </div>
           }
+          description="The model used for structured output and components (defaults to base model)"
+          onModelChange={(value) => updatePath('models.structuredOutput.model', value || undefined)}
+          onProviderOptionsChange={createProviderOptionsHandler((options) =>
+            updatePath('models.structuredOutput.providerOptions', options)
+          )}
+          editorNamePrefix="structured"
         />
-        <p className="text-xs text-muted-foreground">
-          Primary model for general sub agent responses
-        </p>
-      </div>
 
-      <CollapsibleSettings defaultOpen={!!hasAdvancedOptions} title="Advanced Model Options">
-        {/* Base Model Provider Options */}
-        {models?.base?.model && (
-          <ExpandableJsonEditor
-            name="base-provider-options"
-            label="Base model provider options"
-            onChange={(value) => {
-              updatePath('models.base.providerOptions', value);
-            }}
-            value={models?.base?.providerOptions || ''}
-            placeholder={`{
-  "temperature": 0.7,
-  "maxOutputTokens": 2048
-}`}
-          />
-        )}
-        <div className="relative space-y-2">
-          <ModelSelector
-            value={models?.structuredOutput?.model || ''}
-            onValueChange={(modelValue) => {
-              updatePath('models.structuredOutput.model', modelValue || undefined);
-            }}
-            inheritedValue={
-              agentModels?.structuredOutput?.model ||
-              projectModels?.structuredOutput?.model ||
-              models?.base?.model ||
-              agentModels?.base?.model ||
-              projectModels?.base?.model
-            }
-            label={
-              <div className="flex items-center gap-2">
-                Structured output model
-                <InheritanceIndicator
-                  {...getModelInheritanceStatus(
-                    'agent',
-                    models?.structuredOutput?.model,
-                    agentModels?.structuredOutput?.model,
-                    projectModels?.structuredOutput?.model
-                  )}
-                  size="sm"
-                />
-              </div>
-            }
-          />
-          <p className="text-xs text-muted-foreground">
-            The model used for structured output and components (defaults to base model)
-          </p>
-        </div>
-
-        {/* Structured Output Model Provider Options */}
-        {models?.structuredOutput?.model && (
-          <ExpandableJsonEditor
-            name="structured-provider-options"
-            label="Structured output model provider options"
-            onChange={(value) => {
-              updatePath('models.structuredOutput.providerOptions', value);
-            }}
-            value={models?.structuredOutput?.providerOptions || ''}
-            placeholder={`{
-  "temperature": 0.1,
+        <ModelConfiguration
+          value={models?.summarizer?.model}
+          providerOptions={models?.summarizer?.providerOptions}
+          inheritedValue={
+            agentModels?.summarizer?.model ||
+            projectModels?.summarizer?.model ||
+            models?.base?.model ||
+            agentModels?.base?.model ||
+            projectModels?.base?.model
+          }
+          label={
+            <div className="flex items-center gap-2">
+              Summarizer model
+              <InheritanceIndicator
+                {...getModelInheritanceStatus(
+                  'agent',
+                  models?.summarizer?.model,
+                  agentModels?.summarizer?.model,
+                  projectModels?.summarizer?.model
+                )}
+                size="sm"
+              />
+            </div>
+          }
+          description="The model used for summarization tasks (defaults to base model)"
+          onModelChange={(value) => updatePath('models.summarizer.model', value || undefined)}
+          onProviderOptionsChange={createProviderOptionsHandler((options) =>
+            updatePath('models.summarizer.providerOptions', options)
+          )}
+          editorNamePrefix="summarizer"
+          getJsonPlaceholder={(model) => {
+            if (model?.startsWith('azure/')) {
+              return `{
+  "resourceName": "your-azure-resource",
+  "temperature": 0.3,
   "maxOutputTokens": 1024
-}`}
-          />
-        )}
-
-        <div className="relative space-y-2">
-          <ModelSelector
-            value={models?.summarizer?.model || ''}
-            onValueChange={(modelValue) => {
-              updatePath('models.summarizer.model', modelValue || undefined);
-            }}
-            inheritedValue={
-              agentModels?.summarizer?.model ||
-              projectModels?.summarizer?.model ||
-              models?.base?.model ||
-              agentModels?.base?.model ||
-              projectModels?.base?.model
+}`;
             }
-            label={
-              <div className="flex items-center gap-2">
-                Summarizer model
-                <InheritanceIndicator
-                  {...getModelInheritanceStatus(
-                    'agent',
-                    models?.summarizer?.model,
-                    agentModels?.summarizer?.model,
-                    projectModels?.summarizer?.model
-                  )}
-                  size="sm"
-                />
-              </div>
-            }
-          />
-          <p className="text-xs text-muted-foreground">
-            The model used for summarization tasks (defaults to base model)
-          </p>
-        </div>
-        {/* Summarizer Model Provider Options */}
-        {models?.summarizer?.model && (
-          <ExpandableJsonEditor
-            name="summarizer-provider-options"
-            label="Summarizer model provider options"
-            onChange={(value) => {
-              updatePath('models.summarizer.providerOptions', value);
-            }}
-            value={models?.summarizer?.providerOptions || ''}
-            placeholder={`{
+            return `{
   "temperature": 0.3,
   "maxOutputTokens": 1024
-}`}
-          />
-        )}
+}`;
+          }}
+        />
       </CollapsibleSettings>
     </div>
   );

package/src/components/agent/sidepane/nodes/model-selector.tsx

@@ -22,6 +22,7 @@ interface ModelSelectorProps {
   label?: React.ReactNode;
   value?: string;
   onValueChange?: (value: string) => void;
+  onProviderOptionsChange?: (options: Record<string, any>) => void;
   placeholder?: string;
   inheritedValue?: string;
   isRequired?: boolean;
@@ -33,6 +34,7 @@ export function ModelSelector({
   tooltip,
   value,
   onValueChange,
+  onProviderOptionsChange,
   placeholder = 'Select a model...',
   inheritedValue,
   isRequired = false,
@@ -40,8 +42,11 @@ export function ModelSelector({
 }: ModelSelectorProps) {
   const [open, setOpen] = useState(false);
   const [showCustomInput, setShowCustomInput] = useState<
-    'openrouter' | 'gateway' | 'nim' | 'custom' | null
+    'openrouter' | 'gateway' | 'nim' | 'custom' | 'azure' | null
   >(null);
+  const [azureDeploymentName, setAzureDeploymentName] = useState('');
+  const [azureResourceName, setAzureResourceName] = useState('');
+  const [azureBaseURL, setAzureBaseURL] = useState('');
   const [customModelInput, setCustomModelInput] = useState('');
 
   const selectedModel = useMemo(() => {
@@ -67,6 +72,10 @@ export function ModelSelector({
         const modelName = value.replace('custom/', '');
         return { value, label: modelName, prefix: 'custom/' };
       }
+      if (value.startsWith('azure/')) {
+        const modelName = value.replace('azure/', '');
+        return { value, label: modelName, prefix: 'azure/' };
+      }
       return { value, label: `${value} (custom)` };
     }
     return null;
@@ -236,6 +245,20 @@ export function ModelSelector({
                     >
                       NVIDIA NIM ...
                     </CommandItem>
+                    <CommandItem
+                      className="flex items-center justify-between cursor-pointer text-foreground"
+                      value="__azure__"
+                      onSelect={() => {
+                        setShowCustomInput('azure');
+                        setOpen(false);
+                        setCustomModelInput('');
+                        setAzureDeploymentName('');
+                        setAzureResourceName('');
+                        setAzureBaseURL('');
+                      }}
+                    >
+                      Azure ...
+                    </CommandItem>
                   </CommandGroup>
                   {/* Predefined models */}
                   {Object.entries(modelOptions).map(([provider, models]) => (
@@ -267,7 +290,7 @@ export function ModelSelector({
               </Command>
             </PopoverContent>
           </Popover>
-          {showCustomInput && (
+          {showCustomInput && showCustomInput !== 'azure' && (
             <div className="absolute top-full left-0 right-0 mt-1 p-3 bg-background border rounded-md shadow-lg z-20">
               <div className="space-y-2">
                 <div className="text-sm font-medium">
@@ -359,6 +382,117 @@ export function ModelSelector({
               </div>
             </div>
           )}
+          {showCustomInput === 'azure' && (
+            <div className="absolute top-full left-0 right-0 mt-1 p-3 bg-background border rounded-md shadow-lg z-20">
+              <div className="space-y-3">
+                <div className="text-sm font-medium">Azure Configuration</div>
+                <div className="text-xs text-muted-foreground">
+                  Configure your Azure deployment and connection details
+                </div>
+
+                <div>
+                  <label htmlFor="azure-deployment-name" className="block text-xs font-medium mb-1">
+                    Deployment Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    id="azure-deployment-name"
+                    className="w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="my-gpt-4o-deployment"
+                    value={azureDeploymentName}
+                    onChange={(e) => setAzureDeploymentName(e.target.value)}
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Your Azure model deployment name (required)
+                  </p>
+                </div>
+
+                <div className="border-t pt-3">
+                  <p className="text-xs font-medium text-muted-foreground mb-2">
+                    Choose one connection method <span className="text-red-500">*</span>
+                  </p>
+
+                  <div>
+                    <label htmlFor="azure-resource-name" className="block text-xs font-medium mb-1">
+                      Azure Resource Name
+                    </label>
+                    <input
+                      id="azure-resource-name"
+                      className="w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="your-azure-resource"
+                      value={azureResourceName}
+                      onChange={(e) => setAzureResourceName(e.target.value)}
+                    />
+                  </div>
+
+                  <div className="text-center text-xs text-muted-foreground my-2">— OR —</div>
+
+                  <div>
+                    <label htmlFor="azure-base-url" className="block text-xs font-medium mb-1">
+                      Custom Base URL
+                    </label>
+                    <input
+                      id="azure-base-url"
+                      className="w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="https://your-endpoint.com"
+                      value={azureBaseURL}
+                      onChange={(e) => setAzureBaseURL(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div className="text-xs text-muted-foreground">
+                  Set <code>AZURE_API_KEY</code> environment variable
+                </div>
+
+                <div className="flex gap-2 items-center">
+                  <Button
+                    size="sm"
+                    onClick={() => {
+                      if (
+                        azureDeploymentName.trim() &&
+                        (azureResourceName.trim() || azureBaseURL.trim())
+                      ) {
+                        // Set the Azure model FIRST so the store has it
+                        onValueChange?.(`azure/${azureDeploymentName.trim()}`);
+
+                        // Then set the provider options
+                        const providerOptions: Record<string, any> = {};
+                        if (azureResourceName.trim()) {
+                          providerOptions.resourceName = azureResourceName.trim();
+                        } else if (azureBaseURL.trim()) {
+                          providerOptions.baseURL = azureBaseURL.trim();
+                        }
+                        onProviderOptionsChange?.(providerOptions);
+
+                        setShowCustomInput(null);
+                        setAzureDeploymentName('');
+                        setAzureResourceName('');
+                        setAzureBaseURL('');
+                      }
+                    }}
+                    disabled={
+                      !azureDeploymentName.trim() ||
+                      (!azureResourceName.trim() && !azureBaseURL.trim())
+                    }
+                  >
+                    Configure
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      setShowCustomInput(null);
+                      setAzureDeploymentName('');
+                      setAzureResourceName('');
+                      setAzureBaseURL('');
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
           {canClear && (
             <div
               className={cn(