@moontra/moonui-pro 2.8.3 → 2.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/phone-number-input/index.tsx

@@ -59,6 +59,7 @@ export interface PhoneNumberInputProps extends Omit<React.InputHTMLAttributes<HT
 
 // Telefon numarası formatlama
 function formatPhoneNumber(number: string, format: string): string {
+  if (!number || !format) return ''
   const cleaned = number.replace(/\D/g, '')
   let formatted = ''
   let digitIndex = 0
@@ -77,6 +78,7 @@ function formatPhoneNumber(number: string, format: string): string {
 
 // Telefon numarası doğrulama
 function validatePhoneNumber(number: string, countryCode: string): boolean {
+  if (!number || !countryCode) return false
   const cleaned = number.replace(/\D/g, '')
   const country = countries.find(c => c.code === countryCode)
   
@@ -90,6 +92,7 @@ function validatePhoneNumber(number: string, countryCode: string): boolean {
 
 // Uluslararası format dönüştürme
 function toInternationalFormat(countryCode: string, phoneNumber: string): string {
+  if (!countryCode || !phoneNumber) return ''
   const country = countries.find(c => c.code === countryCode)
   if (!country) return phoneNumber
   
@@ -247,7 +250,7 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
             onPaste={handlePaste}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
-            placeholder={selectedCountry.format.replace(/x/g, '•')}
+            placeholder={selectedCountry?.format?.replace(/x/g, '•') || 'Enter phone number'}
             className={cn(
               "pr-10",
               error && "border-destructive",

package/src/components/rich-text-editor/index.tsx

@@ -22,6 +22,7 @@ import Typography from '@tiptap/extension-typography';
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
 import { common, createLowlight } from 'lowlight';
 import { SlashCommandsExtension } from './slash-commands-extension';
+import { motion } from 'framer-motion';
 
 // Import pro access hooks
 // Note: DocsProAccess should be handled by consuming application
@@ -66,7 +67,13 @@ import {
   Palette,
   Eye,
   Edit,
-  Lock
+  Lock,
+  Briefcase,
+  MessageSquare,
+  Heart,
+  GraduationCap,
+  Zap,
+  Lightbulb
 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
@@ -94,7 +101,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { MoonUIColorPickerPro as ColorPicker } from '../ui/color-picker';
 import { Slider } from '../ui/slider';
 import { toast } from '../ui/toast';
-// Note: AI providers should be handled by consuming application
+import { createAIProvider, type AIProvider as AIProviderInterface } from '../../lib/ai-providers';
 
 // Type definitions for AI functionality
 type AIProvider = 'openai' | 'anthropic' | 'gemini' | 'claude' | 'cohere'
@@ -116,59 +123,31 @@ interface SlashCommand {
   action: (text: string) => Promise<{ text: string; error?: string }> | void
 }
 
-// Mock AI provider function
-const getAIProvider = (settings: AISettingsType) => {
-  const generateWithPrompt = async (systemPrompt: string, userText: string) => {
-    // Mock implementation - consuming app should provide real AI integration
-    const result = `[${systemPrompt}] ${userText}`
-    return { text: result, error: undefined }
-  }
-
-  return {
-    generateText: async (prompt: string) => {
-      const result = await generateWithPrompt('Generate text', prompt)
-      return result.text
-    },
-    rewrite: async (text: string) => {
-      const result = await generateWithPrompt('Rewrite this text', text)
-      return result
-    },
-    expand: async (text: string) => {
-      const result = await generateWithPrompt('Expand this text', text)
-      return result
-    },
-    summarize: async (text: string) => {
-      const result = await generateWithPrompt('Summarize this text', text)
-      return result
-    },
-    fixGrammar: async (text: string) => {
-      const result = await generateWithPrompt('Fix grammar and spelling', text)
-      return result
-    },
-    translate: async (text: string, targetLang: string) => {
-      const result = await generateWithPrompt(`Translate to ${targetLang}`, text)
-      return result
-    },
-    changeTone: async (text: string, tone: string) => {
-      const result = await generateWithPrompt(`Change tone to ${tone}`, text)
-      return result
-    },
-    continueWriting: async (text: string) => {
-      const result = await generateWithPrompt('Continue writing', text)
-      return result
-    },
-    improveWriting: async (text: string) => {
-      const result = await generateWithPrompt('Improve writing quality', text)
-      return result
-    },
-    generateIdeas: async (text: string) => {
-      const result = await generateWithPrompt('Generate writing ideas', text)
-      return result
-    },
-    complete: async (text: string) => {
-      const result = await generateWithPrompt('Complete this text', text)
-      return result
-    }
+// Get AI provider instance
+const getAIProvider = (settings: AISettingsType): AIProviderInterface | null => {
+  if (!settings.apiKey) return null;
+  
+  try {
+    // Map provider names to supported ones
+    const providerMap: Record<string, 'openai' | 'gemini' | 'claude'> = {
+      'openai': 'openai',
+      'gemini': 'gemini',
+      'claude': 'claude',
+      'anthropic': 'claude', // Map anthropic to claude
+      'cohere': 'openai' // Use OpenAI as fallback for unsupported providers
+    };
+    
+    const mappedProvider = providerMap[settings.provider] || 'openai';
+    
+    return createAIProvider(mappedProvider, {
+      apiKey: settings.apiKey,
+      model: settings.model,
+      temperature: settings.temperature,
+      maxTokens: settings.maxTokens
+    });
+  } catch (error) {
+    console.error('Failed to create AI provider:', error);
+    return null;
   }
 }
 import './slash-commands.css';
@@ -298,7 +277,7 @@ export function RichTextEditor({
   aiConfig = {
     provider: 'openai',
     apiKey: '',
-    model: 'gpt-4',
+    model: 'gpt-3.5-turbo',
     temperature: 0.7,
     maxTokens: 1000,
   },
@@ -557,7 +536,11 @@ export function RichTextEditor({
     setIsProcessing(true);
     try {
       const provider = getAIProvider(aiSettings);
-      let response;
+      if (!provider) {
+        throw new Error('Failed to initialize AI provider');
+      }
+      
+      let response: string;
       
       switch (action) {
         case 'rewrite':
@@ -573,7 +556,6 @@ export function RichTextEditor({
           response = await provider.fixGrammar(text);
           break;
         case 'translate':
-          // TODO: Kullanıcıdan hedef dil seçmesini iste
           response = await provider.translate(text, 'Turkish');
           break;
         case 'tone_professional':
@@ -601,20 +583,11 @@ export function RichTextEditor({
           response = await provider.complete(text);
       }
       
-      if (response.error) {
-        toast({
-          title: "AI Error",
-          description: response.error,
-          variant: "destructive",
-        });
-        return null;
-      }
-      
-      return response.text;
-    } catch {
+      return response;
+    } catch (error) {
       toast({
         title: "AI Error",
-        description: "Failed to process with AI. Please check your settings.",
+        description: error instanceof Error ? error.message : "Failed to process with AI",
         variant: "destructive",
       });
       return null;
@@ -638,17 +611,52 @@ export function RichTextEditor({
       return;
     }
 
+    // Show processing toast
+    const processingToast = toast({
+      title: "Processing with AI...",
+      description: getActionDescription(action),
+      duration: 60000, // Long duration
+    });
+
     const result = await callAI(action, selectedText || editor.getText());
     
+    // Dismiss processing toast
+    processingToast.dismiss();
+    
     if (result) {
       if (selectedText) {
         editor.chain().focus().deleteSelection().insertContent(result).run();
       } else {
         editor.chain().focus().insertContent(result).run();
       }
+      
+      // Success toast
+      toast({
+        title: "AI action completed",
+        description: "Your text has been updated successfully.",
+      });
     }
   };
 
+  const getActionDescription = (action: string): string => {
+    const descriptions: Record<string, string> = {
+      rewrite: "Rewriting your text...",
+      improve: "Improving your writing...",
+      expand: "Expanding your text...",
+      summarize: "Creating a summary...",
+      fix: "Fixing grammar and spelling...",
+      translate: "Translating to Turkish...",
+      tone_professional: "Making text professional...",
+      tone_casual: "Making text casual...",
+      tone_friendly: "Making text friendly...",
+      tone_formal: "Making text formal...",
+      continue: "Continuing your writing...",
+      ideas: "Generating ideas...",
+      complete: "Completing your text..."
+    };
+    return descriptions[action] || "Processing...";
+  };
+
   const [linkUrl, setLinkUrl] = useState('');
   const [imageUrl, setImageUrl] = useState('');
   const [isLinkDialogOpen, setIsLinkDialogOpen] = useState(false);
@@ -1250,7 +1258,7 @@ export function RichTextEditor({
                   <Button 
                     variant="ghost" 
                     size="sm" 
-                    className="h-8 px-3 bg-purple-100 hover:bg-purple-200 dark:bg-purple-900 dark:hover:bg-purple-800"
+                    className="h-8 px-3 bg-purple-100 hover:bg-purple-200 dark:bg-purple-900 dark:hover:bg-purple-800 transition-colors"
                     disabled={isProcessing}
                   >
                     {isProcessing ? (
@@ -1261,58 +1269,134 @@ export function RichTextEditor({
                     AI Tools
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56">
-                  <DropdownMenuItem onClick={() => handleAIAction('rewrite')}>
+                <DropdownMenuContent className="w-64">
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2">
+                    <Wand2 className="w-3 h-3" />
+                    Writing Improvements
+                  </div>
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('rewrite')}
+                    disabled={isProcessing}
+                  >
                     <RefreshCw className="w-4 h-4 mr-2" />
                     Rewrite Selection
+                    <span className="ml-auto text-xs text-muted-foreground">Alt+R</span>
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('improve')}>
-                    <Wand2 className="w-4 h-4 mr-2" />
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('improve')}
+                    disabled={isProcessing}
+                  >
+                    <Sparkles className="w-4 h-4 mr-2" />
                     Improve Writing
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('expand')}>
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('expand')}
+                    disabled={isProcessing}
+                  >
                     <Maximize className="w-4 h-4 mr-2" />
                     Expand Text
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('summarize')}>
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('summarize')}
+                    disabled={isProcessing}
+                  >
                     <FileText className="w-4 h-4 mr-2" />
                     Summarize
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('continue')}>
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('continue')}
+                    disabled={isProcessing}
+                  >
                     <Plus className="w-4 h-4 mr-2" />
                     Continue Writing
                   </DropdownMenuItem>
+                  
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={() => handleAIAction('fix')}>
-                    <Check className="w-4 h-4 mr-2" />
-                    Fix Grammar & Spelling
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={() => handleAIAction('tone_professional')}>
-                    <Sparkles className="w-4 h-4 mr-2" />
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2">
+                    <Palette className="w-3 h-3" />
+                    Tone Adjustments
+                  </div>
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('tone_professional')}
+                    disabled={isProcessing}
+                  >
+                    <Briefcase className="w-4 h-4 mr-2" />
                     Make Professional
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('tone_casual')}>
-                    <Sparkles className="w-4 h-4 mr-2" />
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('tone_casual')}
+                    disabled={isProcessing}
+                  >
+                    <MessageSquare className="w-4 h-4 mr-2" />
                     Make Casual
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('tone_friendly')}>
-                    <Sparkles className="w-4 h-4 mr-2" />
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('tone_friendly')}
+                    disabled={isProcessing}
+                  >
+                    <Heart className="w-4 h-4 mr-2" />
                     Make Friendly
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('tone_formal')}>
-                    <Sparkles className="w-4 h-4 mr-2" />
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('tone_formal')}
+                    disabled={isProcessing}
+                  >
+                    <GraduationCap className="w-4 h-4 mr-2" />
                     Make Formal
                   </DropdownMenuItem>
+                  
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={() => handleAIAction('translate')}>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2">
+                    <Zap className="w-3 h-3" />
+                    Other Actions
+                  </div>
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('fix')}
+                    disabled={isProcessing}
+                  >
+                    <Check className="w-4 h-4 mr-2" />
+                    Fix Grammar & Spelling
+                    <span className="ml-auto text-xs text-muted-foreground">F7</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('translate')}
+                    disabled={isProcessing}
+                  >
                     <Languages className="w-4 h-4 mr-2" />
                     Translate to Turkish
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => handleAIAction('ideas')}>
-                    <Sparkles className="w-4 h-4 mr-2" />
+                  <DropdownMenuItem 
+                    onClick={() => handleAIAction('ideas')}
+                    disabled={isProcessing}
+                  >
+                    <Lightbulb className="w-4 h-4 mr-2" />
                     Generate Ideas
                   </DropdownMenuItem>
+                  
+                  {!aiSettings.apiKey && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <div className="px-2 py-2">
+                        <motion.div 
+                          initial={{ opacity: 0, y: -10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          className="text-xs text-muted-foreground bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-3"
+                        >
+                          <div className="flex items-start gap-2">
+                            <Settings className="w-3 h-3 mt-0.5 text-yellow-600 dark:text-yellow-400" />
+                            <div>
+                              <div className="font-medium text-yellow-900 dark:text-yellow-200 mb-1">
+                                API Key Required
+                              </div>
+                              <div className="text-yellow-800 dark:text-yellow-300">
+                                Click the settings icon to configure your AI provider and API key.
+                              </div>
+                            </div>
+                          </div>
+                        </motion.div>
+                      </div>
+                    </>
+                  )}
                 </DropdownMenuContent>
               </DropdownMenu>
 
@@ -1338,7 +1422,20 @@ export function RichTextEditor({
                       <Label htmlFor="provider">Provider</Label>
                       <Select 
                         value={aiSettings.provider} 
-                        onValueChange={(value: 'openai' | 'claude' | 'gemini' | 'cohere') => setAiSettings({ ...aiSettings, provider: value })}
+                        onValueChange={(value: 'openai' | 'claude' | 'gemini' | 'cohere') => {
+                          // Update model when provider changes
+                          const defaultModels = {
+                            openai: 'gpt-3.5-turbo',
+                            claude: 'claude-3-sonnet-20240229',
+                            gemini: 'gemini-2.0-flash',
+                            cohere: 'command'
+                          };
+                          setAiSettings({ 
+                            ...aiSettings, 
+                            provider: value,
+                            model: defaultModels[value] || 'gpt-3.5-turbo'
+                          });
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue />
@@ -1386,8 +1483,9 @@ export function RichTextEditor({
                           )}
                           {aiSettings.provider === 'gemini' && (
                             <>
-                              <SelectItem value="gemini-pro">Gemini Pro</SelectItem>
-                              <SelectItem value="gemini-pro-vision">Gemini Pro Vision</SelectItem>
+                              <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>
                             </>
                           )}
                           {aiSettings.provider === 'cohere' && (