@eventcatalog/core 2.32.2 → 2.33.0

package/dist/features.cjs

@@ -31,7 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var features_exports = {};
 __export(features_exports, {
   isBackstagePluginEnabled: () => isBackstagePluginEnabled,
-  isEventCatalogProEnabled: () => isEventCatalogProEnabled
+  isEventCatalogScaleEnabled: () => isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled: () => isEventCatalogStarterEnabled
 });
 module.exports = __toCommonJS(features_exports);
 var import_boxen = __toESM(require("boxen"), 1);
@@ -77,8 +78,8 @@ var isBackstagePluginEnabled = async (licenseKey) => {
   }
   return true;
 };
-var isEventCatalogProEnabled = async (licenseKey) => {
-  const LICENSE_KEY = process.env.EVENTCATALOG_PRO_LICENSE_KEY || null;
+var isEventCatalogScaleEnabled = async (licenseKey) => {
+  const LICENSE_KEY = process.env.EVENTCATALOG_SCALE_LICENSE_KEY || null;
   if (!LICENSE_KEY) {
     return false;
   }
@@ -91,28 +92,70 @@ var isEventCatalogProEnabled = async (licenseKey) => {
   });
   if (response.status !== 200) {
     console.log(
-      "\nTried to verify your EventCatalog Pro license but it is not valid. Please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+      "\nTried to verify your EventCatalog Scale plan, but your license key is not valid. Please check your license key or purchase a license at https://eventcatalog.cloud/\n"
     );
     return false;
   }
   if (response.status === 200) {
     const data = await response.json();
-    if ("@eventcatalog/eventcatalog-pro" !== data.plugin) {
+    if ("@eventcatalog/eventcatalog-scale" !== data.plugin) {
       console.log(
-        "\nInvalid license key for EventCatalog Pro, please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+        "\nInvalid license key for EventCatalog Scale plan, please check your license key or purchase a license at https://eventcatalog.cloud/\n"
       );
       return false;
     }
-    let message = "EventCatalog Pro is enabled for EventCatalog";
+    let message = "EventCatalog Scale plan is enabled for EventCatalog";
     if (data.is_trial) {
-      message += "\nYou are using a trial license for EventCatalog Pro.";
+      message += "\nYou are using a trial license for EventCatalog Scale plan.";
     }
     console.log(
       (0, import_boxen.default)(message, {
         padding: 1,
         margin: 1,
         borderColor: "green",
-        title: "@eventcatalog/eventcatalog-pro",
+        title: "@eventcatalog/eventcatalog-scale",
+        titleAlignment: "center"
+      })
+    );
+  }
+  return true;
+};
+var isEventCatalogStarterEnabled = async (licenseKey) => {
+  const LICENSE_KEY = process.env.EVENTCATALOG_STARTER_LICENSE_KEY || null;
+  if (!LICENSE_KEY) {
+    return false;
+  }
+  const response = await fetch("https://api.eventcatalog.cloud/functions/v1/license", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${LICENSE_KEY}`,
+      "Content-Type": "application/json"
+    }
+  });
+  if (response.status !== 200) {
+    console.log(
+      "\nTried to verify your EventCatalog Starter plan, but your license key is not valid. Please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+    );
+    return false;
+  }
+  if (response.status === 200) {
+    const data = await response.json();
+    if ("@eventcatalog/eventcatalog-starter" !== data.plugin) {
+      console.log(
+        "\nInvalid license key for EventCatalog Starter plan, please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+      );
+      return false;
+    }
+    let message = "EventCatalog Starter plan is enabled for EventCatalog";
+    if (data.is_trial) {
+      message += "\nYou are using a trial license for EventCatalog Starter Plan.";
+    }
+    console.log(
+      (0, import_boxen.default)(message, {
+        padding: 1,
+        margin: 1,
+        borderColor: "green",
+        title: "@eventcatalog/eventcatalog-starter",
         titleAlignment: "center"
       })
     );
@@ -122,5 +165,6 @@ var isEventCatalogProEnabled = async (licenseKey) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   isBackstagePluginEnabled,
-  isEventCatalogProEnabled
+  isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled
 });

package/dist/features.d.cts

@@ -1,4 +1,5 @@
 declare const isBackstagePluginEnabled: (licenseKey?: string) => Promise<boolean>;
-declare const isEventCatalogProEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogScaleEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogStarterEnabled: (licenseKey?: string) => Promise<boolean>;
 
-export { isBackstagePluginEnabled, isEventCatalogProEnabled };
+export { isBackstagePluginEnabled, isEventCatalogScaleEnabled, isEventCatalogStarterEnabled };

package/dist/features.d.ts

@@ -1,4 +1,5 @@
 declare const isBackstagePluginEnabled: (licenseKey?: string) => Promise<boolean>;
-declare const isEventCatalogProEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogScaleEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogStarterEnabled: (licenseKey?: string) => Promise<boolean>;
 
-export { isBackstagePluginEnabled, isEventCatalogProEnabled };
+export { isBackstagePluginEnabled, isEventCatalogScaleEnabled, isEventCatalogStarterEnabled };

package/dist/features.js

@@ -1,8 +1,10 @@
 import {
   isBackstagePluginEnabled,
-  isEventCatalogProEnabled
-} from "./chunk-NJGR7XUU.js";
+  isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled
+} from "./chunk-ZIZUBYNO.js";
 export {
   isBackstagePluginEnabled,
-  isEventCatalogProEnabled
+  isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled
 };

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

@@ -90,66 +90,6 @@ const Sidebar: React.FC<{}> = () => {
 
         {/* Beta Message */}
         <div className="p-4 text-xs text-gray-500 border-t border-gray-200">
-          <div className="flex items-center justify-between mb-2">
-            <p className="font-bold">This feature is currently in beta.</p>
-            <Dialog.Root open={showHelp} onOpenChange={setShowHelp}>
-              <Dialog.Trigger asChild>
-                <button title="Help" className="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                    <path
-                      fillRule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </Dialog.Trigger>
-              <Dialog.Portal>
-                <Dialog.Overlay className="fixed inset-0 bg-black/50 z-40" />
-                <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg z-50 p-6 w-[600px] max-h-[85vh] overflow-y-auto">
-                  <Dialog.Title className="text-lg font-semibold text-gray-900 mb-4">
-                    Welcome to the EventCatalog AI Assistant
-                  </Dialog.Title>
-                  <div className="text-sm text-gray-600 space-y-4">
-                    <p>
-                      This is your private AI assistant for EventCatalog. All conversations are stored locally and your data
-                      remains completely private.
-                    </p>
-                    <p>Key features:</p>
-                    <ul className="list-disc pl-4 space-y-2">
-                      <li>Local-first: All conversations are stored on your device only</li>
-                      <li>Privacy-focused: Your data is never shared with external servers</li>
-                      <li>Persistent chat history: Access your previous conversations anytime</li>
-                      <li>Multiple sessions: Organize different topics in separate chats</li>
-                    </ul>
-
-                    <div className="mt-6">
-                      <p className="font-medium mb-2">Example prompts you can try:</p>
-                      <ul className="list-disc pl-4 space-y-2 bg-gray-50 p-4 rounded-lg">
-                        <li>"I want to create a new feature, what events do we have related to Payments?"</li>
-                        <li>"What domains do we have and who owns them?"</li>
-                        <li>"What are the events for the X domain?"</li>
-                        <li>"Create me a code snippet for this event"</li>
-                      </ul>
-                    </div>
-
-                    <p className="mt-4">For additional support or feature requests, please join our Discord community.</p>
-                  </div>
-                  <Dialog.Close asChild>
-                    <button className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" aria-label="Close">
-                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                        <path
-                          fillRule="evenodd"
-                          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </Dialog.Close>
-                </Dialog.Content>
-              </Dialog.Portal>
-            </Dialog.Root>
-          </div>
           <p>
             Have issues or ideas? Let us know on{' '}
             <a
@@ -160,7 +100,65 @@ const Sidebar: React.FC<{}> = () => {
             >
               Discord
             </a>
-            .
+            <div className="inline-block">
+              <Dialog.Root open={showHelp} onOpenChange={setShowHelp}>
+                <Dialog.Trigger asChild>
+                  <button title="Help" className="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                </Dialog.Trigger>
+                <Dialog.Portal>
+                  <Dialog.Overlay className="fixed inset-0 bg-black/50 z-40" />
+                  <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg z-50 p-6 w-[600px] max-h-[85vh] overflow-y-auto">
+                    <Dialog.Title className="text-lg font-semibold text-gray-900 mb-4">
+                      Welcome to the EventCatalog AI Assistant
+                    </Dialog.Title>
+                    <div className="text-sm text-gray-600 space-y-4">
+                      <p>
+                        This is your private AI assistant for EventCatalog. All conversations are stored locally and your data
+                        remains completely private.
+                      </p>
+                      <p>Key features:</p>
+                      <ul className="list-disc pl-4 space-y-2">
+                        <li>Local-first: All conversations are stored on your device only</li>
+                        <li>Privacy-focused: Your data is never shared with external servers</li>
+                        <li>Persistent chat history: Access your previous conversations anytime</li>
+                        <li>Multiple sessions: Organize different topics in separate chats</li>
+                      </ul>
+
+                      <div className="mt-6">
+                        <p className="font-medium mb-2">Example prompts you can try:</p>
+                        <ul className="list-disc pl-4 space-y-2 bg-gray-50 p-4 rounded-lg">
+                          <li>"I want to create a new feature, what events do we have related to Payments?"</li>
+                          <li>"What domains do we have and who owns them?"</li>
+                          <li>"What are the events for the X domain?"</li>
+                          <li>"Create me a code snippet for this event"</li>
+                        </ul>
+                      </div>
+
+                      <p className="mt-4">For additional support or feature requests, please join our Discord community.</p>
+                    </div>
+                    <Dialog.Close asChild>
+                      <button className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" aria-label="Close">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                          <path
+                            fillRule="evenodd"
+                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                    </Dialog.Close>
+                  </Dialog.Content>
+                </Dialog.Portal>
+              </Dialog.Root>
+            </div>
           </p>
         </div>
       </div>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -7,17 +7,15 @@ interface Props {
 
 import {
   BookOpenText,
-  BookText,
   Workflow,
   TableProperties,
   House,
   BookUser,
-  MessageSquare,
   BotMessageSquare,
   Users,
-  Star,
-  BadgeCheck,
   Sparkles,
+  Rocket,
+  FileText,
 } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
@@ -37,7 +35,6 @@ import { isCollectionVisibleInCatalog } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
 import { hasLandingPageForDocs } from '@utils/pages';
-import { isEventCatalogProEnabled } from '@utils/feature';
 const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ getAllVersions: false });
 const queries = await getQueries({ getAllVersions: false });
@@ -46,6 +43,8 @@ const domains = await getDomains({ getAllVersions: false });
 const flows = await getFlows({ getAllVersions: false });
 const customDocs = await getCollection('customPages');
 
+import { isEventCatalogUpgradeEnabled } from '@utils/feature';
+
 const currentPath = Astro.url.pathname;
 
 const catalogHasDefaultLandingPageForDocs = await hasLandingPageForDocs();
@@ -93,15 +92,6 @@ const navigationItems = [
       (currentPath.includes('/docs') && !currentPath.includes('/docs/custom')) || currentPath.includes('/architecture/docs/'),
     sidebar: true,
   },
-  {
-    id: '/docs/custom',
-    label: 'Documentation',
-    icon: BookText,
-    href: getDefaultUrl('docs/custom', '/docs/custom'),
-    current: currentPath.includes('/docs/custom'),
-    sidebar: false,
-    hidden: !isEventCatalogProEnabled(),
-  },
   {
     id: '/visualiser',
     label: 'Visualiser',
@@ -135,19 +125,35 @@ const navigationItems = [
     sidebar: false,
     hidden: true,
   },
+].filter((item) => {
+  const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
+  return userSideBarOption ? userSideBarOption.visible : true;
+});
+
+const premiumFeatures = [
+  {
+    id: '/docs/custom',
+    label: 'Custom Documentation',
+    icon: FileText,
+    href: getDefaultUrl('docs/custom', '/docs/custom'),
+    current: currentPath.includes('/docs/custom'),
+    sidebar: false,
+    isPremium: true,
+  },
   {
     id: '/chat',
-    label: 'AI Assistant',
+    label: 'EventCatalog Chat',
     icon: BotMessageSquare,
     href: buildUrl('/chat'),
     current: currentPath.includes('/chat'),
+    isPremium: true,
   },
 ].filter((item) => {
   const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
   return userSideBarOption ? userSideBarOption.visible : true;
 });
 
-const currentNavigationItem = navigationItems.find((item) => item.current);
+const currentNavigationItem = [...navigationItems, ...premiumFeatures].find((item) => item.current);
 const { title, description } = Astro.props;
 
 const showSideBarOnLoad = currentNavigationItem?.sidebar;
@@ -193,38 +199,70 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
                         id={item.id}
                         data-role="nav-item"
                         href={item.href}
-                        class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${item.current ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'}`}
+                        class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${
+                          item.current
+                            ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700'
+                            : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'
+                        }`}
                       >
                         <div class="has-tooltip">
                           <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
                             {item.label}
                           </span>
-                          <item.icon className="h-6 w-6  " />
+                          <item.icon className="h-6 w-6" />
                         </div>
                       </a>
                     );
                   })
               }
+
+              <hr class="w-8 border-t border-gray-200" />
+
+              {
+                premiumFeatures.map((item) => (
+                  <a
+                    id={item.id}
+                    data-role="nav-item"
+                    href={item.href}
+                    class={`p-1.5 inline-block transition-colors duration-200 rounded-lg mb-8 relative ${
+                      item.current
+                        ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700'
+                        : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'
+                    }`}
+                  >
+                    <div class="has-tooltip">
+                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-indigo-500 to-indigo-700 text-white ml-10 flex items-center gap-1">
+                        <Sparkles className="h-3 w-3" /> {item.label}
+                      </span>
+                      <item.icon className="h-6 w-6" />
+                      <div class="absolute -top-1 -right-1 bg-gradient-to-r from-amber-400 to-amber-500 rounded-full p-0.5 shadow-lg">
+                        <Sparkles className="h-2 w-2 text-white" />
+                      </div>
+                    </div>
+                  </a>
+                ))
+              }
             </div>
 
-            {/* Pro link at the bottom */}
-            <div class="mb-4">
-              <a
-                id="/pro"
-                data-role="nav-item"
-                href={buildUrl('/pro')}
-                class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'bg-gradient-to-r from-purple-100 to-indigo-100 hover:from-purple-500 hover:to-purple-700 hover:text-white text-purple-700'}`}
-              >
-                <div class="has-tooltip">
-                  <span
-                    class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10"
+            {
+              isEventCatalogUpgradeEnabled() && (
+                <div class="mb-4">
+                  <a
+                    id="/pro"
+                    data-role="nav-item"
+                    href={buildUrl('/plans')}
+                    class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'bg-gradient-to-r from-purple-100 to-indigo-100 hover:from-purple-500 hover:to-purple-700 hover:text-white text-purple-700'}`}
                   >
-                    EventCatalog Pro
-                  </span>
-                  <Sparkles className="h-6 w-6" />
+                    <div class="has-tooltip">
+                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
+                        Upgrade EventCatalog
+                      </span>
+                      <Rocket className="h-6 w-6" />
+                    </div>
+                  </a>
                 </div>
-              </a>
-            </div>
+              )
+            }
           </nav>
         </div>
 

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

@@ -0,0 +1,159 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { isEventCatalogChatEnabled as hasEventCatlaogChatLicense } from '@utils/feature';
+import { BotMessageSquare } from 'lucide-react';
+const hasChatLicense = hasEventCatlaogChatLicense();
+
+if (hasChatLicense) {
+  return Astro.redirect('/chat');
+}
+---
+
+<VerticalSideBarLayout title="AI Chat">
+  <div class="min-h-[calc(100vh-60px)] bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      {/* Hero Section */}
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
+        <div>
+          <div class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 font-medium text-sm mb-6">
+            <BotMessageSquare className="w-4 h-4 mr-2" />
+            New: Ask your catalog anything
+          </div>
+          <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Ask. Understand. Ship faster.</h1>
+          <p class="text-xl text-gray-600 mb-8">
+            Get answers about your events, services, and domains — instantly. Runs entirely in your browser — your data never
+            leaves your machine.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 mb-8">
+            <a
+              href="https://demo.eventcatalog.dev/chat"
+              target="_blank"
+              class="inline-flex items-center juNot ready for AI chat? You castify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-150"
+            >
+              Try the demo
+              <svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                  fill-rule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"></path>
+              </svg>
+            </a>
+            <a
+              href="https://www.eventcatalog.cloud"
+              target="_blank"
+              class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
+            >
+              Try for free
+            </a>
+          </div>
+          <p class="text-sm text-gray-500">
+            Available with EventCatalog Starter or Scale plans
+            <a href="https://www.eventcatalog.dev/pricing" class="text-purple-600 font-medium block"
+              >Try free for 14 days, no credit card required</a
+            >
+          </p>
+        </div>
+
+        <div class="relative">
+          <div class="absolute -inset-4">
+            <div
+              class="w-full h-full max-w-full mx-auto opacity-30 blur-lg filter"
+              style="background: linear-gradient(90deg, #C084FC 0%, #818CF8 100%);"
+            >
+            </div>
+          </div>
+          <div class="relative">
+            <div class="bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden">
+              <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
+                <div class="flex items-center space-x-2">
+                  <div class="w-3 h-3 bg-red-400 rounded-full"></div>
+                  <div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
+                  <div class="w-3 h-3 bg-green-400 rounded-full"></div>
+                </div>
+              </div>
+              <div class="p-4 space-y-4">
+                <div class="flex justify-end">
+                  <div class="bg-purple-600 text-white rounded-2xl rounded-tr-sm px-4 py-2 max-w-md text-sm">
+                    What services publish order.created?
+                  </div>
+                </div>
+
+                <div class="flex justify-start">
+                  <div class="bg-gray-50 rounded-2xl rounded-tl-sm px-4 py-3 max-w-md shadow-sm">
+                    <p class="text-gray-700 text-sm">
+                      The <span class="font-semibold">Order Service</span> publishes the order.created event.
+                    </p>
+                    <p class="text-gray-700 text-sm mt-2 mb-1">This event is consumed by:</p>
+                    <ul class="space-y-1 text-gray-600 text-sm">
+                      <li>• Payment Service - Initiates payment processing</li>
+                      <li>• Inventory Service - Updates stock levels</li>
+                      <li>• Notification Service - Sends order confirmations</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Features Section */}
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Instant Search</h3>
+          <p class="text-gray-600">
+            Search and understand complex service relationships in seconds with natural language queries.
+          </p>
+        </div>
+
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Smart Insights</h3>
+          <p class="text-gray-600">Get intelligent suggestions and insights about your architecture automatically.</p>
+        </div>
+
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
+          <p class="text-gray-600">All processing happens locally in your browser. Your data never leaves your machine.</p>
+        </div>
+      </div>
+
+      {/* Bottom Link */}
+      <div class="mt-16 text-center">
+        <a
+          href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
+          target="_blank"
+          class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
+        >
+          Not ready for AI chat? You can hide this feature in settings
+        </a>
+      </div>
+    </div>
+  </div>
+</VerticalSideBarLayout>
+
+<style>
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+</style>

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

@@ -4,9 +4,9 @@ import Chat from '@enterprise/ai-assistant/components/Chat';
 import config from '@config';
 import path from 'node:path';
 import fs from 'node:fs';
-
+import { isEventCatalogChatEnabled } from '@utils/feature';
 import { Code } from 'astro-expressive-code/components';
-
+import { buildUrl } from '@utils/url-builder';
 const isEnabled = config.chat?.enabled || false;
 const chatConfig = config.chat || {};
 
@@ -25,6 +25,10 @@ const generatorConfig = `
     ],
   ],
 `;
+
+if (!isEventCatalogChatEnabled()) {
+  return Astro.redirect(buildUrl('/chat/feature'));
+}
 ---
 
 <VerticalSideBarLayout title="AI Chat">