@eventcatalog/core 3.3.0 → 3.4.0

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/asyncapi/[filename].astro

@@ -9,6 +9,8 @@ import '@asyncapi/react-component/styles/default.min.css';
 import js from '@asyncapi/react-component/browser/standalone/without-parser.js?url';
 import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import CopyAsMarkdown from '@components/CopyAsMarkdown';
+import { isEventCatalogChatEnabled } from '@utils/feature';
 import Config from '@utils/eventcatalog-config/catalog';
 import { Page } from './_[filename].data';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
@@ -46,6 +48,10 @@ const renderedComponent = renderToString(component);
 // Capitalize the first letter of a string
 const pageTitle = `${collection} | ${data.name} | AsyncApi Spec`.replace(/^\w/, (c) => c.toUpperCase());
 
+// Chat configuration
+const chatEnabled = isEventCatalogChatEnabled();
+const chatQuery = `Tell me about the AsyncAPI specification for "${data.name}" (version ${data.version})`;
+
 // Index only the latest version
 const pagefindAttributes =
   data.version === data.latestVersion
@@ -57,13 +63,30 @@ const pagefindAttributes =
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
-  <div {...pagefindAttributes}>
+  <div {...pagefindAttributes} class="relative">
     {
       // Currently, Pagefind does not index metadata (such as the title),
       // so we need to ensure it is included as text on the page.
       // https://github.com/CloudCannon/pagefind/issues/437
     }
     <h2 class="hidden">{pageTitle}</h2>
+    {
+      chatEnabled && (
+        <div class="absolute top-3 right-4 z-10">
+          <CopyAsMarkdown
+            client:only="react"
+            schemas={[]}
+            chatQuery={chatQuery}
+            chatEnabled={chatEnabled}
+            editUrl=""
+            markdownDownloadEnabled={false}
+            rssFeedEnabled={false}
+            preferChatAsDefault={true}
+            chatButtonText="Ask about this specification"
+          />
+        </div>
+      )
+    }
     <div id="asyncapi" class="md:pr-14" set:html={renderedComponent} />
   </div>
 </VerticalSideBarLayout>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -586,8 +586,10 @@ nodeGraphs.push({
       async function renderDiagrams(graphs: any) {
         const { default: mermaid } = await import('mermaid');
 
+        // @ts-ignore
         if (window.eventcatalog.mermaid) {
           const { icons } = await import('@iconify-json/logos');
+          // @ts-ignore
           const { iconPacks = [], enableSupportForElkLayout = false } = window.eventcatalog.mermaid ?? {};
 
           if (iconPacks.length > 0) {

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/[filename].astro

@@ -4,6 +4,8 @@ import OpenAPISpec from './_OpenAPI.tsx';
 
 import { DocumentMinusIcon } from '@heroicons/react/24/outline';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import CopyAsMarkdown from '@components/CopyAsMarkdown';
+import { isEventCatalogChatEnabled } from '@utils/feature';
 import './_styles.css';
 import { Page } from './_[filename].data.ts';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
@@ -27,6 +29,10 @@ let content = '';
 // Capitalize the first letter of a string
 const pageTitle = `${collection} | ${data.name} | OpenAPI Spec`.replace(/^\w/, (c) => c.toUpperCase());
 
+// Chat configuration
+const chatEnabled = isEventCatalogChatEnabled();
+const chatQuery = `Tell me about the OpenAPI specification for "${data.name}" (version ${data.version})`;
+
 // Index only the latest version
 const pagefindAttributes =
   data.version === data.latestVersion
@@ -57,13 +63,28 @@ if (isRemote) {
         </p>
       </div>
     ) : (
-      <div {...pagefindAttributes}>
+      <div {...pagefindAttributes} class="relative">
         {
           // Currently, Pagefind does not index metadata (such as the title),
           // so we need to ensure it is included as text on the page.
           // https://github.com/CloudCannon/pagefind/issues/437
         }
         <h2 class="hidden">{pageTitle}</h2>
+        {chatEnabled && (
+          <div class="absolute top-3 right-14 z-10">
+            <CopyAsMarkdown
+              client:only="react"
+              schemas={[]}
+              chatQuery={chatQuery}
+              chatEnabled={chatEnabled}
+              editUrl=""
+              markdownDownloadEnabled={false}
+              rssFeedEnabled={false}
+              preferChatAsDefault={true}
+              chatButtonText="Ask about this specification"
+            />
+          </div>
+        )}
         <OpenAPISpec client:only="react" spec={content} />
       </div>
     )

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/_OpenAPI.tsx

@@ -1,13 +1,38 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { ApiReferenceReact } from '@scalar/api-reference-react';
 import '@scalar/api-reference-react/style.css';
 import './_styles.css';
+
 const OpenAPISpec = ({ spec }: { spec: string }) => {
   const [loaded, setLoaded] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  });
+
+  useEffect(() => {
+    // Watch for theme changes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'data-theme') {
+          const theme = document.documentElement.getAttribute('data-theme');
+          setIsDarkMode(theme === 'dark');
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div>
       {!loaded && <div>Loading...</div>}
       <ApiReferenceReact
+        key={isDarkMode ? 'dark' : 'light'}
         configuration={{
           spec: {
             content: spec,
@@ -17,13 +42,12 @@ const OpenAPISpec = ({ spec }: { spec: string }) => {
           onLoaded: () => {
             setLoaded(true);
           },
-          forceDarkModeState: 'light',
-          darkMode: false,
+          forceDarkModeState: isDarkMode ? 'dark' : 'light',
+          darkMode: isDarkMode,
           defaultOpenAllTags: true,
           hideDarkModeToggle: true,
           searchHotKey: 'p',
           showSidebar: true,
-          customCss: 'bg-red-500',
         }}
       />
     </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version].mdx.ts

@@ -45,15 +45,11 @@ export async function getStaticPaths() {
 }
 
 export const GET: APIRoute = async ({ params, props }) => {
-  console.log('props', props);
-
   // Just return empty array if LLMs are not enabled
   if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 
-  console.log('params', params);
-
   if (isSSR()) {
     const { getResourcePath } = utils(process.env.PROJECT_DIR ?? '');
     const filePath = await getResourcePath(process.env.PROJECT_DIR ?? '', params.id ?? '', params.version ?? '');

package/eventcatalog/src/utils/feature.ts

@@ -69,3 +69,5 @@ export const isCustomStylesEnabled = () => {
 };
 
 export const isDiagramComparisonEnabled = () => isEventCatalogScaleEnabled();
+
+export const isEventCatalogMCPEnabled = () => isEventCatalogScaleEnabled() && isSSR();

package/eventcatalog/tsconfig.json

@@ -22,5 +22,5 @@
     "jsxImportSource": "react",
     "types": ["vitest/globals"]
   },
-  "exclude": ["**/*.spec.ts", "**/*.test.ts"]
+  "include": ["src/**/*", "*.config.*"]
 }

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -41,6 +41,7 @@
     "@heroicons/react": "^2.1.3",
     "@iconify-json/logos": "^1.2.4",
     "@mermaid-js/layout-elk": "^0.2.0",
+    "@modelcontextprotocol/sdk": "^1.25.2",
     "@nanostores/react": "^1.0.0",
     "@parcel/watcher": "^2.4.1",
     "@radix-ui/react-context-menu": "^2.2.6",
@@ -54,7 +55,7 @@
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
     "ai": "^6.0.17",
-    "astro": "^5.16.7",
+    "astro": "^5.16.8",
     "astro-compress": "^2.3.8",
     "astro-expressive-code": "^0.41.3",
     "astro-seo": "^0.8.4",
@@ -72,6 +73,7 @@
     "elkjs": "^0.10.0",
     "glob": "^10.5.0",
     "gray-matter": "^4.0.3",
+    "hono": "^4.11.3",
     "html-to-image": "^1.11.11",
     "js-yaml": "^4.1.1",
     "jsonpath": "^1.1.1",