@eventcatalog/core 3.0.0-beta.23 → 3.0.0-beta.25

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

@@ -1,11 +1,18 @@
-import { useEffect, useRef, useCallback, useState } from 'react';
-import { X, Sparkles, Square, Trash2, BookOpen, Copy, Check, Maximize2, Minimize2 } from 'lucide-react';
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
+import { X, Sparkles, Square, Trash2, BookOpen, Copy, Check, Maximize2, Minimize2, Wrench } from 'lucide-react';
 import { useChat } from '@ai-sdk/react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { lastAssistantMessageIsCompleteWithToolCalls } from 'ai';
 import * as Dialog from '@radix-ui/react-dialog';
+import * as Popover from '@radix-ui/react-popover';
+
+interface ToolMetadata {
+  name: string;
+  description: string;
+  isCustom?: boolean;
+}
 
 // Code block component with copy functionality
 const CodeBlock = ({ language, children }: { language: string; children: string }) => {
@@ -119,6 +126,52 @@ const suggestedQuestionsConfig: QuestionConfig[] = [
       { label: 'Who owns this domain?', prompt: 'Who owns this domain and how do I contact them?' },
     ],
   },
+  // Match /schemas with specType=graphql as query parameter
+  {
+    pattern: /^\/schemas.*[?&]specType=graphql/,
+    questions: [
+      { label: 'Tell me more about this GraphQL schema', prompt: 'Tell me more about this GraphQL schema' },
+      { label: 'What queries are available?', prompt: 'What queries are available in this GraphQL schema?' },
+      { label: 'What mutations are available?', prompt: 'What mutations are available in this GraphQL schema?' },
+      { label: 'Show me the types defined', prompt: 'Show me the types defined in this GraphQL schema' },
+    ],
+  },
+  {
+    pattern: /^\/schemas.*[?&]specType=openapi/,
+    questions: [
+      { label: 'Tell me more about this OpenAPI schema', prompt: 'Tell me more about this OpenAPI schema' },
+      { label: 'Show me the endpoints available', prompt: 'Show me the endpoints available in this OpenAPI schema' },
+      {
+        label: 'Show me the request and response formats',
+        prompt: 'Show me the request and response formats in this OpenAPI schema',
+      },
+    ],
+  },
+  {
+    pattern: /^\/schemas.*[?&]specType=asyncapi/,
+    questions: [
+      { label: 'Tell me more about this AsyncAPI schema', prompt: 'Tell me more about this AsyncAPI schema' },
+      { label: 'Show me the channels available', prompt: 'Show me the channels available in this AsyncAPI schema' },
+      { label: 'Show me the messages available', prompt: 'Show me the messages available in this AsyncAPI schema' },
+      {
+        label: 'Show me the request and response formats',
+        prompt: 'Show me the request and response formats in this AsyncAPI schema',
+      },
+    ],
+  },
+  {
+    pattern: /^\/schemas/,
+    questions: [
+      { label: 'Tell me more about this schema?', prompt: 'Tell me more about this schema' },
+      { label: 'Who producers or consumes this schema?', prompt: 'Who producers or consumes this schema?' },
+      { label: 'What fields are required?', prompt: 'What fields are required for this schema?' },
+      {
+        label: 'Generate code using this schema',
+        prompt: 'Create a code example of using this schema, ask me for the programming language I want the example in.',
+      },
+    ],
+  },
+
   // Any other docs page
   {
     pattern: /^\/docs\/.+/,
@@ -158,16 +211,23 @@ interface ChatPanelProps {
 
 const PANEL_WIDTH = 400;
 
-// Staggered fade-in animation styles
+// Staggered fade-in animation styles (delays account for 800ms panel slide)
 const fadeInStyles = {
   header: {
-    animation: 'fadeInDown 0.3s ease-out 0.1s both',
+    animation: 'fadeIn 0.5s ease-out 0.3s both',
   },
-  content: {
-    animation: 'fadeInDown 0.3s ease-out 0.2s both',
+  welcome: {
+    animation: 'fadeIn 0.6s ease-out 0.4s both',
   },
-  input: {
-    animation: 'fadeInDown 0.3s ease-out 0.3s both',
+  // Label and questions will be staggered individually in the component
+  questionsLabel: {
+    animation: 'fadeIn 0.5s ease-out 0.7s both',
+  },
+  getQuestionStyle: (index: number) => ({
+    animation: `fadeIn 0.5s ease-out ${0.85 + index * 0.12}s both`,
+  }),
+  inputFocus: {
+    animation: 'focusIn 0.6s ease-out 1.4s both',
   },
 };
 
@@ -199,18 +259,47 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
   const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
   const [pathname, setPathname] = useState('');
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [tools, setTools] = useState<ToolMetadata[]>([]);
+
+  // Sort tools with custom ones first
+  const sortedTools = useMemo(() => {
+    return [...tools].sort((a, b) => {
+      if (a.isCustom && !b.isCustom) return -1;
+      if (!a.isCustom && b.isCustom) return 1;
+      return 0;
+    });
+  }, [tools]);
+
+  // Fetch available tools when panel opens
+  useEffect(() => {
+    if (isOpen && tools.length === 0) {
+      fetch('/api/chat')
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.tools) {
+            setTools(data.tools);
+          }
+        })
+        .catch(() => {
+          // Silently fail - tools info is optional
+        });
+    }
+  }, [isOpen, tools.length]);
 
-  // Get current pathname on mount and when panel opens
+  // Get current URL (pathname + search) on mount and when panel opens
   useEffect(() => {
-    setPathname(window.location.pathname);
+    setPathname(window.location.pathname + window.location.search);
   }, [isOpen]);
 
   const suggestedQuestions = getSuggestedQuestions(pathname);
 
-  const { messages, sendMessage, stop, status, setMessages } = useChat({
+  const { messages, sendMessage, stop, status, setMessages, error } = useChat({
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
   });
 
+  // Extract user-friendly error message
+  const errorMessage = error?.message || 'Something went wrong. Please try again.';
+
   // Check if the assistant has started outputting content
   const lastAssistantMessage = [...messages].reverse().find((m) => m.role === 'assistant');
   const assistantHasContent = lastAssistantMessage?.parts?.some(
@@ -273,26 +362,45 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
     }
   }, [isOpen, isLoading]);
 
-  // Add/remove padding to main content when sidebar panel is open
+  // Add/remove padding to main application and header when sidebar panel is open
   useEffect(() => {
-    const contentEl = document.getElementById('content');
-    if (!contentEl) return;
+    const appEl = document.getElementById('eventcatalog-application');
+    const headerEl = document.getElementById('eventcatalog-header');
+    const docsSidebarEl = document.getElementById('eventcatalog-docs-sidebar');
 
-    // Add transition if not already present
-    if (!contentEl.style.transition) {
-      contentEl.style.transition = 'padding-right 300ms cubic-bezier(0.16, 1, 0.3, 1)';
-    }
+    const elements = [appEl, headerEl].filter(Boolean) as HTMLElement[];
 
-    // Only add padding when panel is open AND not in fullscreen mode
-    if (isOpen && !isFullscreen) {
-      contentEl.style.paddingRight = '23rem';
-    } else {
-      contentEl.style.paddingRight = '0';
+    elements.forEach((el) => {
+      // Add transition if not already present
+      if (!el.style.transition) {
+        el.style.transition = 'padding-right 800ms cubic-bezier(0.16, 1, 0.3, 1)';
+      }
+
+      // Only add padding when panel is open AND not in fullscreen mode
+      if (isOpen && !isFullscreen) {
+        el.style.paddingRight = `${PANEL_WIDTH}px`;
+      } else {
+        el.style.paddingRight = '0';
+      }
+    });
+
+    // Hide docs sidebar when chat panel is open
+    if (docsSidebarEl) {
+      if (isOpen && !isFullscreen) {
+        docsSidebarEl.style.display = 'none';
+      } else {
+        docsSidebarEl.style.display = '';
+      }
     }
 
     // Cleanup on unmount
     return () => {
-      contentEl.style.paddingRight = '0';
+      elements.forEach((el) => {
+        el.style.paddingRight = '0';
+      });
+      if (docsSidebarEl) {
+        docsSidebarEl.style.display = '';
+      }
     };
   }, [isOpen, isFullscreen]);
 
@@ -341,14 +449,22 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
     <>
       {/* Keyframes for fade-in animation */}
       <style>{`
-        @keyframes fadeInDown {
+        @keyframes fadeIn {
           from {
             opacity: 0;
-            transform: translateY(-8px);
           }
           to {
             opacity: 1;
-            transform: translateY(0);
+          }
+        }
+        @keyframes focusIn {
+          from {
+            box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
+            border-color: #e5e7eb;
+          }
+          to {
+            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
+            border-color: #c084fc;
           }
         }
         @keyframes pulse-glow {
@@ -360,32 +476,61 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
       {/* Panel - hidden when fullscreen modal is open */}
       {!isFullscreen && (
         <div
-          className="fixed top-0 right-0 h-[100vh] z-[200] bg-gradient-to-b from-white via-white to-gray-50/80 border-l border-gray-200/80 flex flex-col overflow-hidden"
+          className="fixed top-0 right-0 h-[100vh] z-[200] bg-white border-l border-gray-200 flex flex-col overflow-hidden"
           style={{
             width: `${PANEL_WIDTH}px`,
             transform: isOpen ? 'translateX(0)' : `translateX(${PANEL_WIDTH}px)`,
-            transition: 'transform 300ms cubic-bezier(0.16, 1, 0.3, 1)',
-            boxShadow: '-8px 0 24px -4px rgba(0, 0, 0, 0.1)',
+            transition: 'transform 800ms cubic-bezier(0.16, 1, 0.3, 1)',
           }}
         >
-          {/* Purple accent line at top */}
-          <div className="h-1 bg-gradient-to-r from-purple-500 via-purple-600 to-indigo-600" />
-
           {/* Header */}
-          <div
-            className="flex-none bg-gradient-to-b from-purple-50/50 to-transparent shrink-0"
-            style={isOpen ? fadeInStyles.header : undefined}
-            key={isOpen ? 'header-open' : 'header-closed'}
-          >
-            <div className="flex items-center justify-between px-5 py-3">
-              <div className="flex items-center space-x-2.5">
-                <div className="p-1.5 bg-purple-100 rounded-lg relative">
-                  <BookOpen size={16} className="text-purple-600" />
-                  <Sparkles size={8} className="text-purple-400 absolute -top-0.5 -right-0.5" />
+          <div className="flex-none border-b border-gray-100 shrink-0 pb-1">
+            <div className="flex items-center justify-between px-4 py-3">
+              <div className="flex items-center space-x-2">
+                <div className="p-1.5 bg-purple-50 rounded-md">
+                  <BookOpen size={14} className="text-purple-600" />
                 </div>
-                <span className="font-semibold text-gray-900 text-[15px]">EventCatalog Assistant</span>
+                <span className="font-medium text-gray-900 text-sm">EventCatalog Assistant</span>
               </div>
               <div className="flex items-center space-x-1">
+                {tools.length > 0 && (
+                  <Popover.Root>
+                    <Popover.Trigger asChild>
+                      <button
+                        className="p-2 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"
+                        aria-label="View available tools"
+                        title="Available tools"
+                      >
+                        <Wrench size={16} />
+                      </button>
+                    </Popover.Trigger>
+                    <Popover.Portal>
+                      <Popover.Content
+                        className="w-72 bg-white rounded-lg shadow-lg border border-gray-200 p-3 z-[250]"
+                        sideOffset={5}
+                        align="end"
+                      >
+                        <div className="text-[10px] font-medium text-gray-500 mb-2">Available Tools ({sortedTools.length})</div>
+                        <div className="max-h-64 overflow-y-auto divide-y divide-gray-100">
+                          {sortedTools.map((tool) => (
+                            <div key={tool.name} className="py-1.5 first:pt-0 last:pb-0">
+                              <div className="flex items-center gap-1.5">
+                                <span className="text-[11px] font-medium text-gray-700">{tool.name}</span>
+                                {tool.isCustom && (
+                                  <span className="px-1.5 py-0.5 text-[9px] font-medium bg-purple-100 text-purple-700 rounded">
+                                    Custom
+                                  </span>
+                                )}
+                              </div>
+                              <div className="text-[10px] text-gray-500 mt-0.5">{tool.description}</div>
+                            </div>
+                          ))}
+                        </div>
+                        <Popover.Arrow className="fill-white" />
+                      </Popover.Content>
+                    </Popover.Portal>
+                  </Popover.Root>
+                )}
                 <button
                   onClick={() => setIsFullscreen(true)}
                   className="p-2 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"
@@ -415,49 +560,51 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
             </div>
             {/* Thinking indicator */}
             {isThinking && (
-              <div className="px-5 pb-2 flex items-center gap-2">
-                <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse" />
+              <div className="px-4 pb-2 flex items-center gap-2">
+                <div className="w-1.5 h-1.5 bg-purple-500 rounded-full animate-pulse" />
                 <span className="text-xs text-gray-500">Thinking...</span>
               </div>
             )}
           </div>
 
           {/* Content */}
-          <div
-            className="flex-1 flex flex-col min-h-0 relative overflow-hidden"
-            style={isOpen ? fadeInStyles.content : undefined}
-            key={isOpen ? 'content-open' : 'content-closed'}
-          >
+          <div className="flex-1 flex flex-col min-h-0 relative overflow-hidden" key={isOpen ? 'content-open' : 'content-closed'}>
             {/* Messages or Welcome area */}
-            <div className="flex-1 overflow-y-auto px-6 scrollbar-hide">
+            <div className="flex-1 overflow-y-auto px-4 scrollbar-hide">
               {!hasMessages ? (
                 /* Welcome area */
-                <div className="flex flex-col h-full justify-between pt-6 pb-2">
+                <div className="flex flex-col h-full justify-between pt-4 pb-2">
                   {/* Center content */}
-                  <div className="flex-1 flex flex-col items-center justify-center">
+                  <div
+                    className="flex-1 flex flex-col items-center justify-center"
+                    style={isOpen ? fadeInStyles.welcome : undefined}
+                  >
                     {/* Animated Icon */}
-                    <div className="relative mb-6">
+                    <div className="relative mb-5">
                       <div className="absolute inset-0 bg-purple-400/20 rounded-2xl blur-xl animate-pulse" />
-                      <div className="relative w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
-                        <BookOpen size={28} className="text-white" strokeWidth={1.5} />
-                        <Sparkles size={12} className="text-purple-200 absolute -top-1 -right-1 animate-pulse" />
+                      <div className="relative w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-lg">
+                        <BookOpen size={26} className="text-white" strokeWidth={1.5} />
+                        <Sparkles size={10} className="text-purple-200 absolute -top-1 -right-1 animate-pulse" />
                       </div>
                     </div>
-
-                    {/* Greeting with gradient */}
-                    <h2 className="text-xl font-semibold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-1">
-                      {getGreeting()}
-                    </h2>
-                    <p className="text-sm text-gray-500 text-center">I'm here to help you explore your architecture.</p>
+                    <h2 className="text-base font-medium text-gray-900 mb-1">{getGreeting()}</h2>
+                    <p className="text-sm text-gray-500 text-center">Ask me anything about your catalog.</p>
                   </div>
 
                   {/* Suggested questions */}
-                  <div className="flex flex-wrap gap-2 mt-6">
+                  <div className="space-y-1.5 mt-4">
+                    <p
+                      className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2"
+                      style={isOpen ? fadeInStyles.questionsLabel : undefined}
+                    >
+                      Example questions
+                    </p>
                     {suggestedQuestions.map((question, index) => (
                       <button
                         key={index}
                         onClick={() => handleSuggestedAction(question.prompt)}
-                        className="px-3 py-1.5 text-xs text-gray-600 bg-white border border-gray-200 hover:border-purple-300 hover:bg-purple-50 hover:text-purple-700 rounded-full transition-all shadow-sm"
+                        className="w-full text-left px-3 py-2.5 text-sm text-gray-700 bg-gray-100 hover:bg-purple-50 hover:text-purple-700 border border-gray-200 hover:border-purple-200 rounded-lg transition-colors"
+                        style={isOpen ? fadeInStyles.getQuestionStyle(index) : undefined}
                       >
                         {question.label}
                       </button>
@@ -472,8 +619,8 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                     return (
                       <div key={message.id} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                         {message.role === 'user' ? (
-                          <div className="max-w-[85%] rounded-2xl rounded-br-md px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-sm">
-                            <p className="text-sm font-light whitespace-pre-wrap">{content}</p>
+                          <div className="max-w-[85%] rounded-2xl rounded-br-md px-4 py-2.5 bg-purple-600 text-white">
+                            <p className="text-sm whitespace-pre-wrap">{content}</p>
                           </div>
                         ) : (
                           <div className="w-full text-gray-700">
@@ -529,7 +676,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                       <div className="w-full">
                         <div className="flex items-start gap-2 text-red-600 text-sm">
                           <span className="shrink-0">⚠️</span>
-                          <span>Something went wrong. Please try again.</span>
+                          <span>{errorMessage}</span>
                         </div>
                       </div>
                     </div>
@@ -541,13 +688,9 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
             </div>
 
             {/* Input area (Fixed at bottom) */}
-            <div
-              className="flex-none px-4 py-3 pb-2 bg-gradient-to-t from-gray-50 to-transparent border-t border-gray-100"
-              style={isOpen ? fadeInStyles.input : undefined}
-              key={isOpen ? 'input-open' : 'input-closed'}
-            >
+            <div className="flex-none px-4 py-3 border-t border-gray-100" key={isOpen ? 'input-open' : 'input-closed'}>
               <form onSubmit={handleSubmit}>
-                <div className="relative bg-white rounded-xl border border-gray-200 focus-within:border-purple-300 focus-within:ring-2 focus-within:ring-purple-100 transition-all shadow-sm">
+                <div className="relative bg-gray-50 rounded-lg border-2 border-gray-200 focus-within:border-purple-300 focus-within:bg-white transition-all">
                   <input
                     ref={inputRef}
                     type="text"
@@ -559,16 +702,16 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                         submitMessage(inputValue);
                       }
                     }}
-                    placeholder="Ask anything about your architecture..."
+                    placeholder="Ask a question..."
                     disabled={isLoading}
-                    className="w-full px-3 py-2.5 pr-16 bg-transparent text-gray-900 placeholder-gray-400 focus:outline-none text-sm disabled:opacity-50 rounded-xl"
+                    className="w-full px-3 py-2.5 pr-14 bg-transparent text-gray-900 placeholder-gray-400 focus:outline-none text-sm disabled:opacity-50 rounded-lg"
                   />
                   <div className="absolute right-1.5 top-1/2 -translate-y-1/2 z-10">
                     {isStreaming ? (
                       <button
                         type="button"
                         onClick={() => stop()}
-                        className="p-1.5 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                        className="p-1.5 text-red-500 hover:bg-red-50 rounded-md transition-colors"
                         aria-label="Stop generating"
                       >
                         <Square size={12} fill="currentColor" />
@@ -577,7 +720,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                       <button
                         type="submit"
                         disabled={!inputValue.trim() || isLoading}
-                        className="px-3 py-1 bg-purple-600 text-white text-xs font-medium rounded-lg hover:bg-purple-700 disabled:bg-gray-200 disabled:text-gray-400 transition-colors"
+                        className="px-2.5 py-1 bg-purple-600 text-white text-xs font-medium rounded-md hover:bg-purple-700 disabled:bg-gray-200 disabled:text-gray-400 transition-colors"
                         aria-label="Send message"
                       >
                         Send
@@ -586,7 +729,6 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                   </div>
                 </div>
               </form>
-
               <p className="text-[9px] text-gray-400 mt-2 text-center">AI can make mistakes. Verify important info.</p>
             </div>
           </div>
@@ -605,21 +747,56 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
         }}
       >
         <Dialog.Portal>
-          <Dialog.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[300]" />
-          <Dialog.Content className="fixed inset-y-4 left-1/2 -translate-x-1/2 w-[95%] max-w-5xl md:inset-y-8 rounded-2xl bg-white shadow-2xl z-[301] flex flex-col overflow-hidden focus:outline-none border border-gray-200">
-            {/* Purple accent line at top */}
-            <div className="h-1 bg-gradient-to-r from-purple-500 via-purple-600 to-indigo-600" />
-
+          <Dialog.Overlay className="fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-[300]" />
+          <Dialog.Content className="fixed inset-y-4 left-1/2 -translate-x-1/2 w-[95%] max-w-4xl md:inset-y-8 rounded-xl bg-white shadow-2xl z-[301] flex flex-col overflow-hidden focus:outline-none border border-gray-200">
             {/* Modal Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-gradient-to-b from-purple-50/50 to-transparent flex-shrink-0">
-              <div className="flex items-center space-x-3">
-                <div className="p-2 bg-purple-100 rounded-xl relative">
-                  <BookOpen size={20} className="text-purple-600" />
-                  <Sparkles size={10} className="text-purple-400 absolute -top-0.5 -right-0.5" />
+            <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100 flex-shrink-0">
+              <div className="flex items-center space-x-2.5">
+                <div className="p-1.5 bg-purple-50 rounded-lg">
+                  <BookOpen size={18} className="text-purple-600" />
                 </div>
-                <Dialog.Title className="text-lg font-semibold text-gray-900">EventCatalog Assistant</Dialog.Title>
+                <Dialog.Title className="text-base font-medium text-gray-900">Ask AI</Dialog.Title>
               </div>
               <div className="flex items-center space-x-2">
+                {tools.length > 0 && (
+                  <Popover.Root>
+                    <Popover.Trigger asChild>
+                      <button
+                        className="p-2 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"
+                        aria-label="View available tools"
+                        title="Available tools"
+                      >
+                        <Wrench size={18} />
+                      </button>
+                    </Popover.Trigger>
+                    <Popover.Portal>
+                      <Popover.Content
+                        className="w-80 bg-white rounded-lg shadow-lg border border-gray-200 p-4 z-[350]"
+                        sideOffset={5}
+                        align="end"
+                        style={{ maxHeight: 'calc(100vh - 200px)' }}
+                      >
+                        <div className="text-[11px] font-medium text-gray-500 mb-2">Available Tools ({sortedTools.length})</div>
+                        <div className="overflow-y-auto divide-y divide-gray-100" style={{ maxHeight: 'calc(100vh - 280px)' }}>
+                          {sortedTools.map((tool) => (
+                            <div key={tool.name} className="py-2 first:pt-0 last:pb-0">
+                              <div className="flex items-center gap-1.5">
+                                <span className="text-xs font-medium text-gray-700">{tool.name}</span>
+                                {tool.isCustom && (
+                                  <span className="px-1.5 py-0.5 text-[9px] font-medium bg-purple-100 text-purple-700 rounded">
+                                    Custom
+                                  </span>
+                                )}
+                              </div>
+                              <div className="text-[11px] text-gray-500 mt-0.5">{tool.description}</div>
+                            </div>
+                          ))}
+                        </div>
+                        <Popover.Arrow className="fill-white" />
+                      </Popover.Content>
+                    </Popover.Portal>
+                  </Popover.Root>
+                )}
                 {hasMessages && (
                   <button
                     onClick={() => setMessages([])}
@@ -653,39 +830,35 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
 
             {/* Thinking indicator */}
             {isThinking && (
-              <div className="px-6 py-2 flex items-center gap-2 border-b border-gray-100">
-                <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse" />
+              <div className="px-5 py-2 flex items-center gap-2 border-b border-gray-100">
+                <div className="w-1.5 h-1.5 bg-purple-500 rounded-full animate-pulse" />
                 <span className="text-sm text-gray-500">Thinking...</span>
               </div>
             )}
 
             {/* Modal Content */}
-            <div className="flex-1 overflow-y-auto px-6 py-4">
+            <div className="flex-1 overflow-y-auto px-5 py-4">
               {!hasMessages ? (
                 /* Welcome area */
                 <div className="flex flex-col h-full justify-center items-center">
                   {/* Animated Icon */}
-                  <div className="relative mb-8">
+                  <div className="relative mb-6">
                     <div className="absolute inset-0 bg-purple-400/20 rounded-2xl blur-xl animate-pulse" />
-                    <div className="relative w-20 h-20 rounded-2xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
-                      <BookOpen size={36} className="text-white" strokeWidth={1.5} />
-                      <Sparkles size={14} className="text-purple-200 absolute -top-1 -right-1 animate-pulse" />
+                    <div className="relative w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-lg">
+                      <BookOpen size={30} className="text-white" strokeWidth={1.5} />
+                      <Sparkles size={12} className="text-purple-200 absolute -top-1 -right-1 animate-pulse" />
                     </div>
                   </div>
-
-                  {/* Greeting with gradient */}
-                  <h2 className="text-2xl font-semibold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-2">
-                    {getGreeting()}
-                  </h2>
-                  <p className="text-gray-500 text-center mb-10">I'm here to help you explore your architecture.</p>
+                  <h2 className="text-xl font-medium text-gray-900 mb-1">{getGreeting()}</h2>
+                  <p className="text-gray-500 text-center mb-8">Ask me anything about your catalog.</p>
 
                   {/* Suggested questions */}
-                  <div className="flex flex-wrap gap-2 justify-center max-w-lg">
+                  <div className="grid grid-cols-2 gap-2 max-w-lg">
                     {suggestedQuestions.map((question, index) => (
                       <button
                         key={index}
                         onClick={() => handleSuggestedAction(question.prompt)}
-                        className="px-4 py-2 text-sm text-gray-600 bg-white border border-gray-200 hover:border-purple-300 hover:bg-purple-50 hover:text-purple-700 rounded-full transition-all shadow-sm"
+                        className="px-4 py-2.5 text-sm text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors text-left"
                       >
                         {question.label}
                       </button>
@@ -700,8 +873,8 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                     return (
                       <div key={message.id} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                         {message.role === 'user' ? (
-                          <div className="max-w-[75%] rounded-2xl rounded-br-md px-5 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-sm">
-                            <p className="text-sm font-light whitespace-pre-wrap">{content}</p>
+                          <div className="max-w-[75%] rounded-2xl rounded-br-md px-4 py-2.5 bg-purple-600 text-white">
+                            <p className="text-sm whitespace-pre-wrap">{content}</p>
                           </div>
                         ) : (
                           <div className="w-full text-gray-700">
@@ -756,7 +929,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                       <div className="w-full">
                         <div className="flex items-start gap-2 text-red-600 text-sm">
                           <span className="shrink-0">⚠️</span>
-                          <span>Something went wrong. Please try again.</span>
+                          <span>{errorMessage}</span>
                         </div>
                       </div>
                     </div>
@@ -768,9 +941,9 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
             </div>
 
             {/* Modal Input area */}
-            <div className="flex-shrink-0 px-6 py-4 border-t border-gray-100 bg-gradient-to-t from-gray-50 to-transparent">
+            <div className="flex-shrink-0 px-5 py-4 border-t border-gray-100">
               <form onSubmit={handleSubmit} className="max-w-3xl mx-auto">
-                <div className="relative bg-white rounded-xl border border-gray-200 focus-within:border-purple-300 focus-within:ring-2 focus-within:ring-purple-100 transition-all shadow-sm">
+                <div className="relative bg-gray-50 rounded-lg border border-gray-200 focus-within:border-purple-300 focus-within:bg-white transition-all">
                   <input
                     ref={modalInputRef}
                     type="text"
@@ -782,25 +955,25 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                         submitMessage(inputValue);
                       }
                     }}
-                    placeholder="Ask anything about your architecture..."
+                    placeholder="Ask a question..."
                     disabled={isLoading}
-                    className="w-full px-4 py-3 pr-20 bg-transparent text-gray-900 placeholder-gray-400 focus:outline-none text-sm disabled:opacity-50 rounded-xl"
+                    className="w-full px-4 py-3 pr-16 bg-transparent text-gray-900 placeholder-gray-400 focus:outline-none text-sm disabled:opacity-50 rounded-lg"
                   />
                   <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
                     {isStreaming ? (
                       <button
                         type="button"
                         onClick={() => stop()}
-                        className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                        className="p-1.5 text-red-500 hover:bg-red-50 rounded-md transition-colors"
                         aria-label="Stop generating"
                       >
-                        <Square size={16} fill="currentColor" />
+                        <Square size={14} fill="currentColor" />
                       </button>
                     ) : (
                       <button
                         type="submit"
                         disabled={!inputValue.trim() || isLoading}
-                        className="px-4 py-1.5 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors"
+                        className="px-3 py-1.5 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors"
                         aria-label="Send message"
                       >
                         Send