@eventcatalog/core 3.1.0 → 3.2.1

package/eventcatalog/src/components/ChatPanel/ChatPanelButton.tsx

@@ -9,11 +9,11 @@ const ChatPanelButton = () => {
     <>
       <button
         onClick={() => setIsOpen(true)}
-        className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-white hover:bg-gray-50 ring-1 ring-inset ring-gray-300 shadow-sm transition-colors text-sm ml-[-1px]"
+        className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))] shadow-sm transition-colors text-sm ml-[-1px]"
         aria-label="Open AI Assistant"
       >
         <BookOpen size={14} className="text-[rgb(var(--ec-accent))]" />
-        <span className="font-light text-gray-600">Ask</span>
+        <span className="font-light text-[rgb(var(--ec-page-text-muted))]">Ask</span>
       </button>
 
       <ChatPanel isOpen={isOpen} onClose={() => setIsOpen(false)} />

package/eventcatalog/src/components/MDX/IcePanel/IcePanel.astro

@@ -0,0 +1,77 @@
+---
+import Admonition from '@components/MDX/Admonition';
+import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
+import type { CollectionEntry } from 'astro:content';
+import { ExpandIcon } from 'lucide-react';
+
+interface Props {
+  title?: string;
+  description?: string;
+  height?: string;
+  width?: string;
+  url: string;
+}
+
+const { title, description, height = '600', width = '100%', url, ...eventCatalogResource } = Astro.props;
+
+const resource = eventCatalogResource as CollectionEntry<'services'>;
+
+// Validate that the URL is from IcePanel
+const isValidIcePanelUrl = url?.startsWith('https://s.icepanel.io/') || url?.startsWith('https://icepanel.io/');
+
+const backUrl = resource.collection
+  ? buildUrl(`/docs/${resource.collection}/${resource.data.id}/${resource.data.version}#${title}-icepanel-title`)
+  : undefined;
+
+const fullScreenParams = {
+  url: url,
+  title: title,
+  back: backUrl,
+};
+
+const openFullScreenUrl = buildUrlWithParams(`/icepanel`, fullScreenParams);
+---
+
+{
+  !url && (
+    <Admonition type="warning">
+      <div>
+        <span class="block font-bold">{`<IcePanel/>`} failed to load</span>
+        <span class="block">Please provide a url to use the IcePanel component.</span>
+      </div>
+    </Admonition>
+  )
+}
+
+{
+  url && !isValidIcePanelUrl && (
+    <Admonition type="warning">
+      <div>
+        <span class="block font-bold">{`<IcePanel/>`} invalid URL</span>
+        <span class="block">Please provide a valid IcePanel URL (e.g., https://s.icepanel.io/...).</span>
+      </div>
+    </Admonition>
+  )
+}
+
+{
+  url && isValidIcePanelUrl && (
+    <div>
+      {title && (
+        <h3 id={`${title}-icepanel-title`} class="text-3xl font-bold">
+          {title}
+        </h3>
+      )}
+      {description && <p class="text-[rgb(var(--ec-page-text-muted))] mb-3">{description}</p>}
+      <div class="relative">
+        <iframe class="rounded-2xl border-none" src={url} width={width} height={height} title={title || 'IcePanel Diagram'} />
+        <a
+          href={openFullScreenUrl}
+          class="absolute bottom-[15px] right-5 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle))] px-4 py-2 rounded-md transition-colors"
+        >
+          <ExpandIcon className="w-5 h-5" />
+        </a>
+      </div>
+    </div>
+  )
+}

package/eventcatalog/src/components/MDX/components.tsx

@@ -25,6 +25,7 @@ import Miro from '@components/MDX/Miro/Miro.astro';
 import Lucid from '@components/MDX/Lucid/Lucid.astro';
 import DrawIO from '@components/MDX/DrawIO/DrawIO.astro';
 import FigJam from '@components/MDX/FigJam/FigJam.astro';
+import IcePanel from '@components/MDX/IcePanel/IcePanel.astro';
 import Design from '@components/MDX/Design/Design.astro';
 import MermaidFileLoader from '@components/MDX/MermaidFileLoader/MermaidFileLoader.astro';
 //  Portals: required for server/client components
@@ -65,6 +66,7 @@ const components = (props: any) => {
     Lucid: (mdxProp: any) => jsx(Lucid, { ...props, ...mdxProp }),
     DrawIO: (mdxProp: any) => jsx(DrawIO, { ...props, ...mdxProp }),
     FigJam: (mdxProp: any) => jsx(FigJam, { ...props, ...mdxProp }),
+    IcePanel: (mdxProp: any) => jsx(IcePanel, { ...props, ...mdxProp }),
     MermaidFileLoader: (mdxProp: any) => jsx(MermaidFileLoader, { ...props, ...mdxProp }),
   };
 };

package/eventcatalog/src/enterprise/ai/chat-api.ts

@@ -28,7 +28,10 @@ try {
   model = await providerConfiguration.default();
   modelConfiguration = providerConfiguration.configuration || defaultConfiguration;
   hasChatConfiguration = true;
-  extendedTools = providerConfiguration.tools || {};
+
+  if (isEventCatalogScaleEnabled()) {
+    extendedTools = providerConfiguration.tools || {};
+  }
 } catch (error) {
   console.error('[Chat] Error loading chat configuration', error);
   hasChatConfiguration = false;
@@ -111,12 +114,14 @@ When responding:
 5. Don't provide code examples unless specifically requested.
 6. When you refer to a resource in EventCatalog, try and create a link to the resource in the response
     - Example, if you return a message in the text, rather than than just the id or version you should return a markdown link to the resource e.g [MyEvent - 1.0.0](/docs/events/MyEvent/1.0.0)
-    - NEVER return "latest" in the markdown link, always use the specific version
+    - CRITICAL: NEVER use "latest" in any URL or link. Always use the actual semantic version number (e.g., 1.0.0, 2.1.3). The word "latest" is not a valid version and will result in broken links.
     - The link options are:
         - If you want to get the documentation for a resource use the /docs/ prefix (e.g /docs/{collection}/{id}/{version})
         - If you want to let the user know they can visualize a resource use the /visualiser/ prefix (e.g /visualiser/{collection}/{id}/{version})
         - If you want to let the user know they can see the architecture of a resource use the /architecture/ prefix (e.g /architecture/{collection}/{id}/{version})
+    - If you don't know the version, use the getResource tool to fetch the resource and get the actual version number before creating the link.
 7. When you return a schema, use code blocks to render the schema to the user too, for example if the schema is in JSON format use \`\`\`json and if the schema is in YAML format use \`\`\`yaml
+8. IMPORTANT: After answering each question, ALWAYS use the suggestFollowUpQuestions tool to suggest 2-3 relevant follow-up questions the user might want to ask next. These should be contextual to the conversation and help the user explore related topics.
 
 If you have additional context, use it to answer the question.`;
 
@@ -171,7 +176,7 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
     const result = await streamText({
       model,
       system: getBaseSystemPrompt(referrer ?? ''),
-      messages: convertToModelMessages(messages) as ModelMessage[],
+      messages: await convertToModelMessages(messages),
       temperature: modelConfiguration?.temperature ?? 0.7,
       stopWhen: stepCountIs(5),
       // maxTokens: 4000, // Increased to handle large tool results
@@ -320,6 +325,22 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
             return [];
           },
         }),
+        suggestFollowUpQuestions: tool({
+          description:
+            'Use this tool after answering a question to suggest 2-3 relevant follow-up questions the user might want to ask. These will be displayed as clickable suggestions.',
+          inputSchema: z.object({
+            questions: z
+              .array(z.string())
+              .min(1)
+              .max(3)
+              .describe('Array of 2-3 follow-up questions relevant to the conversation'),
+          }),
+          execute: async ({ questions }) => {
+            // This tool doesn't need to do anything - it just returns the questions
+            // which will be captured by the UI
+            return { suggestions: questions };
+          },
+        }),
         ...extendedTools,
       },
     });

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

@@ -0,0 +1,67 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { ClientRouter } from 'astro:transitions';
+---
+
+<VerticalSideBarLayout title="IcePanel">
+  <div class="h-[calc(100vh-80px)] bg-[rgb(var(--ec-page-bg))] p-3">
+    <div class="flex items-center justify-between mb-4">
+      <h1 id="diagramTitle" class="text-2xl font-bold text-[rgb(var(--ec-page-text))]">IcePanel Diagram</h1>
+      <div class="flex items-center gap-3">
+        <button
+          id="backButton"
+          class="hidden items-center gap-2 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle))] px-4 py-2 rounded-md transition-colors"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              fill-rule="evenodd"
+              d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L4.414 9H17a1 1 0 110 2H4.414l5.293 5.293a1 1 0 010 1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span>Back</span>
+        </button>
+      </div>
+    </div>
+    <div class="w-full bg-[rgb(var(--ec-card-bg))] h-[calc(100%-4rem)] rounded-2xl">
+      <iframe class="w-full h-full rounded-2xl border-none"></iframe>
+    </div>
+  </div>
+</VerticalSideBarLayout>
+
+<ClientRouter />
+<script>
+  function configureIcePanel() {
+    // Get url from query params and then embed into the iframe
+    const pageUrl = new URL(window.location.href);
+    const icePanelUrl = pageUrl.searchParams.get('url');
+    const title = pageUrl.searchParams.get('title') || 'IcePanel Diagram';
+    const backUrl = pageUrl.searchParams.get('back');
+
+    // Configure back button if back URL is provided
+    const backButton = document.querySelector('#backButton');
+    if (backButton && backUrl) {
+      backButton.classList.remove('hidden');
+      backButton.classList.add('flex');
+      backButton.addEventListener('click', () => {
+        window.location.href = `${decodeURIComponent(backUrl)}#${title}-icepanel-title`;
+      });
+    }
+
+    // Update the diagram title
+    const diagramTitleElement = document.querySelector('#diagramTitle');
+    if (diagramTitleElement) {
+      diagramTitleElement.textContent = title;
+    }
+
+    const iframe = document.querySelector('iframe');
+    if (iframe && icePanelUrl) {
+      iframe.src = icePanelUrl;
+      iframe.width = '100%';
+      iframe.height = '100%';
+    }
+  }
+
+  configureIcePanel();
+
+  document.addEventListener('astro:page-load', configureIcePanel);
+</script>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +20,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ai-sdk/react": "^2.0.60",
+    "@ai-sdk/react": "^3.0.17",
     "@astrojs/markdown-remark": "^6.3.10",
     "@astrojs/mdx": "^4.3.13",
     "@astrojs/node": "^9.5.1",
@@ -53,8 +53,8 @@
     "@tanstack/react-query": "^5.74.3",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
-    "ai": "^5.0.60",
-    "astro": "^5.16.6",
+    "ai": "^6.0.17",
+    "astro": "^5.16.7",
     "astro-compress": "^2.3.8",
     "astro-expressive-code": "^0.41.3",
     "astro-seo": "^0.8.4",
@@ -94,7 +94,7 @@
     "rehype-slug": "^6.0.0",
     "remark-comment": "^1.0.0",
     "remark-directive": "^3.0.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.1",
     "rimraf": "^5.0.7",
     "semver": "7.6.3",
     "shelljs": "^0.9.0",
@@ -103,7 +103,8 @@
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
     "update-notifier": "^7.3.1",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "zod": "^3.25.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",