@eventcatalog/core 3.0.0-beta.17 → 3.0.0-beta.19

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

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Sparkles } from 'lucide-react';
+import ChatPanel from './ChatPanel';
+
+const ChatPanelButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <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]"
+        aria-label="Open AI Assistant"
+      >
+        <Sparkles size={14} className="text-purple-500" />
+        <span className="font-light text-gray-600">Ask AI</span>
+      </button>
+
+      <ChatPanel isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+};
+
+export default ChatPanelButton;

package/eventcatalog/src/components/Header.astro

@@ -2,10 +2,11 @@
 import catalog from '@utils/eventcatalog-config/catalog';
 import Search from '@components/Search/Search.astro';
 import { buildUrl } from '@utils/url-builder';
-import { showEventCatalogBranding, showCustomBranding } from '@utils/feature';
+import { showEventCatalogBranding, showCustomBranding, isEventCatalogChatEnabled } from '@utils/feature';
 import { getSession } from 'auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 import { EnvironmentDropdown } from './EnvironmentDropdown';
+import ChatPanelButton from './ChatPanel/ChatPanelButton';
 
 let session = null;
 if (isAuthEnabled()) {
@@ -42,8 +43,11 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         </a>
       </div>
 
-      <div class="hidden lg:block flex-grow -ml-1">
-        <Search />
+      <div class="hidden lg:flex flex-grow -ml-1 items-center">
+        <div class="flex-grow max-w-xl">
+          <Search />
+        </div>
+        {isEventCatalogChatEnabled() && <ChatPanelButton client:load />}
       </div>
 
       <div class="hidden md:block w-3/12">

package/eventcatalog/src/components/Search/Search.astro

@@ -4,7 +4,7 @@ import SearchModal from './SearchModal.tsx';
 ---
 
 <div>
-  <div class="relative flex items-center w-10/12">
+  <div class="relative flex items-center w-full pr-4">
     <input
       id="search-dummy-input"
       type="text"
@@ -14,7 +14,7 @@ import SearchModal from './SearchModal.tsx';
       class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-gray-400" />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-6">
       <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
     </div>
   </div>

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

@@ -1,30 +1,87 @@
 import type { APIContext } from 'astro';
-import { type UIMessage } from 'ai';
-import config from '@config';
-import { getProvider } from '@enterprise/eventcatalog-chat/providers';
+import { convertToModelMessages, stepCountIs, streamText, tool, type LanguageModel, type ModelMessage, type UIMessage } from 'ai';
+import { join } from 'node:path';
+import { isEventCatalogScaleEnabled } from '@utils/feature';
+import { z, getCollection, getEntry } from 'astro:content';
+import { getConsumersOfMessage, getProducersOfMessage } from '@utils/collections/services';
+import { getSchemasFromResource } from '@utils/collections/schemas';
+import fs from 'fs';
 
-// Map the Keys to use in the SDK, astro exports as import.meta.env
-process.env.OPENAI_API_KEY = import.meta.env.OPENAI_API_KEY || '';
+const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
 
-const baseSystemPrompt = `You are an expert in event-driven architecture and domain-driven design, specializing in documentation for EventCatalog.
+export const defaultConfiguration = {
+  temperature: 0.4,
+  topP: 0.9,
+  topK: 40,
+  frequencyPenalty: 0.1,
+  presencePenalty: 0.0,
+  maxTokens: 1000,
+};
 
-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)
+let hasChatConfiguration = false;
+let model: LanguageModel;
+let modelConfiguration: any;
 
-Your primary goal is to help users understand their event-driven system through accurate documentation interpretation.
+try {
+  const providerConfiguration = await import(/* @vite-ignore */ join(catalogDirectory, 'eventcatalog.chat.js'));
+  model = await providerConfiguration.default();
+  modelConfiguration = providerConfiguration.configuration || defaultConfiguration;
+  hasChatConfiguration = true;
+} catch (error) {
+  hasChatConfiguration = false;
+}
 
-When responding:
-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.
+const getBaseSystemPrompt = (
+  referrer: string
+) => `You are an expert in software architecture and domain-driven design, specializing in the open source tool EventCatalog.
+
+You assist developers, architects, and business stakeholders who need information about their software architecture catalog.
+
+There are many different resource types in EventCatalog, including:
+- Events (collection name 'events') (asynchronous messages that notify about something that has happened)
+- Commands (collection name 'commands') (requests to perform an action)
+- Queries (collection name 'queries') (requests for information)
+- Services (collection name 'services') (bounded contexts or applications that produce/consume events)
+- Domains (collection name 'domains') (business capabilities or functional areas)
+- Flows (collection name 'flows') (state machines)
+- Channels (collection name 'channels') (communication channels)
+- Entities (collection name 'entities') (data objects)
+- Containers (collection name 'containers') (at the moment these are data stores (databases))
+
+The user will ask you some questions about the software architecture catalog, you should use the tools provided to you to get the information they need.
+
+At point the referer url will be the URL of the page the user is on, you should use this to help you answer the question,
+You may be able to get the resource from the URL, example if the URL is /docs/events/MyEvent/1.0.0 you can get the resource from the URL, in this case the id is MyEvent and the version is 1.0.0 and collection is events.
+
+The referer URL is ${referrer}
+
+Some other examples
+
+- /docs/events/MyEvent/1.0.0 -> id: MyEvent, version: 1.0.0, collection: events
+- /architecture/domains/E-Commerce/1.0.0 -> id: E-Commerce, version: 1.0.0, collection: domains
+- /visualiser/domains/E-Commerce/1.0.0
+
+Sometimes the user will be on the specification page (openapi, asyncapi, graphql) for a resource too 
+- /docs/services/OrdersService/0.0.3/asyncapi/order-service-asyncapi -> id: OrdersService, version: 0.0.3, collection: services, schema (specification): asyncapi
+- /docs/services/OrdersService/0.0.3/spec/openapi-v2 -> id: OrdersService, version: 0.0.3, collection: services, schema (specification): openapi
 
-Your primary goal is to help users understand their event-driven system through accurate documentation interpretation.
+Your primary goal is to help users understand their software architecture through accurate documentation interpretation.
+Use the tools provided to get the context you need to an answer the question.
+
+When responding:
+1. Explain connections between resources when relevant.
+2.. Use appropriate technical terminology.
+3.. Use clear formatting with headings and bullet points when helpful.
+4. State clearly when information is missing rather than making assumptions.
+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
+    - 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})
+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
 
 If you have additional context, use it to answer the question.`;
 
@@ -43,17 +100,163 @@ export const GET = async ({ request }: APIContext<{ question: string; messages:
 export const POST = async ({ request }: APIContext<{ question: string; messages: Message[]; additionalContext?: string }>) => {
   const { messages }: { messages: UIMessage[] } = await request.json();
 
-  const provider = getProvider(config?.chat?.provider || 'openai', {
-    modelId: config?.chat?.model || 'gpt-3.5-turbo-0125',
-    temperature: config?.chat?.temperature,
-    topP: config?.chat?.topP,
-    topK: config?.chat?.topK,
-    frequencyPenalty: config?.chat?.frequencyPenalty,
-    presencePenalty: config?.chat?.presencePenalty,
-  });
+  if (!isEventCatalogScaleEnabled()) {
+    return new Response(JSON.stringify({ error: 'Chat is not enabled, please upgrade to the scale plan to use this feature' }), {
+      status: 403,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  if (!hasChatConfiguration) {
+    return new Response(JSON.stringify({ error: 'No chat configuration found' }), {
+      status: 404,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  // Get the URL of the request
+  const referrer = request.headers.get('referer');
+
+  const result = await streamText({
+    model,
+    system: getBaseSystemPrompt(referrer ?? ''),
+    messages: convertToModelMessages(messages) as ModelMessage[],
+    temperature: modelConfiguration?.temperature ?? 0.7,
+    stopWhen: stepCountIs(5),
+    // maxTokens: 4000, // Increased to handle large tool results
+    onError: (error) => {
+      console.error('[Chat] On error', error);
+    },
+    // maxOutputTokens: 40000,
+    // tools: tools,
+    tools: {
+      getResources: tool({
+        description:
+          'Use this tool to get events, services, commands, queries, flows, domains, channels, entities from EventCatalog',
+        inputSchema: z.object({
+          collection: z
+            .enum(['events', 'services', 'commands', 'queries', 'flows', 'domains', 'channels', 'entities'])
+            .describe('The collection to get the events from'),
+        }),
+        execute: async ({ collection }) => {
+          const resources = await getCollection(collection as any);
+          return resources.map((resource: any) => ({
+            id: resource.data.id,
+            version: resource.data.version,
+            name: resource.data.name,
+          }));
+        },
+      }),
+      getResource: tool({
+        description: 'Use this tool to get a specific resource from EventCatalog by its id and version',
+        inputSchema: z.object({
+          collection: z
+            .enum(['events', 'services', 'commands', 'queries', 'flows', 'domains', 'channels', 'entities'])
+            .describe('The collection to get the events from'),
+          id: z.string().describe('The id of the resource to get'),
+          version: z.string().describe('The version of the resource to get'),
+        }),
+        execute: async ({ collection, id, version }) => {
+          const resource = await getEntry(collection as any, `${id}-${version}`);
+          return resource;
+        },
+      }),
+      getMessagesProducedOrConsumedByResource: tool({
+        description:
+          'Use this tool to get the messages produced or consumed by a resource by its id and version. Look at the `sends` and `receives` properties to get the messages produced or consumed by the resource',
+        inputSchema: z.object({
+          resourceId: z.string().describe('The id of the resource to get the messages produced or consumed for'),
+          resourceVersion: z.string().describe('The version of the resource to get the messages produced or consumed for'),
+          resourceCollection: z
+            .enum(['services', 'events', 'commands', 'queries', 'flows', 'domains', 'channels', 'entities'])
+            .describe('The collection of the resource to get the messages produced or consumed for')
+            .default('services'),
+        }),
+        execute: async ({ resourceId, resourceVersion, resourceCollection }) => {
+          const resource = await getEntry(resourceCollection as any, `${resourceId}-${resourceVersion}`);
+          if (!resource) {
+            return {
+              error: `Resource not found with id ${resourceId} and version ${resourceVersion} and collection ${resourceCollection}`,
+            };
+          }
+          return resource;
+        },
+      }),
+      getProducerAndConsumerForMessage: tool({
+        description: 'Use this tool to get the producers and consumers for a message by its id and version',
+        inputSchema: z.object({
+          messageId: z.string().describe('The id of the message to get the producers and consumers for'),
+          messageVersion: z.string().describe('The version of the message to get the producers and consumers for'),
+          messageCollection: z
+            .enum(['events', 'commands', 'queries'])
+            .describe('The collection of the message to get the producers and consumers for')
+            .default('events'),
+        }),
+        execute: async ({ messageId, messageVersion, messageCollection }) => {
+          const services = await getCollection('services');
+          const message = await getEntry(messageCollection as any, `${messageId}-${messageVersion}`);
+          const consumers = await getProducersOfMessage(services, message as any);
+          return consumers;
+        },
+      }),
+      getConsumersOfMessage: tool({
+        description: 'Use this tool to get the consumers for a message by its id and version',
+        inputSchema: z.object({
+          messageId: z.string().describe('The id of the message to get the consumers for'),
+          messageVersion: z.string().describe('The version of the message to get the consumers for'),
+          messageCollection: z
+            .enum(['events', 'commands', 'queries'])
+            .describe('The collection of the message to get the consumers for')
+            .default('events'),
+        }),
+        execute: async ({ messageId, messageVersion, messageCollection }) => {
+          const services = await getCollection('services');
+          const message = await getEntry(messageCollection as any, `${messageId}-${messageVersion}`);
+          const consumers = await getConsumersOfMessage(services, message as any);
+          return consumers;
+        },
+      }),
+      getSchemaForResource: tool({
+        description:
+          'Use this tool to get the schema or specifications (openapi or asyncapi or graphql) for a resource by its id and version, you will use code blocks to render the schema to the user too',
+        inputSchema: z.object({
+          resourceId: z.string().describe('The id of the resource to get the schema for'),
+          resourceVersion: z.string().describe('The version of the resource to get the schema for'),
+          resourceCollection: z
+            .enum(['services', 'events', 'commands', 'queries', 'flows', 'domains', 'channels', 'entities'])
+            .describe('The collection of the resource to get the schema for')
+            .default('services'),
+        }),
+        execute: async ({ resourceId, resourceVersion, resourceCollection }) => {
+          const resource = await getEntry(resourceCollection as any, `${resourceId}-${resourceVersion}`);
 
-  const result = await provider.streamText(baseSystemPrompt, messages);
-  return result.toUIMessageStreamResponse();
+          if (!resource) {
+            return {
+              error: `Resource not found with id ${resourceId} and version ${resourceVersion} and collection ${resourceCollection}`,
+            };
+          }
+
+          const schema = await getSchemasFromResource(resource);
+
+          // If we have any schemas back then read them and return them
+          if (schema.length > 0) {
+            return schema.map((schemaItem) => ({
+              url: schemaItem.url,
+              format: schemaItem.format,
+              code: fs.readFileSync(schemaItem.url, 'utf-8'),
+            }));
+          }
+
+          return [];
+        },
+      }),
+    },
+  });
+  return result.toUIMessageStreamResponse({
+    headers: {
+      'Content-Type': 'text/event-stream',
+    },
+  });
 };
 
 export const prerender = false;

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -160,14 +160,6 @@ const premiumFeatures = [
     current: currentPath.includes('/docs/custom'),
     isPremium: true,
   },
-  {
-    id: '/chat',
-    label: 'EventCatalog Chat',
-    icon: BotMessageSquare,
-    href: buildUrl('/chat'),
-    current: currentPath.includes('/chat'),
-    isPremium: true,
-  },
 ].filter((item) => {
   const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
   return userSideBarOption ? userSideBarOption.visible : true;

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/asyncapi/[filename].astro

@@ -94,6 +94,10 @@ const pagefindAttributes =
       }
     }
 
+    .burger-menu {
+      display: none;
+    }
+
     .aui-root .z-10 {
       z-index: 8;
     }

package/eventcatalog/src/utils/collections/schemas.ts

@@ -2,6 +2,7 @@ import type { CollectionEntry } from 'astro:content';
 import type { PageTypes } from '@types';
 import path from 'path';
 import { buildUrl } from '@utils/url-builder';
+import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 
 export type Schema = {
   url: string;
@@ -13,12 +14,23 @@ export const getSchemaURL = (resource: CollectionEntry<PageTypes>) => {
   const publicPath = resource?.catalog?.publicPath;
   const schemaFilePath = resource?.data?.schemaPath;
 
-  if (!publicPath || !schemaFilePath) {
+  // No schema file path, return an empty string
+  if (!schemaFilePath) {
+    return;
+  }
+
+  if (!publicPath) {
+    // Then we try and get the absolute file path from the resource
+    const absoluteFilePath = getAbsoluteFilePathForAstroFile(resource.filePath ?? '', schemaFilePath ?? '');
+    if (absoluteFilePath) {
+      return absoluteFilePath;
+    }
+    // Can't find the schema file, return an empty string
     return;
   }
 
   // new URL
-  return path.join(publicPath, schemaFilePath);
+  return path.join(publicPath, schemaFilePath ?? '');
 };
 
 export const getSchemaFormatFromURL = (url: string) => {
@@ -43,17 +55,29 @@ export const getSchemasFromResource = (resource: CollectionEntry<PageTypes>): Sc
       ? specifications.find((spec) => spec.type === 'openapi')?.path
       : specifications?.openapiPath;
     // @ts-ignore
-    const publicPath = resource?.catalog?.publicPath;
+    let publicPath = resource?.catalog?.publicPath;
     const schemas = [];
 
     if (asyncapiPath) {
-      const asyncapiUrl = path.join(publicPath, asyncapiPath);
-      schemas.push({ url: buildUrl(asyncapiUrl), format: 'asyncapi' });
+      if (!publicPath) {
+        // We try and get the absoulate file path from the resource
+        const absoluteFilePath = getAbsoluteFilePathForAstroFile(resource.filePath ?? '', asyncapiPath ?? '');
+        schemas.push({ url: buildUrl(absoluteFilePath), format: 'asyncapi' });
+      } else {
+        // The resource has the public path, so we can use it to build the URL
+        schemas.push({ url: buildUrl(path.join(publicPath, asyncapiPath)), format: 'asyncapi' });
+      }
     }
 
     if (openapiPath) {
-      const openapiUrl = path.join(publicPath, openapiPath);
-      schemas.push({ url: buildUrl(openapiUrl), format: 'openapi' });
+      if (!publicPath) {
+        // We try and get the absoulate file path from the resource
+        const absoluteFilePath = getAbsoluteFilePathForAstroFile(resource.filePath ?? '', openapiPath ?? '');
+        schemas.push({ url: buildUrl(absoluteFilePath), format: 'openapi' });
+      } else {
+        // The resource has the public path, so we can use it to build the URL
+        schemas.push({ url: buildUrl(path.join(publicPath, openapiPath)), format: 'openapi' });
+      }
     }
 
     return schemas;

package/eventcatalog/src/utils/feature.ts

@@ -39,9 +39,12 @@ export const showCustomBranding = () => {
 export const isChangelogEnabled = () => config?.changelog?.enabled ?? false;
 
 export const isCustomDocsEnabled = () => isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
+
 export const isEventCatalogChatEnabled = () => {
   const isFeatureEnabledFromPlan = isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
-  return isFeatureEnabledFromPlan && config?.chat?.enabled && isSSR();
+  const directory = process.env.PROJECT_DIR || process.cwd();
+  const hasChatConfigurationFile = fs.existsSync(join(directory, 'eventcatalog.chat.js'));
+  return isFeatureEnabledFromPlan && hasChatConfigurationFile && isSSR();
 };
 
 export const isEventCatalogUpgradeEnabled = () => !isEventCatalogStarterEnabled() && !isEventCatalogScaleEnabled();

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.0.0-beta.17",
+  "version": "3.0.0-beta.19",
   "publishConfig": {
     "access": "public"
   },
@@ -21,12 +21,9 @@
     "default-files-for-collections/"
   ],
   "dependencies": {
-    "@ai-sdk/anthropic": "^2.0.23",
-    "@ai-sdk/google": "^2.0.17",
-    "@ai-sdk/openai": "^2.0.42",
     "@ai-sdk/react": "^2.0.60",
-    "@astrojs/markdown-remark": "^6.3.9",
-    "@astrojs/mdx": "^4.3.12",
+    "@astrojs/markdown-remark": "^6.3.10",
+    "@astrojs/mdx": "^4.3.13",
     "@astrojs/node": "^9.5.1",
     "@astrojs/react": "^4.4.2",
     "@astrojs/rss": "^4.0.14",
@@ -57,7 +54,7 @@
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
     "ai": "^5.0.60",
-    "astro": "^5.16.4",
+    "astro": "^5.16.5",
     "astro-compress": "^2.3.8",
     "astro-expressive-code": "^0.41.3",
     "astro-seo": "^0.8.4",
@@ -76,14 +73,14 @@
     "glob": "^10.5.0",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
-    "js-yaml": "^4.1.0",
+    "js-yaml": "^4.1.1",
     "jsonpath": "^1.1.1",
     "jsonwebtoken": "^9.0.2",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
     "lucide-react": "^0.453.0",
     "marked": "^15.0.6",
-    "mermaid": "^11.4.1",
+    "mermaid": "^11.12.1",
     "nanostores": "^1.1.0",
     "pagefind": "^1.3.0",
     "pako": "^2.1.0",
@@ -94,13 +91,14 @@
     "react-syntax-highlighter": "^16.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-expressive-code": "^0.41.3",
+    "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark-comment": "^1.0.0",
     "remark-directive": "^3.0.0",
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.7",
     "semver": "7.6.3",
-    "shelljs": "^0.8.5",
+    "shelljs": "^0.9.0",
     "tailwindcss": "^3.4.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.4.5",

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

@@ -1,60 +0,0 @@
-import Sidebar from './ChatSidebar';
-import { ChatProvider } from './hooks/ChatProvider';
-import ChatWindowServer from './windows/ChatWindow.server';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { ChatPromptCategoryGroup } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
-interface Resource {
-  id: string;
-  type: string;
-  name: string;
-}
-
-/**
- * Chat component has two modes:
- * - 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.
- */
-
-const Chat = ({
-  chatConfig,
-  resources,
-  chatPrompts,
-  output,
-}: {
-  chatConfig: any;
-  resources: Resource[];
-  chatPrompts: ChatPromptCategoryGroup[];
-  output: 'static' | 'server';
-}) => {
-  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 />
-        <QueryClientProvider client={queryClient}>
-          <ChatWindowServer {...chatConfig} resources={resources} chatPrompts={chatPrompts} />
-        </QueryClientProvider>
-      </div>
-    </ChatProvider>
-  );
-};
-
-export default Chat;