mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-11-01 18:19:43 +00:00
Update
This commit is contained in:
jjbrunton committed
1 parent
8b73781272
commit
75509b0e45
41 files changed
+5896
-2931
No files matched your search
@@ -0,0 +1,178 @@
|
||||
import { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useOpenRouterModels, formatContextLength, formatModelPricing, OpenRouterModel } from '@/hooks/useOpenRouterModels';
|
||||
import { ChevronDown, Loader2, Search, Sparkles } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ModelComboboxProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function ModelCombobox({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Select or type model ID...',
|
||||
className,
|
||||
disabled = false,
|
||||
}: ModelComboboxProps) {
|
||||
const { models, loading } = useOpenRouterModels();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Filter models based on search
|
||||
const filteredModels = useMemo(() => {
|
||||
const query = (search || value).toLowerCase().trim();
|
||||
if (!query) {
|
||||
// Show featured models when no search
|
||||
return models.slice(0, 15);
|
||||
}
|
||||
|
||||
return models
|
||||
.filter(m =>
|
||||
m.id.toLowerCase().includes(query) ||
|
||||
m.name.toLowerCase().includes(query)
|
||||
)
|
||||
.slice(0, 20);
|
||||
}, [models, search, value]);
|
||||
|
||||
// Find current model info
|
||||
const currentModel = useMemo(() => {
|
||||
return models.find(m => m.id === value);
|
||||
}, [models, value]);
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
setSearch('');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Handle keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
setIsOpen(false);
|
||||
setSearch('');
|
||||
} else if (e.key === 'ArrowDown' && !isOpen) {
|
||||
setIsOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (model: OpenRouterModel) => {
|
||||
onChange(model.id);
|
||||
setIsOpen(false);
|
||||
setSearch('');
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
setSearch(newValue);
|
||||
onChange(newValue);
|
||||
if (!isOpen && newValue) {
|
||||
setIsOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputFocus = () => {
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={cn('relative', className)}>
|
||||
{/* Input with dropdown trigger */}
|
||||
<div className="relative">
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={search || value}
|
||||
onChange={handleInputChange}
|
||||
onFocus={handleInputFocus}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
className="pr-8 font-mono text-sm"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
disabled={disabled}
|
||||
className="absolute right-0 top-0 h-full px-2 text-muted-foreground hover:text-foreground disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<ChevronDown className={cn('h-4 w-4 transition-transform', isOpen && 'rotate-180')} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Current model info */}
|
||||
{currentModel && !isOpen && (
|
||||
<p className="text-xs text-muted-foreground mt-1 truncate">
|
||||
{currentModel.name} - {formatContextLength(currentModel.context_length)} context
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Dropdown */}
|
||||
{isOpen && (
|
||||
<div className="absolute z-50 mt-1 w-full max-h-80 overflow-auto rounded-md border bg-popover shadow-lg">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-6 text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Loading models...
|
||||
</div>
|
||||
) : filteredModels.length === 0 ? (
|
||||
<div className="py-6 text-center text-muted-foreground">
|
||||
<Search className="h-4 w-4 mx-auto mb-2" />
|
||||
<p className="text-sm">No models found</p>
|
||||
<p className="text-xs mt-1">Type a custom model ID or refine your search</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-1">
|
||||
{filteredModels.map((model, index) => {
|
||||
const isFeatured = index < 8 && !search && !value;
|
||||
return (
|
||||
<button
|
||||
key={model.id}
|
||||
type="button"
|
||||
onClick={() => handleSelect(model)}
|
||||
className={cn(
|
||||
'w-full px-3 py-2 text-left hover:bg-accent focus:bg-accent outline-none',
|
||||
model.id === value && 'bg-accent'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
{isFeatured && (
|
||||
<Sparkles className="h-3 w-3 text-yellow-500 mt-1 flex-shrink-0" />
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-mono text-sm truncate">
|
||||
{model.id}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
|
||||
<span>{formatContextLength(model.context_length)}</span>
|
||||
<span>-</span>
|
||||
<span>{formatModelPricing(model)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -12,43 +8,34 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Sparkles, Loader2, RefreshCw, Check, CheckSquare, Square, AlertTriangle, XCircle, CheckCircle2, Filter } from 'lucide-react';
|
||||
import {
|
||||
generatePack,
|
||||
generateQuestionsWithCouncil,
|
||||
suggestCategories,
|
||||
suggestPacks,
|
||||
getCouncilConfig,
|
||||
TONE_LEVELS,
|
||||
INTENSITY_LEVELS,
|
||||
type GeneratedPack,
|
||||
type GeneratedQuestion,
|
||||
type GeneratedCategoryIdea,
|
||||
type GeneratedPackIdea,
|
||||
type ToneLevel,
|
||||
type QuestionReview,
|
||||
type CouncilGenerationResult,
|
||||
type GenerationCandidate,
|
||||
} from '@/lib/openai';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Sparkles, Loader2, RefreshCw, Check } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// Extracted components
|
||||
import { useAiGeneration, type GeneratorType, type GeneratorContext } from './hooks/useAiGeneration';
|
||||
import { GenerationForm } from './GenerationForm';
|
||||
import { GenerationProgressDisplay } from './GenerationProgress';
|
||||
import { ReviewSummary, ModelBadge } from './ReviewSummary';
|
||||
import { QuestionList } from './QuestionList';
|
||||
import { CategoryIdeasList, PackIdeasList } from './IdeasList';
|
||||
import { PackPreview } from './PackPreview';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface AiGeneratorDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
type: 'pack' | 'questions' | 'category-ideas' | 'category-pack-ideas';
|
||||
context?: {
|
||||
categoryName?: string;
|
||||
packName?: string;
|
||||
packDescription?: string | null;
|
||||
existingCategories?: string[];
|
||||
existingPacks?: string[];
|
||||
existingQuestions?: string[];
|
||||
isExplicit?: boolean;
|
||||
};
|
||||
type: GeneratorType;
|
||||
context?: GeneratorContext;
|
||||
onGenerated: (result: any) => void;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function AiGeneratorDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
@@ -56,161 +43,27 @@ export function AiGeneratorDialog({
|
||||
context,
|
||||
onGenerated,
|
||||
}: AiGeneratorDialogProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingStep, setLoadingStep] = useState<'generating' | 'reviewing' | null>(null);
|
||||
const [count, setCount] = useState(10);
|
||||
// Default tone based on pack's explicit flag (5 for explicit packs, 3 for non-explicit)
|
||||
const [tone, setTone] = useState<ToneLevel>(context?.isExplicit ? 5 : 3);
|
||||
const isExplicit = tone >= 4; // For other generators that still use boolean
|
||||
const [crudeLang, setCrudeLang] = useState(false);
|
||||
const [inspiration, setInspiration] = useState('');
|
||||
const generation = useAiGeneration(type, context);
|
||||
|
||||
// Update tone when dialog opens with new context
|
||||
// Reset when dialog closes
|
||||
useEffect(() => {
|
||||
if (open && type === 'questions') {
|
||||
setTone(context?.isExplicit ? 5 : 3);
|
||||
if (!open) {
|
||||
generation.reset();
|
||||
}
|
||||
}, [open, context?.isExplicit, type]);
|
||||
}, [open]);
|
||||
|
||||
// Generated results
|
||||
const [generatedPack, setGeneratedPack] = useState<GeneratedPack | null>(null);
|
||||
const [generatedQuestions, setGeneratedQuestions] = useState<GeneratedQuestion[]>([]);
|
||||
const [generatedIdeas, setGeneratedIdeas] = useState<GeneratedCategoryIdea[]>([]);
|
||||
const [generatedPackIdeas, setGeneratedPackIdeas] = useState<GeneratedPackIdea[]>([]);
|
||||
|
||||
// Council review state
|
||||
const [reviews, setReviews] = useState<QuestionReview[]>([]);
|
||||
const [reviewSummary, setReviewSummary] = useState<CouncilGenerationResult['summary']>(null);
|
||||
const [reviewMetadata, setReviewMetadata] = useState<CouncilGenerationResult['metadata'] | null>(null);
|
||||
const [selectedGeneratorIndex, setSelectedGeneratorIndex] = useState<number | null>(null);
|
||||
const [allCandidates, setAllCandidates] = useState<GenerationCandidate[] | null>(null);
|
||||
const [filter, setFilter] = useState<'all' | 'pass' | 'flag' | 'reject'>('all');
|
||||
|
||||
// Selection state for questions
|
||||
const [selectedQuestionIndices, setSelectedQuestionIndices] = useState<Set<number>>(new Set());
|
||||
|
||||
// Get council config
|
||||
const councilConfig = getCouncilConfig();
|
||||
|
||||
// Helper to get review for a question index
|
||||
const getReviewForIndex = (index: number): QuestionReview | undefined => {
|
||||
if (!reviews || reviews.length === 0) return undefined;
|
||||
return reviews.find(r => r.index === index);
|
||||
};
|
||||
|
||||
// Filter questions based on current filter
|
||||
const getFilteredQuestionIndices = (): number[] => {
|
||||
if (!generatedQuestions || generatedQuestions.length === 0) {
|
||||
return [];
|
||||
}
|
||||
if (filter === 'all' || !reviews || reviews.length === 0) {
|
||||
return generatedQuestions.map((_, i) => i);
|
||||
}
|
||||
return reviews
|
||||
.filter(r => r.verdict === filter)
|
||||
.map(r => r.index);
|
||||
};
|
||||
|
||||
const handleGenerate = async () => {
|
||||
setLoading(true);
|
||||
setLoadingStep(null);
|
||||
// Reset council state
|
||||
setReviews([]);
|
||||
setReviewSummary(null);
|
||||
setReviewMetadata(null);
|
||||
setSelectedGeneratorIndex(null);
|
||||
setAllCandidates(null);
|
||||
setFilter('all');
|
||||
|
||||
try {
|
||||
if (type === 'pack') {
|
||||
const result = await generatePack(context?.categoryName, isExplicit, crudeLang, inspiration || undefined);
|
||||
setGeneratedPack(result);
|
||||
} else if (type === 'questions') {
|
||||
if (!context?.packName) {
|
||||
toast.error('Pack name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Use council approach
|
||||
setLoadingStep('generating');
|
||||
const result = await generateQuestionsWithCouncil(
|
||||
context.packName,
|
||||
count,
|
||||
undefined,
|
||||
tone,
|
||||
context.packDescription || undefined,
|
||||
context.existingQuestions,
|
||||
crudeLang,
|
||||
inspiration || undefined
|
||||
);
|
||||
|
||||
const questions = result.questions || [];
|
||||
const reviewList = result.reviews || [];
|
||||
|
||||
setGeneratedQuestions(questions);
|
||||
setReviews(reviewList);
|
||||
setReviewSummary(result.summary);
|
||||
setReviewMetadata(result.metadata);
|
||||
setSelectedGeneratorIndex(result.selectedGeneratorIndex);
|
||||
setAllCandidates(result.allCandidates);
|
||||
|
||||
// Smart selection based on review results
|
||||
if (reviewList.length > 0) {
|
||||
// Select passed and flagged questions by default, not rejected
|
||||
const selectedIndices = new Set<number>();
|
||||
reviewList.forEach(r => {
|
||||
if (r.verdict === 'pass' || r.verdict === 'flag') {
|
||||
selectedIndices.add(r.index);
|
||||
}
|
||||
});
|
||||
setSelectedQuestionIndices(selectedIndices);
|
||||
|
||||
// Show toast with summary
|
||||
if (result.summary) {
|
||||
const { passed, flagged, rejected } = result.summary;
|
||||
const generatorInfo = allCandidates && allCandidates.length > 1 && result.selectedGeneratorIndex !== null
|
||||
? ` (from generator ${result.selectedGeneratorIndex + 1})`
|
||||
: '';
|
||||
if (rejected > 0) {
|
||||
toast.warning(`Review complete: ${passed} passed, ${flagged} flagged, ${rejected} rejected${generatorInfo}`);
|
||||
} else {
|
||||
toast.success(`Review complete: ${passed} passed, ${flagged} flagged${generatorInfo}`);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// No review (council disabled or failed) - select all
|
||||
setSelectedQuestionIndices(new Set(questions.map((_, i) => i)));
|
||||
if (councilConfig.enabled && !result.metadata?.reviewerModel) {
|
||||
toast.warning('Council review failed - showing unreviewed questions');
|
||||
}
|
||||
}
|
||||
} else if (type === 'category-ideas') {
|
||||
const result = await suggestCategories(context?.existingCategories || [], isExplicit, crudeLang, inspiration || undefined);
|
||||
setGeneratedIdeas(result);
|
||||
} else if (type === 'category-pack-ideas') {
|
||||
if (!context?.categoryName) {
|
||||
toast.error('Category name is required');
|
||||
return;
|
||||
}
|
||||
const result = await suggestPacks(context.categoryName, context?.existingPacks || [], isExplicit, crudeLang, inspiration || undefined);
|
||||
setGeneratedPackIdeas(result);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('AI generation error:', error);
|
||||
toast.error('Failed to generate content. Check your API key.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingStep(null);
|
||||
}
|
||||
const handleClose = () => {
|
||||
generation.reset();
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const handleUse = () => {
|
||||
if (type === 'pack' && generatedPack) {
|
||||
onGenerated(generatedPack);
|
||||
} else if (type === 'questions' && generatedQuestions.length > 0) {
|
||||
// Only pass selected questions
|
||||
const selectedQuestions = generatedQuestions.filter((_, i) => selectedQuestionIndices.has(i));
|
||||
if (type === 'pack' && generation.results.pack) {
|
||||
onGenerated(generation.results.pack);
|
||||
} else if (type === 'questions' && generation.results.questions.length > 0) {
|
||||
const selectedQuestions = generation.results.questions.filter(
|
||||
(_, i) => generation.selectedIndices.has(i)
|
||||
);
|
||||
if (selectedQuestions.length === 0) {
|
||||
toast.error('Please select at least one question');
|
||||
return;
|
||||
@@ -219,43 +72,26 @@ export function AiGeneratorDialog({
|
||||
}
|
||||
};
|
||||
|
||||
const toggleQuestionSelection = (index: number) => {
|
||||
setSelectedQuestionIndices(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(index)) {
|
||||
newSet.delete(index);
|
||||
} else {
|
||||
newSet.add(index);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
const getTitle = () => {
|
||||
switch (type) {
|
||||
case 'pack': return 'Pack';
|
||||
case 'questions': return 'Question';
|
||||
case 'category-pack-ideas': return 'Pack Ideas';
|
||||
default: return 'Category';
|
||||
}
|
||||
};
|
||||
|
||||
const selectAllQuestions = () => {
|
||||
setSelectedQuestionIndices(new Set(generatedQuestions.map((_, i) => i)));
|
||||
};
|
||||
|
||||
const deselectAllQuestions = () => {
|
||||
setSelectedQuestionIndices(new Set());
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
// Reset state
|
||||
setGeneratedPack(null);
|
||||
setGeneratedQuestions([]);
|
||||
setGeneratedIdeas([]);
|
||||
setGeneratedPackIdeas([]);
|
||||
setSelectedQuestionIndices(new Set());
|
||||
setCrudeLang(false);
|
||||
setInspiration('');
|
||||
// Reset council state
|
||||
setReviews([]);
|
||||
setReviewSummary(null);
|
||||
setReviewMetadata(null);
|
||||
setSelectedGeneratorIndex(null);
|
||||
setAllCandidates(null);
|
||||
setFilter('all');
|
||||
onOpenChange(false);
|
||||
const getDescription = () => {
|
||||
switch (type) {
|
||||
case 'pack':
|
||||
return 'Generate a creative question pack name and description using AI.';
|
||||
case 'questions':
|
||||
return 'Generate multiple questions for this pack using AI.';
|
||||
case 'category-pack-ideas':
|
||||
return 'Generate unique pack ideas for this category.';
|
||||
default:
|
||||
return 'Get creative category ideas based on your existing ones.';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -264,127 +100,37 @@ export function AiGeneratorDialog({
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-primary" />
|
||||
AI {type === 'pack' ? 'Pack' : type === 'questions' ? 'Question' : type === 'category-pack-ideas' ? 'Pack Ideas' : 'Category'} Generator
|
||||
AI {getTitle()} Generator
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{type === 'pack'
|
||||
? 'Generate a creative question pack name and description using AI.'
|
||||
: type === 'questions'
|
||||
? 'Generate multiple questions for this pack using AI.'
|
||||
: type === 'category-pack-ideas'
|
||||
? 'Generate unique pack ideas for this category.'
|
||||
: 'Get creative category ideas based on your existing ones.'}
|
||||
{getDescription()}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Configuration */}
|
||||
{type === 'questions' && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="count">Number of Questions</Label>
|
||||
<Input
|
||||
id="count"
|
||||
type="number"
|
||||
min={1}
|
||||
max={50}
|
||||
value={count}
|
||||
onChange={(e) => setCount(parseInt(e.target.value) || 10)}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Configuration Form */}
|
||||
<GenerationForm
|
||||
type={type}
|
||||
context={context}
|
||||
config={generation.config}
|
||||
onCountChange={generation.setCount}
|
||||
onToneChange={generation.setTone}
|
||||
onCrudeLangChange={generation.setCrudeLang}
|
||||
onInspirationChange={generation.setInspiration}
|
||||
/>
|
||||
|
||||
{/* Wildness Level Selector for Questions */}
|
||||
{type === 'questions' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Wildness Level</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{TONE_LEVELS.map((t) => (
|
||||
<Button
|
||||
key={t.level}
|
||||
type="button"
|
||||
variant={tone === t.level ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setTone(t.level as ToneLevel)}
|
||||
className={tone === t.level ? 'ring-2 ring-offset-1' : ''}
|
||||
title={t.description}
|
||||
>
|
||||
{t.level}. {t.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{TONE_LEVELS.find(t => t.level === tone)?.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Wild/Explicit Toggle for other generators */}
|
||||
{(type === 'category-ideas' || type === 'category-pack-ideas' || type === 'pack') && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="explicit-mode"
|
||||
checked={isExplicit}
|
||||
onCheckedChange={(checked) => setTone(checked ? 5 : 3)}
|
||||
/>
|
||||
<Label htmlFor="explicit-mode">Include Wild/Adult Ideas</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Crude Language Override Toggle */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="crude-lang"
|
||||
checked={crudeLang}
|
||||
onCheckedChange={setCrudeLang}
|
||||
/>
|
||||
<Label htmlFor="crude-lang">Crude Language Override</Label>
|
||||
<span className="text-xs text-muted-foreground">(use "fuck", "suck cock" etc. instead of tasteful phrasing)</span>
|
||||
</div>
|
||||
|
||||
{/* Inspiration/Suggestions Textarea */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="inspiration">Inspiration / Suggestions (optional)</Label>
|
||||
<Textarea
|
||||
id="inspiration"
|
||||
placeholder="Provide any themes, ideas, or guidance for the AI to consider..."
|
||||
value={inspiration}
|
||||
onChange={(e) => setInspiration(e.target.value)}
|
||||
rows={3}
|
||||
className="resize-none"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Add freetext suggestions to guide the AI generation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Context info */}
|
||||
{context?.categoryName && (
|
||||
<div className="rounded-md bg-muted p-3 text-sm">
|
||||
<strong>Category:</strong> {context.categoryName}
|
||||
</div>
|
||||
)}
|
||||
{context?.packName && (
|
||||
<div className="rounded-md bg-muted p-3 text-sm space-y-1">
|
||||
<div><strong>Pack:</strong> {context.packName}</div>
|
||||
{context.packDescription && (
|
||||
<div className="text-muted-foreground text-xs">{context.packDescription}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Generate button */}
|
||||
{!generatedPack && generatedQuestions.length === 0 && generatedIdeas.length === 0 && generatedPackIdeas.length === 0 && (
|
||||
<div className="space-y-2">
|
||||
<Button onClick={handleGenerate} disabled={loading} className="w-full">
|
||||
{loading ? (
|
||||
{/* Generate Button (only when no results) */}
|
||||
{!generation.hasResults && (
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
onClick={generation.generate}
|
||||
disabled={generation.loading}
|
||||
className="w-full"
|
||||
>
|
||||
{generation.loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{loadingStep === 'generating' && councilConfig.enabled
|
||||
? `Step 1/2: Generating${councilConfig.generators.length > 1 ? ` with ${councilConfig.generators.length} models` : ''}...`
|
||||
: loadingStep === 'reviewing'
|
||||
? 'Step 2/2: Reviewing & selecting best...'
|
||||
: 'Generating...'}
|
||||
{generation.progress?.message || 'Generating...'}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@@ -393,303 +139,114 @@ export function AiGeneratorDialog({
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{councilConfig.enabled && type === 'questions' && !loading && (
|
||||
|
||||
{/* Generation Progress */}
|
||||
{generation.loading && generation.progress && (
|
||||
<GenerationProgressDisplay
|
||||
progress={generation.progress}
|
||||
councilConfig={generation.councilConfig}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Council info */}
|
||||
{generation.councilConfig.enabled && type === 'questions' && !generation.loading && (
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
Council mode: {councilConfig.generators.length} generator{councilConfig.generators.length > 1 ? 's' : ''} + reviewer
|
||||
{councilConfig.generators.length > 1 && ' (best output will be selected)'}
|
||||
Council mode: {generation.councilConfig.generators.length} generator
|
||||
{generation.councilConfig.generators.length > 1 ? 's' : ''} + reviewer
|
||||
{generation.councilConfig.generators.length > 1 && ' (best output will be selected)'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Generated Pack Preview */}
|
||||
{generatedPack && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-medium">Generated Pack</h4>
|
||||
<div className="rounded-lg border bg-card p-4 space-y-2">
|
||||
<p className="font-semibold text-lg">{generatedPack.name}</p>
|
||||
<p className="text-muted-foreground">{generatedPack.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
{generation.results.pack && (
|
||||
<PackPreview
|
||||
pack={generation.results.pack}
|
||||
sourceModel={generation.sourceModel}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Generated Questions Preview */}
|
||||
{generatedQuestions.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{/* Review Summary Bar */}
|
||||
{reviewSummary && (
|
||||
<div className="rounded-lg border bg-muted/50 p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="flex items-center gap-1 text-green-600">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
{reviewSummary.passed} Passed
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-yellow-600">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
{reviewSummary.flagged} Flagged
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-red-600">
|
||||
<XCircle className="h-4 w-4" />
|
||||
{reviewSummary.rejected} Rejected
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
Quality: {reviewSummary.overallQuality}/10
|
||||
</span>
|
||||
</div>
|
||||
{reviewMetadata && (
|
||||
<div className="text-xs text-muted-foreground space-y-1">
|
||||
<p>
|
||||
Generated in {(reviewMetadata.totalGenerationTime / 1000).toFixed(1)}s
|
||||
{reviewMetadata.reviewTime > 0 && ` • Reviewed in ${(reviewMetadata.reviewTime / 1000).toFixed(1)}s`}
|
||||
</p>
|
||||
{allCandidates && allCandidates.length > 1 && selectedGeneratorIndex !== null && (
|
||||
<p className="text-primary font-medium">
|
||||
Selected: Generator {selectedGeneratorIndex + 1} of {allCandidates.length}
|
||||
{' '}({allCandidates[selectedGeneratorIndex]?.generatorModel.split('/').pop()})
|
||||
</p>
|
||||
)}
|
||||
{reviewMetadata.generatorModels.length > 1 && (
|
||||
<p>
|
||||
Compared {reviewMetadata.generatorModels.length} generators: {reviewMetadata.generatorModels.map(m => m.split('/').pop()).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{generation.results.questions.length > 0 && (
|
||||
<>
|
||||
{/* Simple model badge when council is disabled */}
|
||||
{!generation.reviewState.summary && generation.reviewState.metadata && (
|
||||
<ModelBadge
|
||||
model={generation.reviewState.metadata.generatorModels[0]}
|
||||
generationTime={generation.reviewState.metadata.totalGenerationTime}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium">
|
||||
Generated Questions ({selectedQuestionIndices.size}/{generatedQuestions.length} selected)
|
||||
</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={selectAllQuestions}
|
||||
disabled={selectedQuestionIndices.size === generatedQuestions.length}
|
||||
>
|
||||
<CheckSquare className="mr-1 h-3 w-3" />
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={deselectAllQuestions}
|
||||
disabled={selectedQuestionIndices.size === 0}
|
||||
>
|
||||
<Square className="mr-1 h-3 w-3" />
|
||||
None
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Review Summary */}
|
||||
<ReviewSummary
|
||||
summary={generation.reviewState.summary}
|
||||
metadata={generation.reviewState.metadata}
|
||||
selectionMode={generation.reviewState.selectionMode}
|
||||
allCandidates={generation.reviewState.allCandidates}
|
||||
selectedGeneratorIndex={generation.reviewState.selectedGeneratorIndex}
|
||||
cherryPickResult={generation.reviewState.cherryPickResult}
|
||||
/>
|
||||
|
||||
{/* Filter Buttons */}
|
||||
{reviews && reviews.length > 0 && (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'all' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('all')}
|
||||
>
|
||||
<Filter className="mr-1 h-3 w-3" />
|
||||
All ({generatedQuestions.length})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'pass' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('pass')}
|
||||
className={filter === 'pass' ? '' : 'text-green-600 hover:text-green-700'}
|
||||
>
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||||
Passed ({reviewSummary?.passed || 0})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'flag' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('flag')}
|
||||
className={filter === 'flag' ? '' : 'text-yellow-600 hover:text-yellow-700'}
|
||||
>
|
||||
<AlertTriangle className="mr-1 h-3 w-3" />
|
||||
Flagged ({reviewSummary?.flagged || 0})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'reject' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('reject')}
|
||||
className={filter === 'reject' ? '' : 'text-red-600 hover:text-red-700'}
|
||||
>
|
||||
<XCircle className="mr-1 h-3 w-3" />
|
||||
Rejected ({reviewSummary?.rejected || 0})
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{getFilteredQuestionIndices().map((i) => {
|
||||
const q = generatedQuestions[i];
|
||||
const review = getReviewForIndex(i);
|
||||
const isRejected = review?.verdict === 'reject';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`rounded-lg border bg-card p-3 text-sm cursor-pointer transition-colors ${
|
||||
isRejected
|
||||
? 'opacity-50 border-red-300 bg-red-50/50 dark:bg-red-950/20'
|
||||
: selectedQuestionIndices.has(i)
|
||||
? 'border-primary ring-1 ring-primary/20'
|
||||
: 'opacity-60 hover:opacity-80'
|
||||
}`}
|
||||
onClick={() => toggleQuestionSelection(i)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<Checkbox
|
||||
checked={selectedQuestionIndices.has(i)}
|
||||
onCheckedChange={() => toggleQuestionSelection(i)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div>
|
||||
<p>{q.text}</p>
|
||||
{q.partner_text && (
|
||||
<p className="text-muted-foreground text-xs mt-1">
|
||||
Partner: {q.partner_text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span
|
||||
className={`inline-block text-xs px-2 py-0.5 rounded text-white ${INTENSITY_LEVELS[q.intensity - 1]?.color || 'bg-muted'}`}
|
||||
title={INTENSITY_LEVELS[q.intensity - 1]?.description}
|
||||
>
|
||||
{q.intensity} - {INTENSITY_LEVELS[q.intensity - 1]?.label || 'Unknown'}
|
||||
</span>
|
||||
|
||||
{/* Review Verdict Badge */}
|
||||
{review && (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded ${
|
||||
review.verdict === 'pass'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: review.verdict === 'flag'
|
||||
? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}`}
|
||||
title={review.scores ? `Scores: ${review.scores.guidelineCompliance}/${review.scores.creativity}/${review.scores.clarity}/${review.scores.intensityAccuracy}` : ''}
|
||||
>
|
||||
{review.verdict === 'pass' && <CheckCircle2 className="h-3 w-3" />}
|
||||
{review.verdict === 'flag' && <AlertTriangle className="h-3 w-3" />}
|
||||
{review.verdict === 'reject' && <XCircle className="h-3 w-3" />}
|
||||
{review.verdict.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Review Issues/Suggestions */}
|
||||
{review && ((review.issues && review.issues.length > 0) || review.suggestions) && (
|
||||
<div className="text-xs space-y-1 pt-1 border-t border-dashed">
|
||||
{review.issues && review.issues.length > 0 && (
|
||||
<ul className="list-disc list-inside text-muted-foreground">
|
||||
{review.issues.map((issue, idx) => (
|
||||
<li key={idx}>{issue}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{review.suggestions && (
|
||||
<p className="text-blue-600 dark:text-blue-400">
|
||||
Suggestion: {review.suggestions}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Question List */}
|
||||
<QuestionList
|
||||
questions={generation.results.questions}
|
||||
reviews={generation.reviewState.reviews}
|
||||
reviewSummary={generation.reviewState.summary}
|
||||
selectionMode={generation.reviewState.selectionMode}
|
||||
selectedIndices={generation.selectedIndices}
|
||||
filter={generation.filter}
|
||||
filteredIndices={generation.getFilteredQuestionIndices()}
|
||||
onToggleSelection={generation.toggleSelection}
|
||||
onSelectAll={generation.selectAll}
|
||||
onDeselectAll={generation.deselectAll}
|
||||
onFilterChange={generation.setFilter}
|
||||
getReviewForIndex={generation.getReviewForIndex}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Generated Ideas Preview */}
|
||||
{generatedIdeas.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-medium">Suggested Categories</h4>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{generatedIdeas.map((idea, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between rounded-lg border bg-card p-3 hover:bg-accent/50 cursor-pointer transition-colors"
|
||||
onClick={() => onGenerated(idea)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{idea.icon}</span>
|
||||
<div>
|
||||
<span className="font-medium block">{idea.name}</span>
|
||||
<span className="text-xs text-muted-foreground">{idea.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost">Use</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground text-center">Click an item to use it</p>
|
||||
</div>
|
||||
)}
|
||||
{/* Generated Category Ideas */}
|
||||
<CategoryIdeasList
|
||||
ideas={generation.results.categoryIdeas}
|
||||
sourceModel={generation.sourceModel}
|
||||
onSelectIdea={onGenerated}
|
||||
/>
|
||||
|
||||
{/* Generated Pack Ideas Preview */}
|
||||
{generatedPackIdeas.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-medium">Suggested Packs</h4>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{generatedPackIdeas.map((idea, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between rounded-lg border bg-card p-3 hover:bg-accent/50 cursor-pointer transition-colors"
|
||||
onClick={() => onGenerated(idea)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{idea.icon}</span>
|
||||
<div>
|
||||
<span className="font-medium block">{idea.name}</span>
|
||||
<span className="text-xs text-muted-foreground">{idea.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost">Use</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground text-center">Click an item to use it</p>
|
||||
</div>
|
||||
)}
|
||||
{/* Generated Pack Ideas */}
|
||||
<PackIdeasList
|
||||
ideas={generation.results.packIdeas}
|
||||
sourceModel={generation.sourceModel}
|
||||
onSelectIdea={onGenerated}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
{(generatedPack || generatedQuestions.length > 0 || generatedIdeas.length > 0 || generatedPackIdeas.length > 0) && (
|
||||
{generation.hasResults && (
|
||||
<>
|
||||
<Button variant="outline" onClick={handleGenerate} disabled={loading}>
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={generation.generate}
|
||||
disabled={generation.loading}
|
||||
>
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${generation.loading ? 'animate-spin' : ''}`} />
|
||||
Regenerate
|
||||
</Button>
|
||||
{type !== 'category-ideas' && type !== 'category-pack-ideas' && (
|
||||
<Button onClick={handleUse} disabled={type === 'questions' && selectedQuestionIndices.size === 0}>
|
||||
<Button
|
||||
onClick={handleUse}
|
||||
disabled={type === 'questions' && generation.selectedIndices.size === 0}
|
||||
>
|
||||
<Check className="mr-2 h-4 w-4" />
|
||||
{type === 'questions' ? `Use Selected (${selectedQuestionIndices.size})` : 'Use This'}
|
||||
{type === 'questions'
|
||||
? `Use Selected (${generation.selectedIndices.size})`
|
||||
: 'Use This'
|
||||
}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!generatedPack && generatedQuestions.length === 0 && generatedIdeas.length === 0 && generatedPackIdeas.length === 0 && (
|
||||
{!generation.hasResults && (
|
||||
<Button variant="outline" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { TONE_LEVELS, type ToneLevel } from '@/lib/openai';
|
||||
import type { GeneratorType, GeneratorContext, GenerationConfig } from './hooks/useAiGeneration';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface GenerationFormProps {
|
||||
type: GeneratorType;
|
||||
context?: GeneratorContext;
|
||||
config: GenerationConfig;
|
||||
onCountChange: (count: number) => void;
|
||||
onToneChange: (tone: ToneLevel) => void;
|
||||
onCrudeLangChange: (crudeLang: boolean) => void;
|
||||
onInspirationChange: (inspiration: string) => void;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function GenerationForm({
|
||||
type,
|
||||
context,
|
||||
config,
|
||||
onCountChange,
|
||||
onToneChange,
|
||||
onCrudeLangChange,
|
||||
onInspirationChange,
|
||||
}: GenerationFormProps) {
|
||||
const isExplicit = config.tone >= 4;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Question Count (questions only) */}
|
||||
{type === 'questions' && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="count">Number of Questions</Label>
|
||||
<Input
|
||||
id="count"
|
||||
type="number"
|
||||
min={1}
|
||||
max={50}
|
||||
value={config.count}
|
||||
onChange={(e) => onCountChange(parseInt(e.target.value) || 10)}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Wildness Level Selector (questions only) */}
|
||||
{type === 'questions' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Wildness Level</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{TONE_LEVELS.map((t) => (
|
||||
<Button
|
||||
key={t.level}
|
||||
type="button"
|
||||
variant={config.tone === t.level ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => onToneChange(t.level as ToneLevel)}
|
||||
className={config.tone === t.level ? 'ring-2 ring-offset-1' : ''}
|
||||
title={t.description}
|
||||
>
|
||||
{t.level}. {t.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{TONE_LEVELS.find(t => t.level === config.tone)?.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Wild/Explicit Toggle (for other generators) */}
|
||||
{(type === 'category-ideas' || type === 'category-pack-ideas' || type === 'pack') && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="explicit-mode"
|
||||
checked={isExplicit}
|
||||
onCheckedChange={(checked: boolean) => onToneChange(checked ? 5 : 3)}
|
||||
/>
|
||||
<Label htmlFor="explicit-mode">Include Wild/Adult Ideas</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Crude Language Override Toggle */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="crude-lang"
|
||||
checked={config.crudeLang}
|
||||
onCheckedChange={onCrudeLangChange}
|
||||
/>
|
||||
<Label htmlFor="crude-lang">Crude Language Override</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
(use "fuck", "suck cock" etc. instead of tasteful phrasing)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Inspiration/Suggestions Textarea */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="inspiration">Inspiration / Suggestions (optional)</Label>
|
||||
<Textarea
|
||||
id="inspiration"
|
||||
placeholder="Provide any themes, ideas, or guidance for the AI to consider..."
|
||||
value={config.inspiration}
|
||||
onChange={(e) => onInspirationChange(e.target.value)}
|
||||
rows={3}
|
||||
className="resize-none"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Add freetext suggestions to guide the AI generation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Context info */}
|
||||
{context?.categoryName && (
|
||||
<div className="rounded-md bg-muted p-3 text-sm">
|
||||
<strong>Category:</strong> {context.categoryName}
|
||||
</div>
|
||||
)}
|
||||
{context?.packName && (
|
||||
<div className="rounded-md bg-muted p-3 text-sm space-y-1">
|
||||
<div><strong>Pack:</strong> {context.packName}</div>
|
||||
{context.packDescription && (
|
||||
<div className="text-muted-foreground text-xs">{context.packDescription}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
|
||||
import type { GenerationProgress, CouncilConfig } from '@/lib/openai';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface GenerationProgressDisplayProps {
|
||||
progress: GenerationProgress;
|
||||
councilConfig: CouncilConfig;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function GenerationProgressDisplay({
|
||||
progress,
|
||||
councilConfig,
|
||||
}: GenerationProgressDisplayProps) {
|
||||
if (!councilConfig.enabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-muted/30 p-3 space-y-2">
|
||||
{/* Phase indicator */}
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<span className={progress.phase === 'generating' ? 'text-primary' : 'text-muted-foreground'}>
|
||||
Step 1: Generate
|
||||
</span>
|
||||
<span className="text-muted-foreground">→</span>
|
||||
<span className={progress.phase === 'reviewing' ? 'text-primary' : 'text-muted-foreground'}>
|
||||
Step 2: Review
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Generator statuses */}
|
||||
<div className="space-y-1">
|
||||
{progress.generators.map((gen, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-xs">
|
||||
{gen.status === 'pending' && (
|
||||
<span className="w-4 h-4 rounded-full border border-muted-foreground/30" />
|
||||
)}
|
||||
{gen.status === 'generating' && (
|
||||
<Loader2 className="w-4 h-4 animate-spin text-primary" />
|
||||
)}
|
||||
{gen.status === 'completed' && (
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
)}
|
||||
{gen.status === 'failed' && (
|
||||
<XCircle className="w-4 h-4 text-red-500" />
|
||||
)}
|
||||
<span className={
|
||||
gen.status === 'completed'
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: gen.status === 'failed'
|
||||
? 'text-red-600'
|
||||
: ''
|
||||
}>
|
||||
{gen.shortName}
|
||||
</span>
|
||||
{gen.status === 'completed' && gen.questionCount !== undefined && (
|
||||
<span className="text-muted-foreground">
|
||||
({gen.questionCount} questions in {((gen.timeMs || 0) / 1000).toFixed(1)}s)
|
||||
</span>
|
||||
)}
|
||||
{gen.status === 'failed' && (
|
||||
<span className="text-red-500">failed</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Reviewer status */}
|
||||
{progress.reviewer && (
|
||||
<div className="flex items-center gap-2 text-xs pt-1 border-t border-muted-foreground/20">
|
||||
{progress.reviewer.status === 'pending' && (
|
||||
<span className="w-4 h-4 rounded-full border border-muted-foreground/30" />
|
||||
)}
|
||||
{progress.reviewer.status === 'reviewing' && (
|
||||
<Loader2 className="w-4 h-4 animate-spin text-primary" />
|
||||
)}
|
||||
{progress.reviewer.status === 'completed' && (
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
)}
|
||||
<span className={
|
||||
progress.reviewer.status === 'reviewing'
|
||||
? 'text-primary'
|
||||
: progress.reviewer.status === 'completed'
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: 'text-muted-foreground'
|
||||
}>
|
||||
Reviewer: {progress.reviewer.shortName}
|
||||
</span>
|
||||
{progress.reviewer.status === 'reviewing' && (
|
||||
<span className="text-muted-foreground">(selecting best questions...)</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Bot } from 'lucide-react';
|
||||
import type { GeneratedCategoryIdea, GeneratedPackIdea } from '@/lib/openai';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface IdeasListProps<T extends GeneratedCategoryIdea | GeneratedPackIdea> {
|
||||
title: string;
|
||||
ideas: T[];
|
||||
sourceModel: string | null;
|
||||
onSelectIdea: (idea: T) => void;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Helper
|
||||
// =============================================================================
|
||||
|
||||
function formatModelName(model: string): string {
|
||||
const parts = model.split('/');
|
||||
return parts.length > 1 ? parts[parts.length - 1] : model;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function IdeasList<T extends GeneratedCategoryIdea | GeneratedPackIdea>({
|
||||
title,
|
||||
ideas,
|
||||
sourceModel,
|
||||
onSelectIdea,
|
||||
}: IdeasListProps<T>) {
|
||||
if (ideas.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium">{title}</h4>
|
||||
{sourceModel && (
|
||||
<span className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
|
||||
<Bot className="h-3 w-3" />
|
||||
{formatModelName(sourceModel)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{ideas.map((idea, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between rounded-lg border bg-card p-3 hover:bg-accent/50 cursor-pointer transition-colors"
|
||||
onClick={() => onSelectIdea(idea)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{idea.icon}</span>
|
||||
<div>
|
||||
<span className="font-medium block">{idea.name}</span>
|
||||
<span className="text-xs text-muted-foreground">{idea.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost">Use</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground text-center">Click an item to use it</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Specialized Exports (type-safe wrappers)
|
||||
// =============================================================================
|
||||
|
||||
interface CategoryIdeasListProps {
|
||||
ideas: GeneratedCategoryIdea[];
|
||||
sourceModel: string | null;
|
||||
onSelectIdea: (idea: GeneratedCategoryIdea) => void;
|
||||
}
|
||||
|
||||
export function CategoryIdeasList({ ideas, sourceModel, onSelectIdea }: CategoryIdeasListProps) {
|
||||
return (
|
||||
<IdeasList
|
||||
title="Suggested Categories"
|
||||
ideas={ideas}
|
||||
sourceModel={sourceModel}
|
||||
onSelectIdea={onSelectIdea}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface PackIdeasListProps {
|
||||
ideas: GeneratedPackIdea[];
|
||||
sourceModel: string | null;
|
||||
onSelectIdea: (idea: GeneratedPackIdea) => void;
|
||||
}
|
||||
|
||||
export function PackIdeasList({ ideas, sourceModel, onSelectIdea }: PackIdeasListProps) {
|
||||
return (
|
||||
<IdeasList
|
||||
title="Suggested Packs"
|
||||
ideas={ideas}
|
||||
sourceModel={sourceModel}
|
||||
onSelectIdea={onSelectIdea}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Bot } from 'lucide-react';
|
||||
import type { GeneratedPack } from '@/lib/openai';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface PackPreviewProps {
|
||||
pack: GeneratedPack;
|
||||
sourceModel: string | null;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Helper
|
||||
// =============================================================================
|
||||
|
||||
function formatModelName(model: string): string {
|
||||
const parts = model.split('/');
|
||||
return parts.length > 1 ? parts[parts.length - 1] : model;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function PackPreview({ pack, sourceModel }: PackPreviewProps) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium">Generated Pack</h4>
|
||||
{sourceModel && (
|
||||
<span className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
|
||||
<Bot className="h-3 w-3" />
|
||||
{formatModelName(sourceModel)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-lg border bg-card p-4 space-y-2">
|
||||
<p className="font-semibold text-lg">{pack.name}</p>
|
||||
<p className="text-muted-foreground">{pack.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
CheckSquare,
|
||||
Square,
|
||||
Filter,
|
||||
CheckCircle2,
|
||||
AlertTriangle,
|
||||
XCircle,
|
||||
Bot,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
INTENSITY_LEVELS,
|
||||
type GeneratedQuestion,
|
||||
type QuestionReview,
|
||||
type CouncilGenerationResult,
|
||||
type CouncilSelectionMode,
|
||||
} from '@/lib/openai';
|
||||
import type { ReviewFilter } from './hooks/useAiGeneration';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface QuestionListProps {
|
||||
questions: GeneratedQuestion[];
|
||||
reviews: QuestionReview[];
|
||||
reviewSummary: CouncilGenerationResult['summary'];
|
||||
selectionMode: CouncilSelectionMode;
|
||||
selectedIndices: Set<number>;
|
||||
filter: ReviewFilter;
|
||||
filteredIndices: number[];
|
||||
onToggleSelection: (index: number) => void;
|
||||
onSelectAll: () => void;
|
||||
onDeselectAll: () => void;
|
||||
onFilterChange: (filter: ReviewFilter) => void;
|
||||
getReviewForIndex: (index: number) => QuestionReview | undefined;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function QuestionList({
|
||||
questions,
|
||||
reviews,
|
||||
reviewSummary,
|
||||
selectionMode,
|
||||
selectedIndices,
|
||||
filter,
|
||||
filteredIndices,
|
||||
onToggleSelection,
|
||||
onSelectAll,
|
||||
onDeselectAll,
|
||||
onFilterChange,
|
||||
getReviewForIndex,
|
||||
}: QuestionListProps) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Header with selection controls */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium">
|
||||
Generated Questions ({selectedIndices.size}/{questions.length} selected)
|
||||
</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onSelectAll}
|
||||
disabled={selectedIndices.size === questions.length}
|
||||
>
|
||||
<CheckSquare className="mr-1 h-3 w-3" />
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onDeselectAll}
|
||||
disabled={selectedIndices.size === 0}
|
||||
>
|
||||
<Square className="mr-1 h-3 w-3" />
|
||||
None
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Buttons */}
|
||||
{reviews.length > 0 && (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'all' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => onFilterChange('all')}
|
||||
>
|
||||
<Filter className="mr-1 h-3 w-3" />
|
||||
All ({questions.length})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'pass' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => onFilterChange('pass')}
|
||||
className={filter === 'pass' ? '' : 'text-green-600 hover:text-green-700'}
|
||||
>
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||||
Passed ({reviewSummary?.passed || 0})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'flag' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => onFilterChange('flag')}
|
||||
className={filter === 'flag' ? '' : 'text-yellow-600 hover:text-yellow-700'}
|
||||
>
|
||||
<AlertTriangle className="mr-1 h-3 w-3" />
|
||||
Flagged ({reviewSummary?.flagged || 0})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={filter === 'reject' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => onFilterChange('reject')}
|
||||
className={filter === 'reject' ? '' : 'text-red-600 hover:text-red-700'}
|
||||
>
|
||||
<XCircle className="mr-1 h-3 w-3" />
|
||||
Rejected ({reviewSummary?.rejected || 0})
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Question List */}
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{filteredIndices.map((i) => (
|
||||
<QuestionItem
|
||||
key={i}
|
||||
index={i}
|
||||
question={questions[i]}
|
||||
review={getReviewForIndex(i)}
|
||||
selectionMode={selectionMode}
|
||||
isSelected={selectedIndices.has(i)}
|
||||
onToggle={() => onToggleSelection(i)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Question Item
|
||||
// =============================================================================
|
||||
|
||||
interface QuestionItemProps {
|
||||
index: number;
|
||||
question: GeneratedQuestion;
|
||||
review: QuestionReview | undefined;
|
||||
selectionMode: CouncilSelectionMode;
|
||||
isSelected: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
function QuestionItem({
|
||||
question,
|
||||
review,
|
||||
selectionMode,
|
||||
isSelected,
|
||||
onToggle,
|
||||
}: QuestionItemProps) {
|
||||
const isRejected = review?.verdict === 'reject';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded-lg border bg-card p-3 text-sm cursor-pointer transition-colors ${
|
||||
isRejected
|
||||
? 'opacity-50 border-red-300 bg-red-50/50 dark:bg-red-950/20'
|
||||
: isSelected
|
||||
? 'border-primary ring-1 ring-primary/20'
|
||||
: 'opacity-60 hover:opacity-80'
|
||||
}`}
|
||||
onClick={onToggle}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={onToggle}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div>
|
||||
<p>{question.text}</p>
|
||||
{question.partner_text && (
|
||||
<p className="text-muted-foreground text-xs mt-1">
|
||||
Partner: {question.partner_text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{/* Intensity Badge */}
|
||||
<span
|
||||
className={`inline-block text-xs px-2 py-0.5 rounded text-white ${
|
||||
INTENSITY_LEVELS[question.intensity - 1]?.color || 'bg-muted'
|
||||
}`}
|
||||
title={INTENSITY_LEVELS[question.intensity - 1]?.description}
|
||||
>
|
||||
{question.intensity} - {INTENSITY_LEVELS[question.intensity - 1]?.label || 'Unknown'}
|
||||
</span>
|
||||
|
||||
{/* Source Generator Badge (cherry-pick mode) */}
|
||||
{selectionMode === 'cherry_pick' && question.sourceGeneratorModel && (
|
||||
<span className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
|
||||
<Bot className="h-3 w-3" />
|
||||
{question.sourceGeneratorModel.split('/').pop()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Review Verdict Badge */}
|
||||
{review && (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded ${
|
||||
review.verdict === 'pass'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: review.verdict === 'flag'
|
||||
? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}`}
|
||||
title={review.scores
|
||||
? `Scores: ${review.scores.guidelineCompliance}/${review.scores.creativity}/${review.scores.clarity}/${review.scores.intensityAccuracy}`
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{review.verdict === 'pass' && <CheckCircle2 className="h-3 w-3" />}
|
||||
{review.verdict === 'flag' && <AlertTriangle className="h-3 w-3" />}
|
||||
{review.verdict === 'reject' && <XCircle className="h-3 w-3" />}
|
||||
{review.verdict.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Review Issues/Suggestions */}
|
||||
{review && ((review.issues && review.issues.length > 0) || review.suggestions) && (
|
||||
<div className="text-xs space-y-1 pt-1 border-t border-dashed">
|
||||
{review.issues && review.issues.length > 0 && (
|
||||
<ul className="list-disc list-inside text-muted-foreground">
|
||||
{review.issues.map((issue, idx) => (
|
||||
<li key={idx}>{issue}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{review.suggestions && (
|
||||
<p className="text-blue-600 dark:text-blue-400">
|
||||
Suggestion: {review.suggestions}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { CheckCircle2, AlertTriangle, XCircle, Cherry, Bot } from 'lucide-react';
|
||||
import type {
|
||||
CouncilGenerationResult,
|
||||
GenerationCandidate,
|
||||
CherryPickResult,
|
||||
CouncilSelectionMode,
|
||||
} from '@/lib/openai';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface ReviewSummaryProps {
|
||||
summary: CouncilGenerationResult['summary'];
|
||||
metadata: CouncilGenerationResult['metadata'] | null;
|
||||
selectionMode: CouncilSelectionMode;
|
||||
allCandidates: GenerationCandidate[] | null;
|
||||
selectedGeneratorIndex: number | null;
|
||||
cherryPickResult: CherryPickResult | null;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function ReviewSummary({
|
||||
summary,
|
||||
metadata,
|
||||
selectionMode,
|
||||
allCandidates,
|
||||
selectedGeneratorIndex,
|
||||
cherryPickResult,
|
||||
}: ReviewSummaryProps) {
|
||||
if (!summary) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-muted/50 p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="flex items-center gap-1 text-green-600">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
{summary.passed} Passed
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-yellow-600">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
{summary.flagged} Flagged
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-red-600">
|
||||
<XCircle className="h-4 w-4" />
|
||||
{summary.rejected} Rejected
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
Quality: {summary.overallQuality}/10
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{metadata && (
|
||||
<div className="text-xs text-muted-foreground space-y-1">
|
||||
<p>
|
||||
Generated in {(metadata.totalGenerationTime / 1000).toFixed(1)}s
|
||||
{metadata.reviewTime > 0 && ` • Reviewed in ${(metadata.reviewTime / 1000).toFixed(1)}s`}
|
||||
</p>
|
||||
|
||||
{/* Cherry-pick mode info */}
|
||||
{selectionMode === 'cherry_pick' && cherryPickResult && (
|
||||
<div className="flex items-center gap-2 text-primary font-medium">
|
||||
<Cherry className="h-3 w-3" />
|
||||
<span>
|
||||
Cherry-picked from pool of {cherryPickResult.poolSize} questions
|
||||
{cherryPickResult.duplicatesRemoved > 0 &&
|
||||
` • ${cherryPickResult.duplicatesRemoved} duplicate${cherryPickResult.duplicatesRemoved > 1 ? 's' : ''} removed`
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Whole-set mode info */}
|
||||
{selectionMode === 'whole_set' && allCandidates && allCandidates.length > 1 && selectedGeneratorIndex !== null && (
|
||||
<p className="text-primary font-medium">
|
||||
Selected: Generator {selectedGeneratorIndex + 1} of {allCandidates.length}
|
||||
{' '}({allCandidates[selectedGeneratorIndex]?.generatorModel.split('/').pop()})
|
||||
</p>
|
||||
)}
|
||||
|
||||
{metadata.generatorModels.length > 1 && (
|
||||
<p>
|
||||
Compared {metadata.generatorModels.length} generators: {metadata.generatorModels.map(m => m.split('/').pop()).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Intensity distribution for cherry-pick */}
|
||||
{selectionMode === 'cherry_pick' && cherryPickResult && Object.keys(cherryPickResult.intensityDistribution).length > 0 && (
|
||||
<p>
|
||||
Intensity distribution: {Object.entries(cherryPickResult.intensityDistribution)
|
||||
.sort(([a], [b]) => Number(a) - Number(b))
|
||||
.map(([level, count]) => `L${level}:${count}`)
|
||||
.join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Simple Model Badge (for non-council generation)
|
||||
// =============================================================================
|
||||
|
||||
interface ModelBadgeProps {
|
||||
model: string;
|
||||
generationTime?: number;
|
||||
}
|
||||
|
||||
export function ModelBadge({ model, generationTime }: ModelBadgeProps) {
|
||||
const formatModelName = (m: string) => {
|
||||
const parts = m.split('/');
|
||||
return parts.length > 1 ? parts[parts.length - 1] : m;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Bot className="h-3 w-3" />
|
||||
<span>Generated by {formatModelName(model)}</span>
|
||||
{generationTime && generationTime > 0 && (
|
||||
<span>in {(generationTime / 1000).toFixed(1)}s</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,401 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
generatePack,
|
||||
generateQuestionsWithCouncil,
|
||||
suggestCategories,
|
||||
suggestPacks,
|
||||
getCouncilConfig,
|
||||
getModel,
|
||||
type GeneratedPack,
|
||||
type GeneratedQuestion,
|
||||
type GeneratedCategoryIdea,
|
||||
type GeneratedPackIdea,
|
||||
type ToneLevel,
|
||||
type QuestionReview,
|
||||
type CouncilGenerationResult,
|
||||
type GenerationCandidate,
|
||||
type CherryPickResult,
|
||||
type CouncilSelectionMode,
|
||||
type GenerationProgress,
|
||||
} from '@/lib/openai';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
export type GeneratorType = 'pack' | 'questions' | 'category-ideas' | 'category-pack-ideas';
|
||||
|
||||
export interface GeneratorContext {
|
||||
categoryName?: string;
|
||||
packName?: string;
|
||||
packDescription?: string | null;
|
||||
existingCategories?: string[];
|
||||
existingPacks?: string[];
|
||||
existingQuestions?: string[];
|
||||
isExplicit?: boolean;
|
||||
}
|
||||
|
||||
export interface GenerationConfig {
|
||||
count: number;
|
||||
tone: ToneLevel;
|
||||
crudeLang: boolean;
|
||||
inspiration: string;
|
||||
}
|
||||
|
||||
export interface GenerationResults {
|
||||
pack: GeneratedPack | null;
|
||||
questions: GeneratedQuestion[];
|
||||
categoryIdeas: GeneratedCategoryIdea[];
|
||||
packIdeas: GeneratedPackIdea[];
|
||||
}
|
||||
|
||||
export interface ReviewState {
|
||||
reviews: QuestionReview[];
|
||||
summary: CouncilGenerationResult['summary'];
|
||||
metadata: CouncilGenerationResult['metadata'] | null;
|
||||
selectedGeneratorIndex: number | null;
|
||||
allCandidates: GenerationCandidate[] | null;
|
||||
cherryPickResult: CherryPickResult | null;
|
||||
selectionMode: CouncilSelectionMode;
|
||||
}
|
||||
|
||||
export type ReviewFilter = 'all' | 'pass' | 'flag' | 'reject';
|
||||
|
||||
// =============================================================================
|
||||
// Hook
|
||||
// =============================================================================
|
||||
|
||||
export function useAiGeneration(
|
||||
type: GeneratorType,
|
||||
context?: GeneratorContext
|
||||
) {
|
||||
// Loading state
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [progress, setProgress] = useState<GenerationProgress | null>(null);
|
||||
|
||||
// Config state
|
||||
const [config, setConfig] = useState<GenerationConfig>({
|
||||
count: 10,
|
||||
tone: context?.isExplicit ? 5 : 3,
|
||||
crudeLang: false,
|
||||
inspiration: '',
|
||||
});
|
||||
|
||||
// Results state
|
||||
const [results, setResults] = useState<GenerationResults>({
|
||||
pack: null,
|
||||
questions: [],
|
||||
categoryIdeas: [],
|
||||
packIdeas: [],
|
||||
});
|
||||
|
||||
// Review state
|
||||
const [reviewState, setReviewState] = useState<ReviewState>({
|
||||
reviews: [],
|
||||
summary: null,
|
||||
metadata: null,
|
||||
selectedGeneratorIndex: null,
|
||||
allCandidates: null,
|
||||
cherryPickResult: null,
|
||||
selectionMode: 'whole_set',
|
||||
});
|
||||
|
||||
// Selection state
|
||||
const [selectedIndices, setSelectedIndices] = useState<Set<number>>(new Set());
|
||||
const [filter, setFilter] = useState<ReviewFilter>('all');
|
||||
|
||||
// Source model tracking
|
||||
const [sourceModel, setSourceModel] = useState<string | null>(null);
|
||||
|
||||
// Previous suggestions tracking (avoid repetition on regenerate)
|
||||
const [previousNames, setPreviousNames] = useState<{
|
||||
packs: string[];
|
||||
categories: string[];
|
||||
packIdeas: string[];
|
||||
}>({ packs: [], categories: [], packIdeas: [] });
|
||||
|
||||
// Council config
|
||||
const councilConfig = getCouncilConfig();
|
||||
|
||||
// Update tone when context changes
|
||||
useEffect(() => {
|
||||
if (type === 'questions') {
|
||||
setConfig(prev => ({
|
||||
...prev,
|
||||
tone: context?.isExplicit ? 5 : 3,
|
||||
}));
|
||||
}
|
||||
}, [context?.isExplicit, type]);
|
||||
|
||||
// Config setters
|
||||
const setCount = useCallback((count: number) => {
|
||||
setConfig(prev => ({ ...prev, count }));
|
||||
}, []);
|
||||
|
||||
const setTone = useCallback((tone: ToneLevel) => {
|
||||
setConfig(prev => ({ ...prev, tone }));
|
||||
}, []);
|
||||
|
||||
const setCrudeLang = useCallback((crudeLang: boolean) => {
|
||||
setConfig(prev => ({ ...prev, crudeLang }));
|
||||
}, []);
|
||||
|
||||
const setInspiration = useCallback((inspiration: string) => {
|
||||
setConfig(prev => ({ ...prev, inspiration }));
|
||||
}, []);
|
||||
|
||||
// Helper functions
|
||||
const getReviewForIndex = useCallback((index: number): QuestionReview | undefined => {
|
||||
return reviewState.reviews.find(r => r.index === index);
|
||||
}, [reviewState.reviews]);
|
||||
|
||||
const getFilteredQuestionIndices = useCallback((): number[] => {
|
||||
if (results.questions.length === 0) return [];
|
||||
if (filter === 'all' || reviewState.reviews.length === 0) {
|
||||
return results.questions.map((_, i) => i);
|
||||
}
|
||||
return reviewState.reviews
|
||||
.filter(r => r.verdict === filter)
|
||||
.map(r => r.index);
|
||||
}, [results.questions, reviewState.reviews, filter]);
|
||||
|
||||
// Selection handlers
|
||||
const toggleSelection = useCallback((index: number) => {
|
||||
setSelectedIndices(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(index)) {
|
||||
next.delete(index);
|
||||
} else {
|
||||
next.add(index);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const selectAll = useCallback(() => {
|
||||
setSelectedIndices(new Set(results.questions.map((_, i) => i)));
|
||||
}, [results.questions]);
|
||||
|
||||
const deselectAll = useCallback(() => {
|
||||
setSelectedIndices(new Set());
|
||||
}, []);
|
||||
|
||||
// Reset all state
|
||||
const reset = useCallback(() => {
|
||||
setResults({ pack: null, questions: [], categoryIdeas: [], packIdeas: [] });
|
||||
setSelectedIndices(new Set());
|
||||
setConfig(prev => ({ ...prev, crudeLang: false, inspiration: '' }));
|
||||
setReviewState({
|
||||
reviews: [],
|
||||
summary: null,
|
||||
metadata: null,
|
||||
selectedGeneratorIndex: null,
|
||||
allCandidates: null,
|
||||
cherryPickResult: null,
|
||||
selectionMode: 'whole_set',
|
||||
});
|
||||
setFilter('all');
|
||||
setProgress(null);
|
||||
setSourceModel(null);
|
||||
setPreviousNames({ packs: [], categories: [], packIdeas: [] });
|
||||
}, []);
|
||||
|
||||
// Main generate function
|
||||
const generate = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setProgress(null);
|
||||
|
||||
// Reset review state
|
||||
setReviewState({
|
||||
reviews: [],
|
||||
summary: null,
|
||||
metadata: null,
|
||||
selectedGeneratorIndex: null,
|
||||
allCandidates: null,
|
||||
cherryPickResult: null,
|
||||
selectionMode: 'whole_set',
|
||||
});
|
||||
setFilter('all');
|
||||
setSourceModel(null);
|
||||
|
||||
const isExplicit = config.tone >= 4;
|
||||
|
||||
try {
|
||||
if (type === 'pack') {
|
||||
// Track previous names to avoid repetition
|
||||
const avoidNames = results.pack
|
||||
? [...previousNames.packs, results.pack.name]
|
||||
: previousNames.packs;
|
||||
if (results.pack) {
|
||||
setPreviousNames(prev => ({ ...prev, packs: avoidNames }));
|
||||
}
|
||||
|
||||
const model = getModel('generate');
|
||||
const result = await generatePack(
|
||||
context?.categoryName,
|
||||
isExplicit,
|
||||
config.crudeLang,
|
||||
config.inspiration || undefined,
|
||||
avoidNames
|
||||
);
|
||||
setResults(prev => ({ ...prev, pack: result }));
|
||||
setSourceModel(model);
|
||||
|
||||
} else if (type === 'questions') {
|
||||
if (!context?.packName) {
|
||||
toast.error('Pack name is required');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await generateQuestionsWithCouncil(
|
||||
context.packName,
|
||||
config.count,
|
||||
undefined,
|
||||
config.tone,
|
||||
context.packDescription || undefined,
|
||||
context.existingQuestions,
|
||||
config.crudeLang,
|
||||
config.inspiration || undefined,
|
||||
setProgress
|
||||
);
|
||||
|
||||
const questions = result.questions || [];
|
||||
const reviews = result.reviews || [];
|
||||
|
||||
setResults(prev => ({ ...prev, questions }));
|
||||
setReviewState({
|
||||
reviews,
|
||||
summary: result.summary,
|
||||
metadata: result.metadata,
|
||||
selectedGeneratorIndex: result.selectedGeneratorIndex,
|
||||
allCandidates: result.allCandidates,
|
||||
cherryPickResult: result.cherryPickResult || null,
|
||||
selectionMode: result.selectionMode || 'whole_set',
|
||||
});
|
||||
|
||||
// Smart selection based on review results
|
||||
if (reviews.length > 0) {
|
||||
const selected = new Set<number>();
|
||||
reviews.forEach(r => {
|
||||
if (r.verdict === 'pass' || r.verdict === 'flag') {
|
||||
selected.add(r.index);
|
||||
}
|
||||
});
|
||||
setSelectedIndices(selected);
|
||||
|
||||
if (result.summary) {
|
||||
const { passed, flagged, rejected } = result.summary;
|
||||
if (rejected > 0) {
|
||||
toast.warning(`Review complete: ${passed} passed, ${flagged} flagged, ${rejected} rejected`);
|
||||
} else {
|
||||
toast.success(`Review complete: ${passed} passed, ${flagged} flagged`);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setSelectedIndices(new Set(questions.map((_, i) => i)));
|
||||
if (councilConfig.enabled && !result.metadata?.reviewerModel) {
|
||||
toast.warning('Council review failed - showing unreviewed questions');
|
||||
}
|
||||
}
|
||||
|
||||
} else if (type === 'category-ideas') {
|
||||
const avoidNames = results.categoryIdeas.length > 0
|
||||
? [...previousNames.categories, ...results.categoryIdeas.map(i => i.name)]
|
||||
: previousNames.categories;
|
||||
if (results.categoryIdeas.length > 0) {
|
||||
setPreviousNames(prev => ({ ...prev, categories: avoidNames }));
|
||||
}
|
||||
|
||||
const model = getModel('generate');
|
||||
const result = await suggestCategories(
|
||||
context?.existingCategories || [],
|
||||
isExplicit,
|
||||
config.crudeLang,
|
||||
config.inspiration || undefined,
|
||||
avoidNames
|
||||
);
|
||||
setResults(prev => ({ ...prev, categoryIdeas: result }));
|
||||
setSourceModel(model);
|
||||
|
||||
} else if (type === 'category-pack-ideas') {
|
||||
if (!context?.categoryName) {
|
||||
toast.error('Category name is required');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const avoidNames = results.packIdeas.length > 0
|
||||
? [...previousNames.packIdeas, ...results.packIdeas.map(i => i.name)]
|
||||
: previousNames.packIdeas;
|
||||
if (results.packIdeas.length > 0) {
|
||||
setPreviousNames(prev => ({ ...prev, packIdeas: avoidNames }));
|
||||
}
|
||||
|
||||
const model = getModel('generate');
|
||||
const result = await suggestPacks(
|
||||
context.categoryName,
|
||||
context?.existingPacks || [],
|
||||
isExplicit,
|
||||
config.crudeLang,
|
||||
config.inspiration || undefined,
|
||||
avoidNames
|
||||
);
|
||||
setResults(prev => ({ ...prev, packIdeas: result }));
|
||||
setSourceModel(model);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('AI generation error:', error);
|
||||
toast.error('Failed to generate content. Check your API key.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [type, context, config, results, previousNames, councilConfig.enabled]);
|
||||
|
||||
// Check if there are any results
|
||||
const hasResults = Boolean(
|
||||
results.pack ||
|
||||
results.questions.length > 0 ||
|
||||
results.categoryIdeas.length > 0 ||
|
||||
results.packIdeas.length > 0
|
||||
);
|
||||
|
||||
return {
|
||||
// Loading state
|
||||
loading,
|
||||
progress,
|
||||
|
||||
// Config
|
||||
config,
|
||||
setCount,
|
||||
setTone,
|
||||
setCrudeLang,
|
||||
setInspiration,
|
||||
|
||||
// Results
|
||||
results,
|
||||
hasResults,
|
||||
sourceModel,
|
||||
|
||||
// Review state
|
||||
reviewState,
|
||||
filter,
|
||||
setFilter,
|
||||
councilConfig,
|
||||
|
||||
// Selection
|
||||
selectedIndices,
|
||||
toggleSelection,
|
||||
selectAll,
|
||||
deselectAll,
|
||||
|
||||
// Helpers
|
||||
getReviewForIndex,
|
||||
getFilteredQuestionIndices,
|
||||
|
||||
// Actions
|
||||
generate,
|
||||
reset,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { EmojiPicker } from '@/components/ui/emoji-picker';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Plus, Loader2, X } from 'lucide-react';
|
||||
import { AIPolishButton } from '@/components/ai/AIPolishButton';
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface Topic {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface PackFormData {
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
is_premium: boolean;
|
||||
is_public: boolean;
|
||||
is_explicit: boolean;
|
||||
}
|
||||
|
||||
export interface PackFormDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
formData: PackFormData;
|
||||
onFormChange: (data: PackFormData) => void;
|
||||
onSave: () => void;
|
||||
saving: boolean;
|
||||
isEditing: boolean;
|
||||
allTopics: Topic[];
|
||||
selectedTopicIds: Set<string>;
|
||||
onTopicsChange: (topicIds: Set<string>) => void;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component
|
||||
// =============================================================================
|
||||
|
||||
export function PackFormDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
formData,
|
||||
onFormChange,
|
||||
onSave,
|
||||
saving,
|
||||
isEditing,
|
||||
allTopics,
|
||||
selectedTopicIds,
|
||||
onTopicsChange,
|
||||
}: PackFormDialogProps) {
|
||||
const setField = <K extends keyof PackFormData>(field: K, value: PackFormData[K]) => {
|
||||
onFormChange({ ...formData, [field]: value });
|
||||
};
|
||||
|
||||
const addTopic = (topicId: string) => {
|
||||
const next = new Set(selectedTopicIds);
|
||||
next.add(topicId);
|
||||
onTopicsChange(next);
|
||||
};
|
||||
|
||||
const removeTopic = (topicId: string) => {
|
||||
const next = new Set(selectedTopicIds);
|
||||
next.delete(topicId);
|
||||
onTopicsChange(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isEditing ? 'Edit Pack' : 'Create Pack'}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEditing
|
||||
? 'Update the pack details below.'
|
||||
: 'Add a new question pack to this category.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Icon */}
|
||||
<div className="space-y-2">
|
||||
<Label>Icon</Label>
|
||||
<EmojiPicker
|
||||
value={formData.icon}
|
||||
onChange={(emoji) => setField('icon', emoji)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<AIPolishButton
|
||||
text={formData.name}
|
||||
type="pack_name"
|
||||
onPolished={(val) => setField('name', val)}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setField('name', e.target.value)}
|
||||
placeholder="e.g., 36 Questions to Fall in Love"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<AIPolishButton
|
||||
text={formData.description}
|
||||
type="pack_description"
|
||||
onPolished={(val) => setField('description', val)}
|
||||
/>
|
||||
</div>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setField('description', e.target.value)}
|
||||
placeholder="Describe this pack..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Premium Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>Premium Pack</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Only available to premium users
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={formData.is_premium}
|
||||
onCheckedChange={(checked) => setField('is_premium', checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Public Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>Public</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Visible to all users by default
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={formData.is_public}
|
||||
onCheckedChange={(checked) => setField('is_public', checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Explicit Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>Explicit Content</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Contains adult or mature content
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={formData.is_explicit}
|
||||
onCheckedChange={(checked) => setField('is_explicit', checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Topics */}
|
||||
<div className="space-y-2">
|
||||
<Label>Topics</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Select topics/kinks for filtering
|
||||
</p>
|
||||
|
||||
{/* Selected topics */}
|
||||
{selectedTopicIds.size > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mb-2">
|
||||
{Array.from(selectedTopicIds).map(id => {
|
||||
const topic = allTopics.find(t => t.id === id);
|
||||
if (!topic) return null;
|
||||
return (
|
||||
<Badge
|
||||
key={id}
|
||||
variant="secondary"
|
||||
className="cursor-pointer hover:bg-destructive hover:text-destructive-foreground"
|
||||
onClick={() => removeTopic(id)}
|
||||
>
|
||||
{topic.name}
|
||||
<X className="h-3 w-3 ml-1" />
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Available topics */}
|
||||
{allTopics.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 p-2 border rounded-md max-h-32 overflow-y-auto">
|
||||
{allTopics
|
||||
.filter(t => !selectedTopicIds.has(t.id))
|
||||
.map(topic => (
|
||||
<Badge
|
||||
key={topic.id}
|
||||
variant="outline"
|
||||
className="cursor-pointer hover:bg-primary hover:text-primary-foreground"
|
||||
onClick={() => addTopic(topic.id)}
|
||||
>
|
||||
<Plus className="h-3 w-3 mr-1" />
|
||||
{topic.name}
|
||||
</Badge>
|
||||
))}
|
||||
{allTopics.filter(t => !selectedTopicIds.has(t.id)).length === 0 && (
|
||||
<span className="text-xs text-muted-foreground">All topics selected</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
No topics yet. Use "Extract Topics" on a pack to create some.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={saving}>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
'Save'
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user