@inkeep/agents-manage-ui 0.8.2 → 0.8.4

package/src/components/graph/sidepane/nodes/credential-selector.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { ChevronsUpDown } from 'lucide-react';
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Credential } from '@/lib/api/credentials';
+
+// Header component - shows label and status
+interface CredentialHeaderProps {
+  label: string;
+}
+
+function CredentialHeader({ label }: CredentialHeaderProps) {
+  return (
+    <div className="flex gap-2">
+      <Label>{label}</Label>
+    </div>
+  );
+}
+
+// Dropdown for selecting credentials
+interface CredentialDropdownProps {
+  selectedCredentialId: string | null;
+  onSelect: (credentialId: string | null) => void;
+  availableCredentials: Credential[];
+  placeholder?: string;
+}
+
+function CredentialDropdown({
+  selectedCredentialId,
+  onSelect,
+  availableCredentials,
+  placeholder = 'Select credential...',
+}: CredentialDropdownProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex w-full">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between bg-transparent text-gray-700"
+          >
+            {selectedCredentialId === null ? (
+              <div className="text-muted-foreground">No Authentication</div>
+            ) : selectedCredentialId ? (
+              <div className="flex items-center gap-2">
+                <span className="font-medium">
+                  {availableCredentials.find((c) => c.id === selectedCredentialId)?.id ||
+                    selectedCredentialId}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  (
+                  {availableCredentials.find((c) => c.id === selectedCredentialId)?.type ||
+                    'Unknown'}
+                  )
+                </span>
+              </div>
+            ) : (
+              <div className="text-muted-foreground">{placeholder}</div>
+            )}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+          <Command>
+            <CommandInput placeholder="Search credentials..." />
+            <CommandList>
+              <CommandEmpty>No credentials found.</CommandEmpty>
+              <CommandGroup>
+                {/* No Authentication option */}
+                <CommandItem
+                  value=""
+                  onSelect={() => {
+                    onSelect(null);
+                    setOpen(false);
+                  }}
+                  className="cursor-pointer"
+                >
+                  <div className="flex items-center justify-between w-full">
+                    <div>
+                      <div className="font-medium">No Authentication</div>
+                      <div className="text-xs text-muted-foreground">Unsecured connection</div>
+                    </div>
+                    {selectedCredentialId === null && (
+                      <Badge variant="success" className="text-[10px]">
+                        Selected
+                      </Badge>
+                    )}
+                  </div>
+                </CommandItem>
+
+                {/* Available credentials */}
+                {availableCredentials.map((credential) => (
+                  <CommandItem
+                    key={credential.id}
+                    value={credential.id}
+                    onSelect={() => {
+                      onSelect(credential.id);
+                      setOpen(false);
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <div className="flex items-center justify-between w-full">
+                      <div>
+                        <div className="font-medium">{credential.id}</div>
+                        <div className="text-xs text-muted-foreground">{credential.type}</div>
+                      </div>
+                      {selectedCredentialId === credential.id && (
+                        <Badge variant="success" className="text-[10px]">
+                          Selected
+                        </Badge>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+// Main selector component
+interface CredentialSelectorProps {
+  label?: string;
+  value?: string | null;
+  onValueChange?: (value: string | null) => void;
+  placeholder?: string;
+  credentialLookup: Record<string, Credential>;
+}
+
+export function CredentialSelector({
+  label = 'Credential',
+  value,
+  credentialLookup,
+  onValueChange,
+  placeholder = 'Select credential...',
+}: CredentialSelectorProps) {
+  const handleSelect = (credentialId: string | null) => {
+    onValueChange?.(credentialId);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2">
+        <CredentialHeader label={label} />
+      </div>
+      <CredentialDropdown
+        selectedCredentialId={value || null}
+        onSelect={handleSelect}
+        availableCredentials={Object.values(credentialLookup)}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/external-agent-node-editor.tsx

@@ -1,32 +1,35 @@
 import type { Node } from '@xyflow/react';
 import { useCallback } from 'react';
+import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import type { ErrorHelpers } from '@/hooks/use-graph-errors';
 import { useNodeEditor } from '@/hooks/use-node-editor';
+import type { Credential } from '@/lib/api/credentials';
 import type { ExternalAgentNodeData } from '../../configuration/node-types';
+import { CredentialSelector } from './credential-selector';
 import { InputField, TextareaField } from './form-fields';
 
 interface ExternalAgentNodeEditorProps {
   selectedNode: Node<ExternalAgentNodeData>;
+  credentialLookup: Record<string, Credential>;
   errorHelpers?: ErrorHelpers;
 }
 
 export function ExternalAgentNodeEditor({
   selectedNode,
+  credentialLookup,
   errorHelpers,
 }: ExternalAgentNodeEditorProps) {
-  const { handleInputChange, getFieldError, setFieldRef } = useNodeEditor({
+  const { handleInputChange, getFieldError, setFieldRef, updateField } = useNodeEditor({
     selectedNodeId: selectedNode.id,
     errorHelpers,
   });
 
   const handleIdChange = useCallback(
     (generatedId: string) => {
-      handleInputChange({
-        target: { name: 'id', value: generatedId },
-      } as React.ChangeEvent<HTMLInputElement>);
+      updateField('id', generatedId);
     },
-    [handleInputChange]
+    [updateField]
   );
 
   // Auto-prefill ID based on name field (always enabled for agent nodes)
@@ -91,6 +94,25 @@ export function ExternalAgentNodeEditor({
         error={getFieldError('baseUrl')}
         tooltip="This URL is used to discover the agent's capabilities and communicate with it using the A2A protocol. For locally hosted graphs defined with the agent-framework this would be: http://localhost:3002/tenants/:tenantId/projects/:projectId/agents/:graphId"
       />
+      <ExpandableJsonEditor
+        name="headers"
+        label="Headers"
+        value={selectedNode.data.headers}
+        onChange={(value) => updateField('headers', value)}
+        placeholder="{}"
+        className=""
+      />
+      <CredentialSelector
+        label="Credential"
+        credentialLookup={credentialLookup}
+        value={
+          typeof selectedNode.data.credentialReferenceId === 'string'
+            ? selectedNode.data.credentialReferenceId
+            : null
+        }
+        onValueChange={(value) => updateField('credentialReferenceId', value || '')}
+        placeholder="Select a credential"
+      />
     </div>
   );
 }