md slash commands, text/img gen
This commit is contained in:
parent
1fd6ef704e
commit
ba9fba49cb
@ -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,16 +542,14 @@ const Comments = ({ pictureId }: CommentsProps) => {
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleToggleLike(comment.id)}
|
||||
className={`h-6 px-2 text-xs ${
|
||||
likedComments.has(comment.id)
|
||||
className={`h-6 px-2 text-xs ${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 ${
|
||||
likedComments.has(comment.id) ? 'fill-current' : ''
|
||||
}`}
|
||||
className={`h-3 w-3 mr-1 ${likedComments.has(comment.id) ? 'fill-current' : ''
|
||||
}`}
|
||||
/>
|
||||
{comment.likes_count > 0 && <span className="mr-1">{comment.likes_count}</span>}
|
||||
<T>Like</T>
|
||||
@ -588,11 +586,10 @@ const Comments = ({ pictureId }: CommentsProps) => {
|
||||
<button
|
||||
onClick={() => handleMicrophone('reply')}
|
||||
disabled={isTranscribing}
|
||||
className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${
|
||||
isRecording && recordingFor === 'reply'
|
||||
className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'reply'
|
||||
? 'bg-red-100 text-red-600 hover:bg-red-200'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-accent'
|
||||
}`}
|
||||
}`}
|
||||
title={isRecording && recordingFor === 'reply' ? 'Stop recording' : 'Record audio'}
|
||||
>
|
||||
{isTranscribing && recordingFor === 'reply' ? (
|
||||
@ -652,18 +649,7 @@ const Comments = ({ pictureId }: CommentsProps) => {
|
||||
<div className="space-y-3 pb-4 border-b">
|
||||
<div className="relative">
|
||||
{useMarkdown ? (
|
||||
<MarkdownEditor
|
||||
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();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div />
|
||||
) : (
|
||||
<Textarea
|
||||
value={newComment}
|
||||
@ -682,11 +668,10 @@ const Comments = ({ pictureId }: CommentsProps) => {
|
||||
<button
|
||||
onClick={() => handleMicrophone('new')}
|
||||
disabled={isTranscribing}
|
||||
className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${
|
||||
isRecording && recordingFor === 'new'
|
||||
className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'new'
|
||||
? 'bg-red-100 text-red-600 hover:bg-red-200'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-accent'
|
||||
}`}
|
||||
}`}
|
||||
title={isRecording && recordingFor === 'new' ? 'Stop recording' : 'Record audio'}
|
||||
>
|
||||
{isTranscribing && recordingFor === 'new' ? (
|
||||
|
||||
@ -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.
|
||||
// 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
|
||||
// image_url: img.path, // The generic URL
|
||||
thumbnail_url: img.src, // The preview image
|
||||
organization_id: organizationId,
|
||||
type: 'page-external',
|
||||
|
||||
@ -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
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
className={className}
|
||||
/>
|
||||
<div>Remove MilkdownEditorInternal</div>
|
||||
</React.Suspense>
|
||||
)}
|
||||
{activeTab === 'raw' && (
|
||||
|
||||
@ -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,6 +59,23 @@ const AIGenerationComponent = () => {
|
||||
const [contextData, setContextData] = useState<{ selection: string, content: string }>({ selection: '', content: '' });
|
||||
const insertMarkdown = usePublisher(insertMarkdown$);
|
||||
|
||||
const openPopup = useCallback(() => {
|
||||
// Capture context before opening
|
||||
editor.getEditorState().read(() => {
|
||||
const selection = $getSelection();
|
||||
const selectionText = selection ? selection.getTextContent() : '';
|
||||
const root = $getRoot();
|
||||
const contentText = root ? root.getTextContent() : '';
|
||||
|
||||
setContextData({
|
||||
selection: selectionText,
|
||||
content: contentText
|
||||
});
|
||||
});
|
||||
|
||||
setIsPopupOpen(true);
|
||||
}, [editor]);
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerCommand(
|
||||
@ -64,45 +84,36 @@ const AIGenerationComponent = () => {
|
||||
// Check for Ctrl+Space
|
||||
if (event.ctrlKey && event.code === 'Space') {
|
||||
event.preventDefault();
|
||||
|
||||
// Capture context before opening
|
||||
editor.getEditorState().read(() => {
|
||||
const selection = $getSelection();
|
||||
const selectionText = selection ? selection.getTextContent() : '';
|
||||
const root = $getRoot();
|
||||
const contentText = root ? root.getTextContent() : '';
|
||||
|
||||
setContextData({
|
||||
selection: selectionText,
|
||||
content: contentText
|
||||
});
|
||||
});
|
||||
|
||||
setIsPopupOpen(true);
|
||||
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) {
|
||||
finalPrompt = `CONTEXT:\n\`\`\`\n${contextData.content}\n\`\`\`\n\nREQUEST: ${prompt}${instructions}`;
|
||||
} else {
|
||||
finalPrompt = `${prompt}${instructions}`;
|
||||
}
|
||||
// ...
|
||||
|
||||
// Construct prompt with context
|
||||
const finalPrompt = formatTextGenPrompt(prompt, {
|
||||
selection: contextMode === 'selection' ? contextData.selection : undefined,
|
||||
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 => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,21 +64,45 @@ const AIImagePromptPopupWrapper = () => {
|
||||
resolve(text);
|
||||
});
|
||||
});
|
||||
|
||||
if (contextText) {
|
||||
// Truncate context if too long (arbitrary limit for prompt safety)
|
||||
const safeContext = contextText.slice(0, 1000);
|
||||
fullPrompt = `${prompt}\n\nContext: ${safeContext}`;
|
||||
}
|
||||
fullPrompt = formatImageGenPrompt(prompt, contextText);
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await createImage(
|
||||
fullPrompt,
|
||||
model,
|
||||
undefined, // apiKey handled internally/server-side usually or locally
|
||||
aspectRatio
|
||||
);
|
||||
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,
|
||||
imageFiles,
|
||||
modelString,
|
||||
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.");
|
||||
@ -93,13 +123,23 @@ const AIImagePromptPopupWrapper = () => {
|
||||
altText: prompt,
|
||||
title: prompt
|
||||
});
|
||||
// Insert at current selection
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
selection.insertNodes([imageNode]);
|
||||
|
||||
// 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 to insert if no selection
|
||||
$insertNodes([imageNode]);
|
||||
}
|
||||
} else {
|
||||
// Fallback append
|
||||
// Use $insertNodes which handles selection fallback usually, but if no selection...
|
||||
// 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}
|
||||
|
||||
@ -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,99 +244,217 @@ 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">
|
||||
<Button
|
||||
variant={contextMode === 'selection' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="text-xs h-7"
|
||||
onClick={() => setContextMode('selection')}
|
||||
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')}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label className="text-xs text-muted-foreground">Context</Label>
|
||||
<RadioGroup
|
||||
value={contextMode}
|
||||
onValueChange={(val) => setContextMode(val as any)}
|
||||
className="flex flex-row gap-4"
|
||||
disabled={isGenerating}
|
||||
>
|
||||
No Context
|
||||
</Button>
|
||||
<div className="flex items-center space-x-2">
|
||||
<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 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs text-muted-foreground">Aspect Ratio</Label>
|
||||
<Select value={aspectRatio} onValueChange={setAspectRatio} disabled={isGenerating}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select ratio" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1:1">Square (1:1)</SelectItem>
|
||||
<SelectItem value="16:9">Landscape (16:9)</SelectItem>
|
||||
<SelectItem value="4:3">Standard (4:3)</SelectItem>
|
||||
<SelectItem value="3:4">Portrait (3:4)</SelectItem>
|
||||
<SelectItem value="9:16">Mobile (9:16)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/* 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}
|
||||
label="Model"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Generate Button */}
|
||||
<div className="flex justify-end pt-2">
|
||||
<Button
|
||||
onClick={handleGenerate}
|
||||
disabled={!prompt.trim() || isGenerating}
|
||||
className={`w-full ${isGenerating ? 'opacity-80' : ''} bg-purple-600 hover:bg-purple-700 text-white`}
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
<T>Generating...</T>
|
||||
</>
|
||||
{/* 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>
|
||||
<Select value={aspectRatio} onValueChange={setAspectRatio} disabled={isGenerating}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select ratio" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1:1">Square (1:1)</SelectItem>
|
||||
<SelectItem value="16:9">Landscape (16:9)</SelectItem>
|
||||
<SelectItem value="4:3">Standard (4:3)</SelectItem>
|
||||
<SelectItem value="3:4">Portrait (3:4)</SelectItem>
|
||||
<SelectItem value="9:16">Mobile (9:16)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs text-muted-foreground">Resolution</Label>
|
||||
<Select value={resolution} onValueChange={setResolution} disabled={isGenerating}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Resolution" />
|
||||
</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>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-4 h-4 mr-2" />
|
||||
<T>Generate Image</T>
|
||||
</>
|
||||
<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>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer / Status */}
|
||||
{isGenerating && (
|
||||
<div className="px-4 pb-3">
|
||||
<div className="h-1 w-full bg-muted overflow-hidden rounded-full">
|
||||
<div className="h-full bg-purple-500 animate-progress-indeterminateOrigin" />
|
||||
<ImagePickerDialog
|
||||
isOpen={showImagePicker}
|
||||
onClose={() => setShowImagePicker(false)}
|
||||
multiple={true}
|
||||
currentValues={referenceImages.map(img => img.id)}
|
||||
onMultiSelectPictures={(pictures) => {
|
||||
setReferenceImages(pictures);
|
||||
setShowImagePicker(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Generate Button */}
|
||||
<div className="flex justify-end pt-2">
|
||||
<Button
|
||||
onClick={handleGenerate}
|
||||
disabled={!prompt.trim() || isGenerating}
|
||||
className={`w-full ${isGenerating ? 'opacity-80' : ''} bg-purple-600 hover:bg-purple-700 text-white`}
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
<T>Generating...</T>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-4 h-4 mr-2" />
|
||||
<T>Generate Image</T>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer / Status */}
|
||||
{isGenerating && (
|
||||
<div className="px-4 pb-3">
|
||||
<div className="h-1 w-full bg-muted overflow-hidden rounded-full">
|
||||
<div className="h-full bg-purple-500 animate-progress-indeterminateOrigin" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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'], () => {
|
||||
|
||||
@ -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;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user