@moontra/moonui-pro 2.20.1 → 2.20.2

package/src/components/ui/command.tsx

@@ -1,33 +1,119 @@
 "use client"
 
 import * as React from "react"
-import { Search } from "lucide-react"
+import { useState, useRef, useEffect, useCallback, useMemo } from "react"
+import { 
+  Search, 
+  Mic, 
+  MicOff, 
+  Clock, 
+  Sparkles, 
+  ChevronRight, 
+  Zap, 
+  Brain,
+  Settings,
+  Wand2,
+  Bot,
+  RefreshCw,
+  X,
+  Check
+} from "lucide-react"
 import { Command as CommandPrimitive } from "cmdk"
 import { cva, type VariantProps } from "class-variance-authority"
+import { motion, AnimatePresence } from "framer-motion"
+import Fuse from "fuse.js"
 
 import { cn } from "../../lib/utils"
-import { Dialog, DialogContent, DialogTitle } from "./dialog"
+import { Dialog, DialogContent, DialogTitle, DialogHeader, DialogDescription } from "./dialog"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { 
+  Tooltip, 
+  TooltipContent, 
+  TooltipProvider, 
+  TooltipTrigger 
+} from "./tooltip"
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+import { Input } from "./input"
+import { Label } from "./label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+import { createAIProvider, type AIProvider } from "../../lib/ai-providers"
 
 /**
- * Command (Komut Paleti) Bileşeni
+ * AI-Enhanced Command Palette Component
  * 
- * Gerçek command palette işlevselliği ile klavye navigasyonu, arama ve filtreleme.
- * cmdk kütüphanesi üzerine inşa edilmiş, tam özellikli command interface.
+ * Features:
+ * - Fuzzy search with typo tolerance
+ * - AI-powered natural language processing
+ * - Voice commands with Web Speech API
+ * - Smart suggestions based on usage patterns
+ * - Intelligent history tracking
+ * - Real AI service integration
  */
 
-const MoonUIcommandVariantsPro = cva(
+// AI Configuration Types
+export interface CommandAIConfig {
+  provider?: 'openai' | 'claude' | 'gemini';
+  apiKey?: string;
+  model?: string;
+  temperature?: number;
+  maxTokens?: number;
+}
+
+interface AISettingsType {
+  provider: 'openai' | 'claude' | 'gemini'
+  apiKey: string
+  model: string
+  temperature: number
+  maxTokens: number
+}
+
+// Command history interface
+interface CommandHistoryItem {
+  id: string
+  command: string
+  category?: string
+  timestamp: number
+  frequency: number
+}
+
+// Enhanced command item interface
+export interface CommandItemData {
+  id: string
+  label: string
+  value: string
+  category?: string
+  keywords?: string[]
+  action?: () => void
+  shortcut?: string[]
+  icon?: React.ReactNode
+  priority?: number
+  context?: string[]
+}
+
+// Command variants with new AI-focused styles
+export const commandVariantsPro = cva(
   "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
   {
     variants: {
       variant: {
         default: "bg-popover text-popover-foreground",
-        glass: "bg-background/80 text-foreground backdrop-blur-sm",
-        bordered: "bg-popover text-popover-foreground border border-border",
+        glass: "bg-background/80 text-foreground backdrop-blur-sm border border-white/10",
+        bordered: "bg-popover text-popover-foreground border-2 border-border",
+        gradient: "bg-gradient-to-br from-primary/10 via-background to-secondary/10 border border-primary/20",
+        neon: "bg-background border-2 border-primary shadow-[0_0_20px_rgba(var(--primary),0.3)]",
       },
       size: {
-        sm: "min-h-[200px]",
-        default: "min-h-[300px]",
-        lg: "min-h-[400px]",
+        sm: "min-h-[300px] max-h-[400px]",
+        default: "min-h-[400px] max-h-[500px]",
+        lg: "min-h-[500px] max-h-[600px]",
+        xl: "min-h-[600px] max-h-[700px]",
       },
     },
     defaultVariants: {
@@ -37,42 +123,689 @@ const MoonUIcommandVariantsPro = cva(
   }
 )
 
-// Command bileşeni - cmdk primitive wrapper
-interface CommandProps 
-  extends React.ComponentProps<typeof CommandPrimitive>,
-    VariantProps<typeof MoonUIcommandVariantsPro> {}
+// Fuzzy search hook
+const useFuzzySearch = (items: CommandItemData[], query: string, enabled: boolean) => {
+  return useMemo(() => {
+    if (!enabled || !query) return items
 
-const MoonUICommandPro = React.forwardRef<
+    const fuse = new Fuse(items, {
+      keys: ['label', 'keywords', 'category'],
+      threshold: 0.3,
+      includeScore: true,
+    })
+
+    return fuse.search(query).map(result => result.item)
+  }, [items, query, enabled])
+}
+
+// Command history hook
+const useCommandHistory = (enabled: boolean, maxItems: number = 10) => {
+  const [history, setHistory] = useState<CommandHistoryItem[]>([])
+
+  useEffect(() => {
+    if (!enabled) return
+    
+    const stored = localStorage.getItem('moonui-command-history')
+    if (stored) {
+      setHistory(JSON.parse(stored))
+    }
+  }, [enabled])
+
+  const addToHistory = useCallback((item: CommandItemData) => {
+    if (!enabled) return
+
+    setHistory(prev => {
+      const existing = prev.find(h => h.id === item.id)
+      let updated: CommandHistoryItem[]
+
+      if (existing) {
+        updated = prev.map(h => 
+          h.id === item.id 
+            ? { ...h, timestamp: Date.now(), frequency: h.frequency + 1 }
+            : h
+        )
+      } else {
+        updated = [...prev, {
+          id: item.id,
+          command: item.label,
+          category: item.category,
+          timestamp: Date.now(),
+          frequency: 1,
+        }]
+      }
+
+      // Keep only maxItems
+      updated = updated
+        .sort((a, b) => b.frequency - a.frequency)
+        .slice(0, maxItems)
+
+      localStorage.setItem('moonui-command-history', JSON.stringify(updated))
+      return updated
+    })
+  }, [enabled, maxItems])
+
+  return { history, addToHistory }
+}
+
+// Voice command hook
+const useVoiceCommand = (enabled: boolean, onTranscript?: (text: string) => void) => {
+  const [isListening, setIsListening] = useState(false)
+  const [transcript, setTranscript] = useState('')
+  const recognitionRef = useRef<any>(null)
+
+  useEffect(() => {
+    if (!enabled || typeof window === 'undefined') return
+
+    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+    if (!SpeechRecognition) return
+
+    const recognition = new SpeechRecognition()
+    recognition.continuous = false
+    recognition.interimResults = false
+    recognition.lang = 'en-US'
+
+    recognition.onresult = (event: any) => {
+      const text = event.results[0][0].transcript
+      setTranscript(text)
+      onTranscript?.(text)
+      setIsListening(false)
+    }
+
+    recognition.onerror = () => {
+      setIsListening(false)
+    }
+
+    recognition.onend = () => {
+      setIsListening(false)
+    }
+
+    recognitionRef.current = recognition
+  }, [enabled, onTranscript])
+
+  const toggleListening = useCallback(() => {
+    if (!recognitionRef.current) return
+
+    if (isListening) {
+      recognitionRef.current.stop()
+      setIsListening(false)
+    } else {
+      recognitionRef.current.start()
+      setIsListening(true)
+    }
+  }, [isListening])
+
+  return { isListening, transcript, toggleListening }
+}
+
+// AI Suggestions component
+const AISuggestions: React.FC<{ 
+  items: CommandItemData[]
+  onSelect: (item: CommandItemData) => void
+  history: CommandHistoryItem[]
+}> = ({ items, onSelect, history }) => {
+  const suggestions = useMemo(() => {
+    // Combine history frequency with item priority
+    const scored = items.map(item => {
+      const historyItem = history.find(h => h.id === item.id)
+      const score = (item.priority || 0) + (historyItem?.frequency || 0) * 2
+      return { ...item, score }
+    })
+
+    return scored
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 3)
+  }, [items, history])
+
+  if (suggestions.length === 0) return null
+
+  return (
+    <div className="px-3 py-2 border-b">
+      <div className="flex items-center gap-2 mb-2">
+        <Sparkles className="h-3 w-3 text-primary" />
+        <span className="text-xs font-medium text-muted-foreground">AI Suggestions</span>
+      </div>
+      <div className="flex gap-2">
+        {suggestions.map(item => (
+          <motion.button
+            key={item.id}
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => onSelect(item)}
+            className="flex items-center gap-1 px-2 py-1 text-xs bg-primary/10 hover:bg-primary/20 rounded-md transition-colors"
+          >
+            {item.icon}
+            <span>{item.label}</span>
+          </motion.button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Enhanced Command Component Props
+interface CommandProProps 
+  extends Omit<React.ComponentProps<typeof CommandPrimitive>, 'onSelect'>,
+    VariantProps<typeof commandVariantsPro> {
+  items?: CommandItemData[]
+  onItemSelect?: (item: CommandItemData) => void
+  enableAI?: boolean
+  enableVoice?: boolean
+  enableFuzzySearch?: boolean
+  enableAISuggestions?: boolean
+  enableHistory?: boolean
+  maxHistoryItems?: number
+  placeholder?: string
+  emptyMessage?: string
+  showShortcuts?: boolean
+  categories?: string[]
+  onVoiceCommand?: (transcript: string) => void
+  aiConfig?: CommandAIConfig
+  persistAISettings?: boolean
+  onAICommand?: (command: string, result: string) => void
+}
+
+// Get AI provider instance
+const getAIProvider = (settings: AISettingsType): AIProvider | null => {
+  if (!settings.apiKey) return null;
+  
+  try {
+    return createAIProvider(settings.provider, {
+      apiKey: settings.apiKey,
+      model: settings.model,
+      temperature: settings.temperature,
+      maxTokens: settings.maxTokens
+    });
+  } catch (error) {
+    console.error('Failed to create AI provider:', error);
+    return null;
+  }
+}
+
+// Main AI-Enhanced Command Component
+export const MoonUICommandPro = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
-  CommandProps
->(({ className, variant, size, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(MoonUIcommandVariantsPro({ variant, size }), className)}
-    {...props}
-  />
-))
+  CommandProProps
+>(({ 
+  className, 
+  variant, 
+  size, 
+  items = [],
+  onItemSelect,
+  enableAI = false,
+  enableVoice = true,
+  enableFuzzySearch = true,
+  enableAISuggestions = true,
+  enableHistory = true,
+  maxHistoryItems = 10,
+  placeholder = "Search commands or type...",
+  emptyMessage = "No results found.",
+  showShortcuts = true,
+  categories,
+  onVoiceCommand,
+  aiConfig = {},
+  persistAISettings = true,
+  onAICommand,
+  ...props 
+}, ref) => {
+  const [search, setSearch] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+  const [isAISettingsOpen, setIsAISettingsOpen] = useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+  
+  // AI Settings
+  const [aiSettings, setAiSettings] = useState<AISettingsType>(() => {
+    if (persistAISettings && typeof window !== 'undefined') {
+      try {
+        const stored = localStorage.getItem('moonui-ai-settings');
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          return {
+            provider: (aiConfig.provider !== undefined ? aiConfig.provider : parsed.provider || 'openai') as 'openai' | 'claude' | 'gemini',
+            apiKey: aiConfig.apiKey !== undefined ? aiConfig.apiKey : parsed.apiKey || '',
+            model: aiConfig.model !== undefined ? aiConfig.model : parsed.model || 'gpt-3.5-turbo',
+            temperature: aiConfig.temperature !== undefined ? aiConfig.temperature : parsed.temperature ?? 0.7,
+            maxTokens: aiConfig.maxTokens !== undefined ? aiConfig.maxTokens : parsed.maxTokens ?? 1000,
+          };
+        }
+      } catch (e) {
+        console.error('Failed to load AI settings from localStorage:', e);
+      }
+    }
+    
+    return {
+      provider: (aiConfig.provider || 'openai') as 'openai' | 'claude' | 'gemini',
+      apiKey: aiConfig.apiKey || '',
+      model: aiConfig.model || 'gpt-3.5-turbo',
+      temperature: aiConfig.temperature ?? 0.7,
+      maxTokens: aiConfig.maxTokens ?? 1000,
+    };
+  });
+  
+  const { history, addToHistory } = useCommandHistory(enableHistory, maxHistoryItems)
+  const { isListening, transcript, toggleListening } = useVoiceCommand(enableVoice && enableAI, (text) => {
+    setSearch(text)
+    onVoiceCommand?.(text)
+    if (enableAI) {
+      handleNaturalLanguageCommand(text)
+    }
+  })
+
+  // Filter items by category
+  const filteredByCategory = useMemo(() => {
+    if (!selectedCategory) return items
+    return items.filter(item => item.category === selectedCategory)
+  }, [items, selectedCategory])
+
+  // Apply fuzzy search
+  const searchResults = useFuzzySearch(filteredByCategory, search, enableFuzzySearch)
+
+  // Natural language command processing
+  const handleNaturalLanguageCommand = async (text: string) => {
+    if (!enableAI || !aiSettings.apiKey || isProcessing) return
+
+    setIsProcessing(true)
+    try {
+      const provider = getAIProvider(aiSettings)
+      if (!provider) {
+        throw new Error('Failed to initialize AI provider')
+      }
+
+      // Process natural language command
+      const prompt = `Convert this natural language command to a specific action: "${text}". 
+      Available commands: ${items.map(item => item.label).join(', ')}.
+      Respond with just the closest matching command name, nothing else.`
+      
+      const result = await provider.generateText(prompt)
+      
+      // Find matching command
+      const matchingCommand = items.find(item => 
+        item.label.toLowerCase().includes(result.toLowerCase()) ||
+        result.toLowerCase().includes(item.label.toLowerCase())
+      )
+      
+      if (matchingCommand) {
+        handleSelect(matchingCommand)
+        onAICommand?.(text, matchingCommand.label)
+      }
+      
+    } catch (error) {
+      console.error('Natural language processing error:', error)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  // Handle item selection
+  const handleSelect = useCallback((item: CommandItemData) => {
+    addToHistory(item)
+    item.action?.()
+    onItemSelect?.(item)
+  }, [addToHistory, onItemSelect])
+
+  // Group items by category
+  const groupedItems = useMemo(() => {
+    const groups: Record<string, CommandItemData[]> = {}
+    
+    searchResults.forEach(item => {
+      const category = item.category || 'Other'
+      if (!groups[category]) groups[category] = []
+      groups[category].push(item)
+    })
+
+    return groups
+  }, [searchResults])
+
+  return (
+    <>
+      <CommandPrimitive
+        ref={ref}
+        className={cn(commandVariantsPro({ variant, size }), className)}
+        {...props}
+      >
+        {/* Search Input with Voice and AI */}
+        <div className="flex items-center border-b px-3">
+          <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+          <CommandPrimitive.Input
+            value={search}
+            onValueChange={setSearch}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && enableAI && search) {
+                e.preventDefault()
+                handleNaturalLanguageCommand(search)
+              }
+            }}
+            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            placeholder={placeholder}
+          />
+          
+          {/* Voice Command Button */}
+          {enableVoice && enableAI && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={toggleListening}
+                    className={cn(
+                      "ml-2",
+                      isListening && "text-primary animate-pulse"
+                    )}
+                  >
+                    {isListening ? (
+                      <Mic className="h-4 w-4" />
+                    ) : (
+                      <MicOff className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {isListening ? "Listening..." : "Voice command"}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+
+          {/* AI Settings Button */}
+          {enableAI && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setIsAISettingsOpen(true)}
+                    className="ml-1"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  AI Settings
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
+
+        {/* Category Filters */}
+        {categories && categories.length > 0 && (
+          <div className="flex gap-2 px-3 py-2 border-b">
+            <Button
+              variant={selectedCategory === null ? "primary" : "outline"}
+              size="sm"
+              onClick={() => setSelectedCategory(null)}
+              className="h-7 text-xs"
+            >
+              All
+            </Button>
+            {categories.map(cat => (
+              <Button
+                key={cat}
+                variant={selectedCategory === cat ? "primary" : "outline"}
+                size="sm"
+                onClick={() => setSelectedCategory(cat)}
+                className="h-7 text-xs"
+              >
+                {cat}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        {/* AI Suggestions */}
+        {enableAI && enableAISuggestions && !search && (
+          <AISuggestions 
+            items={items} 
+            onSelect={handleSelect}
+            history={history}
+          />
+        )}
+
+        {/* Recent Commands */}
+        {enableHistory && history.length > 0 && !search && (
+          <div className="px-3 py-2 border-b">
+            <div className="flex items-center gap-2 mb-2">
+              <Clock className="h-3 w-3 text-muted-foreground" />
+              <span className="text-xs font-medium text-muted-foreground">Recent Commands</span>
+            </div>
+            <div className="space-y-1">
+              {history.slice(0, 3).map(item => (
+                <button
+                  key={item.id}
+                  onClick={() => {
+                    const cmd = items.find(i => i.id === item.id)
+                    if (cmd) handleSelect(cmd)
+                  }}
+                  className="flex items-center justify-between w-full px-2 py-1 text-xs hover:bg-accent rounded-sm transition-colors"
+                >
+                  <span>{item.command}</span>
+                  {item.category && (
+                    <Badge variant="outline" className="text-[10px] h-4">
+                      {item.category}
+                    </Badge>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Command List */}
+        <CommandPrimitive.List className="max-h-[300px] overflow-y-auto overflow-x-hidden p-2">
+          {searchResults.length === 0 ? (
+            <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
+              {emptyMessage}
+            </CommandPrimitive.Empty>
+          ) : (
+            <AnimatePresence>
+              {Object.entries(groupedItems).map(([category, categoryItems]) => (
+                <motion.div
+                  key={category}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                >
+                  <CommandPrimitive.Group
+                    heading={category}
+                    className="overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground"
+                  >
+                    {categoryItems.map(item => (
+                      <CommandPrimitive.Item
+                        key={item.id}
+                        value={item.value}
+                        onSelect={() => handleSelect(item)}
+                        className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+                      >
+                        <div className="flex items-center gap-2 flex-1">
+                          {item.icon && (
+                            <span className="shrink-0">{item.icon}</span>
+                          )}
+                          <span>{item.label}</span>
+                        </div>
+                        {showShortcuts && item.shortcut && (
+                          <div className="ml-auto flex gap-0.5">
+                            {item.shortcut.map((key, i) => (
+                              <kbd
+                                key={i}
+                                className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+                              >
+                                {key}
+                              </kbd>
+                            ))}
+                          </div>
+                        )}
+                      </CommandPrimitive.Item>
+                    ))}
+                  </CommandPrimitive.Group>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          )}
+        </CommandPrimitive.List>
+
+        {/* AI Processing Indicator */}
+        {isProcessing && (
+          <div className="px-3 py-2 border-t">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <RefreshCw className="h-3 w-3 animate-spin" />
+              <span>Processing natural language command...</span>
+            </div>
+          </div>
+        )}
+
+        {/* Natural Language Hint */}
+        {enableAI && (
+          <div className="px-3 py-2 border-t">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Zap className="h-3 w-3" />
+              <span>Tip: You can use natural language commands like "open settings"</span>
+            </div>
+          </div>
+        )}
+      </CommandPrimitive>
+
+      {/* AI Settings Modal */}
+      {enableAI && (
+        <Dialog open={isAISettingsOpen} onOpenChange={setIsAISettingsOpen}>
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>AI Settings</DialogTitle>
+              <DialogDescription>
+                Configure your AI provider and API settings for enhanced command processing.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="provider">Provider</Label>
+                <Select 
+                  value={aiSettings.provider} 
+                  onValueChange={(value: 'openai' | 'claude' | 'gemini') => {
+                    const defaultModels = {
+                      openai: 'gpt-3.5-turbo',
+                      claude: 'claude-3-sonnet-20240229',
+                      gemini: 'gemini-2.0-flash'
+                    };
+                    const newSettings = { 
+                      ...aiSettings, 
+                      provider: value,
+                      model: defaultModels[value] || 'gpt-3.5-turbo'
+                    };
+                    setAiSettings(newSettings);
+                    if (persistAISettings) {
+                      localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
+                    }
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="openai">OpenAI</SelectItem>
+                    <SelectItem value="claude">Claude (Anthropic)</SelectItem>
+                    <SelectItem value="gemini">Gemini (Google)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="apiKey">API Key</Label>
+                <Input
+                  id="apiKey"
+                  type="password"
+                  value={aiSettings.apiKey}
+                  onChange={(e) => {
+                    const newSettings = { ...aiSettings, apiKey: e.target.value };
+                    setAiSettings(newSettings);
+                    if (persistAISettings) {
+                      localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
+                    }
+                  }}
+                  placeholder="sk-..."
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="model">Model</Label>
+                <Select 
+                  value={aiSettings.model} 
+                  onValueChange={(value) => {
+                    const newSettings = { ...aiSettings, model: value };
+                    setAiSettings(newSettings);
+                    if (persistAISettings) {
+                      localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
+                    }
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {aiSettings.provider === 'openai' && (
+                      <>
+                        <SelectItem value="gpt-4">GPT-4</SelectItem>
+                        <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
+                      </>
+                    )}
+                    {aiSettings.provider === 'claude' && (
+                      <>
+                        <SelectItem value="claude-3-opus">Claude 3 Opus</SelectItem>
+                        <SelectItem value="claude-3-sonnet">Claude 3 Sonnet</SelectItem>
+                        <SelectItem value="claude-3-haiku">Claude 3 Haiku</SelectItem>
+                      </>
+                    )}
+                    {aiSettings.provider === 'gemini' && (
+                      <>
+                        <SelectItem value="gemini-2.0-flash">Gemini 2.0 Flash</SelectItem>
+                        <SelectItem value="gemini-1.5-flash">Gemini 1.5 Flash</SelectItem>
+                        <SelectItem value="gemini-1.5-pro">Gemini 1.5 Pro</SelectItem>
+                      </>
+                    )}
+                    {false && (
+                      <>
+                        <SelectItem value="command">Command</SelectItem>
+                        <SelectItem value="command-light">Command Light</SelectItem>
+                      </>
+                    )}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setIsAISettingsOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button onClick={() => setIsAISettingsOpen(false)}>
+                Save Settings
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  )
+})
 MoonUICommandPro.displayName = CommandPrimitive.displayName
 
-// CommandDialog bileşeni
-interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {
-  commandClassName?: string
+// Enhanced Dialog wrapper for AI Command
+interface CommandDialogProProps extends React.ComponentProps<typeof Dialog> {
+  commandProps?: CommandProProps
   children?: React.ReactNode
 }
 
-const MoonUICommandDialogPro = ({ 
+export const MoonUICommandDialogPro = ({ 
   children, 
-  commandClassName,
+  commandProps,
   ...props 
-}: CommandDialogProps) => {
+}: CommandDialogProProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg" hideCloseButton>
-        <DialogTitle className="sr-only">Command Menu</DialogTitle>
-        <MoonUICommandPro className={cn(
-          "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
-          commandClassName
-        )}>
+      <DialogContent className="overflow-hidden p-0 shadow-2xl" hideCloseButton>
+        <DialogTitle className="sr-only">AI Command Menu</DialogTitle>
+        <MoonUICommandPro {...commandProps}>
           {children}
         </MoonUICommandPro>
       </DialogContent>
@@ -80,11 +813,11 @@ const MoonUICommandDialogPro = ({
   )
 }
 
-// CommandInput bileşeni
+// Basic Command Components (for backward compatibility)
 interface CommandInputProps 
   extends React.ComponentProps<typeof CommandPrimitive.Input> {}
 
-const MoonUICommandInputPro = React.forwardRef<
+export const MoonUICommandInputPro = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   CommandInputProps
 >(({ className, ...props }, ref) => (
@@ -102,11 +835,10 @@ const MoonUICommandInputPro = React.forwardRef<
 ))
 MoonUICommandInputPro.displayName = CommandPrimitive.Input.displayName
 
-// CommandList bileşeni
 interface CommandListProps 
   extends React.ComponentProps<typeof CommandPrimitive.List> {}
 
-const MoonUICommandListPro = React.forwardRef<
+export const MoonUICommandListPro = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   CommandListProps
 >(({ className, ...props }, ref) => (
@@ -118,11 +850,10 @@ const MoonUICommandListPro = React.forwardRef<
 ))
 MoonUICommandListPro.displayName = CommandPrimitive.List.displayName
 
-// CommandEmpty bileşeni
 interface CommandEmptyProps 
   extends React.ComponentProps<typeof CommandPrimitive.Empty> {}
 
-const MoonUICommandEmptyPro = React.forwardRef<
+export const MoonUICommandEmptyPro = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   CommandEmptyProps
 >(({ className, ...props }, ref) => (
@@ -134,11 +865,10 @@ const MoonUICommandEmptyPro = React.forwardRef<
 ))
 MoonUICommandEmptyPro.displayName = CommandPrimitive.Empty.displayName
 
-// CommandGroup bileşeni
 interface CommandGroupProps 
   extends React.ComponentProps<typeof CommandPrimitive.Group> {}
 
-const MoonUICommandGroupPro = React.forwardRef<
+export const MoonUICommandGroupPro = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
   CommandGroupProps
 >(({ className, ...props }, ref) => (
@@ -153,11 +883,10 @@ const MoonUICommandGroupPro = React.forwardRef<
 ))
 MoonUICommandGroupPro.displayName = CommandPrimitive.Group.displayName
 
-// CommandSeparator bileşeni
 interface CommandSeparatorProps 
   extends React.ComponentProps<typeof CommandPrimitive.Separator> {}
 
-const MoonUICommandSeparatorPro = React.forwardRef<
+export const MoonUICommandSeparatorPro = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
   CommandSeparatorProps
 >(({ className, ...props }, ref) => (
@@ -169,11 +898,10 @@ const MoonUICommandSeparatorPro = React.forwardRef<
 ))
 MoonUICommandSeparatorPro.displayName = CommandPrimitive.Separator.displayName
 
-// CommandItem bileşeni
 interface CommandItemProps 
   extends React.ComponentProps<typeof CommandPrimitive.Item> {}
 
-const MoonUICommandItemPro = React.forwardRef<
+export const MoonUICommandItemPro = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
   CommandItemProps
 >(({ className, ...props }, ref) => (
@@ -188,8 +916,7 @@ const MoonUICommandItemPro = React.forwardRef<
 ))
 MoonUICommandItemPro.displayName = CommandPrimitive.Item.displayName
 
-// CommandShortcut bileşeni - utility component
-const MoonUICommandShortcutPro = ({
+export const MoonUICommandShortcutPro = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
@@ -205,21 +932,17 @@ const MoonUICommandShortcutPro = ({
 }
 MoonUICommandShortcutPro.displayName = "CommandShortcutPro"
 
+// Additional exports for convenience
+export { 
+  commandVariantsPro as commandVariants, 
+  MoonUICommandPro as Command, 
+  MoonUICommandDialogPro as CommandDialog, 
+  MoonUICommandInputPro as CommandInput, 
+  MoonUICommandListPro as CommandList, 
+  MoonUICommandEmptyPro as CommandEmpty, 
+  MoonUICommandGroupPro as CommandGroup, 
+  MoonUICommandSeparatorPro as CommandSeparator, 
+  MoonUICommandItemPro as CommandItem, 
+  MoonUICommandShortcutPro as CommandShortcut
+}
 
-// Internal aliases for Pro component usage
-export const commandVariantsInternal = MoonUIcommandVariantsPro
-export const CommandInternal = MoonUICommandPro
-export const CommandDialogInternal = MoonUICommandDialogPro
-export const CommandInputInternal = MoonUICommandInputPro
-export const CommandListInternal = MoonUICommandListPro
-export const CommandEmptyInternal = MoonUICommandEmptyPro
-export const CommandGroupInternal = MoonUICommandGroupPro
-export const CommandSeparatorInternal = MoonUICommandSeparatorPro
-export const CommandItemInternal = MoonUICommandItemPro
-export const CommandShortcutInternal = MoonUICommandShortcutPro
-
-// Pro exports  
-export { MoonUIcommandVariantsPro, MoonUICommandPro, MoonUICommandDialogPro, MoonUICommandInputPro, MoonUICommandListPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandSeparatorPro, MoonUICommandItemPro, MoonUICommandShortcutPro }
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { MoonUIcommandVariantsPro as commandVariants, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandInputPro as CommandInput, MoonUICommandListPro as CommandList, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandItemPro as CommandItem, MoonUICommandShortcutPro as CommandShortcut }