md slash commands, text/img gen

packages/ui/src/components/Comments.tsx

@@ -7,7 +7,7 @@ import { User, MessageCircle, Heart, MoreHorizontal, Mic, MicOff, Loader2 } from
 import { toast } from "sonner";
 import { Link } from "react-router-dom";
 import MarkdownRenderer from "@/components/MarkdownRenderer";
-import MarkdownEditor from "@/components/MarkdownEditor";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -542,15 +542,13 @@ const Comments = ({ pictureId }: CommentsProps) => {
                 variant="ghost"
                 size="sm"
                 onClick={() => handleToggleLike(comment.id)}
-                className={`h-6 px-2 text-xs ${
+                className={`h-6 px-2 text-xs ${likedComments.has(comment.id)
-                  likedComments.has(comment.id) 
                     ? 'text-red-500 hover:text-red-600'
                     : 'text-muted-foreground hover:text-foreground'
                   }`}
               >
                 <Heart
-                  className={`h-3 w-3 mr-1 ${
+                  className={`h-3 w-3 mr-1 ${likedComments.has(comment.id) ? 'fill-current' : ''
-                    likedComments.has(comment.id) ? 'fill-current' : ''
                     }`}
                 />
                 {comment.likes_count > 0 && <span className="mr-1">{comment.likes_count}</span>}
@@ -588,8 +586,7 @@ const Comments = ({ pictureId }: CommentsProps) => {
                   <button
                     onClick={() => handleMicrophone('reply')}
                     disabled={isTranscribing}
-                    className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${
+                    className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'reply'
-                      isRecording && recordingFor === 'reply'
                         ? 'bg-red-100 text-red-600 hover:bg-red-200'
                         : 'text-muted-foreground hover:text-foreground hover:bg-accent'
                       }`}
@@ -652,18 +649,7 @@ const Comments = ({ pictureId }: CommentsProps) => {
         <div className="space-y-3 pb-4 border-b">
           <div className="relative">
             {useMarkdown ? (
-              <MarkdownEditor
+              <div />
-                value={newComment}
-                onChange={setNewComment}
-                placeholder={translate('Add a comment...')}
-                className="min-h-[60px]"
-                onKeyDown={(e) => {
-                  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                    e.preventDefault();
-                    handleAddComment();
-                  }
-                }}
-              />
             ) : (
               <Textarea
                 value={newComment}
@@ -682,8 +668,7 @@ const Comments = ({ pictureId }: CommentsProps) => {
             <button
               onClick={() => handleMicrophone('new')}
               disabled={isTranscribing}
-              className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${
+              className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'new'
-                isRecording && recordingFor === 'new'
                   ? 'bg-red-100 text-red-600 hover:bg-red-200'
                   : 'text-muted-foreground hover:text-foreground hover:bg-accent'
                 }`}

packages/ui/src/components/CreationWizardPopup.tsx

@@ -238,20 +238,7 @@ export const CreationWizardPopup: React.FC<CreationWizardPopupProps> = ({
                 title: img.title || 'Untitled Link',
                 description: img.description || null,
                 image_url: img.src, // Use the preview image as main URL? Or should we store the link URL?
-                // Wait, "image_url" usually stores the image.
+                // image_url: img.path, // The generic URL
-                // For pages, we should probably store the link in `meta` or `url` if exists?
-                // The `pictures` table has `image_url` and `video_url`.
-                // Let's store the LINK in `image_url` (since it's the primary content) or specific logic?
-                // Actually, for PAGE type, `image_url` is often the link, or we use a separate field?
-                // Looking at `mediaUtils`: for `PAGE`, `url` is passed through.
-                // But `PAGE` usually implies internal.
-                // Let's check `MediaCard`. It uses `url` prop.
-                // For `PAGE_EXTERNAL`, the `url` should be the external link.
-                // But where do we store the thumbnail?
-                // `pictures` table has `thumbnail_url`.
-                // So: image_url = external_link, thumbnail_url = preview_image.
-
-                image_url: img.path, // The generic URL
                 thumbnail_url: img.src, // The preview image
                 organization_id: organizationId,
                 type: 'page-external',

packages/ui/src/components/MarkdownEditor.tsx

@@ -4,7 +4,7 @@ import { supabase } from '@/integrations/supabase/client';
 
 
 // Lazy load the heavy editor component
-const MilkdownEditorInternal = React.lazy(() => import('@/components/lazy-editors/MilkdownEditorInternal'));
+//const MilkdownEditorInternal = React.lazy(() => import('@/components/lazy-editors/MilkdownEdito'));
 
 interface MarkdownEditorProps {
   value: string;
@@ -99,11 +99,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
         </div>
         {activeTab === 'editor' && (
           <React.Suspense fallback={<div className="p-3 text-muted-foreground">Loading editor...</div>}>
-            <MilkdownEditorInternal
+            <div>Remove MilkdownEditorInternal</div>
-              value={value}
-              onChange={onChange}
-              className={className}
-            />
           </React.Suspense>
         )}
         {activeTab === 'raw' && (

packages/ui/src/components/lazy-editors/AIGenerationPlugin.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { COMMAND_PRIORITY_NORMAL, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, $createParagraphNode, $insertNodes, $getRoot, $createTextNode } from 'lexical';
+import { COMMAND_PRIORITY_NORMAL, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, $createParagraphNode, $insertNodes, $getRoot, $createTextNode, createCommand, LexicalCommand } from 'lexical';
 import { mergeRegister } from '@lexical/utils';
 import { RealmPlugin, addComposerChild$, usePublisher, insertMarkdown$ } from '@mdxeditor/editor';
 import { AIPromptPopup } from './AIPromptPopup';
@@ -9,6 +9,9 @@ import { toast } from 'sonner';
 import { getUserSecrets } from '@/components/ImageWizard/db';
 import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
+import { formatTextGenPrompt } from '@/constants';
+
+export const OPEN_AI_TEXT_GEN_COMMAND: LexicalCommand<void> = createCommand('OPEN_AI_TEXT_GEN_COMMAND');
 
 // Hook to access secrets helper
 const useProviderApiKey = () => {
@@ -56,15 +59,7 @@ const AIGenerationComponent = () => {
     const [contextData, setContextData] = useState<{ selection: string, content: string }>({ selection: '', content: '' });
     const insertMarkdown = usePublisher(insertMarkdown$);
 
-    useEffect(() => {
+    const openPopup = useCallback(() => {
-        return mergeRegister(
-            editor.registerCommand(
-                KEY_DOWN_COMMAND,
-                (event: KeyboardEvent) => {
-                    // Check for Ctrl+Space
-                    if (event.ctrlKey && event.code === 'Space') {
-                        event.preventDefault();
-
         // Capture context before opening
         editor.getEditorState().read(() => {
             const selection = $getSelection();
@@ -79,30 +74,46 @@ const AIGenerationComponent = () => {
         });
 
         setIsPopupOpen(true);
+    }, [editor]);
+
+    useEffect(() => {
+        return mergeRegister(
+            editor.registerCommand(
+                KEY_DOWN_COMMAND,
+                (event: KeyboardEvent) => {
+                    // Check for Ctrl+Space
+                    if (event.ctrlKey && event.code === 'Space') {
+                        event.preventDefault();
+                        openPopup();
                         return true;
                     }
                     return false;
                 },
                 COMMAND_PRIORITY_NORMAL
+            ),
+            editor.registerCommand(
+                OPEN_AI_TEXT_GEN_COMMAND,
+                () => {
+                    openPopup();
+                    return true;
+                },
+                COMMAND_PRIORITY_NORMAL
             )
         );
-    }, [editor]);
+    }, [editor, openPopup]);
 
     const handleGenerate = async (prompt: string, provider: string, model: string, contextMode: 'selection' | 'content' | 'none', applicationMode: 'replace' | 'insert' | 'append') => {
         try {
             const apiKey = await getApiKey(provider);
 
-            // Construct prompt with context
-            let finalPrompt = prompt;
-            const instructions = `\n\nINSTRUCTIONS: Return the content formatted as Markdown. You can use code blocks, lists, and other markdown features. Do NOT include preamble or explanations. Just return the content directly.`;
 
-            if (contextMode === 'selection' && contextData.selection) {
+            // ...
-                finalPrompt = `CONTEXT:\n\`\`\`\n${contextData.selection}\n\`\`\`\n\nREQUEST: ${prompt}${instructions}`;
+
-            } else if (contextMode === 'content' && contextData.content) {
+            // Construct prompt with context
-                finalPrompt = `CONTEXT:\n\`\`\`\n${contextData.content}\n\`\`\`\n\nREQUEST: ${prompt}${instructions}`;
+            const finalPrompt = formatTextGenPrompt(prompt, {
-            } else {
+                selection: contextMode === 'selection' ? contextData.selection : undefined,
-                finalPrompt = `${prompt}${instructions}`;
+                content: contextMode === 'content' ? contextData.content : undefined
-            }
+            });
 
             // Generate text
             // Note: We're not using tools or streaming here yet for simplicity, just text generation
@@ -156,7 +167,10 @@ const AIGenerationComponent = () => {
     return (
         <AIPromptPopup
             isOpen={isPopupOpen}
-            onClose={() => setIsPopupOpen(false)}
+            onClose={() => {
+                setIsPopupOpen(false);
+                editor.focus();
+            }}
             onGenerate={handleGenerate}
             hasSelection={!!contextData.selection}
             hasContent={!!contextData.content}
@@ -173,3 +187,4 @@ export const aiGenerationPlugin = (): RealmPlugin => {
         }
     }
 }
+

packages/ui/src/components/lazy-editors/AIImageGenerationPlugin.tsx

@@ -3,11 +3,13 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { $createParagraphNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, createCommand, LexicalCommand, $insertNodes } from 'lexical';
 import { RealmPlugin, addComposerChild$, $createImageNode } from '@mdxeditor/editor';
 import { AIImagePromptPopup } from './AIImagePromptPopup';
-import { createImage } from '@/lib/image-router';
+import { createImage, editImage } from '@/lib/image-router';
 import { uploadFileToStorage } from '@/lib/db';
 import { useAuth } from '@/hooks/useAuth';
 import { toast } from 'sonner';
 
+import { formatImageGenPrompt } from '@/constants';
+
 export const OPEN_IMAGE_GEN_COMMAND: LexicalCommand<void> = createCommand('OPEN_IMAGE_GEN_COMMAND');
 
 const AIImagePromptPopupWrapper = () => {
@@ -35,12 +37,16 @@ const AIImagePromptPopupWrapper = () => {
         );
     }, [editor]);
 
-    const handleGenerate = async (prompt: string, model: string, aspectRatio: string, contextMode: 'selection' | 'content' | 'none') => {
+    const handleGenerate = async (prompt: string, provider: string, model: string, aspectRatio: string, contextMode: 'selection' | 'content' | 'none', referenceImages?: string[], applicationMode: 'replace' | 'insert' | 'append' = 'insert', resolution?: string, searchGrounding?: boolean) => {
+        const modelString = `${provider}/${model}`;
         if (!user?.id) {
             toast.error("You must be logged in to generate images.");
             return;
         }
 
+
+        // ...
+
         let fullPrompt = prompt;
         // Augment prompt with context if requested
         if (contextMode !== 'none') {
@@ -58,22 +64,46 @@ const AIImagePromptPopupWrapper = () => {
                     resolve(text);
                 });
             });
-
+            fullPrompt = formatImageGenPrompt(prompt, contextText);
-            if (contextText) {
-                // Truncate context if too long (arbitrary limit for prompt safety)
-                const safeContext = contextText.slice(0, 1000);
-                fullPrompt = `${prompt}\n\nContext: ${safeContext}`;
-            }
         }
 
         try {
-            const result = await createImage(
+            let result;
+
+            if (referenceImages && referenceImages.length > 0) {
+                // Image-to-Image Generation (Reference Images)
+
+                // Fetch images first
+                const imageFiles = await Promise.all(referenceImages.map(async (url) => {
+                    const response = await fetch(url);
+                    const blob = await response.blob();
+                    // Extract filename from URL or default
+                    const filename = url.split('/').pop() || 'reference.png';
+                    return new File([blob], filename, { type: blob.type });
+                }));
+
+                result = await editImage(
                     fullPrompt,
-                model,
+                    imageFiles,
-                undefined, // apiKey handled internally/server-side usually or locally
+                    modelString,
-                aspectRatio
+                    undefined, // apiKey
+                    aspectRatio,
+                    resolution,
+                    searchGrounding
                 );
 
+            } else {
+                // Text-to-Image Generation
+                result = await createImage(
+                    fullPrompt,
+                    modelString,
+                    undefined, // apiKey handled internally/server-side usually or locally
+                    aspectRatio,
+                    resolution,
+                    searchGrounding
+                );
+            }
+
             if (!result || !result.imageData) {
                 toast.error("Failed to generate image.");
                 return;
@@ -93,13 +123,23 @@ const AIImagePromptPopupWrapper = () => {
                         altText: prompt,
                         title: prompt
                     });
-                    // Insert at current selection
+
+                    // Handle application modes
+                    if (applicationMode === 'append') {
+                        // Append to end of document
+                        const root = $getRoot();
+                        root.append($createParagraphNode().append(imageNode));
+                    } else if (applicationMode === 'replace') {
+                        // Replace selection
                         const selection = $getSelection();
                         if ($isRangeSelection(selection)) {
                             selection.insertNodes([imageNode]);
                         } else {
-                        // Fallback append
+                            // Fallback to insert if no selection
-                        // Use $insertNodes which handles selection fallback usually, but if no selection...
+                            $insertNodes([imageNode]);
+                        }
+                    } else {
+                        // Insert at cursor (default)
                         $insertNodes([imageNode]);
                     }
                 });
@@ -117,7 +157,10 @@ const AIImagePromptPopupWrapper = () => {
     return (
         <AIImagePromptPopup
             isOpen={isOpen}
-            onClose={() => setIsOpen(false)}
+            onClose={() => {
+                setIsOpen(false);
+                editor.focus();
+            }}
             onGenerate={handleGenerate}
             hasSelection={hasSelection}
             hasContent={hasContent}

packages/ui/src/components/lazy-editors/AIImagePromptPopup.tsx

@@ -5,13 +5,19 @@ import { Loader2, Sparkles, X, Image as ImageIcon } from 'lucide-react';
 import { T, translate } from '@/i18n';
 import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { ModelSelector } from '@/components/ImageWizard/components/ModelSelector';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ProviderSelector } from '@/components/filters/ProviderSelector';
+import { ImagePickerDialog } from '@/components/widgets/ImagePickerDialog';
+import { Switch } from '@/components/ui/switch';
+import { Plus } from 'lucide-react';
 
 interface AIImagePromptPopupProps {
     isOpen: boolean;
     onClose: () => void;
-    onGenerate: (prompt: string, model: string, aspectRatio: string, contextMode: 'selection' | 'content' | 'none') => Promise<void>;
+    onGenerate: (prompt: string, provider: string, model: string, aspectRatio: string, contextMode: 'selection' | 'content' | 'none', referenceImages?: string[], applicationMode?: 'replace' | 'insert' | 'append', resolution?: string, searchGrounding?: boolean) => Promise<void>;
+    initialProvider?: string;
     initialModel?: string;
     hasSelection: boolean;
     hasContent: boolean;
@@ -21,23 +27,51 @@ export const AIImagePromptPopup: React.FC<AIImagePromptPopupProps> = ({
     isOpen,
     onClose,
     onGenerate,
-    initialModel = 'google/gemini-3-pro-image-preview',
+    initialProvider = 'google',
+    initialModel = 'gemini-3-pro-image-preview',
     hasSelection,
     hasContent
 }) => {
     const [prompt, setPrompt] = useState('');
 
     // Initialize model from local storage or props
+    // Note: Provider is now implicit in the model string for ModelSelector
     const [model, setModel] = useState(() => {
-        return localStorage.getItem('ai_image_last_model') || initialModel;
+        const storedModel = localStorage.getItem('ai_image_last_model');
+        // If stored model already has provider prefix (modern format)
+        if (storedModel && storedModel.includes('/')) return storedModel;
+
+        // Migration: Check for legacy separate provider/model
+        const storedProvider = localStorage.getItem('ai_image_last_provider');
+        if (storedModel && storedProvider) {
+            return `${storedProvider}/${storedModel}`;
+        }
+
+        return `${initialProvider}/${initialModel}`;
     });
 
     const [aspectRatio, setAspectRatio] = useState(() => {
         return localStorage.getItem('ai_image_last_aspect_ratio') || '1:1';
     });
 
+    const [resolution, setResolution] = useState(() => {
+        return localStorage.getItem('ai_image_last_resolution') || '1K';
+    });
+
+    const [searchGrounding, setSearchGrounding] = useState(() => {
+        return localStorage.getItem('ai_image_last_grounding') === 'true';
+    });
+
     const [isGenerating, setIsGenerating] = useState(false);
     const [contextMode, setContextMode] = useState<'selection' | 'content' | 'none'>('none');
+    const [applicationMode, setApplicationMode] = useState<'replace' | 'insert' | 'append'>('append');
+    // History state
+    const [history, setHistory] = useState<string[]>([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+
+    // Reference Images State
+    const [referenceImages, setReferenceImages] = useState<any[]>([]);
+    const [showImagePicker, setShowImagePicker] = useState(false);
 
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -50,19 +84,39 @@ export const AIImagePromptPopup: React.FC<AIImagePromptPopupProps> = ({
         if (aspectRatio) localStorage.setItem('ai_image_last_aspect_ratio', aspectRatio);
     }, [aspectRatio]);
 
+    useEffect(() => {
+        if (resolution) localStorage.setItem('ai_image_last_resolution', resolution);
+    }, [resolution]);
+
+    useEffect(() => {
+        localStorage.setItem('ai_image_last_grounding', String(searchGrounding));
+    }, [searchGrounding]);
+
     // Initial context mode selection
     useEffect(() => {
         if (isOpen) {
             if (hasSelection) {
                 setContextMode('selection');
+                setApplicationMode('replace');
             } else if (hasContent) {
                 setContextMode('content');
+                setApplicationMode('append');
             } else {
                 setContextMode('none');
+                setApplicationMode('insert');
+            }
+
+            // Load history from local storage
+            const savedHistory = localStorage.getItem('ai_image_prompt_history');
+            if (savedHistory) {
+                try {
+                    setHistory(JSON.parse(savedHistory));
+                } catch (e) { console.error('Failed to parse history', e); }
             }
         }
     }, [isOpen, hasSelection, hasContent]);
 
+
     // Auto-focus textarea when opened
     useEffect(() => {
         if (isOpen) {
@@ -87,16 +141,41 @@ export const AIImagePromptPopup: React.FC<AIImagePromptPopupProps> = ({
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [isOpen, onClose, isGenerating]);
 
+    const addToHistory = (text: string) => {
+        const newHistory = [text, ...history.filter(h => h !== text)].slice(0, 50);
+        setHistory(newHistory);
+        localStorage.setItem('ai_image_prompt_history', JSON.stringify(newHistory));
+        setHistoryIndex(-1);
+    };
+
     const handleGenerate = async () => {
         if (!prompt.trim()) return;
 
         setIsGenerating(true);
+        addToHistory(prompt);
         try {
-            await onGenerate(prompt, model, aspectRatio, contextMode);
+            // Split provider/model from the model string if possible, or pass as is depending on backend expectation
+            // The previous code passed explicit provider "google" or "replicate" etc.
+            // ModelSelector returns "provider/modelname".
+            // We need to parse it for the callback which expects separate args, OR update callback. 
+            // The callback signature in props is: (prompt, provider, model, ...)
+            const [providerName, modelName] = model.includes('/') ? model.split(/\/(.+)/) : ['google', model];
+
+            await onGenerate(
+                prompt,
+                providerName,
+                modelName,
+                aspectRatio,
+                contextMode,
+                referenceImages.map(img => img.image_url || img.src),
+                applicationMode,
+                resolution,
+                searchGrounding
+            );
             onClose();
             setPrompt('');
         } catch (error) {
-            console.error("Image generation failed", error);
+            console.error("Generation failed", error);
         } finally {
             setIsGenerating(false);
         }
@@ -106,9 +185,30 @@ export const AIImagePromptPopup: React.FC<AIImagePromptPopupProps> = ({
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             handleGenerate();
+        } else if (e.key === 'ArrowUp' && e.ctrlKey) {
+            e.preventDefault();
+            const nextIndex = Math.min(historyIndex + 1, history.length - 1);
+            if (nextIndex !== historyIndex && history[nextIndex]) {
+                setHistoryIndex(nextIndex);
+                setPrompt(history[nextIndex]);
+            }
+        } else if (e.key === 'ArrowDown' && e.ctrlKey) {
+            e.preventDefault();
+            const prevIndex = Math.max(historyIndex - 1, -1);
+            if (prevIndex !== historyIndex) {
+                setHistoryIndex(prevIndex);
+                setPrompt(prevIndex === -1 ? '' : history[prevIndex]);
+            }
         }
     };
 
+    console.log(model);
+
+
+    // Helper to check if model supports advanced options
+    // All Google models in our router support these parameters
+    const isGoogleModel = model.startsWith('google/');
+
     if (!isOpen) return null;
 
     return (
@@ -144,42 +244,79 @@ export const AIImagePromptPopup: React.FC<AIImagePromptPopupProps> = ({
                             className="min-h-[100px] resize-none bg-background/50 focus:bg-background transition-colors text-base"
                             disabled={isGenerating}
                         />
+                        {history.length > 0 && (
+                            <div className="absolute top-2 right-2 text-[10px] text-muted-foreground opacity-50 pointer-events-none">
+                                Ctrl+↑ for history
+                            </div>
+                        )}
                     </div>
 
                     {/* Context Toggles */}
-                    <div className="flex gap-2">
+                    <div className="flex flex-col gap-1.5">
-                        <Button
+                        <Label className="text-xs text-muted-foreground">Context</Label>
-                            variant={contextMode === 'selection' ? 'secondary' : 'ghost'}
+                        <RadioGroup
-                            size="sm"
+                            value={contextMode}
-                            className="text-xs h-7"
+                            onValueChange={(val) => setContextMode(val as any)}
-                            onClick={() => setContextMode('selection')}
+                            className="flex flex-row gap-4"
-                            disabled={!hasSelection || isGenerating}
-                            title="Use selected text as context"
-                        >
-                            Selection {hasSelection && '✓'}
-                        </Button>
-                        <Button
-                            variant={contextMode === 'content' ? 'secondary' : 'ghost'}
-                            size="sm"
-                            className="text-xs h-7"
-                            onClick={() => setContextMode('content')}
-                            disabled={!hasContent || isGenerating}
-                            title="Use entire document as context"
-                        >
-                            Content {hasContent && '✓'}
-                        </Button>
-                        <Button
-                            variant={contextMode === 'none' ? 'secondary' : 'ghost'}
-                            size="sm"
-                            className="text-xs h-7"
-                            onClick={() => setContextMode('none')}
                             disabled={isGenerating}
                         >
-                            No Context
+                            <div className="flex items-center space-x-2">
-                        </Button>
+                                <RadioGroupItem value="selection" id="img-c-selection" disabled={!hasSelection} />
+                                <Label htmlFor="img-c-selection" className={`text-sm font-normal cursor-pointer ${!hasSelection ? 'opacity-50' : ''}`}>
+                                    Selection {hasSelection && '✓'}
+                                </Label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="content" id="img-c-content" disabled={!hasContent} />
+                                <Label htmlFor="img-c-content" className={`text-sm font-normal cursor-pointer ${!hasContent ? 'opacity-50' : ''}`}>
+                                    Content {hasContent && '✓'}
+                                </Label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="none" id="img-c-none" />
+                                <Label htmlFor="img-c-none" className="text-sm font-normal cursor-pointer">No Context</Label>
+                            </div>
+                        </RadioGroup>
                     </div>
 
-                    {/* Controls Row: Aspect Ratio & Model */}
+                    {/* Controls Row: Aspect Ratio & Model & Mode */}
+                    <div className="flex flex-col gap-3">
+                        {/* Insertion Mode */}
+                        <div className="flex flex-col gap-1.5">
+                            <Label className="text-xs text-muted-foreground">Insertion Mode</Label>
+                            <RadioGroup
+                                value={applicationMode}
+                                onValueChange={(val) => setApplicationMode(val as any)}
+                                className="flex flex-row gap-4"
+                                disabled={isGenerating}
+                            >
+                                <div className="flex items-center space-x-2">
+                                    <RadioGroupItem value="replace" id="img-r-replace" />
+                                    <Label htmlFor="img-r-replace" className="text-sm font-normal cursor-pointer">Replace</Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    <RadioGroupItem value="insert" id="img-r-insert" />
+                                    <Label htmlFor="img-r-insert" className="text-sm font-normal cursor-pointer">Insert</Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    <RadioGroupItem value="append" id="img-r-append" />
+                                    <Label htmlFor="img-r-append" className="text-sm font-normal cursor-pointer">Append</Label>
+                                </div>
+                            </RadioGroup>
+                        </div>
+
+                        {/* Model Selector */}
+                        <div className="space-y-2">
+                            <ModelSelector
+                                selectedModel={model}
+                                onChange={setModel}
+                                label="AI Model"
+                                showStepNumber={false}
+                            />
+                        </div>
+
+                        {/* Advanced Options (Conditionally Rendered) */}
+                        {isGoogleModel && (
                             <div className="grid grid-cols-2 gap-4">
                                 <div className="space-y-2">
                                     <Label className="text-xs text-muted-foreground">Aspect Ratio</Label>
@@ -196,15 +333,95 @@ export const AIImagePromptPopup: React.FC<AIImagePromptPopupProps> = ({
                                         </SelectContent>
                                     </Select>
                                 </div>
-
                                 <div className="space-y-2">
-                            <ModelSelector
+                                    <Label className="text-xs text-muted-foreground">Resolution</Label>
-                                selectedModel={model}
+                                    <Select value={resolution} onValueChange={setResolution} disabled={isGenerating}>
-                                onChange={setModel}
+                                        <SelectTrigger>
-                                showStepNumber={false}
+                                            <SelectValue placeholder="Resolution" />
-                                label="Model"
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="1K">1K</SelectItem>
+                                            <SelectItem value="2K">2K</SelectItem>
+                                            <SelectItem value="4K">4K</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Google Search Grounding */}
+                        {isGoogleModel && (
+                            <div className="flex items-center justify-between pt-1">
+                                <Label htmlFor="search-grounding" className="flex flex-col space-y-0.5 pointer-events-none">
+                                    <span className="text-xs font-medium"><T>Grounding with Google Search</T></span>
+                                </Label>
+                                <Switch
+                                    id="search-grounding"
+                                    checked={searchGrounding}
+                                    onCheckedChange={setSearchGrounding}
+                                    disabled={isGenerating}
+                                    className="scale-75 origin-right"
                                 />
                             </div>
+                        )}
+
+
+                        {/* Reference Images Section */}
+                        <div className="space-y-2">
+                            <div className="flex items-center justify-between">
+                                <Label className="text-xs text-muted-foreground">Reference Images</Label>
+                                <span className="text-xs text-muted-foreground">{referenceImages.length} selected</span>
+                            </div>
+
+                            {referenceImages.length === 0 ? (
+                                <Button
+                                    variant="outline"
+                                    className="w-full h-16 border-dashed flex flex-col items-center justify-center text-muted-foreground hover:text-primary hover:border-primary/50 hover:bg-accent/50 transition-all font-normal"
+                                    onClick={() => setShowImagePicker(true)}
+                                    disabled={isGenerating}
+                                >
+                                    <ImageIcon className="h-4 w-4 mb-1 opacity-50" />
+                                    <span className="text-xs"><T>Add Reference Image</T></span>
+                                </Button>
+                            ) : (
+                                <div className="grid grid-cols-4 gap-2">
+                                    {referenceImages.map((img) => (
+                                        <div key={img.id} className="relative aspect-square rounded-md overflow-hidden border group bg-muted/30">
+                                            <img
+                                                src={img.image_url || img.src}
+                                                alt={img.title}
+                                                className="w-full h-full object-cover"
+                                            />
+                                            <button
+                                                onClick={() => setReferenceImages(prev => prev.filter(i => i.id !== img.id))}
+                                                className="absolute top-0.5 right-0.5 p-0.5 bg-black/50 hover:bg-destructive text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                                                title="Remove"
+                                            >
+                                                <X className="h-2.5 w-2.5" />
+                                            </button>
+                                        </div>
+                                    ))}
+                                    <Button
+                                        variant="outline"
+                                        className="aspect-square flex flex-col items-center justify-center p-0 border-dashed hover:border-primary hover:text-primary hover:bg-accent/50 transition-all"
+                                        onClick={() => setShowImagePicker(true)}
+                                        disabled={isGenerating}
+                                    >
+                                        <Plus className="h-4 w-4 text-muted-foreground" />
+                                    </Button>
+                                </div>
+                            )}
+
+                            <ImagePickerDialog
+                                isOpen={showImagePicker}
+                                onClose={() => setShowImagePicker(false)}
+                                multiple={true}
+                                currentValues={referenceImages.map(img => img.id)}
+                                onMultiSelectPictures={(pictures) => {
+                                    setReferenceImages(pictures);
+                                    setShowImagePicker(false);
+                                }}
+                            />
                         </div>
 
                         {/* Generate Button */}
@@ -237,6 +454,7 @@ export const AIImagePromptPopup: React.FC<AIImagePromptPopupProps> = ({
                             </div>
                         </div>
                     )}
+                </div>
             </Card>
         </div>
     );

packages/ui/src/components/lazy-editors/SlashCommandPlugin.tsx

@@ -16,10 +16,12 @@ import {
     Quote,
     Image,
     Code,
-    Sparkles
+    Sparkles,
+    Bot
 } from 'lucide-react';
 import * as ReactDOM from 'react-dom';
 import { OPEN_IMAGE_GEN_COMMAND } from './AIImageGenerationPlugin';
+import { OPEN_AI_TEXT_GEN_COMMAND } from './AIGenerationPlugin';
 
 // Import from MDXEditor to hook into its plugin system and access ImageNode creation
 import { RealmPlugin, addComposerChild$, $createImageNode } from '@mdxeditor/editor';
@@ -102,6 +104,9 @@ function SlashCommandMenu({
         new SlashCommandOption('Generate Image', <Sparkles size={16} />, ['ai', 'image', 'generate', 'gen'], () => {
             editor.dispatchCommand(OPEN_IMAGE_GEN_COMMAND, undefined);
         }),
+        new SlashCommandOption('AI Assistant', <Bot size={16} />, ['ai', 'text', 'generate', 'ask', 'gpt'], () => {
+            editor.dispatchCommand(OPEN_AI_TEXT_GEN_COMMAND, undefined);
+        }),
         // Special handling for Image if handler provided
         ...(onRequestImage ? [
             new SlashCommandOption('Image', <Image size={16} />, ['image', 'picture', 'photo'], () => {

packages/ui/src/constants.ts

@@ -105,3 +105,29 @@ export const DEFAULT_QUICK_ACTIONS: QuickAction[] = [
   { id: '4', name: "Fantasy", prompt: "Transform this into a fantasy art style", icon: "🧙‍♂️" },
   { id: '5', name: "Portrait", prompt: "Transform this into a professional portrait", icon: "👤" },
 ];
+
+/**
+ * AI Text Generation Constants
+ */
+export const AI_TEXT_GEN_INSTRUCTION = `\n\nINSTRUCTIONS: Return the content formatted as Markdown. You can use code blocks, lists, and other markdown features. Do NOT include preamble or explanations. Just return the content directly.`;
+
+export const formatTextGenPrompt = (prompt: string, context?: { selection?: string, content?: string }): string => {
+  if (context?.selection) {
+    return `CONTEXT:\n\`\`\`\n${context.selection}\n\`\`\`\n\nREQUEST: ${prompt}${AI_TEXT_GEN_INSTRUCTION}`;
+  } else if (context?.content) {
+    return `CONTEXT:\n\`\`\`\n${context.content}\n\`\`\`\n\nREQUEST: ${prompt}${AI_TEXT_GEN_INSTRUCTION}`;
+  }
+  return `${prompt}${AI_TEXT_GEN_INSTRUCTION}`;
+};
+
+/**
+ * AI Image Generation Constants
+ */
+export const formatImageGenPrompt = (prompt: string, context?: string): string => {
+  if (context) {
+    // Truncate context if too long (arbitrary limit for prompt safety)
+    const safeContext = context.slice(0, 1000);
+    return `${prompt}\n\nContext: ${safeContext}`;
+  }
+  return prompt;
+};