@moontra/moonui-pro 2.20.2 → 2.20.4

package/src/components/ui/command.tsx

@@ -1,948 +0,0 @@
-"use client"
-
-import * as React from "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, 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"
-
-/**
- * AI-Enhanced Command Palette Component
- * 
- * 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
- */
-
-// 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 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-[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: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-// Fuzzy search hook
-const useFuzzySearch = (items: CommandItemData[], query: string, enabled: boolean) => {
-  return useMemo(() => {
-    if (!enabled || !query) return items
-
-    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>,
-  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
-
-// Enhanced Dialog wrapper for AI Command
-interface CommandDialogProProps extends React.ComponentProps<typeof Dialog> {
-  commandProps?: CommandProProps
-  children?: React.ReactNode
-}
-
-export const MoonUICommandDialogPro = ({ 
-  children, 
-  commandProps,
-  ...props 
-}: CommandDialogProProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-2xl" hideCloseButton>
-        <DialogTitle className="sr-only">AI Command Menu</DialogTitle>
-        <MoonUICommandPro {...commandProps}>
-          {children}
-        </MoonUICommandPro>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-// Basic Command Components (for backward compatibility)
-interface CommandInputProps 
-  extends React.ComponentProps<typeof CommandPrimitive.Input> {}
-
-export const MoonUICommandInputPro = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  CommandInputProps
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "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",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-MoonUICommandInputPro.displayName = CommandPrimitive.Input.displayName
-
-interface CommandListProps 
-  extends React.ComponentProps<typeof CommandPrimitive.List> {}
-
-export const MoonUICommandListPro = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  CommandListProps
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-MoonUICommandListPro.displayName = CommandPrimitive.List.displayName
-
-interface CommandEmptyProps 
-  extends React.ComponentProps<typeof CommandPrimitive.Empty> {}
-
-export const MoonUICommandEmptyPro = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  CommandEmptyProps
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className={cn("py-6 text-center text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-MoonUICommandEmptyPro.displayName = CommandPrimitive.Empty.displayName
-
-interface CommandGroupProps 
-  extends React.ComponentProps<typeof CommandPrimitive.Group> {}
-
-export const MoonUICommandGroupPro = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  CommandGroupProps
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "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",
-      className
-    )}
-    {...props}
-  />
-))
-MoonUICommandGroupPro.displayName = CommandPrimitive.Group.displayName
-
-interface CommandSeparatorProps 
-  extends React.ComponentProps<typeof CommandPrimitive.Separator> {}
-
-export const MoonUICommandSeparatorPro = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  CommandSeparatorProps
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-MoonUICommandSeparatorPro.displayName = CommandPrimitive.Separator.displayName
-
-interface CommandItemProps 
-  extends React.ComponentProps<typeof CommandPrimitive.Item> {}
-
-export const MoonUICommandItemPro = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  CommandItemProps
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "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",
-      className
-    )}
-    {...props}
-  />
-))
-MoonUICommandItemPro.displayName = CommandPrimitive.Item.displayName
-
-export const MoonUICommandShortcutPro = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-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
-}
-