@moontra/moonui-pro 2.20.0 → 2.20.2

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

@@ -21,7 +21,7 @@ import TaskItem from '@tiptap/extension-task-item';
 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 { SlashCommandsExtension, type SlashCommand } from './slash-commands-extension';
 import { motion } from 'framer-motion';
 
 // Import pro access hooks
@@ -138,14 +138,7 @@ const SUPPORTED_LANGUAGES = [
   { code: 'nl', name: 'Dutch', nativeName: 'Nederlands' },
 ];
 
-interface SlashCommand {
-  id?: string
-  title?: string
-  description: string
-  command: string
-  icon?: string
-  action: (text: string) => Promise<{ text: string; error?: string }> | void
-}
+// Use SlashCommand from slash-commands-extension.ts
 
 // Get AI provider instance
 const getAIProvider = (settings: AISettingsType): AIProviderInterface | null => {
@@ -177,7 +170,7 @@ const getAIProvider = (settings: AISettingsType): AIProviderInterface | null =>
 import './slash-commands.css';
 import './table-styles.css';
 
-export interface AIConfig {
+export interface EditorAIConfig {
   provider?: 'openai' | 'claude' | 'gemini' | 'cohere';
   apiKey?: string;
   model?: string;
@@ -208,7 +201,7 @@ interface RichTextEditorProps {
     color?: boolean;
     ai?: boolean;
   };
-  aiConfig?: AIConfig;
+  aiConfig?: EditorAIConfig;
   persistAISettings?: boolean;
 }
 
@@ -392,10 +385,8 @@ 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
           const settings = {
             provider: (aiConfig.provider !== undefined ? aiConfig.provider : parsed.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
@@ -404,7 +395,6 @@ export function RichTextEditor({
             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) {
@@ -420,7 +410,6 @@ export function RichTextEditor({
       temperature: aiConfig.temperature ?? 0.7,
       maxTokens: aiConfig.maxTokens ?? 1000,
     };
-    console.log('[RichTextEditor] Using default settings:', defaultSettings);
     return defaultSettings;
   });
   const [isAiSettingsOpen, setIsAiSettingsOpen] = useState(false);
@@ -714,16 +703,16 @@ export function RichTextEditor({
           const selectedText = editor.state.doc.textBetween(from, to, ' ');
           
           setIsProcessing(true);
-          setCurrentAction(command.id);
+          setCurrentAction(command.id || '');
           
           try {
-            const response = await command.action(selectedText || editor.getText());
+            const response = command.action ? await command.action(selectedText || editor.getText()) : { text: '', error: 'No action defined' };
             if (response.text) {
               // Check if this command should use modal preview
-              if (shouldUseModal(command.id)) {
+              if (shouldUseModal(command.id || '')) {
                 // Open preview modal
                 setPreviewContent(response.text);
-                setPreviewAction(command.id);
+                setPreviewAction(command.id || '');
                 setPreviewOriginalText(selectedText || editor.getText());
                 setIsAiPreviewOpen(true);
               } else {
@@ -1762,7 +1751,7 @@ export function RichTextEditor({
                     <Settings className="w-4 h-4" />
                   </ToolbarButton>
                 </DialogTrigger>
-                <DialogContent className="sm:max-w-[425px]">
+                <DialogContent className="sm:max-w-[425px] overflow-visible" style={{ zIndex: 9998 }}>
                   <DialogHeader>
                     <DialogTitle>AI Settings</DialogTitle>
                     <DialogDescription>
@@ -1775,11 +1764,12 @@ export function RichTextEditor({
                       <Select 
                         value={aiSettings.provider} 
                         onValueChange={(value: 'openai' | 'claude' | 'gemini' | 'cohere') => {
+                          console.log('Provider changed to:', value);
                           // Update model when provider changes
                           const defaultModels = {
                             openai: 'gpt-3.5-turbo',
                             claude: 'claude-3-sonnet-20240229',
-                            gemini: 'gemini-2.0-flash',
+                            gemini: 'gemini-2.0-flash-exp',
                             cohere: 'command'
                           };
                           const newSettings = { 
@@ -1797,7 +1787,7 @@ export function RichTextEditor({
                         <SelectTrigger>
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent>
+                        <SelectContent className="z-[9999]" sideOffset={5}>
                           <SelectItem value="openai">OpenAI</SelectItem>
                           <SelectItem value="claude">Claude (Anthropic)</SelectItem>
                           <SelectItem value="gemini">Gemini (Google)</SelectItem>
@@ -1838,25 +1828,33 @@ export function RichTextEditor({
                         <SelectTrigger>
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent>
+                        <SelectContent className="z-[9999]" sideOffset={5}>
                           {aiSettings.provider === 'openai' && (
                             <>
+                              <SelectItem value="gpt-4-turbo-preview">GPT-4 Turbo</SelectItem>
                               <SelectItem value="gpt-4">GPT-4</SelectItem>
                               <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
+                              <SelectItem value="gpt-3.5-turbo-16k">GPT-3.5 Turbo 16K</SelectItem>
                             </>
                           )}
                           {aiSettings.provider === 'claude' && (
                             <>
-                              <SelectItem value="claude-3-opus">Claude 3 Opus</SelectItem>
-                              <SelectItem value="claude-3-sonnet">Claude 3 Sonnet</SelectItem>
-                              <SelectItem value="claude-3-haiku">Claude 3 Haiku</SelectItem>
+                              <SelectItem value="claude-3-opus-20240229">Claude 3 Opus</SelectItem>
+                              <SelectItem value="claude-3-sonnet-20240229">Claude 3 Sonnet</SelectItem>
+                              <SelectItem value="claude-3-haiku-20240307">Claude 3 Haiku</SelectItem>
+                              <SelectItem value="claude-2.1">Claude 2.1</SelectItem>
+                              <SelectItem value="claude-2.0">Claude 2.0</SelectItem>
                             </>
                           )}
                           {aiSettings.provider === 'gemini' && (
                             <>
-                              <SelectItem value="gemini-2.0-flash">Gemini 2.0 Flash</SelectItem>
-                              <SelectItem value="gemini-1.5-flash">Gemini 1.5 Flash</SelectItem>
+                              <SelectItem value="gemini-2.0-flash-exp">Gemini 2.0 Flash (Experimental)</SelectItem>
+                              <SelectItem value="gemini-2.0-flash-thinking-exp">Gemini 2.0 Flash Thinking (Experimental)</SelectItem>
                               <SelectItem value="gemini-1.5-pro">Gemini 1.5 Pro</SelectItem>
+                              <SelectItem value="gemini-1.5-flash">Gemini 1.5 Flash</SelectItem>
+                              <SelectItem value="gemini-1.5-flash-8b">Gemini 1.5 Flash 8B</SelectItem>
+                              <SelectItem value="gemini-pro">Gemini Pro</SelectItem>
+                              <SelectItem value="gemini-pro-vision">Gemini Pro Vision</SelectItem>
                             </>
                           )}
                           {aiSettings.provider === 'cohere' && (

package/src/components/rich-text-editor/slash-commands-extension.ts

@@ -1,7 +1,15 @@
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
-import type { SlashCommand } from '@/lib/ai-providers';
+
+// SlashCommand type definition
+export interface SlashCommand {
+  id?: string;
+  command: string;
+  description: string;
+  icon?: string;
+  action?: (text: string) => Promise<{ text?: string; error?: string }>;
+}
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -29,6 +37,7 @@ export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
   },
 
   addCommands() {
+    const extension = this;
     return {
       selectSlashCommand: (index: number) => ({ editor }) => {
         const state = slashCommandsPluginKey.getState(editor.state);
@@ -43,7 +52,7 @@ export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
             .run();
           
           // Execute the command
-          this.options.onSelectCommand(command);
+          extension.options.onSelectCommand(command);
           
           return true;
         }
@@ -98,6 +107,7 @@ export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
   },
 
   addProseMirrorPlugins() {
+    const extension = this;
     return [
       new Plugin({
         key: slashCommandsPluginKey,
@@ -136,7 +146,7 @@ export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
             
             if (match) {
               const query = match[1].toLowerCase();
-              const filteredCommands = this.options.commands.filter(cmd => 
+              const filteredCommands = extension.options.commands.filter((cmd: SlashCommand) => 
                 cmd.command.toLowerCase().includes(query) ||
                 cmd.description.toLowerCase().includes(query)
               );
@@ -159,7 +169,7 @@ export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
         props: {
           decorations(state) {
             const pluginState = this.getState(state);
-            if (!pluginState.active) {
+            if (!pluginState || !pluginState.active) {
               return DecorationSet.empty;
             }
 
@@ -169,7 +179,7 @@ export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
               const container = document.createElement('div');
               container.className = 'slash-commands-menu';
 
-              pluginState.filteredCommands.forEach((cmd, index) => {
+              pluginState.filteredCommands.forEach((cmd: SlashCommand, index: number) => {
                 const item = document.createElement('div');
                 item.className = `slash-command-item ${index === pluginState.selectedIndex ? 'selected' : ''}`;
                 

package/src/components/sidebar/index.tsx

@@ -71,11 +71,15 @@ const SearchInput = React.memo(({
       clearTimeout(timeoutRef.current)
     }
     
-    // Debounce the parent update
+    // Debounce the parent update with shorter delay
     timeoutRef.current = setTimeout(() => {
       onSearchChange(newValue)
-    }, 300)
-  }, [onSearchChange])
+      // Keep focus on input after state update
+      if (searchInputRef.current) {
+        searchInputRef.current.focus()
+      }
+    }, 150)
+  }, [onSearchChange, searchInputRef])
   
   // Cleanup timeout on unmount
   useEffect(() => {
@@ -112,6 +116,8 @@ const SearchInput = React.memo(({
   )
 })
 
+SearchInput.displayName = 'SearchInput'
+
 export interface SidebarItem {
   id: string
   title: string
@@ -351,6 +357,7 @@ export function Sidebar({
   
   // Handle search change
   const handleSearch = useCallback((value: string) => {
+    setCurrentSearchQuery(value)
     onSearchChange?.(value)
   }, [onSearchChange])
 
@@ -780,16 +787,6 @@ export function Sidebar({
   const SidebarContent = React.memo(() => {
     return (
       <>
-        <SidebarHeader />
-        {showSearch && (!collapsed || isMobile) && (
-          <SearchInput
-            searchInputRef={searchInputRef}
-            searchPlaceholder={searchPlaceholder}
-            initialValue={searchQuery}
-            onSearchChange={handleSearch}
-            keyboardShortcuts={keyboardShortcuts}
-          />
-        )}
         <SidebarMenuContent />
         <SidebarFooter />
       </>
@@ -839,6 +836,17 @@ export function Sidebar({
                   }}
                 />
               )}
+              <SidebarHeader />
+              {showSearch && (!collapsed || isMobile) && (
+                <SearchInput
+                  key="sidebar-search-mobile"
+                  searchInputRef={searchInputRef}
+                  searchPlaceholder={searchPlaceholder}
+                  initialValue={currentSearchQuery}
+                  onSearchChange={handleSearch}
+                  keyboardShortcuts={keyboardShortcuts}
+                />
+              )}
               <SidebarContent />
             </div>
           </SheetContent>
@@ -857,6 +865,17 @@ export function Sidebar({
           }}
         />
       )}
+      <SidebarHeader />
+      {showSearch && (!collapsed || isMobile) && (
+        <SearchInput
+          key="sidebar-search-desktop"
+          searchInputRef={searchInputRef}
+          searchPlaceholder={searchPlaceholder}
+          initialValue={currentSearchQuery}
+          onSearchChange={handleSearch}
+          keyboardShortcuts={keyboardShortcuts}
+        />
+      )}
       <SidebarContent />
     </aside>
   )

package/src/components/timeline/index.tsx

@@ -203,23 +203,23 @@ const timelineVariants = cva("w-full", {
 
 // Default color schemes
 const DEFAULT_COLORS: Record<TimelineEventType, string> = {
-  success: 'bg-green-500 border-green-500',
-  warning: 'bg-yellow-500 border-yellow-500',
-  error: 'bg-red-500 border-red-500',
-  info: 'bg-blue-500 border-blue-500',
-  pending: 'bg-muted-foreground/40 border-muted-foreground/40',
-  milestone: 'bg-purple-500 border-purple-500',
-  custom: 'bg-slate-500 border-slate-500'
+  success: 'bg-green-500 border-green-600',
+  warning: 'bg-yellow-500 border-yellow-600',
+  error: 'bg-red-500 border-red-600',
+  info: 'bg-blue-500 border-blue-600',
+  pending: 'bg-gray-400 border-gray-500',
+  milestone: 'bg-purple-500 border-purple-600',
+  custom: 'bg-slate-500 border-slate-600'
 }
 
 const DEFAULT_ICONS: Record<TimelineEventType, React.ReactNode> = {
-  success: <CheckCircle2 className="h-4 w-4 text-white" />,
-  warning: <AlertCircle className="h-4 w-4 text-white" />,
-  error: <XCircle className="h-4 w-4 text-white" />,
-  info: <Circle className="h-4 w-4 text-white" />,
-  pending: <Clock className="h-4 w-4 text-white" />,
-  milestone: <Flag className="h-4 w-4 text-white" />,
-  custom: <Sparkles className="h-4 w-4 text-white" />
+  success: <CheckCircle2 className="h-5 w-5 text-white" />,
+  warning: <AlertCircle className="h-5 w-5 text-white" />,
+  error: <XCircle className="h-5 w-5 text-white" />,
+  info: <Circle className="h-5 w-5 text-white" />,
+  pending: <Clock className="h-5 w-5 text-white" />,
+  milestone: <Flag className="h-5 w-5 text-white" />,
+  custom: <Sparkles className="h-5 w-5 text-white" />
 }
 
 const TEXT_COLORS: Record<TimelineEventType, string> = {
@@ -540,25 +540,36 @@ export function Timeline({
     
     if (isLast) return null
     
-    const baseClasses = cn(
-      "absolute",
-      layout === 'horizontal' ? "h-0.5 top-4" : "w-0.5 left-1/2 -ml-px transform -translate-x-1/2",
-      gradientConnectors && "bg-gradient-to-b from-border to-transparent"
-    )
-    
     if (layout === 'horizontal') {
-      return <div className={cn(baseClasses, "bg-border")} style={{ width: '100px' }} />
+      return (
+        <div 
+          className={cn(
+            "absolute h-1 bg-border",
+            gradientConnectors ? "bg-gradient-to-r from-primary/60 via-primary/30 to-transparent" : "bg-border"
+          )} 
+          style={{ 
+            width: '100%',
+            left: '100%',
+            top: '50%',
+            transform: 'translateY(-50%)'
+          }} 
+        />
+      )
     }
     
+    const baseClasses = cn(
+      "absolute w-1 left-1/2 -ml-0.5 transform -translate-x-1/2",
+      gradientConnectors ? "bg-gradient-to-b from-primary/60 via-primary/30 to-transparent" : "bg-border"
+    )
+    
     return (
       <div className={cn(
         baseClasses,
-        "bg-border",
-        layout === 'alternating' && "hidden"
+        layout === 'alternating' && "left-1/2 -ml-0.5"
       )} 
       style={{ 
-        height: 'calc(100% + 2rem)',
-        top: '2rem'
+        height: 'calc(100% + 3rem)',
+        top: '2.5rem'
       }} />
     )
   }, [connectorRenderer, layout, gradientConnectors])
@@ -587,17 +598,14 @@ export function Timeline({
         }}
         tabIndex={keyboardNavigation ? 0 : -1}
         className={cn(
-          "relative flex gap-4",
-          compactMode ? "pb-2" : "pb-8",
+          "relative flex gap-6",
+          compactMode ? "pb-4" : "pb-10",
           layout === 'alternating' && index % 2 === 0 && "flex-row-reverse",
-          layout === 'horizontal' && "flex-col items-center",
-          "cursor-pointer rounded-lg p-3 -m-1 transition-all duration-200",
-          "hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-ring",
-          isSelected && "bg-muted/70",
-          isFocused && "ring-2 ring-ring",
+          layout === 'horizontal' && "flex-col items-center pb-0 mr-8",
+          "transition-all duration-200",
+          isFocused && "scale-[1.02]",
           printMode && "print:break-inside-avoid"
         )}
-        onClick={() => handleEventClick(event)}
         onFocus={() => setFocusedEventId(event.id)}
         role="button"
         aria-label={`Event: ${event.title}`}
@@ -610,26 +618,50 @@ export function Timeline({
         )}>
           <motion.div
             className={cn(
-              "flex items-center justify-center rounded-full border-2 bg-background z-10",
-              isMilestoneEvent ? "w-10 h-10" : "w-8 h-8",
+              "flex items-center justify-center rounded-full border-4 bg-background z-10 shadow-lg relative",
+              isMilestoneEvent ? "w-12 h-12" : "w-10 h-10",
               eventColor,
-              isSelected && "ring-2 ring-ring ring-offset-2"
+              isSelected && "ring-4 ring-ring ring-offset-2"
             )}
-            whileHover={{ scale: 1.1 }}
+            whileHover={{ scale: 1.15 }}
             whileTap={{ scale: 0.95 }}
           >
             {renderEventIcon(event)}
+            
+            {/* Connector - Horizontal için node'un içinden çıkan çizgi */}
+            {!isLast && layout === 'horizontal' && (
+              <div 
+                className={cn(
+                  "absolute h-1",
+                  gradientConnectors ? "bg-gradient-to-r from-border via-border/60 to-border/30" : "bg-border"
+                )} 
+                style={{ 
+                  width: '18.5rem', // Card genişliği (16rem) + margin (2rem) + node yarısı (0.5rem)
+                  left: isMilestoneEvent ? '3rem' : '2.5rem', // Node genişliğinin yarısı
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  zIndex: -1
+                }} 
+              />
+            )}
           </motion.div>
           
-          {/* Connector */}
-          {!isLast && renderConnector(event, events[index + 1], isLast)}
+          {/* Connector - Vertical layouts için */}
+          {!isLast && layout !== 'horizontal' && renderConnector(event, events[index + 1], isLast)}
         </div>
 
         {/* Event Content */}
-        <div className={cn(
-          "flex-1 min-w-0",
-          layout === 'alternating' && index % 2 === 0 && "text-right"
-        )}>
+        <Card 
+          className={cn(
+            layout === 'horizontal' ? "w-64" : "flex-1 min-w-0",
+            "shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer",
+            layout === 'alternating' && index % 2 === 0 && "text-right",
+            isSelected && "ring-2 ring-primary",
+            "bg-card/50 backdrop-blur-sm"
+          )}
+          onClick={() => handleEventClick(event)}
+        >
+          <CardContent className="p-4">
           {/* Header */}
           <div className="flex items-start justify-between gap-2 mb-2">
             <div className="flex-1">
@@ -880,7 +912,8 @@ export function Timeline({
               )}
             </Button>
           )}
-        </div>
+          </CardContent>
+        </Card>
       </div>
     )
 
@@ -1011,9 +1044,13 @@ export function Timeline({
           ) : (
             <div className={cn(
               "space-y-0",
-              layout === 'horizontal' && "flex overflow-x-auto gap-6 pb-4",
+              layout === 'horizontal' && "flex flex-row overflow-x-auto gap-0 pb-4 items-start",
               layout === 'alternating' && "relative"
             )}>
+              {/* Center line for alternating layout */}
+              {layout === 'alternating' && (
+                <div className="absolute left-1/2 -ml-0.5 top-0 bottom-0 w-1 bg-border" />
+              )}
               {filteredAndSortedEvents.map((event, index) => 
                 renderEvent(event, index, index === filteredAndSortedEvents.length - 1)
               )}
@@ -1047,16 +1084,13 @@ export function Timeline({
       aria-label={ariaLabel}
       {...props}
     >
+        {(showSearch || showFilter || showExport) && (
         <CardHeader className={cn(
           compactMode && "pb-3",
           printMode && "print:pb-2"
         )}>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle className="flex items-center gap-2">
-                <Clock className="h-5 w-5" />
-                Timeline
-              </CardTitle>
               <CardDescription>
                 {filteredAndSortedEvents.length} event{filteredAndSortedEvents.length !== 1 ? 's' : ''} 
                 {searchQuery && ` matching "${searchQuery}"`}
@@ -1123,6 +1157,7 @@ export function Timeline({
             </div>
           )}
         </CardHeader>
+        )}
         
         <CardContent className={cn(
           compactMode ? "pt-2" : "pt-6",