@eventcatalog/core 2.34.7 → 2.35.1

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

@@ -0,0 +1,189 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Chat from '@enterprise/eventcatalog-chat/components/Chat';
+import { getChatPromptsGroupedByCategory } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
+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';
+
+const isEnabled = config.chat?.enabled || false;
+const chatConfig = config.chat || {};
+
+const PROJECT_DIR = path.resolve(process.env.PROJECT_DIR || process.cwd());
+const GENERATED_AI_DIR = path.resolve(PROJECT_DIR, 'public/ai');
+
+const directoryExists = fs.existsSync(GENERATED_AI_DIR);
+
+// Get all information for the mention input
+const [events, commands, services, domains] = await Promise.all([
+  getEvents({ getAllVersions: false }),
+  getCommands({ getAllVersions: false }),
+  getServices({ getAllVersions: false }),
+  getDomains({ getAllVersions: false }),
+]);
+const allItems = [...events, ...commands, ...services, ...domains];
+
+const chatPrompts = await getChatPromptsGroupedByCategory();
+
+const resources = allItems.map((item) => ({ id: item.data.id, type: item.collection, name: item.data.name }));
+
+const generatorConfig = `
+ generators: [
+    [
+      "@eventcatalog/generator-ai", {
+        // If you want to chunk files into smaller chunks, set this to true
+        splitMarkdownFiles: true
+      }
+    ],
+  ],
+`;
+
+if (!isEventCatalogChatEnabled()) {
+  return Astro.redirect(buildUrl('/chat/feature'));
+}
+---
+
+<VerticalSideBarLayout title="AI Chat">
+  <div class="flex h-[calc(100vh-60px)] bg-white">
+    {
+      isEnabled ? (
+        directoryExists ? (
+          <>
+            <div id="browserWarning" class="flex items-center justify-center w-full p-4 sm:p-8" style="display: none;">
+              <div class="max-w-2xl text-center bg-yellow-100 text-yellow-800 px-8 py-6 rounded-lg shadow-md">
+                <h2 class="text-2xl font-bold mb-4">Unsupported Browser</h2>
+                <p>
+                  EventCatalog AI Assistant uses LLM models in the browser which is{' '}
+                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GPU" class="text-blue-500 hover:underline">
+                    only supported in Chrome and Edge browsers
+                  </a>
+                  . <br />
+                  Please switch to a supported browser for the best experience.
+                </p>
+              </div>
+            </div>
+            <div id="chatContainer" class="w-full">
+              <Chat client:only="react" chatConfig={chatConfig} resources={resources} chatPrompts={chatPrompts} />
+            </div>
+          </>
+        ) : (
+          <div class="flex items-center justify-center w-full p-4 sm:p-8">
+            <div class="max-w-2xl text-center">
+              <h2 class="text-2xl font-bold text-gray-900 mb-4">EventCatalog AI Assistant Setup Required</h2>
+              <p class="text-gray-600 mb-6">
+                To use the AI Assistant, you need to generate the AI data first.
+                <br />
+                Please install the plugin and run the generator command to generate the AI data.
+              </p>
+
+              <div class="text-left space-y-4">
+                <div class="space-y-2">
+                  <h2 class="text-lg font-semibold  text-left">1. Install the generator</h2>
+                  <Code code={`npm i @eventcatalog/generator-ai`} lang="bash" frame="terminal" />
+                </div>
+
+                <div class="space-y-2">
+                  <h2 class="text-lg font-semibold text-left">2. Configure the generator</h2>
+                  <Code code={generatorConfig} lang="javascript" frame="terminal" title="eventcatalog.config.js" />
+                </div>
+
+                <div class="space-y-2">
+                  <h2 class="text-lg font-semibold  text-left">3. Generate the AI data</h2>
+                  <Code code={`npm run generate`} lang="bash" frame="none" />
+                </div>
+                <p class="text-gray-600 text-sm mt-2">
+                  After running the generator, a new folder called <code class="bg-gray-100 p-1 rounded-md">generated-ai</code>{' '}
+                  will be created in your project.
+                </p>
+
+                <p class="text-gray-600 text-sm mt-2">Once done, refresh this page.</p>
+              </div>
+            </div>
+          </div>
+        )
+      ) : (
+        <div class="flex items-center justify-center w-full p-4 sm:p-8">
+          <div class="max-w-6xl flex flex-col md:flex-row gap-8 md:gap-12 items-center">
+            {/* Left side - Illustration */}
+            <div class="flex-1">
+              <img
+                src="/images/ai-placeholder.png"
+                alt="AI Assistant Illustration"
+                class="w-full max-w-sm md:max-w-md mx-auto  rounded-lg shadow-lg"
+              />
+            </div>
+
+            {/* Right side - Content */}
+            <div class="flex-1">
+              <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">EventCatalog AI Assistant</h2>
+              <p class="text-gray-600 mb-6 text-base md:text-lg">
+                Chat with your catalog to quickly find information, understand relationships, and get instant answers about your
+                architecture. Our AI-powered assistant makes exploring your event catalog faster and more intuitive than ever.
+              </p>
+
+              <div class="bg-gray-700 rounded-lg p-4 md:p-6 mb-4">
+                <h3 class="text-lg text-white font-semibold mb-3">Quick Setup</h3>
+                <Code code={`npm install @eventcatalog/generator-ai`} lang="bash" frame="none" />
+                <a
+                  href="https://www.eventcatalog.dev/features/ai-assistant"
+                  class="inline-flex items-center text-sm text-white mt-4"
+                >
+                  Learn more about setup →
+                </a>
+              </div>
+              <p class="text-gray-600 mb-6 text-sm">
+                Your data stays private and secure - all processing happens locally on your machine.
+              </p>
+            </div>
+          </div>
+        </div>
+      )
+    }
+  </div>
+</VerticalSideBarLayout>
+
+<script>
+  function checkBrowser() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isChrome = /chrome/.test(userAgent) && !/edg/.test(userAgent);
+    const isEdge = /edg/.test(userAgent);
+
+    const warningElement = document.getElementById('browserWarning') as HTMLElement;
+    const chatContainer = document.getElementById('chatContainer') as HTMLElement;
+
+    if (warningElement && chatContainer) {
+      if (!isChrome && !isEdge) {
+        warningElement.style.display = 'flex';
+        chatContainer.style.display = 'none';
+      } else {
+        warningElement.style.display = 'none';
+        chatContainer.style.display = 'block';
+      }
+    }
+  }
+
+  // Run check when DOM is loaded
+  document.addEventListener('DOMContentLoaded', checkBrowser);
+</script>
+
+<style>
+  .loading-status.ready {
+    background-color: rgb(240 253 244); /* light green bg */
+    color: rgb(22 163 74); /* green text */
+  }
+
+  .loading-status.hidden {
+    display: none;
+  }
+
+  /* Add smooth scrolling behavior */
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+</style>

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

@@ -0,0 +1,151 @@
+import { streamText, type CoreMessage, type Message } from 'ai';
+import { openai } from '@ai-sdk/openai';
+import { EventCatalogVectorStore, type Resource } from '@enterprise/eventcatalog-chat/EventCatalogVectorStore';
+import fs from 'fs';
+import path from 'path';
+import config from '@config';
+
+const AI_EMBEDDINGS_PATH = path.join(process.env.PROJECT_DIR || process.cwd(), 'public/ai');
+
+const documents = JSON.parse(fs.readFileSync(path.join(AI_EMBEDDINGS_PATH, 'documents.json'), 'utf8'));
+const embeddings = JSON.parse(fs.readFileSync(path.join(AI_EMBEDDINGS_PATH, 'embeddings.json'), 'utf8'));
+
+const OpenAIChatModelIds = [
+  'o1',
+  'o1-2024-12-17',
+  'o1-mini',
+  'o1-mini-2024-09-12',
+  'o1-preview',
+  'o1-preview-2024-09-12',
+  'o3-mini',
+  'o3-mini-2025-01-31',
+  'o3',
+  'o3-2025-04-16',
+  'o4-mini',
+  'o4-mini-2025-04-16',
+  'gpt-4.1',
+  'gpt-4.1-2025-04-14',
+  'gpt-4.1-mini',
+  'gpt-4.1-mini-2025-04-14',
+  'gpt-4.1-nano',
+  'gpt-4.1-nano-2025-04-14',
+  'gpt-4o',
+  'gpt-4o-2024-05-13',
+  'gpt-4o-2024-08-06',
+  'gpt-4o-2024-11-20',
+  'gpt-4o-audio-preview',
+  'gpt-4o-audio-preview-2024-10-01',
+  'gpt-4o-audio-preview-2024-12-17',
+  'gpt-4o-search-preview',
+  'gpt-4o-search-preview-2025-03-11',
+  'gpt-4o-mini-search-preview',
+  'gpt-4o-mini-search-preview-2025-03-11',
+  'gpt-4o-mini',
+  'gpt-4o-mini-2024-07-18',
+  'gpt-4-turbo',
+  'gpt-4-turbo-2024-04-09',
+  'gpt-4-turbo-preview',
+  'gpt-4-0125-preview',
+  'gpt-4-1106-preview',
+  'gpt-4',
+  'gpt-4-0613',
+  'gpt-4.5-preview',
+  'gpt-4.5-preview-2025-02-27',
+  'gpt-3.5-turbo-0125',
+  'gpt-3.5-turbo',
+  'gpt-3.5-turbo-1106',
+  'chatgpt-4o-latest',
+];
+
+export const getResources = async (question: string) => {
+  const vectorStore = await EventCatalogVectorStore.create(documents, embeddings);
+  const resources = await vectorStore.getEventCatalogResources(question);
+  return resources;
+};
+
+export async function askQuestion(
+  question: string = 'Tell me more about the Payment domain',
+  historicMessages: Message[] = [],
+  systemPromptOverride?: string
+) {
+  const resources = await getResources(question);
+
+  const baseSystemPrompt = `You are an expert in event-driven architecture and domain-driven design, specializing in documentation for EventCatalog.
+
+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)
+
+Your primary goal is to help users understand their event-driven system through accurate documentation interpretation.
+
+IMPORTANT RULES:
+1. Resources will be provided to you in <resource> tags. ONLY use these resources to answer questions.
+2. NEVER include ANY <resource> tags in your responses. This is a strict requirement.
+3. ALWAYS refer to resources by their name/ID/title attributes only.
+4. If asked about specific resource types (e.g., "What domains do we have?"), simply list their names without elaboration.
+5. NEVER invent or make up resources that aren't provided to you.
+6. When you return code examples, make sure you always return them in markdown code blocks.
+
+RESPONSE FORMAT EXAMPLES:
+✓ CORRECT: "The SubscriptionService produces the UserSubscribed event."
+✗ INCORRECT: "<resource id="SubscriptionService">...</resource> produces events."
+
+When responding:
+1. Use only information from the provided resources.
+2. Explain connections between resources when relevant.
+3. Use appropriate technical terminology.
+4. Use clear formatting with headings and bullet points when helpful.
+5. State clearly when information is missing rather than making assumptions.
+6. Don't provide code examples unless specifically requested.
+
+Your primary goal is to help users understand their event-driven system through accurate documentation interpretation.
+
+If you have additional context, use it to answer the question.`;
+
+  const resourceStrings = resources.map((resource: Resource) => {
+    const attributes = Object.entries(resource)
+      .filter(([key, value]) => key !== 'markdown' && key !== 'loc' && value !== undefined && value !== null)
+      .map(([key, value]) => `${key}="${String(value).replace(/"/g, '&quot;')}"`) // Escape quotes in values
+      .join(' ');
+    return `<resource ${attributes} />`;
+  });
+
+  const resourceContext = `==========
+${resourceStrings.join('\n')}
+==========`;
+
+  let systemPrompt = systemPromptOverride ? systemPromptOverride : baseSystemPrompt;
+  systemPrompt += `\n\n${resourceContext}`;
+
+  // add 1 more rule
+  systemPrompt += `\n\n1. When you return code examples, make sure you always return them in markdown code blocks.`;
+  const messages = [
+    {
+      role: 'system',
+      content: systemPrompt, // Fixed: Was qaPrompt
+    },
+    ...historicMessages,
+    {
+      role: 'user',
+      content: question,
+    },
+  ] as CoreMessage[];
+
+  const model = config?.chat?.model || 'o4-mini';
+
+  if (!OpenAIChatModelIds.includes(model)) {
+    throw new Error(`Invalid model: ${model}, please use one of the following models: ${OpenAIChatModelIds.join(', ')}`);
+  }
+
+  return await streamText({
+    model: openai(model),
+    messages: messages,
+    temperature: 0.2,
+    topP: 1,
+    frequencyPenalty: 0,
+    presencePenalty: 0,
+  });
+}

package/eventcatalog/src/enterprise/eventcatalog-chat/utils/chat-prompts.ts

@@ -0,0 +1,50 @@
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+
+export type ChatPrompt = CollectionEntry<'chatPrompts'>;
+
+// Update cache to store both versions
+let cachedChatPrompts: Record<string, ChatPrompt[]> = {
+  allVersions: [],
+  currentVersions: [],
+};
+
+export const getChatPrompts = async (): Promise<ChatPrompt[]> => {
+  const cacheKey = 'allVersions';
+
+  // Check if we have cached domains for this specific getAllVersions value
+  if (cachedChatPrompts[cacheKey].length > 0) {
+    return cachedChatPrompts[cacheKey];
+  }
+
+  const prompts = await getCollection('chatPrompts');
+
+  return prompts;
+};
+
+export type ChatPromptCategoryGroup = {
+  label: string;
+  icon?: string;
+  items: ChatPrompt[];
+};
+
+export const getChatPromptsGroupedByCategory = async (): Promise<ChatPromptCategoryGroup[]> => {
+  const prompts = await getChatPrompts();
+
+  const grouped = prompts.reduce(
+    (acc, prompt) => {
+      const { id, label, icon } = prompt.data.category;
+
+      if (!acc[id]) {
+        acc[id] = { label, icon, items: [] };
+      }
+
+      acc[id].items.push(prompt);
+      return acc;
+    },
+    {} as Record<string, { label: string; icon?: string; items: ChatPrompt[] }>
+  );
+
+  // Convert the grouped object into the desired array format
+  return Object.values(grouped);
+};

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

@@ -1,171 +1,5 @@
 ---
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import Chat from '@enterprise/ai-assistant/components/Chat';
-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 { buildUrl } from '@utils/url-builder';
-const isEnabled = config.chat?.enabled || false;
-const chatConfig = config.chat || {};
-
-const PROJECT_DIR = path.resolve(process.env.PROJECT_DIR || process.cwd());
-const GENERATED_AI_DIR = path.resolve(PROJECT_DIR, 'public/ai');
-
-const directoryExists = fs.existsSync(GENERATED_AI_DIR);
-
-const generatorConfig = `
- generators: [
-    [
-      "@eventcatalog/generator-ai", {
-        // If you want to chunk files into smaller chunks, set this to true
-        splitMarkdownFiles: true
-      }
-    ],
-  ],
-`;
-
-if (!isEventCatalogChatEnabled()) {
-  return Astro.redirect(buildUrl('/chat/feature'));
-}
+import ChatPage from '@enterprise/eventcatalog-chat/pages/chat/index.astro';
 ---
 
-<VerticalSideBarLayout title="AI Chat">
-  <div class="flex h-[calc(100vh-60px)] bg-white">
-    {
-      isEnabled ? (
-        directoryExists ? (
-          <>
-            <div id="browserWarning" class="flex items-center justify-center w-full p-4 sm:p-8" style="display: none;">
-              <div class="max-w-2xl text-center bg-yellow-100 text-yellow-800 px-8 py-6 rounded-lg shadow-md">
-                <h2 class="text-2xl font-bold mb-4">Unsupported Browser</h2>
-                <p>
-                  EventCatalog AI Assistant uses LLM models in the browser which is{' '}
-                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GPU" class="text-blue-500 hover:underline">
-                    only supported in Chrome and Edge browsers
-                  </a>
-                  . <br />
-                  Please switch to a supported browser for the best experience.
-                </p>
-              </div>
-            </div>
-            <div id="chatContainer" class="w-full">
-              <Chat client:only="react" chatConfig={chatConfig} />
-            </div>
-          </>
-        ) : (
-          <div class="flex items-center justify-center w-full p-4 sm:p-8">
-            <div class="max-w-2xl text-center">
-              <h2 class="text-2xl font-bold text-gray-900 mb-4">EventCatalog AI Assistant Setup Required</h2>
-              <p class="text-gray-600 mb-6">
-                To use the AI Assistant, you need to generate the AI data first.
-                <br />
-                Please install the plugin and run the generator command to generate the AI data.
-              </p>
-
-              <div class="text-left space-y-4">
-                <div class="space-y-2">
-                  <h2 class="text-lg font-semibold  text-left">1. Install the generator</h2>
-                  <Code code={`npm i @eventcatalog/generator-ai`} lang="bash" frame="terminal" />
-                </div>
-
-                <div class="space-y-2">
-                  <h2 class="text-lg font-semibold text-left">2. Configure the generator</h2>
-                  <Code code={generatorConfig} lang="javascript" frame="terminal" title="eventcatalog.config.js" />
-                </div>
-
-                <div class="space-y-2">
-                  <h2 class="text-lg font-semibold  text-left">3. Generate the AI data</h2>
-                  <Code code={`npm run generate`} lang="bash" frame="none" />
-                </div>
-                <p class="text-gray-600 text-sm mt-2">
-                  After running the generator, a new folder called <code class="bg-gray-100 p-1 rounded-md">generated-ai</code>{' '}
-                  will be created in your project.
-                </p>
-
-                <p class="text-gray-600 text-sm mt-2">Once done, refresh this page.</p>
-              </div>
-            </div>
-          </div>
-        )
-      ) : (
-        <div class="flex items-center justify-center w-full p-4 sm:p-8">
-          <div class="max-w-6xl flex flex-col md:flex-row gap-8 md:gap-12 items-center">
-            {/* Left side - Illustration */}
-            <div class="flex-1">
-              <img
-                src="/images/ai-placeholder.png"
-                alt="AI Assistant Illustration"
-                class="w-full max-w-sm md:max-w-md mx-auto  rounded-lg shadow-lg"
-              />
-            </div>
-
-            {/* Right side - Content */}
-            <div class="flex-1">
-              <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">EventCatalog AI Assistant</h2>
-              <p class="text-gray-600 mb-6 text-base md:text-lg">
-                Chat with your catalog to quickly find information, understand relationships, and get instant answers about your
-                architecture. Our AI-powered assistant makes exploring your event catalog faster and more intuitive than ever.
-              </p>
-
-              <div class="bg-gray-700 rounded-lg p-4 md:p-6 mb-4">
-                <h3 class="text-lg text-white font-semibold mb-3">Quick Setup</h3>
-                <Code code={`npm install @eventcatalog/generator-ai`} lang="bash" frame="none" />
-                <a
-                  href="https://www.eventcatalog.dev/features/ai-assistant"
-                  class="inline-flex items-center text-sm text-white mt-4"
-                >
-                  Learn more about setup →
-                </a>
-              </div>
-              <p class="text-gray-600 mb-6 text-sm">
-                Your data stays private and secure - all processing happens locally on your machine.
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    }
-  </div>
-</VerticalSideBarLayout>
-
-<script>
-  function checkBrowser() {
-    const userAgent = navigator.userAgent.toLowerCase();
-    const isChrome = /chrome/.test(userAgent) && !/edg/.test(userAgent);
-    const isEdge = /edg/.test(userAgent);
-
-    const warningElement = document.getElementById('browserWarning') as HTMLElement;
-    const chatContainer = document.getElementById('chatContainer') as HTMLElement;
-
-    if (warningElement && chatContainer) {
-      if (!isChrome && !isEdge) {
-        warningElement.style.display = 'flex';
-        chatContainer.style.display = 'none';
-      } else {
-        warningElement.style.display = 'none';
-        chatContainer.style.display = 'block';
-      }
-    }
-  }
-
-  // Run check when DOM is loaded
-  document.addEventListener('DOMContentLoaded', checkBrowser);
-</script>
-
-<style>
-  .loading-status.ready {
-    background-color: rgb(240 253 244); /* light green bg */
-    color: rgb(22 163 74); /* green text */
-  }
-
-  .loading-status.hidden {
-    display: none;
-  }
-
-  /* Add smooth scrolling behavior */
-  .scroll-smooth {
-    scroll-behavior: smooth;
-  }
-</style>
+<ChatPage />

package/eventcatalog/src/types/react-syntax-highlighter.d.ts

@@ -0,0 +1 @@
+declare module 'react-syntax-highlighter/dist/esm/styles/prism/material-light';

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.34.7",
+  "version": "2.35.1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,8 +21,10 @@
     "default-files-for-collections/"
   ],
   "dependencies": {
+    "@ai-sdk/openai": "^1.3.16",
     "@astrojs/markdown-remark": "^6.3.1",
     "@astrojs/mdx": "^4.2.4",
+    "@astrojs/node": "^9.2.0",
     "@astrojs/react": "^4.2.4",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/tailwind": "^6.0.2",
@@ -44,8 +46,10 @@
     "@radix-ui/react-tooltip": "^1.1.8",
     "@scalar/api-reference-react": "^0.4.37",
     "@tailwindcss/typography": "^0.5.13",
+    "@tanstack/react-query": "^5.74.3",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
+    "ai": "^4.3.9",
     "astro": "^5.7.0",
     "astro-expressive-code": "^0.40.1",
     "astro-pagefind": "^1.6.0",
@@ -71,6 +75,8 @@
     "mermaid": "^11.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
     "rehype-slug": "^6.0.0",
     "remark-comment": "^1.0.0",
     "remark-directive": "^3.0.0",
@@ -96,6 +102,7 @@
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/semver": "^7.5.8",
     "@types/shelljs": "^0.8.15",
     "@types/update-notifier": "^6.0.8",

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

@@ -1,16 +0,0 @@
-import Sidebar from './ChatSidebar';
-import { ChatProvider } from './hooks/ChatProvider';
-import ChatWindow from './ChatWindow';
-
-const Chat = ({ chatConfig }: { chatConfig: any }) => {
-  return (
-    <ChatProvider>
-      <div className="flex overflow-hidden w-full">
-        <Sidebar />
-        <ChatWindow {...chatConfig} />
-      </div>
-    </ChatProvider>
-  );
-};
-
-export default Chat;