@eventcatalog/core 3.8.2 → 3.9.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.8.2";
+var version = "3.9.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-MOBOWLEW.js";
-import "../chunk-KBMXUUXX.js";
+} from "../chunk-HJOMVPCL.js";
+import "../chunk-UYBPI4UO.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.8.2";
+var version = "3.9.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-I7HRERRK.js";
-import "../chunk-MOBOWLEW.js";
-import "../chunk-KBMXUUXX.js";
+} from "../chunk-FM44RPBS.js";
+import "../chunk-HJOMVPCL.js";
+import "../chunk-UYBPI4UO.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-OCD75GFW.js → chunk-CZG5RQXY.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-275AT7XV.js";
+} from "./chunk-OQYLI4YJ.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-I7HRERRK.js → chunk-FM44RPBS.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-MOBOWLEW.js";
+} from "./chunk-HJOMVPCL.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-MOBOWLEW.js → chunk-HJOMVPCL.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-KBMXUUXX.js";
+} from "./chunk-UYBPI4UO.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-275AT7XV.js → chunk-OQYLI4YJ.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-KBMXUUXX.js";
+} from "./chunk-UYBPI4UO.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-KBMXUUXX.js → chunk-UYBPI4UO.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.8.2";
+var version = "3.9.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "3.8.2";
+var version = "3.9.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-KBMXUUXX.js";
+} from "./chunk-UYBPI4UO.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -109,7 +109,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.8.2";
+var version = "3.9.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-I7HRERRK.js";
-import "./chunk-MOBOWLEW.js";
+} from "./chunk-FM44RPBS.js";
+import "./chunk-HJOMVPCL.js";
 import {
   runMigrations
 } from "./chunk-BH3JMNAV.js";
@@ -21,13 +21,13 @@ import {
 } from "./chunk-5VBIXL6C.js";
 import {
   generate
-} from "./chunk-OCD75GFW.js";
+} from "./chunk-CZG5RQXY.js";
 import {
   logger
-} from "./chunk-275AT7XV.js";
+} from "./chunk-OQYLI4YJ.js";
 import {
   VERSION
-} from "./chunk-KBMXUUXX.js";
+} from "./chunk-UYBPI4UO.js";
 import "./chunk-UPONRQSN.js";
 
 // src/eventcatalog.ts

package/dist/generate.cjs

@@ -73,7 +73,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.8.2";
+var version = "3.9.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-OCD75GFW.js";
-import "./chunk-275AT7XV.js";
-import "./chunk-KBMXUUXX.js";
+} from "./chunk-CZG5RQXY.js";
+import "./chunk-OQYLI4YJ.js";
+import "./chunk-UYBPI4UO.js";
 import "./chunk-UPONRQSN.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.8.2";
+var version = "3.9.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-275AT7XV.js";
-import "../chunk-KBMXUUXX.js";
+} from "../chunk-OQYLI4YJ.js";
+import "../chunk-UYBPI4UO.js";
 export {
   logger
 };

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

@@ -171,6 +171,55 @@ const suggestedQuestionsConfig: QuestionConfig[] = [
       { label: 'Who owns this domain?', prompt: 'Who owns this domain and how do I contact them?' },
     ],
   },
+  // Business Flows / Workflows (must be before general visualiser pattern)
+  {
+    pattern: /^\/(docs|visualiser)\/flows\/.+/,
+    questions: [
+      {
+        label: 'Walk me through this workflow',
+        prompt:
+          'Get the architecture diagram for this flow and walk me through each step of this business workflow. Explain what happens at each stage.',
+      },
+      {
+        label: 'What services are involved?',
+        prompt:
+          'Using the architecture diagram, list all the services involved in this workflow and explain their role in the process.',
+      },
+      {
+        label: 'What events does this trigger?',
+        prompt: 'What events are produced during this workflow? When are they triggered and who consumes them?',
+      },
+      {
+        label: 'What can go wrong?',
+        prompt:
+          'Analyze this workflow and identify potential failure points. What happens if a step fails? Are there retry mechanisms or compensating actions?',
+      },
+    ],
+  },
+  // Visualizer page (/visualiser/*) - general fallback for other visualiser pages
+  {
+    pattern: /^\/visualiser\/.+/,
+    questions: [
+      {
+        label: 'Explain this architecture',
+        prompt:
+          'Get the architecture diagram for this resource and explain what I am looking at. Describe the key components and how they connect.',
+      },
+      {
+        label: 'What are the dependencies?',
+        prompt: 'Using the architecture diagram, show me what this resource depends on and what depends on it.',
+      },
+      {
+        label: 'How does data flow here?',
+        prompt: 'Get the architecture diagram and explain how data flows through this part of the system.',
+      },
+      {
+        label: 'What would break if this changes?',
+        prompt:
+          'Analyze the architecture diagram to identify what services or components would be affected if this resource changes.',
+      },
+    ],
+  },
   // Data Products page
   {
     pattern: /^\/(docs|visualiser)\/data-products\/.+/,
@@ -182,6 +231,7 @@ const suggestedQuestionsConfig: QuestionConfig[] = [
       { label: 'Who owns this data product?', prompt: 'Who owns this data product and how do I contact them?' },
     ],
   },
+
   // Designs page
   {
     pattern: /^\/diagrams\/.+/,

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

@@ -5,7 +5,9 @@ import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 
-import { isVisualiserEnabled } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+
+const isChatEnabled = isEventCatalogChatEnabled();
 
 let design: any;
 let id = 'design';
@@ -57,6 +59,7 @@ try {
           designId={design.id || id}
           client:only="react"
           showSearch={search}
+          isChatEnabled={isChatEnabled}
         />
       </div>
     </div>

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

@@ -5,6 +5,9 @@ import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { getServices } from '@utils/collections/services';
+import { isEventCatalogChatEnabled } from '@utils/feature';
+
+const isChatEnabled = isEventCatalogChatEnabled();
 
 const { id, version = 'latest', maxHeight, includeKey = true, entities, collection = 'domains', ...rest } = Astro.props;
 let resource = null;
@@ -71,6 +74,7 @@ const { nodes, edges } = await getNodesAndEdges({
     footerLabel={`Entity Map - ${resource?.data?.name} - v(${resource?.data?.version})`}
     client:only="react"
     portalId={`${id}-entity-map-portal`}
+    isChatEnabled={isChatEnabled}
   />
 </div>
 

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

@@ -4,7 +4,9 @@ import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
-import { isVisualiserEnabled } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+
+const isChatEnabled = isEventCatalogChatEnabled();
 
 const { id, version = 'latest', maxHeight, includeKey = true, mode = 'simple', walkthrough = true, search = true } = Astro.props;
 
@@ -57,6 +59,7 @@ const { nodes, edges } = await getNodesAndEdges({
     client:only="react"
     showFlowWalkthrough={walkthrough}
     showSearch={search}
+    isChatEnabled={isChatEnabled}
   />
 </div>
 

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

@@ -0,0 +1,240 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { CheckIcon, ClipboardIcon } from 'lucide-react';
+import type { Node, Edge } from '@xyflow/react';
+import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
+import { copyToClipboard } from '@utils/clipboard';
+
+interface MermaidViewProps {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+const MermaidView = ({ nodes, edges }: MermaidViewProps) => {
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [mermaidCode, setMermaidCode] = useState('');
+  const [previewSvg, setPreviewSvg] = useState<string | null>(null);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [isRendering, setIsRendering] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const svgContainerRef = useRef<HTMLDivElement>(null);
+  const panZoomInstanceRef = useRef<any>(null);
+
+  // Generate mermaid code
+  useEffect(() => {
+    const code = convertToMermaid(nodes, edges, { includeStyles: true, direction: 'LR' });
+    setMermaidCode(code);
+  }, [nodes, edges]);
+
+  // Render mermaid preview
+  useEffect(() => {
+    if (!mermaidCode) return;
+
+    let cancelled = false;
+    setIsRendering(true);
+    setPreviewError(null);
+
+    const renderMermaid = async () => {
+      try {
+        const { default: mermaid } = await import('mermaid');
+
+        // Detect current theme
+        const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+        const currentTheme = isDarkMode ? 'dark' : 'default';
+
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: currentTheme,
+          flowchart: {
+            curve: 'basis',
+            padding: 20,
+          },
+          securityLevel: 'loose',
+        });
+
+        const id = 'mermaid-view-' + Math.random().toString(36).substring(2, 9);
+        const { svg } = await mermaid.render(id, mermaidCode);
+
+        if (!cancelled) {
+          setPreviewSvg(svg);
+          setPreviewError(null);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.error('Mermaid render error:', error);
+          setPreviewError(error instanceof Error ? error.message : 'Failed to render diagram');
+          setPreviewSvg(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsRendering(false);
+        }
+      }
+    };
+
+    renderMermaid();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [mermaidCode]);
+
+  // Initialize pan/zoom after SVG is rendered
+  useEffect(() => {
+    if (!previewSvg || !svgContainerRef.current) return;
+
+    const initZoom = async () => {
+      const svgElement = svgContainerRef.current?.querySelector('svg');
+      if (!svgElement) return;
+
+      try {
+        const { default: svgPanZoom } = await import('svg-pan-zoom');
+
+        // Set SVG to fill container
+        svgElement.style.width = '100%';
+        svgElement.style.height = '100%';
+        svgElement.removeAttribute('height');
+        svgElement.removeAttribute('width');
+
+        const instance = svgPanZoom(svgElement, {
+          zoomEnabled: true,
+          controlIconsEnabled: false,
+          fit: true,
+          center: true,
+          minZoom: 0.1,
+          maxZoom: 10,
+          zoomScaleSensitivity: 0.15,
+          dblClickZoomEnabled: true,
+          mouseWheelZoomEnabled: true,
+          panEnabled: true,
+        });
+
+        panZoomInstanceRef.current = instance;
+      } catch (e) {
+        console.warn('Failed to initialize zoom:', e);
+      }
+    };
+
+    initZoom();
+
+    return () => {
+      if (panZoomInstanceRef.current) {
+        try {
+          panZoomInstanceRef.current.destroy();
+        } catch (e) {
+          // Ignore
+        }
+        panZoomInstanceRef.current = null;
+      }
+    };
+  }, [previewSvg]);
+
+  const handleCopyToClipboard = useCallback(async () => {
+    await copyToClipboard(mermaidCode);
+    setCopySuccess(true);
+    setTimeout(() => setCopySuccess(false), 2000);
+  }, [mermaidCode]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full h-full bg-[rgb(var(--ec-page-bg))] relative flex flex-col"
+      style={{ animation: 'fadeIn 200ms ease-out' }}
+    >
+      <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      `}</style>
+
+      {/* Copy button - top right */}
+      <div className="absolute top-[10px] right-4 z-20">
+        <div className="relative group">
+          <button
+            onClick={handleCopyToClipboard}
+            className={`p-2.5 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] transition-all duration-150 ${
+              copySuccess
+                ? 'bg-green-500 text-white scale-110'
+                : 'bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-page-border))/0.5] text-[rgb(var(--ec-icon-color))] hover:scale-105'
+            }`}
+            aria-label={copySuccess ? 'Copied!' : 'Copy Mermaid code'}
+          >
+            {copySuccess ? <CheckIcon className="h-5 w-5" /> : <ClipboardIcon className="h-5 w-5" />}
+          </button>
+          <div className="absolute top-full right-0 mt-2 px-2 py-1 bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+            {copySuccess ? 'Copied!' : 'Copy Mermaid code'}
+          </div>
+        </div>
+      </div>
+
+      {/* Mermaid diagram container */}
+      <div className="flex-1 overflow-hidden">
+        {isRendering && (
+          <div className="w-full h-full flex items-center justify-center">
+            <div className="relative">
+              <div className="flex items-center gap-4 opacity-40">
+                <div className="w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" />
+                <div className="w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" />
+                <div
+                  className="w-20 h-10 bg-[rgb(var(--ec-page-border))] rounded-full animate-pulse"
+                  style={{ animationDelay: '75ms' }}
+                />
+                <div className="w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" style={{ animationDelay: '150ms' }} />
+                <div
+                  className="w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse"
+                  style={{ animationDelay: '225ms' }}
+                />
+              </div>
+              <p className="text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4">Rendering diagram...</p>
+            </div>
+          </div>
+        )}
+
+        {previewError && !isRendering && (
+          <div className="w-full h-full flex flex-col items-center justify-center p-4">
+            <div className="text-red-500 text-sm mb-2">Failed to render diagram</div>
+            <div className="text-[rgb(var(--ec-page-text-muted))] text-xs font-mono bg-[rgb(var(--ec-code-bg))] p-2 rounded max-w-lg overflow-auto">
+              {previewError}
+            </div>
+            <div className="mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]">
+              <p>You can still copy the Mermaid code and paste it into</p>
+              <a
+                href="https://mermaid.live"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[rgb(var(--ec-accent))] hover:underline"
+              >
+                mermaid.live
+              </a>
+            </div>
+          </div>
+        )}
+
+        {previewSvg && !isRendering && !previewError && (
+          <div
+            ref={svgContainerRef}
+            className="w-full h-full cursor-grab active:cursor-grabbing [&_svg]:w-full [&_svg]:h-full"
+            dangerouslySetInnerHTML={{ __html: previewSvg }}
+          />
+        )}
+      </div>
+
+      {/* Footer hint */}
+      <div className="absolute bottom-4 left-4 z-20">
+        <div className="flex items-center gap-2 bg-[rgb(var(--ec-card-bg))]/90 backdrop-blur-sm px-3 py-1.5 rounded-md shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <svg className="w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+            />
+          </svg>
+          <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Scroll to zoom · Drag to pan</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MermaidView;

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

@@ -19,6 +19,9 @@ import { getVersionFromCollection } from '@utils/collections/versions';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import config from '@config';
+import { isEventCatalogChatEnabled } from '@utils/feature';
+
+const isChatEnabled = isEventCatalogChatEnabled();
 
 interface Props {
   id: string;
@@ -154,6 +157,7 @@ if (collection === 'services-containers') {
     showSearch={showSearch}
     includeKey={showLegend}
     zoomOnScroll={zoomOnScroll}
+    isChatEnabled={isChatEnabled}
   />
 </div>