@eventcatalog/core 2.24.2 → 2.25.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 = "2.24.2";
+var version = "2.25.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-Q77NQ43U.js";
-import "../chunk-AMO6QDAS.js";
+} from "../chunk-JENKAK6L.js";
+import "../chunk-H6PSWK2Z.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 = "2.24.2";
+var version = "2.25.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-VOOF34RB.js";
-import "../chunk-Q77NQ43U.js";
-import "../chunk-AMO6QDAS.js";
+} from "../chunk-7674GE3M.js";
+import "../chunk-JENKAK6L.js";
+import "../chunk-H6PSWK2Z.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -247,7 +247,6 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "teams",
     "domains",
     "flows",
-    "pages",
     "changelogs",
     "queries",
     "channels",

package/dist/catalog-to-astro-content-directory.js

@@ -1,6 +1,6 @@
 import {
   catalogToAstro
-} from "./chunk-CXKIF3EI.js";
+} from "./chunk-VCR3LHZR.js";
 import "./chunk-E7TXTI7G.js";
 import "./chunk-7JDTB3U5.js";
 export {

package/dist/{chunk-VOOF34RB.js → chunk-7674GE3M.js}

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

package/dist/{chunk-AMO6QDAS.js → chunk-H6PSWK2Z.js}

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

package/dist/{chunk-Q77NQ43U.js → chunk-JENKAK6L.js}

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

package/dist/{chunk-CXKIF3EI.js → chunk-VCR3LHZR.js}

@@ -47,7 +47,6 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "teams",
     "domains",
     "flows",
-    "pages",
     "changelogs",
     "queries",
     "channels",

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.24.2";
+var version = "2.25.0";
 
 // src/constants.ts
 var VERSION = version;
@@ -435,7 +435,6 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "teams",
     "domains",
     "flows",
-    "pages",
     "changelogs",
     "queries",
     "channels",

package/dist/eventcatalog.config.d.cts

@@ -58,6 +58,7 @@ interface Config {
         enabled: boolean;
         model?: string;
         max_tokens?: number;
+        similarityResults?: number;
     };
 }
 

package/dist/eventcatalog.config.d.ts

@@ -58,6 +58,7 @@ interface Config {
         enabled: boolean;
         model?: string;
         max_tokens?: number;
+        similarityResults?: number;
     };
 }
 

package/dist/eventcatalog.js

@@ -6,14 +6,14 @@ import {
 } from "./chunk-OW2FQPYP.js";
 import {
   log_build_default
-} from "./chunk-VOOF34RB.js";
-import "./chunk-Q77NQ43U.js";
+} from "./chunk-7674GE3M.js";
+import "./chunk-JENKAK6L.js";
 import {
   catalogToAstro
-} from "./chunk-CXKIF3EI.js";
+} from "./chunk-VCR3LHZR.js";
 import {
   VERSION
-} from "./chunk-AMO6QDAS.js";
+} from "./chunk-H6PSWK2Z.js";
 import {
   isBackstagePluginEnabled
 } from "./chunk-XMDPVKIJ.js";

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

@@ -427,8 +427,9 @@ const NodeGraph = ({
               )}
 
               {href && (
-                <div className="py-2 w-full text-right">
-                  <a className=" text-sm no-underline py-2 text-gray-800 hover:text-primary" href={href}>
+                <div className="py-2 w-full text-right flex justify-between">
+                  <span className="text-sm text-gray-500 italic">Right click a node to access documentation</span>
+                  <a className=" text-sm underline text-gray-800 hover:text-primary" href={href}>
                     {hrefLabel} &rarr;
                   </a>
                 </div>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx

@@ -3,6 +3,8 @@ import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 import type { CollectionMessageTypes, CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
 
 interface Data {
   title: string;
@@ -67,67 +69,93 @@ export default function ChannelNode({ data, sourcePosition, targetPosition }: an
   };
 
   return (
-    <div
-      className={classNames(
-        mode === 'simple' ? 'min-h-[3em]' : 'min-h-[6.5em]',
-        'w-full rounded-md border flex justify-start  bg-white text-black border-gray-400 transform  '
-      )}
-    >
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-gray-500 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-gray-100-500',
-          `border-r-[1px] border-gray-500`
-        )}
-      >
-        <ArrowsRightLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            Channel
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {targetPosition && <Handle type="target" position={targetPosition} />}
-        {sourcePosition && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <div className="flex justify-between items-center">
-            <span className="text-xs font-bold block pb-0.5">{name}</span>
-            {Icon && <Icon className="w-5 h-5 opacity-60 p-0.5" />}
-          </div>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Channel</span>}
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <div
+          className={classNames(
+            mode === 'simple' ? 'min-h-[3em]' : 'min-h-[6.5em]',
+            'w-full rounded-md border flex justify-start  bg-white text-black border-gray-400 transform  '
+          )}
+        >
+          <div
+            className={classNames(
+              'bg-gradient-to-b from-gray-500 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-gray-100-500',
+              `border-r-[1px] border-gray-500`
+            )}
+          >
+            <ArrowsRightLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+            {mode === 'full' && (
+              <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+                Channel
+              </span>
+            )}
           </div>
-        </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-[10px] py-1 ">
-              <span className="text-[8px] font-light">{summary}</span>
+          <div className="p-1 min-w-60 max-w-[min-content]">
+            {targetPosition && <Handle type="target" position={targetPosition} />}
+            {sourcePosition && <Handle type="source" position={sourcePosition} />}
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <div className="flex justify-between items-center">
+                <span className="text-xs font-bold block pb-0.5">{name}</span>
+                {Icon && <Icon className="w-5 h-5 opacity-60 p-0.5" />}
+              </div>
+              <div className="flex justify-between">
+                <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+                {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Channel</span>}
+              </div>
             </div>
-            {address && (
-              <div className="leading-3 py-1 flex flex-col items-start space-y-0.5">
-                <div className="text-[6px] flex items-center space-x-0.5 ">
-                  <LinkIcon className="w-2 h-2 opacity-60" />
-                  <span className="block font-normal ">{getAddress()}</span>
+            {mode === 'full' && (
+              <div className="divide-y divide-gray-200 ">
+                <div className="leading-[10px] py-1 ">
+                  <span className="text-[8px] font-light">{summary}</span>
                 </div>
-                {protocols.length > 0 && (
-                  <div className="text-[6px] font-semibold flex space-x-2 items-center ">
-                    {[...protocols].map((protocol, index) => {
-                      const ProtoColIcon = getIconForProtocol(protocol);
-                      return (
-                        <span key={index} className="font-normal flex items-center -ml-[1px] space-x-0.5">
-                          {ProtoColIcon && <ProtoColIcon className="w-2 h-2 opacity-60 inline-block" />}
-                          <span>{protocol}</span>
-                        </span>
-                      );
-                    })}
+                {address && (
+                  <div className="leading-3 py-1 flex flex-col items-start space-y-0.5">
+                    <div className="text-[6px] flex items-center space-x-0.5 ">
+                      <LinkIcon className="w-2 h-2 opacity-60" />
+                      <span className="block font-normal ">{getAddress()}</span>
+                    </div>
+                    {protocols.length > 0 && (
+                      <div className="text-[6px] font-semibold flex space-x-2 items-center ">
+                        {[...protocols].map((protocol, index) => {
+                          const ProtoColIcon = getIconForProtocol(protocol);
+                          return (
+                            <span key={index} className="font-normal flex items-center -ml-[1px] space-x-0.5">
+                              {ProtoColIcon && <ProtoColIcon className="w-2 h-2 opacity-60 inline-block" />}
+                              <span>{protocol}</span>
+                            </span>
+                          );
+                        })}
+                      </div>
+                    )}
                   </div>
                 )}
               </div>
             )}
           </div>
-        )}
-      </div>
-    </div>
+        </div>
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+          <ContextMenu.Item
+            asChild
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+          >
+            <a href={buildUrl(`/docs/channels/${id}/${version}`)}>Read documentation</a>
+          </ContextMenu.Item>
+          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+
+          <ContextMenu.Item asChild>
+            <a
+              href={buildUrl(`/docs/channels/${id}/${version}/changelog`)}
+              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read changelog
+            </a>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
   );
 }

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -1,6 +1,7 @@
 import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
+import MessageContextMenu from './MessageContextMenu';
 
 interface Data {
   title: string;
@@ -20,52 +21,54 @@ function classNames(...classes: any) {
 export default function CommandNode({ data, sourcePosition, targetPosition }: any) {
   const { mode, message } = data as Data;
 
-  const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
+  const { id, name, version, summary, owners = [], producers = [], consumers = [], schemaPath } = message.data;
 
   return (
-    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-blue-500 to-blue-700 relative flex items-center w-5 justify-center rounded-l-sm text-blue-100-500',
-          `border-r-[1px] border-blue-500`
-        )}
-      >
-        <ChatBubbleLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            Command
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {targetPosition && <Handle type="target" position={targetPosition} />}
-        {sourcePosition && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <span className="text-xs font-bold block pb-0.5">{name}</span>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Command</span>}
-          </div>
+    <MessageContextMenu message={message} messageType="commands">
+      <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
+        <div
+          className={classNames(
+            'bg-gradient-to-b from-blue-500 to-blue-700 relative flex items-center w-5 justify-center rounded-l-sm text-blue-100-500',
+            `border-r-[1px] border-blue-500`
+          )}
+        >
+          <ChatBubbleLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+          {mode === 'full' && (
+            <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+              Command
+            </span>
+          )}
         </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{summary}</span>
-            </div>
-            <div className="grid grid-cols-2 gap-x-4 py-1">
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Producers: {producers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Consumers: {consumers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Owners: {owners.length}
-              </span>
+        <div className="p-1 min-w-60 max-w-[min-content]">
+          {targetPosition && <Handle type="target" position={targetPosition} />}
+          {sourcePosition && <Handle type="source" position={sourcePosition} />}
+          <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+            <span className="text-xs font-bold block pb-0.5">{name}</span>
+            <div className="flex justify-between">
+              <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Command</span>}
             </div>
           </div>
-        )}
+          {mode === 'full' && (
+            <div className="divide-y divide-gray-200 ">
+              <div className="leading-3 py-1">
+                <span className="text-[8px] font-light">{summary}</span>
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 py-1">
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Producers: {producers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Consumers: {consumers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Owners: {owners.length}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </MessageContextMenu>
   );
 }

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -1,6 +1,7 @@
 import { BoltIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
+import MessageContextMenu from './MessageContextMenu';
 
 interface Data {
   title: string;
@@ -19,53 +20,54 @@ function classNames(...classes: any) {
 
 export default function EventNode({ data, sourcePosition, targetPosition }: any) {
   const { mode, message } = data as Data;
-
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
   return (
-    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-orange-400')}>
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-orange-500 to-orange-700 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
-          `border-r-[1px] border-orange-500`
-        )}
-      >
-        <BoltIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            Event
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {targetPosition && <Handle type="target" position={targetPosition} />}
-        {sourcePosition && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <span className="text-xs font-bold block pb-0.5">{name}</span>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Event</span>}
-          </div>
+    <MessageContextMenu message={message} messageType="events">
+      <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-orange-400')}>
+        <div
+          className={classNames(
+            'bg-gradient-to-b from-orange-500 to-orange-700 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
+            `border-r-[1px] border-orange-500`
+          )}
+        >
+          <BoltIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+          {mode === 'full' && (
+            <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+              Event
+            </span>
+          )}
         </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{summary}</span>
-            </div>
-            <div className="grid grid-cols-2 gap-x-4 py-1">
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Producers: {producers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Consumers: {consumers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Owners: {owners.length}
-              </span>
+        <div className="p-1 min-w-60 max-w-[min-content]">
+          {targetPosition && <Handle type="target" position={targetPosition} />}
+          {sourcePosition && <Handle type="source" position={sourcePosition} />}
+          <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+            <span className="text-xs font-bold block pb-0.5">{name}</span>
+            <div className="flex justify-between">
+              <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Event</span>}
             </div>
           </div>
-        )}
+          {mode === 'full' && (
+            <div className="divide-y divide-gray-200 ">
+              <div className="leading-3 py-1">
+                <span className="text-[8px] font-light">{summary}</span>
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 py-1">
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Producers: {producers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Consumers: {consumers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Owners: {owners.length}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </MessageContextMenu>
   );
 }

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/MessageContextMenu.tsx

@@ -0,0 +1,54 @@
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionMessageTypes } from '@types';
+interface Data {
+  message: CollectionEntry<CollectionMessageTypes>;
+  messageType: CollectionMessageTypes;
+  children: React.ReactNode;
+}
+
+export default function MessageContextMenu(data: Data) {
+  const { message, messageType, children } = data;
+  const { id, version, name, schemaPath } = message.data;
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+          <ContextMenu.Item
+            asChild
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+          >
+            <a href={buildUrl(`/docs/${messageType}/${id}/${version}`)}>Read documentation</a>
+          </ContextMenu.Item>
+          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+          {schemaPath && (
+            <ContextMenu.Item asChild>
+              <a
+                href={buildUrl(`/generated/${messageType}/${id}/schema.json`)}
+                download={`${name}(${version})-${schemaPath}`}
+                className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Download schema
+              </a>
+            </ContextMenu.Item>
+          )}
+          <ContextMenu.Item asChild>
+            <a
+              href={buildUrl(`/docs/${messageType}/${id}/${version}/changelog`)}
+              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read changelog
+            </a>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}