@eventcatalog/core 2.35.2 → 2.35.3

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-OXVJOENQ.js";
-import "../chunk-YGROHR26.js";
+} from "../chunk-66QXZSU5.js";
+import "../chunk-BQ5AYBCA.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.35.2";
+var version = "2.35.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-ZUPEUUST.js";
-import "../chunk-OXVJOENQ.js";
-import "../chunk-YGROHR26.js";
+} from "../chunk-DGPXNBAU.js";
+import "../chunk-66QXZSU5.js";
+import "../chunk-BQ5AYBCA.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -155,6 +155,8 @@ function isCatalogRelated(filePath) {
     // custom components
     "public",
     // public assets
+    ".env",
+    // env file
     ...COLLECTION_KEYS
   ].includes(filePathArr[0])) {
     return true;
@@ -200,6 +202,9 @@ var copyFiles = async (source, target) => {
     windowsPathsNoEscape: import_node_os.default.platform() == "win32",
     ignore: ["node_modules/**", "**/dist/**", "**/teams", "**/users", "**/*.mdx", "**/*.md", "**/package.json", "**/Dockerfile"]
   });
+  if (import_fs.default.existsSync(path3.join(source, ".env"))) {
+    files.push(path3.join(source, ".env"));
+  }
   for (const file of files) {
     mapCatalogToAstro({
       filePath: file,

package/dist/catalog-to-astro-content-directory.js

@@ -1,9 +1,9 @@
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
-} from "./chunk-7SI5EVOX.js";
+} from "./chunk-5ZG43YD2.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-HAYFEAB4.js";
+import "./chunk-EXAALOQA.js";
 export {
   catalogToAstro,
   checkAndConvertMdToMdx

package/dist/{chunk-7SI5EVOX.js → chunk-5ZG43YD2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-E7TXTI7G.js";
 import {
   mapCatalogToAstro
-} from "./chunk-HAYFEAB4.js";
+} from "./chunk-EXAALOQA.js";
 
 // src/catalog-to-astro-content-directory.js
 import { glob } from "glob";
@@ -19,6 +19,9 @@ var copyFiles = async (source, target) => {
     windowsPathsNoEscape: os.platform() == "win32",
     ignore: ["node_modules/**", "**/dist/**", "**/teams", "**/users", "**/*.mdx", "**/*.md", "**/package.json", "**/Dockerfile"]
   });
+  if (fs.existsSync(path.join(source, ".env"))) {
+    files.push(path.join(source, ".env"));
+  }
   for (const file of files) {
     mapCatalogToAstro({
       filePath: file,

package/dist/{chunk-OXVJOENQ.js → chunk-66QXZSU5.js}

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

package/dist/{chunk-YGROHR26.js → chunk-BQ5AYBCA.js}

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

package/dist/{chunk-UKJ7F5WR.js → chunk-DCLTVJDP.js}

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-HAYFEAB4.js";
+} from "./chunk-EXAALOQA.js";
 
 // src/watcher.js
 import watcher from "@parcel/watcher";

package/dist/{chunk-ZUPEUUST.js → chunk-DGPXNBAU.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-OXVJOENQ.js";
+} from "./chunk-66QXZSU5.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-HAYFEAB4.js → chunk-EXAALOQA.js}

@@ -40,6 +40,8 @@ function isCatalogRelated(filePath) {
     // custom components
     "public",
     // public assets
+    ".env",
+    // env file
     ...COLLECTION_KEYS
   ].includes(filePathArr[0])) {
     return true;

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-YGROHR26.js";
+} from "./chunk-BQ5AYBCA.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.35.2";
+var version = "2.35.3";
 
 // src/constants.ts
 var VERSION = version;
@@ -261,6 +261,8 @@ function isCatalogRelated(filePath) {
     // custom components
     "public",
     // public assets
+    ".env",
+    // env file
     ...COLLECTION_KEYS
   ].includes(filePathArr[0])) {
     return true;
@@ -392,6 +394,9 @@ var copyFiles = async (source, target) => {
     windowsPathsNoEscape: import_node_os.default.platform() == "win32",
     ignore: ["node_modules/**", "**/dist/**", "**/teams", "**/users", "**/*.mdx", "**/*.md", "**/package.json", "**/Dockerfile"]
   });
+  if (import_fs.default.existsSync(path5.join(source, ".env"))) {
+    files.push(path5.join(source, ".env"));
+  }
   for (const file of files) {
     mapCatalogToAstro({
       filePath: file,
@@ -608,6 +613,7 @@ var isEventCatalogStarterEnabled = async (licenseKey) => {
 // src/eventcatalog.ts
 var import_update_notifier = __toESM(require("update-notifier"), 1);
 var import_stream = __toESM(require("stream"), 1);
+var import_dotenv = __toESM(require("dotenv"), 1);
 var currentDir = import_node_path7.default.dirname((0, import_node_url.fileURLToPath)(importMetaUrl));
 var program = new import_commander.Command().version(VERSION);
 var dir = import_node_path7.default.resolve(process.env.PROJECT_DIR || process.cwd());
@@ -685,6 +691,9 @@ Run npm i @eventcatalog/core to update`;
 };
 program.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action(async (options, command) => {
   console.log("Setting up EventCatalog....");
+  if (import_fs2.default.existsSync(import_node_path7.default.join(dir, ".env"))) {
+    import_dotenv.default.config({ path: import_node_path7.default.join(dir, ".env") });
+  }
   if (options.debug) {
     console.log("Debug mode enabled");
     console.log("PROJECT_DIR", dir);
@@ -741,6 +750,9 @@ program.command("dev").description("Run development server of EventCatalog").opt
 });
 program.command("build").description("Run build of EventCatalog").action(async (options, command) => {
   console.log("Building EventCatalog...");
+  if (import_fs2.default.existsSync(import_node_path7.default.join(dir, ".env"))) {
+    import_dotenv.default.config({ path: import_node_path7.default.join(dir, ".env") });
+  }
   copyCore();
   await copyServerFiles();
   const canEmbedPages = await isBackstagePluginEnabled();
@@ -782,6 +794,9 @@ var previewCatalog = ({
 };
 program.command("preview").description("Serves the contents of your eventcatalog build directory").action(async (options, command) => {
   console.log("Starting preview of your build...");
+  if (import_fs2.default.existsSync(import_node_path7.default.join(dir, ".env"))) {
+    import_dotenv.default.config({ path: import_node_path7.default.join(dir, ".env") });
+  }
   const canEmbedPages = await isBackstagePluginEnabled();
   const isEventCatalogStarter = await isEventCatalogStarterEnabled();
   const isEventCatalogScale = await isEventCatalogScaleEnabled();
@@ -790,6 +805,9 @@ program.command("preview").description("Serves the contents of your eventcatalog
 });
 program.command("start").description("Serves the contents of your eventcatalog build directory").action(async (options, command) => {
   console.log("Starting preview of your build...");
+  if (import_fs2.default.existsSync(import_node_path7.default.join(dir, ".env"))) {
+    import_dotenv.default.config({ path: import_node_path7.default.join(dir, ".env") });
+  }
   const canEmbedPages = await isBackstagePluginEnabled();
   const isEventCatalogStarter = await isEventCatalogStarterEnabled();
   const isEventCatalogScale = await isEventCatalogScaleEnabled();

package/dist/eventcatalog.js

@@ -3,18 +3,18 @@ import {
 } from "./chunk-BLDONK5J.js";
 import {
   watch
-} from "./chunk-UKJ7F5WR.js";
+} from "./chunk-DCLTVJDP.js";
 import {
   log_build_default
-} from "./chunk-ZUPEUUST.js";
-import "./chunk-OXVJOENQ.js";
+} from "./chunk-DGPXNBAU.js";
+import "./chunk-66QXZSU5.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
-} from "./chunk-7SI5EVOX.js";
+} from "./chunk-5ZG43YD2.js";
 import {
   VERSION
-} from "./chunk-YGROHR26.js";
+} from "./chunk-BQ5AYBCA.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogScaleEnabled,
@@ -25,7 +25,7 @@ import {
   generate
 } from "./chunk-YEQVKHST.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-HAYFEAB4.js";
+import "./chunk-EXAALOQA.js";
 
 // src/eventcatalog.ts
 import { Command } from "commander";
@@ -38,6 +38,7 @@ import concurrently from "concurrently";
 import boxen from "boxen";
 import updateNotifier from "update-notifier";
 import stream from "stream";
+import dotenv from "dotenv";
 var currentDir = path.dirname(fileURLToPath(import.meta.url));
 var program = new Command().version(VERSION);
 var dir = path.resolve(process.env.PROJECT_DIR || process.cwd());
@@ -115,6 +116,9 @@ Run npm i @eventcatalog/core to update`;
 };
 program.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action(async (options, command) => {
   console.log("Setting up EventCatalog....");
+  if (fs.existsSync(path.join(dir, ".env"))) {
+    dotenv.config({ path: path.join(dir, ".env") });
+  }
   if (options.debug) {
     console.log("Debug mode enabled");
     console.log("PROJECT_DIR", dir);
@@ -171,6 +175,9 @@ program.command("dev").description("Run development server of EventCatalog").opt
 });
 program.command("build").description("Run build of EventCatalog").action(async (options, command) => {
   console.log("Building EventCatalog...");
+  if (fs.existsSync(path.join(dir, ".env"))) {
+    dotenv.config({ path: path.join(dir, ".env") });
+  }
   copyCore();
   await copyServerFiles();
   const canEmbedPages = await isBackstagePluginEnabled();
@@ -212,6 +219,9 @@ var previewCatalog = ({
 };
 program.command("preview").description("Serves the contents of your eventcatalog build directory").action(async (options, command) => {
   console.log("Starting preview of your build...");
+  if (fs.existsSync(path.join(dir, ".env"))) {
+    dotenv.config({ path: path.join(dir, ".env") });
+  }
   const canEmbedPages = await isBackstagePluginEnabled();
   const isEventCatalogStarter = await isEventCatalogStarterEnabled();
   const isEventCatalogScale = await isEventCatalogScaleEnabled();
@@ -220,6 +230,9 @@ program.command("preview").description("Serves the contents of your eventcatalog
 });
 program.command("start").description("Serves the contents of your eventcatalog build directory").action(async (options, command) => {
   console.log("Starting preview of your build...");
+  if (fs.existsSync(path.join(dir, ".env"))) {
+    dotenv.config({ path: path.join(dir, ".env") });
+  }
   const canEmbedPages = await isBackstagePluginEnabled();
   const isEventCatalogStarter = await isEventCatalogStarterEnabled();
   const isEventCatalogScale = await isEventCatalogScaleEnabled();

package/dist/map-catalog-to-astro.cjs

@@ -74,6 +74,8 @@ function isCatalogRelated(filePath) {
     // custom components
     "public",
     // public assets
+    ".env",
+    // env file
     ...COLLECTION_KEYS
   ].includes(filePathArr[0])) {
     return true;

package/dist/map-catalog-to-astro.js

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-HAYFEAB4.js";
+} from "./chunk-EXAALOQA.js";
 export {
   mapCatalogToAstro
 };

package/dist/watcher.cjs

@@ -78,6 +78,8 @@ function isCatalogRelated(filePath) {
     // custom components
     "public",
     // public assets
+    ".env",
+    // env file
     ...COLLECTION_KEYS
   ].includes(filePathArr[0])) {
     return true;

package/dist/watcher.js

@@ -1,8 +1,8 @@
 import {
   watch
-} from "./chunk-UKJ7F5WR.js";
+} from "./chunk-DCLTVJDP.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-HAYFEAB4.js";
+import "./chunk-EXAALOQA.js";
 export {
   watch
 };

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

@@ -34,6 +34,7 @@ const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
   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 => {
@@ -137,6 +138,30 @@ const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
           </ReactMarkdown>
         </div>
 
+        {/* Additional Context section (for user messages) */}
+        {message.isUser && message.additionalContext && (
+          <div className="mt-3 pt-3 border-t border-purple-700/50">
+            {' '}
+            {/* Adjusted border color for subtlety */}
+            <button
+              className="flex items-center text-xs text-purple-300 mb-1 w-full text-left focus:outline-none" // Adjusted text color for subtlety
+              onClick={() => setIsContextCollapsed(!isContextCollapsed)}
+              aria-expanded={!isContextCollapsed}
+              aria-controls="additional-context-content"
+            >
+              {isContextCollapsed ? <ChevronRight size={14} className="mr-1" /> : <ChevronDown size={14} className="mr-1" />}
+              Prompt used:
+            </button>
+            {!isContextCollapsed && (
+              <div className="text-[10px] mt-1 pl-5 prose prose-sm prose-invert" id="additional-context-content">
+                {' '}
+                {/* Removed max-w-none */}
+                <pre className="whitespace-pre-wrap break-words">{message.additionalContext}</pre> {/* Use pre for formatting */}
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Resource section */}
         {!message.isUser && message.resources && message.resources.length > 0 && (
           <div className="mt-3 pt-3 border-t border-gray-200">

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
+import { Wand2 } from 'lucide-react';
 // TODO: Import ChatPrompt and ChatPromptInput from a central types location
 import type { ChatPrompt } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
 
@@ -111,9 +112,9 @@ const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubm
     <Dialog.Root open={isOpen} onOpenChange={onClose}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg focus:outline-none data-[state=open]:animate-contentShow z-[100]">
-          <Dialog.Title className="text-lg font-semibold text-gray-900">{prompt.data.title}</Dialog.Title>
-          <Dialog.Description className="mt-1 mb-5 text-sm text-gray-500">
+        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-8 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]">
+          <Dialog.Title className="text-lg font-semibold text-gray-800 mb-3">{prompt.data.title}</Dialog.Title>
+          <Dialog.Description className="mt-1 mb-6 text-sm text-gray-600">
             Please provide the following details:
           </Dialog.Description>
           <form onSubmit={handleSubmit} className="space-y-4">
@@ -127,7 +128,7 @@ const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubm
 
               return (
                 <div key={input.id}>
-                  <label htmlFor={input.id} className="block text-sm font-medium text-gray-700 mb-1">
+                  <label htmlFor={input.id} className="block text-sm font-medium text-gray-700 mb-1.5">
                     {input.label}
                   </label>
                   {isResourceList ? (
@@ -137,7 +138,7 @@ const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubm
                       value={inputValues[input.id] || ''}
                       onChange={(e) => handleInputChange(input.id, e.target.value)}
                       required
-                      className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm"
+                      className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out"
                     >
                       <option value="" disabled>
                         Select a {resourceType}...
@@ -160,7 +161,7 @@ const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubm
                       value={inputValues[input.id] || ''}
                       onChange={(e) => handleInputChange(input.id, e.target.value)}
                       required
-                      className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm"
+                      className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out"
                     >
                       <option value="" disabled>
                         Select an option...
@@ -184,9 +185,18 @@ const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubm
                           name={input.id}
                           value={inputValues[input.id] || ''}
                           onChange={(e) => handleInputChange(input.id, e.target.value)}
+                          onKeyDown={(e) => {
+                            // Prevent form submission on Enter key press unless Shift is held
+                            if (e.key === 'Enter' && !e.shiftKey) {
+                              e.preventDefault();
+                              // Optionally, you could trigger submission here if needed,
+                              // but the default behavior is just to prevent it.
+                              handleSubmit(e); // Example: trigger submit manually
+                            }
+                          }}
                           required
                           rows={isCode ? 6 : 3} // More rows for code input
-                          className={`w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm ${isCode ? 'font-mono text-sm' : ''}`} // Basic monospaced font for code
+                          className={`w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out ${isCode ? 'font-mono text-sm' : ''}`}
                           placeholder={isCode ? 'Paste your code here...' : ''}
                         />
                       ) : (
@@ -197,7 +207,7 @@ const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubm
                           value={inputValues[input.id] || ''}
                           onChange={(e) => handleInputChange(input.id, e.target.value)}
                           required
-                          className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm"
+                          className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out"
                         />
                       )}
                     </>
@@ -217,8 +227,9 @@ const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubm
               </Dialog.Close>
               <button
                 type="submit"
-                className="inline-flex justify-center rounded-md border border-transparent bg-purple-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                className="inline-flex items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
               >
+                <Wand2 size={16} />
                 Submit
               </button>
             </div>

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

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { HelpCircle } from 'lucide-react';
+import React, { useState, useMemo } from 'react';
 import * as icons from 'lucide-react'; // Import all icons
 import type { ChatPromptCategoryGroup, ChatPrompt } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
+import { defaultPrompts } from './default-prompts';
 
 // Removed the static iconMap
 
@@ -26,60 +26,148 @@ interface WelcomePromptAreaProps {
   isProcessing: boolean; // Combined thinking/streaming state
 }
 
+// Helper function to group default prompts by category label
+const groupDefaultPrompts = (prompts: ChatPrompt[]): ChatPromptCategoryGroup[] => {
+  const groups: { [key: string]: { label: string; icon?: string; items: ChatPrompt[] } } = {};
+
+  prompts.forEach((prompt) => {
+    const categoryLabel = prompt.data.category.label;
+    const categoryIcon = prompt.data.category.icon; // Get icon from prompt data
+
+    if (!groups[categoryLabel]) {
+      groups[categoryLabel] = { label: categoryLabel, icon: categoryIcon, items: [] };
+    }
+    groups[categoryLabel].items.push(prompt);
+  });
+
+  // Convert the groups object into an array matching ChatPromptCategoryGroup structure
+  return Object.values(groups);
+};
+
 const WelcomePromptArea: React.FC<WelcomePromptAreaProps> = ({
   chatPrompts,
-  activeCategory,
-  setActiveCategory,
+  activeCategory: activeCustomCategory, // Rename to avoid conflict
+  setActiveCategory: setActiveCustomCategory, // Rename to avoid conflict
   onPromptClick,
   isProcessing,
 }) => {
+  // Group default prompts and derive initial state only once
+  const defaultPromptGroups = useMemo(() => groupDefaultPrompts(defaultPrompts), []);
+  const [activeDefaultCategory, setActiveDefaultCategory] = useState<string>(() => defaultPromptGroups[0]?.label || '');
+
   // Find the currently active category's questions from chatPrompts
-  const activeQuestions: ChatPrompt[] = useMemo(() => {
-    // Find the category group by label
-    const activeGroup = chatPrompts.find((group) => group.label === activeCategory);
-    // Return the items (questions) from that group, or an empty array if not found
+  const activeCustomQuestions: ChatPrompt[] = useMemo(() => {
+    if (!chatPrompts || chatPrompts.length === 0) return [];
+    const activeGroup = chatPrompts.find((group) => group.label === activeCustomCategory);
+    return activeGroup?.items || (chatPrompts[0]?.items ?? []);
+  }, [activeCustomCategory, chatPrompts]);
+
+  // Find the currently active category's default questions
+  const activeDefaultQuestions: ChatPrompt[] = useMemo(() => {
+    if (!defaultPromptGroups || defaultPromptGroups.length === 0) return [];
+    const activeGroup = defaultPromptGroups.find((group) => group.label === activeDefaultCategory);
     return activeGroup?.items || [];
-  }, [activeCategory, chatPrompts]);
+  }, [activeDefaultCategory, defaultPromptGroups]);
 
   return (
     <div className="h-full flex flex-col justify-center items-center px-4 pb-4 pt-0">
-      {' '}
-      {/* Use h-full and flex centering */}
       <div className="max-w-2xl w-full text-left">
         <h2 className="text-2xl font-semibold mb-6 text-gray-800">How can I help you?</h2>
-        {/* Category Tabs - Use chatPrompts */}
-        <div className="flex flex-wrap justify-left gap-2 mb-6 border-b border-gray-200 pb-4">
-          {chatPrompts.map((categoryGroup) => (
-            <button
-              key={categoryGroup.label} // Use label as key, assuming it's unique
-              onClick={() => setActiveCategory(categoryGroup.label)}
-              disabled={isProcessing}
-              className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 ${
-                activeCategory === categoryGroup.label
-                  ? 'bg-purple-600 text-white'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              }`}
-            >
-              {/* Use the icon mapping function */}
-              {getCategoryIcon(categoryGroup.icon)}
-              {categoryGroup.label}
-            </button>
-          ))}
-        </div>
-        {/* Questions List - Use activeQuestions derived from chatPrompts */}
-        <div className="space-y-2 text-left">
-          {activeQuestions.map((item, index) => (
-            <button
-              key={item.id || index} // Use item.id if available, otherwise index
-              onClick={() => onPromptClick(item)} // Use the passed handler
-              className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-purple-400 disabled:opacity-50"
-              disabled={isProcessing} // Disable while processing
-            >
-              {/* Display the question title */}
-              {item.data.title}
-            </button>
-          ))}
-        </div>
+
+        {/* Conditional Rendering: Custom Prompts OR Default Prompts */}
+        {chatPrompts && chatPrompts.length > 0 ? (
+          /* --- CUSTOM PROMPTS UI --- */
+          <>
+            {/* Category Tabs - Use chatPrompts */}
+            <div className="flex flex-wrap justify-left gap-2 mb-6 border-b border-gray-200 pb-4">
+              {chatPrompts.map((categoryGroup) => (
+                <button
+                  key={categoryGroup.label}
+                  onClick={() => setActiveCustomCategory(categoryGroup.label)}
+                  disabled={isProcessing}
+                  className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 ${
+                    activeCustomCategory === categoryGroup.label
+                      ? 'bg-purple-600 text-white'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  }`}
+                >
+                  {getCategoryIcon(categoryGroup.icon)}
+                  {categoryGroup.label}
+                </button>
+              ))}
+            </div>
+            {/* Questions List - Use activeCustomQuestions */}
+            <div className="space-y-2 text-left">
+              {activeCustomQuestions.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => onPromptClick(item)}
+                  className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-purple-400 disabled:opacity-50"
+                  disabled={isProcessing}
+                >
+                  {item.data.title}
+                </button>
+              ))}
+            </div>
+          </>
+        ) : (
+          /* --- DEFAULT PROMPTS UI (Grouped) --- */
+          <>
+            {/* Default Category Tabs - Use defaultPromptGroups */}
+            <div className="flex flex-wrap justify-left gap-2 mb-6 border-b border-gray-200 pb-4">
+              {defaultPromptGroups.map((categoryGroup) => (
+                <button
+                  key={categoryGroup.label} // Use label as key
+                  onClick={() => setActiveDefaultCategory(categoryGroup.label)}
+                  disabled={isProcessing}
+                  className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 ${
+                    activeDefaultCategory === categoryGroup.label
+                      ? 'bg-purple-600 text-white'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  }`}
+                >
+                  {/* Use the icon mapping function */}
+                  {getCategoryIcon(categoryGroup.icon)}
+                  {categoryGroup.label}
+                </button>
+              ))}
+            </div>
+            {/* Default Questions List - Use activeDefaultQuestions */}
+            <div className="space-y-2 text-left">
+              {activeDefaultQuestions.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => onPromptClick(item)}
+                  className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-purple-400 disabled:opacity-50"
+                  disabled={isProcessing}
+                >
+                  {item.data.title}
+                </button>
+              ))}
+            </div>
+
+            {/* Enhanced Bring Your Own Prompts section */}
+            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 mt-6 text-gray-700 text-sm">
+              <p className="flex items-center">
+                <icons.Wand2 size={18} className="text-purple-600 mr-2 flex-shrink-0" /> {/* Added Icon */}
+                <span>
+                  Want to tailor these suggestions?{' '}
+                  <a
+                    href="https://www.eventcatalog.dev/docs/development/guides/eventcatlaog-chat/what-is-eventcatalog-chat"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-purple-700 hover:underline font-semibold"
+                  >
+                    {' '}
+                    {/* Added target and rel */}
+                    Bring your own prompts!
+                  </a>{' '}
+                  Easily configure this list with relevant questions for your teams and organization.
+                </span>
+              </p>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

package/eventcatalog/src/enterprise/eventcatalog-chat/components/default-prompts.ts

@@ -0,0 +1,93 @@
+import type { ChatPrompt } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
+
+export const defaultPrompts: ChatPrompt[] = [
+  {
+    id: 'default-events',
+    collection: 'chatPrompts', // Required field
+    body: 'List all events.', // The actual prompt text
+    data: {
+      title: 'What events do we have in our architecture?', // Text displayed on the button
+      type: 'text', // Default type
+      category: { id: 'general', label: 'General', icon: 'HelpCircle' },
+    },
+  },
+  {
+    id: 'default-events-by-domain-feature',
+    collection: 'chatPrompts',
+    body: 'What events are relevant to this feature {{feature-description}}?',
+    data: {
+      title: 'Im building a new feature, what events are relevant to this feature?',
+      type: 'text',
+      inputs: [
+        {
+          id: 'feature-description',
+          label: 'Feature Description',
+          type: 'text-area',
+        },
+      ],
+      category: { id: 'general', label: 'General', icon: 'HelpCircle' },
+    },
+  },
+  {
+    id: 'default-events-by-domain-service',
+    collection: 'chatPrompts',
+    body: 'Review the given service {{service-name}}, and let me know how it works? You are an expert in the domain and architecture of the service.',
+    data: {
+      title: 'Review the given service, and let me know how it works?',
+      type: 'text',
+      inputs: [
+        {
+          id: 'service-name',
+          label: 'Service Name',
+          type: 'resource-list-services',
+        },
+      ],
+      category: { id: 'general', label: 'General', icon: 'HelpCircle' },
+    },
+  },
+  {
+    id: 'default-services',
+    collection: 'chatPrompts',
+    body: 'List all services.',
+    data: {
+      title: 'What services do we have in our architecture?',
+      type: 'text',
+      category: { id: 'general', label: 'General', icon: 'HelpCircle' },
+    },
+  },
+  // Example of another category
+  {
+    id: 'default-schema-json',
+    collection: 'chatPrompts',
+    body: 'Generate a JSON schema for {{event-name}}.',
+    data: {
+      title: 'Generate a JSON schema for the given event',
+      type: 'text',
+      inputs: [
+        {
+          id: 'event-name',
+          label: 'Event Name',
+          type: 'resource-list-events',
+        },
+      ],
+      category: { id: 'code', label: 'Code Generation', icon: 'Code' },
+    },
+  },
+  {
+    id: 'default-schema-avro',
+    collection: 'chatPrompts',
+    body: 'Generate a Avro schema for {{event-name}}.',
+    data: {
+      title: 'Generate a Avro schema for the given event',
+      type: 'text',
+      inputs: [
+        {
+          id: 'event-name',
+          label: 'Event Name',
+          type: 'resource-list-events',
+        },
+      ],
+      category: { id: 'code', label: 'Code Generation', icon: 'Code' },
+    },
+  },
+];

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

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 
 export interface Message {
   content: string;
+  additionalContext?: string;
   isUser: boolean;
   timestamp: number;
   resources?: Array<{

package/eventcatalog/src/enterprise/eventcatalog-chat/components/windows/ChatWindow.server.tsx

@@ -211,7 +211,7 @@ const ChatWindow = ({
     async (question: string, additionalContext?: string) => {
       if (!question.trim() || isStreaming || isThinking) return;
 
-      const userMessage: Message = { content: question, isUser: true, timestamp: Date.now() };
+      const userMessage: Message = { content: question, isUser: true, timestamp: Date.now(), additionalContext };
       const isFirstMessage = messages.length === 0;
 
       setMessages((prev) => [...prev, userMessage]);
@@ -252,7 +252,6 @@ const ChatWindow = ({
   const handleSubmitWithInputs = useCallback(
     (prompt: ChatPrompt, inputValues: Record<string, string>) => {
       let finalBody = prompt.body || ''; // Start with the original body
-
       // Ensure prompt and prompt.data exist before accessing properties
       if (!prompt || !prompt.data) {
         console.error('handleSubmitWithInputs called without a valid prompt.');
@@ -264,10 +263,10 @@ const ChatWindow = ({
       for (const [key, value] of Object.entries(inputValues)) {
         const placeholder = `{{${key}}}`;
         // Replace all occurrences of the placeholder in the body
-        finalBody = finalBody.replaceAll(placeholder, value);
+        finalBody = finalBody.replaceAll(placeholder, `"${value}"`);
       }
 
-      // Submit the original title and the processed body as additional context
+      // Submit the processed title and the processed body as additional context
       submitQuestion(prompt.data.title, finalBody);
 
       setIsInputModalOpen(false); // Close modal

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

@@ -5,13 +5,11 @@ import { getChatPromptsGroupedByCategory } from '@enterprise/eventcatalog-chat/u
 import config from '@config';
 import path from 'node:path';
 import fs from 'node:fs';
-import { isEventCatalogChatEnabled } from '@utils/feature';
 import { Code } from 'astro-expressive-code/components';
 import { getDomains } from '@utils/collections/domains';
 import { getEvents } from '@utils/events';
 import { getCommands } from '@utils/commands';
 import { getServices } from '@utils/collections/services';
-import { buildUrl } from '@utils/url-builder';
 
 const isEnabled = config.chat?.enabled || false;
 const chatConfig = config.chat || {};
@@ -44,10 +42,6 @@ const generatorConfig = `
     ],
   ],
 `;
-
-if (!isEventCatalogChatEnabled()) {
-  return Astro.redirect(buildUrl('/chat/feature'));
-}
 ---
 
 <VerticalSideBarLayout title="AI Chat">

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

@@ -1,5 +1,10 @@
 ---
 import ChatPage from '@enterprise/eventcatalog-chat/pages/chat/index.astro';
+import { isEventCatalogChatEnabled } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+if (!isEventCatalogChatEnabled()) {
+  return Astro.redirect(buildUrl('/chat/feature'));
+}
 ---
 
 <ChatPage />

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.35.2",
+  "version": "2.35.3",
   "publishConfig": {
     "access": "public"
   },
@@ -63,6 +63,7 @@
     "date-fns": "^4.1.0",
     "diff": "^7.0.0",
     "diff2html": "^3.4.48",
+    "dotenv": "^16.5.0",
     "glob": "^10.4.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",