@eventcatalog/core 2.34.6 → 2.35.0

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

@@ -0,0 +1,50 @@
+import Sidebar from './ChatSidebar';
+import { ChatProvider } from './hooks/ChatProvider';
+import ChatWindowWebLLM from './windows/ChatWindow.client';
+import ChatWindowServer from './windows/ChatWindow.server';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ChatPromptCategoryGroup } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
+import config from '@config';
+const output = config.output || 'static';
+interface Resource {
+  id: string;
+  type: string;
+  name: string;
+}
+
+/**
+ * Chat component has two modes:
+ * - Client: ChatWindow.client.tsx (uses webllm)
+ * - 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,
+}: {
+  chatConfig: any;
+  resources: Resource[];
+  chatPrompts: ChatPromptCategoryGroup[];
+}) => {
+  const queryClient = new QueryClient();
+
+  return (
+    <ChatProvider>
+      <div className="flex overflow-hidden w-full">
+        <Sidebar />
+        {output === 'server' ? (
+          <QueryClientProvider client={queryClient}>
+            <ChatWindowServer {...chatConfig} resources={resources} chatPrompts={chatPrompts} />
+          </QueryClientProvider>
+        ) : (
+          <ChatWindowWebLLM {...chatConfig} />
+        )}
+      </div>
+    </ChatProvider>
+  );
+};
+
+export default Chat;

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

@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import ReactMarkdown, { type ExtraProps } from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import type { Message } from '@enterprise/eventcatalog-chat/components/hooks/ChatProvider';
+import * as Dialog from '@radix-ui/react-dialog';
+import { Fullscreen, X, Clipboard, Check, ChevronDown, ChevronRight } from 'lucide-react'; // Add Clipboard, Check, ChevronDown, ChevronRight icons
+
+// Define Resource type locally
+interface Resource {
+  id: string;
+  type: string;
+  url: string;
+  title?: string;
+  name?: string | null; // Allow null for name
+}
+
+interface ChatMessageProps {
+  message: Message;
+}
+
+// Function to escape special characters for regex
+function escapeRegex(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// Define props for the code component explicitly
+interface CodeComponentProps extends React.HTMLAttributes<HTMLElement>, ExtraProps {
+  inline?: boolean;
+}
+
+const ChatMessage = React.memo(({ message }: ChatMessageProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  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
+
+  // Helper to get display name for resource, ensuring a fallback
+  const getResourceDisplayName = (resource: Resource): string => {
+    return resource.title || resource.name || resource.id || 'Resource'; // Added fallback
+  };
+
+  const handleCopy = (codeToCopy: string, id: string) => {
+    navigator.clipboard
+      .writeText(codeToCopy)
+      .then(() => {
+        setCopiedStates((prev) => ({ ...prev, [id]: true }));
+        setTimeout(() => {
+          setCopiedStates((prev) => ({ ...prev, [id]: false }));
+        }, 1500); // Reset after 1.5 seconds
+      })
+      .catch((err) => {
+        console.error('Failed to copy code: ', err);
+      });
+  };
+
+  return (
+    <div className={`flex ${message.isUser ? 'justify-end' : 'justify-start'} mb-4`}>
+      <div
+        className={`max-w-[80%] rounded-lg p-3 ${message.isUser ? 'bg-purple-600 text-white rounded-br-none' : 'bg-gray-100 text-gray-800 rounded-bl-none'}`}
+      >
+        {/* Apply prose styles, including prose-invert for user messages for better text contrast */}
+        <div className={`prose prose-sm max-w-none ${message.isUser ? 'prose-invert' : ''}`}>
+          <ReactMarkdown
+            components={{
+              code({ node, className, children, ...props }: CodeComponentProps) {
+                const inline = props.inline;
+                const match = /language-(\w+)/.exec(className || '');
+                const codeString = String(children);
+                const language = match ? match[1] : 'text';
+                const codeBlockId = `code-${React.useId()}`;
+                const isCopied = copiedStates[codeBlockId];
+
+                const handleOpenModal = () => {
+                  setModalContent({ language, code: codeString.replace(/\n$/, '') });
+                  setIsModalOpen(true);
+                };
+
+                // Heuristic: Treat as inline if it doesn't contain newlines OR if explicitly inline.
+                // This handles parser quirks with single-line snippets in lists, etc.
+                const treatAsInline = inline || !codeString.includes('\n');
+
+                return !treatAsInline ? (
+                  <div className="code-block bg-[#1e1e1e] rounded-md overflow-hidden my-4 relative group">
+                    <div className="flex justify-between items-center px-4 py-1.5 bg-gray-700 text-gray-300 text-xs">
+                      <span>{language}</span>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => handleCopy(codeString.replace(/\n$/, ''), codeBlockId)}
+                          className="text-gray-300 hover:text-white flex items-center"
+                          aria-label={isCopied ? 'Copied' : 'Copy code'}
+                        >
+                          {isCopied ? <Check size={14} className="text-green-400" /> : <Clipboard size={14} />}
+                        </button>
+                        <button
+                          onClick={handleOpenModal}
+                          className="text-gray-300 hover:text-white"
+                          aria-label="View code fullscreen"
+                        >
+                          <Fullscreen size={14} />
+                        </button>
+                      </div>
+                    </div>
+                    <SyntaxHighlighter
+                      style={vscDarkPlus as any}
+                      language={language}
+                      PreTag="div"
+                      showLineNumbers
+                      wrapLines={true}
+                      customStyle={{ margin: 0, borderRadius: '0 0 0.375rem 0.375rem', padding: '1rem' }}
+                    >
+                      {codeString.replace(/\n$/, '')}
+                    </SyntaxHighlighter>
+                  </div>
+                ) : (
+                  <code
+                    className={`px-1 py-0.5 rounded text-xs font-mono ${
+                      message.isUser
+                        ? 'bg-purple-800/70 text-purple-100' // Darker purple bg, light text for user
+                        : 'bg-gray-300/70 text-gray-900' // Darker gray bg, dark text for assistant
+                    } ${className || ''}`}
+                    {...props}
+                  >
+                    {/* Render trimmed version for inline code */}
+                    {codeString.trim()}
+                  </code>
+                );
+              },
+              a: ({ node, ...props }) => (
+                <a {...props} target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:text-purple-800" />
+              ),
+              p: ({ node, ...props }) => <p {...props} className="mb-2 last:mb-0" />,
+            }}
+          >
+            {/* Use raw content again */}
+            {message.content || ''}
+          </ReactMarkdown>
+        </div>
+
+        {/* Resource section */}
+        {!message.isUser && message.resources && message.resources.length > 0 && (
+          <div className="mt-3 pt-3 border-t border-gray-200">
+            {/* Make the title clickable to toggle collapse */}
+            <button
+              className="flex items-center text-xs text-gray-500 mb-1 w-full text-left focus:outline-none"
+              onClick={() => setIsResourcesCollapsed(!isResourcesCollapsed)}
+              aria-expanded={!isResourcesCollapsed}
+              aria-controls="resource-list"
+            >
+              {isResourcesCollapsed ? <ChevronRight size={14} className="mr-1" /> : <ChevronDown size={14} className="mr-1" />}
+              Referenced Resources:
+            </button>
+            {/* Conditionally render the list based on the collapsed state */}
+            {!isResourcesCollapsed && (
+              <div className="text-[10px] mt-1 pl-5" id="resource-list">
+                {' '}
+                {/* Added pl-5 for indentation */}
+                {(message.resources as Resource[]).map((resource: Resource, idx: number) => (
+                  <span key={resource.id || `res-${idx}`}>
+                    <a
+                      href={resource.url}
+                      className="text-purple-600 hover:text-purple-800"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {/* Use helper function for clarity and add parentheses for operator precedence */}
+                      {getResourceDisplayName(resource)} ({resource.type})
+                    </a>
+                    {idx < (message.resources?.length || 0) - 1 ? ', ' : ''}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Fullscreen Code Modal */}
+      <Dialog.Root open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <Dialog.Portal>
+          {/* Add z-index and animations to Overlay */}
+          {/* NOTE: Define overlayShow/overlayHide keyframes in CSS/Tailwind config */}
+          <Dialog.Overlay className="fixed inset-0 bg-black/60 z-50 data-[state=open]:animate-overlayShow data-[state=closed]:animate-overlayHide" />
+          {/* Add z-index and animations to Content */}
+          {/* NOTE: Define contentShow/contentHide keyframes in CSS/Tailwind config */}
+          <Dialog.Content className="fixed left-1/2 top-1/2 z-[100] w-[90vw] max-w-4xl max-h-[85vh] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-[#1e1e1e] p-0 shadow-lg focus:outline-none data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide overflow-hidden flex flex-col">
+            {/* Modal Header with Copy Button */}
+            <div className="flex justify-between items-center px-4 py-2.5 bg-gray-700 text-gray-300 text-sm flex-shrink-0 border-b border-gray-600">
+              <Dialog.Title className="font-medium">{modalContent?.language}</Dialog.Title>
+              <div className="flex items-center gap-3">
+                {modalContent && (
+                  <button
+                    onClick={() => handleCopy(modalContent.code, 'modal-copy')}
+                    className="text-gray-300 hover:text-white flex items-center gap-1 text-xs"
+                    aria-label={copiedStates['modal-copy'] ? 'Copied' : 'Copy code'}
+                  >
+                    {copiedStates['modal-copy'] ? <Check size={14} className="text-green-400" /> : <Clipboard size={14} />}
+                    {copiedStates['modal-copy'] ? 'Copied!' : 'Copy'}
+                  </button>
+                )}
+                <Dialog.Close asChild>
+                  <button className="text-gray-300 hover:text-white" aria-label="Close">
+                    <X size={18} />
+                  </button>
+                </Dialog.Close>
+              </div>
+            </div>
+            <div className="flex-grow overflow-auto">
+              {modalContent && (
+                <SyntaxHighlighter
+                  style={vscDarkPlus as any}
+                  language={modalContent.language}
+                  PreTag="div"
+                  showLineNumbers
+                  wrapLines={true}
+                  customStyle={{ margin: 0, height: '100%', padding: '1rem' }} // Ensure it fills height and has padding
+                >
+                  {modalContent.code}
+                </SyntaxHighlighter>
+              )}
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  );
+});
+
+ChatMessage.displayName = 'ChatMessage';
+
+export default ChatMessage;

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

@@ -0,0 +1,233 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+// TODO: Import ChatPrompt and ChatPromptInput from a central types location
+import type { ChatPrompt } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
+
+// Define the possible resource list types
+type ResourceListType = 'resource-list-events' | 'resource-list-commands' | 'resource-list-services' | 'resource-list-queries';
+
+// Define ChatPromptInput type based on usage
+// NOTE: This should ideally match the schema defined for Astro content collections
+interface ChatPromptInput {
+  id: string;
+  label: string;
+  type: 'text' | ResourceListType | 'select' | 'code' | 'text-area'; // Use the union type, add 'select', 'code', 'text-area'
+  options?: string[]; // Add optional options for select type
+}
+
+// Define Resource type based on usage in ChatWindow
+interface Resource {
+  id: string;
+  type: string; // e.g., 'event', 'command', 'service', 'query'
+  url: string;
+  title?: string;
+  name?: string;
+}
+
+// --- Input Modal Component ---
+interface InputModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  prompt: ChatPrompt | null;
+  onSubmit: (prompt: ChatPrompt, inputValues: Record<string, string>) => void;
+  resources: Resource[]; // Add resources prop
+}
+
+// Helper to extract resource type from input type string
+const getResourceTypeFromInputType = (inputType: ResourceListType): string => {
+  return inputType.replace('resource-list-', '');
+};
+
+const InputModal: React.FC<InputModalProps> = ({ isOpen, onClose, prompt, onSubmit, resources }) => {
+  const [inputValues, setInputValues] = useState<Record<string, string>>({});
+
+  // Memoize resource filtering based on prompt inputs
+  const filteredResourcesByType = useMemo(() => {
+    const resourceMap: Record<string, Resource[]> = {};
+    prompt?.data?.inputs?.forEach((input) => {
+      if (input.type.startsWith('resource-list-')) {
+        const resourceType = getResourceTypeFromInputType(input.type as ResourceListType);
+        const filtered = resources.filter((r) => r.type === resourceType);
+        resourceMap[input.id] = filtered;
+      }
+    });
+    return resourceMap;
+  }, [prompt, resources]);
+
+  // Reset input values when the prompt or resources change
+  useEffect(() => {
+    if (prompt?.data?.inputs) {
+      const initialValues: Record<string, string> = {};
+      prompt.data.inputs.forEach((input) => {
+        const relevantResources = filteredResourcesByType[input.id];
+        if (input.type.startsWith('resource-list-') && relevantResources?.length > 0) {
+          initialValues[input.id] = relevantResources[0].id; // Pre-select the first available resource
+        } else {
+          initialValues[input.id] = ''; // Initialize others with empty strings
+        }
+      });
+      setInputValues(initialValues);
+    } else {
+      setInputValues({}); // Clear if no inputs
+    }
+  }, [prompt, filteredResourcesByType]); // Depend on memoized filtered resources
+
+  if (!prompt || !prompt.data?.inputs) {
+    return null; // Don't render if no prompt or inputs
+  }
+
+  const handleInputChange = (id: string, value: string) => {
+    setInputValues((prev) => ({ ...prev, [id]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Basic validation: Check if all required fields are filled
+    const allFilled = prompt?.data?.inputs?.every((input) => {
+      if (input.type.startsWith('resource-list-')) {
+        return inputValues[input.id] && inputValues[input.id] !== '';
+      }
+      return inputValues[input.id]?.trim();
+    });
+
+    if (allFilled) {
+      // Pass the selected resource NAME for resource lists, not the ID
+      const processedValues = { ...inputValues };
+      prompt.data.inputs?.forEach((input) => {
+        if (input.type.startsWith('resource-list-')) {
+          const relevantResources = filteredResourcesByType[input.id] || [];
+          const selectedResource = relevantResources.find((r) => r.id === processedValues[input.id]);
+          // Use resource name if available, otherwise fallback to the submitted ID (which might be name if no resource found)
+          processedValues[input.id] = selectedResource?.name || processedValues[input.id];
+        }
+      });
+      onSubmit(prompt, processedValues);
+    } else {
+      alert('Please fill in all required fields.');
+    }
+  };
+
+  return (
+    <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">
+            Please provide the following details:
+          </Dialog.Description>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {prompt.data.inputs.map((input: ChatPromptInput) => {
+              const isResourceList = input.type.startsWith('resource-list-');
+              const isSelect = input.type === 'select';
+              const isCode = input.type === 'code';
+              const isTextArea = input.type === 'text-area'; // Added for potential future use or consistency
+              const resourceType = isResourceList ? getResourceTypeFromInputType(input.type as ResourceListType) : '';
+              const relevantResources = filteredResourcesByType[input.id] || [];
+
+              return (
+                <div key={input.id}>
+                  <label htmlFor={input.id} className="block text-sm font-medium text-gray-700 mb-1">
+                    {input.label}
+                  </label>
+                  {isResourceList ? (
+                    <select
+                      id={input.id}
+                      name={input.id}
+                      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"
+                    >
+                      <option value="" disabled>
+                        Select a {resourceType}...
+                      </option>
+                      {relevantResources.map((resource) => (
+                        <option key={resource.id} value={resource.id}>
+                          {resource.name || resource.id} {/* Display name or ID as fallback */}
+                        </option>
+                      ))}
+                      {relevantResources.length === 0 && (
+                        <option value="" disabled>
+                          No {resourceType}s found
+                        </option>
+                      )}
+                    </select>
+                  ) : isSelect ? (
+                    <select
+                      id={input.id}
+                      name={input.id}
+                      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"
+                    >
+                      <option value="" disabled>
+                        Select an option...
+                      </option>
+                      {input.options?.map((option) => (
+                        <option key={option} value={option}>
+                          {option}
+                        </option>
+                      ))}
+                      {(!input.options || input.options.length === 0) && (
+                        <option value="" disabled>
+                          No options available
+                        </option>
+                      )}
+                    </select>
+                  ) : (
+                    <>
+                      {isCode || isTextArea ? (
+                        <textarea
+                          id={input.id}
+                          name={input.id}
+                          value={inputValues[input.id] || ''}
+                          onChange={(e) => handleInputChange(input.id, e.target.value)}
+                          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
+                          placeholder={isCode ? 'Paste your code here...' : ''}
+                        />
+                      ) : (
+                        <input
+                          type="text"
+                          id={input.id}
+                          name={input.id}
+                          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"
+                        />
+                      )}
+                    </>
+                  )}
+                </div>
+              );
+            })}
+            <div className="mt-6 flex justify-end space-x-2">
+              <Dialog.Close asChild>
+                <button
+                  type="button"
+                  className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                  onClick={onClose} // Ensure onClose is called when Cancel is clicked
+                >
+                  Cancel
+                </button>
+              </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"
+              >
+                Submit
+              </button>
+            </div>
+          </form>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+// --- End Input Modal Component ---
+
+export default InputModal;