@inkeep/agents-manage-ui 0.23.4 → 0.24.0

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,
@@ -693,6 +693,171 @@ function Flow({
     toolLookup,
   ]);
 
+  useEffect(() => {
+    const onDataOperation: EventListenerOrEventListenerObject = (event) => {
+      // @ts-expect-error -- improve types
+      const data = event.detail;
+
+      switch (data.type) {
+        case 'agent_initializing': {
+          // TODO
+          break;
+        }
+        case 'delegation_sent':
+        case 'transfer': {
+          const { fromSubAgent, targetSubAgent } = data.details.data;
+          setEdges((prevEdges) =>
+            prevEdges.map((edge) => ({
+              ...edge,
+              data: {
+                ...edge.data,
+                delegating: edge.source === fromSubAgent && edge.target === targetSubAgent,
+              },
+            }))
+          );
+          setNodes((prevNodes) =>
+            prevNodes.map((node) => ({
+              ...node,
+              data: {
+                ...node.data,
+                isDelegating: node.id === fromSubAgent || node.id === targetSubAgent,
+              },
+            }))
+          );
+          break;
+        }
+        case 'delegation_returned': {
+          const { targetSubAgent } = data.details.data;
+          setEdges((prevEdges) =>
+            prevEdges.map((edge) => ({
+              ...edge,
+              data: { ...edge.data, delegating: false },
+            }))
+          );
+          setNodes((prevNodes) =>
+            prevNodes.map((node) => ({
+              ...node,
+              data: { ...node.data, isExecuting: node.id === targetSubAgent, isDelegating: false },
+            }))
+          );
+          break;
+        }
+        case 'tool_call': {
+          const { toolName } = data.details.data;
+          const { subAgentId } = data.details;
+          setNodes((prevNodes) => {
+            setEdges((prevEdges) =>
+              prevEdges.map((edge) => {
+                const node = prevNodes.find((node) => node.id === edge.target);
+                const toolId = node?.data.toolId as string;
+                const toolData = toolLookup[toolId];
+                const hasTool = toolData?.availableTools?.some((tool) => tool.name === toolName);
+                const hasDots = edge.source === subAgentId && hasTool;
+                return {
+                  ...edge,
+                  data: { ...edge.data, delegating: hasDots },
+                };
+              })
+            );
+            return prevNodes.map((node) => {
+              const toolId = node.data.toolId as string;
+              const toolData = toolLookup[toolId];
+
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  isExecuting: false,
+                  isDelegating:
+                    node.data.id === subAgentId ||
+                    toolData?.availableTools?.some((tool) => tool.name === toolName),
+                },
+              };
+            });
+          });
+          break;
+        }
+        case 'tool_result': {
+          const { toolName } = data.details.data;
+          const { subAgentId } = data.details;
+          setNodes((prevNodes) => {
+            setEdges((prevEdges) =>
+              prevEdges.map((edge) => {
+                const node = prevNodes.find((node) => node.id === edge.target);
+                const toolId = node?.data.toolId as string;
+                const toolData = toolLookup[toolId];
+                const hasTool = toolData?.availableTools?.some((tool) => tool.name === toolName);
+
+                return {
+                  ...edge,
+                  data: {
+                    ...edge.data,
+                    delegating: subAgentId === edge.source && hasTool ? 'inverted' : false,
+                  },
+                };
+              })
+            );
+            return prevNodes.map((node) => {
+              const toolId = node.data.toolId as string;
+              const toolData = toolLookup[toolId];
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  isDelegating: node.id === subAgentId,
+                  isExecuting: toolData?.availableTools?.some((tool) => tool.name === toolName),
+                },
+              };
+            });
+          });
+          break;
+        }
+        case 'completion': {
+          onCompletion();
+          break;
+        }
+        case 'agent_generate': {
+          const { subAgentId } = data.details;
+          setEdges((prevEdges) =>
+            prevEdges.map((node) => ({
+              ...node,
+              data: { ...node.data, delegating: false },
+            }))
+          );
+          setNodes((prevNodes) =>
+            prevNodes.map((node) => ({
+              ...node,
+              data: { ...node.data, isExecuting: node.id === subAgentId, isDelegating: false },
+            }))
+          );
+          break;
+        }
+      }
+    };
+
+    const onCompletion = () => {
+      setEdges((prevEdges) =>
+        prevEdges.map((edge) => ({
+          ...edge,
+          data: { ...edge.data, delegating: false },
+        }))
+      );
+      setNodes((prevNodes) =>
+        prevNodes.map((node) => ({
+          ...node,
+          data: { ...node.data, isExecuting: false, isDelegating: false },
+        }))
+      );
+    };
+
+    document.addEventListener('ikp-data-operation', onDataOperation);
+    document.addEventListener('ikp-aborted', onCompletion);
+    return () => {
+      document.removeEventListener('ikp-data-operation', onDataOperation);
+      document.removeEventListener('ikp-aborted', onCompletion);
+    };
+  }, [setEdges, toolLookup, setNodes]);
+
   return (
     <div className="w-full h-full relative bg-muted/20 dark:bg-background flex rounded-b-[14px] overflow-hidden">
       <div className={`flex-1 h-full relative transition-all duration-300 ease-in-out`}>
@@ -700,7 +865,9 @@ function Flow({
         <SelectedMarker />
         <ReactFlow
           defaultEdgeOptions={{
-            type: 'default',
+            // Built-in 'default' edges ignore the `data` prop.
+            // Use a custom edge type instead to access `data` in rendering.
+            type: 'custom',
           }}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
@@ -725,7 +892,11 @@ function Flow({
           <Panel position="top-left">
             <NodeLibrary />
           </Panel>
-          <Panel position="top-right">
+          <Panel
+            position="top-right"
+            // width of NodeLibrary
+            className="left-52"
+          >
             <Toolbar
               onSubmit={onSubmit}
               inPreviewDisabled={!agent?.id}

package/src/components/agent/configuration/edge-types.tsx

@@ -12,7 +12,9 @@ export enum A2AEdgeType {
 export enum EdgeType {
   A2A = 'a2a',
   A2AExternal = 'a2a-external',
-  Default = 'default',
+  // Built-in 'default' edges ignore the `data` prop.
+  // Use a custom edge type instead to access `data` in rendering.
+  Default = 'custom',
   SelfLoop = 'self-loop',
 }
 
@@ -23,6 +25,10 @@ export type A2AEdgeData = {
     delegateTargetToSource: boolean;
     delegateSourceToTarget: boolean;
   };
+  /**
+   * Indicates whether this node delegates its task to another node.
+   */
+  delegating: boolean | 'inverted';
 };
 
 export const edgeTypes = {

package/src/components/agent/configuration/node-types.tsx

@@ -22,6 +22,8 @@ export interface MCPNodeData extends Record<string, unknown> {
   name?: string;
   imageUrl?: string;
   provider?: string;
+  isExecuting?: boolean;
+  isDelegating?: boolean;
 }
 
 // Re-export the shared type for consistency
@@ -36,6 +38,9 @@ export interface AgentNodeData extends Record<string, unknown> {
   artifactComponents?: string[];
   models?: AgentModels; // Use same structure as agent
   stopWhen?: SubAgentStopWhen;
+  isDefault?: boolean;
+  isExecuting?: boolean;
+  isDelegating?: boolean;
 }
 
 export interface ExternalAgentNodeData extends Record<string, unknown> {
@@ -57,6 +62,8 @@ export interface FunctionToolNodeData extends Record<string, unknown> {
   code?: string;
   inputSchema?: Record<string, unknown>;
   dependencies?: Record<string, unknown>;
+  isExecuting?: boolean;
+  isDelegating?: boolean;
 }
 
 export enum NodeType {

package/src/components/agent/edges/agent-to-agent-edge.tsx

@@ -1,5 +1,6 @@
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react';
 import { ArrowRight, ArrowRightLeft } from 'lucide-react';
+import { AnimatedCircle } from '@/components/agent/edges/default-edge';
 import type { A2AEdgeData } from '../configuration/edge-types';
 
 interface AgentToAgentEdgeProps extends EdgeProps {
@@ -22,6 +23,7 @@ export function AgentToAgentEdge({
     delegateTargetToSource: false,
     delegateSourceToTarget: false,
   };
+  const delegating = data?.delegating;
 
   const hasDelegate = relationships.delegateTargetToSource || relationships.delegateSourceToTarget;
   const hasTransfer = relationships.transferTargetToSource || relationships.transferSourceToTarget;
@@ -86,16 +88,20 @@ export function AgentToAgentEdge({
   const delegateMarkerEnd =
     hasDelegate && relationships.delegateSourceToTarget ? getMarker(!!selected) : undefined;
 
+  const className =
+    selected || delegating ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground';
+
   return (
     <>
+      {/* Animated circles based on delegating direction */}
+      {delegating && <AnimatedCircle edgePath={edgePath} inverted={delegating === 'inverted'} />}
+
       {/* Render transfer path (solid line) */}
       {hasTransfer && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
+          className={className}
           path={hasDelegate ? calculateOffsetPath(-3)[0] : edgePath}
-          style={{
-            strokeWidth: 2,
-          }}
+          style={{ strokeWidth: 2 }}
           markerEnd={transferMarkerEnd}
           markerStart={transferMarkerStart}
         />
@@ -104,7 +110,7 @@ export function AgentToAgentEdge({
       {/* Render delegate path (dashed line) */}
       {hasDelegate && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
+          className={className}
           path={hasTransfer ? calculateOffsetPath(3)[0] : edgePath}
           style={{
             strokeDasharray: '5,5',

package/src/components/agent/edges/default-edge.tsx

@@ -1,6 +1,39 @@
 import { BaseEdge, type EdgeProps, getBezierPath } from '@xyflow/react';
+import { type FC, useRef, useEffect } from 'react';
 
-type DefaultEdgeProps = EdgeProps;
+type DefaultEdgeProps = EdgeProps & {
+  data?: {
+    delegating: boolean | 'inverted';
+  };
+};
+
+export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
+  edgePath,
+  inverted,
+}) => {
+  const ref = useRef<SVGAnimateElement>(null);
+
+  // Without this useEffect, the animation won't start when this component is rendered dynamically.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We need restart animation when invert is changed
+  useEffect(() => {
+    ref.current?.beginElement();
+  }, [inverted]);
+
+  return (
+    <circle fill="var(--primary)" r="6">
+      <animateMotion
+        ref={ref}
+        dur="2s"
+        path={edgePath}
+        {...(inverted && {
+          pathLength: '1',
+          keyPoints: '1;0',
+          keyTimes: '0;1',
+        })}
+      />
+    </circle>
+  );
+};
 
 export function DefaultEdge({
   id,
@@ -13,6 +46,7 @@ export function DefaultEdge({
   label,
   selected,
   markerEnd,
+  data,
 }: DefaultEdgeProps) {
   const [edgePath] = getBezierPath({
     sourceX,
@@ -23,16 +57,25 @@ export function DefaultEdge({
     targetPosition,
   });
 
+  const className =
+    selected || data?.delegating
+      ? '!stroke-primary'
+      : '!stroke-border dark:!stroke-muted-foreground';
+
   return (
-    <BaseEdge
-      id={id}
-      path={edgePath}
-      label={label}
-      markerEnd={markerEnd}
-      style={{
-        strokeWidth: 2,
-      }}
-      className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
-    />
+    <>
+      {/* Animated circles based on delegating direction */}
+      {data?.delegating && (
+        <AnimatedCircle edgePath={edgePath} inverted={data.delegating === 'inverted'} />
+      )}
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        label={label}
+        markerEnd={markerEnd}
+        style={{ strokeWidth: 2 }}
+        className={className}
+      />
+    </>
   );
 }

package/src/components/agent/node-library/node-item.tsx

@@ -23,7 +23,7 @@ export function NodeItem({ node }: NodeItemProps) {
       role="button"
       tabIndex={disabled ? -1 : 0}
       aria-label={`Drag ${name} node`}
-      className="border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 flex font-medium items-center text-sm rounded-md p-2 justify-between gap-2 text-left h-auto w-full group group-hover:bg-muted/50 transition-all ease-in-out duration-200 cursor-grab active:cursor-grabbing"
+      className="backdrop-blur-3xl border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 flex font-medium items-center text-sm rounded-md p-2 justify-between gap-2 text-left h-auto w-full group group-hover:bg-muted/50 transition-all ease-in-out duration-200 cursor-grab active:cursor-grabbing"
       draggable={!disabled}
       onDragStart={(e) => onDragStart(e, node)}
     >

package/src/components/agent/nodes/base-node.tsx

@@ -1,30 +1,25 @@
-import { forwardRef, type HTMLAttributes } from 'react';
+import { type FC, forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '@/lib/utils';
 
 interface BaseNodeProps extends HTMLAttributes<HTMLDivElement> {
   isSelected?: boolean;
 }
 
-export const BaseNode = forwardRef<HTMLDivElement, BaseNodeProps>(
-  ({ className, isSelected, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'relative rounded-lg border bg-card text-card-foreground',
-        'hover:ring-2 hover:ring-gray-700/5',
-        // React Flow displays node elements inside of a `NodeWrapper` component,
-        // which compiles down to a div with a the class `react-flow__node`.
-        // When a node is selected, the class `selected` is added to the
-        // `react-flow__node` element. This allows us to style the node when it
-        isSelected && 'ring-2 ring-primary hover:ring-primary',
-        className
-      )}
-      // tabIndex={0}
-      {...props}
-    />
-  )
+export const BaseNode: FC<BaseNodeProps> = ({ className, isSelected, ...props }) => (
+  <div
+    className={cn(
+      'relative rounded-lg border bg-card text-card-foreground',
+      // React Flow displays node elements inside of a `NodeWrapper` component,
+      // which compiles down to a div with a the class `react-flow__node`.
+      // When a node is selected, the class `selected` is added to the
+      // `react-flow__node` element. This allows us to style the node when it
+      isSelected ? 'ring-2 ring-primary' : 'hover:ring-2 hover:ring-gray-700/5',
+      className
+    )}
+    // tabIndex={0}
+    {...props}
+  />
 );
-BaseNode.displayName = 'BaseNode';
 
 /**
  * A container for a consistent header layout intended to be used inside the

package/src/components/agent/nodes/external-agent-node.tsx

@@ -9,10 +9,11 @@ import { ErrorIndicator } from '../error-display/error-indicator';
 import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
 import { NodeTab } from './node-tab';
+import { cn } from '@/lib/utils';
 
 export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
   const { data, selected, id } = props;
-  const { name, description } = data;
+  const { name, description, isExecuting } = data;
   const { getNodeErrors, hasNodeErrors } = useAgentErrors();
 
   // Use the agent ID from node data if available, otherwise fall back to React Flow node ID
@@ -22,10 +23,14 @@ export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
 
   return (
     <div className="relative">
-      <NodeTab selected={selected}>External</NodeTab>
+      <NodeTab isSelected={selected}>External</NodeTab>
       <BaseNode
-        isSelected={selected}
-        className={`rounded-tl-none ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        isSelected={selected || data.isDelegating}
+        className={cn(
+          'rounded-tl-none',
+          hasErrors && 'ring-2 ring-red-300 border-red-300',
+          isExecuting && 'node-executing'
+        )}
         style={{ width: NODE_WIDTH }}
       >
         <BaseNodeHeader className="flex items-center justify-between gap-2">

package/src/components/agent/nodes/function-tool-node.tsx

@@ -5,6 +5,7 @@ import { type FunctionToolNodeData, functionToolNodeHandleId } from '../configur
 import { ErrorIndicator } from '../error-display/error-indicator';
 import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
+import { cn } from '@/lib/utils';
 
 export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData }) {
   const { data, selected, id } = props;
@@ -21,8 +22,12 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
   return (
     <div className="relative">
       <BaseNode
-        isSelected={selected}
-        className={`rounded-4xl min-w-40 max-w-xs ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        isSelected={selected || data.isDelegating}
+        className={cn(
+          'rounded-4xl min-w-40 max-w-xs',
+          hasErrors && 'ring-2 ring-red-300 border-red-300',
+          data.isExecuting && 'node-executing'
+        )}
       >
         <BaseNodeHeader className="mb-0 py-3">
           <div className="flex flex-col gap-1.5">

package/src/components/agent/nodes/mcp-node.tsx

@@ -5,8 +5,9 @@ import { Badge } from '@/components/ui/badge';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { getCurrentSelectedToolsForNode } from '@/lib/utils/orphaned-tools-detector';
 import { type MCPNodeData, mcpNodeHandleId } from '../configuration/node-types';
-import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
+import { cn } from '@/lib/utils';
 
 const TOOLS_SHOWN_LIMIT = 4;
 
@@ -78,32 +79,34 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const toolBadges = getToolDisplay();
 
   return (
-    <BaseNode isSelected={selected} className="rounded-4xl min-w-40 min-h-13 max-w-3xs">
-      <BaseNodeHeader className="mb-0 py-3">
-        <div className="flex items-center flex-wrap gap-1">
-          <div className="flex items-center gap-2 flex-shrink-0 mr-4">
-            <MCPToolImage
-              imageUrl={imageUrl}
-              name={name}
-              provider={provider || undefined}
-              size={24}
-              className="mt-[1px] flex-shrink-0"
-            />
-            <BaseNodeHeaderTitle className="flex-shrink-0">{name}</BaseNodeHeaderTitle>
-          </div>
-          <div className="flex items-center flex-wrap gap-1">
-            {toolBadges.map((label, index) => (
-              <Badge
-                key={index}
-                variant="code"
-                className="px-2 text-2xs text-gray-700 dark:text-gray-300 flex-shrink-0"
-              >
-                {label}
-              </Badge>
-            ))}
-          </div>
-        </div>
+    <BaseNode
+      isSelected={selected || data.isDelegating}
+      className={cn(
+        'rounded-4xl min-w-40 min-h-13 max-w-3xs',
+        data.isExecuting && 'node-executing'
+      )}
+    >
+      <BaseNodeHeader className="flex items-center justify-between gap-2">
+          <MCPToolImage
+            imageUrl={imageUrl}
+            name={name}
+            provider={provider || undefined}
+            size={24}
+            className="flex-shrink-0"
+          />
+          <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
       </BaseNodeHeader>
+      <BaseNodeContent>
+        {toolBadges.map((label, index) => (
+          <Badge
+            key={index}
+            variant="code"
+            className="px-2 text-2xs text-gray-700 dark:text-gray-300 flex-shrink-0"
+          >
+            {label}
+          </Badge>
+        ))}
+      </BaseNodeContent>
       <Handle id={mcpNodeHandleId} type="target" position={Position.Top} isConnectable />
     </BaseNode>
   );

package/src/components/agent/nodes/node-tab.tsx

@@ -1,16 +1,17 @@
+import type { FC, ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 
 interface NodeTabProps {
-  selected: boolean;
-  children: React.ReactNode;
+  isSelected?: boolean;
+  children: ReactNode;
 }
 
-export function NodeTab({ selected, children }: NodeTabProps) {
+export const NodeTab: FC<NodeTabProps> = ({ isSelected, children }) => {
   return (
     <div
       className={cn(
-        ' px-2 py-0.5 rounded-t-md flex items-center gap-2 w-fit border border-b-0 font-medium font-mono text-xs uppercase',
-        selected
+        'px-2 py-0.5 rounded-t-md flex items-center gap-2 w-fit border border-b-0 font-medium font-mono text-xs uppercase',
+        isSelected
           ? 'bg-primary border-primary text-white ring-2 ring-primary'
           : 'bg-muted text-muted-foreground border-border'
       )}
@@ -18,4 +19,4 @@ export function NodeTab({ selected, children }: NodeTabProps) {
       {children}
     </div>
   );
-}
+};

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

@@ -14,6 +14,7 @@ import { ErrorIndicator } from '../error-display/error-indicator';
 import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
 import { NodeTab } from './node-tab';
+import { cn } from '@/lib/utils';
 
 const ListSection = ({
   title,
@@ -73,10 +74,14 @@ export function SubAgentNode(props: NodeProps & { data: AgentNodeData }) {
 
   return (
     <div className="relative">
-      {isDefault ? <NodeTab selected={selected}>Default</NodeTab> : null}
+      {isDefault && <NodeTab isSelected={selected || data.isDelegating}>Default</NodeTab>}
       <BaseNode
-        isSelected={selected}
-        className={`${isDefault ? 'rounded-tl-none' : ''} ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        isSelected={selected || data.isDelegating}
+        className={cn(
+          isDefault && 'rounded-tl-none',
+          hasErrors && 'ring-2 ring-red-300 border-red-300',
+          data.isExecuting && 'node-executing'
+        )}
         style={{ width: NODE_WIDTH }}
       >
         <BaseNodeHeader className="flex items-center justify-between gap-2">

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',