575 lines
23 KiB
TypeScript
575 lines
23 KiB
TypeScript
import { useEffect, useState } from 'preact/hooks';
|
||
import type { MediaType } from '../types/index.js';
|
||
import './Modal.css';
|
||
|
||
type GenerationMode = 'brainstorm' | 'continuous';
|
||
|
||
interface NewRecommendationModalProps {
|
||
onClose: () => void;
|
||
onSubmit: (body: {
|
||
main_prompt: string;
|
||
liked_shows: string;
|
||
disliked_shows: string;
|
||
themes: string;
|
||
requirements?: string;
|
||
avoid?: string;
|
||
brainstorm_count?: number;
|
||
media_type: MediaType;
|
||
use_web_search?: boolean;
|
||
use_validator?: boolean;
|
||
hard_requirements?: boolean;
|
||
self_expansive?: boolean;
|
||
expansive_passes?: number;
|
||
expansive_mode?: 'soft' | 'extreme';
|
||
generation_mode?: GenerationMode;
|
||
total_count?: number;
|
||
validate_results?: boolean;
|
||
}) => Promise<void>;
|
||
}
|
||
|
||
const MEDIA_OPTIONS: Array<{
|
||
type: MediaType;
|
||
icon: string;
|
||
label: string;
|
||
description: string;
|
||
}> = [
|
||
{
|
||
type: 'tv_show',
|
||
icon: '📺',
|
||
label: 'TV Shows',
|
||
description: 'Serialized stories, limited series, and long-form comfort watches.',
|
||
},
|
||
{
|
||
type: 'movie',
|
||
icon: '🎬',
|
||
label: 'Movies',
|
||
description: 'Feature films, prestige cinema, and one-night picks.',
|
||
},
|
||
];
|
||
|
||
const MODE_OPTIONS: Array<{
|
||
mode: GenerationMode;
|
||
label: string;
|
||
badge: string;
|
||
description: string;
|
||
}> = [
|
||
{
|
||
mode: 'brainstorm',
|
||
label: 'Brainstorm',
|
||
badge: 'Best for variety',
|
||
description: 'Explore a broad pool of options, then rank and curate the strongest fits.',
|
||
},
|
||
{
|
||
mode: 'continuous',
|
||
label: 'Continuous',
|
||
badge: 'Best for deep search',
|
||
description: 'Generate recommendations in chained batches for a steadier, longer-running hunt.',
|
||
},
|
||
];
|
||
|
||
export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationModalProps) {
|
||
const [step, setStep] = useState<'type' | 'mode' | 'form'>('type');
|
||
const [mediaType, setMediaType] = useState<MediaType>('tv_show');
|
||
const [generationMode, setGenerationMode] = useState<GenerationMode>('brainstorm');
|
||
const [mainPrompt, setMainPrompt] = useState('');
|
||
const [likedShows, setLikedShows] = useState('');
|
||
const [dislikedShows, setDislikedShows] = useState('');
|
||
const [themes, setThemes] = useState('');
|
||
const [requirements, setRequirements] = useState('');
|
||
const [avoid, setAvoid] = useState('');
|
||
const [brainstormCount, setBrainstormCount] = useState(100);
|
||
const [totalCount, setTotalCount] = useState(30);
|
||
const [useWebSearch, setUseWebSearch] = useState(false);
|
||
const [useValidator, setUseValidator] = useState(false);
|
||
const [useHardRequirements, setUseHardRequirements] = useState(false);
|
||
const [selfExpansive, setSelfExpansive] = useState(false);
|
||
const [expansivePasses, setExpansivePasses] = useState(2);
|
||
const [expansiveMode, setExpansiveMode] = useState<'soft' | 'extreme'>('soft');
|
||
const [validateResults, setValidateResults] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key === 'Escape' && !loading) {
|
||
onClose();
|
||
}
|
||
};
|
||
|
||
window.addEventListener('keydown', handleKeyDown);
|
||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||
}, [loading, onClose]);
|
||
|
||
const mediaLabel = mediaType === 'movie' ? 'Movie' : 'TV Show';
|
||
const mediaPluralLabel = mediaType === 'movie' ? 'movies' : 'shows';
|
||
|
||
const handleSelectType = (type: MediaType) => {
|
||
setMediaType(type);
|
||
setStep('mode');
|
||
};
|
||
|
||
const handleWebSearchToggle = () => {
|
||
const next = !useWebSearch;
|
||
setUseWebSearch(next);
|
||
if (!next) {
|
||
setUseValidator(false);
|
||
setValidateResults(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async (e: Event) => {
|
||
e.preventDefault();
|
||
if (generationMode === 'brainstorm' && !mainPrompt.trim()) return;
|
||
if (!likedShows.trim()) return;
|
||
|
||
setLoading(true);
|
||
try {
|
||
if (generationMode === 'brainstorm') {
|
||
await onSubmit({
|
||
main_prompt: mainPrompt.trim(),
|
||
liked_shows: likedShows.trim(),
|
||
disliked_shows: dislikedShows.trim(),
|
||
themes: themes.trim(),
|
||
brainstorm_count: brainstormCount,
|
||
media_type: mediaType,
|
||
use_web_search: useWebSearch,
|
||
use_validator: useValidator,
|
||
hard_requirements: useHardRequirements,
|
||
self_expansive: selfExpansive,
|
||
expansive_passes: selfExpansive ? expansivePasses : 1,
|
||
expansive_mode: expansiveMode,
|
||
generation_mode: 'brainstorm',
|
||
});
|
||
} else {
|
||
await onSubmit({
|
||
main_prompt: '',
|
||
liked_shows: likedShows.trim(),
|
||
disliked_shows: dislikedShows.trim(),
|
||
themes: themes.trim(),
|
||
requirements: requirements.trim(),
|
||
avoid: avoid.trim(),
|
||
media_type: mediaType,
|
||
use_web_search: useWebSearch,
|
||
validate_results: validateResults,
|
||
generation_mode: 'continuous',
|
||
total_count: totalCount,
|
||
});
|
||
}
|
||
|
||
onClose();
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleBackdropClick = (e: MouseEvent) => {
|
||
if ((e.target as HTMLElement).classList.contains('modal-backdrop') && !loading) {
|
||
onClose();
|
||
}
|
||
};
|
||
|
||
const selectedMode = MODE_OPTIONS.find((option) => option.mode === generationMode);
|
||
|
||
return (
|
||
<div class="modal-backdrop" onClick={handleBackdropClick}>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="recommendation-modal-title">
|
||
{step === 'type' ? (
|
||
<>
|
||
<div class="modal-hero">
|
||
<div>
|
||
<div class="modal-eyebrow">Create Recommendation</div>
|
||
<h2 id="recommendation-modal-title">Shape the kind of discovery session you want.</h2>
|
||
<p class="modal-hero-copy">
|
||
Pick a format, choose how deep the search should go, and we'll take it from there.
|
||
</p>
|
||
</div>
|
||
<button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
|
||
</div>
|
||
|
||
<div class="modal-type-select">
|
||
<section class="modal-section">
|
||
<div class="modal-section-header">
|
||
<span class="modal-section-step">1</span>
|
||
<div>
|
||
<h3>Choose your format</h3>
|
||
<p>Start with the kind of thing you want to watch next.</p>
|
||
</div>
|
||
</div>
|
||
<div class="modal-type-cards">
|
||
{MEDIA_OPTIONS.map((option) => (
|
||
<button
|
||
key={option.type}
|
||
type="button"
|
||
class={`type-card${mediaType === option.type ? ' type-card--selected' : ''}`}
|
||
onClick={() => handleSelectType(option.type)}
|
||
>
|
||
<span class="type-card-title-row">
|
||
<span class="type-card-icon">{option.icon}</span>
|
||
<span class="type-card-label">{option.label}</span>
|
||
</span>
|
||
<span class="type-card-desc">{option.description}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</>
|
||
) : step === 'mode' ? (
|
||
<>
|
||
<div class="modal-header">
|
||
<div class="modal-header-left">
|
||
<button class="modal-back" onClick={() => setStep('type')} aria-label="Back" disabled={loading}>
|
||
←
|
||
</button>
|
||
<div>
|
||
<div class="modal-eyebrow">Step 2 of 3</div>
|
||
<h2 id="recommendation-modal-title">Choose the pipeline style.</h2>
|
||
</div>
|
||
</div>
|
||
<button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
|
||
</div>
|
||
|
||
<div class="modal-type-select">
|
||
<section class="modal-section">
|
||
<div class="modal-section-header">
|
||
<span class="modal-section-step">2</span>
|
||
<div>
|
||
<h3>Pick the search mode</h3>
|
||
<p>Go broad for variety or deeper for a more persistent search.</p>
|
||
</div>
|
||
</div>
|
||
<div class="mode-cards">
|
||
{MODE_OPTIONS.map((option) => (
|
||
<button
|
||
key={option.mode}
|
||
type="button"
|
||
class={`mode-card${generationMode === option.mode ? ' mode-card--active' : ''}`}
|
||
onClick={() => {
|
||
setGenerationMode(option.mode);
|
||
setStep('form');
|
||
}}
|
||
>
|
||
<span class="mode-card-badge">{option.badge}</span>
|
||
<span class="mode-card-label">{option.label}</span>
|
||
<span class="mode-card-desc">{option.description}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<div class="modal-type-footer">
|
||
<div class="modal-selection-summary">
|
||
<span class="summary-pill">{mediaType === 'movie' ? 'Movies' : 'TV Shows'}</span>
|
||
<span class="summary-pill">{selectedMode?.label}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div class="modal-header">
|
||
<div class="modal-header-left">
|
||
<button class="modal-back" onClick={() => setStep('mode')} aria-label="Back" disabled={loading}>
|
||
←
|
||
</button>
|
||
<div>
|
||
<div class="modal-eyebrow">Step 3 of 3</div>
|
||
<h2 id="recommendation-modal-title">Tell us what a great match looks like.</h2>
|
||
</div>
|
||
</div>
|
||
<button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
|
||
</div>
|
||
|
||
<form class="modal-form" onSubmit={handleSubmit}>
|
||
<div class="modal-summary-strip">
|
||
<span class="summary-pill">{mediaType === 'movie' ? 'Movies' : 'TV Shows'}</span>
|
||
<span class="summary-pill summary-pill--accent">{selectedMode?.label}</span>
|
||
<span class="summary-caption">
|
||
{generationMode === 'brainstorm'
|
||
? 'Fast wide search with ranking and curation.'
|
||
: 'Longer chained search that keeps exploring in batches.'}
|
||
</span>
|
||
</div>
|
||
|
||
{generationMode === 'brainstorm' && (
|
||
<div class="form-group form-group--full">
|
||
<label for="main-prompt">What are you looking for?</label>
|
||
<textarea
|
||
id="main-prompt"
|
||
class="form-textarea form-textarea--hero"
|
||
placeholder="Describe the mood, themes, setting, pacing, or vibe you want right now."
|
||
value={mainPrompt}
|
||
onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
|
||
rows={5}
|
||
required
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div class="modal-form-grid">
|
||
<div class="form-group">
|
||
<label for="liked-shows">{mediaLabel}s you liked</label>
|
||
<input
|
||
id="liked-shows"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder={mediaType === 'movie' ? 'e.g. Inception, The Godfather' : 'e.g. Breaking Bad, The Wire'}
|
||
value={likedShows}
|
||
onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
|
||
required
|
||
/>
|
||
<span class="form-help">A few strong examples help the pipeline lock onto your taste.</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="disliked-shows">{mediaLabel}s you disliked</label>
|
||
<input
|
||
id="disliked-shows"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder={mediaType === 'movie' ? 'e.g. Transformers' : 'e.g. Game of Thrones'}
|
||
value={dislikedShows}
|
||
onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
|
||
/>
|
||
<span class="form-help">Optional, but useful when you want to steer away from common misses.</span>
|
||
</div>
|
||
|
||
<div class={`form-group${generationMode === 'continuous' ? '' : ' form-group--full'}`}>
|
||
<label for="themes">Themes, moods, and preferences</label>
|
||
<input
|
||
id="themes"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="e.g. tense, grounded sci-fi, emotional, political intrigue"
|
||
value={themes}
|
||
onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
|
||
/>
|
||
</div>
|
||
|
||
{generationMode === 'continuous' && (
|
||
<>
|
||
<div class="form-group">
|
||
<label for="requirements">Hard requirements</label>
|
||
<input
|
||
id="requirements"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="e.g. 2020+, under 2 hours, streaming on Netflix"
|
||
value={requirements}
|
||
onInput={(e) => setRequirements((e.target as HTMLInputElement).value)}
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="avoid">Avoid</label>
|
||
<input
|
||
id="avoid"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="e.g. gore, bleak endings, broad comedy"
|
||
value={avoid}
|
||
onInput={(e) => setAvoid((e.target as HTMLInputElement).value)}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<div class="settings-card">
|
||
<div class="settings-card-header">
|
||
<h3>Tuning</h3>
|
||
<p>Adjust depth, validation, and how aggressively the search expands.</p>
|
||
</div>
|
||
|
||
{generationMode === 'continuous' ? (
|
||
<div class="slider-card">
|
||
<div class="slider-card-header">
|
||
<div>
|
||
<span class="slider-label">Total recommendations</span>
|
||
<span class="slider-copy">Generated in batches of 10 through the continuous pipeline.</span>
|
||
</div>
|
||
<span class="slider-value">{totalCount}</span>
|
||
</div>
|
||
<input
|
||
id="total-count"
|
||
type="range"
|
||
class="form-input"
|
||
min={10}
|
||
max={100}
|
||
step={10}
|
||
value={totalCount}
|
||
onInput={(e) => setTotalCount(Number((e.target as HTMLInputElement).value))}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div class="slider-card">
|
||
<div class="slider-card-header">
|
||
<div>
|
||
<span class="slider-label">Brainstorm pool size</span>
|
||
<span class="slider-copy">Higher values search wider before ranking and curation.</span>
|
||
</div>
|
||
<span class="slider-value">{brainstormCount}</span>
|
||
</div>
|
||
<input
|
||
id="brainstorm-count"
|
||
type="range"
|
||
class="form-input"
|
||
min={50}
|
||
max={200}
|
||
step={10}
|
||
value={brainstormCount}
|
||
onInput={(e) => setBrainstormCount(Number((e.target as HTMLInputElement).value))}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div class="toggle-stack">
|
||
<div class="toggle-card">
|
||
<label class="toggle-label" for="web-search">
|
||
<div class="toggle-text">
|
||
<span class="toggle-title">Use Web Search</span>
|
||
<span class="toggle-desc">Pull in live web context for fresher, more grounded {mediaPluralLabel}.</span>
|
||
</div>
|
||
<button
|
||
id="web-search"
|
||
type="button"
|
||
class={`toggle-switch${useWebSearch ? ' on' : ''}`}
|
||
aria-pressed={useWebSearch}
|
||
onClick={handleWebSearchToggle}
|
||
>
|
||
<div class="toggle-knob" />
|
||
</button>
|
||
</label>
|
||
</div>
|
||
|
||
{generationMode === 'brainstorm' ? (
|
||
<>
|
||
<div class={`toggle-card${!useWebSearch ? ' toggle-card--disabled' : ''}`}>
|
||
<label class="toggle-label">
|
||
<div class="toggle-text">
|
||
<span class="toggle-title">Validator Agent</span>
|
||
<span class="toggle-desc">
|
||
Verify brainstormed candidates against real metadata before ranking.
|
||
</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class={`toggle-switch${useValidator ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
|
||
aria-pressed={useValidator}
|
||
onClick={() => useWebSearch && setUseValidator((value) => !value)}
|
||
>
|
||
<div class="toggle-knob" />
|
||
</button>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="toggle-card">
|
||
<label class="toggle-label">
|
||
<div class="toggle-text">
|
||
<span class="toggle-title">Hard Requirements</span>
|
||
<span class="toggle-desc">Bias ranking toward strict fit instead of softer exploratory matches.</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class={`toggle-switch${useHardRequirements ? ' on' : ''}`}
|
||
aria-pressed={useHardRequirements}
|
||
onClick={() => setUseHardRequirements((value) => !value)}
|
||
>
|
||
<div class="toggle-knob" />
|
||
</button>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="toggle-card">
|
||
<label class="toggle-label">
|
||
<div class="toggle-text">
|
||
<span class="toggle-title">Self Expansive Search</span>
|
||
<span class="toggle-desc">Run extra passes using earlier full matches as context.</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class={`toggle-switch${selfExpansive ? ' on' : ''}`}
|
||
aria-pressed={selfExpansive}
|
||
onClick={() => setSelfExpansive((value) => !value)}
|
||
>
|
||
<div class="toggle-knob" />
|
||
</button>
|
||
</label>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div class={`toggle-card${!useWebSearch ? ' toggle-card--disabled' : ''}`}>
|
||
<label class="toggle-label">
|
||
<div class="toggle-text">
|
||
<span class="toggle-title">Validate Results</span>
|
||
<span class="toggle-desc">Verify continuous batches against real metadata before final ranking.</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class={`toggle-switch${validateResults ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
|
||
aria-pressed={validateResults}
|
||
onClick={() => useWebSearch && setValidateResults((value) => !value)}
|
||
>
|
||
<div class="toggle-knob" />
|
||
</button>
|
||
</label>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{generationMode === 'brainstorm' && selfExpansive && (
|
||
<div class="expansive-options">
|
||
<div class="slider-card slider-card--compact">
|
||
<div class="slider-card-header">
|
||
<div>
|
||
<span class="slider-label">Extra passes</span>
|
||
<span class="slider-copy">How many additional exploration rounds to run.</span>
|
||
</div>
|
||
<span class="slider-value">{expansivePasses}</span>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
class="form-input"
|
||
min={1}
|
||
max={5}
|
||
step={1}
|
||
value={expansivePasses}
|
||
onInput={(e) => setExpansivePasses(Number((e.target as HTMLInputElement).value))}
|
||
/>
|
||
</div>
|
||
|
||
<div class="segmented-control">
|
||
<button
|
||
type="button"
|
||
class={`segmented-control-btn${expansiveMode === 'soft' ? ' segmented-control-btn--active' : ''}`}
|
||
onClick={() => setExpansiveMode('soft')}
|
||
>
|
||
Soft
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class={`segmented-control-btn${expansiveMode === 'extreme' ? ' segmented-control-btn--active' : ''}`}
|
||
onClick={() => setExpansiveMode('extreme')}
|
||
>
|
||
Extreme
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
|
||
Cancel
|
||
</button>
|
||
<button type="submit" class="btn-primary" disabled={loading}>
|
||
{loading ? 'Creating…' : generationMode === 'brainstorm' ? 'Start Recommendation' : 'Start Continuous Search'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|