@eventcatalog/core 2.23.3 → 2.24.1

package/LICENSE.md

@@ -1,6 +1,15 @@
+Source code in this repository is split into two parts:
+
+* Outside the `/src/enterprise` directory, source code in a given file is licensed under MIT (see below).
+* Inside the `/src/enterprise` directory, source code in a given file is licensed under the EventCatalog Plugin/Commercial License, unless otherwise noted.
+
+---
+
+All code outside of the `/src/enterprise` directory is licensed under the MIT license which is below.
+
 MIT License
 
-Copyright (c) 2022-2024 boyney123
+Copyright (c) 2022-2025 boyney123
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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.23.3";
+var version = "2.24.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-APTSNZPW.js";
-import "../chunk-UQNBP7A5.js";
+} from "../chunk-XDRFRTPG.js";
+import "../chunk-XBPWZJUU.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.23.3";
+var version = "2.24.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-4Z6CL5T6.js";
-import "../chunk-APTSNZPW.js";
-import "../chunk-UQNBP7A5.js";
+} from "../chunk-TGASC7WJ.js";
+import "../chunk-XDRFRTPG.js";
+import "../chunk-XBPWZJUU.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-4Z6CL5T6.js → chunk-TGASC7WJ.js}

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

package/dist/{chunk-UQNBP7A5.js → chunk-XBPWZJUU.js}

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

package/dist/{chunk-APTSNZPW.js → chunk-XDRFRTPG.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-UQNBP7A5.js";
+} from "./chunk-XBPWZJUU.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.23.3";
+var version = "2.24.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.config.d.cts

@@ -54,6 +54,11 @@ interface Config {
     mermaid?: {
         iconPacks?: string[];
     };
+    chat?: {
+        enabled: boolean;
+        model?: string;
+        max_tokens?: number;
+    };
 }
 
 export type { Config };

package/dist/eventcatalog.config.d.ts

@@ -54,6 +54,11 @@ interface Config {
     mermaid?: {
         iconPacks?: string[];
     };
+    chat?: {
+        enabled: boolean;
+        model?: string;
+        max_tokens?: number;
+    };
 }
 
 export type { Config };

package/dist/eventcatalog.js

@@ -6,14 +6,14 @@ import {
 } from "./chunk-OW2FQPYP.js";
 import {
   log_build_default
-} from "./chunk-4Z6CL5T6.js";
-import "./chunk-APTSNZPW.js";
+} from "./chunk-TGASC7WJ.js";
+import "./chunk-XDRFRTPG.js";
 import {
   catalogToAstro
 } from "./chunk-CXKIF3EI.js";
 import {
   VERSION
-} from "./chunk-UQNBP7A5.js";
+} from "./chunk-XBPWZJUU.js";
 import {
   isBackstagePluginEnabled
 } from "./chunk-XMDPVKIJ.js";

package/eventcatalog/astro.config.mjs

@@ -22,6 +22,9 @@ export default defineConfig({
   base,
   server: { port: config.port || 3000 },
 
+  
+
+
   outDir: config.outDir ? join(projectDirectory, config.outDir) : join(projectDirectory, 'dist'),
 
   // https://docs.astro.build/en/reference/configuration-reference/#site
@@ -61,6 +64,9 @@ export default defineConfig({
        */
       '__EC_TRAILING_SLASH__': config.trailingSlash || false,
     },
+    worker: {
+      format: 'es',
+    },
     build: {
       commonjsOptions: {
         transformMixedEsModules: true,

package/eventcatalog/src/enterprise/LICENSE.txt

@@ -0,0 +1,4 @@
+Usage of files in this directory and its subdirectories, and of EventCatalog Plugin / Enterprise features, is subject to
+the EventCatalog Plugin Licenses (https://www.eventcatalog.dev), and conditional on having a
+valid plugin license from EventCatalog. Access to files in this directory and its subdirectories does not constitute
+permission to use this code or EventCatalog Plugin / Enterprise features.

package/eventcatalog/src/enterprise/README.md

@@ -0,0 +1,5 @@
+## EventCatalog License
+
+Usage of files in this directory and its subdirectories, and of EventCatalog Plugin / Enterprise features, is subject to the EventCatalog Commercial License, and conditional on having the right license from EventCatalog. Access to files in this directory and its subdirectories does not constitute permission to use this code or EventCatalog Enterprise Edition features.
+
+Unless otherwise noted, all files Copyright © 2025 EventCatalog Ltd.

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

@@ -0,0 +1,16 @@
+import Sidebar from './ChatSidebar';
+import { ChatProvider } from './hooks/ChatProvider';
+import ChatWindow from './ChatWindow';
+
+const Chat = () => {
+  return (
+    <ChatProvider>
+      <div className="flex overflow-hidden w-full">
+        <Sidebar />
+        <ChatWindow />
+      </div>
+    </ChatProvider>
+  );
+};
+
+export default Chat;

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

@@ -0,0 +1,180 @@
+import React, { useEffect } from 'react';
+import { format } from 'date-fns';
+import { useChat } from './hooks/ChatProvider';
+import * as Dialog from '@radix-ui/react-dialog';
+
+const Sidebar: React.FC<{}> = () => {
+  const {
+    sessions = [],
+    currentSession,
+    createSession,
+    deleteSession,
+    addMessageToSession,
+    setCurrentSession,
+    isStreaming,
+  } = useChat();
+  const [showHelp, setShowHelp] = React.useState(false);
+
+  useEffect(() => {
+    // 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);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (sessions.length === 0) {
+      createSession();
+    }
+  }, [sessions]);
+
+  return (
+    <div className="h-[calc(100vh-64px)] bg-gray-50 flex-shrink-0 border-r border-gray-200">
+      <div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col h-full">
+        {/* New Chat Button */}
+        <div className="p-4 border-b border-gray-200">
+          <div className="flex items-center justify-between gap-2">
+            <button
+              onClick={createSession}
+              disabled={isStreaming}
+              className={`flex-1 flex items-center justify-between px-3 py-2 text-sm bg-white hover:bg-gray-100 rounded-lg border border-gray-200 text-gray-700 ${isStreaming ? 'opacity-50 cursor-not-allowed' : ''}`}
+            >
+              <span>New chat</span>
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                  fillRule="evenodd"
+                  d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Chat History */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="p-2 space-y-2">
+            <div className="text-xs text-gray-500 px-2 py-1">Your chats</div>
+            <div className="space-y-1">
+              {sessions.map((session) => (
+                <div
+                  key={session.id}
+                  className={`group relative flex flex-col ${
+                    currentSession?.id === session.id ? 'bg-gray-100' : 'hover:bg-gray-50'
+                  } rounded-lg`}
+                >
+                  <button
+                    onClick={(e) => deleteSession(session.id)}
+                    disabled={isStreaming}
+                    className={`absolute right-1 top-1 p-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-gray-400 hover:text-gray-600 ${currentSession?.id === session.id ? 'opacity-100' : ''} ${isStreaming ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    title="Delete chat"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => setCurrentSession(session)}
+                    disabled={isStreaming}
+                    className={`flex-1 text-left px-3 py-2 text-sm ${isStreaming ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  >
+                    <div className="font-medium text-gray-700 pr-7">{session.title}</div>
+                    <div className="flex justify-between items-center mt-1 text-xs text-gray-400">
+                      <span>{session.messages.length} messages</span>
+                      <span>{format(session.lastUpdated, 'dd/MM/yyyy, HH:mm:ss')}</span>
+                    </div>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 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
+              href="https://discord.com/channels/918092420338569216/1342473496957288581"
+              className="text-blue-600 hover:text-blue-800 underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Discord
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

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

@@ -0,0 +1,395 @@
+import { useEffect, useState, useRef } from 'react';
+import { BookOpen, Send } from 'lucide-react';
+import { Document } from 'langchain/document';
+import { CreateWebWorkerMLCEngine, type InitProgressReport } from '@mlc-ai/web-llm';
+import { useChat } from './hooks/ChatProvider';
+import config from '@config';
+
+const ChatWindow = () => {
+  const [loading, setLoading] = useState(true);
+  const [loadingProgress, setLoadingProgress] = useState(0);
+  const [engine, setEngine] = useState<any>(null);
+  const [messages, setMessages] = useState<Array<{ content: string; isUser: boolean }>>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [showWelcome, setShowWelcome] = useState(true);
+  const [vectorWorker, setVectorWorker] = useState<Worker | null>(null);
+  const [isThinking, setIsThinking] = useState(false);
+  const completionRef = useRef<any>(null);
+  const outputRef = useRef<HTMLDivElement>(null);
+
+  // LLM configuration from eventcatalog.config.js file
+  const model = config.chat?.model || 'Llama-2-7b-chat-hf-q4f16_1-MLC';
+  const max_tokens = config.chat?.max_tokens || 8192;
+
+  const { currentSession, addMessageToSession, updateSession, isStreaming, setIsStreaming } = useChat();
+
+  // Load messages when session changes
+  useEffect(() => {
+    if (currentSession) {
+      console.log('currentSession', currentSession.messages);
+      setMessages(currentSession.messages);
+      setShowWelcome(false);
+    } else {
+      setMessages([]);
+      setShowWelcome(true);
+    }
+  }, [currentSession]);
+
+  // Helper function to stop the current completion
+  const handleStop = async () => {
+    if (completionRef.current) {
+      try {
+        await engine.interruptGenerate();
+        completionRef.current = null;
+        setIsStreaming(false);
+        setIsThinking(false);
+      } catch (error) {
+        console.error('Error stopping completion:', error);
+      }
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!inputValue.trim() || !engine) return;
+
+    // Add to messages
+    setMessages((prev) => [...prev, { content: inputValue, isUser: true }]);
+
+    // Add message to session store only
+    if (currentSession) {
+      addMessageToSession(currentSession.id, inputValue, true);
+    }
+
+    setIsThinking(true);
+    setIsStreaming(true);
+    setInputValue('');
+
+    // if the first message, update the session title
+    if (messages.length === 1 && currentSession) {
+      updateSession({
+        ...currentSession,
+        title: inputValue.length > 25 ? `${inputValue.substring(0, 22)}...` : inputValue,
+      });
+    }
+
+    // Add input to vector store
+    vectorWorker?.postMessage({ input: inputValue });
+
+    // @ts-ignore
+    vectorWorker.onmessage = async (event) => {
+      if (event.data.action === 'search-results') {
+        console.log('Results', event?.data?.results);
+
+        const qaPrompt = `\n".
+
+                You are an expert in the domain of software architecture.
+                
+                You are given a question and a list of resources.
+
+                Resource types include events, commands, queries, services and domains, users and teams.
+
+                Never make up information, only use the information provided in the resources.
+
+                Your job is to answer the question based on the resources.
+
+                This resources are all the resources that are relevant to the question.
+
+                Use the resource url value to link to the resources.
+
+                If any fields are undefined or missing just say you don't know as they are missing in the documentation.
+
+                When you give the name of resources back to the user, you can also provide them with a link directly to the resource, use the url field for this.
+
+                ==========
+                ${event.data.results
+                  .map((result: any) => {
+                    const metadata = result[0].metadata;
+                    return `<resource ${Object.entries(metadata)
+                      .filter(([key, value]) => key !== 'markdown' && key !== 'loc')
+                      .map(([key, value]) => {
+                        // Special handling for resourceType to construct url
+                        if (key === 'type') {
+                          return `url="/docs/${value}s/${metadata.id}" ${key}="${value}"`;
+                        }
+                        return `${key}="${value}"`;
+                      })
+                      .join(' ')} />`;
+                  })
+                  .join('\n')}\n
+                ==========
+               
+                ""
+                `;
+
+        try {
+          // Get completion
+          const completion = await engine.chat.completions.create({
+            messages: [
+              {
+                role: 'system',
+                content: qaPrompt,
+              },
+              // previous messages
+              ...messages.map((msg) => ({
+                role: msg.isUser ? 'user' : 'assistant',
+                content: msg.content,
+              })),
+              {
+                role: 'user',
+                content: inputValue,
+              },
+            ],
+            stream: true,
+            temperature: 0.1,
+            max_tokens,
+            top_p: 0.2,
+            top_k: 5,
+            frequency_penalty: 0,
+            presence_penalty: 0,
+          });
+
+          // Store completion reference for potential cancellation
+          completionRef.current = completion;
+
+          let isFirstChunk = true;
+          let responseText = '';
+
+          try {
+            for await (const chunk of completion) {
+              const content = chunk.choices[0]?.delta?.content || '';
+              if (content) {
+                responseText += content;
+
+                if (isFirstChunk) {
+                  setIsThinking(false);
+                  setMessages((prev) => [...prev, { content: responseText, isUser: false }]);
+                  isFirstChunk = false;
+                } else {
+                  setMessages((prev) => {
+                    const newMessages = [...prev];
+                    newMessages[newMessages.length - 1] = {
+                      ...newMessages[newMessages.length - 1],
+                      content: responseText,
+                    };
+                    return newMessages;
+                  });
+                }
+                // Add scroll after each chunk
+                scrollToBottom();
+              }
+            }
+
+            // Only add to session store after complete response
+            if (currentSession) {
+              console.log('currentSession', currentSession);
+              addMessageToSession(currentSession.id, responseText, false);
+            }
+          } catch (error: any) {
+            if (error.message?.includes('cancelled')) {
+              console.log('Completion was stopped by the user');
+            } else {
+              throw error;
+            }
+          }
+
+          setIsThinking(false);
+          setIsStreaming(false);
+          completionRef.current = null;
+        } catch (error: any) {
+          console.error('Error:', error);
+          const errorMessage = { content: 'Sorry, there was an error processing your request.', isUser: false };
+          setMessages((prev) => [...prev, errorMessage]);
+          if (currentSession) {
+            addMessageToSession(currentSession.id, errorMessage.content, false);
+          }
+          setIsThinking(false);
+          setIsStreaming(false);
+          completionRef.current = null;
+        }
+      }
+    };
+  };
+
+  const initProgressCallback = (report: InitProgressReport) => {
+    console.log('Loading LLM locally', report);
+    setLoadingProgress(Math.round(report.progress * 100));
+    if (report.progress === 1) {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const initEngine = async () => {
+      try {
+        // Cache the LLMs text file
+        const engineCreator = CreateWebWorkerMLCEngine;
+        const newEngine = await engineCreator(
+          new Worker(new URL('./workers/engine.ts', import.meta.url), { type: 'module' }),
+          model,
+          { initProgressCallback }
+        );
+        setEngine(newEngine);
+      } catch (error) {
+        console.error('Failed to initialize:', error);
+      }
+    };
+
+    const importDocuments = async () => {
+      const worker = new Worker(new URL('./workers/document-importer.ts', import.meta.url), { type: 'module' });
+      worker.postMessage({ init: true });
+      setVectorWorker(worker);
+    };
+
+    importDocuments();
+    initEngine();
+  }, []);
+
+  // Helper function to format message content
+  const formatMessageContent = (content: string): string => {
+    // First handle code blocks
+    let formattedContent = content.replace(/```([\s\S]*?)```/g, (match, codeContent) => {
+      const escapedCode = codeContent.trim().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      return `<pre class="bg-gray-800 border border-gray-700 p-4 my-3 rounded-lg overflow-x-auto"><code class="text-sm font-mono text-gray-200">${escapedCode}</code></pre>`;
+    });
+
+    // Handle inline code
+    formattedContent = formattedContent.replace(/(?<!`)`([^`]+)`(?!`)/g, (match, code) => {
+      const escapedCode = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      return `<code class="bg-gray-500 border border-gray-700 px-2 py-0.5 rounded text-sm font-mono text-gray-200">${escapedCode}</code>`;
+    });
+
+    // Handle links
+    formattedContent = formattedContent.replace(
+      /<a\s+href="([^"]+)">/g,
+      '<a href="$1" class="text-purple-600 hover:underline" target="_blank" rel="noopener noreferrer">'
+    );
+
+    // Convert newlines to <br>
+    formattedContent = formattedContent.replace(/\n(?!<\/code>)/g, '<br>');
+
+    return formattedContent;
+  };
+
+  // Add new function to handle smooth scrolling
+  const scrollToBottom = (smooth = true) => {
+    if (outputRef.current) {
+      outputRef.current.scrollTo({
+        top: outputRef.current.scrollHeight,
+        behavior: smooth ? 'smooth' : 'auto',
+      });
+    }
+  };
+
+  // Add effect to scroll when messages change
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden h-[calc(100vh-60px)] w-full">
+      {/* Chat Messages */}
+      <div id="output" ref={outputRef} className="flex-1 overflow-y-auto p-4 space-y-4 w-full mx-auto">
+        {showWelcome || messages.length === 0 ? (
+          <div id="welcomeMessage" className="flex justify-center items-center h-full">
+            <div className="text-center space-y-6 max-w-2xl px-4">
+              <div className="flex justify-center">
+                <BookOpen size={48} strokeWidth={1.5} className="text-gray-400" />
+              </div>
+              <div className="space-y-4">
+                <h1 className="text-3xl font-semibold text-gray-800">Ask questions about your architecture</h1>
+                <p className="text-sm text-gray-500">AI Models are local and do not leave your device.</p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-4 max-w-[900px] mx-auto">
+            {messages.map((message, index) => (
+              <div key={index} className={`flex ${message.isUser ? 'justify-end' : 'justify-start'} mb-4`}>
+                <div
+                  className={`max-w-[80%] rounded-lg p-3 ${
+                    message.isUser ? 'bg-purple-600 text-white rounded-br-none' : 'bg-gray-100 text-gray-800 rounded-bl-none'
+                  }`}
+                  dangerouslySetInnerHTML={{ __html: formatMessageContent(message.content) }}
+                />
+              </div>
+            ))}
+            {isThinking && (
+              <div className="flex justify-start mb-4">
+                <div className="flex items-center space-x-2 max-w-[80%] rounded-lg p-3 bg-gray-100 text-gray-800 rounded-bl-none">
+                  <div className="flex space-x-1">
+                    <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Loading Status */}
+      {loading && (
+        <div className="max-w-[900px] mx-auto w-full px-4">
+          <div id="loadingStatus" className="mb-2 py-2 px-4 bg-gray-100 text-gray-700 rounded-lg text-center loading-status">
+            <span className="block">
+              Initializing AI model...
+              {loadingProgress > 0 && `(${loadingProgress}%)`}
+            </span>
+            <span className="block text-xs text-gray-500">
+              Loading model into your browser, this may take a minute or two. The first time it will take longer then the model is
+              cached.
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Input Area */}
+      <div className="border-t border-gray-200 p-4 bg-white">
+        <div className="max-w-[900px] mx-auto relative">
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSubmit();
+              }
+            }}
+            placeholder="What events do we have?"
+            className="w-full px-4 py-3 bg-white text-gray-800 rounded-lg border border-gray-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 disabled:bg-gray-50 disabled:cursor-not-allowed pr-24"
+            disabled={loading || isStreaming}
+          />
+          <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            {isStreaming ? (
+              <button
+                onClick={handleStop}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium"
+              >
+                Stop
+              </button>
+            ) : (
+              <button
+                onClick={handleSubmit}
+                disabled={loading || isStreaming}
+                className="px-4 py-2 flex items-center bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:bg-gray-200 disabled:cursor-not-allowed text-sm font-medium"
+              >
+                {/* Add icon */}
+                <Send size={16} strokeWidth={1.5} className="mr-2" />
+                Send
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="max-w-[900px] mx-auto flex justify-between">
+          {/* show what model is loaded */}
+          <p className="text-xs text-gray-400 mt-2">Model: {model}</p>
+          <p className="text-xs text-gray-500 mt-2">EventCatalog AI can make mistakes. Check important info.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatWindow;

package/eventcatalog/src/enterprise/ai-assistant/components/hooks/ChatProvider.tsx

@@ -0,0 +1,141 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+
+interface Message {
+  content: string;
+  isUser: boolean;
+  timestamp: number;
+}
+
+export interface ChatSession {
+  id: string;
+  title: string;
+  messages: Message[];
+  lastUpdated: number;
+  createdAt: number;
+}
+
+interface ChatContextType {
+  sessions: ChatSession[];
+  currentSession: ChatSession | null;
+  createSession: () => void;
+  updateSession: (session: ChatSession) => void;
+  deleteSession: (id: string) => void;
+  addMessageToSession: (sessionId: string, content: string, isUser: boolean) => void;
+  setCurrentSession: (session: ChatSession | null) => void;
+  isStreaming: boolean;
+  setIsStreaming: (isStreaming: boolean) => void;
+}
+
+const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'chat_sessions';
+
+export function ChatProvider({ children }: { children: ReactNode }) {
+  const [sessions, setSessions] = useState<ChatSession[]>(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored ? JSON.parse(stored) : [];
+    }
+    return [];
+  });
+  const [currentSession, setCurrentSession] = useState<ChatSession | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+
+  const createSession = () => {
+    const newSession: ChatSession = {
+      id: crypto.randomUUID(),
+      title: `Chat ${sessions.length + 1}`,
+      messages: [],
+      lastUpdated: Date.now(),
+      createdAt: Date.now(),
+    };
+
+    setSessions((prev) => {
+      const updated = [newSession, ...prev];
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+      return updated;
+    });
+    setCurrentSession(newSession);
+  };
+
+  const updateSession = (session: ChatSession) => {
+    setSessions((prev) => {
+      const index = prev.findIndex((s) => s.id === session.id);
+      if (index === -1) return prev;
+
+      const updated = [...prev];
+      updated[index] = {
+        ...session,
+        lastUpdated: Date.now(),
+      };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+      return updated;
+    });
+  };
+
+  const deleteSession = (id: string) => {
+    setSessions((prev) => {
+      const updated = prev.filter((session) => session.id !== id);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+      return updated;
+    });
+    if (currentSession?.id === id) {
+      setCurrentSession(null);
+    }
+  };
+
+  const addMessageToSession = (sessionId: string, content: string, isUser: boolean) => {
+    setSessions((prev) => {
+      const index = prev.findIndex((s) => s.id === sessionId);
+      if (index === -1) return prev;
+
+      const updated = [...prev];
+      const session = { ...updated[index] };
+      session.messages.push({
+        content,
+        isUser,
+        timestamp: Date.now(),
+      });
+      session.lastUpdated = Date.now();
+      updated[index] = session;
+
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+      return updated;
+    });
+  };
+
+  useEffect(() => {
+    if (sessions.length > 0) {
+      setCurrentSession(sessions[0]);
+    } else {
+      createSession();
+    }
+  }, []);
+
+  return (
+    <ChatContext.Provider
+      value={{
+        sessions,
+        currentSession,
+        createSession,
+        updateSession,
+        deleteSession,
+        addMessageToSession,
+        setCurrentSession,
+        isStreaming,
+        setIsStreaming,
+      }}
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+}
+
+export function useChat() {
+  const context = useContext(ChatContext);
+  if (context === undefined) {
+    throw new Error('useChat must be used within a ChatProvider');
+  }
+  return context;
+}

package/eventcatalog/src/enterprise/ai-assistant/components/workers/document-importer.ts

@@ -0,0 +1,36 @@
+import { HuggingFaceTransformersEmbeddings } from '@langchain/community/embeddings/huggingface_transformers';
+import { MemoryVectorStore } from 'langchain/vectorstores/memory';
+
+const embeddingsInstance = new HuggingFaceTransformersEmbeddings({ model: 'Xenova/all-MiniLM-L6-v2' });
+
+// Create the vector store
+const vectorStore = new MemoryVectorStore(embeddingsInstance);
+
+let documents: any;
+let embeddings: any;
+
+self.onmessage = async (event) => {
+  try {
+    // Initialize the vector store
+    if (event?.data?.init && !documents && !embeddings) {
+      const documentsImport = await fetch(`/generated/ai/documents.json`);
+      const embeddingsImport = await fetch(`/generated/ai/embeddings.json`);
+
+      documents = await documentsImport.json();
+      embeddings = await embeddingsImport.json();
+
+      await vectorStore.addVectors(embeddings, documents);
+    }
+
+    if (!event?.data?.input) {
+      return;
+    }
+
+    // Get the results
+    const results = await vectorStore.similaritySearchWithScore(event.data.input, 10);
+    postMessage({ results: results, action: 'search-results' });
+  } catch (error) {
+    console.log(error);
+    self.postMessage({ error: (error as Error).message });
+  }
+};

package/eventcatalog/src/enterprise/ai-assistant/components/workers/engine.ts

@@ -0,0 +1,7 @@
+import { WebWorkerMLCEngineHandler } from '@mlc-ai/web-llm';
+
+// Hookup an Engine to a worker handler
+const handler = new WebWorkerMLCEngineHandler();
+self.onmessage = (msg: MessageEvent) => {
+  handler.onmessage(msg);
+};

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -5,7 +5,7 @@ interface Props {
   description?: string;
 }
 
-import { BookOpenText, Workflow, TableProperties, House, BookUser } from 'lucide-react';
+import { BookOpenText, Workflow, TableProperties, House, BookUser, MessageSquare, BotMessageSquare } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
 import SideNav from '../components/SideNav/SideNav.astro';
@@ -92,6 +92,13 @@ const navigationItems = [
     current: currentPath.includes('/directory'),
     sidebar: false,
   },
+  {
+    id: '/chat',
+    label: 'AI Assistant',
+    icon: BotMessageSquare,
+    href: buildUrl('/chat'),
+    current: currentPath.includes('/chat'),
+  },
 ];
 
 const currentNavigationItem = navigationItems.find((item) => item.current);

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

@@ -0,0 +1,122 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Chat from '@enterprise/ai-assistant/components/Chat';
+import config from '@config';
+import path from 'node:path';
+import fs from 'node:fs';
+
+import { Code } from 'astro-expressive-code/components';
+
+const isEnabled = config.chat?.enabled || false;
+
+const PROJECT_DIR = path.resolve(process.env.PROJECT_DIR || process.cwd());
+const GENERATED_AI_DIR = path.resolve(PROJECT_DIR, 'public/ai');
+
+const directoryExists = fs.existsSync(GENERATED_AI_DIR);
+
+const generatorConfig = `
+ generators: [
+    [
+      "@eventcatalog/generator-ai", {
+        // If you want to chunk files into smaller chunks, set this to true
+        splitMarkdownFiles: true
+      }
+    ],
+  ],
+`;
+---
+
+<VerticalSideBarLayout title="AI Chat">
+  <div class="flex h-[calc(100vh-60px)] bg-white">
+    {
+      isEnabled ? (
+        directoryExists ? (
+          <Chat client:only="react" />
+        ) : (
+          <div class="flex items-center justify-center w-full p-4 sm:p-8">
+            <div class="max-w-2xl text-center">
+              <h2 class="text-2xl font-bold text-gray-900 mb-4">EventCatalog AI Assistant Setup Required</h2>
+              <p class="text-gray-600 mb-6">
+                To use the AI Assistant, you need to generate the AI data first.
+                <br />
+                Please install the plugin and run the generator command to generate the AI data.
+              </p>
+
+              <div class="text-left space-y-4">
+                <div class="space-y-2">
+                  <h2 class="text-lg font-semibold  text-left">1. Install the generator</h2>
+                  <Code code={`npm i @eventcatalog/generator-ai`} lang="bash" frame="terminal" />
+                </div>
+
+                <div class="space-y-2">
+                  <h2 class="text-lg font-semibold text-left">2. Configure the generator</h2>
+                  <Code code={generatorConfig} lang="javascript" frame="terminal" title="eventcatalog.config.js" />
+                </div>
+
+                <div class="space-y-2">
+                  <h2 class="text-lg font-semibold  text-left">3. Generate the AI data</h2>
+                  <Code code={`npm run generate`} lang="bash" frame="none" />
+                </div>
+                <p class="text-gray-600 text-sm mt-2">
+                  After running the generator, a new folder called <code class="bg-gray-100 p-1 rounded-md">generated-ai</code>{' '}
+                  will be created in your project.
+                </p>
+
+                <p class="text-gray-600 text-sm mt-2">Once done, refresh this page.</p>
+              </div>
+            </div>
+          </div>
+        )
+      ) : (
+        <div class="flex items-center justify-center w-full p-4 sm:p-8">
+          <div class="max-w-6xl flex flex-col md:flex-row gap-8 md:gap-12 items-center">
+            {/* Left side - Illustration */}
+            <div class="flex-1">
+              <img
+                src="/images/ai-placeholder.png"
+                alt="AI Assistant Illustration"
+                class="w-full max-w-sm md:max-w-md mx-auto  rounded-lg shadow-lg"
+              />
+            </div>
+
+            {/* Right side - Content */}
+            <div class="flex-1">
+              <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">EventCatalog AI Assistant</h2>
+              <p class="text-gray-600 mb-6 text-base md:text-lg">
+                Chat with your catalog to quickly find information, understand relationships, and get instant answers about your
+                architecture. Our AI-powered assistant makes exploring your event catalog faster and more intuitive than ever.
+              </p>
+
+              <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">
+                  Learn more about setup →
+                </a>
+              </div>
+              <p class="text-gray-600 mb-6 text-sm">
+                Your data stays private and secure - all processing happens locally on your machine.
+              </p>
+            </div>
+          </div>
+        </div>
+      )
+    }
+  </div>
+</VerticalSideBarLayout>
+
+<style>
+  .loading-status.ready {
+    background-color: rgb(240 253 244); /* light green bg */
+    color: rgb(22 163 74); /* green text */
+  }
+
+  .loading-status.hidden {
+    display: none;
+  }
+
+  /* Add smooth scrolling behavior */
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+</style>

package/eventcatalog/src/pages/docs/teams/[id].md.ts

@@ -15,8 +15,6 @@ export async function getStaticPaths() {
     return [];
   }
 
-  console.log(teams);
-
   return teams.map((team) => ({
     params: { type: 'teams', id: team.data.id },
     props: { content: team },
@@ -29,8 +27,6 @@ export const GET: APIRoute = async ({ params, props }) => {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 
-  console.log(props.context);
-
   if (props?.content?.data?.pathToFile) {
     const file = fs.readFileSync(props.content.data.pathToFile, 'utf8');
     return new Response(file, { status: 200 });

package/eventcatalog/tsconfig.json

@@ -11,7 +11,9 @@
       "@catalog/components/*": ["src/custom-defined-components/*"],
       "@types": ["src/types/index.ts"],
       "@utils/*": ["src/utils/*"],
-      "@layouts/*": ["src/layouts/*"]
+      "@layouts/*": ["src/layouts/*"],
+      "@enterprise/*": ["src/enterprise/*"],
+      "@ai/*": ["src/generated-ai/*"]
     },
     "jsx": "react-jsx",
     "jsxImportSource": "react",

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.23.3",
+  "version": "2.24.1",
   "publishConfig": {
     "access": "public"
   },
@@ -29,10 +29,15 @@
     "@asyncapi/avro-schema-parser": "^3.0.24",
     "@asyncapi/parser": "^3.4.0",
     "@asyncapi/react-component": "^2.4.3",
+    "@eventcatalog/generator-ai": "^0.1.1",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "@huggingface/transformers": "^3.3.3",
     "@iconify-json/logos": "^1.2.4",
+    "@langchain/community": "^0.3.32",
+    "@mlc-ai/web-llm": "^0.2.78",
     "@parcel/watcher": "^2.4.1",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@stoplight/json-schema-viewer": "^4.16.4",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
@@ -47,12 +52,14 @@
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "dagre": "^0.8.5",
+    "date-fns": "^4.1.0",
     "diff": "^7.0.0",
     "diff2html": "^3.4.48",
     "glob": "^10.4.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
     "js-yaml": "^4.1.0",
+    "langchain": "^0.3.19",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
     "lucide-react": "^0.453.0",
@@ -108,6 +115,8 @@
     "preview": "astro preview",
     "astro": "astro",
     "start:catalog": "node scripts/start-catalog-locally.js",
+    "preview:catalog": "node scripts/preview-catalog-locally.js",
+    "generate:catalog": "node scripts/generate-catalog-locally.js",
     "verify-build:catalog": "rimraf dist && pnpm run build:cd",
     "changeset": "changeset",
     "generate": "pnpm run build:bin && npx . generate",