@eventcatalog/core 2.60.0 → 2.61.0

package/dist/analytics/analytics.cjs

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-QMWI6M2I.js";
-import "../chunk-WASYSRBV.js";
+} from "../chunk-I2B6B3XZ.js";
+import "../chunk-3CAAQQUB.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.60.0";
+var version = "2.61.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-6FRDYEMA.js";
-import "../chunk-QMWI6M2I.js";
-import "../chunk-WASYSRBV.js";
+} from "../chunk-OEWPHKD6.js";
+import "../chunk-I2B6B3XZ.js";
+import "../chunk-3CAAQQUB.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-WASYSRBV.js → chunk-3CAAQQUB.js}

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

package/dist/{chunk-QMWI6M2I.js → chunk-I2B6B3XZ.js}

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

package/dist/{chunk-6FRDYEMA.js → chunk-OEWPHKD6.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.60.0";
+var version = "2.61.0";
 
 // src/constants.ts
 var VERSION = version;
@@ -563,7 +563,7 @@ var copyServerFiles = async () => {
   if (!isServerOutput) {
     return;
   }
-  import_fs2.default.cpSync((0, import_node_path6.join)(eventCatalogDir, "src/enterprise/eventcatalog-chat/pages/api"), (0, import_node_path6.join)(core, "src/pages/api/server"), {
+  import_fs2.default.cpSync((0, import_node_path6.join)(eventCatalogDir, "src/enterprise/eventcatalog-chat/pages/api"), (0, import_node_path6.join)(core, "src/pages/api"), {
     recursive: true
   });
 };

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-6FRDYEMA.js";
-import "./chunk-QMWI6M2I.js";
+} from "./chunk-OEWPHKD6.js";
+import "./chunk-I2B6B3XZ.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-WASYSRBV.js";
+} from "./chunk-3CAAQQUB.js";
 import {
   getProjectOutDir,
   isAuthEnabled,
@@ -78,7 +78,7 @@ var copyServerFiles = async () => {
   if (!isServerOutput) {
     return;
   }
-  fs.cpSync(join(eventCatalogDir, "src/enterprise/eventcatalog-chat/pages/api"), join(core, "src/pages/api/server"), {
+  fs.cpSync(join(eventCatalogDir, "src/enterprise/eventcatalog-chat/pages/api"), join(core, "src/pages/api"), {
     recursive: true
   });
 };

package/eventcatalog/astro.config.mjs

@@ -1,3 +1,4 @@
+
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import mdx from '@astrojs/mdx';

package/eventcatalog/src/enterprise/eventcatalog-chat/components/Chat.tsx

@@ -1,6 +1,5 @@
 import Sidebar from './ChatSidebar';
 import { ChatProvider } from './hooks/ChatProvider';
-import ChatWindowWebLLM from './windows/ChatWindow.client';
 import ChatWindowServer from './windows/ChatWindow.server';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ChatPromptCategoryGroup } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
@@ -12,7 +11,6 @@ interface Resource {
 
 /**
  * Chat component has two modes:
- * - Client: ChatWindow.client.tsx (uses webllm)
  * - Server: ChatWindow.server.tsx (uses server-side code, bring your own API key)
  *
  * The mode is determined by the config.output property in the eventcatalog.config.js file.
@@ -31,17 +29,29 @@ const Chat = ({
 }) => {
   const queryClient = new QueryClient();
 
+  if (output !== 'server') {
+    return (
+      // Message to turn on server side
+      <div className="flex justify-center items-center h-full bg-gray-100 p-4 rounded-lg text-center">
+        <div className="space-y-4">
+          <h1 className="text-3xl font-semibold text-gray-800">Chat is only supported on server side</h1>
+          <p className="text-sm text-gray-500">
+            Please switch to server side by setting the <code className="font-mono bg-gray-100 p-0.5 rounded">output</code>{' '}
+            property to <code className="font-mono bg-gray-100 p-0.5 rounded">server</code> in your{' '}
+            <code className="font-mono bg-gray-100 p-0.5 rounded">eventcatalog.config.js</code> file.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <ChatProvider>
       <div className="flex overflow-hidden w-full">
         <Sidebar />
-        {output === 'server' ? (
-          <QueryClientProvider client={queryClient}>
-            <ChatWindowServer {...chatConfig} resources={resources} chatPrompts={chatPrompts} />
-          </QueryClientProvider>
-        ) : (
-          <ChatWindowWebLLM {...chatConfig} />
-        )}
+        <QueryClientProvider client={queryClient}>
+          <ChatWindowServer {...chatConfig} resources={resources} chatPrompts={chatPrompts} />
+        </QueryClientProvider>
       </div>
     </ChatProvider>
   );

package/eventcatalog/src/enterprise/eventcatalog-chat/components/ChatMessage.tsx

@@ -24,45 +24,21 @@ function escapeRegex(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-// Define props for the code component explicitly
-interface CodeComponentProps extends React.HTMLAttributes<HTMLElement>, ExtraProps {
-  inline?: boolean;
-}
+// Function to parse and render content with iframes
+function parseContentWithIframes(content: string): React.ReactNode[] {
+  const iframeRegex = /<iframe[^>]*>.*?<\/iframe>/gi;
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match;
 
-const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalContent, setModalContent] = useState<{ language: string; code: string } | null>(null);
-  const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({}); // State for copy feedback
-  const [isResourcesCollapsed, setIsResourcesCollapsed] = useState(true); // State for resource section collapse
-  const [isContextCollapsed, setIsContextCollapsed] = useState(true); // State for additional context collapse
-
-  // Helper to get display name for resource, ensuring a fallback
-  const getResourceDisplayName = (resource: Resource): string => {
-    return resource.title || resource.name || resource.id || 'Resource'; // Added fallback
-  };
-
-  const handleCopy = (codeToCopy: string, id: string) => {
-    navigator.clipboard
-      .writeText(codeToCopy)
-      .then(() => {
-        setCopiedStates((prev) => ({ ...prev, [id]: true }));
-        setTimeout(() => {
-          setCopiedStates((prev) => ({ ...prev, [id]: false }));
-        }, 1500); // Reset after 1.5 seconds
-      })
-      .catch((err) => {
-        console.error('Failed to copy code: ', err);
-      });
-  };
-
-  return (
-    <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'}`}
-      >
-        {/* Apply prose styles, including prose-invert for user messages for better text contrast */}
-        <div className={`prose prose-sm max-w-none ${message.isUser ? 'prose-invert' : ''}`}>
+  while ((match = iframeRegex.exec(content)) !== null) {
+    // Add text before iframe as markdown
+    if (match.index > lastIndex) {
+      const textBefore = content.slice(lastIndex, match.index);
+      if (textBefore.trim()) {
+        parts.push(
           <ReactMarkdown
+            key={`text-${lastIndex}`}
             components={{
               code({ node, className, children, ...props }: CodeComponentProps) {
                 const inline = props.inline;
@@ -70,37 +46,14 @@ const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
                 const codeString = String(children);
                 const language = match ? match[1] : 'text';
                 const codeBlockId = `code-${React.useId()}`;
-                const isCopied = copiedStates[codeBlockId];
+                const isCopied = false; // We'll handle this in the parent component
 
-                const handleOpenModal = () => {
-                  setModalContent({ language, code: codeString.replace(/\n$/, '') });
-                  setIsModalOpen(true);
-                };
-
-                // Heuristic: Treat as inline if it doesn't contain newlines OR if explicitly inline.
-                // This handles parser quirks with single-line snippets in lists, etc.
                 const treatAsInline = inline || !codeString.includes('\n');
 
                 return !treatAsInline ? (
                   <div className="code-block bg-[#1e1e1e] rounded-md overflow-hidden my-4 relative group">
                     <div className="flex justify-between items-center px-4 py-1.5 bg-gray-700 text-gray-300 text-xs">
                       <span>{language}</span>
-                      <div className="flex items-center gap-2">
-                        <button
-                          onClick={() => handleCopy(codeString.replace(/\n$/, ''), codeBlockId)}
-                          className="text-gray-300 hover:text-white flex items-center"
-                          aria-label={isCopied ? 'Copied' : 'Copy code'}
-                        >
-                          {isCopied ? <Check size={14} className="text-green-400" /> : <Clipboard size={14} />}
-                        </button>
-                        <button
-                          onClick={handleOpenModal}
-                          className="text-gray-300 hover:text-white"
-                          aria-label="View code fullscreen"
-                        >
-                          <Fullscreen size={14} />
-                        </button>
-                      </div>
                     </div>
                     <SyntaxHighlighter
                       style={vscDarkPlus as any}
@@ -115,14 +68,9 @@ const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
                   </div>
                 ) : (
                   <code
-                    className={`px-1 py-0.5 rounded text-xs font-mono ${
-                      message.isUser
-                        ? 'bg-purple-800/70 text-purple-100' // Darker purple bg, light text for user
-                        : 'bg-gray-300/70 text-gray-900' // Darker gray bg, dark text for assistant
-                    } ${className || ''}`}
+                    className={`px-1 py-0.5 rounded text-xs font-mono bg-gray-300/70 text-gray-900 ${className || ''}`}
                     {...props}
                   >
-                    {/* Render trimmed version for inline code */}
                     {codeString.trim()}
                   </code>
                 );
@@ -133,9 +81,219 @@ const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
               p: ({ node, ...props }) => <p {...props} className="mb-2 last:mb-0" />,
             }}
           >
-            {/* Use raw content again */}
-            {message.content || ''}
+            {textBefore}
           </ReactMarkdown>
+        );
+      }
+    }
+
+    // Parse iframe attributes
+    const iframeHtml = match[0];
+    const srcMatch = iframeHtml.match(/src=["']([^"']+)["']/i);
+    const widthMatch = iframeHtml.match(/width=["']([^"']+)["']/i);
+    const heightMatch = iframeHtml.match(/height=["']([^"']+)["']/i);
+    const titleMatch = iframeHtml.match(/title=["']([^"']+)["']/i);
+
+    if (srcMatch) {
+      parts.push(
+        <iframe
+          key={`iframe-${match.index}`}
+          src={srcMatch[1]}
+          width={widthMatch ? widthMatch[1] : '100%'}
+          height={heightMatch ? heightMatch[1] : '400'}
+          title={titleMatch ? titleMatch[1] : 'Embedded content'}
+          className="w-full h-96 border rounded-lg my-4"
+          sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+          loading="lazy"
+        />
+      );
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add remaining text after last iframe
+  if (lastIndex < content.length) {
+    const textAfter = content.slice(lastIndex);
+    if (textAfter.trim()) {
+      parts.push(
+        <ReactMarkdown
+          key={`text-${lastIndex}`}
+          components={{
+            code({ node, className, children, ...props }: CodeComponentProps) {
+              const inline = props.inline;
+              const match = /language-(\w+)/.exec(className || '');
+              const codeString = String(children);
+              const language = match ? match[1] : 'text';
+              const codeBlockId = `code-${React.useId()}`;
+              const isCopied = false;
+
+              const treatAsInline = inline || !codeString.includes('\n');
+
+              return !treatAsInline ? (
+                <div className="code-block bg-[#1e1e1e] rounded-md overflow-hidden my-4 relative group">
+                  <div className="flex justify-between items-center px-4 py-1.5 bg-gray-700 text-gray-300 text-xs">
+                    <span>{language}</span>
+                  </div>
+                  <SyntaxHighlighter
+                    style={vscDarkPlus as any}
+                    language={language}
+                    PreTag="div"
+                    showLineNumbers
+                    wrapLines={true}
+                    customStyle={{ margin: 0, borderRadius: '0 0 0.375rem 0.375rem', padding: '1rem' }}
+                  >
+                    {codeString.replace(/\n$/, '')}
+                  </SyntaxHighlighter>
+                </div>
+              ) : (
+                <code
+                  className={`px-1 py-0.5 rounded text-xs font-mono bg-gray-300/70 text-gray-900 ${className || ''}`}
+                  {...props}
+                >
+                  {codeString.trim()}
+                </code>
+              );
+            },
+            a: ({ node, ...props }) => (
+              <a {...props} target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:text-purple-800" />
+            ),
+            p: ({ node, ...props }) => <p {...props} className="mb-2 last:mb-0" />,
+          }}
+        >
+          {textAfter}
+        </ReactMarkdown>
+      );
+    }
+  }
+
+  return parts;
+}
+
+// Define props for the code component explicitly
+interface CodeComponentProps extends React.HTMLAttributes<HTMLElement>, ExtraProps {
+  inline?: boolean;
+}
+
+const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalContent, setModalContent] = useState<{ language: string; code: string } | null>(null);
+  const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({}); // State for copy feedback
+  const [isResourcesCollapsed, setIsResourcesCollapsed] = useState(true); // State for resource section collapse
+  const [isContextCollapsed, setIsContextCollapsed] = useState(true); // State for additional context collapse
+
+  // Helper to get display name for resource, ensuring a fallback
+  const getResourceDisplayName = (resource: Resource): string => {
+    return resource.title || resource.name || resource.id || 'Resource'; // Added fallback
+  };
+
+  const handleCopy = (codeToCopy: string, id: string) => {
+    navigator.clipboard
+      .writeText(codeToCopy)
+      .then(() => {
+        setCopiedStates((prev) => ({ ...prev, [id]: true }));
+        setTimeout(() => {
+          setCopiedStates((prev) => ({ ...prev, [id]: false }));
+        }, 1500); // Reset after 1.5 seconds
+      })
+      .catch((err) => {
+        console.error('Failed to copy code: ', err);
+      });
+  };
+
+  return (
+    <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'}`}
+      >
+        {/* Apply prose styles, including prose-invert for user messages for better text contrast */}
+        <div className={`prose prose-sm max-w-none ${message.isUser ? 'prose-invert' : ''}`}>
+          {(() => {
+            const content = message.content || '';
+            const iframeRegex = /<iframe[^>]*>.*?<\/iframe>/gi;
+
+            // If content contains iframes, use custom parser
+            if (iframeRegex.test(content)) {
+              return parseContentWithIframes(content);
+            }
+
+            // Otherwise, use regular ReactMarkdown
+            return (
+              <ReactMarkdown
+                components={{
+                  code({ node, className, children, ...props }: CodeComponentProps) {
+                    const inline = props.inline;
+                    const match = /language-(\w+)/.exec(className || '');
+                    const codeString = String(children);
+                    const language = match ? match[1] : 'text';
+                    const codeBlockId = `code-${React.useId()}`;
+                    const isCopied = copiedStates[codeBlockId];
+
+                    const handleOpenModal = () => {
+                      setModalContent({ language, code: codeString.replace(/\n$/, '') });
+                      setIsModalOpen(true);
+                    };
+
+                    // Heuristic: Treat as inline if it doesn't contain newlines OR if explicitly inline.
+                    // This handles parser quirks with single-line snippets in lists, etc.
+                    const treatAsInline = inline || !codeString.includes('\n');
+
+                    return !treatAsInline ? (
+                      <div className="code-block bg-[#1e1e1e] rounded-md overflow-hidden my-4 relative group">
+                        <div className="flex justify-between items-center px-4 py-1.5 bg-gray-700 text-gray-300 text-xs">
+                          <span>{language}</span>
+                          <div className="flex items-center gap-2">
+                            <button
+                              onClick={() => handleCopy(codeString.replace(/\n$/, ''), codeBlockId)}
+                              className="text-gray-300 hover:text-white flex items-center"
+                              aria-label={isCopied ? 'Copied' : 'Copy code'}
+                            >
+                              {isCopied ? <Check size={14} className="text-green-400" /> : <Clipboard size={14} />}
+                            </button>
+                            <button
+                              onClick={handleOpenModal}
+                              className="text-gray-300 hover:text-white"
+                              aria-label="View code fullscreen"
+                            >
+                              <Fullscreen size={14} />
+                            </button>
+                          </div>
+                        </div>
+                        <SyntaxHighlighter
+                          style={vscDarkPlus as any}
+                          language={language}
+                          PreTag="div"
+                          showLineNumbers
+                          wrapLines={true}
+                          customStyle={{ margin: 0, borderRadius: '0 0 0.375rem 0.375rem', padding: '1rem' }}
+                        >
+                          {codeString.replace(/\n$/, '')}
+                        </SyntaxHighlighter>
+                      </div>
+                    ) : (
+                      <code
+                        className={`px-1 py-0.5 rounded text-xs font-mono ${
+                          message.isUser
+                            ? 'bg-purple-800/70 text-purple-100' // Darker purple bg, light text for user
+                            : 'bg-gray-300/70 text-gray-900' // Darker gray bg, dark text for assistant
+                        } ${className || ''}`}
+                        {...props}
+                      >
+                        {/* Render trimmed version for inline code */}
+                        {codeString.trim()}
+                      </code>
+                    );
+                  },
+                  a: ({ node, ...props }) => (
+                    <a {...props} target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:text-purple-800" />
+                  ),
+                  p: ({ node, ...props }) => <p {...props} className="mb-2 last:mb-0" />,
+                }}
+              >
+                {content}
+              </ReactMarkdown>
+            );
+          })()}
         </div>
 
         {/* Additional Context section (for user messages) */}

package/eventcatalog/src/enterprise/eventcatalog-chat/components/hooks/ChatProvider.tsx

@@ -1,3 +1,4 @@
+import type { UIMessage } from '@ai-sdk/react';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
 
@@ -31,7 +32,7 @@ interface ChatContextType {
   setCurrentSession: (session: ChatSession | null) => void;
   isStreaming: boolean;
   setIsStreaming: (isStreaming: boolean) => void;
-  storeMessagesToSession: (sessionId: string, messages: Message[]) => void;
+  storeMessagesToSession: (sessionId: string, messages: UIMessage[]) => void;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
@@ -93,13 +94,13 @@ export function ChatProvider({ children }: { children: ReactNode }) {
   };
 
   // Set all messages to the session
-  const storeMessagesToSession = (sessionId: string, messages: Message[]) => {
+  const storeMessagesToSession = (sessionId: string, messages: UIMessage[]) => {
     setSessions((prev) => {
       const index = prev.findIndex((s) => s.id === sessionId);
       if (index === -1) return prev;
 
       const updated = [...prev];
-      updated[index].messages = messages;
+      updated[index].messages = messages as unknown as Message[];
       updated[index].lastUpdated = Date.now();
       localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
       return updated;