@eventcatalog/core 2.34.7 → 2.35.0

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;

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

@@ -0,0 +1,211 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+// Define the structure for suggestions with types
+interface MentionSuggestion {
+  id: string; // Unique ID for the key prop
+  name: string; // The suggestion text (e.g., 'PaymentProcessed')
+  type: string; // The group type (e.g., 'event', 'service')
+}
+
+interface MentionInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  suggestions: MentionSuggestion[]; // Use the new type
+  trigger?: string;
+  onChange: (value: string) => void;
+  value: string;
+}
+
+const MentionInput: React.FC<MentionInputProps> = ({ suggestions, trigger = '@', onChange, value, ...inputProps }) => {
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [filteredSuggestions, setFilteredSuggestions] = useState<MentionSuggestion[]>([]); // Use the new type
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
+  const [currentQuery, setCurrentQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const suggestionsRef = useRef<HTMLUListElement>(null);
+
+  const updateSuggestions = useCallback(
+    (inputValue: string, cursorPosition: number | null) => {
+      if (cursorPosition === null) {
+        setShowSuggestions(false);
+        return;
+      }
+
+      // Find the start of the potential mention query
+      let queryStartIndex = -1;
+      for (let i = cursorPosition - 1; i >= 0; i--) {
+        const char = inputValue[i];
+        if (char === trigger) {
+          queryStartIndex = i;
+          break;
+        }
+        // Stop if we hit whitespace before the trigger
+        if (/\s/.test(char)) {
+          break;
+        }
+      }
+
+      if (queryStartIndex !== -1) {
+        const query = inputValue.substring(queryStartIndex + 1, cursorPosition).toLowerCase();
+        setCurrentQuery(query);
+
+        const filtered = suggestions.filter((s) => s.name.toLowerCase().includes(query));
+
+        // Update the filtered list and reset index
+        setFilteredSuggestions(filtered);
+        setActiveSuggestionIndex(0);
+        // Keep suggestions open as long as the trigger character is active
+        setShowSuggestions(true);
+      } else {
+        // Only hide suggestions if the trigger character sequence is broken
+        setShowSuggestions(false);
+      }
+    },
+    [suggestions, trigger]
+  );
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    onChange(newValue);
+    updateSuggestions(newValue, event.target.selectionStart);
+  };
+
+  // Modify handleSuggestionClick to accept the suggestion object
+  const handleSuggestionClick = (suggestion: MentionSuggestion) => {
+    if (inputRef.current) {
+      const cursorPosition = inputRef.current.selectionStart;
+      if (cursorPosition !== null) {
+        // Find the start of the @mention query relative to the cursor
+        let queryStartIndex = -1;
+        for (let i = cursorPosition - 1; i >= 0; i--) {
+          if (value[i] === trigger) {
+            queryStartIndex = i;
+            break;
+          }
+          if (/\s/.test(value[i])) {
+            break;
+          }
+        }
+
+        if (queryStartIndex !== -1) {
+          // Use suggestion.name for the inserted text
+          const newValue =
+            value.substring(0, queryStartIndex) +
+            suggestion.name +
+            ' ' + // Insert selected suggestion name and a space
+            value.substring(cursorPosition);
+
+          onChange(newValue);
+          setShowSuggestions(false);
+          setTimeout(() => {
+            if (inputRef.current) {
+              inputRef.current.focus();
+              const newCursorPos = queryStartIndex + suggestion.name.length + 1;
+              inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+            }
+          }, 0);
+        } else {
+          // Fallback: Use suggestion.name
+          onChange(value + suggestion.name + ' ');
+          setShowSuggestions(false);
+          inputRef.current.focus();
+        }
+      }
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (showSuggestions && filteredSuggestions.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setActiveSuggestionIndex((prevIndex) => (prevIndex + 1) % filteredSuggestions.length);
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setActiveSuggestionIndex((prevIndex) => (prevIndex - 1 + filteredSuggestions.length) % filteredSuggestions.length);
+      } else if (event.key === 'Enter' || event.key === 'Tab') {
+        event.preventDefault();
+        // Pass the selected suggestion object
+        handleSuggestionClick(filteredSuggestions[activeSuggestionIndex]);
+      } else if (event.key === 'Escape') {
+        setShowSuggestions(false);
+      }
+    }
+
+    // Propagate other keydown events if needed (e.g., for parent's Enter key handling)
+    // Check if the event is Enter and if we are NOT showing suggestions before calling parent's submit
+    // This prevents submitting the form when selecting a suggestion with Enter
+    if (inputProps.onKeyDown && !(showSuggestions && event.key === 'Enter')) {
+      inputProps.onKeyDown(event);
+    }
+  };
+
+  // Scroll active suggestion into view
+  useEffect(() => {
+    if (showSuggestions && suggestionsRef.current) {
+      const activeItem = suggestionsRef.current.children[activeSuggestionIndex] as HTMLLIElement;
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
+    }
+  }, [activeSuggestionIndex, showSuggestions]);
+
+  // Handle clicks outside the input/suggestions list to close it
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        inputRef.current &&
+        !inputRef.current.contains(event.target as Node) &&
+        suggestionsRef.current &&
+        !suggestionsRef.current.contains(event.target as Node)
+      ) {
+        setShowSuggestions(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative w-full">
+      <input
+        ref={inputRef}
+        {...inputProps}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown} // Use onKeyDown for better event control
+        onClick={(e) => updateSuggestions(value, e.currentTarget.selectionStart)} // Update suggestions on click too
+      />
+      {/* Keep the suggestions box open if showSuggestions is true */}
+      {showSuggestions && (
+        <ul
+          ref={suggestionsRef}
+          className="absolute bottom-full mb-2 left-0 right-0 bg-white border border-gray-300 rounded-md shadow-lg max-h-40 overflow-y-auto z-10"
+          style={{ minWidth: inputRef.current?.offsetWidth }}
+        >
+          {/* Conditionally render suggestions or 'No results' message */}
+          {filteredSuggestions.length > 0 ? (
+            filteredSuggestions.map((suggestion, index) => (
+              <li
+                key={suggestion.id + '-' + index}
+                className={`px-4 py-2 text-sm cursor-pointer flex justify-between items-center ${
+                  index === activeSuggestionIndex ? 'bg-purple-100 text-purple-800' : 'text-gray-700 hover:bg-gray-100'
+                }`}
+                onClick={() => handleSuggestionClick(suggestion)}
+                onMouseEnter={() => setActiveSuggestionIndex(index)}
+              >
+                <span>{suggestion.name}</span>
+                <span className="text-xs text-gray-500 ml-2">({suggestion.type})</span>
+              </li>
+            ))
+          ) : (
+            /* Render this list item when no suggestions match */
+            <li className="px-4 py-2 text-sm text-gray-500 italic">No matching items found</li>
+          )}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default MentionInput;