@eventcatalog/core 3.0.0-beta.2 → 3.0.0-beta.21

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

@@ -1,244 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { Wand2 } from 'lucide-react';
-// 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-lg -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-8 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]">
-          <Dialog.Title className="text-lg font-semibold text-gray-800 mb-3">{prompt.data.title}</Dialog.Title>
-          <Dialog.Description className="mt-1 mb-6 text-sm text-gray-600">
-            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.5">
-                    {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 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out"
-                    >
-                      <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 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out"
-                    >
-                      <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)}
-                          onKeyDown={(e) => {
-                            // Prevent form submission on Enter key press unless Shift is held
-                            if (e.key === 'Enter' && !e.shiftKey) {
-                              e.preventDefault();
-                              // Optionally, you could trigger submission here if needed,
-                              // but the default behavior is just to prevent it.
-                              handleSubmit(e); // Example: trigger submit manually
-                            }
-                          }}
-                          required
-                          rows={isCode ? 6 : 3} // More rows for code input
-                          className={`w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out ${isCode ? 'font-mono text-sm' : ''}`}
-                          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 bg-white px-3 py-2 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-1 sm:text-sm transition duration-150 ease-in-out"
-                        />
-                      )}
-                    </>
-                  )}
-                </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 items-center justify-center gap-1.5 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"
-              >
-                <Wand2 size={16} />
-                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

@@ -1,211 +0,0 @@
-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;

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

@@ -1,176 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import * as icons from 'lucide-react'; // Import all icons
-import type { ChatPromptCategoryGroup, ChatPrompt } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
-import { defaultPrompts } from './default-prompts';
-
-// Removed the static iconMap
-
-const getCategoryIcon = (iconName?: string): React.ReactNode => {
-  // Default icon component
-  const DefaultIcon = icons.HelpCircle;
-  const IconComponent = iconName ? (icons as any)[iconName] : DefaultIcon;
-
-  // Render the found icon or the default one
-  return IconComponent ? (
-    <IconComponent size={16} className="mr-1 md:mr-2" />
-  ) : (
-    <DefaultIcon size={16} className="mr-1 md:mr-2" /> // Fallback just in case
-  );
-};
-
-interface WelcomePromptAreaProps {
-  chatPrompts: ChatPromptCategoryGroup[];
-  activeCategory: string;
-  setActiveCategory: (category: string) => void;
-  onPromptClick: (prompt: ChatPrompt) => void;
-  isProcessing: boolean; // Combined thinking/streaming state
-}
-
-// Helper function to group default prompts by category label
-const groupDefaultPrompts = (prompts: ChatPrompt[]): ChatPromptCategoryGroup[] => {
-  const groups: { [key: string]: { label: string; icon?: string; items: ChatPrompt[] } } = {};
-
-  prompts.forEach((prompt) => {
-    const categoryLabel = prompt.data.category.label;
-    const categoryIcon = prompt.data.category.icon; // Get icon from prompt data
-
-    if (!groups[categoryLabel]) {
-      groups[categoryLabel] = { label: categoryLabel, icon: categoryIcon, items: [] };
-    }
-    groups[categoryLabel].items.push(prompt);
-  });
-
-  // Convert the groups object into an array matching ChatPromptCategoryGroup structure
-  return Object.values(groups);
-};
-
-const WelcomePromptArea: React.FC<WelcomePromptAreaProps> = ({
-  chatPrompts,
-  activeCategory: activeCustomCategory, // Rename to avoid conflict
-  setActiveCategory: setActiveCustomCategory, // Rename to avoid conflict
-  onPromptClick,
-  isProcessing,
-}) => {
-  // Group default prompts and derive initial state only once
-  const defaultPromptGroups = useMemo(() => groupDefaultPrompts(defaultPrompts), []);
-  const [activeDefaultCategory, setActiveDefaultCategory] = useState<string>(() => defaultPromptGroups[0]?.label || '');
-
-  // Find the currently active category's questions from chatPrompts
-  const activeCustomQuestions: ChatPrompt[] = useMemo(() => {
-    if (!chatPrompts || chatPrompts.length === 0) return [];
-    const activeGroup = chatPrompts.find((group) => group.label === activeCustomCategory);
-    return activeGroup?.items || (chatPrompts[0]?.items ?? []);
-  }, [activeCustomCategory, chatPrompts]);
-
-  // Find the currently active category's default questions
-  const activeDefaultQuestions: ChatPrompt[] = useMemo(() => {
-    if (!defaultPromptGroups || defaultPromptGroups.length === 0) return [];
-    const activeGroup = defaultPromptGroups.find((group) => group.label === activeDefaultCategory);
-    return activeGroup?.items || [];
-  }, [activeDefaultCategory, defaultPromptGroups]);
-
-  return (
-    <div className="h-full flex flex-col justify-center items-center px-4 pb-4 pt-0">
-      <div className="max-w-2xl w-full text-left">
-        <h2 className="text-2xl font-semibold mb-6 text-gray-800">How can I help you?</h2>
-
-        {/* Conditional Rendering: Custom Prompts OR Default Prompts */}
-        {chatPrompts && chatPrompts.length > 0 ? (
-          /* --- CUSTOM PROMPTS UI --- */
-          <>
-            {/* Category Tabs - Use chatPrompts */}
-            <div className="flex flex-wrap justify-left gap-2 mb-6 border-b border-gray-200 pb-4">
-              {chatPrompts.map((categoryGroup) => (
-                <button
-                  key={categoryGroup.label}
-                  onClick={() => setActiveCustomCategory(categoryGroup.label)}
-                  disabled={isProcessing}
-                  className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 ${
-                    activeCustomCategory === categoryGroup.label
-                      ? 'bg-purple-600 text-white'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                  }`}
-                >
-                  {getCategoryIcon(categoryGroup.icon)}
-                  {categoryGroup.label}
-                </button>
-              ))}
-            </div>
-            {/* Questions List - Use activeCustomQuestions */}
-            <div className="space-y-2 text-left">
-              {activeCustomQuestions.map((item) => (
-                <button
-                  key={item.id}
-                  onClick={() => onPromptClick(item)}
-                  className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-purple-400 disabled:opacity-50"
-                  disabled={isProcessing}
-                >
-                  {item.data.title}
-                </button>
-              ))}
-            </div>
-          </>
-        ) : (
-          /* --- DEFAULT PROMPTS UI (Grouped) --- */
-          <>
-            {/* Default Category Tabs - Use defaultPromptGroups */}
-            <div className="flex flex-wrap justify-left gap-2 mb-6 border-b border-gray-200 pb-4">
-              {defaultPromptGroups.map((categoryGroup) => (
-                <button
-                  key={categoryGroup.label} // Use label as key
-                  onClick={() => setActiveDefaultCategory(categoryGroup.label)}
-                  disabled={isProcessing}
-                  className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 ${
-                    activeDefaultCategory === categoryGroup.label
-                      ? 'bg-purple-600 text-white'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                  }`}
-                >
-                  {/* Use the icon mapping function */}
-                  {getCategoryIcon(categoryGroup.icon)}
-                  {categoryGroup.label}
-                </button>
-              ))}
-            </div>
-            {/* Default Questions List - Use activeDefaultQuestions */}
-            <div className="space-y-2 text-left">
-              {activeDefaultQuestions.map((item) => (
-                <button
-                  key={item.id}
-                  onClick={() => onPromptClick(item)}
-                  className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-purple-400 disabled:opacity-50"
-                  disabled={isProcessing}
-                >
-                  {item.data.title}
-                </button>
-              ))}
-            </div>
-
-            {/* Enhanced Bring Your Own Prompts section */}
-            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 mt-6 text-gray-700 text-sm">
-              <p className="flex items-center">
-                <icons.Wand2 size={18} className="text-purple-600 mr-2 flex-shrink-0" /> {/* Added Icon */}
-                <span>
-                  Want to tailor these suggestions?{' '}
-                  <a
-                    href="https://www.eventcatalog.dev/docs/development/guides/eventcatlaog-chat/what-is-eventcatalog-chat"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-purple-700 hover:underline font-semibold"
-                  >
-                    {' '}
-                    {/* Added target and rel */}
-                    Bring your own prompts!
-                  </a>{' '}
-                  Easily configure this list with relevant questions for your teams and organization.
-                </span>
-              </p>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default WelcomePromptArea;