@moontra/moonui-pro 2.8.9 → 2.8.10

package/dist/index.mjs

@@ -50379,13 +50379,7 @@ function RichTextEditor({
     color: true,
     ai: true
   },
-  aiConfig = {
-    provider: "openai",
-    apiKey: "",
-    model: "gpt-3.5-turbo",
-    temperature: 0.7,
-    maxTokens: 1e3
-  },
+  aiConfig = {},
   persistAISettings = true
 }) {
   const { hasProAccess, isLoading } = useSubscription();
@@ -50406,30 +50400,40 @@ function RichTextEditor({
     if (persistAISettings && typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("moonui-ai-settings");
+        console.log("[RichTextEditor] Loading AI settings from localStorage:", stored);
         if (stored) {
           const parsed = JSON.parse(stored);
-          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 ?? 1e3
+          console.log("[RichTextEditor] Parsed AI settings:", parsed);
+          const settings = {
+            provider: aiConfig.provider !== void 0 ? aiConfig.provider : parsed.provider || "openai",
+            apiKey: aiConfig.apiKey !== void 0 ? aiConfig.apiKey : parsed.apiKey || "",
+            model: aiConfig.model !== void 0 ? aiConfig.model : parsed.model || "gpt-3.5-turbo",
+            temperature: aiConfig.temperature !== void 0 ? aiConfig.temperature : parsed.temperature ?? 0.7,
+            maxTokens: aiConfig.maxTokens !== void 0 ? aiConfig.maxTokens : parsed.maxTokens ?? 1e3
           };
+          console.log("[RichTextEditor] Final settings with props override:", settings);
+          return settings;
         }
       } catch (e) {
         console.error("Failed to load AI settings from localStorage:", e);
       }
     }
-    return {
+    const defaultSettings = {
       provider: aiConfig.provider || "openai",
       apiKey: aiConfig.apiKey || "",
       model: aiConfig.model || "gpt-3.5-turbo",
       temperature: aiConfig.temperature ?? 0.7,
       maxTokens: aiConfig.maxTokens ?? 1e3
     };
+    console.log("[RichTextEditor] Using default settings:", defaultSettings);
+    return defaultSettings;
   });
   const [isAiSettingsOpen, setIsAiSettingsOpen] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [typingText, setTypingText] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const typingIntervalRef = useRef(null);
+  const [currentAction, setCurrentAction] = useState("");
   const [isSourceView, setIsSourceView] = useState(false);
   const [sourceContent, setSourceContent] = useState("");
   const [currentTextColor, setCurrentTextColor] = useState("#000000");
@@ -50440,6 +50444,13 @@ function RichTextEditor({
     }
     return "en";
   });
+  useEffect(() => {
+    return () => {
+      if (typingIntervalRef.current) {
+        clearTimeout(typingIntervalRef.current);
+      }
+    };
+  }, []);
   const slashCommands = [
     {
       id: "rewrite",
@@ -50710,6 +50721,7 @@ function RichTextEditor({
       });
       return;
     }
+    setCurrentAction(action);
     const processingToast = toast({
       title: "Processing with AI...",
       description: getActionDescription(action, targetLanguage),
@@ -50719,15 +50731,30 @@ function RichTextEditor({
     const result = await callAI(action, selectedText || editor.getText(), targetLanguage);
     processingToast.dismiss();
     if (result) {
+      setIsTyping(true);
+      setTypingText("");
       if (selectedText) {
-        editor.chain().focus().deleteSelection().insertContent(result).run();
-      } else {
-        editor.chain().focus().insertContent(result).run();
-      }
-      toast({
-        title: "AI action completed",
-        description: "Your text has been updated successfully."
-      });
+        editor.chain().focus().deleteSelection().run();
+      }
+      let currentIndex = 0;
+      const typeSpeed = 30;
+      const typeNextChar = () => {
+        if (currentIndex < result.length) {
+          const nextChar = result[currentIndex];
+          setTypingText((prev) => prev + nextChar);
+          editor.chain().focus().insertContent(nextChar).run();
+          currentIndex++;
+          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
+        } else {
+          setIsTyping(false);
+          setTypingText("");
+          toast({
+            title: "AI action completed",
+            description: "Your text has been updated successfully."
+          });
+        }
+      };
+      typeNextChar();
     }
   };
   const getActionDescription = (action, targetLanguage) => {
@@ -51267,10 +51294,10 @@ function RichTextEditor({
                 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 transition-colors",
-                disabled: isProcessing,
+                disabled: isProcessing || isTyping,
                 children: [
-                  isProcessing ? /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4 mr-1 animate-spin" }) : /* @__PURE__ */ jsx(Wand2, { className: "w-4 h-4 mr-1" }),
-                  "AI Tools"
+                  isProcessing || isTyping ? /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4 mr-1 animate-spin" }) : /* @__PURE__ */ jsx(Wand2, { className: "w-4 h-4 mr-1" }),
+                  isTyping ? "Typing..." : "AI Tools"
                 ]
               }
             ) }),
@@ -51283,7 +51310,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("rewrite"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4 mr-2" }),
                     "Rewrite Selection",
@@ -51295,7 +51322,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("improve"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 mr-2" }),
                     "Improve Writing"
@@ -51306,7 +51333,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("expand"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(Maximize, { className: "w-4 h-4 mr-2" }),
                     "Expand Text"
@@ -51317,7 +51344,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("summarize"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4 mr-2" }),
                     "Summarize"
@@ -51328,7 +51355,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("continue"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 mr-2" }),
                     "Continue Writing"
@@ -51344,7 +51371,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("tone_professional"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(Briefcase, { className: "w-4 h-4 mr-2" }),
                     "Make Professional"
@@ -51355,7 +51382,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("tone_casual"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(MessageSquare, { className: "w-4 h-4 mr-2" }),
                     "Make Casual"
@@ -51366,7 +51393,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("tone_friendly"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(Heart, { className: "w-4 h-4 mr-2" }),
                     "Make Friendly"
@@ -51377,7 +51404,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("tone_formal"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(GraduationCap, { className: "w-4 h-4 mr-2" }),
                     "Make Formal"
@@ -51393,7 +51420,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("fix"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 mr-2" }),
                     "Fix Grammar & Spelling",
@@ -51402,7 +51429,7 @@ function RichTextEditor({
                 }
               ),
               /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubPro, { children: [
-                /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubTriggerPro, { disabled: isProcessing, children: [
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubTriggerPro, { disabled: isProcessing || isTyping, children: [
                   /* @__PURE__ */ jsx(Languages, { className: "w-4 h-4 mr-2" }),
                   "Translate",
                   lastTranslateLanguage && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: SUPPORTED_LANGUAGES.find((l) => l.code === lastTranslateLanguage)?.nativeName || "English" })
@@ -51415,7 +51442,7 @@ function RichTextEditor({
                       localStorage.setItem("moonui-last-translate-language", language.code);
                       handleAIAction("translate", language.name);
                     },
-                    disabled: isProcessing,
+                    disabled: isProcessing || isTyping,
                     children: [
                       /* @__PURE__ */ jsx("span", { className: "text-sm", children: language.nativeName }),
                       /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: language.name }),
@@ -51429,7 +51456,7 @@ function RichTextEditor({
                 MoonUIDropdownMenuItemPro,
                 {
                   onClick: () => handleAIAction("ideas"),
-                  disabled: isProcessing,
+                  disabled: isProcessing || isTyping,
                   children: [
                     /* @__PURE__ */ jsx(Lightbulb, { className: "w-4 h-4 mr-2" }),
                     "Generate Ideas"
@@ -51805,7 +51832,7 @@ function RichTextEditor({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "overflow-auto",
+        className: "overflow-auto relative",
         style: { height: typeof height === "number" ? `${height}px` : height },
         children: isSourceView ? /* @__PURE__ */ jsx(
           "textarea",
@@ -51815,7 +51842,57 @@ function RichTextEditor({
             className: "w-full h-full p-4 font-mono text-sm resize-none focus:outline-none bg-gray-50 dark:bg-gray-900",
             placeholder: "HTML source code..."
           }
-        ) : /* @__PURE__ */ jsx(EditorContent, { editor })
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EditorContent, { editor }),
+          isProcessing && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              className: "absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50",
+              children: /* @__PURE__ */ jsx("div", { className: "bg-card border rounded-lg p-6 shadow-lg max-w-sm w-full mx-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-purple-200 dark:border-purple-800 rounded-full animate-pulse" }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Wand2, { className: "w-8 h-8 text-purple-600 dark:text-purple-400 animate-bounce" }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: "AI is thinking..." }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: getActionDescription(
+                    currentAction,
+                    lastTranslateLanguage
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex space-x-1", children: [
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      animate: { scale: [1, 1.5, 1] },
+                      transition: { duration: 0.6, repeat: Infinity, delay: 0 },
+                      className: "w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      animate: { scale: [1, 1.5, 1] },
+                      transition: { duration: 0.6, repeat: Infinity, delay: 0.2 },
+                      className: "w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      animate: { scale: [1, 1.5, 1] },
+                      transition: { duration: 0.6, repeat: Infinity, delay: 0.4 },
+                      className: "w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
+                    }
+                  )
+                ] })
+              ] }) })
+            }
+          )
+        ] })
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.9",
+  "version": "2.8.10",
   "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/rich-text-editor/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -300,13 +300,7 @@ export function RichTextEditor({
     color: true,
     ai: true,
   },
-  aiConfig = {
-    provider: 'openai',
-    apiKey: '',
-    model: 'gpt-3.5-turbo',
-    temperature: 0.7,
-    maxTokens: 1000,
-  },
+  aiConfig = {},
   persistAISettings = true,
 }: RichTextEditorProps) {
   // Pro access kontrolü
@@ -348,16 +342,20 @@ export function RichTextEditor({
     if (persistAISettings && typeof window !== 'undefined') {
       try {
         const stored = localStorage.getItem('moonui-ai-settings');
+        console.log('[RichTextEditor] Loading AI settings from localStorage:', stored);
         if (stored) {
           const parsed = JSON.parse(stored);
+          console.log('[RichTextEditor] Parsed AI settings:', parsed);
           // Props'tan gelen değerler her zaman öncelikli
-          return {
-            provider: (aiConfig.provider || parsed.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
-            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,
+          const settings = {
+            provider: (aiConfig.provider !== undefined ? aiConfig.provider : parsed.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
+            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,
           };
+          console.log('[RichTextEditor] Final settings with props override:', settings);
+          return settings;
         }
       } catch (e) {
         console.error('Failed to load AI settings from localStorage:', e);
@@ -365,16 +363,22 @@ export function RichTextEditor({
     }
     
     // LocalStorage yoksa veya persist kapalıysa props/varsayılan değerleri kullan
-    return {
+    const defaultSettings = {
       provider: (aiConfig.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
       apiKey: aiConfig.apiKey || '',
       model: aiConfig.model || 'gpt-3.5-turbo',
       temperature: aiConfig.temperature ?? 0.7,
       maxTokens: aiConfig.maxTokens ?? 1000,
     };
+    console.log('[RichTextEditor] Using default settings:', defaultSettings);
+    return defaultSettings;
   });
   const [isAiSettingsOpen, setIsAiSettingsOpen] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [typingText, setTypingText] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const typingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const [currentAction, setCurrentAction] = useState('');
   const [isSourceView, setIsSourceView] = useState(false);
   const [sourceContent, setSourceContent] = useState('');
   const [currentTextColor, setCurrentTextColor] = useState('#000000');
@@ -386,6 +390,15 @@ export function RichTextEditor({
     }
     return 'en';
   });
+  
+  // Clean up typewriter effect on unmount
+  useEffect(() => {
+    return () => {
+      if (typingIntervalRef.current) {
+        clearTimeout(typingIntervalRef.current);
+      }
+    };
+  }, []);
 
   // Slash commands tanımları
   const slashCommands: SlashCommand[] = [
@@ -668,6 +681,9 @@ export function RichTextEditor({
       return;
     }
 
+    // Set current action for UI
+    setCurrentAction(action);
+
     // Show processing toast
     const processingToast = toast({
       title: "Processing with AI...",
@@ -681,17 +697,39 @@ export function RichTextEditor({
     processingToast.dismiss();
     
     if (result) {
+      // Start typewriter effect
+      setIsTyping(true);
+      setTypingText('');
+      
       if (selectedText) {
-        editor.chain().focus().deleteSelection().insertContent(result).run();
-      } else {
-        editor.chain().focus().insertContent(result).run();
+        editor.chain().focus().deleteSelection().run();
       }
       
-      // Success toast
-      toast({
-        title: "AI action completed",
-        description: "Your text has been updated successfully.",
-      });
+      let currentIndex = 0;
+      const typeSpeed = 30; // ms per character
+      
+      const typeNextChar = () => {
+        if (currentIndex < result.length) {
+          const nextChar = result[currentIndex];
+          setTypingText(prev => prev + nextChar);
+          editor.chain().focus().insertContent(nextChar).run();
+          currentIndex++;
+          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
+        } else {
+          // Typing complete
+          setIsTyping(false);
+          setTypingText('');
+          
+          // Success toast
+          toast({
+            title: "AI action completed",
+            description: "Your text has been updated successfully.",
+          });
+        }
+      };
+      
+      // Start typing
+      typeNextChar();
     }
   };
 
@@ -1316,14 +1354,14 @@ export function RichTextEditor({
                     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 transition-colors"
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
-                    {isProcessing ? (
+                    {isProcessing || isTyping ? (
                       <RefreshCw className="w-4 h-4 mr-1 animate-spin" />
                     ) : (
                       <Wand2 className="w-4 h-4 mr-1" />
                     )}
-                    AI Tools
+                    {isTyping ? 'Typing...' : 'AI Tools'}
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-64">
@@ -1333,7 +1371,7 @@ export function RichTextEditor({
                   </div>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('rewrite')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <RefreshCw className="w-4 h-4 mr-2" />
                     Rewrite Selection
@@ -1341,28 +1379,28 @@ export function RichTextEditor({
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('improve')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <Sparkles className="w-4 h-4 mr-2" />
                     Improve Writing
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('expand')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <Maximize className="w-4 h-4 mr-2" />
                     Expand Text
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('summarize')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <FileText className="w-4 h-4 mr-2" />
                     Summarize
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('continue')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <Plus className="w-4 h-4 mr-2" />
                     Continue Writing
@@ -1375,28 +1413,28 @@ export function RichTextEditor({
                   </div>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('tone_professional')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <Briefcase className="w-4 h-4 mr-2" />
                     Make Professional
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('tone_casual')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <MessageSquare className="w-4 h-4 mr-2" />
                     Make Casual
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('tone_friendly')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <Heart className="w-4 h-4 mr-2" />
                     Make Friendly
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('tone_formal')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <GraduationCap className="w-4 h-4 mr-2" />
                     Make Formal
@@ -1409,14 +1447,14 @@ export function RichTextEditor({
                   </div>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('fix')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <Check className="w-4 h-4 mr-2" />
                     Fix Grammar & Spelling
                     <span className="ml-auto text-xs text-muted-foreground">F7</span>
                   </DropdownMenuItem>
                   <DropdownMenuSub>
-                    <DropdownMenuSubTrigger disabled={isProcessing}>
+                    <DropdownMenuSubTrigger disabled={isProcessing || isTyping}>
                       <Languages className="w-4 h-4 mr-2" />
                       Translate
                       {lastTranslateLanguage && (
@@ -1436,7 +1474,7 @@ export function RichTextEditor({
                             // Çeviriyi yap
                             handleAIAction('translate', language.name);
                           }}
-                          disabled={isProcessing}
+                          disabled={isProcessing || isTyping}
                         >
                           <span className="text-sm">{language.nativeName}</span>
                           <span className="ml-auto text-xs text-muted-foreground">{language.name}</span>
@@ -1449,7 +1487,7 @@ export function RichTextEditor({
                   </DropdownMenuSub>
                   <DropdownMenuItem 
                     onClick={() => handleAIAction('ideas')}
-                    disabled={isProcessing}
+                    disabled={isProcessing || isTyping}
                   >
                     <Lightbulb className="w-4 h-4 mr-2" />
                     Generate Ideas
@@ -1850,7 +1888,7 @@ export function RichTextEditor({
 
       {/* Editor */}
       <div 
-        className="overflow-auto"
+        className="overflow-auto relative"
         style={{ height: typeof height === 'number' ? `${height}px` : height }}
       >
         {isSourceView ? (
@@ -1861,7 +1899,55 @@ export function RichTextEditor({
             placeholder="HTML source code..."
           />
         ) : (
-          <EditorContent editor={editor} />
+          <>
+            <EditorContent editor={editor} />
+            {/* AI Processing Overlay */}
+            {isProcessing && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50"
+              >
+                <div className="bg-card border rounded-lg p-6 shadow-lg max-w-sm w-full mx-4">
+                  <div className="flex flex-col items-center space-y-4">
+                    <div className="relative">
+                      <div className="w-16 h-16 border-4 border-purple-200 dark:border-purple-800 rounded-full animate-pulse"></div>
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <Wand2 className="w-8 h-8 text-purple-600 dark:text-purple-400 animate-bounce" />
+                      </div>
+                    </div>
+                    <div className="text-center space-y-2">
+                      <h3 className="font-semibold text-lg">AI is thinking...</h3>
+                      <p className="text-sm text-muted-foreground">
+                        {getActionDescription(
+                          currentAction, 
+                          lastTranslateLanguage
+                        )}
+                      </p>
+                    </div>
+                    <div className="flex space-x-1">
+                      <motion.div
+                        animate={{ scale: [1, 1.5, 1] }}
+                        transition={{ duration: 0.6, repeat: Infinity, delay: 0 }}
+                        className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
+                      />
+                      <motion.div
+                        animate={{ scale: [1, 1.5, 1] }}
+                        transition={{ duration: 0.6, repeat: Infinity, delay: 0.2 }}
+                        className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
+                      />
+                      <motion.div
+                        animate={{ scale: [1, 1.5, 1] }}
+                        transition={{ duration: 0.6, repeat: Infinity, delay: 0.4 }}
+                        className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </>
         )}
       </div>
     </div>