@moontra/moonui-pro 2.8.4 → 2.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "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

@@ -250,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,8 @@ 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 { Checkbox } from '../ui/checkbox';
+import { createAIProvider, type AIProvider as AIProviderInterface } from '../../lib/ai-providers';
 
 // Type definitions for AI functionality
 type AIProvider = 'openai' | 'anthropic' | 'gemini' | 'claude' | 'cohere'
@@ -116,64 +124,45 @@ 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';
 import './table-styles.css';
 
+export interface AIConfig {
+  provider?: 'openai' | 'claude' | 'gemini' | 'cohere';
+  apiKey?: string;
+  model?: string;
+  temperature?: number;
+  maxTokens?: number;
+  endpoint?: string; // For server-side proxy
+}
+
 interface RichTextEditorProps {
   value?: string;
   onChange?: (value: string) => void;
@@ -196,13 +185,8 @@ interface RichTextEditorProps {
     color?: boolean;
     ai?: boolean;
   };
-  aiConfig?: {
-    provider?: 'openai' | 'claude' | 'gemini' | 'cohere';
-    apiKey?: string;
-    model?: string;
-    temperature?: number;
-    maxTokens?: number;
-  };
+  aiConfig?: AIConfig;
+  persistAISettings?: boolean;
 }
 
 
@@ -298,10 +282,11 @@ export function RichTextEditor({
   aiConfig = {
     provider: 'openai',
     apiKey: '',
-    model: 'gpt-4',
+    model: 'gpt-3.5-turbo',
     temperature: 0.7,
     maxTokens: 1000,
   },
+  persistAISettings = true,
 }: RichTextEditorProps) {
   // Pro access kontrolü
   const { hasProAccess, isLoading } = useSubscription();
@@ -337,12 +322,35 @@ export function RichTextEditor({
     );
   }
 
-  const [aiSettings, setAiSettings] = useState<AISettingsType>({
-    provider: aiConfig.provider || 'openai',
-    apiKey: aiConfig.apiKey || '',
-    model: aiConfig.model || 'gpt-4',
-    temperature: aiConfig.temperature || 0.7,
-    maxTokens: aiConfig.maxTokens || 1000,
+  const [aiSettings, setAiSettings] = useState<AISettingsType>(() => {
+    // Öncelik sırası: Props > LocalStorage > Varsayılan
+    if (persistAISettings) {
+      try {
+        const stored = localStorage.getItem('moonui-ai-settings');
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          // Props'tan gelen değerler her zaman öncelikli
+          return {
+            provider: aiConfig.provider || parsed.provider || 'openai',
+            apiKey: aiConfig.apiKey || parsed.apiKey || '',
+            model: aiConfig.model || parsed.model || 'gpt-3.5-turbo',
+            temperature: aiConfig.temperature ?? parsed.temperature ?? 0.7,
+            maxTokens: aiConfig.maxTokens ?? parsed.maxTokens ?? 1000,
+          };
+        }
+      } catch (e) {
+        console.error('Failed to load AI settings from localStorage:', e);
+      }
+    }
+    
+    // LocalStorage yoksa veya persist kapalıysa props/varsayılan değerleri kullan
+    return {
+      provider: aiConfig.provider || 'openai',
+      apiKey: aiConfig.apiKey || '',
+      model: aiConfig.model || 'gpt-3.5-turbo',
+      temperature: aiConfig.temperature ?? 0.7,
+      maxTokens: aiConfig.maxTokens ?? 1000,
+    };
   });
   const [isAiSettingsOpen, setIsAiSettingsOpen] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
@@ -557,7 +565,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 +585,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 +612,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 +640,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 +1287,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 +1298,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 +1451,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 +1512,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' && (
@@ -1425,8 +1552,64 @@ export function RichTextEditor({
                       </div>
                     </div>
                   </div>
-                  <div className="flex justify-end">
+                  {persistAISettings && (
+                    <div className="space-y-4">
+                      <div className="flex items-start space-x-2">
+                        <Checkbox 
+                          id="rememberSettings"
+                          defaultChecked
+                          onCheckedChange={(checked) => {
+                            if (!checked) {
+                              localStorage.removeItem('moonui-ai-settings');
+                            }
+                          }}
+                        />
+                        <div className="grid gap-1.5 leading-none">
+                          <Label
+                            htmlFor="rememberSettings"
+                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                          >
+                            Remember my settings
+                          </Label>
+                          <p className="text-xs text-muted-foreground">
+                            Save settings locally for future sessions
+                          </p>
+                        </div>
+                      </div>
+                      
+                      {aiSettings.apiKey && (
+                        <div className="rounded-md bg-yellow-50 dark:bg-yellow-900/10 p-3">
+                          <div className="flex">
+                            <div className="flex-shrink-0">
+                              <Settings className="h-4 w-4 text-yellow-400" />
+                            </div>
+                            <div className="ml-3">
+                              <p className="text-xs text-yellow-800 dark:text-yellow-200">
+                                <strong>Security Notice:</strong> API keys will be stored in your browser's local storage. 
+                                For production use, consider using a server-side proxy.
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  
+                  <div className="flex justify-end gap-2">
+                    <Button
+                      variant="outline"
+                      onClick={() => setIsAiSettingsOpen(false)}
+                    >
+                      Cancel
+                    </Button>
                     <Button onClick={() => {
+                      // LocalStorage'a kaydet
+                      if (persistAISettings) {
+                        const toStore = { ...aiSettings };
+                        // Güvenlik için API key'i opsiyonel olarak kaydet
+                        localStorage.setItem('moonui-ai-settings', JSON.stringify(toStore));
+                      }
+                      
                       setIsAiSettingsOpen(false);
                       toast({
                         title: "Settings saved",