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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-JENKAK6L.js";
-import "../chunk-H6PSWK2Z.js";
+} from "../chunk-3EOBEGSB.js";
+import "../chunk-IY5HYH2G.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.25.0";
+var version = "2.26.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-7674GE3M.js";
-import "../chunk-JENKAK6L.js";
-import "../chunk-H6PSWK2Z.js";
+} from "../chunk-TFBAK5C5.js";
+import "../chunk-3EOBEGSB.js";
+import "../chunk-IY5HYH2G.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-JENKAK6L.js → chunk-3EOBEGSB.js}

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

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

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

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

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-H6PSWK2Z.js";
+} from "./chunk-IY5HYH2G.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.25.0";
+var version = "2.26.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,14 +6,14 @@ import {
 } from "./chunk-OW2FQPYP.js";
 import {
   log_build_default
-} from "./chunk-7674GE3M.js";
-import "./chunk-JENKAK6L.js";
+} from "./chunk-TFBAK5C5.js";
+import "./chunk-3EOBEGSB.js";
 import {
   catalogToAstro
 } from "./chunk-VCR3LHZR.js";
 import {
   VERSION
-} from "./chunk-H6PSWK2Z.js";
+} from "./chunk-IY5HYH2G.js";
 import {
   isBackstagePluginEnabled
 } from "./chunk-XMDPVKIJ.js";

package/eventcatalog/src/components/Lists/OwnersList.tsx

@@ -18,9 +18,9 @@ const OwnersList = ({ title, owners, emptyMessage }: Props) => {
   return (
     <div>
       <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
-        <Disclosure as="div" className="pb-8" defaultOpen={owners.length <= 5}>
+        <Disclosure as="div" className="" defaultOpen={owners.length <= 5}>
           <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
-            <span className="text-sm text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
+            <span className="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize"> {title} </span>
             <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
           </DisclosureButton>
           <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
@@ -57,6 +57,7 @@ const OwnersList = ({ title, owners, emptyMessage }: Props) => {
           </DisclosurePanel>
         </Disclosure>
       </div>
+      <div className="border-b border-gray-100 my-4"></div>
     </div>
   );
 };

package/eventcatalog/src/components/Lists/PillListFlat.tsx

@@ -9,6 +9,7 @@ interface Props {
   title: string;
   color: string;
   icon?: any;
+  limit?: number;
   pills: {
     label: string;
     badge?: string;
@@ -22,14 +23,14 @@ interface Props {
   emptyMessage?: string;
 }
 
-const PillList = ({ title, pills, emptyMessage, color = 'gray', ...props }: Props) => {
+const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...props }: Props) => {
   const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
   return (
-    <div>
+    <div className="">
       <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
-        <Disclosure as="div" className="pb-8" defaultOpen={pills.length <= 10}>
+        <Disclosure as="div" className="" defaultOpen={pills.length <= limit}>
           <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
-            <span className="text-sm text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
+            <span className="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize"> {title} </span>
             <ChevronDownIcon className="size-5 ml-2 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
           </DisclosureButton>
           <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
@@ -69,6 +70,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', ...props }: Prop
           </DisclosurePanel>
         </Disclosure>
       </div>
+      <div className="border-b border-gray-100 my-4"></div>
     </div>
   );
 };

package/eventcatalog/src/components/Lists/RepositoryList.astro

@@ -9,8 +9,8 @@ interface Props {
 const { repository, language } = Astro.props;
 ---
 
-<div class="mx-auto pb-8 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
-  <span class="text-sm text-black group-data-[hover]:text-black/80 capitalize">Repository </span>
+<div class="mx-auto pb-4 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5 border-b border-gray-100 mb-4">
+  <span class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize">Repository </span>
   <ul role="list" class="space-y-2 mt-2">
     {
       repository && (
@@ -33,4 +33,5 @@ const { repository, language } = Astro.props;
       )
     }
   </ul>
+  <!-- <div class='border-b border-gray-100'></div> -->
 </div>

package/eventcatalog/src/components/Lists/VersionList.astro

@@ -14,8 +14,8 @@ const { versions, collectionItem, title } = Astro.props;
 const currentPath = Astro.url.pathname;
 ---
 
-<div class="space-y-2 pb-8">
-  <span class="text-sm text-black group-data-[hover]:text-black/80 capitalize">
+<div class="space-y-2 pb-4">
+  <span class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize">
     {title || `Versions (${collectionItem.data.versions?.length})`}
   </span>
   <ul role="list" class="space-y-2">
@@ -39,26 +39,7 @@ const currentPath = Astro.url.pathname;
       })
     }
   </ul>
-  <!-- <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs">
-    {
-      versions.map((version) => {
-        const isCurrent = currentPath.includes(version);
-        return (
-          <option
-            selected={isCurrent}
-            value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
-            class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-primary underline ' : 'bg-white'}`}
-          >
-            {version === collectionItem.data.latestVersion ? `v${version} (latest)` : `v${version}`}
-          </option>
-        );
-      })
-    }
-  </select> -->
-  <!-- <a
-    href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.latestVersion}/changelog`)}
-    class="text-[10px] text-gray-500">View changelogs</a
-  > -->
+  <div class="border-b border-gray-100 pt-2"></div>
 </div>
 
 <script>

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

@@ -0,0 +1,87 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import MessageTableClient from './MessageTable.client';
+import Admonition from '../Admonition';
+import { getMessagesForDomain } from '@utils/collections/domains';
+import type { Domain } from '@utils/collections/domains';
+import type { CollectionMessageTypes } from '@types';
+export interface Props extends CollectionEntry<'services'> {
+  format: 'receives' | 'sends' | 'all';
+  limit?: number;
+  showChannels?: boolean;
+}
+
+const { format, limit, showChannels } = Astro.props;
+
+const collection = Astro.props.collection as 'services' | 'domains';
+
+// UI does not need everything, just return what is needed for the table
+const getEssentialPropsForMessage = (message: CollectionEntry<CollectionMessageTypes>) => {
+  return {
+    id: message.data.id,
+    name: message.data.name,
+    version: message.data.version,
+    collection: message.collection,
+    type: message.collection === 'events' ? 'event' : message.collection === 'commands' ? 'command' : 'query',
+    summary: message.data.summary,
+    channels: message.data.channels,
+  };
+};
+
+// only enable for services and domains
+const isComponentEnabled = collection === 'services' || collection === 'domains';
+
+let data = {
+  sends: [],
+  receives: [],
+};
+
+if (collection === 'domains') {
+  const { sends, receives } = await getMessagesForDomain(Astro.props as unknown as Domain);
+  data = {
+    sends: sends.map(getEssentialPropsForMessage) as typeof data.sends,
+    receives: receives.map(getEssentialPropsForMessage) as typeof data.receives,
+  };
+} else {
+  // Try and set the sends and receives from the services collection
+  data = {
+    sends: Astro.props.data.sends
+      ? (Astro.props.data.sends.map((message) =>
+          getEssentialPropsForMessage(message as unknown as CollectionEntry<CollectionMessageTypes>)
+        ) as typeof data.sends)
+      : [],
+    receives: Astro.props.data.receives
+      ? (Astro.props.data.receives.map((message) =>
+          getEssentialPropsForMessage(message as unknown as CollectionEntry<CollectionMessageTypes>)
+        ) as typeof data.receives)
+      : [],
+  };
+}
+---
+
+{
+  isComponentEnabled && (
+    <MessageTableClient
+      client:load
+      sends={data.sends}
+      receives={data.receives}
+      collection={collection}
+      limit={limit}
+      showChannels={showChannels}
+      format={format}
+    />
+  )
+}
+
+{
+  !isComponentEnabled && (
+    <Admonition type="warning">
+      <div>
+        <span class="font-bold">
+          {`<MessageTable/>`} component is not supported for resources of type {collection}.
+        </span>
+        <span class="block">This component is only supported for services and domains.</span>
+      </div>
+    </Admonition>
+  )
+}

package/eventcatalog/src/components/MDX/MessageTable/MessageTable.client.tsx

@@ -0,0 +1,430 @@
+import { getColorAndIconForMessageType } from '@components/Tables/columns/MessageTableColumns';
+import { buildUrl } from '@utils/url-builder';
+import { useState, useMemo, useCallback, memo } from 'react';
+
+type MessageTableMessage = {
+  id: string;
+  name: string;
+  version: string;
+  collection: string;
+  type: string;
+  summary: string;
+  channels: any[];
+};
+
+type MessageTableProps = {
+  format: 'receives' | 'sends' | 'all';
+  limit?: number;
+  showChannels?: boolean;
+  collection: string;
+  sends: MessageTableMessage[];
+  receives: MessageTableMessage[];
+};
+
+type MessageType = 'event' | 'query' | 'command' | null;
+
+const MessageRow = memo(
+  ({ message, showChannels, collection }: { message: MessageTableMessage; showChannels?: boolean; collection: string }) => {
+    const { color, Icon } = getColorAndIconForMessageType(message.type);
+    const url = buildUrl(`/docs/${collection}/${message.id}/${message.version}`);
+    let type = collection.slice(0, -1);
+    type = type === 'querie' ? 'query' : type;
+
+    const channels = message.channels || [];
+
+    return (
+      <tr className="group hover:bg-gray-100">
+        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-label={`View details for ${message.name}`} />
+          <div className="flex items-center gap-2 relative">
+            <Icon className={`h-5 w-5 text-${color}-500`} />
+            <span className="group-hover:text-blue-600 break-all">{message.name}</span>
+          </div>
+        </td>
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+          <span>v{message.version}</span>
+        </td>
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+          <span>{type}</span>
+        </td>
+        <td className="px-3 py-4 text-sm text-gray-500 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+          <span className="line-clamp-2 break-words">{message.summary || '-'}</span>
+        </td>
+        {showChannels && (
+          <td className="px-3 py-4 text-sm text-gray-500 relative">
+            <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+            <div className="flex flex-wrap gap-1">
+              {channels.length > 0
+                ? channels.map((channel, index) => (
+                    <span
+                      key={`${channel.id}-${index}`}
+                      className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+                    >
+                      {channel.id}
+                    </span>
+                  ))
+                : '-'}
+            </div>
+          </td>
+        )}
+      </tr>
+    );
+  }
+);
+
+const FilterButton = memo(
+  ({
+    type,
+    label,
+    typeFilter,
+    setTypeFilter,
+    setCurrentPage,
+    count,
+  }: {
+    type: MessageType;
+    label: string;
+    typeFilter: MessageType;
+    setTypeFilter: (type: MessageType) => void;
+    setCurrentPage: (page: number) => void;
+    count: number;
+  }) => (
+    <button
+      onClick={() => {
+        setTypeFilter(typeFilter === type ? null : type);
+        setCurrentPage(1);
+      }}
+      className={`px-3 py-1 rounded-md text-sm font-medium ${
+        typeFilter === type
+          ? 'bg-black text-white border border-gray-200 hover:bg-gray-900'
+          : 'bg-white text-black border border-gray-200 hover:bg-gray-100'
+      }`}
+    >
+      {label} ({count})
+    </button>
+  )
+);
+
+const MessageTable = (props: MessageTableProps) => {
+  const { receives, sends, collection = 'services', limit, showChannels = false, format = 'all' } = props;
+  const [receivesSearchTerm, setReceivesSearchTerm] = useState('');
+  const [sendsSearchTerm, setSendsSearchTerm] = useState('');
+  const [receivesPage, setReceivesPage] = useState(1);
+  const [sendsPage, setSendsPage] = useState(1);
+  const [receivesTypeFilter, setReceivesTypeFilter] = useState<MessageType>(null);
+  const [sendsTypeFilter, setSendsTypeFilter] = useState<MessageType>(null);
+  const itemsPerPage = limit || 5;
+
+  const shouldRenderReceives = format === 'receives' || format === 'all';
+  const shouldRenderSends = format === 'sends' || format === 'all';
+
+  const filterMessages = useCallback((messages: MessageTableMessage[], searchTerm: string, typeFilter: MessageType) => {
+    let filtered = messages;
+
+    if (typeFilter) {
+      filtered = filtered.filter((message) => {
+        const collectionType = message.collection.slice(0, -1);
+        const normalizedType = collectionType === 'querie' ? 'query' : collectionType;
+        return normalizedType === typeFilter;
+      });
+    }
+
+    if (searchTerm) {
+      const lowerSearchTerm = searchTerm.toLowerCase();
+      filtered = filtered.filter((message) => {
+        const collectionType = message.collection.slice(0, -1);
+        const normalizedType = collectionType === 'querie' ? 'query' : collectionType;
+
+        return (
+          message.name.toLowerCase().includes(lowerSearchTerm) ||
+          message.summary?.toLowerCase().includes(lowerSearchTerm) ||
+          normalizedType.toLowerCase().includes(lowerSearchTerm)
+        );
+      });
+    }
+
+    return filtered;
+  }, []);
+
+  const renderTable = (
+    title: string,
+    messages: any[],
+    searchTerm: string,
+    setSearchTerm: (value: string) => void,
+    currentPage: number,
+    setCurrentPage: (page: number) => void,
+    typeFilter: MessageType,
+    setTypeFilter: (type: MessageType) => void
+  ) => {
+    const filteredMessages = useMemo(
+      () => filterMessages(messages, searchTerm, typeFilter),
+      [messages, searchTerm, typeFilter, filterMessages]
+    );
+
+    const totalPages = Math.ceil(filteredMessages.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const paginatedMessages = useMemo(
+      () => filteredMessages.slice(startIndex, startIndex + itemsPerPage),
+      [filteredMessages, startIndex, itemsPerPage]
+    );
+
+    // Get unique message types and their counts
+    const messageTypeCounts = useMemo(() => {
+      const counts = new Map<MessageType, number>();
+      messages.forEach((message) => {
+        const collectionType = message.collection.slice(0, -1);
+        const normalizedType = (collectionType === 'querie' ? 'query' : collectionType) as MessageType;
+        counts.set(normalizedType, (counts.get(normalizedType) || 0) + 1);
+      });
+      return counts;
+    }, [messages]);
+
+    const availableTypes = useMemo(
+      () =>
+        Array.from(
+          new Set(
+            messages.map((message) => {
+              const collectionType = message.collection.slice(0, -1);
+              return collectionType === 'querie' ? 'query' : collectionType;
+            })
+          )
+        ) as MessageType[],
+      [messages]
+    );
+
+    const filterButtons = useMemo(
+      () =>
+        [
+          { type: 'event' as MessageType, label: 'Events' },
+          { type: 'query' as MessageType, label: 'Queries' },
+          { type: 'command' as MessageType, label: 'Commands' },
+        ]
+          .filter((button) => availableTypes.includes(button.type))
+          .map((button) => ({
+            ...button,
+            count: messageTypeCounts.get(button.type) || 0,
+          })),
+      [availableTypes, messageTypeCounts]
+    );
+
+    return (
+      <div className="flow-root bg-white border-gray-200 border  p-4 pb-2 rounded-lg text-gray-900">
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">
+            {title} ({searchTerm || typeFilter ? `${filteredMessages.length}/${messages.length}` : messages.length})
+          </h2>
+          <span className="text-sm text-gray-700">
+            Quickly find the message you need by searching for the name, type, or summary.
+          </span>
+
+          {/* Type filter buttons - only shown if there are filter options */}
+          {filterButtons.length > 0 && (
+            <div className="flex gap-2 pb-2">
+              {filterButtons.map((button) => (
+                <FilterButton
+                  key={button.type}
+                  type={button.type}
+                  label={button.label}
+                  count={button.count}
+                  typeFilter={typeFilter}
+                  setTypeFilter={setTypeFilter}
+                  setCurrentPage={setCurrentPage}
+                />
+              ))}
+            </div>
+          )}
+
+          <div className="relative">
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path
+                  fillRule="evenodd"
+                  d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </div>
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setCurrentPage(1); // Reset to first page when searching
+              }}
+              placeholder={`Search by name, type, or summary...`}
+              className="block w-full rounded-md border-0 py-1.5 pl-10 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+            />
+            {searchTerm && (
+              <button
+                onClick={() => {
+                  setSearchTerm('');
+                  setCurrentPage(1); // Reset to first page when clearing search
+                }}
+                className="absolute inset-y-0 right-0 flex items-center pr-3"
+                aria-label="Clear search"
+              >
+                <svg className="h-5 w-5 text-gray-400 hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="overflow-x-auto">
+          <div className="inline-block min-w-full py-2 align-middle">
+            <div className="max-w-full overflow-hidden">
+              <table className="min-w-full table-fixed divide-y divide-gray-300  rounded-sm bg-white ">
+                <thead>
+                  <tr>
+                    <th
+                      scope="col"
+                      className={`${showChannels ? 'w-1/4' : 'w-1/3'} py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6`}
+                    >
+                      Name
+                    </th>
+                    <th scope="col" className="w-[100px] px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Version
+                    </th>
+                    <th scope="col" className="w-[100px] py-3.5 pl-3.5 pr-3 text-left text-sm font-semibold text-gray-900">
+                      Type
+                    </th>
+                    <th
+                      scope="col"
+                      className={`${showChannels ? 'w-1/3' : 'w-1/2'} px-3 py-3.5 text-left text-sm font-semibold text-gray-900`}
+                    >
+                      Summary
+                    </th>
+                    {showChannels && (
+                      <th scope="col" className="w-1/4 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                        Channels
+                      </th>
+                    )}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {paginatedMessages.length > 0 ? (
+                    paginatedMessages.map((message) => (
+                      <MessageRow
+                        key={message.id}
+                        message={message}
+                        showChannels={showChannels}
+                        collection={message.collection}
+                      />
+                    ))
+                  ) : (
+                    <tr>
+                      <td colSpan={showChannels ? 5 : 4} className="text-center py-4 text-sm text-gray-500">
+                        No messages found
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 -mt-2">
+            <div className="flex flex-1 justify-between sm:hidden">
+              <button
+                onClick={() => setCurrentPage(currentPage - 1)}
+                disabled={currentPage === 1}
+                className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === 1 ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+              >
+                Previous
+              </button>
+              <button
+                onClick={() => setCurrentPage(currentPage + 1)}
+                disabled={currentPage === totalPages}
+                className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+              >
+                Next
+              </button>
+            </div>
+            <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+              <div>
+                <p className="text-sm text-gray-700">
+                  Showing <span className="font-medium">{startIndex + 1}</span> to{' '}
+                  <span className="font-medium">{Math.min(startIndex + itemsPerPage, filteredMessages.length)}</span> of{' '}
+                  <span className="font-medium">{filteredMessages.length}</span> results
+                </p>
+              </div>
+              <div>
+                <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+                  <button
+                    onClick={() => setCurrentPage(currentPage - 1)}
+                    disabled={currentPage === 1}
+                    className={`relative inline-flex items-center rounded-l-md px-2 py-2 ${currentPage === 1 ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                  >
+                    <span className="sr-only">Previous</span>
+                    <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fillRule="evenodd"
+                        d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => setCurrentPage(currentPage + 1)}
+                    disabled={currentPage === totalPages}
+                    className={`relative inline-flex items-center rounded-r-md px-2 py-2 ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                  >
+                    <span className="sr-only">Next</span>
+                    <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fillRule="evenodd"
+                        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                </nav>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={`mx-auto not-prose py-4  space-y-4  my-4`}>
+      <h2 className="text-2xl font-semibold">Messages for this {collection.slice(0, -1)}</h2>
+      <div>
+        {shouldRenderSends && (
+          <div>
+            {renderTable(
+              'Sends messages',
+              sends || [],
+              sendsSearchTerm,
+              setSendsSearchTerm,
+              sendsPage,
+              setSendsPage,
+              sendsTypeFilter,
+              setSendsTypeFilter
+            )}
+          </div>
+        )}
+        {shouldRenderReceives && (
+          <div className={format === 'all' ? 'pt-4' : ''}>
+            {renderTable(
+              'Receives messages',
+              receives || [],
+              receivesSearchTerm,
+              setReceivesSearchTerm,
+              receivesPage,
+              setReceivesPage,
+              receivesTypeFilter,
+              setReceivesTypeFilter
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MessageTable;

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

@@ -0,0 +1,96 @@
+import { useMemo } from 'react';
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps as XYFlowEdgeProps } from '@xyflow/react';
+
+interface EdgeData {
+  message?: {
+    collection?: string;
+  };
+  opacity?: number;
+  animated?: boolean;
+}
+
+interface CustomEdgeProps extends Omit<XYFlowEdgeProps, 'data'> {
+  data?: EdgeData;
+}
+
+export default function CustomEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  label,
+  labelStyle,
+  data,
+}: CustomEdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const randomDelay = useMemo(() => Math.random() * 1, []);
+  const collection = data?.message?.collection;
+  const opacity = data?.opacity ?? 1;
+
+  const messageColor = useMemo(
+    () => (collection: string) => {
+      switch (collection) {
+        case 'events':
+          return 'orange';
+        case 'commands':
+          return 'blue';
+        case 'queries':
+          return 'green';
+        default:
+          return 'gray';
+      }
+    },
+    []
+  );
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{
+          strokeWidth: 2,
+          stroke: '#fff',
+          ...style,
+        }}
+      />
+      {data?.animated && (
+        <g className={`z-30 ${opacity === 1 ? 'opacity-100' : 'opacity-10'}`}>
+          <circle cx="0" cy="0" r="7" fill={messageColor(collection || 'default')}>
+            <animateMotion dur="2s" repeatCount="indefinite" path={edgePath} rotate="auto" begin={`${randomDelay}s`}>
+              <mpath href={`#${id}`} />
+            </animateMotion>
+          </circle>
+        </g>
+      )}
+      {label && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              zIndex: 1000,
+              ...labelStyle,
+            }}
+            className="nodrag nopan max-w-[150px] text-xs bg-white px-2 py-1 rounded border border-gray-200 text-gray-600 font-medium shadow-sm"
+          >
+            {label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}

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

@@ -24,6 +24,7 @@ import StepNode from './Nodes/Step';
 import CommandNode from './Nodes/Command';
 import ExternalSystemNode from './Nodes/ExternalSystem';
 import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
+import FlowEdge from './Edges/FlowEdge';
 
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
@@ -75,6 +76,7 @@ const NodeGraphBuilder = ({
   const edgeTypes = useMemo(
     () => ({
       animated: AnimatedMessageEdge,
+      'flow-edge': FlowEdge,
     }),
     []
   );
@@ -97,7 +99,7 @@ const NodeGraphBuilder = ({
       eds.map((edge) => {
         edge.style = { ...edge.style, opacity: 1 };
         edge.labelStyle = { ...edge.labelStyle, opacity: 1 };
-        return { ...edge, data: { ...edge.data, opacity: 1 }, animated: animateMessages };
+        return { ...edge, data: { ...edge.data, opacity: 1, animated: animateMessages }, animated: animateMessages };
       })
     );
   }, [setNodes, setEdges, animateMessages]);
@@ -125,7 +127,7 @@ const NodeGraphBuilder = ({
           connectedNodeIds.add(edge.target);
           return {
             ...edge,
-            data: { ...edge.data, opacity: 1 },
+            data: { ...edge.data, opacity: 1, animated: animateMessages },
             style: { ...edge.style, opacity: 1 },
             labelStyle: { ...edge.labelStyle, opacity: 1 },
             animated: true,
@@ -133,7 +135,7 @@ const NodeGraphBuilder = ({
         }
         return {
           ...edge,
-          data: { ...edge.data, opacity: 0.1 },
+          data: { ...edge.data, opacity: 0.1, animated: animateMessages },
           style: { ...edge.style, opacity: 0.1 },
           labelStyle: { ...edge.labelStyle, opacity: 0.1 },
           animated: animateMessages,
@@ -178,8 +180,8 @@ const NodeGraphBuilder = ({
       eds.map((edge) => ({
         ...edge,
         animated: animateMessages,
-        type: animateMessages ? 'animated' : 'default',
-        data: { ...edge.data, animateMessages },
+        type: edge.type === 'flow-edge' ? 'flow-edge' : animateMessages ? 'animated' : 'default',
+        data: { ...edge.data, animateMessages, animated: animateMessages },
       }))
     );
   }, [animateMessages]);

package/eventcatalog/src/components/MDX/Tiles/Tile.astro

@@ -14,10 +14,16 @@ interface Props {
 const { href, icon, title, description, openWindow } = Astro.props;
 
 const IconComponent: ComponentType<{ className?: string }> | undefined = Icons[icon];
+
+function startsWithProtocol(str: string) {
+  // Regular expression to match common protocols (http, https, ftp, ws, etc.)
+  const regex = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//;
+  return regex.test(str);
+}
 ---
 
 <a
-  href={buildUrl(href)}
+  href={startsWithProtocol(href) ? href : buildUrl(href)}
   target={openWindow ? '_blank' : '_self'}
   class="block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white"
 >

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

@@ -12,6 +12,7 @@ import Admonition from '@components/MDX/Admonition';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI.astro';
 import AsyncAPI from '@components/MDX/AsyncAPI/AsyncAPI.astro';
 import ChannelInformation from '@components/MDX/ChannelInformation/ChannelInformation';
+import MessageTable from '@components/MDX/MessageTable/MessageTable.astro';
 import Tabs from '@components/MDX/Tabs/Tabs.astro';
 import TabItem from '@components/MDX/Tabs/TabItem.astro';
 
@@ -39,6 +40,7 @@ const components = (props: any) => {
     ChannelInformation: (mdxProp: any) => ChannelInformation({ ...props.data, ...mdxProp }),
     SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
     Schema: (mdxProp: any) => jsx(Schema, { ...props, ...mdxProp }),
+    MessageTable: (mdxProp: any) => jsx(MessageTable, { ...props, ...mdxProp }),
   };
 };
 

package/eventcatalog/src/components/SideBars/DomainSideBar.astro

@@ -3,7 +3,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
-import { getUbiquitousLanguage } from '@utils/collections/domains';
+import { getUbiquitousLanguage, getMessagesForDomain } from '@utils/collections/domains';
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
@@ -25,6 +25,8 @@ const ownersRaw = domain.data?.owners || [];
 const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
+const messagesForDomain = await getMessagesForDomain(domain);
+
 const serviceList = services.map((p) => ({
   label: p.data.name,
   badge: p.collection,
@@ -33,6 +35,26 @@ const serviceList = services.map((p) => ({
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
+const sendsList = messagesForDomain.sends
+  .sort((a, b) => a.collection.localeCompare(b.collection))
+  .map((p) => ({
+    label: p.data.name,
+    badge: p.collection,
+    tag: `v${p.data.version}`,
+    collection: p.collection,
+    href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  }));
+
+const receivesList = messagesForDomain.receives
+  .sort((a, b) => a.collection.localeCompare(b.collection))
+  .map((p) => ({
+    label: p.data.name,
+    badge: p.collection,
+    tag: `v${p.data.version}`,
+    collection: p.collection,
+    href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  }));
+
 const ubiquitousLanguageList = ubiquitousLanguageDictionary?.map((l) => ({
   label: l.name,
   badge: 'Ubiquitous Language',
@@ -59,12 +81,27 @@ const ownersList = filteredOwners.map((o) => ({
       icon="ServerIcon"
       client:load
     />
+    <PillListFlat
+      title={`Sends messages (${sendsList.length})`}
+      pills={sendsList}
+      emptyMessage={`This domain does not send any messages.`}
+      color="orange"
+      client:load
+    />
+    <PillListFlat
+      title={`Receives messages (${receivesList.length})`}
+      pills={receivesList}
+      emptyMessage={`This domain does not receive any messages.`}
+      color="orange"
+      client:load
+    />
     {
       ubiquitousLanguageList && hasUbiquitousLanguage && (
         <PillListFlat
           title={`Ubiquitous Language Dictionary (${ubiquitousLanguageDictionary?.length})`}
           pills={ubiquitousLanguageList}
           color="pink"
+          limit={4}
           emptyMessage={`This domain does not have any documented ubiquitous language.`}
           client:load
         />

package/eventcatalog/src/components/SideBars/ServiceSideBar.astro

@@ -26,22 +26,27 @@ const ownersRaw = service.data?.owners || [];
 const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
-const sendsList = sends.map((p) => ({
-  label: p.data.name,
-  badge: p.collection,
-  color: p.collection === 'events' ? 'orange' : 'blue',
-  collection: p.collection,
-  tag: `v${p.data.version}`,
-  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-}));
-const receivesList = receives.map((p) => ({
-  label: p.data.name,
-  badge: p.collection,
-  color: p.collection === 'events' ? 'orange' : 'blue',
-  tag: `v${p.data.version}`,
-  collection: p.collection,
-  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-}));
+const sendsList = sends
+  .sort((a, b) => a.collection.localeCompare(b.collection))
+  .map((p) => ({
+    label: p.data.name,
+    badge: p.collection,
+    color: p.collection === 'events' ? 'orange' : 'blue',
+    collection: p.collection,
+    tag: `v${p.data.version}`,
+    href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  }));
+
+const receivesList = receives
+  .sort((a, b) => a.collection.localeCompare(b.collection))
+  .map((p) => ({
+    label: p.data.name,
+    badge: p.collection,
+    color: p.collection === 'events' ? 'orange' : 'blue',
+    tag: `v${p.data.version}`,
+    collection: p.collection,
+    href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  }));
 
 const ownersList = filteredOwners.map((o) => ({
   label: o.data.name,
@@ -94,7 +99,7 @@ const schemaURL = join(publicPath, schemaFilePath || '');
 
     {
       isRSSEnabled && (
-        <div class="mx-auto pb-8 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+        <div class="mx-auto pb-4 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5 border-b border-gray-100 mb-4">
           <span class="text-sm text-black group-data-[hover]:text-black/80 capitalize">Services RSS Feed</span>
           <ul role="list" class="space-y-2 mt-2">
             <li class="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">

package/eventcatalog/src/enterprise/ai-assistant/components/ChatSidebar.tsx

@@ -11,7 +11,6 @@ const Sidebar: React.FC<{}> = () => {
     // Check if this is the first visit after component mounts
     const hasVisited = localStorage.getItem('eventCatalogAIVisited');
     if (!hasVisited || hasVisited === 'false') {
-      console.log('setting showHelp to true');
       localStorage.setItem('eventCatalogAIVisited', 'true');
       setShowHelp(true);
     }

package/eventcatalog/src/pages/chat/index.astro

@@ -107,7 +107,10 @@ const generatorConfig = `
               <div class="bg-gray-700 rounded-lg p-4 md:p-6 mb-4">
                 <h3 class="text-lg text-white font-semibold mb-3">Quick Setup</h3>
                 <Code code={`npm install @eventcatalog/generator-ai`} lang="bash" frame="none" />
-                <a href="https://www.eventcatalog.dev/ai-assistant" class="inline-flex items-center text-sm text-white mt-4">
+                <a
+                  href="https://www.eventcatalog.dev/feature/ai-assistant"
+                  class="inline-flex items-center text-sm text-white mt-4"
+                >
                   Learn more about setup →
                 </a>
               </div>

package/eventcatalog/src/utils/collections/domains.ts

@@ -2,6 +2,7 @@ import { getItemsFromCollectionByIdAndSemverOrLatest, getVersionForCollectionIte
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
+import type { CollectionMessageTypes } from '@types';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
@@ -73,6 +74,32 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
   return cachedDomains[cacheKey];
 };
 
+export const getMessagesForDomain = async (
+  domain: Domain
+): Promise<{ sends: CollectionEntry<CollectionMessageTypes>[]; receives: CollectionEntry<CollectionMessageTypes>[] }> => {
+  // We already have the services from the domain
+  const services = domain.data.services as unknown as CollectionEntry<'services'>[];
+
+  const events = await getCollection('events');
+  const commands = await getCollection('commands');
+  const queries = await getCollection('queries');
+
+  const allMessages = [...events, ...commands, ...queries];
+
+  const sends = services.flatMap((service) => service.data.sends || []);
+  const receives = services.flatMap((service) => service.data.receives || []);
+
+  const sendsMessages = sends.map((send) => getItemsFromCollectionByIdAndSemverOrLatest(allMessages, send.id, send.version));
+  const receivesMessages = receives.map((receive) =>
+    getItemsFromCollectionByIdAndSemverOrLatest(allMessages, receive.id, receive.version)
+  );
+
+  return {
+    sends: sendsMessages.flat(),
+    receives: receivesMessages.flat(),
+  };
+};
+
 export const getUbiquitousLanguage = async (domain: Domain): Promise<UbiquitousLanguage[]> => {
   const ubiquitousLanguages = await getCollection('ubiquitousLanguages', (ubiquitousLanguage: UbiquitousLanguage) => {
     return ubiquitousLanguage.slug.startsWith(`${domain.collection}/${domain.slug}`);

package/eventcatalog/src/utils/node-graphs/flows-node-graph.ts

@@ -118,18 +118,18 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
         id: `step-${step.id}-step-${path.id}`,
         source: `step-${step.id}`,
         target: `step-${path.id}`,
-        type: 'bezier',
+        type: 'flow-edge',
         label: path.label,
         animated: true,
         markerEnd: {
           type: MarkerType.ArrowClosed,
           width: 20,
           height: 20,
-          color: '#acacac',
+          color: '#666',
         },
         style: {
           strokeWidth: 2,
-          stroke: '#acacac',
+          stroke: '#ccc',
         },
       });
     });

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,9 @@
     "default-files-for-collections/"
   ],
   "dependencies": {
-    "@astrojs/markdown-remark": "^6.1.0",
-    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/react": "^4.2.0",
+    "@astrojs/markdown-remark": "^6.2.0",
+    "@astrojs/mdx": "^4.1.0",
+    "@astrojs/react": "^4.2.1",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/tailwind": "^6.0.0",
     "@asyncapi/avro-schema-parser": "^3.0.24",
@@ -43,7 +43,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
-    "astro": "^5.3.0",
+    "astro": "^5.4.1",
     "astro-expressive-code": "^0.40.1",
     "astro-pagefind": "^1.6.0",
     "astro-seo": "^0.8.4",