@eventcatalog/core 3.30.0 → 3.31.1

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -7,16 +7,15 @@ import { AlignLeftIcon, UserIcon, UsersIcon } from 'lucide-react';
 import mdxComponents from '@components/MDX/components';
 
 import { getOwner } from '@utils/collections/owners';
-import { buildUrl } from '@utils/url-builder';
+import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
 import { resourceToCollectionMap } from '@utils/collections/util';
 import { getMDXComponentsByName } from '@utils/markdown';
-import { getAdjacentPages } from '@enterprise/custom-documentation/utils/custom-docs';
-import { getCustomDocsContentBadgeClasses } from '@enterprise/custom-documentation/utils/badge-styles';
-
+import { getAdjacentPages, getNavigationItems } from '@enterprise/custom-documentation/utils/custom-docs';
 import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import CopyAsMarkdown from '@components/CopyAsMarkdown';
 
-import { isVisualiserEnabled } from '@utils/feature';
+import { isVisualiserEnabled, isMarkdownDownloadEnabled, isRSSEnabled, isEventCatalogChatEnabled } from '@utils/feature';
 
 const props = Astro.props;
 const doc = props.data;
@@ -24,44 +23,6 @@ const { Content, headings } = await render(props as any);
 const currentSlug = props.id;
 
 const nodeGraphs = getMDXComponentsByName(props.body, 'NodeGraph') || [];
-// Get sidebar data
-const sidebar = config?.customDocs?.sidebar || [];
-
-// Flatten the sidebar to find previous and next pages
-type FlatItem = {
-  label: string;
-  slug: string;
-};
-
-// Define sidebar section type
-type SidebarSection = {
-  label: string;
-  slug?: string;
-  items?: Array<{
-    label: string;
-    slug: string;
-  }>;
-};
-
-const flattenedItems: FlatItem[] = [];
-
-// Process all sidebar sections to create a flattened array
-sidebar.forEach((section: SidebarSection) => {
-  if (section.slug && !section.items) {
-    flattenedItems.push({
-      label: section.label,
-      slug: section.slug,
-    });
-  }
-  if (section.items) {
-    section.items.forEach((item: { label: string; slug: string }) => {
-      flattenedItems.push({
-        label: item.label,
-        slug: item.slug,
-      });
-    });
-  }
-});
 
 const { prev, next } = await getAdjacentPages(currentSlug);
 
@@ -79,17 +40,40 @@ const ownersList = filteredOwners.map((o) => ({
 
 const badges = doc?.badges || [];
 
-const getCustomDocBadgeClasses = (badge: any) => {
-  const color = badge?.backgroundColor || badge?.textColor;
-  return `${getCustomDocsContentBadgeClasses(color)} ${badge?.class ? badge.class : ''}`;
+// Find the immediate parent group label, for the accent header label above the title.
+// Walks the processed navigation tree (which expands `autogenerated` directories into nested groups)
+// so that nested groups like "Creating new microservices" are surfaced rather than only the top-level section.
+const normalizeSlug = (s: string | undefined) => (s || '').replace(/^\//, '').replace(/^docs\//, '');
+const currentSlugNorm = normalizeSlug(currentSlug);
+const navigationItems = await getNavigationItems();
+
+type NavItem = { label: string; slug?: string; items?: NavItem[] };
+
+const findParentLabel = (items: NavItem[], parentLabel: string): string | null => {
+  for (const item of items) {
+    if (item.slug && normalizeSlug(item.slug) === currentSlugNorm) {
+      return parentLabel;
+    }
+    if (item.items?.length) {
+      const found = findParentLabel(item.items, item.label);
+      if (found !== null) return found;
+    }
+  }
+  return null;
 };
+
+const sectionLabel = findParentLabel(navigationItems as NavItem[], '') || '';
+
+const editUrl =
+  (doc as any)?.editUrl ||
+  (config.editUrl && (props as any)?.filePath ? buildEditUrlForResource(config.editUrl, (props as any).filePath) : '');
 ---
 
 <VerticalSideBarLayout title={doc.title || 'Documentation'} showNestedSideBar={false}>
   <div class="custom-docs-shell flex w-full" data-pagefind-body data-pagefind-meta={`title:${doc.title}`}>
     <!-- Left Sidebar Navigation -->
     <aside
-      class="sidebar-transition fixed top-0 bottom-0 left-[var(--ec-vertical-nav-width,14rem)] z-10 w-[var(--ec-custom-docs-sidebar-width,20rem)] overflow-hidden border-r border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))]"
+      class="sidebar-transition fixed top-0 bottom-0 left-[var(--ec-vertical-nav-width,14rem)] z-10 w-[var(--ec-custom-docs-sidebar-width,20rem)] overflow-hidden border-r border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-rail-bg))]"
     >
       <div class="h-full">
         <CustomDocsNav />
@@ -99,20 +83,49 @@ const getCustomDocBadgeClasses = (badge: any) => {
     <div class="sidebar-transition flex w-full min-w-0" style="margin-left: var(--ec-custom-docs-sidebar-width, 20rem);">
       <main class="min-w-0 flex-1">
         <div
-          class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]"
+          class="w-full lg:mr-2 pr-10 py-10 bg-[rgb(var(--ec-page-bg))]"
           style="padding-left: var(--ec-app-content-padding-left, 5rem);"
         >
-          <div class="border-b border-[rgb(var(--ec-page-border))] flex justify-between items-start md:pb-2">
-            <div>
-              <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{doc.title}</h2>
-              <p class="text-base pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{doc.summary}</p>
+          <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-4">
+            <div class="flex flex-col gap-4">
+              {
+                sectionLabel && (
+                  <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">{sectionLabel}</span>
+                )
+              }
+              <div class="flex justify-between items-center gap-4">
+                <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">
+                  {doc.title}
+                </h2>
+                <div class="hidden lg:block shrink-0">
+                  <CopyAsMarkdown
+                    client:only="react"
+                    schemas={[]}
+                    chatEnabled={isEventCatalogChatEnabled()}
+                    markdownDownloadEnabled={isMarkdownDownloadEnabled()}
+                    rssFeedEnabled={isRSSEnabled()}
+                    editUrl={editUrl}
+                    preferChatAsDefault={isEventCatalogChatEnabled()}
+                  />
+                </div>
+              </div>
+              <p class="text-base text-[rgb(var(--ec-page-text-muted))] font-light">{doc.summary}</p>
               {
-                badges && (
-                  <div class="flex flex-wrap gap-3 py-4">
+                badges && badges.length > 0 && (
+                  <div class="flex flex-wrap gap-3 py-2">
                     {badges.map((badge: any) => {
                       return (
                         <a href={badge.url || '#'}>
-                          <span id={badge.id || ''} class={`${getCustomDocBadgeClasses(badge)} mr-2`}>
+                          <span
+                            id={badge.id || ''}
+                            class={`
+                              inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
+                              bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                              text-[rgb(var(--ec-page-text))]
+                              shadow-xs
+                              ${badge.class ? badge.class : ''}
+                            `}
+                          >
                             {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
                             {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
                             <span>{badge.content}</span>
@@ -125,7 +138,7 @@ const getCustomDocBadgeClasses = (badge: any) => {
               }
             </div>
           </div>
-          <div class="prose prose-md py-4 w-full text-[15px]">
+          <div class="prose prose-md max-w-none py-4 w-full text-[15px]">
             <Content components={{ ...mdxComponents(props) }} />
           </div>
 
@@ -194,7 +207,7 @@ const getCustomDocBadgeClasses = (badge: any) => {
       <!-- Right Sidebar TOC -->
       <aside
         id="eventcatalog-docs-sidebar"
-        class="hidden xl:block sticky top-[4rem] self-start w-[280px] max-h-[calc(100vh-4rem)] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
+        class="hidden xl:block sticky top-[4rem] self-start w-[200px] max-h-[calc(100vh-4rem)] overflow-y-auto py-2 flex-shrink-0 bg-[rgb(var(--ec-page-bg))]"
       >
         <div class="mt-8 space-y-8">
           {

package/eventcatalog/src/enterprise/feature.ts

@@ -44,7 +44,8 @@ export const isEventCatalogChatEnabled = () => {
   const isFeatureEnabledFromPlan = isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
   const directory = process.env.PROJECT_DIR || process.cwd();
   const hasChatConfigurationFile = fs.existsSync(join(directory, 'eventcatalog.chat.js'));
-  return isFeatureEnabledFromPlan && hasChatConfigurationFile && isSSR();
+  const isEnabledInConfig = config?.chat?.enabled ?? true;
+  return isFeatureEnabledFromPlan && hasChatConfigurationFile && isSSR() && isEnabledInConfig;
 };
 
 export const isEventCatalogUpgradeEnabled = () => !isEventCatalogStarterEnabled() && !isEventCatalogScaleEnabled();

package/eventcatalog/src/layouts/SettingsLayout.astro

@@ -0,0 +1,116 @@
+---
+import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import { Settings, Server, Bot, FileText, CreditCard } from 'lucide-react';
+
+export type SettingsSection = 'general' | 'mcp' | 'assistant' | 'llm-access' | 'billing';
+
+interface Props {
+  title: string;
+  active: SettingsSection;
+}
+
+const { title, active } = Astro.props;
+
+interface SectionItem {
+  id: SettingsSection;
+  label: string;
+  href: string;
+  icon: any;
+}
+
+interface SectionGroup {
+  label: string;
+  items: SectionItem[];
+}
+
+const groups: SectionGroup[] = [
+  {
+    label: 'Project Settings',
+    items: [
+      {
+        id: 'general',
+        label: 'General',
+        href: buildUrl('/settings/general'),
+        icon: Settings,
+      },
+    ],
+  },
+  {
+    label: 'AI Settings',
+    items: [
+      {
+        id: 'mcp',
+        label: 'MCP',
+        href: buildUrl('/settings/mcp'),
+        icon: Server,
+      },
+      {
+        id: 'assistant',
+        label: 'Agent',
+        href: buildUrl('/settings/assistant'),
+        icon: Bot,
+      },
+      {
+        id: 'llm-access',
+        label: 'LLM Access',
+        href: buildUrl('/settings/llm-access'),
+        icon: FileText,
+      },
+    ],
+  },
+  {
+    label: 'Workspace',
+    items: [
+      {
+        id: 'billing',
+        label: 'Billing',
+        href: buildUrl('/settings/billing'),
+        icon: CreditCard,
+      },
+    ],
+  },
+];
+---
+
+<VerticalSideBarLayout title={`${title} | Settings`} showNestedSideBar={true}>
+  <Fragment slot="sidebar-content">
+    <div class="settings-rail flex h-full flex-col bg-[rgb(var(--ec-rail-bg))]">
+      <nav class="flex flex-1 flex-col gap-4 overflow-y-auto px-3 pt-6 pb-4">
+        {
+          groups.map((group) => (
+            <div class="space-y-1">
+              <p class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-sidebar-text)/0.5)]">
+                {group.label}
+              </p>
+              <div class="flex flex-col gap-1">
+                {group.items.map((item) => {
+                  const isActive = item.id === active;
+                  return (
+                    <a
+                      href={item.href}
+                      aria-current={isActive ? 'page' : undefined}
+                      class:list={[
+                        'nav-secondary-item flex items-center gap-3 px-3 py-2.5 text-[13px] font-medium transition-colors duration-150',
+                        isActive
+                          ? 'font-semibold text-[rgb(var(--ec-page-text))]'
+                          : 'text-[rgb(var(--ec-sidebar-text))] hover:text-[rgb(var(--ec-page-text))]',
+                      ]}
+                    >
+                      <item.icon className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
+                      <span class="nav-item-label">{item.label}</span>
+                    </a>
+                  );
+                })}
+              </div>
+            </div>
+          ))
+        }
+      </nav>
+    </div>
+  </Fragment>
+
+  <div class="settings-page w-full px-8 py-8">
+    <slot />
+  </div>
+</VerticalSideBarLayout>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -19,6 +19,7 @@ import {
   Database,
   UserRound,
   UsersRound,
+  Settings,
 } from 'lucide-react';
 import {
   RectangleGroupIcon,
@@ -269,6 +270,15 @@ const organizationItems = [
   },
 ];
 
+const settingsItems = [
+  {
+    label: 'Settings',
+    icon: Settings,
+    href: buildUrl('/settings/general'),
+    current: currentPath.startsWith(buildUrl('/settings')),
+  },
+];
+
 const currentNavigationItem = [...navigationItems, ...studioNavigationItem, ...premiumFeatures].find((item) => item.current);
 const { title, description, showNestedSideBar = true, showHeader = true } = Astro.props;
 
@@ -336,17 +346,9 @@ const canPageBeEmbedded = isEmbedEnabled();
       }
       .vertical-nav-rail {
         width: var(--ec-vertical-nav-width);
-        border-right: 1px solid rgb(var(--ec-sidebar-border) / 1);
-        background: linear-gradient(
-          180deg,
-          rgb(var(--ec-accent) / 0.1) 0%,
-          rgb(var(--ec-sidebar-bg-gradient)) 16%,
-          rgb(var(--ec-sidebar-bg)) 48%,
-          rgb(var(--ec-sidebar-bg)) 100%
-        );
-        box-shadow:
-          inset -1px 0 0 rgb(var(--ec-page-border) / 0.45),
-          0 24px 44px -34px rgb(var(--ec-page-text) / 0.28);
+        border-right: 1px solid rgb(var(--ec-page-border));
+        background-color: rgb(var(--ec-page-bg));
+        box-shadow: 0 24px 44px -34px rgb(var(--ec-page-text) / 0.28);
         overflow: hidden;
       }
       :root[data-vertical-nav-collapsed='true'] .vertical-nav-rail .nav-brand-text,
@@ -401,7 +403,7 @@ const canPageBeEmbedded = isEmbedEnabled();
         min-width: var(--ec-sidebar-panel-width);
         height: 100vh;
         border-right: 1px solid rgb(var(--ec-content-border));
-        background: rgb(var(--ec-page-bg));
+        background: rgb(var(--ec-rail-bg));
         display: flex;
         flex-direction: column;
         position: fixed;
@@ -507,7 +509,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                     aria-label={item.label}
                     class={`flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
                       item.current
-                        ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent-text))] shadow-sm'
+                        ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
                         : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
                     }`}
                     title={item.label}
@@ -522,7 +524,7 @@ const canPageBeEmbedded = isEmbedEnabled();
             <hr class="rail-divider my-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
 
             <div
-              class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text))]"
+              class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text)/0.5)]"
             >
               Browse
             </div>
@@ -535,7 +537,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                   aria-label={item.label}
                   class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
                     item.current
-                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent-text))] shadow-sm'
+                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
                       : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
                   }`}
                   title={item.label}
@@ -549,7 +551,7 @@ const canPageBeEmbedded = isEmbedEnabled();
             <hr class="rail-divider my-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
 
             <div
-              class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text))]"
+              class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text)/0.5)]"
             >
               Organization
             </div>
@@ -562,7 +564,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                   aria-label={item.label}
                   class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
                     item.current
-                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent-text))] shadow-sm'
+                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
                       : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
                   }`}
                   title={item.label}
@@ -584,7 +586,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                   aria-label={item.label}
                   class={`flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
                     item.current
-                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent-text))] shadow-sm'
+                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
                       : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
                   }`}
                   title={item.label}
@@ -594,6 +596,28 @@ const canPageBeEmbedded = isEmbedEnabled();
                 </a>
               ))
             }
+
+            <div class="mt-auto pt-3">
+              <hr class="rail-divider mb-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
+              {
+                settingsItems.map((item) => (
+                  <a
+                    href={item.href}
+                    data-role="secondary-nav-item"
+                    aria-label={item.label}
+                    class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
+                      item.current
+                        ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
+                        : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
+                    }`}
+                    title={item.label}
+                  >
+                    <item.icon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+                    <span class="nav-item-label">{item.label}</span>
+                  </a>
+                ))
+              }
+            </div>
           </nav>
 
           <div class="border-t border-[rgb(var(--ec-sidebar-border)/0.7)] px-3 py-3 flex-shrink-0">
@@ -609,11 +633,26 @@ const canPageBeEmbedded = isEmbedEnabled();
           </div>
         </div>
       </aside>
-      {showNestedSideBar && <SideNav id="sidebar" class={`sidebar-panel sidebar-transition`} />}
+      {
+        showNestedSideBar &&
+          (Astro.slots.has('sidebar-content') ? (
+            <aside id="sidebar" class="sidebar-panel sidebar-transition">
+              <slot name="sidebar-content" />
+            </aside>
+          ) : (
+            <SideNav id="sidebar" class={`sidebar-panel sidebar-transition`} />
+          ))
+      }
       <main class="content-panel sidebar-transition w-full bg-[rgb(var(--ec-page-bg))]" id="content">
-        <div class="app-content-wrapper">
-          <slot />
-        </div>
+        {
+          Astro.slots.has('sidebar-content') ? (
+            <slot />
+          ) : (
+            <div class="app-content-wrapper">
+              <slot />
+            </div>
+          )
+        }
       </main>
 
       <!-- Create a overlay that tells people to purchase backstage plugin if they want to embed the page -->
@@ -647,7 +686,7 @@ const canPageBeEmbedded = isEmbedEnabled();
   const ACTIVE_NAV_CLASSES = [
     'border-[rgb(var(--ec-accent)/0.2)]',
     'bg-[rgb(var(--ec-page-bg)/0.88)]',
-    'text-[rgb(var(--ec-accent-text))]',
+    'text-[rgb(var(--ec-accent))]',
     'shadow-sm',
   ];
   const INACTIVE_NAV_CLASSES = [