@inkeep/agents-manage-ui 0.24.1 → 0.25.0

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

@@ -2,12 +2,14 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 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 { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { ExternalLink } from '@/components/ui/external-link';
 import { Form } from '@/components/ui/form';
 import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
@@ -17,6 +19,7 @@ import {
 } from '@/lib/actions/data-components';
 import type { DataComponent } from '@/lib/api/data-components';
 import { formatJsonField } from '@/lib/utils';
+import { DeleteDataComponentConfirmation } from '../delete-data-component-confirmation';
 import { ComponentPreviewGenerator } from '../preview/component-preview-generator';
 import { defaultValues } from './form-configuration';
 import { type DataComponentFormData, dataComponentSchema } from './validation';
@@ -44,6 +47,7 @@ export function DataComponentForm({
   id,
   initialData,
 }: DataComponentFormProps) {
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const form = useForm<DataComponentFormData>({
     resolver: zodResolver(dataComponentSchema),
     defaultValues: formatFormData(initialData),
@@ -87,71 +91,90 @@ export function DataComponentForm({
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Name"
-          placeholder="ListOrders"
-          description={
-            <>
-              This name is used to identify the component in chat widget integration.{' '}
-              <ExternalLink
-                href="https://docs.inkeep.com/typescript-sdk/structured-outputs/data-components#frontend-integration"
-                target="_blank"
-              >
-                Learn more
-              </ExternalLink>
-            </>
-          }
-          isRequired
-        />
-        <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.'
-          }
-          isRequired
-        />
-        <GenericTextarea
-          control={form.control}
-          name="description"
-          label="Description"
-          placeholder="Display a list of user orders with interactive options"
-          className="min-h-[80px]"
-          isRequired
-        />
-        <JsonSchemaInput
-          control={form.control}
-          name="props"
-          label="Props (JSON schema)"
-          placeholder="Enter a valid JSON Schema..."
-          isRequired
-        />
-
-        {id && (
-          <ComponentPreviewGenerator
-            tenantId={tenantId}
-            projectId={projectId}
-            dataComponentId={id}
-            existingPreview={initialData?.preview || null}
-            onPreviewChanged={(preview) => {
-              form.setValue('preview', preview);
-            }}
+    <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <GenericInput
+            control={form.control}
+            name="name"
+            label="Name"
+            placeholder="ListOrders"
+            description={
+              <>
+                This name is used to identify the component in chat widget integration.{' '}
+                <ExternalLink
+                  href="https://docs.inkeep.com/typescript-sdk/structured-outputs/data-components#frontend-integration"
+                  target="_blank"
+                >
+                  Learn more
+                </ExternalLink>
+              </>
+            }
+            isRequired
+          />
+          <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.'
+            }
+            isRequired
+          />
+          <GenericTextarea
+            control={form.control}
+            name="description"
+            label="Description"
+            placeholder="Display a list of user orders with interactive options"
+            className="min-h-[80px]"
+            isRequired
+          />
+          <JsonSchemaInput
+            control={form.control}
+            name="props"
+            label="Props (JSON schema)"
+            placeholder="Enter a valid JSON Schema..."
+            isRequired
           />
-        )}
 
-        <Button type="submit" disabled={isSubmitting}>
-          Save
-        </Button>
-      </form>
-    </Form>
+          {id && (
+            <ComponentPreviewGenerator
+              tenantId={tenantId}
+              projectId={projectId}
+              dataComponentId={id}
+              existingPreview={initialData?.preview || null}
+              onPreviewChanged={(preview) => {
+                form.setValue('preview', preview);
+              }}
+            />
+          )}
+
+          <div className="flex w-full justify-between">
+            <Button type="submit" disabled={isSubmitting}>
+              Save
+            </Button>
+            {id && (
+              <DialogTrigger asChild>
+                <Button type="button" variant="secondary">
+                  Delete Component
+                </Button>
+              </DialogTrigger>
+            )}
+          </div>
+        </form>
+      </Form>
+      {isDeleteOpen && id && (
+        <DeleteDataComponentConfirmation
+          dataComponentId={id}
+          dataComponentName={form.getValues('name')}
+          setIsOpen={setIsDeleteOpen}
+          redirectOnDelete={true}
+        />
+      )}
+    </Dialog>
   );
 }

package/src/components/data-components/preview/component-preview-generator.tsx

@@ -8,6 +8,7 @@ import { CodeEditor } from '@/components/form/code-editor';
 import { JsonEditor } from '@/components/form/json-editor';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
+import { InfoCard } from '@/components/ui/info-card';
 import { Label } from '@/components/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -249,7 +250,7 @@ export function ComponentPreviewGenerator({
               </Popover>
               {isSaved && (
                 <Button
-                  variant="destructive"
+                  variant="destructive-outline"
                   onClick={handleDeletePreview}
                   disabled={isDeleting || isGenerating}
                   size="icon"
@@ -317,6 +318,12 @@ export function ComponentPreviewGenerator({
           </TabsContent>
         </Tabs>
       )}
+
+      {!hasPreview && !isGenerating && !isComplete && (
+        <InfoCard>
+          <p className="text-sm text-muted-foreground">No preview generated</p>
+        </InfoCard>
+      )}
     </div>
   );
 }

package/src/components/external-agents/external-agent-item.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { MoreVertical, Trash2 } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { formatDate } from '@/app/utils/format-date';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  ItemCardContent,
+  ItemCardFooter,
+  ItemCardHeader,
+  ItemCardLink,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import { deleteExternalAgentAction } from '@/lib/actions/external-agents';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+import { ProviderIcon } from '../icons/provider-icon';
+import { Badge } from '../ui/badge';
+import { CardTitle } from '../ui/card';
+import { DeleteConfirmation } from '../ui/delete-confirmation';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+// URL Display Component with ellipsis and tooltip
+function URLDisplay({ url }: { url: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="rounded py-1 min-w-0">
+          <code className="text-sm text-muted-foreground block truncate">{url}</code>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" align="start" className="max-w-md">
+        <code className="text-xs break-all">{url}</code>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+interface ExternalAgentDialogMenuProps {
+  externalAgentId: string;
+  externalAgentName?: string;
+}
+
+function ExternalAgentDialogMenu({
+  externalAgentId,
+  externalAgentName,
+}: ExternalAgentDialogMenuProps) {
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  const handleDelete = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await deleteExternalAgentAction(tenantId, projectId, externalAgentId);
+      if (result.success) {
+        setIsOpen(false);
+        toast.success('External agent deleted.');
+      } else {
+        toast.error('Failed to delete external agent.');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  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 && (
+        <DeleteConfirmation
+          itemName={externalAgentName || 'this external agent'}
+          isSubmitting={isSubmitting}
+          onDelete={handleDelete}
+        />
+      )}
+    </Dialog>
+  );
+}
+
+export function ExternalAgentItem({
+  tenantId,
+  projectId,
+  externalAgent,
+}: {
+  tenantId: string;
+  projectId: string;
+  externalAgent: ExternalAgent;
+}) {
+  const linkPath = `/${tenantId}/projects/${projectId}/external-agents/${externalAgent.id}`;
+
+  return (
+    <ItemCardRoot>
+      <ItemCardHeader>
+        <ItemCardLink href={linkPath}>
+          <ItemCardTitle className="text-md">
+            <div className="flex items-center gap-3">
+              <ProviderIcon provider={externalAgent.name} size={24} className="flex-shrink-0" />
+              <div className="flex-1 min-w-0">
+                <CardTitle className="text-base truncate font-medium">
+                  {externalAgent.name}
+                </CardTitle>
+              </div>
+            </div>
+          </ItemCardTitle>
+        </ItemCardLink>
+        <ExternalAgentDialogMenu
+          externalAgentId={externalAgent.id}
+          externalAgentName={externalAgent.name}
+        />
+      </ItemCardHeader>
+      <ItemCardContent>
+        <div className="space-y-3 min-w-0">
+          {externalAgent.description && (
+            <p className="text-sm text-muted-foreground line-clamp-2">
+              {externalAgent.description}
+            </p>
+          )}
+
+          <URLDisplay url={externalAgent.baseUrl} />
+
+          {/* Key metrics in a structured layout */}
+          <div className="flex items-center gap-2 flex-wrap">
+            {externalAgent.credentialReferenceId && <Badge variant="code">Secured</Badge>}
+          </div>
+        </div>
+        <ItemCardFooter footerText={`Created ${formatDate(externalAgent.createdAt)}`} />
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/external-agents/external-agents-list.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+import { ExternalAgentItem } from './external-agent-item';
+
+interface ExternalAgentsListProps {
+  externalAgents: ExternalAgent[];
+}
+
+export function ExternalAgentsList({ externalAgents }: ExternalAgentsListProps) {
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      {externalAgents?.map((externalAgent: ExternalAgent) => (
+        <ExternalAgentItem
+          key={externalAgent.id}
+          tenantId={tenantId}
+          projectId={projectId}
+          externalAgent={externalAgent}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/external-agents/form/external-agent-form.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { nanoid } from 'nanoid';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericSelect } from '@/components/form/generic-select';
+import { GenericTextarea } from '@/components/form/generic-textarea';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { InfoCard } from '@/components/ui/info-card';
+import type { Credential } from '@/lib/api/credentials';
+import { createExternalAgent, updateExternalAgent } from '@/lib/api/external-agents';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+import { type ExternalAgentFormData, externalAgentSchema } from './validation';
+
+interface ExternalAgentFormProps {
+  initialData?: ExternalAgentFormData;
+  mode?: 'create' | 'update';
+  externalAgent?: ExternalAgent;
+  credentials: Credential[];
+  tenantId: string;
+  projectId: string;
+}
+
+const defaultValues: ExternalAgentFormData = {
+  name: '',
+  description: '',
+  baseUrl: '',
+  credentialReferenceId: 'none',
+};
+
+export function ExternalAgentForm({
+  initialData,
+  mode = 'create',
+  externalAgent,
+  credentials,
+  tenantId,
+  projectId,
+}: ExternalAgentFormProps) {
+  const router = useRouter();
+
+  const form = useForm({
+    resolver: zodResolver(externalAgentSchema),
+    defaultValues: {
+      ...defaultValues,
+      ...initialData,
+    },
+  });
+
+  const { isSubmitting } = form.formState;
+
+  const onSubmit = async (data: ExternalAgentFormData) => {
+    try {
+      // Transform form data to API format
+      const transformedData = {
+        ...data,
+        description: data.description || '',
+        credentialReferenceId:
+          data.credentialReferenceId === 'none' ? null : data.credentialReferenceId,
+      };
+
+      if (mode === 'update' && externalAgent) {
+        await updateExternalAgent(tenantId, projectId, externalAgent.id, transformedData);
+        toast.success('External agent updated successfully');
+        router.push(`/${tenantId}/projects/${projectId}/external-agents/${externalAgent.id}`);
+      } else {
+        const newExternalAgent = await createExternalAgent(tenantId, projectId, {
+          ...transformedData,
+          id: nanoid(),
+        });
+        toast.success('External agent created successfully');
+        router.push(`/${tenantId}/projects/${projectId}/external-agents/${newExternalAgent.id}`);
+      }
+    } catch (error) {
+      console.error(`Failed to ${mode} external agent:`, error);
+      toast.error(`Failed to ${mode} external agent. Please try again.`);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Name"
+          placeholder="My External Agent"
+          isRequired
+        />
+        <GenericTextarea
+          control={form.control}
+          name="description"
+          label="Description (optional)"
+          placeholder="A brief description of what this external agent does..."
+        />
+        <GenericInput
+          control={form.control}
+          name="baseUrl"
+          label="Base URL"
+          placeholder="https://api.example.com"
+          isRequired
+        />
+
+        <div className="space-y-3">
+          <GenericSelect
+            control={form.control}
+            selectTriggerClassName="w-full"
+            name="credentialReferenceId"
+            label="Credential"
+            placeholder="Select a credential"
+            options={[
+              { value: 'none', label: 'No Authentication' },
+              ...credentials.map((credential) => ({
+                value: credential.id,
+                label: credential.id,
+              })),
+            ]}
+          />
+          <InfoCard title="How this works">
+            <div className="space-y-2">
+              <p>
+                Select{' '}
+                <code className="bg-background px-1.5 py-0.5 rounded border">
+                  No Authentication
+                </code>{' '}
+                if the external agent does not require authentication, or if you want to add a
+                credential later.
+              </p>
+              <p>
+                Otherwise, select from the existing credentials you have already created. The
+                credential will be used when communicating with this external agent.
+              </p>
+            </div>
+          </InfoCard>
+        </div>
+
+        <Button type="submit" disabled={isSubmitting}>
+          {mode === 'update' ? 'Save' : 'Create'}
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/src/components/external-agents/form/validation.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const externalAgentSchema = z.object({
+  name: z.string().min(1, 'Name is required.'),
+  description: z.string().optional(),
+  baseUrl: z.string().url('Must be a valid URL.'),
+  credentialReferenceId: z.string().nullish(),
+});
+
+export type ExternalAgentFormData = z.infer<typeof externalAgentSchema>;