@eventcatalog/core 2.24.1 → 2.24.3

package/README.md

@@ -265,4 +265,4 @@ This project follows the [all-contributors](https://github.com/all-contributors/
 
 # License
 
-MIT
+MIT.

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.24.1";
+var version = "2.24.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-XDRFRTPG.js";
-import "../chunk-XBPWZJUU.js";
+} from "../chunk-OZZMZUB3.js";
+import "../chunk-3MDI2MXJ.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.24.1";
+var version = "2.24.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-TGASC7WJ.js";
-import "../chunk-XDRFRTPG.js";
-import "../chunk-XBPWZJUU.js";
+} from "../chunk-7K4ERS3X.js";
+import "../chunk-OZZMZUB3.js";
+import "../chunk-3MDI2MXJ.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-XBPWZJUU.js → chunk-3MDI2MXJ.js}

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

package/dist/{chunk-TGASC7WJ.js → chunk-7K4ERS3X.js}

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

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

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-XBPWZJUU.js";
+} from "./chunk-3MDI2MXJ.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.24.1";
+var version = "2.24.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.config.d.cts

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

package/dist/eventcatalog.config.d.ts

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

package/dist/eventcatalog.js

@@ -6,14 +6,14 @@ import {
 } from "./chunk-OW2FQPYP.js";
 import {
   log_build_default
-} from "./chunk-TGASC7WJ.js";
-import "./chunk-XDRFRTPG.js";
+} from "./chunk-7K4ERS3X.js";
+import "./chunk-OZZMZUB3.js";
 import {
   catalogToAstro
 } from "./chunk-CXKIF3EI.js";
 import {
   VERSION
-} from "./chunk-XBPWZJUU.js";
+} from "./chunk-3MDI2MXJ.js";
 import {
   isBackstagePluginEnabled
 } from "./chunk-XMDPVKIJ.js";

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

@@ -4,15 +4,7 @@ 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 { sessions = [], currentSession, createSession, deleteSession, setCurrentSession, isStreaming } = useChat();
   const [showHelp, setShowHelp] = React.useState(false);
 
   useEffect(() => {

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

@@ -1,15 +1,112 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback, useMemo } 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 { useChat, type Message } from './hooks/ChatProvider';
 import config from '@config';
+import React from 'react';
+
+// Update Message type to include resources
+interface Resource {
+  id: string;
+  type: string;
+  url: string;
+  title?: string;
+}
+
+// Move formatMessageContent outside component since it doesn't use any component state or props
+const formatMessageContent = (content: string, resources?: Resource[]): string => {
+  // First handle any full resource tags by replacing them with just their ID/title
+  content = content.replace(/<resource[^>]*?id="([^"]*)"[^>]*?>/g, '$1');
+
+  // First escape <resource> tags
+  let formattedContent = content.replace(/<resource[^>]*>/g, (match) => {
+    return match.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  });
+
+  // If we have resources, convert matching IDs to links
+  if (resources?.length) {
+    // Create a regex pattern that matches any resource ID/title
+    const resourceMatches = resources.map((r) => ({
+      pattern: r.title || r.id,
+      url: r.url,
+      type: r.type,
+    }));
+
+    // Sort by length (longest first) to prevent partial matches
+    resourceMatches.sort((a, b) => b.pattern.length - a.pattern.length);
+
+    // Replace matches with links, but skip if already inside an HTML tag
+    for (const { pattern, url, type } of resourceMatches) {
+      // Updated regex to match whole words only using word boundaries \b
+      const regex = new RegExp(`(?<!<[^>]*)\\b(${pattern})\\b(?![^<]*>)`, 'g');
+      formattedContent = formattedContent.replace(
+        regex,
+        `<a href="${url}" class="text-purple-600 hover:text-purple-800" target="_blank" rel="noopener noreferrer">$1 (${type})</a>`
+      );
+    }
+  }
+
+  // Handle code blocks
+  formattedContent = formattedContent.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 bold text with double asterisks
+  formattedContent = formattedContent.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+
+  // Convert newlines to <br>
+  formattedContent = formattedContent.replace(/\n(?!<\/code>)/g, '<br>');
+
+  return formattedContent;
+};
+
+// Create a memoized Message component
+const ChatMessage = React.memo(({ message }: { message: Message }) => (
+  <div 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'
+      }`}
+    >
+      <div dangerouslySetInnerHTML={{ __html: formatMessageContent(message.content, message.resources) }} />
+      {!message.isUser && message.resources && message.resources.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-gray-200">
+          <p className="text-xs text-gray-500 mb-1">Referenced Resources:</p>
+          <div className="text-[10px]">
+            {message.resources.map((resource, idx) => (
+              <span key={resource.id}>
+                <a
+                  href={resource.url}
+                  className="text-purple-600 hover:text-purple-800"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {resource.title || resource.id} ({resource.type})
+                </a>
+                {idx < (message.resources?.length || 0) - 1 ? ', ' : ''}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+));
+
+ChatMessage.displayName = 'ChatMessage';
 
 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 [messages, setMessages] = useState<Array<Message>>([]);
   const [inputValue, setInputValue] = useState('');
   const [showWelcome, setShowWelcome] = useState(true);
   const [vectorWorker, setVectorWorker] = useState<Worker | null>(null);
@@ -18,10 +115,11 @@ const ChatWindow = () => {
   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 model = config.chat?.model || 'Hermes-3-Llama-3.2-3B-q4f16_1-MLC';
+  const max_tokens = config.chat?.max_tokens || 4096;
+  const similarityResults = config.chat?.similarityResults || 50;
 
-  const { currentSession, addMessageToSession, updateSession, isStreaming, setIsStreaming } = useChat();
+  const { currentSession, storeMessagesToSession, updateSession, isStreaming, setIsStreaming } = useChat();
 
   // Load messages when session changes
   useEffect(() => {
@@ -35,8 +133,15 @@ const ChatWindow = () => {
     }
   }, [currentSession]);
 
+  // If the messages change add them to the session
+  useEffect(() => {
+    if (currentSession) {
+      storeMessagesToSession(currentSession.id, messages);
+    }
+  }, [messages]);
+
   // Helper function to stop the current completion
-  const handleStop = async () => {
+  const handleStop = useCallback(async () => {
     if (completionRef.current) {
       try {
         await engine.interruptGenerate();
@@ -47,25 +152,20 @@ const ChatWindow = () => {
         console.error('Error stopping completion:', error);
       }
     }
-  };
+  }, [engine]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = useCallback(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);
-    }
+    setMessages((prev) => [...prev, { content: inputValue, isUser: true, timestamp: Date.now() }]);
 
     setIsThinking(true);
     setIsStreaming(true);
     setInputValue('');
 
     // if the first message, update the session title
-    if (messages.length === 1 && currentSession) {
+    if (currentSession) {
       updateSession({
         ...currentSession,
         title: inputValue.length > 25 ? `${inputValue.substring(0, 22)}...` : inputValue,
@@ -73,44 +173,69 @@ const ChatWindow = () => {
     }
 
     // Add input to vector store
-    vectorWorker?.postMessage({ input: inputValue });
+    vectorWorker?.postMessage({ input: inputValue, similarityResults });
 
     // @ts-ignore
     vectorWorker.onmessage = async (event) => {
       if (event.data.action === 'search-results') {
         console.log('Results', event?.data?.results);
 
-        const qaPrompt = `\n".
+        // Extract resources from results and ensure uniqueness by ID
+        const resources = Array.from(
+          new Map(
+            event.data.results.map((result: any) => {
+              const metadata = result[0].metadata;
+              const resource: Resource = {
+                id: metadata.id,
+                type: metadata.type,
+                url: `/docs/${metadata.type}s/${metadata.id}`,
+                title: metadata.title || metadata.id,
+              };
+              return [metadata.id, resource]; // Use ID as key for Map
+            })
+          ).values()
+        );
 
-                You are an expert in the domain of software architecture.
-                
-                You are given a question and a list of resources.
+        console.log('resources', resources);
 
-                Resource types include events, commands, queries, services and domains, users and teams.
+        const qaPrompt = `\n".
 
-                Never make up information, only use the information provided in the resources.
+          You are an expert in event-driven architecture and domain-driven design, specializing in documentation for EventCatalog.
 
-                Your job is to answer the question based on the resources.
+          You assist developers, architects, and business stakeholders who need information about their event-driven system catalog. You help with questions about:
+          - Events (asynchronous messages that notify about something that has happened)
+          - Commands (requests to perform an action)
+          - Queries (requests for information)
+          - Services (bounded contexts or applications that produce/consume events)
+          - Domains (business capabilities or functional areas)
 
-                This resources are all the resources that are relevant to the question.
+          IMPORTANT RULES:
+          1. Resources will be provided to you in <resource> tags. ONLY use these resources to answer questions.
+          2. NEVER include ANY <resource> tags in your responses. This is a strict requirement.
+          3. ALWAYS refer to resources by their name/ID/title attributes only.
+          4. If asked about specific resource types (e.g., "What domains do we have?"), simply list their names without elaboration.
+          5. NEVER invent or make up resources that aren't provided to you.
 
-                Use the resource url value to link to the resources.
+          RESPONSE FORMAT EXAMPLES:
+          ✓ CORRECT: "The SubscriptionService produces the UserSubscribed event."
+          ✗ INCORRECT: "<resource id="SubscriptionService">...</resource> produces events."
 
-                If any fields are undefined or missing just say you don't know as they are missing in the documentation.
+          When responding:
+          1. Use only information from the provided resources
+          2. Explain connections between resources when relevant
+          3. Use appropriate technical terminology
+          4. Use clear formatting with headings and bullet points when helpful
+          5. State clearly when information is missing rather than making assumptions
+          6. Don't provide code examples unless specifically requested
 
-                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.
+          Your primary goal is to help users understand their event-driven system through accurate documentation interpretation.
 
                 ==========
-                ${event.data.results
-                  .map((result: any) => {
-                    const metadata = result[0].metadata;
-                    return `<resource ${Object.entries(metadata)
+                ${(resources as Resource[])
+                  .map((resource: Resource) => {
+                    return `<resource ${Object.entries(resource)
                       .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(' ')} />`;
@@ -121,6 +246,7 @@ const ChatWindow = () => {
                 ""
                 `;
 
+        console.log('qaPrompt', qaPrompt);
         try {
           // Get completion
           const completion = await engine.chat.completions.create({
@@ -142,9 +268,9 @@ const ChatWindow = () => {
             stream: true,
             temperature: 0.1,
             max_tokens,
-            top_p: 0.2,
-            top_k: 5,
-            frequency_penalty: 0,
+            top_p: 0.9,
+            top_k: 40,
+            frequency_penalty: 0.1,
             presence_penalty: 0,
           });
 
@@ -162,7 +288,14 @@ const ChatWindow = () => {
 
                 if (isFirstChunk) {
                   setIsThinking(false);
-                  setMessages((prev) => [...prev, { content: responseText, isUser: false }]);
+                  setMessages((prev) => [
+                    ...prev,
+                    {
+                      content: responseText,
+                      isUser: false,
+                      timestamp: Date.now(),
+                    },
+                  ]);
                   isFirstChunk = false;
                 } else {
                   setMessages((prev) => {
@@ -174,16 +307,20 @@ const ChatWindow = () => {
                     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);
-            }
+            // Add resources after streaming is complete
+            setMessages((prev) => {
+              const newMessages = [...prev];
+              newMessages[newMessages.length - 1] = {
+                ...newMessages[newMessages.length - 1],
+                content: responseText,
+                resources: resources as { id: string; type: string; url: string; title?: string }[],
+              };
+              return newMessages;
+            });
           } catch (error: any) {
             if (error.message?.includes('cancelled')) {
               console.log('Completion was stopped by the user');
@@ -197,18 +334,19 @@ const ChatWindow = () => {
           completionRef.current = null;
         } catch (error: any) {
           console.error('Error:', error);
-          const errorMessage = { content: 'Sorry, there was an error processing your request.', isUser: false };
+          const errorMessage = {
+            content: 'Sorry, there was an error processing your request.',
+            isUser: false,
+            timestamp: Date.now(),
+          };
           setMessages((prev) => [...prev, errorMessage]);
-          if (currentSession) {
-            addMessageToSession(currentSession.id, errorMessage.content, false);
-          }
           setIsThinking(false);
           setIsStreaming(false);
           completionRef.current = null;
         }
       }
     };
-  };
+  }, [inputValue, engine, messages, currentSession, vectorWorker]);
 
   const initProgressCallback = (report: InitProgressReport) => {
     console.log('Loading LLM locally', report);
@@ -244,89 +382,73 @@ const ChatWindow = () => {
     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) => {
+  const scrollToBottom = useCallback((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>
+  // Memoize static JSX elements
+  const welcomeMessage = useMemo(
+    () => (
+      <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 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 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>
+    ),
+    []
+  );
+
+  // Memoize the messages list with the new ChatMessage component
+  const messagesList = useMemo(
+    () => (
+      <div className="space-y-4 max-w-[900px] mx-auto">
+        {messages.map((message, index) => (
+          <ChatMessage key={index} message={message} />
+        ))}
+        {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>
+    ),
+    [messages, isThinking]
+  );
+
+  // Memoize the input change handler
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  }, []);
+
+  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 ? welcomeMessage : messagesList}
+      </div>
 
       {/* Loading Status */}
       {loading && (
@@ -350,7 +472,7 @@ const ChatWindow = () => {
           <input
             type="text"
             value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
+            onChange={handleInputChange}
             onKeyPress={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();

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

@@ -1,10 +1,16 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
 
-interface Message {
+export interface Message {
   content: string;
   isUser: boolean;
   timestamp: number;
+  resources?: Array<{
+    id: string;
+    type: string;
+    url: string;
+    title?: string;
+  }>;
 }
 
 export interface ChatSession {
@@ -21,10 +27,10 @@ interface ChatContextType {
   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;
+  storeMessagesToSession: (sessionId: string, messages: Message[]) => void;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
@@ -85,21 +91,15 @@ export function ChatProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const addMessageToSession = (sessionId: string, content: string, isUser: boolean) => {
+  // Set all messages to the session
+  const storeMessagesToSession = (sessionId: string, messages: Message[]) => {
     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;
-
+      updated[index].messages = messages;
+      updated[index].lastUpdated = Date.now();
       localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
       return updated;
     });
@@ -121,10 +121,10 @@ export function ChatProvider({ children }: { children: ReactNode }) {
         createSession,
         updateSession,
         deleteSession,
-        addMessageToSession,
         setCurrentSession,
         isStreaming,
         setIsStreaming,
+        storeMessagesToSession,
       }}
     >
       {children}

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

@@ -13,8 +13,8 @@ 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`);
+      const documentsImport = await fetch(`/ai/documents.json`);
+      const embeddingsImport = await fetch(`/ai/embeddings.json`);
 
       documents = await documentsImport.json();
       embeddings = await embeddingsImport.json();
@@ -27,8 +27,10 @@ self.onmessage = async (event) => {
     }
 
     // Get the results
-    const results = await vectorStore.similaritySearchWithScore(event.data.input, 10);
-    postMessage({ results: results, action: 'search-results' });
+    const results = await vectorStore.similaritySearchWithScore(event.data.input, event?.data?.similarityResults || 10);
+    // Filter out results that don't have a score less than 0.5
+    const filteredResults = results.filter((result) => result[1] > 0.1);
+    postMessage({ results: filteredResults, action: 'search-results' });
   } catch (error) {
     console.log(error);
     self.postMessage({ error: (error as Error).message });

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

@@ -31,7 +31,24 @@ const generatorConfig = `
     {
       isEnabled ? (
         directoryExists ? (
-          <Chat client:only="react" />
+          <>
+            <div id="browserWarning" class="flex items-center justify-center w-full p-4 sm:p-8" style="display: none;">
+              <div class="max-w-2xl text-center bg-yellow-100 text-yellow-800 px-8 py-6 rounded-lg shadow-md">
+                <h2 class="text-2xl font-bold mb-4">Unsupported Browser</h2>
+                <p>
+                  EventCatalog AI Assistant uses LLM models in the browser which is{' '}
+                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GPU" class="text-blue-500 hover:underline">
+                    only supported in Chrome and Edge browsers
+                  </a>
+                  . <br />
+                  Please switch to a supported browser for the best experience.
+                </p>
+              </div>
+            </div>
+            <div id="chatContainer" class="w-full">
+              <Chat client:only="react" />
+            </div>
+          </>
         ) : (
           <div class="flex items-center justify-center w-full p-4 sm:p-8">
             <div class="max-w-2xl text-center">
@@ -105,6 +122,30 @@ const generatorConfig = `
   </div>
 </VerticalSideBarLayout>
 
+<script>
+  function checkBrowser() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isChrome = /chrome/.test(userAgent) && !/edg/.test(userAgent);
+    const isEdge = /edg/.test(userAgent);
+
+    const warningElement = document.getElementById('browserWarning') as HTMLElement;
+    const chatContainer = document.getElementById('chatContainer') as HTMLElement;
+
+    if (warningElement && chatContainer) {
+      if (!isChrome && !isEdge) {
+        warningElement.style.display = 'flex';
+        chatContainer.style.display = 'none';
+      } else {
+        warningElement.style.display = 'none';
+        chatContainer.style.display = 'block';
+      }
+    }
+  }
+
+  // Run check when DOM is loaded
+  document.addEventListener('DOMContentLoaded', checkBrowser);
+</script>
+
 <style>
   .loading-status.ready {
     background-color: rgb(240 253 244); /* light green bg */

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.24.1",
+  "version": "2.24.3",
   "publishConfig": {
     "access": "public"
   },
@@ -29,7 +29,7 @@
     "@asyncapi/avro-schema-parser": "^3.0.24",
     "@asyncapi/parser": "^3.4.0",
     "@asyncapi/react-component": "^2.4.3",
-    "@eventcatalog/generator-ai": "^0.1.1",
+    "@eventcatalog/generator-ai": "^0.1.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@huggingface/transformers": "^3.3.3",