@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,125 @@
+import { type NodeProps, Position } from '@xyflow/react';
+import { Bot, Component, Library, type LucideIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { AnthropicIcon } from '@/components/icons/anthropic';
+import { OpenAIIcon } from '@/components/icons/openai';
+import { Badge } from '@/components/ui/badge';
+import { NODE_WIDTH } from '@/features/graph/domain/deserialize';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphErrors } from '@/hooks/use-graph-errors';
+import type { AgentNodeData } from '../configuration/node-types';
+import { agentNodeSourceHandleId, agentNodeTargetHandleId } from '../configuration/node-types';
+import { ErrorIndicator } from '../error-display/error-indicator';
+import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+import { Handle } from './handle';
+import { NodeTab } from './node-tab';
+
+const ListSection = ({
+  title,
+  items,
+  Icon,
+}: {
+  title: string;
+  items: string[];
+  Icon: LucideIcon;
+}) => {
+  return (
+    <div className="flex flex-col gap-3 pt-2">
+      <div className="flex items-center justify-start gap-2">
+        <Icon className="size-3 text-xs text-muted-foreground" />
+        <div className="text-xs uppercase font-mono text-muted-foreground">{title}</div>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {items?.map((name) => (
+          <Badge key={name} className="text-xs" variant="code">
+            {name}
+          </Badge>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export function AgentNode(props: NodeProps & { data: AgentNodeData }) {
+  const { data, selected, id } = props;
+  const { name, isDefault, description, models } = data;
+  const modelName = models?.base?.model;
+
+  const dataComponentLookup = useGraphStore((state) => state.dataComponentLookup);
+  const artifactComponentLookup = useGraphStore((state) => state.artifactComponentLookup);
+  const { getNodeErrors, hasNodeErrors } = useGraphErrors();
+
+  // Use the agent ID from node data if available, otherwise fall back to React Flow node ID
+  const agentId = data.id || id;
+  const nodeErrors = getNodeErrors(agentId);
+  const hasErrors = hasNodeErrors(agentId);
+
+  const dataComponentNames = useMemo(
+    () =>
+      data?.dataComponents?.map((id: string) => dataComponentLookup[id]?.name).filter(Boolean) ||
+      [],
+    [data?.dataComponents, dataComponentLookup]
+  );
+  const artifactComponentNames = useMemo(
+    () =>
+      data?.artifactComponents
+        ?.map((id: string) => artifactComponentLookup[id]?.name)
+        .filter(Boolean) || [],
+    [data?.artifactComponents, artifactComponentLookup]
+  );
+
+  return (
+    <div className="relative">
+      {isDefault ? <NodeTab selected={selected}>Default</NodeTab> : null}
+      <BaseNode
+        isSelected={selected}
+        className={`${isDefault ? 'rounded-tl-none' : ''} ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        style={{ width: NODE_WIDTH }}
+      >
+        <BaseNodeHeader className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <Bot className="size-4 text-muted-foreground" />
+            <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
+          </div>
+          {hasErrors && (
+            <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />
+          )}
+        </BaseNodeHeader>
+        <BaseNodeContent>
+          <div
+            className={`text-sm ${description ? ' text-muted-foreground' : 'text-muted-foreground/50'}`}
+          >
+            {description || 'No description'}
+          </div>
+          {models && modelName ? (
+            <Badge className="text-xs max-w-full flex-1" variant="code">
+              {modelName?.startsWith('openai') ? (
+                <OpenAIIcon className="size-3 text-xs text-muted-foreground flex-shrink-0" />
+              ) : modelName?.startsWith('anthropic') ? (
+                <AnthropicIcon className="size-3 text-xs flex-shrink-0" />
+              ) : null}
+              <div className="truncate w-full">{modelName || ''}</div>
+            </Badge>
+          ) : null}
+          {dataComponentNames?.length > 0 && (
+            <ListSection title="Data components" items={dataComponentNames} Icon={Component} />
+          )}
+          {artifactComponentNames?.length > 0 && (
+            <ListSection
+              title="Artifact components"
+              items={artifactComponentNames}
+              Icon={Library}
+            />
+          )}
+        </BaseNodeContent>
+        <Handle id={agentNodeTargetHandleId} type="source" position={Position.Top} isConnectable />
+        <Handle
+          id={agentNodeSourceHandleId}
+          type="source"
+          position={Position.Bottom}
+          isConnectable
+        />
+      </BaseNode>
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { 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}
+    />
+  )
+);
+BaseNode.displayName = 'BaseNode';
+
+/**
+ * A container for a consistent header layout intended to be used inside the
+ * `<BaseNode />` component.
+ */
+export const BaseNodeHeader = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <header
+      ref={ref}
+      {...props}
+      className={cn(
+        'mx-0 my-0 -mb-1 flex flex-row items-center justify-between gap-2 px-4 pt-4 pb-0',
+        // Remove or modify these classes if you modify the padding in the
+        // `<BaseNode />` component.
+        className
+      )}
+    />
+  )
+);
+BaseNodeHeader.displayName = 'BaseNodeHeader';
+
+/**
+ * The title text for the node. To maintain a native application feel, the title
+ * text is not selectable.
+ */
+export const BaseNodeHeaderTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    data-slot="base-node-title"
+    className={cn('user-select-none flex-1 font-semibold text-sm', className)}
+    {...props}
+  />
+));
+BaseNodeHeaderTitle.displayName = 'BaseNodeHeaderTitle';
+
+export const BaseNodeContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="base-node-content"
+      className={cn('flex flex-col gap-y-2 p-4 text-foreground', className)}
+      {...props}
+    />
+  )
+);
+BaseNodeContent.displayName = 'BaseNodeContent';
+
+export const BaseNodeFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="base-node-footer"
+      className={cn('flex flex-col items-center gap-y-2 border-t px-4 pb-4 pt-3', className)}
+      {...props}
+    />
+  )
+);
+BaseNodeFooter.displayName = 'BaseNodeFooter';

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

@@ -0,0 +1,55 @@
+import { type NodeProps, Position } from '@xyflow/react';
+import { BotMessageSquare } from 'lucide-react';
+import { NODE_WIDTH } from '@/features/graph/domain/deserialize';
+import { useGraphErrors } from '@/hooks/use-graph-errors';
+import type { AgentNodeData } from '../configuration/node-types';
+import { externalAgentNodeTargetHandleId } from '../configuration/node-types';
+import { ErrorIndicator } from '../error-display/error-indicator';
+import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+import { Handle } from './handle';
+import { NodeTab } from './node-tab';
+
+export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
+  const { data, selected, id } = props;
+  const { name, description } = data;
+  const { getNodeErrors, hasNodeErrors } = useGraphErrors();
+
+  // Use the agent ID from node data if available, otherwise fall back to React Flow node ID
+  const agentId = data.id || id;
+  const nodeErrors = getNodeErrors(agentId);
+  const hasErrors = hasNodeErrors(agentId);
+
+  return (
+    <div className="relative">
+      <NodeTab selected={selected}>External</NodeTab>
+      <BaseNode
+        isSelected={selected}
+        className={`rounded-tl-none ${hasErrors ? 'ring-2 ring-red-300 border-red-300' : ''}`}
+        style={{ width: NODE_WIDTH }}
+      >
+        <BaseNodeHeader className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <BotMessageSquare className="size-4 text-muted-foreground" />
+            <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
+          </div>
+          {hasErrors && (
+            <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />
+          )}
+        </BaseNodeHeader>
+        <BaseNodeContent>
+          <div
+            className={`text-sm ${description ? ' text-muted-foreground' : 'text-muted-foreground/50'}`}
+          >
+            {description || 'No description'}
+          </div>
+        </BaseNodeContent>
+        <Handle
+          id={externalAgentNodeTargetHandleId}
+          type="target"
+          position={Position.Top}
+          isConnectable
+        />
+      </BaseNode>
+    </div>
+  );
+}

package/src/components/graph/nodes/handle.tsx

@@ -0,0 +1,14 @@
+import { type HandleProps, Handle as ReactFlowHandle } from '@xyflow/react';
+import { cn } from '@/lib/utils';
+
+export function Handle({ className, ...props }: HandleProps) {
+  return (
+    <ReactFlowHandle
+      {...props}
+      className={cn(
+        '!h-3 !w-3 !border-2 !border-border !bg-card dark:!bg-muted !shadow-sm',
+        className
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,37 @@
+import { type NodeProps, Position } from '@xyflow/react';
+import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
+import type { MCPTool } from '@/lib/api/tools';
+import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
+import { mcpNodeHandleId } from '../configuration/node-types';
+import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+import { Handle } from './handle';
+
+export function MCPNode(props: NodeProps & { data: MCPTool }) {
+  const { data, selected } = props;
+  const { name, imageUrl } = data;
+  let provider = null;
+  try {
+    provider = getToolTypeAndName(data).type;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <BaseNode
+      isSelected={selected}
+      className="rounded-full min-w-40 min-h-13 max-w-3xs flex items-center justify-center"
+    >
+      <BaseNodeHeader className="mb-0 py-3">
+        <MCPToolImage
+          imageUrl={imageUrl}
+          name={name}
+          provider={provider || undefined}
+          size={24}
+          className="mt-[1px] flex-shrink-0"
+        />
+        <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
+      </BaseNodeHeader>
+      <Handle id={mcpNodeHandleId} type="target" position={Position.Top} isConnectable />
+    </BaseNode>
+  );
+}

package/src/components/graph/nodes/mcp-placeholder-node.tsx

@@ -0,0 +1,23 @@
+import type { NodeProps } from '@xyflow/react';
+import { Hammer } from 'lucide-react';
+import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+
+type MCPPlaceholderNodeData = {
+  name: string;
+};
+
+export function MCPPlaceholderNode(props: NodeProps & { data: MCPPlaceholderNodeData }) {
+  const { data, selected } = props;
+  const { name } = data;
+  return (
+    <BaseNode
+      isSelected={selected}
+      className={`rounded-full border-dashed min-w-40 min-h-13 flex items-center justify-center max-w-3xs ${selected ? 'outline-dashed outline-2 outline-gray-700 hover:outline-gray-700 ring-0 hover:ring-0' : ''}`}
+    >
+      <BaseNodeHeader className="mb-0 py-3">
+        <Hammer className="size-4 text-muted-foreground/65" />
+        <BaseNodeHeaderTitle className="text-muted-foreground">{name}</BaseNodeHeaderTitle>
+      </BaseNodeHeader>
+    </BaseNode>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils';
+
+interface NodeTabProps {
+  selected: boolean;
+  children: React.ReactNode;
+}
+
+export function NodeTab({ selected, children }: NodeTabProps) {
+  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',
+        selected
+          ? 'bg-primary border-primary text-white ring-2 ring-primary'
+          : 'bg-muted text-muted-foreground border-border'
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,202 @@
+'use client';
+import { InkeepEmbeddedChat } from '@inkeep/cxkit-react-oss';
+import type { ComponentsConfig, InkeepCallbackEvent } from '@inkeep/cxkit-react-oss/types';
+import { EXECUTION_API_BASE_URL } from '@/lib/api/api-config';
+import { IkpMessage as IkpMessageComponent } from './ikp-message';
+import { nanoid } from 'nanoid';
+
+interface ChatWidgetProps {
+  graphId?: string;
+  projectId: string;
+  tenantId: string;
+  conversationId: string;
+  setConversationId: (conversationId: string) => void;
+  startPolling: () => void;
+  stopPolling: () => void;
+}
+
+const styleOverrides = `
+.ikp-ai-chat-wrapper {
+  height: 100%;
+  max-height: unset;
+  box-shadow: none;
+}
+.ikp-ai-chat-message-wrapper {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+}
+[data-role="user"] .ikp-ai-chat-message-header {
+  display: none;
+}
+
+.ikp-ai-chat-message-header {
+  margin-bottom: 16px;
+}
+
+.ikp-ai-chat-message-wrapper:not(:last-child):after {
+  border-bottom-width: 0px;
+}
+ [data-role="user"] .ikp-ai-chat-message-name {
+  display: none;
+  margin-bottom: 0px;
+}
+.ikp-ai-chat-message-content, .ikp-ai-chat-input {
+  font-size: 14px;
+}
+.ikp-ai-chat-message-avatar-content {
+  width: 24px;
+  height: 24px;
+}
+[data-widget-md] .ikp-ai-chat-message-avatar {
+  height: 24px;
+}
+.ikp-ai-chat-message-name {
+  background: none;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-left: 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ikp-color-gray-600);
+}
+.ikp-ai-chat-tagline__text {
+  font-size: 13px;
+}
+.ikp-ai-chat-input__fieldset {
+  padding: 4px;
+}
+.ikp-ai-chat-input__send-button {
+  height: 36px;
+  width: 36px;
+}
+.ikp-ai-chat-tagline__logo {
+  display: none;
+}
+.ikp-ai-chat-tagline__brand-name {
+  font-weight: 500;
+}
+.ikp-ai-chat-tagline__brand-name:before {
+  content: '';
+  margin-top: 1px;
+  margin-left: 6px;
+  margin-right: 3px;
+  width: 20px;
+  height: 20px;
+  background: url('/assets/logo-outline.svg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* Dark mode styles for chat containers */
+[data-theme=dark] .ikp-sidebar-chat__close-button {
+  color: var(--ikp-color-gray-50);
+}
+[data-theme=dark] .ikp-ai-chat-message-name {
+  background: none;
+}
+`;
+
+export function ChatWidget({
+  graphId,
+  projectId,
+  tenantId,
+  conversationId,
+  setConversationId,
+  startPolling,
+  stopPolling,
+}: ChatWidgetProps) {
+  return (
+    <div className="h-full flex flex-row gap-4">
+      <div className="flex-1 min-w-0 h-full">
+        <InkeepEmbeddedChat
+          baseSettings={{
+            onEvent: (event: InkeepCallbackEvent) => {
+              if (event.eventName === 'user_message_submitted') {
+                startPolling();
+              }
+              if (event.eventName === 'chat_clear_button_clicked') {
+                stopPolling();
+                setConversationId(nanoid());
+              }
+            },
+            primaryBrandColor: '#3784ff',
+            colorMode: {
+              sync: {
+                target: document.documentElement,
+                attributes: ['class'],
+                isDarkMode: (attributes: Record<string, string | null>) =>
+                  !!attributes?.class?.includes('dark'),
+              },
+            },
+            theme: {
+              styles: [
+                {
+                  key: 'custom-styles',
+                  type: 'style',
+                  value: styleOverrides,
+                },
+              ],
+              colors: {
+                gray: {
+                  50: '#fafaf9',
+                  100: '#f4f4f3',
+                  200: '#eeeceb',
+                  300: '#dedbd9',
+                  400: '#cec7c2',
+                  500: '#a9a19a',
+                  600: '#75716b',
+                  700: '#58534e',
+                  800: '#443f3e',
+                  900: '#2b2826',
+                  950: '#1a1817',
+                  1000: '#080706',
+                },
+                grayDark: {
+                  950: 'oklch(0.141 0.005 285.823)',
+                },
+              },
+            },
+          }}
+          aiChatSettings={{
+            conversationId,
+            graphUrl: graphId ? `${EXECUTION_API_BASE_URL}/api/chat` : undefined,
+            headers: {
+              'x-inkeep-tenant-id': tenantId,
+              'x-inkeep-project-id': projectId,
+              'x-inkeep-graph-id': graphId,
+              Authorization: `Bearer ${process.env.NEXT_PUBLIC_INKEEP_AGENTS_RUN_BYPASS_SECRET}`,
+            },
+            components: {
+              IkpMessage,
+            },
+            introMessage: 'Hi!'
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const IkpMessage: ComponentsConfig<Record<string, unknown>>['IkpMessage'] = (props) => {
+  const { message, renderMarkdown, renderComponent } = props;
+
+  // Check if we're still streaming - the last event should be a completion data-operation
+  const lastPart = message.parts[message.parts.length - 1];
+  const isStreaming = !(
+    lastPart?.type === 'data-operation' && lastPart?.data?.type === 'completion'
+  );
+
+  // Use our new IkpMessage component
+  return (
+    <div>
+      <IkpMessageComponent
+        message={message as any}
+        isStreaming={isStreaming}
+        renderMarkdown={renderMarkdown}
+        renderComponent={renderComponent}
+      />
+    </div>
+  );
+};