@eventcatalog/core 5.6.1 → 5.7.1

package/eventcatalog/src/components/ChatPanel/ChatPanelButton.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Sparkles } from 'lucide-react';
 import ChatPanel from './ChatPanel';
+import { OPEN_CHAT_EVENT } from './assistant-events';
 
 const ChatPanelButton = ({ configured = false }: { configured?: boolean }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -25,10 +26,10 @@ const ChatPanelButton = ({ configured = false }: { configured?: boolean }) => {
       }
     };
     window.addEventListener('keydown', handleShortcut);
-    window.addEventListener('eventcatalog:open-chat', handleOpenChat);
+    window.addEventListener(OPEN_CHAT_EVENT, handleOpenChat);
     return () => {
       window.removeEventListener('keydown', handleShortcut);
-      window.removeEventListener('eventcatalog:open-chat', handleOpenChat);
+      window.removeEventListener(OPEN_CHAT_EVENT, handleOpenChat);
     };
   }, []);
 

package/eventcatalog/src/components/ChatPanel/assistant-events.ts

@@ -0,0 +1,37 @@
+/** Window events between the assistant (Ask AI) and the page it's on, e.g. a Studio canvas */
+
+/** Opens the assistant's panel */
+export const OPEN_CHAT_EVENT = 'eventcatalog:open-chat';
+
+/** The assistant was asked something on a Studio canvas (detail: { canvasId }), which it may draw on */
+export const ASSISTANT_DRAWING_EVENT = 'eventcatalog:assistant-drawing';
+
+/** Takes the person to nodes on the Studio canvas they have open (detail: { canvasId, nodeIds }): zoomed to, and selected */
+export const CANVAS_FOCUS_EVENT = 'eventcatalog:canvas-focus';
+
+/** Links the assistant writes that take the person to nodes on the canvas: `#canvas-focus=<node id>,<node id>` */
+const FOCUS_LINK = '#canvas-focus=';
+export const nodesInFocusLink = (href: string | undefined) =>
+  href?.startsWith(FOCUS_LINK)
+    ? href
+        .slice(FOCUS_LINK.length)
+        .split(',')
+        .map((id) => decodeURIComponent(id.trim()))
+        .filter(Boolean)
+    : undefined;
+
+/** Takes the person to a hotspot on the Studio canvas they have open, and opens it (detail: { canvasId, hotspotId }) */
+export const CANVAS_HOTSPOT_EVENT = 'eventcatalog:canvas-hotspot';
+
+/**
+ * References the assistant writes to something on the canvas, drawn like the docs' resource references and taking
+ * the person to it: `#canvas-ref=<type>:<node id>` (the type, e.g. service or event, gives its icon and colour)
+ */
+const REF_LINK = '#canvas-ref=';
+export const canvasRefIn = (href: string | undefined) => {
+  if (!href?.startsWith(REF_LINK)) return undefined;
+  const value = decodeURIComponent(href.slice(REF_LINK.length)).trim();
+  const split = value.indexOf(':');
+  const [type, nodeId] = split === -1 ? ['', value] : [value.slice(0, split).trim(), value.slice(split + 1).trim()];
+  return nodeId ? { type: type.toLowerCase(), nodeId } : undefined;
+};

package/eventcatalog/src/components/MDX/NodeGraph/AstroNodeGraph.tsx

@@ -17,6 +17,7 @@ import { createPortal } from 'react-dom';
 import type { Node, Edge } from '@xyflow/react';
 import type { FlowGroupBy, OpenInStudioRequest } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
+import { getNodeDiagramPath } from '@utils/node-graphs/node-resource';
 import { createCanvasThroughApi } from '@features/studio/api/client';
 import { getStoredName } from '@features/studio/identity';
 
@@ -84,9 +85,27 @@ interface AstroNodeGraphProps {
   swimlanes?: FlowGroupBy;
   // The Studio API's address, when Studio is on: the menu can then start a canvas from the diagram
   studioApiUrl?: string;
+  // Clicking a node opens its diagram (when the catalog has the visualiser's pages)
+  opensDiagrams?: boolean;
 }
 
-const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...otherProps }: AstroNodeGraphProps) => {
+const withoutTrailingSlash = (path: string) => path.replace(/\/+$/, '');
+
+/** The diagram page a node opens, unless it's the page this is (e.g. the service on its own diagram) */
+const getNodeDiagramUrl = (node: Node) => {
+  const path = getNodeDiagramPath(node);
+  if (!path) return undefined;
+  const url = buildUrl(path);
+  return withoutTrailingSlash(url) === withoutTrailingSlash(window.location.pathname) ? undefined : url;
+};
+
+const AstroNodeGraph = ({
+  isDevMode = false,
+  resourceKey,
+  studioApiUrl,
+  opensDiagrams = false,
+  ...otherProps
+}: AstroNodeGraphProps) => {
   // Astro-specific navigation handler
   const handleNavigate = useCallback((url: string) => {
     // Use window.location for navigation since we can't import astro:transitions/client in a React component
@@ -167,6 +186,7 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...other
         isDevMode={isDevMode}
         onNavigate={handleNavigate}
         onBuildUrl={handleBuildUrl}
+        getNodeDiagramUrl={opensDiagrams ? getNodeDiagramUrl : undefined}
         onSaveLayout={handleSaveLayout}
         onResetLayout={handleResetLayout}
         onOpenInStudio={studioApiUrl ? setToOpen : undefined}

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -31,7 +31,7 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForChannel } from '@utils/node-graphs/channel-node-graph';
 import config from '@config';
-import { isEventCatalogChatVisible, isDevMode, isCanvasEnabled } from '@utils/feature';
+import { isEventCatalogChatVisible, isDevMode, isCanvasEnabled, isVisualiserEnabled } from '@utils/feature';
 import { CANVASES_API_PATH } from '@features/studio/api/canvases-api';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { compactVisualiserGraph } from '@utils/node-graphs/compact-visualiser-graph';
@@ -268,6 +268,7 @@ if (overview && levelsOverview) {
     swimlanes={lanes}
     studioApiUrl={studioApiUrl}
     syncRenderModeWithUrl={syncRenderModeWithUrl}
+    opensDiagrams={isVisualiserEnabled()}
   />
 </div>
 

package/eventcatalog/src/components/MDX/ResourceRef/ResourceRef.astro

@@ -15,6 +15,7 @@ import {
 import { getCollection } from 'astro:content';
 import { getServiceSpecifications, getSpecUrl, getSpecLabel } from '@components/Grids/specification-utils';
 import { getResourceReferenceStyle } from '@utils/resource-reference-colors';
+import { getResourceReferenceIcon } from '@utils/resource-reference-icons';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
 import {
   getResourceReferenceUrl,
@@ -88,41 +89,8 @@ const typeLabels: Record<string, string> = {
   'data-product': 'Data Product',
 };
 
-// SVG icons for each type (from heroicons outline)
-const typeIcons: Record<string, string> = {
-  agent:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M12 6V3m-4.5 7.5h9m-9 3h9M7.5 18h9A2.5 2.5 0 0019 15.5v-5A2.5 2.5 0 0016.5 8h-9A2.5 2.5 0 005 10.5v5A2.5 2.5 0 007.5 18zM9 21h6" />',
-  entity:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />', // Box/cube
-  service:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />', // Server
-  event:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />', // Bolt
-  command:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />', // ChatBubble
-  query:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />', // MagnifyingGlass
-  domain:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />', // RectangleGroup
-  flow: '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />', // QueueList
-  channel:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />', // ArrowsRightLeft
-  diagram:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />', // Map
-  container:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />', // Database
-  user: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />', // User
-  team: '<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />', // UserGroup
-  doc: '<path stroke-linecap="round" stroke-linejoin="round" d="M14 2v4a2 2 0 002 2h4" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7z" /><path stroke-linecap="round" stroke-linejoin="round" d="M10 9H8" /><path stroke-linecap="round" stroke-linejoin="round" d="M16 13H8" /><path stroke-linecap="round" stroke-linejoin="round" d="M16 17H8" />', // FileText
-  'data-product':
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25M21 7.5v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />', // Cube
-  system:
-    '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />', // Group (systems)
-  adr: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /><path stroke-linecap="round" stroke-linejoin="round" d="M9 7h2" />', // ClipboardList-ish (ADR)
-};
-
 const label = typeLabels[type] || typeLabels.entity;
-const iconPath = typeIcons[type] || typeIcons.entity;
+const iconPath = getResourceReferenceIcon(type);
 const resourceReferenceStyle = getResourceReferenceStyle(type);
 
 let resource: any = null;

package/eventcatalog/src/features/ai/chat-api.ts

@@ -10,7 +10,7 @@ import {
   type UIMessage,
 } from 'ai';
 import { join } from 'node:path';
-import { isDevMode } from '@utils/feature';
+import { isCanvasEnabled, isDevMode } from '@utils/feature';
 import { getCollection, getEntry } from 'astro:content';
 import { z } from 'astro/zod';
 import { getConsumersOfMessage, getProducersOfMessage } from '@utils/collections/services';
@@ -38,6 +38,8 @@ const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
 // How many model calls one answer may take. Questions across several domains need many tool calls, so the last
 // step has tools turned off: the model has to answer with what it found, rather than stop without a reply.
 const MAX_STEPS = 10;
+// Drawing a diagram on a Studio canvas takes more: finding the resources, adding them, connecting and tidying
+const MAX_CANVAS_STEPS = 20;
 
 export const defaultConfiguration = {
   temperature: 0.4,
@@ -204,7 +206,8 @@ export const GET = async ({ request }: APIContext<{ question: string; messages:
 };
 
 export const POST = async ({ request }: APIContext<{ question: string; messages: Message[]; additionalContext?: string }>) => {
-  const { messages }: { messages: UIMessage[] } = await request.json();
+  // canvasId: the Studio canvas the assistant was opened on, which it can draw on
+  const { messages, canvasId }: { messages: UIMessage[]; canvasId?: string } = await request.json();
 
   if (!hasChatConfiguration) {
     return chatConfigurationErrorResponse();
@@ -214,6 +217,12 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
   const referrer = request.headers.get('referer');
 
   try {
+    const canvas =
+      canvasId && isCanvasEnabled()
+        ? (await import('@features/studio/server/assistant-tools')).getCanvasAssistant(canvasId)
+        : undefined;
+    const maxSteps = canvas ? MAX_CANVAS_STEPS : MAX_STEPS;
+
     const tools = {
       getResources: tool({
         description: toolDescriptions.getResources,
@@ -390,19 +399,29 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
           return { suggestions: questions };
         },
       }),
+      ...canvas?.tools,
       ...extendedTools,
     };
 
     const result = streamText({
       model,
-      instructions: getBaseSystemPrompt(referrer ?? ''),
+      instructions: getBaseSystemPrompt(referrer ?? '') + (canvas?.instructions ?? ''),
       messages: await convertToModelMessages(messages),
       temperature: modelConfiguration?.temperature ?? 0.7,
-      stopWhen: isStepCount(MAX_STEPS),
-      prepareStep: ({ stepNumber }) => (stepNumber === MAX_STEPS - 1 ? { toolChoice: 'none' } : undefined),
+      // The provider's own options (e.g. { anthropic: { effort: 'low' } }), from eventcatalog.chat.js's configuration
+      providerOptions: modelConfiguration?.providerOptions,
+      stopWhen: isStepCount(maxSteps),
+      prepareStep: ({ stepNumber }) => (stepNumber === maxSteps - 1 ? { toolChoice: 'none' } : undefined),
       onError: (error) => {
         console.error('[Chat] On error', error);
       },
+      // On a canvas: shown planning while it writes what to add, and what it drew tidied once it's finished
+      ...(canvas && {
+        onChunk: ({ chunk }) => {
+          if (chunk.type === 'tool-input-start') canvas.startedWriting(chunk.toolName);
+        },
+        onEnd: () => canvas.finished().catch((error) => console.error('[Chat] Could not tidy the canvas', error)),
+      }),
       tools,
     });