@inkeep/agents-manage-ui 0.24.1 → 0.24.2

package/src/app/[tenantId]/projects/[projectId]/credentials/new/providers/page.tsx

@@ -27,9 +27,7 @@ function filterSupportedProviders(providers: ApiProvider[]): ApiProvider[] {
 
 async function ProvidersPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials/new/providers'>) {
   const { tenantId, projectId } = await params;
   let providers: ApiProvider[];
   let error = null;

package/src/app/[tenantId]/projects/[projectId]/credentials/page.tsx

@@ -17,9 +17,7 @@ const credentialDescription =
 
 async function CredentialsPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials'>) {
   const { tenantId, projectId } = await params;
 
   let credentials: Awaited<ReturnType<typeof fetchCredentials>>;

package/src/app/[tenantId]/projects/[projectId]/layout.tsx

@@ -1,15 +1,12 @@
-import type { ReactNode } from 'react';
 import FullPageError from '@/components/errors/full-page-error';
 import { fetchProject } from '@/lib/api/projects';
 
 export const dynamic = 'force-dynamic';
 
-interface ProjectLayoutProps {
-  children: ReactNode;
-  params: Promise<{ tenantId: string; projectId: string }>;
-}
-
-export default async function ProjectLayout({ children, params }: ProjectLayoutProps) {
+export default async function ProjectLayout({
+  children,
+  params,
+}: LayoutProps<'/[tenantId]/projects/[projectId]'>) {
   const { tenantId, projectId } = await params;
 
   try {

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/edit/page.tsx

@@ -8,11 +8,9 @@ import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 import { fetchMCPTool } from '@/lib/api/tools';
 import type { MCPTool } from '@/lib/types/tools';
 
-interface EditMCPPageProps {
-  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
-}
-
-async function EditMCPPage({ params }: EditMCPPageProps) {
+async function EditMCPPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/edit'>) {
   const { mcpServerId, tenantId, projectId } = await params;
 
   // Fetch both in parallel with individual error handling
@@ -76,8 +74,6 @@ async function EditMCPPage({ params }: EditMCPPageProps) {
     imageUrl: mcpTool.imageUrl?.trim() || undefined,
   };
 
-  // MCPServerForm handles all the form logic
-
   return (
     <BodyTemplate
       breadcrumbs={[

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/page.tsx

@@ -4,11 +4,9 @@ import { MainContent } from '@/components/layout/main-content';
 import { ViewMCPServerDetails } from '@/components/mcp-servers/view-mcp-server-details';
 import { fetchMCPTool } from '@/lib/api/tools';
 
-interface MCPPageProps {
-  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
-}
-
-async function MCPPage({ params }: MCPPageProps) {
+async function MCPPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]'>) {
   const { mcpServerId, tenantId, projectId } = await params;
 
   let tool: Awaited<ReturnType<typeof fetchMCPTool>>;

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/new/layout.tsx

@@ -4,10 +4,7 @@ import { MainContent } from '@/components/layout/main-content';
 export default async function NewMCPServerLayout({
   children,
   params,
-}: {
-  children: React.ReactNode;
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: LayoutProps<'/[tenantId]/projects/[projectId]/mcp-servers/new'>) {
   const { tenantId, projectId } = await params;
   return (
     <BodyTemplate

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/new/page.tsx

@@ -3,9 +3,7 @@ import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 
 async function NewMCPServerPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers/new'>) {
   const { tenantId, projectId } = await params;
   let credentials: Credential[] = [];
   try {

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/page.tsx

@@ -13,9 +13,7 @@ const mcpServerDescription = 'Create MCP servers that agents can use to access e
 
 async function MCPServersPage({
   params,
-}: {
-  params: Promise<{ tenantId: string; projectId: string }>;
-}) {
+}: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers'>) {
   const { tenantId, projectId } = await params;
 
   let tools: Awaited<ReturnType<typeof fetchMCPTools>>;

package/src/app/[tenantId]/projects/[projectId]/settings/page.tsx

@@ -7,14 +7,9 @@ import { fetchProject } from '@/lib/api/projects';
 
 export const dynamic = 'force-dynamic';
 
-interface SettingsPageProps {
-  params: Promise<{
-    tenantId: string;
-    projectId: string;
-  }>;
-}
-
-export default async function SettingsPage({ params }: SettingsPageProps) {
+export default async function SettingsPage({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/settings'>) {
   const { tenantId, projectId } = await params;
 
   let projectData: Awaited<ReturnType<typeof fetchProject>>;

package/src/app/[tenantId]/projects/page.tsx

@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/button';
 import { emptyStateProjectDescription, projectDescription } from '@/constants/page-descriptions';
 import { fetchProjects } from '@/lib/api/projects';
 
-async function ProjectsPage({ params }: { params: Promise<{ tenantId: string }> }) {
+async function ProjectsPage({ params }: PageProps<'/[tenantId]/projects'>) {
   const { tenantId } = await params;
 
   let projects: Awaited<ReturnType<typeof fetchProjects>>;

package/src/app/api/data-components/[dataComponentId]/generate-preview/route.ts

@@ -1,12 +1,9 @@
 import type { NextRequest } from 'next/server';
 
-interface RouteContext {
-  params: Promise<{
-    dataComponentId: string;
-  }>;
-}
-
-export async function POST(request: NextRequest, context: RouteContext) {
+export async function POST(
+  request: NextRequest,
+  context: RouteContext<'/api/data-components/[dataComponentId]/generate-preview'>
+) {
   try {
     const { dataComponentId } = await context.params;
     const body = await request.json();

package/src/app/api/signoz/conversations/[conversationId]/route.ts

@@ -851,10 +851,9 @@ function buildConversationListPayload(
 
 export async function GET(
   _req: NextRequest,
-  context: { params: Promise<{ conversationId: string }> }
+  context: RouteContext<'/api/signoz/conversations/[conversationId]'>
 ) {
-  const params = await context.params;
-  const { conversationId } = params;
+  const { conversationId } = await context.params;
   if (!conversationId) {
     return NextResponse.json({ error: 'Conversation ID is required' }, { status: 400 });
   }
@@ -1287,9 +1286,7 @@ export async function GET(
         timestamp: span.timestamp,
         status: hasError ? ACTIVITY_STATUS.ERROR : ACTIVITY_STATUS.SUCCESS,
         subAgentName: getString(span, SPAN_KEYS.ARTIFACT_SUB_AGENT_ID, '') || 'Unknown Agent',
-        result: hasError
-          ? 'Artifact processing failed'
-          : 'Artifact processed successfully',
+        result: hasError ? 'Artifact processing failed' : 'Artifact processed successfully',
         artifactId: getString(span, SPAN_KEYS.ARTIFACT_ID, '') || undefined,
         artifactType: artifactType || undefined,
         artifactName: artifactName || undefined,

package/src/components/agent/agent.tsx

@@ -14,7 +14,6 @@ import {
   useOnSelectionChange,
   useReactFlow,
 } from '@xyflow/react';
-import { nanoid } from 'nanoid';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -38,6 +37,7 @@ import type { DataComponent } from '@/lib/api/data-components';
 import { saveAgent } from '@/lib/services/save-agent';
 import type { MCPTool } from '@/lib/types/tools';
 import { getErrorSummaryMessage, parseAgentValidationErrors } from '@/lib/utils/agent-error-parser';
+import { generateId } from '@/lib/utils/id-utils';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import { detectOrphanedToolsAndGetWarning } from '@/lib/utils/orphaned-tools-detector';
 
@@ -103,7 +103,7 @@ function Flow({
   const initialNodes = useMemo<Node[]>(
     () => [
       {
-        id: nanoid(),
+        id: generateId(),
         type: NodeType.SubAgent,
         position: { x: 0, y: 0 },
         data: { name: '', isDefault: true },
@@ -422,7 +422,7 @@ function Flow({
         x: event.clientX,
         y: event.clientY,
       });
-      const nodeId = nanoid();
+      const nodeId = generateId();
       const newNode = {
         id: nodeId,
         type: nodeData.type,

package/src/components/agent/playground/chat-widget.tsx

@@ -1,12 +1,12 @@
 'use client';
 import { InkeepEmbeddedChat } from '@inkeep/agents-ui';
 import type { ComponentsConfig, InkeepCallbackEvent } from '@inkeep/agents-ui/types';
-import { nanoid } from 'nanoid';
 import { useCallback, useEffect, useRef } from 'react';
 import { DynamicComponentRenderer } from '@/components/data-components/preview/dynamic-component-renderer';
 import type { ConversationDetail } from '@/components/traces/timeline/types';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import type { DataComponent } from '@/lib/api/data-components';
+import { generateId } from '@/lib/utils/id-utils';
 import { IkpMessage as IkpMessageComponent } from './ikp-message';
 
 interface ChatWidgetProps {
@@ -205,7 +205,7 @@ export function ChatWidget({
                   stopPollingTimeoutRef.current = null;
                 }
                 stopPolling();
-                setConversationId(nanoid());
+                setConversationId(generateId());
               }
             },
             primaryBrandColor: '#3784ff',

package/src/components/agent/playground/playground.tsx

@@ -1,5 +1,4 @@
 import { Bug, X } from 'lucide-react';
-import { nanoid } from 'nanoid';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import { TimelineWrapper } from '@/components/traces/timeline/timeline-wrapper';
@@ -7,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { useChatActivitiesPolling } from '@/hooks/use-chat-activities-polling';
 import type { DataComponent } from '@/lib/api/data-components';
+import { generateId } from '@/lib/utils/id-utils';
 import { copyTraceToClipboard } from '@/lib/utils/trace-formatter';
 import { ChatWidget } from './chat-widget';
 import CustomHeadersDialog from './custom-headers-dialog';
@@ -28,7 +28,7 @@ export const Playground = ({
   setShowPlayground,
   dataComponentLookup = {},
 }: PlaygroundProps) => {
-  const [conversationId, setConversationId] = useState<string>(nanoid());
+  const [conversationId, setConversationId] = useState<string>(generateId());
   const [customHeaders, setCustomHeaders] = useState<Record<string, string>>({});
   const [showTraces, setShowTraces] = useState<boolean>(false);
   const [isCopying, setIsCopying] = useState(false);

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

@@ -459,7 +459,7 @@ function MetadataEditor() {
                       <Checkbox
                         id="event-based-updates"
                         className="bg-background"
-                        checked={!!statusUpdates?.numEvents}
+                        checked={statusUpdates && 'numEvents' in statusUpdates}
                         onCheckedChange={(checked) => {
                           if (checked) {
                             updateMetadata('statusUpdates', {
@@ -480,7 +480,7 @@ function MetadataEditor() {
                       <Checkbox
                         id="time-based-updates"
                         className="bg-background"
-                        checked={!!statusUpdates?.timeInSeconds}
+                        checked={statusUpdates && 'timeInSeconds' in statusUpdates}
                         onCheckedChange={(checked) => {
                           if (checked) {
                             updateMetadata('statusUpdates', {
@@ -499,7 +499,7 @@ function MetadataEditor() {
                   </div>
                 </div>
 
-                {statusUpdates?.numEvents && (
+                {statusUpdates && 'numEvents' in statusUpdates && (
                   <div className="space-y-2">
                     <Label htmlFor="num-events">Number of events</Label>
                     <Input
@@ -524,7 +524,7 @@ function MetadataEditor() {
                   </div>
                 )}
 
-                {statusUpdates?.timeInSeconds && (
+                {statusUpdates && 'timeInSeconds' in statusUpdates && (
                   <div className="space-y-2">
                     <Label htmlFor="time-in-seconds">Time interval (seconds)</Label>
                     <Input

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

@@ -1,6 +1,7 @@
 import type { Node } from '@xyflow/react';
 import { useParams } from 'next/navigation';
 import { useCallback } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   getExecutionLimitInheritanceStatus,
   InheritanceIndicator,
@@ -64,14 +65,16 @@ export function SubAgentNodeEditor({
   }>();
   const selectedDataComponents = selectedNode.data?.dataComponents || [];
   const selectedArtifactComponents = selectedNode.data?.artifactComponents || [];
+  const isDefaultSubAgent = selectedNode.data?.isDefault || false;
 
   const { project } = useProjectData();
   const metadata = useAgentStore((state) => state.metadata);
 
-  const { updatePath, updateNestedPath, getFieldError, setFieldRef } = useNodeEditor({
-    selectedNodeId: selectedNode.id,
-    errorHelpers,
-  });
+  const { updatePath, updateNestedPath, getFieldError, setFieldRef, updateDefaultSubAgent } =
+    useNodeEditor({
+      selectedNodeId: selectedNode.id,
+      errorHelpers,
+    });
 
   const updateModelPath = useCallback(
     (path: string, value: any) => {
@@ -146,6 +149,21 @@ export function SubAgentNodeEditor({
           <p className="text-sm text-red-600">{getFieldError('prompt')}</p>
         )}
       </div>
+      <div className="space-y-2">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="is-default-sub-agent"
+            checked={isDefaultSubAgent}
+            onCheckedChange={(checked) => {
+              updateDefaultSubAgent(checked === true);
+            }}
+          />
+          <Label htmlFor="is-default-sub-agent">Is default sub agent</Label>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          The default sub agent is the initial entry point for conversations.
+        </p>
+      </div>
       <Separator />
       <ModelSection
         models={selectedNode.data.models}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
@@ -10,14 +10,17 @@ interface DeleteArtifactComponentConfirmationProps {
   artifactComponentId: string;
   artifactComponentName?: string;
   setIsOpen: (isOpen: boolean) => void;
+  redirectOnDelete?: boolean;
 }
 
 export function DeleteArtifactComponentConfirmation({
   artifactComponentId,
   artifactComponentName,
   setIsOpen,
+  redirectOnDelete = false,
 }: DeleteArtifactComponentConfirmationProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const router = useRouter();
   const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
@@ -30,6 +33,9 @@ export function DeleteArtifactComponentConfirmation({
       if (result.success) {
         setIsOpen(false);
         toast.success('Artifact deleted.');
+        if (redirectOnDelete) {
+          router.push(`/${tenantId}/projects/${projectId}/artifacts`);
+        }
       } else {
         toast.error(result.error);
       }

package/src/components/artifact-components/form/artifact-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 { Form } from '@/components/ui/form';
 import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import {
@@ -16,6 +18,7 @@ import {
 } from '@/lib/actions/artifact-components';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import { formatJsonField } from '@/lib/utils';
+import { DeleteArtifactComponentConfirmation } from '../delete-artifact-component-confirmation';
 import { defaultValues } from './form-configuration';
 import { type ArtifactComponentFormData, artifactComponentSchema } from './validation';
 
@@ -43,6 +46,7 @@ export function ArtifactComponentForm({
   projectId,
   initialData,
 }: ArtifactComponentFormProps) {
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const form = useForm<ArtifactComponentFormData>({
     resolver: zodResolver(artifactComponentSchema),
     defaultValues: formatFormData(initialData),
@@ -92,47 +96,66 @@ export function ArtifactComponentForm({
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Name"
-          placeholder="Document Artifact"
-          isRequired
+    <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="Document Artifact"
+            isRequired
+          />
+          <GenericInput
+            control={form.control}
+            name="id"
+            label="Id"
+            placeholder="my-artifact"
+            disabled={!!id}
+            isRequired
+            description={
+              id
+                ? ''
+                : 'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
+            }
+          />
+          <GenericTextarea
+            control={form.control}
+            name="description"
+            label="Description"
+            placeholder="Structured factual information extracted from search results"
+            className="min-h-[80px]"
+            isRequired
+          />
+          <JsonSchemaInput
+            control={form.control}
+            name="props"
+            label="Props (JSON schema with inPreview indicators)"
+            placeholder="Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result..."
+            description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."
+          />
+          <div className="flex w-full justify-between">
+            <Button type="submit" disabled={isSubmitting}>
+              Save
+            </Button>
+            {id && (
+              <DialogTrigger asChild>
+                <Button type="button" variant="secondary">
+                  Delete Artifact
+                </Button>
+              </DialogTrigger>
+            )}
+          </div>
+        </form>
+      </Form>
+      {isDeleteOpen && id && (
+        <DeleteArtifactComponentConfirmation
+          artifactComponentId={id}
+          artifactComponentName={form.getValues('name')}
+          setIsOpen={setIsDeleteOpen}
+          redirectOnDelete={true}
         />
-        <GenericInput
-          control={form.control}
-          name="id"
-          label="Id"
-          placeholder="my-artifact"
-          disabled={!!id}
-          isRequired
-          description={
-            id
-              ? ''
-              : 'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
-          }
-        />
-        <GenericTextarea
-          control={form.control}
-          name="description"
-          label="Description"
-          placeholder="Structured factual information extracted from search results"
-          className="min-h-[80px]"
-          isRequired
-        />
-        <JsonSchemaInput
-          control={form.control}
-          name="props"
-          label="Props (JSON schema with inPreview indicators)"
-          placeholder="Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result..."
-          description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."
-        />
-        <Button type="submit" disabled={isSubmitting}>
-          Save
-        </Button>
-      </form>
-    </Form>
+      )}
+    </Dialog>
   );
 }

package/src/components/credentials/credential-tools-list.tsx

@@ -1,6 +1,7 @@
+import type { McpTool } from '@inkeep/agents-core';
 import Link from 'next/link';
 import { Label } from '@/components/ui/label';
-import type { McpTool } from '@inkeep/agents-core';
+import { InfoCard } from '../ui/info-card';
 
 interface CredentialToolsListProps {
   tools?: McpTool[];
@@ -68,9 +69,9 @@ export function CredentialToolsList({
           ))}
         </div>
       ) : (
-        <div className="text-sm text-muted-foreground p-3 py-2 bg-gray-100/80 dark:bg-sidebar rounded-md">
-          No MCP servers are currently using this credential
-        </div>
+        <InfoCard>
+          <p>No MCP servers are currently using this credential</p>
+        </InfoCard>
       )}
     </div>
   );

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

@@ -239,7 +239,7 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
                 keyPlaceholder="Header name (e.g., X-API-Key)"
                 valuePlaceholder="Header value"
               />
-              <InfoCard title="Additional headers">
+              <InfoCard title="How this works">
                 <p className="mb-2">
                   Add extra headers to be included with authentication requests.
                 </p>