@inkeep/agents-manage-ui 0.1.0

package/src/components/credentials/views/generic-auth-form.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { ApiProvider } from '@nangohq/types';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericTextarea } from '@/components/form/generic-textarea';
+import { ProviderIcon } from '@/components/icons/provider-icon';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { type FieldConfig, type FormSection, getFormConfig } from './auth-form-config';
+
+interface GenericAuthFormProps {
+  provider: ApiProvider;
+  onBack: () => void;
+  onSubmit: (credentials: Record<string, any>) => void;
+  loading?: boolean;
+}
+
+/**
+ * Creates a dynamic Zod schema based on form configuration
+ */
+function createFormSchema(formConfig: NonNullable<ReturnType<typeof getFormConfig>>) {
+  const allFields = formConfig.sections.flatMap((section) => section.fields);
+  const schemaObject: Record<string, z.ZodTypeAny> = {};
+
+  for (const field of allFields) {
+    let fieldSchema: z.ZodTypeAny = z.string();
+
+    // Apply custom validation if provided
+    if (field.validate) {
+      fieldSchema = fieldSchema.refine(
+        (value: unknown) => {
+          const stringValue = String(value || '');
+          if (!stringValue && !field.required) return true; // Allow empty for non-required fields
+          const error = field.validate ? field.validate(stringValue) : undefined;
+          return !error;
+        },
+        {
+          message: `Invalid ${field.label.toLowerCase()}`,
+        }
+      );
+    }
+
+    // Handle required vs optional fields
+    if (field.required) {
+      fieldSchema = z.string().min(1, `${field.label} is required`);
+    } else {
+      fieldSchema = z.string().optional().or(z.literal(''));
+    }
+
+    schemaObject[field.key] = fieldSchema;
+  }
+
+  return z.object(schemaObject);
+}
+
+export function GenericAuthForm({
+  provider,
+  onBack,
+  onSubmit,
+  loading = false,
+}: GenericAuthFormProps) {
+  const formConfig = getFormConfig(provider.auth_mode);
+
+  // Move hooks before any early returns
+  const allFields = formConfig?.sections.flatMap((section) => section.fields) || [];
+
+  // Create a minimal schema if no config is available
+  const FormSchema = formConfig
+    ? createFormSchema(formConfig)
+    : z.object({ _placeholder: z.string().optional() });
+
+  type FormData = Record<string, string>;
+  const defaultValues: FormData = Object.fromEntries(allFields.map((field) => [field.key, '']));
+
+  const form = useForm<FormData>({
+    resolver: formConfig ? zodResolver(FormSchema as any) : undefined,
+    defaultValues,
+  });
+
+  if (!formConfig) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Button variant="outline" onClick={onBack}>
+            ← Back
+          </Button>
+          <div>
+            <h1 className="text-2xl font-bold">Configuration Not Available</h1>
+            <p className="text-muted-foreground">
+              No configuration form is available for {provider.auth_mode} authentication mode.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSubmit = (data: FormData) => {
+    // Prepare credentials object - only include non-empty values
+    const credentials: Record<string, any> = {};
+
+    for (const [key, value] of Object.entries(data)) {
+      const trimmedValue = value?.toString().trim();
+      if (trimmedValue) {
+        credentials[key] = trimmedValue;
+      }
+    }
+
+    onSubmit(credentials);
+  };
+
+  const renderField = (field: FieldConfig) => {
+    const isPrivateKey = field.key === 'private_key';
+    const label = `${field.label}${field.required ? ' *' : ''}`;
+
+    if (field.component === 'textarea') {
+      return (
+        <div key={field.key} className="space-y-2">
+          <GenericTextarea
+            control={form.control}
+            name={field.key}
+            label={label}
+            placeholder={field.placeholder}
+            className={isPrivateKey ? 'font-mono text-sm min-h-[120px]' : 'min-h-[80px]'}
+          />
+          {field.helpText && <p className="text-sm text-muted-foreground">{field.helpText}</p>}
+        </div>
+      );
+    }
+
+    return (
+      <div key={field.key} className="space-y-2">
+        <GenericInput
+          control={form.control}
+          name={field.key}
+          label={label}
+          type={field.type}
+          placeholder={field.placeholder}
+          disabled={loading}
+        />
+        {field.helpText && <p className="text-sm text-muted-foreground">{field.helpText}</p>}
+      </div>
+    );
+  };
+
+  const renderSection = (section: FormSection, index: number) => (
+    <div key={index} className="space-y-4">
+      {section.title && (
+        <div>
+          <h3 className="text-lg font-medium">{section.title}</h3>
+          {section.description && (
+            <p className="text-sm text-muted-foreground mt-1">{section.description}</p>
+          )}
+        </div>
+      )}
+
+      {section.fields.map(renderField)}
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          <ProviderIcon provider={provider.name} size={24} />
+          <div>
+            <h1 className="text-lg font-medium">Setup {provider.display_name || provider.name}</h1>
+            <p className="text-muted-foreground">
+              Complete the required fields to set up this credential.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+          {formConfig.sections.map(renderSection)}
+
+          <div className="flex gap-3 pt-4">
+            <Button type="submit" disabled={loading}>
+              {loading ? 'Creating Credential...' : 'Create Credential'}
+            </Button>
+            <Button type="button" variant="outline" onClick={onBack} disabled={loading}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

package/src/components/credentials/views/nango-providers-grid.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import type { ApiProvider } from '@nangohq/types';
+import { Search } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useMemo, useState } from 'react';
+import { ProviderIcon } from '@/components/icons/provider-icon';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { CardTitle } from '@/components/ui/card';
+import { CardGrid } from '@/components/ui/card-grid';
+import { Input } from '@/components/ui/input';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface NangoProvidersGridProps {
+  providers: ApiProvider[];
+  error: string | null;
+}
+
+export function NangoProvidersGrid({ providers, error }: NangoProvidersGridProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  const renderProviderHeader = (provider: ApiProvider) => (
+    <div className="flex items-center gap-3 overflow-hidden">
+      <ProviderIcon provider={provider.name} size={20} className="flex-shrink-0" />
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <CardTitle className="text-sm font-medium leading-tight truncate flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
+              {provider.display_name || provider.name}
+            </CardTitle>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{provider.display_name || provider.name}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+
+  const renderProviderContent = (provider: ApiProvider) => (
+    <div className="pt-0">
+      {/* Provider Categories */}
+      {provider.categories && provider.categories.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {provider.categories.slice(0, 1).map((category) => (
+            <Badge key={category} variant="secondary" className="text-xs">
+              {category}
+            </Badge>
+          ))}
+          {provider.categories.length > 1 && (
+            <Badge variant="secondary" className="text-xs text-muted-foreground">
+              +{provider.categories.length - 1}
+            </Badge>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  // Pre-process searchable text for performance
+  const providersWithSearchText = useMemo(() => {
+    return providers.map((provider) => ({
+      ...provider,
+      searchText: [
+        provider.name.toLowerCase(),
+        provider.display_name?.toLowerCase() || '',
+        ...(provider.categories?.map((cat) => cat.toLowerCase()) || []),
+      ].join(' '),
+    }));
+  }, [providers]);
+
+  // Filter providers based on search query (now efficient)
+  const filteredProviders = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return providersWithSearchText;
+    }
+
+    const query = searchQuery.toLowerCase();
+    return providersWithSearchText.filter((provider) => provider.searchText.includes(query));
+  }, [providersWithSearchText, searchQuery]);
+
+  if (error) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-destructive">{error}</p>
+        <Button variant="outline" onClick={() => window.location.reload()} className="mt-4">
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Search bar */}
+      <div className="relative max-w-md mx-auto">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+        <Input
+          placeholder="Search providers (e.g., slack, github, zendesk)..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      {/* No results */}
+      {filteredProviders.length === 0 && searchQuery && (
+        <div className="text-center p-8">
+          <h3 className="text-lg font-semibold mb-2">No providers found</h3>
+          <p className="text-muted-foreground mb-4">
+            No providers match "{searchQuery}". Try a different search term.
+          </p>
+          <Button variant="outline" onClick={() => setSearchQuery('')}>
+            Clear search
+          </Button>
+        </div>
+      )}
+
+      {/* Provider grid */}
+      {filteredProviders.length > 0 && (
+        <CardGrid
+          items={filteredProviders}
+          getKey={(provider) => provider.name}
+          getHref={(provider) =>
+            `/${tenantId}/projects/${projectId}/credentials/new/providers/${encodeURIComponent(provider.name)}`
+          }
+          renderHeader={renderProviderHeader}
+          renderContent={renderProviderContent}
+          gridClassName="grid gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/credentials/views/new-credential-form.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { generateIdFromName } from '@inkeep/agents-core/client-exports';
+import { useParams, useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import type { CredentialFormData } from '@/components/credentials/views/credential-form-validation';
+import { updateMCPTool } from '@/lib/api/tools';
+import { createNangoApiKeyConnection } from '@/lib/mcp-tools/nango';
+import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
+import { CredentialForm } from './credential-form';
+
+export function NewCredentialForm() {
+  const router = useRouter();
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  const handleCreateCredential = async (data: CredentialFormData) => {
+    try {
+      const idFromName = generateIdFromName(data.name.trim());
+
+      const { integration } = await createNangoApiKeyConnection({
+        name: idFromName,
+        apiKeyToSet: data.apiKeyToSet,
+        metadata: data.metadata as Record<string, string>,
+      });
+
+      const newCredential = await findOrCreateCredential(tenantId, projectId, {
+        id: idFromName,
+        type: 'nango',
+        credentialStoreId: 'nango-default',
+        retrievalParams: {
+          connectionId: idFromName,
+          providerConfigKey: integration.unique_key,
+          provider: integration.provider,
+          authMode: 'API_KEY',
+        },
+      });
+
+      if (data.selectedTool && newCredential) {
+        const updatedTool = {
+          credentialReferenceId: newCredential.id,
+        };
+        await updateMCPTool(tenantId, projectId, data.selectedTool, updatedTool);
+      }
+
+      toast.success('Credential created successfully');
+      router.push(`/${tenantId}/projects/${projectId}/credentials`);
+    } catch (error) {
+      console.error('Failed to create credential:', error);
+      toast.error('Failed to create credential. Please try again.');
+    }
+  };
+
+  return (
+    <CredentialForm
+      onCreateCredential={handleCreateCredential}
+      tenantId={tenantId}
+      projectId={projectId}
+    />
+  );
+}

package/src/components/data-components/data-component-item-menu.tsx

@@ -0,0 +1,61 @@
+import { MoreVertical, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { DeleteDataComponentConfirmation } from './delete-data-component-confirmation';
+
+interface DataComponentItemMenuProps {
+  dataComponentId: string;
+  dataComponentName?: string;
+}
+
+export function DataComponentItemMenu({
+  dataComponentId,
+  dataComponentName,
+}: DataComponentItemMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className=" p-0 hover:bg-accent hover:text-accent-foreground rounded-sm -mr-2"
+          >
+            <MoreVertical className="h-4 w-4 text-muted-foreground" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="w-48 shadow-lg border border-border bg-popover/95 backdrop-blur-sm"
+        >
+          <DialogTrigger asChild>
+            <DropdownMenuItem className="text-destructive hover:!bg-destructive/10 dark:hover:!bg-destructive/20 hover:!text-destructive cursor-pointer">
+              <Trash2 className="size-4 text-destructive" />
+              Delete
+            </DropdownMenuItem>
+          </DialogTrigger>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {isOpen && (
+        <DeleteDataComponentConfirmation
+          dataComponentId={dataComponentId}
+          dataComponentName={dataComponentName}
+          setIsOpen={setIsOpen}
+        />
+      )}
+    </Dialog>
+  );
+}

package/src/components/data-components/data-component-item.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { formatDate } from '@/app/utils/format-date';
+import {
+  ItemCardContent,
+  ItemCardDescription,
+  ItemCardFooter,
+  ItemCardHeader,
+  ItemCardLink,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import type { DataComponent } from '@/lib/api/data-components';
+import { DataComponentItemMenu } from './data-component-item-menu';
+
+export function DataComponentItem({
+  id,
+  name,
+  description,
+  createdAt,
+  tenantId,
+  projectId,
+}: DataComponent & { tenantId: string; projectId: string }) {
+  const linkPath = `/${tenantId}/projects/${projectId}/data-components/${id}`;
+
+  return (
+    <ItemCardRoot>
+      <ItemCardHeader>
+        <ItemCardLink href={linkPath}>
+          <ItemCardTitle className="text-md">{name}</ItemCardTitle>
+        </ItemCardLink>
+        <DataComponentItemMenu dataComponentId={id} dataComponentName={name} />
+      </ItemCardHeader>
+      <ItemCardContent>
+        <ItemCardDescription hasContent={!!description} className="line-clamp-2">
+          {description || 'No description'}
+        </ItemCardDescription>
+        <ItemCardFooter footerText={`Created ${formatDate(createdAt)}`} />
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/data-components/data-components-list.tsx

@@ -0,0 +1,27 @@
+import type { DataComponent } from '@/lib/api/data-components';
+import { DataComponentItem } from './data-component-item';
+
+interface DataComponentsListProps {
+  tenantId: string;
+  projectId: string;
+  dataComponents: DataComponent[];
+}
+
+export async function DataComponentsList({
+  tenantId,
+  projectId,
+  dataComponents,
+}: DataComponentsListProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      {dataComponents?.map((dataComponent: DataComponent) => (
+        <DataComponentItem
+          key={dataComponent.id}
+          {...dataComponent}
+          tenantId={tenantId}
+          projectId={projectId}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/data-components/delete-data-component-confirmation.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { deleteDataComponentAction } from '@/lib/actions/data-components';
+
+interface DeleteDataComponentConfirmationProps {
+  dataComponentId: string;
+  dataComponentName?: string;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+export function DeleteDataComponentConfirmation({
+  dataComponentId,
+  dataComponentName,
+  setIsOpen,
+}: DeleteDataComponentConfirmationProps) {
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await deleteDataComponentAction(tenantId, projectId, dataComponentId);
+      if (result.success) {
+        setIsOpen(false);
+        toast.success('Data component deleted.');
+      } else {
+        toast.error(result.error);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <DeleteConfirmation
+      itemName={dataComponentName || 'this data component'}
+      isSubmitting={isSubmitting}
+      onDelete={handleDelete}
+    />
+  );
+}

package/src/components/data-components/form/data-component-form.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericTextarea } from '@/components/form/generic-textarea';
+import { JsonSchemaInput } from '@/components/form/json-schema-input';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import {
+  createDataComponentAction,
+  updateDataComponentAction,
+} from '@/lib/actions/data-components';
+import type { DataComponent } from '@/lib/api/data-components';
+import { formatJsonField } from '@/lib/utils';
+import { defaultValues } from './form-configuration';
+import { type DataComponentFormData, dataComponentSchema } from './validation';
+
+interface DataComponentFormProps {
+  tenantId: string;
+  projectId: string;
+  id?: string;
+  initialData?: DataComponentFormData;
+}
+
+const formatFormData = (data?: DataComponentFormData): DataComponentFormData => {
+  if (!data) return defaultValues;
+
+  const formatted = { ...data };
+  if (formatted.props) {
+    formatted.props = formatJsonField(formatted.props);
+  }
+  return formatted;
+};
+
+export function DataComponentForm({
+  tenantId,
+  projectId,
+  id,
+  initialData,
+}: DataComponentFormProps) {
+  const form = useForm<DataComponentFormData>({
+    resolver: zodResolver(dataComponentSchema),
+    defaultValues: formatFormData(initialData),
+  });
+
+  const { isSubmitting } = form.formState;
+  const router = useRouter();
+
+  const onSubmit = async (data: DataComponentFormData) => {
+    try {
+      const payload = { ...data } as DataComponent;
+      if (id) {
+        const res = await updateDataComponentAction(tenantId, projectId, payload);
+        if (!res.success) {
+          toast.error(res.error || 'Failed to update data component');
+          return;
+        }
+        toast.success('Data component updated');
+      } else {
+        const res = await createDataComponentAction(tenantId, projectId, payload);
+        if (!res.success) {
+          toast.error(res.error || 'Failed to create data component');
+          return;
+        }
+        toast.success('Data component created');
+        router.push(`/${tenantId}/projects/${projectId}/data-components`);
+      }
+    } catch (error) {
+      console.error('Error submitting data component:', error);
+      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+      toast.error(errorMessage);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="id"
+          label="Id"
+          placeholder="my-data-component"
+          disabled={!!id}
+          description={
+            id
+              ? ''
+              : 'Choose a unique identifier for this component. Using an existing id will replace that component.'
+          }
+        />
+        <GenericInput control={form.control} name="name" label="Name" placeholder="List orders" />
+        <GenericTextarea
+          control={form.control}
+          name="description"
+          label="Description"
+          placeholder="Display a list of user orders with interactive options"
+          className="min-h-[80px]"
+        />
+        <JsonSchemaInput
+          control={form.control}
+          name="props"
+          label="Props (JSON Schema)"
+          placeholder="Enter a valid JSON Schema..."
+        />
+        <Button type="submit" disabled={isSubmitting}>
+          Save
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/src/components/data-components/form/form-configuration.ts

@@ -0,0 +1,8 @@
+import type { DataComponentFormData } from './validation';
+
+export const defaultValues: DataComponentFormData = {
+  id: '',
+  name: '',
+  description: '',
+  props: '',
+};