281 lines
13 KiB
TypeScript
281 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { GoogleGenAI, Type } from "@google/genai";
|
|
import { Scenario } from '../types';
|
|
import { CBT_GLOSSARY } from '../constants';
|
|
import { Sparkles, X, Loader2, AlertCircle, Info, Target, UserCircle2, BrainCircuit, Check, BarChart } from 'lucide-react';
|
|
import { Button } from './ui/button';
|
|
import { Textarea } from './ui/textarea';
|
|
import { ScrollArea } from './ui/scroll-area';
|
|
import { Card } from './ui/card';
|
|
import { Badge } from './ui/badge';
|
|
|
|
interface ScenarioGeneratorProps {
|
|
onGenerate: (scenario: Scenario) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const ScenarioGenerator: React.FC<ScenarioGeneratorProps> = ({ onGenerate, onCancel }) => {
|
|
const [prompt, setPrompt] = useState('');
|
|
const [selectedConcepts, setSelectedConcepts] = useState<string[]>([]);
|
|
const [selectedDifficulty, setSelectedDifficulty] = useState<Scenario['difficulty']>('Intermediate');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const toggleConcept = (term: string) => {
|
|
setSelectedConcepts(prev =>
|
|
prev.includes(term) ? prev.filter(t => t !== term) : [...prev, term]
|
|
);
|
|
};
|
|
|
|
const handleGenerate = async () => {
|
|
if (!prompt.trim() && selectedConcepts.length === 0) return;
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const ai = new GoogleGenAI({ apiKey: import.meta.env.VITE_GEMINI_API_KEY });
|
|
|
|
const schema = {
|
|
type: Type.OBJECT,
|
|
properties: {
|
|
id: { type: Type.STRING },
|
|
title: { type: Type.STRING },
|
|
characterName: { type: Type.STRING },
|
|
description: { type: Type.STRING },
|
|
category: {
|
|
type: Type.STRING,
|
|
enum: ['Social Anxiety', 'Workplace', 'Relationships', 'Self-Talk']
|
|
},
|
|
difficulty: {
|
|
type: Type.STRING,
|
|
enum: ['Beginner', 'Intermediate', 'Advanced']
|
|
},
|
|
systemInstruction: { type: Type.STRING },
|
|
initialMessage: { type: Type.STRING },
|
|
cbtFocus: {
|
|
type: Type.ARRAY,
|
|
items: { type: Type.STRING }
|
|
}
|
|
},
|
|
required: ['id', 'title', 'characterName', 'description', 'category', 'difficulty', 'systemInstruction', 'initialMessage', 'cbtFocus']
|
|
};
|
|
|
|
const selectedContext = selectedConcepts.length > 0
|
|
? `Focus specifically on these CBT concepts: ${selectedConcepts.join(', ')}.`
|
|
: '';
|
|
|
|
const result = await ai.models.generateContent({
|
|
model: 'gemini-3-flash-preview',
|
|
config: {
|
|
responseMimeType: 'application/json',
|
|
responseSchema: schema,
|
|
systemInstruction: `
|
|
[CONTEXT]
|
|
You are a Clinical CBT Scenario Architect.
|
|
The user requires a structured clinical simulation designed to address specific cognitive distortions and behavioral challenges.
|
|
Clinical Focus: ${selectedContext}
|
|
|
|
[TASK]
|
|
Transform the user's prompt into a cohesive, structured clinical scenario that sets up a targeted roleplay environment.
|
|
|
|
[CONSTRAINTS]
|
|
- CATEGORIZATION: You MUST categorize the scenario appropriately (Social Anxiety, Workplace, Relationships, or Self-Talk).
|
|
- DIFFICULTY CALIBRATION: The requested difficulty is '${selectedDifficulty}'.
|
|
- 'Beginner': Low stakes, high support, clear-cut distortions, AI character is cooperative.
|
|
- 'Intermediate': Ambiguous stakes, moderate social friction, subtle distortions, AI character has specific needs.
|
|
- 'Advanced': High emotional triggers, persistent clinical resistance, complex cognitive patterns.
|
|
- INTERNAL LOGIC: Provide a detailed "INTERNAL CBT LOGIC" section instructing the AI character how to react to the user's progress or cognitive lapses during the future roleplay.
|
|
- CHARACTER VOICE: Define a realistic, emotionally consistent voice profile.
|
|
|
|
[OUTPUT REQUIREMENTS]
|
|
Return ONLY a valid JSON object conforming exactly to the requested schema. Ensure all arrays and nested objects are populated correctly.
|
|
`
|
|
},
|
|
contents: [
|
|
{ role: 'user', parts: [{ text: `Generate a clinical scenario for: ${prompt || 'A scenario exploring the chosen CBT concepts.'}` }] }
|
|
]
|
|
});
|
|
|
|
if (result.text) {
|
|
const scenario = JSON.parse(result.text) as Scenario;
|
|
// Enforce the user-selected difficulty in the final object
|
|
scenario.difficulty = selectedDifficulty;
|
|
scenario.id = `custom-${Date.now()}-${scenario.id}`;
|
|
onGenerate(scenario);
|
|
} else {
|
|
throw new Error("No content generated");
|
|
}
|
|
|
|
} catch (err: any) {
|
|
console.error("Generation error:", err);
|
|
setError("Clinical scenario synthesis failed. Please refine your parameters.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const getConceptVariant = (category: string, isSelected: boolean) => {
|
|
if (!isSelected) return 'outline';
|
|
return 'default';
|
|
};
|
|
|
|
const getConceptColorClass = (category: string, isSelected: boolean) => {
|
|
if (!isSelected) return 'text-slate-500 border-slate-200 hover:border-slate-300';
|
|
switch (category) {
|
|
case 'Distortion': return 'bg-rose-600 border-rose-600 hover:bg-rose-700 shadow-md shadow-rose-100';
|
|
case 'Technique': return 'bg-teal-600 border-teal-600 hover:bg-teal-700 shadow-md shadow-teal-100';
|
|
case 'Concept': return 'bg-amber-600 border-amber-600 hover:bg-amber-700 shadow-md shadow-amber-100';
|
|
default: return 'bg-slate-800 border-slate-800 hover:bg-slate-900';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md overflow-y-auto">
|
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in duration-300 border border-slate-100 my-8 flex flex-col max-h-[90vh]">
|
|
{/* Header */}
|
|
<div className="p-6 bg-teal-600 text-white flex justify-between items-start relative overflow-hidden shrink-0">
|
|
<div className="relative z-10">
|
|
<h2 className="text-2xl font-bold flex items-center gap-3">
|
|
<Sparkles size={28} className="text-teal-200" />
|
|
Scenario Synthesis
|
|
</h2>
|
|
<p className="text-teal-50 text-sm mt-1 font-light opacity-90">
|
|
Construct an evidence-based clinical environment.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onCancel}
|
|
className="relative z-10 text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 border border-white/10"
|
|
>
|
|
<X size={20} />
|
|
</Button>
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-10 -mt-10 blur-2xl"></div>
|
|
</div>
|
|
|
|
<ScrollArea className="flex-grow p-8 bg-[#FCFDFF]">
|
|
<div className="space-y-6 pb-4">
|
|
{/* Prompting Guide */}
|
|
<Card className="bg-teal-50/50 border-teal-100 p-4 shadow-none">
|
|
<div className="flex items-center gap-2 text-teal-700 mb-3">
|
|
<Info size={16} />
|
|
<h3 className="text-xs font-bold uppercase tracking-wider">Clinical Blueprint</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-1.5 text-[10px] font-bold text-teal-600 uppercase">
|
|
<UserCircle2 size={12} /> Character Role
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 leading-tight">Define who the AI plays.</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-1.5 text-[10px] font-bold text-teal-600 uppercase">
|
|
<Target size={12} /> The Challenge
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 leading-tight">Describe the social friction.</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-1.5 text-[10px] font-bold text-teal-600 uppercase">
|
|
<BrainCircuit size={12} /> CBT Focus
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 leading-tight">Target specific distortions.</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Difficulty Selection */}
|
|
<div className="space-y-3">
|
|
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest">
|
|
Communication Difficulty
|
|
</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{(['Beginner', 'Intermediate', 'Advanced'] as const).map((level) => (
|
|
<Button
|
|
key={level}
|
|
variant={selectedDifficulty === level ? "default" : "outline"}
|
|
onClick={() => setSelectedDifficulty(level)}
|
|
className={`h-12 flex items-center justify-center gap-2 rounded-xl border-2 transition-all text-[11px] font-bold ${selectedDifficulty === level
|
|
? 'bg-teal-50 border-teal-600 text-teal-700 shadow-sm shadow-teal-50 hover:bg-teal-100 hover:text-teal-800'
|
|
: 'bg-white border-slate-200 text-slate-500 hover:border-slate-300'
|
|
}`}
|
|
>
|
|
<BarChart size={14} className={selectedDifficulty === level ? 'text-teal-600' : 'text-slate-400'} />
|
|
{level}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Clinical Targets (Selection) */}
|
|
<div className="space-y-3">
|
|
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest">
|
|
Clinical Targets (Optional)
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{CBT_GLOSSARY.map(concept => {
|
|
const isSelected = selectedConcepts.includes(concept.term);
|
|
return (
|
|
<Badge
|
|
key={concept.term}
|
|
variant={getConceptVariant(concept.category, isSelected) as any}
|
|
onClick={() => toggleConcept(concept.term)}
|
|
className={`px-3 py-1.5 rounded-lg text-[10px] font-bold border transition-all flex items-center gap-1.5 cursor-pointer hover:opacity-90 ${getConceptColorClass(concept.category, isSelected)}`}
|
|
>
|
|
{isSelected && <Check size={10} />}
|
|
{concept.term}
|
|
</Badge>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">
|
|
Simulation Context / Custom Instructions
|
|
</label>
|
|
<Textarea
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
placeholder="e.g. Practicing assertiveness with a pushy salesperson who won't take 'no' for an answer."
|
|
className="w-full h-28 p-5 border-slate-200 rounded-2xl focus-visible:ring-teal-500 resize-none text-slate-800 placeholder:text-slate-400 text-sm leading-relaxed shadow-inner bg-white"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-rose-50 text-rose-600 p-4 rounded-xl text-xs flex items-center gap-3 border border-rose-100 font-medium">
|
|
<AlertCircle size={18} />
|
|
{error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<div className="p-6 bg-slate-50 border-t border-slate-100 flex justify-end shrink-0">
|
|
<Button
|
|
onClick={handleGenerate}
|
|
disabled={(!prompt.trim() && selectedConcepts.length === 0) || isLoading}
|
|
className="bg-teal-600 text-white h-12 px-8 rounded-2xl font-bold hover:bg-teal-700 flex items-center gap-3 transition-all shadow-lg shadow-teal-100 text-sm uppercase tracking-widest"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 size={20} className="animate-spin" />
|
|
Synthesizing...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Sparkles size={20} />
|
|
Initiate Build
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScenarioGenerator;
|