@eventcatalog/core 5.6.1 → 5.7.1

package/eventcatalog/src/features/studio/catalog.ts

@@ -97,15 +97,17 @@ export const buildContainer = (resource: CatalogResource, center: { x: number; y
  * A domain or system as a container with everything it holds in the catalog: its systems (as containers too)
  * and services, and the messages and data stores of those services, so every level of detail (L1 to L3) has
  * something to show. Laid out with the visualiser's layout and centred on a point, with the connections between
- * them and to related resources already on the canvas. Resources already on the canvas aren't added again.
+ * them and to related resources already on the canvas. Resources already on the canvas aren't added again, nor
+ * any in `alsoAdding` (by catalog key: added some other way at the same time, e.g. by an agent in the same call).
  */
 export const buildContainerWithContents = async (
   resource: CatalogResource,
   center: { x: number; y: number },
   catalog: { resourcesByKey: Map<string, CatalogResource>; relationsByKey: Map<string, CatalogRelation[]> },
-  existing: Node[]
+  existing: Node[],
+  alsoAdding: ReadonlySet<string> = new Set()
 ): Promise<{ nodes: Node[]; edges: Edge[] }> => {
-  const onCanvas = new Set(existing.map((node) => getCatalogLink(node)?.key).filter(Boolean));
+  const onCanvas = new Set([...existing.map((node) => getCatalogLink(node)?.key).filter(Boolean), ...alsoAdding]);
   const root = buildContainer(resource, { x: 0, y: 0 });
   const nodes: Node[] = [root];
   const added = (key: string) => onCanvas.has(key) || nodes.some((node) => getCatalogLink(node)?.key === key);

package/eventcatalog/src/features/studio/components/CanvasHeader.tsx

@@ -10,6 +10,7 @@ import {
   Plug,
   Plus,
   Share2,
+  Sparkles,
   Trash2,
   Users,
 } from 'lucide-react';
@@ -440,6 +441,7 @@ export default memo(function CanvasHeader({
   statusHistory,
   onStatusChange,
   onDelete,
+  onDrawWithAi,
 }: {
   title?: string;
   onRetitle: (title: string) => void;
@@ -470,6 +472,8 @@ export default memo(function CanvasHeader({
   onHelp: () => void;
   /** Ask to delete the canvas (not given where it can't be, e.g. inside a chat) */
   onDelete?: () => void;
+  /** Opens the assistant to draw on the canvas (not given where there isn't one, e.g. inside a chat) */
+  onDrawWithAi?: () => void;
 }) {
   const peers = usePeople(presence);
   const agentsHere = peers.some((peer) => peer.agent);
@@ -505,6 +509,16 @@ export default memo(function CanvasHeader({
           </div>
         )}
         <ProfileMenu me={me} onRename={onRename} onRecolor={onRecolor} />
+        {onDrawWithAi && (
+          <button
+            onClick={onDrawWithAi}
+            title="Describe what to diagram and the assistant draws it here"
+            className={`${barClass} gap-2 px-3 text-sm font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-accent-subtle))]`}
+          >
+            <Sparkles size={16} className="text-[rgb(var(--ec-accent))]" aria-hidden />
+            Draw with AI
+          </button>
+        )}
         <button
           onClick={onShare}
           className="pointer-events-auto inline-flex h-[38px] items-center gap-2 rounded-[9px] bg-[rgb(var(--ec-page-text))] px-4 text-sm font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:bg-[rgb(var(--ec-page-text)/0.85)]"

package/eventcatalog/src/features/studio/components/NodeDetails.tsx

@@ -30,6 +30,7 @@ export default memo(function NodeDetails({
   connections,
   onOpenNode,
   containerRef,
+  nameEmpty,
   locked,
   onChange,
   onClose,
@@ -43,6 +44,8 @@ export default memo(function NodeDetails({
   onOpenNode: (id: string) => void;
   /** The canvas, to put the card next to the node */
   containerRef: RefObject<HTMLElement | null>;
+  /** Its name starts empty, to type it straight in (a node just made: it keeps its name if nothing's typed) */
+  nameEmpty?: boolean;
   locked: boolean;
   onChange: UpdateNodeData;
   onClose: () => void;
@@ -112,6 +115,7 @@ export default memo(function NodeDetails({
                 onSaved={showSaved}
                 placeholder={`Name this ${label.toLowerCase()}`}
                 className="ec-editable-title"
+                startEmpty={nameEmpty}
                 required
               />
             </Field>

package/eventcatalog/src/features/studio/components/StudioDesigner.tsx

@@ -98,6 +98,12 @@ import {
   type HotspotSeverity,
   type HotspotSpot,
   RemeasureHandles,
+  ConnectChooser,
+  isCardType,
+  newCardData,
+  notPlaceholder,
+  useConnectNew,
+  type NewLink,
 } from '@eventcatalog/visualiser/studio';
 import { X } from 'lucide-react';
 import type { CatalogRelation, CatalogResource } from '../catalog-resources';
@@ -127,6 +133,12 @@ import ShareDialog from './ShareDialog';
 import DeleteCanvasDialog from './DeleteCanvasDialog';
 import { createCanvasThroughApi, deleteCanvasThroughApi } from '../api/client';
 import ShortcutsDialog from './ShortcutsDialog';
+import {
+  ASSISTANT_DRAWING_EVENT,
+  CANVAS_FOCUS_EVENT,
+  CANVAS_HOTSPOT_EVENT,
+  OPEN_CHAT_EVENT,
+} from '../../../components/ChatPanel/assistant-events';
 
 type CanvasProps = {
   canvasId: string;
@@ -159,6 +171,8 @@ type CanvasProps = {
   asAgent?: { name: string; color: string };
   /** Signed in with the catalog's sign-in (SSO): you're shown by this name and picture, and can't change them */
   signedInAs?: { name: string; picture?: string };
+  /** The catalog's assistant (Ask AI) is on the page: "Draw with AI" opens it to draw on the canvas */
+  assistant?: boolean;
   resources: CatalogResource[];
   relations: CatalogRelation[];
 };
@@ -192,6 +206,7 @@ type Landing = {
 };
 const DELETE_KEYS = ['Backspace', 'Delete'];
 const NO_THREADS: ReadonlySet<string> = new Set();
+const NO_HOTSPOTS: ReadonlySet<string> = new Set();
 // React Flow's warnings, except that a handle has no node: the left panel's drag previews draw nodes off the canvas
 const onFlowError = (code: string, message: string) => {
   if (code !== '010') console.warn(message);
@@ -333,6 +348,9 @@ export default function StudioDesigner({ asAgent, signedInAs, ...props }: Canvas
   );
 }
 
+// The assistant's panel (ChatPanelButton, in the page header) opens on this; on a canvas it draws on it
+const openAssistant = () => window.dispatchEvent(new Event(OPEN_CHAT_EVENT));
+
 const toSocketUrl = (socketPath = DEFAULT_SOCKET_PATH) =>
   `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}${socketPath}`;
 
@@ -347,6 +365,7 @@ function Canvas({
   mcpUrl = '/docs/mcp',
   relayScriptPath,
   keptInMemory = false,
+  assistant = false,
   syncViaTools,
   followChanges = false,
   paletteCollapsed,
@@ -625,11 +644,23 @@ function Canvas({
     centring.current.set(id, { level, size });
     flow.setLevelLayout(level, new Map([[id, centredOn(center, size)]]));
   };
-  /** A component (its type, or its key in the components list: the kinds of data store share a type) */
-  const addComponentAt = (component: string, point: XYPosition) => {
-    if (component === 'note') return addNoteAt(point);
+  /**
+   * A component (its type, or its key in the components list: the kinds of data store share a type), connected to
+   * the node a connection was dragged from when there is one
+   */
+  const addComponentAt = (component: string, point: XYPosition, link?: NewLink) => {
+    if (component === 'note') return void addNoteAt(point);
     const at = landingAt(point, getNodeDefinition(component)?.type ?? component);
-    keepOnLevel(at, flow.addNode(component, at.center, at.inside));
+    const id = flow.addNode(component, at.center, at.inside, link);
+    keepOnLevel(at, id);
+    return id;
+  };
+  /** A new domain or system as a card (the visualiser's, as Studio on the web makes them), connected to `link`'s node */
+  const addCardAt = (type: 'context-domain' | 'system', point: XYPosition, link: NewLink) => {
+    const at = landingAt(point, type);
+    const id = flow.insertNode(type, newCardData(type), at.center, undefined, at.inside, link);
+    keepOnLevel(at, id);
+    return id;
   };
 
   const addComponent = useStableCallback((type: string) => addComponentAt(type, canvasCenter()));
@@ -728,6 +759,21 @@ function Canvas({
     trackPointer(event);
   });
 
+  // ---- Connecting to something new: a connection let go of on empty canvas ----
+
+  // A placeholder where it was let go of, connected to the node it came from, until what it is is chosen beside it
+  const connect = useConnectNew({
+    canvasRef,
+    getNode: (id) => nodesRef.current.find((node) => node.id === id),
+    getLevel: () => levelRef.current,
+    locked,
+    onMake: (option, center, link) => {
+      const id = isCardType(option.type) ? addCardAt(option.type, center, link) : addComponentAt(option.key, center, link);
+      // Selected, and its details open to name it, once it's on the canvas
+      if (id) editOnceShown.current = id;
+    },
+  });
+
   // While the canvas is panned, zoomed or dragged, message edges stop animating (a class, not state, so nothing re-renders)
   const interactions = useRef({ moving: false, dragging: false });
   const setInteraction = useCallback((kind: 'moving' | 'dragging', on: boolean) => {
@@ -940,7 +986,13 @@ function Canvas({
   // Comments that are part of the selection (selecting everything selects them too): only here, like what nodes
   // are selected. While what's selected is dragged, the ones not on a node move with it by this much.
   const [selectedThreads, setSelectedThreads] = useState<ReadonlySet<string>>(NO_THREADS);
-  const clearSelectedThreads = useCallback(() => setSelectedThreads((current) => (current.size ? NO_THREADS : current)), []);
+  // Hotspots too (selecting everything selects them, and deleting it deletes them)
+  const [selectedHotspots, setSelectedHotspots] = useState<ReadonlySet<string>>(NO_HOTSPOTS);
+  /** Comments and hotspots stop being part of the selection */
+  const clearSelectedPins = useCallback(() => {
+    setSelectedThreads((current) => (current.size ? NO_THREADS : current));
+    setSelectedHotspots((current) => (current.size ? NO_HOTSPOTS : current));
+  }, []);
   const [threadsOffset, setThreadsOffset] = useState<XYPosition | null>(null);
   const threadsShown = () => comments.threads.filter((thread) => showResolved || !thread.resolved);
   const [contextMenu, setContextMenu] = useState<ContextMenuState>(null);
@@ -972,6 +1024,7 @@ function Canvas({
     setTool('select');
     setDraft(null);
     setOpenThreadId(null);
+    connect.cancel();
     // What's selected may not be on the next level (e.g. a note added on this one)
     flow.onNodesChange(selectedIds().map((id) => ({ type: 'select', id, selected: false })));
     setLevel(next);
@@ -1193,7 +1246,8 @@ function Canvas({
    * removes it from the canvas (the level is drawn from it); and moving or resizing something arranges the level,
    * kept when it's dropped.
    */
-  const onLevelNodesChange = useStableCallback((changes: NodeChange[]) => {
+  const onLevelNodesChange = useStableCallback((allChanges: NodeChange[]) => {
+    const changes = allChanges.filter(notPlaceholder);
     const level = levelRef.current;
     const current = levelGraphRef.current;
     if (level === 3 || !current) return;
@@ -1232,6 +1286,11 @@ function Canvas({
     });
     if (measured.length) flow.setLevelLayout(level, new Map(measured));
   });
+  /** Changes on the canvas (L3), apart from the placeholder's */
+  const onCanvasNodesChange = useStableCallback((allChanges: NodeChange[]) => {
+    const changes = allChanges.filter(notPlaceholder);
+    if (changes.length) flow.onNodesChange(changes);
+  });
   /** Connecting two things on L1 or L2 connects them on the canvas (e.g. a relationship between two systems) */
   const onLevelConnect = useStableCallback((connection: Connection) => {
     const onCanvas = new Set(nodesRef.current.map((node) => node.id));
@@ -1254,6 +1313,13 @@ function Canvas({
         : edge
     );
   }, [levelEdges, flow.edges, hovered]);
+  // With the placeholder, while a connection let go of on empty canvas is waiting to be told what it connects to
+  const { placeholder } = connect;
+  const flowNodes = useMemo(
+    () => (placeholder ? [...visibleNodes, placeholder.node] : visibleNodes),
+    [visibleNodes, placeholder]
+  );
+  const flowEdges = useMemo(() => (placeholder ? [...shownEdges, placeholder.edge] : shownEdges), [shownEdges, placeholder]);
   // A canvas opened from a diagram has the levels the diagram has (until what's on it changes)
   const unavailableLevels = useMemo(() => {
     const reason = (level: 1 | 2) => {
@@ -1281,6 +1347,57 @@ function Canvas({
 
   const [following, setFollowing] = useState(followChanges);
   const toggleFollowing = useCallback(() => setFollowing((on) => !on), []);
+  // Asking the assistant (Ask AI) to draw on this canvas follows it while it works
+  useEffect(() => {
+    const followAssistant = (event: Event) => {
+      if ((event as CustomEvent<{ canvasId?: string }>).detail?.canvasId === canvasId) setFollowing(true);
+    };
+    window.addEventListener(ASSISTANT_DRAWING_EVENT, followAssistant);
+    return () => window.removeEventListener(ASSISTANT_DRAWING_EVENT, followAssistant);
+  }, [canvasId]);
+
+  // The assistant taking you to part of the canvas (showOnCanvas, a walkthrough's steps): zoomed to, and selected. On
+  // the canvas people edit (L3), where everything is.
+  const focusOn = useStableCallback((ids: string[]) => {
+    const nodes = lookupNodes();
+    const found = ids.filter((id) => nodes.has(id));
+    if (!found.length) return;
+    const changingLevel = levelRef.current !== 3;
+    if (changingLevel) changeLevel(3);
+    // You're looking around now: following the agent would take the camera back to its pointer a moment later
+    setFollowing(false);
+    // Once the level's switched (and drawn), if it was
+    setTimeout(
+      () => {
+        select(new Set(found));
+        void fitView({ nodes: found.map((id) => ({ id })), duration: 600, padding: 0.35, maxZoom: 1.2 });
+      },
+      changingLevel ? 400 : 0
+    );
+  });
+  useEffect(() => {
+    const focus = (event: Event) => {
+      const { canvasId: on, nodeIds } = (event as CustomEvent<{ canvasId?: string; nodeIds?: string[] }>).detail ?? {};
+      if (on === canvasId && nodeIds?.length) focusOn(nodeIds);
+    };
+    window.addEventListener(CANVAS_FOCUS_EVENT, focus);
+    return () => window.removeEventListener(CANVAS_FOCUS_EVENT, focus);
+  }, [canvasId, focusOn]);
+  // ...and to a hotspot it flagged, opened
+  const showHotspot = useStableCallback((hotspotId: string) => {
+    const hotspot = flow.hotspots.find((candidate) => candidate.id === hotspotId);
+    if (!hotspot) return;
+    setFollowing(false);
+    goToHotspot(hotspot);
+  });
+  useEffect(() => {
+    const show = (event: Event) => {
+      const { canvasId: on, hotspotId } = (event as CustomEvent<{ canvasId?: string; hotspotId?: string }>).detail ?? {};
+      if (on === canvasId && hotspotId) showHotspot(hotspotId);
+    };
+    window.addEventListener(CANVAS_HOTSPOT_EVENT, show);
+    return () => window.removeEventListener(CANVAS_HOTSPOT_EVENT, show);
+  }, [canvasId, showHotspot]);
 
   const [shareOpen, setShareOpen] = useState<false | 'choose' | 'invite'>(false);
   const openShare = useCallback(() => setShareOpen('choose'), []);
@@ -1411,6 +1528,8 @@ function Canvas({
       flow.onEdgesChange(edgesRef.current.map((edge) => ({ type: 'select', id: edge.id, selected: true })));
       // ...and the comments shown on it
       setSelectedThreads(new Set(threadsShown().map((thread) => thread.id)));
+      // ...and its hotspots (the ones on L1 and L2's own places are on those levels)
+      setSelectedHotspots(new Set(flow.hotspots.filter((hotspot) => !hotspot.level).map((hotspot) => hotspot.id)));
     },
     { preventDefault: true }
   );
@@ -1445,7 +1564,7 @@ function Canvas({
     setTool('select');
     setDraft(null);
     setOpenThreadId(null);
-    clearSelectedThreads();
+    clearSelectedPins();
     setEditingId(null);
     flow.onNodesChange(
       nodesRef.current.filter((node) => node.selected).map((node) => ({ type: 'select', id: node.id, selected: false }))
@@ -1454,11 +1573,16 @@ function Canvas({
       edgesRef.current.filter((edge) => edge.selected).map((edge) => ({ type: 'select', id: edge.id, selected: false }))
     );
   });
-  // Selected comments are deleted with what's selected (React Flow deletes the nodes and edges)
+  // Selected comments and hotspots are deleted with what's selected (React Flow deletes the nodes and edges)
   useHotkeys(DELETE_KEYS, () => {
-    if (!onCanvas() || selectedThreads.size === 0) return;
-    comments.deleteThreads([...selectedThreads]);
-    clearSelectedThreads();
+    if (!onCanvas() || (selectedThreads.size === 0 && selectedHotspots.size === 0)) return;
+    if (selectedThreads.size) comments.deleteThreads([...selectedThreads]);
+    // (hotspots, like nodes, stay on a locked canvas)
+    if (!locked) {
+      selectedHotspots.forEach((id) => flow.deleteHotspot(id));
+      if (selectedHotspots.size) setOpenHotspot(null);
+    }
+    clearSelectedPins();
   });
   /** A tool that puts something down: picked, or put back to selecting if it was already */
   const pickTool = useStableCallback((next: 'text' | 'note' | 'comment' | 'hotspot') => {
@@ -1491,7 +1615,9 @@ function Canvas({
   // A place on L1 or L2 is on that level (they're laid out on their own): what's put there says so
   const placeLevel = () => (levelRef.current === 3 ? {} : { level: levelRef.current as 1 | 2 });
   const onPaneClick = useStableCallback((event: ReactMouseEvent) => {
-    clearSelectedThreads();
+    clearSelectedPins();
+    // An open hotspot closes on a click anywhere else on the canvas
+    setOpenHotspot(null);
     if (tool === 'hand') return;
     if (commentMode && editable) return startComment(anchorAt(flowPositionOf(event)));
     // Flagging: a hotspot where it's clicked
@@ -1527,7 +1653,8 @@ function Canvas({
 
   const onNodeClick = useStableCallback((event: ReactMouseEvent, node: Node) => {
     // Clicking one node selects just it (with shift or ⌘, it's added to what's selected)
-    if (!event.shiftKey && !event.metaKey) clearSelectedThreads();
+    if (!event.shiftKey && !event.metaKey) clearSelectedPins();
+    setOpenHotspot(null);
     // Not on notes and text: they're written on, not what's being flagged or commented on
     if (isWrittenOnCanvas(node.type)) return;
     // A hotspot on it (it shows on the node, wherever it goes, on every level it's on)
@@ -1654,6 +1781,20 @@ function Canvas({
   // The node whose details are being edited in its card: opened with the edit button over it, by double clicking it,
   // or "Edit details" in its menu (selecting a node doesn't open it). Notes are edited on the canvas.
   const [editingId, setEditingId] = useState<string | null>(null);
+  // Made at the end of a connection: selected and its details opened once it's on the canvas (looked for as what's on
+  // it changes, not as things move), its name empty to type it straight in. NodeDetails is keyed by the node, so its
+  // name starts empty when its card opens, and only then (the next card opened, even its own again, doesn't).
+  const editOnceShown = useRef<string | null>(null);
+  const [justMadeId, setJustMadeId] = useState<string | null>(null);
+  useEffect(() => {
+    const id = editOnceShown.current;
+    if (!id || !nodesRef.current.some((node) => node.id === id)) return;
+    editOnceShown.current = null;
+    select(new Set([id]));
+    setEditingId(id);
+    setJustMadeId(id);
+  }, [flow.structureKey]);
+  useEffect(() => setJustMadeId((id) => (id === editingId ? id : null)), [editingId]);
   const editing = editingId ? flow.nodes.find((node) => node.id === editingId && !isWrittenOnCanvas(node.type)) : undefined;
   // What the card shows (not the node's position, so dragging it doesn't re-render the card)
   const inspected = useMemo(
@@ -1706,8 +1847,8 @@ function Canvas({
                   onDoubleClick={onCanvasDoubleClick}
                 >
                   <ReactFlow
-                    nodes={visibleNodes}
-                    edges={shownEdges}
+                    nodes={flowNodes}
+                    edges={flowEdges}
                     onNodeMouseEnter={onNodeMouseEnter}
                     onNodeMouseLeave={onHoverEnd}
                     onEdgeMouseEnter={onEdgeMouseEnter}
@@ -1717,12 +1858,15 @@ function Canvas({
                     nodesDraggable={!locked && tool !== 'hand'}
                     nodesConnectable={!locked && tool !== 'hand'}
                     elementsSelectable={tool !== 'hand'}
-                    onNodesChange={editable ? flow.onNodesChange : onLevelNodesChange}
+                    onNodesChange={editable ? onCanvasNodesChange : onLevelNodesChange}
                     onEdgesChange={editable ? flow.onEdgesChange : undefined}
                     onConnect={editable ? flow.onConnect : onLevelConnect}
+                    onConnectEnd={connect.onConnectEnd}
                     // Drag either end of a connection to another node (dropped anywhere else, it stays where it was)
                     edgesReconnectable={editable && !locked}
                     onReconnect={editable ? flow.onReconnect : undefined}
+                    onReconnectStart={connect.onReconnectStart}
+                    onReconnectEnd={connect.onReconnectEnd}
                     reconnectRadius={RECONNECT_RADIUS}
                     onDragOver={locked ? undefined : onDragOver}
                     onMoveStart={onMoveStart}
@@ -1735,7 +1879,7 @@ function Canvas({
                     onNodeClick={onNodeClick}
                     onNodeDoubleClick={onNodeDoubleClick}
                     onError={onFlowError}
-                    onSelectionStart={clearSelectedThreads}
+                    onSelectionStart={clearSelectedPins}
                     onPaneContextMenu={onPaneContextMenu}
                     onNodeContextMenu={onNodeContextMenu}
                     connectionLineType={ConnectionLineType.SmoothStep}
@@ -1785,7 +1929,7 @@ function Canvas({
                       draft={hotspotDraft}
                       locked={locked}
                       movable={!locked}
-                      selectedIds={null}
+                      selectedIds={selectedHotspots.size ? selectedHotspots : null}
                       onMove={moveHotspots}
                       onDropTarget={setHotspotDropTarget}
                       onOpen={setOpenHotspot}
@@ -1969,6 +2113,7 @@ function Canvas({
                     statusHistory={flow.canvasStatus.history}
                     onStatusChange={flow.changeStatus}
                     onDelete={canvasesApiUrl ? openDelete : undefined}
+                    onDrawWithAi={assistant ? openAssistant : undefined}
                   />
 
                   {flow.deleted && !leaving && (
@@ -2016,6 +2161,7 @@ function Canvas({
                       connections={inspectedConnections}
                       onOpenNode={openConnected}
                       containerRef={canvasRef}
+                      nameEmpty={inspected.id === justMadeId}
                       locked={locked}
                       onChange={flow.updateNodeData}
                       onClose={closePanel}
@@ -2023,6 +2169,7 @@ function Canvas({
                   )}
                 </div>
 
+                {connect.chooser && <ConnectChooser {...connect.chooser} />}
                 {chooser && (
                   <ContainerChooser
                     kind={chooser.resource.collection === 'domains' ? 'domain' : 'system'}

package/eventcatalog/src/features/studio/hooks/use-studio-flow.ts

@@ -55,6 +55,8 @@ import {
   canGoInContainer,
   getNodeDefinition,
   isGroupType,
+  linkConnection,
+  type NewLink,
   createHotspot as createHotspotInDoc,
   updateHotspot as updateHotspotInDoc,
   deleteHotspot as deleteHotspotInDoc,
@@ -599,7 +601,8 @@ export function useStudioFlow({
 
   /**
    * Add a node centred on a canvas position. `connect` gets the new node's id and the nodes already
-   * on the canvas, and returns edges to add with it (e.g. a catalog resource's relationships).
+   * on the canvas, and returns edges to add with it (e.g. a catalog resource's relationships). `link` connects it to
+   * the node a connection was dragged from (in the same change, so one undo takes both back).
    */
   const insertNode = useCallback(
     (
@@ -607,7 +610,8 @@ export function useStudioFlow({
       data: Record<string, unknown>,
       center: XYPosition,
       connect?: (id: string, existing: Node[]) => Edge[],
-      inside?: string
+      inside?: string,
+      link?: NewLink
     ) => {
       const built = buildNode(type, data, center);
       withDoc((doc) => {
@@ -618,6 +622,7 @@ export function useStudioFlow({
           ? { ...built, parentId: group.id, position: toRelativePosition(built.position, group.id, existing) }
           : built;
         addNodes(doc, [node], connect?.(node.id, existing) ?? []);
+        if (link) connectNodes(doc, linkConnection(node.id, link));
         if (group) fitGroupToChildren(doc, group.id, renderedSizes());
       });
       return built.id;
@@ -627,9 +632,9 @@ export function useStudioFlow({
 
   /** Add a node of a component (its type, or its key in the components list), centred on a canvas position (in a container, if asked) */
   const addNode = useCallback(
-    (component: string, center: XYPosition, inside?: string) => {
+    (component: string, center: XYPosition, inside?: string, link?: NewLink) => {
       const definition = getNodeDefinition(component);
-      return definition ? insertNode(definition.type, definition.createData(), center, undefined, inside) : undefined;
+      return definition ? insertNode(definition.type, definition.createData(), center, undefined, inside, link) : undefined;
     },
     [insertNode]
   );

package/eventcatalog/src/features/studio/pages/[id].astro

@@ -11,6 +11,7 @@ import { getCatalogResources } from '../catalog-resources';
 import { startStudio, STUDIO_SOCKET_PATH } from '../server/runtime';
 import { getSignedInUser, isSignedIn } from '../server/sign-in';
 import { CANVASES_API_PATH } from '../api/canvases-api';
+import { isEventCatalogChatVisible } from '@utils/feature';
 
 export const prerender = false;
 
@@ -59,6 +60,7 @@ const signedInAs = getSignedInUser(Astro.locals);
           mcpUrl={buildUrl('/docs/mcp', true)}
           relayScriptPath={buildUrl('/webmcp-relay/embed.js', true)}
           keptInMemory={keptInMemory}
+          assistant={isEventCatalogChatVisible()}
           signedInAs={signedInAs}
           resources={resources}
           relations={relations}