@moontra/moonui-pro 2.8.9 → 2.8.11

package/dist/index.mjs

@@ -4044,7 +4044,7 @@ var me = t.forwardRef((r2, o) => {
     var e;
     return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
   }
-  function X19(e) {
+  function X20(e) {
     let s = V()[e];
     s && E.setState("value", s.getAttribute(T));
   }
@@ -4059,10 +4059,10 @@ var me = t.forwardRef((r2, o) => {
       s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
     i ? E.setState("value", i.getAttribute(T)) : Q(e);
   }
-  let oe = () => X19(V().length - 1), ie3 = (e) => {
+  let oe = () => X20(V().length - 1), ie3 = (e) => {
     e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
   }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X19(0) : e.altKey ? re(-1) : Q(-1);
+    e.preventDefault(), e.metaKey ? X20(0) : e.altKey ? re(-1) : Q(-1);
   };
   return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
@@ -4089,7 +4089,7 @@ var me = t.forwardRef((r2, o) => {
           break;
         }
         case "Home": {
-          e.preventDefault(), X19(0);
+          e.preventDefault(), X20(0);
           break;
         }
         case "End": {
@@ -50283,53 +50283,78 @@ var EditorColorPicker = ({
   onColorSelect,
   currentColor = "#000000"
 }) => {
-  return /* @__PURE__ */ jsx(
-    MoonUIColorPickerPro,
-    {
-      value: currentColor,
-      onChange: onColorSelect,
-      showInput: true,
-      showPresets: true,
-      size: "sm",
-      presets: [
-        "#000000",
-        "#ffffff",
-        "#ff0000",
-        "#00ff00",
-        "#0000ff",
-        "#ffff00",
-        "#ff00ff",
-        "#00ffff",
-        "#ff8800",
-        "#8800ff",
-        "#88ff00",
-        "#0088ff",
-        "#ff0088",
-        "#00ff88",
-        "#888888",
-        "#f87171",
-        "#fb923c",
-        "#fbbf24",
-        "#facc15",
-        "#a3e635",
-        "#4ade80",
-        "#34d399",
-        "#2dd4bf",
-        "#22d3ee",
-        "#38bdf8",
-        "#60a5fa",
-        "#818cf8",
-        "#a78bfa",
-        "#c084fc",
-        "#e879f9",
-        "#f472b6",
-        "#fb7185",
-        "#f43f5e",
-        "#ef4444",
-        "#dc2626"
-      ]
-    }
-  );
+  const [showAdvanced, setShowAdvanced] = t__default.useState(false);
+  const quickColors = [
+    "#000000",
+    // Black
+    "#ef4444",
+    // Red
+    "#f59e0b",
+    // Orange
+    "#10b981",
+    // Green  
+    "#3b82f6",
+    // Blue
+    "#8b5cf6",
+    // Purple
+    "#6b7280",
+    // Gray
+    "#ec4899"
+    // Pink
+  ];
+  if (showAdvanced) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-4 w-64", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Choose Color" }),
+        /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => setShowAdvanced(false),
+            children: "Back"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        MoonUIColorPickerPro,
+        {
+          value: currentColor,
+          onChange: (color) => {
+            onColorSelect(color);
+            setShowAdvanced(false);
+          },
+          showInput: true,
+          showPresets: false,
+          size: "sm"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "p-3 w-36", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+    quickColors.map((color) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onColorSelect(color),
+        className: cn(
+          "w-10 h-10 rounded-md border-2 hover:scale-110 transition-transform",
+          currentColor === color ? "border-primary" : "border-transparent"
+        ),
+        style: { backgroundColor: color },
+        title: color
+      },
+      color
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setShowAdvanced(true),
+        className: "w-10 h-10 rounded-md border-2 border-dashed border-muted-foreground/50 hover:border-primary transition-colors flex items-center justify-center",
+        title: "More colors",
+        children: /* @__PURE__ */ jsx(Palette, { className: "w-5 h-5 text-muted-foreground" })
+      }
+    )
+  ] }) });
 };
 var ToolbarButton = ({
   active,
@@ -50379,13 +50404,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 +50425,42 @@ 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 [remainingText, setRemainingText] = useState("");
+  const isTypingRef = useRef(false);
   const [isSourceView, setIsSourceView] = useState(false);
   const [sourceContent, setSourceContent] = useState("");
   const [currentTextColor, setCurrentTextColor] = useState("#000000");
@@ -50440,6 +50471,27 @@ function RichTextEditor({
     }
     return "en";
   });
+  useEffect(() => {
+    return () => {
+      if (typingIntervalRef.current) {
+        clearTimeout(typingIntervalRef.current);
+      }
+    };
+  }, []);
+  const stopTyping = () => {
+    if (typingIntervalRef.current) {
+      clearTimeout(typingIntervalRef.current);
+      typingIntervalRef.current = null;
+    }
+    setIsTyping(false);
+    isTypingRef.current = false;
+    setTypingText("");
+    setRemainingText("");
+    toast({
+      title: "AI typing stopped",
+      description: "The AI response was interrupted."
+    });
+  };
   const slashCommands = [
     {
       id: "rewrite",
@@ -50710,6 +50762,7 @@ function RichTextEditor({
       });
       return;
     }
+    setCurrentAction(action);
     const processingToast = toast({
       title: "Processing with AI...",
       description: getActionDescription(action, targetLanguage),
@@ -50719,15 +50772,36 @@ function RichTextEditor({
     const result = await callAI(action, selectedText || editor.getText(), targetLanguage);
     processingToast.dismiss();
     if (result) {
+      setIsTyping(true);
+      isTypingRef.current = 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 && isTypingRef.current) {
+          const nextChar = result[currentIndex];
+          setTypingText((prev) => prev + nextChar);
+          editor.chain().focus().insertContent(nextChar).run();
+          currentIndex++;
+          setRemainingText(result.substring(currentIndex));
+          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
+        } else {
+          setIsTyping(false);
+          isTypingRef.current = false;
+          setTypingText("");
+          setRemainingText("");
+          if (currentIndex >= result.length) {
+            toast({
+              title: "AI action completed",
+              description: "Your text has been updated successfully."
+            });
+          }
+        }
+      };
+      typeNextChar();
     }
   };
   const getActionDescription = (action, targetLanguage) => {
@@ -51267,13 +51341,24 @@ 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"
                 ]
               }
             ) }),
+            isTyping && /* @__PURE__ */ jsx(
+              MoonUIButtonPro,
+              {
+                variant: "destructive",
+                size: "sm",
+                className: "h-8 px-2",
+                onClick: stopTyping,
+                title: "Stop AI typing",
+                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+              }
+            ),
             /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { className: "w-64", children: [
               /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Wand2, { className: "w-3 h-3" }),
@@ -51283,7 +51368,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 +51380,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 +51391,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 +51402,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 +51413,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 +51429,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 +51440,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 +51451,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 +51462,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 +51478,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 +51487,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 +51500,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 +51514,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 +51890,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 +51900,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.11",
   "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';
@@ -73,7 +73,8 @@ import {
   Heart,
   GraduationCap,
   Zap,
-  Lightbulb
+  Lightbulb,
+  X
 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
@@ -218,23 +219,71 @@ const EditorColorPicker = ({
   onColorSelect: (color: string) => void;
   currentColor?: string;
 }) => {
+  const [showAdvanced, setShowAdvanced] = React.useState(false);
+  
+  // Quick colors - 3x3 grid of 8 colors + 1 advanced button
+  const quickColors = [
+    '#000000', // Black
+    '#ef4444', // Red
+    '#f59e0b', // Orange
+    '#10b981', // Green  
+    '#3b82f6', // Blue
+    '#8b5cf6', // Purple
+    '#6b7280', // Gray
+    '#ec4899', // Pink
+  ];
+  
+  if (showAdvanced) {
+    return (
+      <div className="p-4 w-64">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-medium">Choose Color</span>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setShowAdvanced(false)}
+          >
+            Back
+          </Button>
+        </div>
+        <ColorPicker
+          value={currentColor}
+          onChange={(color) => {
+            onColorSelect(color);
+            setShowAdvanced(false);
+          }}
+          showInput={true}
+          showPresets={false}
+          size="sm"
+        />
+      </div>
+    );
+  }
+  
   return (
-    <ColorPicker
-      value={currentColor}
-      onChange={onColorSelect}
-      showInput={true}
-      showPresets={true}
-      size="sm"
-      presets={[
-        '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
-        '#ffff00', '#ff00ff', '#00ffff', '#ff8800', '#8800ff',
-        '#88ff00', '#0088ff', '#ff0088', '#00ff88', '#888888',
-        '#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635',
-        '#4ade80', '#34d399', '#2dd4bf', '#22d3ee', '#38bdf8',
-        '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9',
-        '#f472b6', '#fb7185', '#f43f5e', '#ef4444', '#dc2626',
-      ]}
-    />
+    <div className="p-3 w-36">
+      <div className="grid grid-cols-3 gap-2">
+        {quickColors.map((color) => (
+          <button
+            key={color}
+            onClick={() => onColorSelect(color)}
+            className={cn(
+              "w-10 h-10 rounded-md border-2 hover:scale-110 transition-transform",
+              currentColor === color ? "border-primary" : "border-transparent"
+            )}
+            style={{ backgroundColor: color }}
+            title={color}
+          />
+        ))}
+        <button
+          onClick={() => setShowAdvanced(true)}
+          className="w-10 h-10 rounded-md border-2 border-dashed border-muted-foreground/50 hover:border-primary transition-colors flex items-center justify-center"
+          title="More colors"
+        >
+          <Palette className="w-5 h-5 text-muted-foreground" />
+        </button>
+      </div>
+    </div>
   );
 };
 
@@ -300,13 +349,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 +391,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 +412,24 @@ 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 [remainingText, setRemainingText] = useState(''); // To store remaining text when stopped
+  const isTypingRef = useRef(false); // Ref to track typing state in closure
   const [isSourceView, setIsSourceView] = useState(false);
   const [sourceContent, setSourceContent] = useState('');
   const [currentTextColor, setCurrentTextColor] = useState('#000000');
@@ -386,6 +441,31 @@ export function RichTextEditor({
     }
     return 'en';
   });
+  
+  // Clean up typewriter effect on unmount
+  useEffect(() => {
+    return () => {
+      if (typingIntervalRef.current) {
+        clearTimeout(typingIntervalRef.current);
+      }
+    };
+  }, []);
+  
+  // Stop typing function
+  const stopTyping = () => {
+    if (typingIntervalRef.current) {
+      clearTimeout(typingIntervalRef.current);
+      typingIntervalRef.current = null;
+    }
+    setIsTyping(false);
+    isTypingRef.current = false;
+    setTypingText('');
+    setRemainingText('');
+    toast({
+      title: "AI typing stopped",
+      description: "The AI response was interrupted.",
+    });
+  };
 
   // Slash commands tanımları
   const slashCommands: SlashCommand[] = [
@@ -668,6 +748,9 @@ export function RichTextEditor({
       return;
     }
 
+    // Set current action for UI
+    setCurrentAction(action);
+
     // Show processing toast
     const processingToast = toast({
       title: "Processing with AI...",
@@ -681,17 +764,45 @@ export function RichTextEditor({
     processingToast.dismiss();
     
     if (result) {
+      // Start typewriter effect
+      setIsTyping(true);
+      isTypingRef.current = 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 && isTypingRef.current) {
+          const nextChar = result[currentIndex];
+          setTypingText(prev => prev + nextChar);
+          editor.chain().focus().insertContent(nextChar).run();
+          currentIndex++;
+          setRemainingText(result.substring(currentIndex));
+          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
+        } else {
+          // Typing complete or stopped
+          setIsTyping(false);
+          isTypingRef.current = false;
+          setTypingText('');
+          setRemainingText('');
+          
+          if (currentIndex >= result.length) {
+            // Success toast only if completed
+            toast({
+              title: "AI action completed",
+              description: "Your text has been updated successfully.",
+            });
+          }
+        }
+      };
+      
+      // Start typing
+      typeNextChar();
     }
   };
 
@@ -1316,16 +1427,27 @@ 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>
+                {isTyping && (
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="h-8 px-2"
+                    onClick={stopTyping}
+                    title="Stop AI typing"
+                  >
+                    <X className="w-4 h-4" />
+                  </Button>
+                )}
                 <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" />
@@ -1333,7 +1455,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 +1463,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 +1497,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 +1531,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 +1558,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 +1571,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 +1972,7 @@ export function RichTextEditor({
 
       {/* Editor */}
       <div 
-        className="overflow-auto"
+        className="overflow-auto relative"
         style={{ height: typeof height === 'number' ? `${height}px` : height }}
       >
         {isSourceView ? (
@@ -1861,7 +1983,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>